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) => `${v.flow_id}${v.image_tag}`).join("")} + ${versions.map((v: NodeVersion) => `${v.flowId}${v.imageTag}`).join("")} `; diff --git a/kontrol-frontend/src/types.d.ts b/kontrol-frontend/src/types.d.ts index 8e8bbb3..a4cf58a 100644 --- a/kontrol-frontend/src/types.d.ts +++ b/kontrol-frontend/src/types.d.ts @@ -1,25 +1,12 @@ import type { components } from "cli-kontrol-api/api/typescript/client/types"; -export interface ServiceVersion { - flow_id: string; - image_tag: string; - is_baseline?: boolean; -} -type OldNode = components["schemas"]["Node"]; -interface NewNode extends OldNode { - id: string; - label: string; - versions: ServiceVersion[]; -} +export type Node = components["schemas"]["Node"]; -export type Node = NewNode; export type Edge = components["schemas"]["Edge"]; -interface NewClusterTopology extends components["schemas"]["ClusterTopology"] { - nodes: NewNode[]; -} +export type ClusterTopology = components["schemas"]["ClusterTopology"]; -export type ClusterTopology = NewClusterTopology; +export type NodeVersion = components["schemas"]["NodeVersion"]; export interface ExtendedNode { data: Node;