diff --git a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx index 60de866..3d8cf9e 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx +++ b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx @@ -1,4 +1,4 @@ -import { ServiceVersion } from "@/types"; +import { NodeVersion } from "@/types"; import { Flex } from "@chakra-ui/react"; import { Table, @@ -16,12 +16,12 @@ interface Props { } const Legend = ({ elements }: Props) => { - const serviceVersions = elements + const serviceVersions: NodeVersion[] = elements .map((element) => element.data.versions) .flat() .filter(Boolean); - const flowIds = serviceVersions.map((version) => version.flow_id); + const flowIds = serviceVersions.map((version) => version.flowId); const uniqueFlowIds = [...new Set(flowIds)]; const servicesForFlowId = (flowId: string): string => { @@ -31,7 +31,7 @@ const Legend = ({ elements }: Props) => { if ( versions != null && versions.length > 0 && - versions.some((version: ServiceVersion) => version.flow_id === flowId) + versions.some((version: NodeVersion) => version.flowId === flowId) ) { return element; } @@ -43,7 +43,7 @@ const Legend = ({ elements }: Props) => { services.some( (service) => service?.data.versions.length === 1 && - service?.data.versions[0].is_baseline, + service?.data.versions[0].isBaseline, ) ) { return "—"; diff --git a/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts b/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts index 0f958d1..e009593 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts +++ b/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts @@ -46,13 +46,14 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/cartservice:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/cartservice:main", + isBaseline: true, }, { - flow_id: "dev-hr7dwojzkk", - image_tag: "kurtosistech/cartservice:demo-on-sale", + flowId: "dev-hr7dwojzkk", + imageTag: "kurtosistech/cartservice:demo-on-sale", + isBaseline: false, }, ], }, @@ -62,13 +63,14 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/checkoutservice:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/checkoutservice:main", + isBaseline: true, }, { - flow_id: "dev-hr7dwojzkk", - image_tag: "kurtosistech/checkoutservice:demo-on-sale", + flowId: "dev-hr7dwojzkk", + imageTag: "kurtosistech/checkoutservice:demo-on-sale", + isBaseline: false, }, ], }, @@ -78,13 +80,14 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/frontend:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/frontend:main", + isBaseline: true, }, { - flow_id: "dev-hr7dwojzkk", - image_tag: "kurtosistech/frontend:demo-on-sale", + flowId: "dev-hr7dwojzkk", + imageTag: "kurtosistech/frontend:demo-on-sale", + isBaseline: false, }, ], }, @@ -94,9 +97,9 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/emailservice:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/emailservice:main", + isBaseline: true, }, ], }, @@ -106,9 +109,9 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/paymentservice:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/paymentservice:main", + isBaseline: true, }, ], }, @@ -118,9 +121,9 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/postgres:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/postgres:main", + isBaseline: true, }, ], }, @@ -130,9 +133,9 @@ const data: ClusterTopology = { type: "service", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/shippingservice:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/shippingservice:main", + isBaseline: true, }, ], }, @@ -142,9 +145,9 @@ const data: ClusterTopology = { type: "gateway", versions: [ { - flow_id: "k8s-namespace-1", - image_tag: "kurtosistech/gateway:main", - is_baseline: true, + flowId: "k8s-namespace-1", + imageTag: "kurtosistech/gateway:main", + isBaseline: true, }, ], }, diff --git a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts index 21e2b0b..0f5244f 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts +++ b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts @@ -1,6 +1,6 @@ import cytoscapePopper from "cytoscape-popper"; import tippy, { Instance } from "tippy.js"; -import { ServiceVersion } from "@/types"; +import { NodeVersion } from "@/types"; import "./tippy.css"; // @ts-expect-error WIP @@ -30,7 +30,7 @@ const tippyFactory: cytoscapePopper.PopperFactory = (ref, content) => { export const createTooltip = ( node: cytoscape.NodeSingular, ): Instance | null => { - const versions: ServiceVersion[] = node.data("versions"); + const versions: NodeVersion[] = node.data("versions"); console.log("versions", versions); if (!versions || versions.length === 0) { return null; @@ -48,7 +48,7 @@ export const createTooltip = (
- ${versions.map((v: ServiceVersion) => `