Skip to content
This repository has been archived by the owner on Oct 21, 2024. It is now read-only.

Commit

Permalink
feat: Topology graph legend (#27)
Browse files Browse the repository at this point in the history
* WIP types

* feat: more detailed hover tooltips

* feat: legend shows flow IDs

* chore: update types

* fix: z-index and legend label

* fix: update types from upstream

* fix: pin.json hash

* feat: clarify legend and tooltip wording
  • Loading branch information
skylarmb authored Sep 19, 2024
1 parent c24ce6a commit 1106218
Show file tree
Hide file tree
Showing 11 changed files with 246 additions and 46 deletions.
8 changes: 4 additions & 4 deletions flake.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion flake.nix
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions kontrol-frontend/pin.json
Original file line number Diff line number Diff line change
@@ -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=",
"x86_64-linux": "sha256-0L/RHC4vHimBUV1ZxAaqK4ePQZbFV2cbLIv/Xp/iKto=",
"aarch64-darwin": "sha256-7eJPigPZrdtTcZgrww6Xp529NQ3/H4i0E4Cbq9R2/Ns=",
"aarch64-linux": "sha256-iHZRAxgNluI3bvXIc6hgkAs/xM9Z4ib5W1ifnvGs9SQ="
}
92 changes: 92 additions & 0 deletions kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { NodeVersion } from "@/types";
import { Flex } from "@chakra-ui/react";
import {
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
} from "@chakra-ui/react";

interface Props {
elements: cytoscape.ElementDefinition[];
}

const Legend = ({ elements }: Props) => {
const serviceVersions: NodeVersion[] = elements
.map((element) => element.data.versions)
.flat()
.filter(Boolean);

const flowIds = serviceVersions.map((version) => version.flowId);
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: NodeVersion) => version.flowId === 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].isBaseline,
)
) {
return "All services";
}
return services.map((service) => service?.data.label).join(", ");
};

return (
<Flex
position={"absolute"}
bg={"white"}
minH={100}
minW={240}
top={0}
left={0}
borderRadius={12}
borderWidth={1}
borderStyle={"solid"}
borderColor={"gray.300"}
padding={4}
zIndex={5}
>
<TableContainer>
<Table variant="simple">
<Thead>
<Tr>
<Th>Flow ID</Th>
<Th>Deployed Services</Th>
</Tr>
</Thead>
<Tbody>
{uniqueFlowIds.map((flowId) => {
return (
<Tr>
<Td>{flowId}</Td>
<Td>{servicesForFlowId(flowId)}</Td>
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</Flex>
);
};

export default Legend;
31 changes: 17 additions & 14 deletions kontrol-frontend/src/components/CytoscapeGraph/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -166,20 +168,21 @@ const CytoscapeGraph = ({
);

return (
<CytoscapeComponent
id="cytoscape-graph"
elements={elements}
style={{
width: "100%",
height: "100%",
minHeight: "267px",
display: "flex",
}}
layout={layout}
// @ts-expect-error cytoscape types are not great
stylesheet={stylesheet}
cy={handleCy}
/>
<Flex w="100%" h="100%" minHeight="267px" position={"relative"}>
<Legend elements={elements} />
<CytoscapeComponent
id="cytoscape-graph"
elements={elements}
style={{
width: "100%",
height: "100%",
}}
layout={layout}
// @ts-expect-error cytoscape types are not great
stylesheet={stylesheet}
cy={handleCy}
/>
</Flex>
);
};

Expand Down
79 changes: 71 additions & 8 deletions kontrol-frontend/src/components/CytoscapeGraph/mocks/response.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,49 +44,112 @@ const data: ClusterTopology = {
id: "cartservice",
label: "cartservice",
type: "service",
versions: ["dev-hr7dwojzkk", "prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/cartservice:main",
isBaseline: true,
},
{
flowId: "dev-hr7dwojzkk",
imageTag: "kurtosistech/cartservice:demo-on-sale",
isBaseline: false,
},
],
},
{
id: "checkoutservice",
label: "checkoutservice",
type: "service",
versions: ["dev-hr7dwojzkk", "prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/checkoutservice:main",
isBaseline: true,
},
{
flowId: "dev-hr7dwojzkk",
imageTag: "kurtosistech/checkoutservice:demo-on-sale",
isBaseline: false,
},
],
},
{
id: "frontend",
label: "frontend",
type: "service",
versions: ["dev-hr7dwojzkk", "prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/frontend:main",
isBaseline: true,
},
{
flowId: "dev-hr7dwojzkk",
imageTag: "kurtosistech/frontend:demo-on-sale",
isBaseline: false,
},
],
},
{
id: "emailservice",
label: "emailservice",
type: "service",
versions: ["prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/emailservice:main",
isBaseline: true,
},
],
},
{
id: "paymentservice",
label: "paymentservice",
type: "service",
versions: ["prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/paymentservice:main",
isBaseline: true,
},
],
},
{
id: "postgres",
label: "postgres",
type: "service",
versions: ["prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/postgres:main",
isBaseline: true,
},
],
},
{
id: "shippingservice",
label: "shippingservice",
type: "service",
versions: ["prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/shippingservice:main",
isBaseline: true,
},
],
},
{
id: "ingress",
label: "ingress",
type: "gateway",
versions: ["prod"],
versions: [
{
flowId: "k8s-namespace-1",
imageTag: "kurtosistech/gateway:main",
isBaseline: true,
},
],
},
],
};
Expand Down
28 changes: 20 additions & 8 deletions kontrol-frontend/src/components/CytoscapeGraph/plugins/tippy.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
}
Loading

0 comments on commit 1106218

Please sign in to comment.