From 4655337f15bd2a9b1e740794497b285d9b98f04e Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Mon, 16 Sep 2024 16:52:52 -0700 Subject: [PATCH 1/8] WIP types --- .../CytoscapeGraph/mocks/response.ts | 76 +++++++++++++++++-- kontrol-frontend/src/types.d.ts | 21 ++++- 2 files changed, 87 insertions(+), 10 deletions(-) diff --git a/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts b/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts index 227ebdc..0f958d1 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts +++ b/kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts @@ -44,49 +44,109 @@ const data: ClusterTopology = { id: "cartservice", label: "cartservice", type: "service", - versions: ["dev-hr7dwojzkk", "prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/cartservice:main", + is_baseline: true, + }, + { + flow_id: "dev-hr7dwojzkk", + image_tag: "kurtosistech/cartservice:demo-on-sale", + }, + ], }, { id: "checkoutservice", label: "checkoutservice", type: "service", - versions: ["dev-hr7dwojzkk", "prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/checkoutservice:main", + is_baseline: true, + }, + { + flow_id: "dev-hr7dwojzkk", + image_tag: "kurtosistech/checkoutservice:demo-on-sale", + }, + ], }, { id: "frontend", label: "frontend", type: "service", - versions: ["dev-hr7dwojzkk", "prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/frontend:main", + is_baseline: true, + }, + { + flow_id: "dev-hr7dwojzkk", + image_tag: "kurtosistech/frontend:demo-on-sale", + }, + ], }, { id: "emailservice", label: "emailservice", type: "service", - versions: ["prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/emailservice:main", + is_baseline: true, + }, + ], }, { id: "paymentservice", label: "paymentservice", type: "service", - versions: ["prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/paymentservice:main", + is_baseline: true, + }, + ], }, { id: "postgres", label: "postgres", type: "service", - versions: ["prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/postgres:main", + is_baseline: true, + }, + ], }, { id: "shippingservice", label: "shippingservice", type: "service", - versions: ["prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/shippingservice:main", + is_baseline: true, + }, + ], }, { id: "ingress", label: "ingress", type: "gateway", - versions: ["prod"], + versions: [ + { + flow_id: "k8s-namespace-1", + image_tag: "kurtosistech/gateway:main", + is_baseline: true, + }, + ], }, ], }; diff --git a/kontrol-frontend/src/types.d.ts b/kontrol-frontend/src/types.d.ts index 941b57b..679026a 100644 --- a/kontrol-frontend/src/types.d.ts +++ b/kontrol-frontend/src/types.d.ts @@ -1,9 +1,26 @@ import type { components } from "cli-kontrol-api/api/typescript/client/types"; -export type ClusterTopology = components["schemas"]["ClusterTopology"]; -export type Node = components["schemas"]["Node"]; +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 = NewNode; export type Edge = components["schemas"]["Edge"]; +interface NewClusterTopology extends components["schemas"]["ClusterTopology"] { + nodes: NewNode[]; +} + +export type ClusterTopology = NewClusterTopology; + export interface ExtendedNode { data: Node; classes: string; From 4c96bd6a69bbd20093cf54993154baa11a666440 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Mon, 16 Sep 2024 20:38:28 -0700 Subject: [PATCH 2/8] feat: more detailed hover tooltips --- .../CytoscapeGraph/plugins/tippy.css | 28 +++++++++++++------ .../CytoscapeGraph/plugins/tippy.ts | 20 +++++++++++-- kontrol-frontend/src/types.d.ts | 2 +- 3 files changed, 38 insertions(+), 12 deletions(-) diff --git a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.css b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.css index 3860895..7d46774 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.css +++ b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.css @@ -8,6 +8,7 @@ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); font-family: monospace; font-size: 16px; + width: 600px; } .tooltip ul { @@ -17,23 +18,23 @@ .tooltip::before { content: ""; position: absolute; - top: 50%; - left: -15px; /* Adjust this value to position the arrow correctly */ - margin-top: -8px; /* This value should be half of border-width to center the arrow */ + top: -7px; + left: 50%; + margin-top: -8px; border-width: 8px; border-style: solid; - border-color: transparent #c0bfbf transparent transparent; + border-color: transparent transparent #c0bfbf transparent; } .tooltip::after { content: ""; position: absolute; - top: 50%; - left: -14px; /* Adjust this value to position the arrow correctly */ - margin-top: -8px; /* This value should be half of border-width to center the arrow */ + top: -6px; + left: 50%; + margin-top: -8px; border-width: 8px; border-style: solid; - border-color: transparent white transparent transparent; + border-color: transparent transparent white transparent; } .dot { @@ -44,3 +45,14 @@ border-radius: 50%; margin-right: 8px; } + +.tooltip table { + font-family: monospace; +} + +.tooltip table td, .tooltip table th { + padding: 4px 8px; + font-size: 14px; + text-align: left; + border-bottom: 1px solid #f0f0f0; +} diff --git a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts index 4d7beb8..21e2b0b 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts +++ b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts @@ -1,5 +1,6 @@ import cytoscapePopper from "cytoscape-popper"; import tippy, { Instance } from "tippy.js"; +import { ServiceVersion } from "@/types"; import "./tippy.css"; // @ts-expect-error WIP @@ -14,7 +15,7 @@ const tippyFactory: cytoscapePopper.PopperFactory = (ref, content) => { content: content, // your own preferences: arrow: true, - placement: "right", + placement: "bottom", hideOnClick: false, sticky: "reference", @@ -29,7 +30,8 @@ const tippyFactory: cytoscapePopper.PopperFactory = (ref, content) => { export const createTooltip = ( node: cytoscape.NodeSingular, ): Instance | null => { - const versions = node.data("versions"); + const versions: ServiceVersion[] = node.data("versions"); + console.log("versions", versions); if (!versions || versions.length === 0) { return null; } @@ -37,7 +39,19 @@ export const createTooltip = ( content: () => { const elem = document.createElement("div"); // TODO: sanitize - elem.innerHTML = `Versions: `; + elem.innerHTML = ` + + + + + + + + + ${versions.map((v: ServiceVersion) => ``).join("")} + +
Flow IDImage Tag
${v.flow_id}${v.image_tag}
+ `; elem.classList.add("tooltip"); return elem; }, diff --git a/kontrol-frontend/src/types.d.ts b/kontrol-frontend/src/types.d.ts index 679026a..8e8bbb3 100644 --- a/kontrol-frontend/src/types.d.ts +++ b/kontrol-frontend/src/types.d.ts @@ -1,6 +1,6 @@ import type { components } from "cli-kontrol-api/api/typescript/client/types"; -interface ServiceVersion { +export interface ServiceVersion { flow_id: string; image_tag: string; is_baseline?: boolean; From 2b0b56c98656cfb5abd42b703bf20e7b9db7a703 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Mon, 16 Sep 2024 21:21:22 -0700 Subject: [PATCH 3/8] feat: legend shows flow IDs --- .../src/components/CytoscapeGraph/Legend.tsx | 93 +++++++++++++++++++ .../src/components/CytoscapeGraph/index.tsx | 31 ++++--- 2 files changed, 110 insertions(+), 14 deletions(-) create mode 100644 kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx diff --git a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx new file mode 100644 index 0000000..60de866 --- /dev/null +++ b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx @@ -0,0 +1,93 @@ +import { ServiceVersion } from "@/types"; +import { Flex } from "@chakra-ui/react"; +import { + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableCaption, + TableContainer, +} from "@chakra-ui/react"; + +interface Props { + elements: cytoscape.ElementDefinition[]; +} + +const Legend = ({ elements }: Props) => { + const serviceVersions = elements + .map((element) => element.data.versions) + .flat() + .filter(Boolean); + + const flowIds = serviceVersions.map((version) => version.flow_id); + const uniqueFlowIds = [...new Set(flowIds)]; + + const servicesForFlowId = (flowId: string): string => { + const services = elements + .map((element) => { + const versions = element.data.versions; + if ( + versions != null && + versions.length > 0 && + versions.some((version: ServiceVersion) => version.flow_id === flowId) + ) { + return element; + } + return undefined; + }) + .filter(Boolean); + // If flow ID is baseline flow, dont show all services + if ( + services.some( + (service) => + service?.data.versions.length === 1 && + service?.data.versions[0].is_baseline, + ) + ) { + return "—"; + } + return services.map((service) => service?.data.label).join(", "); + }; + + return ( + + + + Legend + + + + + + + + {uniqueFlowIds.map((flowId) => { + return ( + + + + + ); + })} + +
Flow IDDeployed Services
{flowId}{servicesForFlowId(flowId)}
+ + + ); +}; + +export default Legend; diff --git a/kontrol-frontend/src/components/CytoscapeGraph/index.tsx b/kontrol-frontend/src/components/CytoscapeGraph/index.tsx index 68d4c04..527b89b 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/index.tsx +++ b/kontrol-frontend/src/components/CytoscapeGraph/index.tsx @@ -5,6 +5,8 @@ import stylesheet, { trafficNodeSelector } from "./stylesheet"; import { useInterval } from "@react-hooks-library/core"; import dagrePlugin, { dagreLayout } from "./plugins/dagre"; import tippyPlugin, { createTooltip, TooltipInstance } from "./plugins/tippy"; +import { Flex } from "@chakra-ui/react"; +import Legend from "./Legend"; // register plugins with cytoscape cytoscape.use(dagrePlugin); @@ -166,20 +168,21 @@ const CytoscapeGraph = ({ ); return ( - + + + + ); }; From 5146464e865347ae04784e7f5165232e814c9bf0 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 18 Sep 2024 13:14:59 -0700 Subject: [PATCH 4/8] chore: update types --- .../src/components/CytoscapeGraph/Legend.tsx | 10 +-- .../CytoscapeGraph/mocks/response.ts | 63 ++++++++++--------- .../CytoscapeGraph/plugins/tippy.ts | 6 +- kontrol-frontend/src/types.d.ts | 19 +----- 4 files changed, 44 insertions(+), 54 deletions(-) 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; From 6baedea62c07b06ac3c00f231f553262dec77e43 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 18 Sep 2024 13:21:24 -0700 Subject: [PATCH 5/8] fix: z-index and legend label --- kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx index 3d8cf9e..2d1387f 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx +++ b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx @@ -7,7 +7,6 @@ import { Tr, Th, Td, - TableCaption, TableContainer, } from "@chakra-ui/react"; @@ -64,10 +63,10 @@ const Legend = ({ elements }: Props) => { borderStyle={"solid"} borderColor={"gray.300"} padding={4} + zIndex={5} > - Legend From a2abf1953e44ea39b3ff7434633d2c14fdd3c617 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 18 Sep 2024 21:29:50 -0700 Subject: [PATCH 6/8] fix: update types from upstream --- flake.lock | 8 ++++---- flake.nix | 2 +- kontrol-frontend/pin.json | 4 ++-- .../src/components/CytoscapeGraph/utils.ts | 2 +- kontrol-frontend/src/pages/FlowsCreate.tsx | 18 +++++++++++++++--- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/flake.lock b/flake.lock index b02d0f8..99ca6e0 100644 --- a/flake.lock +++ b/flake.lock @@ -91,17 +91,17 @@ "nixpkgs": "nixpkgs" }, "locked": { - "lastModified": 1724085514, - "narHash": "sha256-VPbUHxDzsXNFL5jPSDNi0fER4ZxT6yRQVvIbHfJzJ5I=", + "lastModified": 1726692242, + "narHash": "sha256-O+SKbXmHX6xXqgQrW2fFohyJpRf/3ypbeFUaD5vEuBk=", "owner": "kurtosis-tech", "repo": "kardinal", - "rev": "75f64efda4b9cce0e0f9c2a1268baddb8131304a", + "rev": "42f6be285e469fb70eef8836ec0bed7bf0c3775c", "type": "github" }, "original": { "owner": "kurtosis-tech", "repo": "kardinal", - "rev": "75f64efda4b9cce0e0f9c2a1268baddb8131304a", + "rev": "42f6be285e469fb70eef8836ec0bed7bf0c3775c", "type": "github" } }, diff --git a/flake.nix b/flake.nix index 6e8479c..93c3df2 100644 --- a/flake.nix +++ b/flake.nix @@ -5,7 +5,7 @@ gomod2nix.url = "github:nix-community/gomod2nix"; gomod2nix.inputs.nixpkgs.follows = "nixpkgs"; gomod2nix.inputs.flake-utils.follows = "flake-utils"; - kardinal.url = "github:kurtosis-tech/kardinal/75f64efda4b9cce0e0f9c2a1268baddb8131304a"; + kardinal.url = "github:kurtosis-tech/kardinal/42f6be285e469fb70eef8836ec0bed7bf0c3775c"; }; outputs = { self, diff --git a/kontrol-frontend/pin.json b/kontrol-frontend/pin.json index 483271d..e31f6dd 100644 --- a/kontrol-frontend/pin.json +++ b/kontrol-frontend/pin.json @@ -1,7 +1,7 @@ { - "version": "0.8.0", + "version": "0.9.0", "x86_64-darwin": "", "x86_64-linux": "sha256-4lx4eSRv+auM27K4RLyLVS3lk4+a5SCFrsyBrOY2qMI=", - "aarch64-darwin": "sha256-mSmC23SczyR2V7xoS7+bnN5g+X5EVJTy74pH3+Ld/C8=", + "aarch64-darwin": "sha256-7eJPigPZrdtTcZgrww6Xp529NQ3/H4i0E4Cbq9R2/Ns=", "aarch64-linux": "sha256-iHZRAxgNluI3bvXIc6hgkAs/xM9Z4ib5W1ifnvGs9SQ=" } diff --git a/kontrol-frontend/src/components/CytoscapeGraph/utils.ts b/kontrol-frontend/src/components/CytoscapeGraph/utils.ts index 9830d1f..ba2be30 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/utils.ts +++ b/kontrol-frontend/src/components/CytoscapeGraph/utils.ts @@ -2,7 +2,7 @@ import CytoscapeComponent from "react-cytoscapejs"; import type { ClusterTopology, ExtendedNode, Node } from "@/types"; export const extendNodeData = (node: Node): ExtendedNode => { - const versions = node.versions ?? ["UNKNOWN"]; + const versions = node.versions ?? []; return { data: { ...node, diff --git a/kontrol-frontend/src/pages/FlowsCreate.tsx b/kontrol-frontend/src/pages/FlowsCreate.tsx index 4f0983d..7b0689a 100644 --- a/kontrol-frontend/src/pages/FlowsCreate.tsx +++ b/kontrol-frontend/src/pages/FlowsCreate.tsx @@ -7,7 +7,7 @@ import { Stack, Flex, Grid } from "@chakra-ui/react"; import StatefulService from "@/components/StatefulService"; import CytoscapeGraph, { utils } from "@/components/CytoscapeGraph"; import { ChangeEvent, useEffect, useState } from "react"; -import { ClusterTopology, Node } from "@/types"; +import { ClusterTopology, Node, NodeVersion } from "@/types"; import { useApi } from "@/contexts/ApiContext"; import { useNavigate } from "react-router-dom"; @@ -21,6 +21,18 @@ interface TemplateConfig { description?: string; } +// fake preview of a flow built on the base topology +const PREVIEW_DEV_NODE_VERSION: NodeVersion = { + flowId: "new-dev-flow", + imageTag: "TBD", + isBaseline: false, +}; +const PREVIEW_BASELINE_NODE_VERSION: NodeVersion = { + flowId: "baseline", + imageTag: "TBD", + isBaseline: true, +}; + const Page = () => { const navigate = useNavigate(); const { getTopology, postTemplateCreate } = useApi(); @@ -51,8 +63,8 @@ const Page = () => { ...node, versions: formState.service.find((o) => o.value === node.id) != null - ? ["prod", "new-dev-flow"] - : ["prod"], + ? [PREVIEW_BASELINE_NODE_VERSION, PREVIEW_DEV_NODE_VERSION] + : [PREVIEW_BASELINE_NODE_VERSION], }; }), }); From 74852ec7fc2be7aee78d30743ab8966dcdd91613 Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Wed, 18 Sep 2024 21:35:08 -0700 Subject: [PATCH 7/8] fix: pin.json hash --- kontrol-frontend/pin.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kontrol-frontend/pin.json b/kontrol-frontend/pin.json index e31f6dd..a670437 100644 --- a/kontrol-frontend/pin.json +++ b/kontrol-frontend/pin.json @@ -1,7 +1,7 @@ { "version": "0.9.0", "x86_64-darwin": "", - "x86_64-linux": "sha256-4lx4eSRv+auM27K4RLyLVS3lk4+a5SCFrsyBrOY2qMI=", + "x86_64-linux": "sha256-0L/RHC4vHimBUV1ZxAaqK4ePQZbFV2cbLIv/Xp/iKto=", "aarch64-darwin": "sha256-7eJPigPZrdtTcZgrww6Xp529NQ3/H4i0E4Cbq9R2/Ns=", "aarch64-linux": "sha256-iHZRAxgNluI3bvXIc6hgkAs/xM9Z4ib5W1ifnvGs9SQ=" } From 101463c0439d92a4206738e2988ca7aa0cfb7def Mon Sep 17 00:00:00 2001 From: Skylar Brown Date: Thu, 19 Sep 2024 09:53:27 -0700 Subject: [PATCH 8/8] feat: clarify legend and tooltip wording --- kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx | 2 +- kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx index 2d1387f..042214d 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx +++ b/kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx @@ -45,7 +45,7 @@ const Legend = ({ elements }: Props) => { service?.data.versions[0].isBaseline, ) ) { - return "—"; + return "All services"; } return services.map((service) => service?.data.label).join(", "); }; diff --git a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts index 0f5244f..5199a0e 100644 --- a/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts +++ b/kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.ts @@ -48,7 +48,7 @@ export const createTooltip = ( - ${versions.map((v: NodeVersion) => ``).join("")} + ${versions.map((v: NodeVersion) => ``).join("")}
Flow ID
${v.flowId}${v.imageTag}
${v.flowId}${v.imageTag || "N/A"}
`;