From f7ac7d1c0e3cd6993222020e2f1e9e19a0978c44 Mon Sep 17 00:00:00 2001 From: Roshan Ghojoghi Date: Mon, 6 Nov 2023 15:05:58 +0300 Subject: [PATCH] 166 cannot select distribution when config is empty (#176) * fix: yaml Object key.source undefined fix * fix: empty url serverSide validate bug --- .../otelCollectorConfigValidation.test.ts | 2 +- .../monaco-editor/otelCollectorConfigValidation.ts | 2 +- .../src/components/monaco-editor/parseYaml.test.ts | 6 +++--- .../src/components/monaco-editor/parseYaml.ts | 14 +++++++------- .../otelbin/src/components/react-flow/FlowClick.ts | 6 +++--- .../src/components/react-flow/ReactFlow.tsx | 12 ++++++------ .../components/validation-type/ValidationTile.tsx | 13 ++++--------- 7 files changed, 25 insertions(+), 30 deletions(-) diff --git a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts index e2fc2057..dc14d6f4 100644 --- a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts +++ b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.test.ts @@ -97,7 +97,7 @@ describe("findLeafs", () => { const docElements = getParsedValue(yaml); const yamlItems = extractServiceItems(docElements); - const result = findLeafs(yamlItems, docElements.filter((item: IItem) => item.key.source === "service")[0], {}); + const result = findLeafs(yamlItems, docElements.filter((item: IItem) => item.key?.source === "service")[0], {}); expect(result).toEqual({ extensions: [ { source: "health_check", offset: 64 }, diff --git a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.ts b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.ts index f299c6d8..905867e1 100644 --- a/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.ts +++ b/packages/otelbin/src/components/monaco-editor/otelCollectorConfigValidation.ts @@ -41,7 +41,7 @@ export function validateOtelCollectorConfigurationAndSetMarkers( serviceItemsData = {}; serviceItemsData = findLeafs( serviceItems, - docElements.filter((item: IItem) => item.key.source === "service")[0], + docElements.filter((item: IItem) => item.key?.source === "service")[0], serviceItemsData ); diff --git a/packages/otelbin/src/components/monaco-editor/parseYaml.test.ts b/packages/otelbin/src/components/monaco-editor/parseYaml.test.ts index a5e52952..bddd5bb2 100644 --- a/packages/otelbin/src/components/monaco-editor/parseYaml.test.ts +++ b/packages/otelbin/src/components/monaco-editor/parseYaml.test.ts @@ -107,12 +107,12 @@ describe("findPipelinesKeyValues", () => { const yaml = editorBinding.fallback; const docElements = getParsedValue(yaml); const serviceItems: IItem[] | undefined = extractServiceItems(docElements); - const pipeLineItems: IItem[] | undefined = serviceItems?.filter((item: IItem) => item.key.source === "pipelines"); + const pipeLineItems: IItem[] | undefined = serviceItems?.filter((item: IItem) => item.key?.source === "pipelines"); const result = findPipelinesKeyValues( pipeLineItems, - docElements.filter((item: IItem) => item.key.source === "pipelines")[0], - docElements.filter((item: IItem) => item.key.source === "service")[0], + docElements.filter((item: IItem) => item.key?.source === "pipelines")[0], + docElements.filter((item: IItem) => item.key?.source === "service")[0], {} ); expect(result).toEqual({ diff --git a/packages/otelbin/src/components/monaco-editor/parseYaml.ts b/packages/otelbin/src/components/monaco-editor/parseYaml.ts index 4de92ebb..0c901169 100644 --- a/packages/otelbin/src/components/monaco-editor/parseYaml.ts +++ b/packages/otelbin/src/components/monaco-editor/parseYaml.ts @@ -82,13 +82,13 @@ export function extractMainItemsData(docElements: IItem[]) { const mainItemsData: IValidateItem = {}; const mainKeys = docElements - .filter((item: IItem) => item.key.source !== "service") - .map((item: IItem) => item.key.source); + .filter((item: IItem) => item.key?.source !== "service") + .map((item: IItem) => item.key?.source); mainKeys.forEach((key: string) => { mainItemsData[key] = docElements - .filter((item: IItem) => item.key.source === key)[0] + .filter((item: IItem) => item.key?.source === key)[0] ?.value?.items?.map((item: IItem) => { return { source: item.key?.source, offset: item.key?.offset }; }) || []; @@ -100,7 +100,7 @@ export function extractServiceItems(docElements: IItem[]) { const serviceItems = (Array.isArray(docElements) && docElements.length > 0 && - docElements.filter((item: IItem) => item.key.source === "service")[0]?.value?.items) || + docElements.filter((item: IItem) => item.key?.source === "service")[0]?.value?.items) || []; return serviceItems; } @@ -114,7 +114,7 @@ export function findLeafs(yamlItems?: IItem[], parent?: IItem, serviceItemsData? if (item.value.source && parent) { const source = item.value.source; const offset = item.value.offset; - const parentKey = parent.key.source; + const parentKey = parent.key?.source; if (!serviceItemsData) return; if (!serviceItemsData[parentKey]) { @@ -148,8 +148,8 @@ export function findPipelinesKeyValues( if (item.value.source && parent) { const source = item.value.source; const offset = item.value.offset; - const parentKey = parent.key.source; - const level1ParentKey = level1Parent?.key.source; + const parentKey = parent.key?.source; + const level1ParentKey = level1Parent?.key?.source; if (!serviceItemsData) return; if (!serviceItemsData[parentKey]) { serviceItemsData[parentKey] = []; diff --git a/packages/otelbin/src/components/react-flow/FlowClick.ts b/packages/otelbin/src/components/react-flow/FlowClick.ts index fa545f34..4728e9ca 100644 --- a/packages/otelbin/src/components/react-flow/FlowClick.ts +++ b/packages/otelbin/src/components/react-flow/FlowClick.ts @@ -33,12 +33,12 @@ export function FlowClick( const mainItemsData: IValidateItem = extractMainItemsData(docElements); let pipelinesKeyValues: IValidateItem | undefined = {}; const serviceItems: IItem[] | undefined = extractServiceItems(docElements); - const pipeLineItems: IItem[] | undefined = serviceItems?.filter((item: IItem) => item.key.source === "pipelines"); + const pipeLineItems: IItem[] | undefined = serviceItems?.filter((item: IItem) => item.key?.source === "pipelines"); pipelinesKeyValues = findPipelinesKeyValues( pipeLineItems, - docElements.filter((item: IItem) => item.key.source === "pipelines")[0], - docElements.filter((item: IItem) => item.key.source === "service")[0], + docElements.filter((item: IItem) => item.key?.source === "pipelines")[0], + docElements.filter((item: IItem) => item.key?.source === "service")[0], pipelinesKeyValues ); diff --git a/packages/otelbin/src/components/react-flow/ReactFlow.tsx b/packages/otelbin/src/components/react-flow/ReactFlow.tsx index d773cc98..f3f9fab1 100644 --- a/packages/otelbin/src/components/react-flow/ReactFlow.tsx +++ b/packages/otelbin/src/components/react-flow/ReactFlow.tsx @@ -42,8 +42,8 @@ export default function Flow({ const parsedYaml = Array.from(new Parser().parse(value)); const doc = parsedYaml.find((token) => token.type === "document") as Document; const docItems = doc?.value?.items ?? []; - const docService = docItems.find((item: IItem) => item.key.source === "service"); - return docService?.value.items.find((item: IItem) => item.key.source === "pipelines"); + const docService = docItems.find((item: IItem) => item.key?.source === "service"); + return docService?.value.items.find((item: IItem) => item.key?.source === "pipelines"); }, [value]); const initNodes = useNodes(jsonData); const [nodes, setNodes] = useNodesState(initNodes !== undefined ? initNodes : []); @@ -127,8 +127,8 @@ export default function Flow({ (pipelines.value.items[i]?.value.items[j]?.value.items[0]?.value.offset || 0) + (pipelines.value.items[i]?.value.items[j]?.value.items[0]?.value.source?.length || 0) ) { - const level2 = pipelines.value.items[i]?.key.source || ""; - const level3 = pipelines.value.items[i]?.value.items[j]?.key.source || ""; + const level2 = pipelines.value.items[i]?.key?.source || ""; + const level3 = pipelines.value.items[i]?.value.items[j]?.key?.source || ""; setFocusOnNode(wordAtCursor.word, level2, level3); setCenter( getNodePositionX(wordAtCursor.word, level2, level3) + 50, @@ -143,8 +143,8 @@ export default function Flow({ (pipelines.value.items[i]?.value.items[j]?.value.items[k]?.value.offset || 0) + (pipelines.value.items[i]?.value.items[j]?.value.items[k]?.value.source?.length || 0) ) { - const level2 = pipelines.value.items[i]?.key.source || ""; - const level3 = pipelines.value.items[i]?.value.items[j]?.key.source || ""; + const level2 = pipelines.value.items[i]?.key?.source || ""; + const level3 = pipelines.value.items[i]?.value.items[j]?.key?.source || ""; setFocusOnNode(wordAtCursor.word, level2, level3); setCenter( getNodePositionX(wordAtCursor.word, level2, level3) + 50, diff --git a/packages/otelbin/src/components/validation-type/ValidationTile.tsx b/packages/otelbin/src/components/validation-type/ValidationTile.tsx index a08ffe03..d9a5783a 100644 --- a/packages/otelbin/src/components/validation-type/ValidationTile.tsx +++ b/packages/otelbin/src/components/validation-type/ValidationTile.tsx @@ -11,7 +11,6 @@ import { IconButton } from "../icon-button"; import { CurrentBadge } from "./ValidationTypeContent"; import type { Distribution } from "~/types"; import { useState } from "react"; -import { useRouter } from "next/navigation"; import { useUrlState } from "~/lib/urlState/client/useUrlState"; import { distroBinding, distroVersionBinding } from "../validation/binding"; import type { ICurrentDistro } from "./ValidationType"; @@ -29,11 +28,10 @@ export default function ValidationTile({ }) { const isDistroActive = id === currentDistro?.provider; - const [, getUrl] = useUrlState([distroBinding, distroVersionBinding]); + const [, getLink] = useUrlState([distroBinding, distroVersionBinding]); const [version, setVersion] = useState( isDistroActive ? currentDistro.version : data.releases[0]?.version ?? "" ); - const router = useRouter(); function formatVersionsRange(versions?: string[] | string) { if (typeof versions === "string") { @@ -114,12 +112,9 @@ export default function ValidationTile({