Merge branch 'main' into lporoli/generate-cluster-topology-refac

kontrol-frontend/src/components/CytoscapeGraph/Legend.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, IconButton } from "@chakra-ui/react";
 import { useApi } from "@/contexts/ApiContext";
 import {
   Table,
@@ -9,14 +9,16 @@ import {
   Td,
   TableContainer,
 } from "@/components/Table";
-import { FiExternalLink } from "react-icons/fi";
+import { FiExternalLink, FiEye, FiEyeOff } from "react-icons/fi";
 import { useEffect, useState } from "react";
 import { ClusterTopology, NodeVersion, Node } from "@/types";
 import { Link } from "@chakra-ui/react";
+import { useFlowsContext } from "@/contexts/FlowsContext";
 
 const Legend = () => {
-  const { flows, getFlows, getTopology } = useApi();
+  const { getTopology } = useApi();
   const [topology, setTopology] = useState<ClusterTopology | null>(null);
+  const { flows, flowVisibility, setFlowVisibility } = useFlowsContext();
 
   const servicesForFlowId = (flowId: string, isBaseline: boolean): Node[] => {
     if (topology == null) {
@@ -34,11 +36,14 @@ const Legend = () => {
   };
 
   useEffect(() => {
-    getFlows();
     getTopology().then(setTopology);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const sortedFlows = flows.sort((a, b) => {
+    return a["flow-id"].localeCompare(b["flow-id"]);
+  });
+
   return (
     <Flex
       position={"absolute"}
@@ -57,11 +62,11 @@ const Legend = () => {
               <Th>Flow ID</Th>
               <Th>Baseline</Th>
               <Th>URL</Th>
-              {/* <Th>Show/Hide</Th> */}
+              <Th>Show/Hide</Th>
             </Tr>
           </Thead>
           <Tbody>
-            {flows.map((flow) => {
+            {sortedFlows.map((flow) => {
               // TODO: Update these when this PR is merged:
               // https://github.com/kurtosis-tech/kardinal/pull/234
               const flowId = flow["flow-id"];
@@ -84,21 +89,20 @@ const Legend = () => {
                       <FiExternalLink size={12} />
                     </Link>
                   </Td>
-                  {/* TODO: Uncomment when this feature is fully implemented
-                   *
                   <Td textAlign={"right"}>
-                    {highlightedFlowId === flowId ? (
+                    {flowVisibility[flowId] === true ? (
                       <IconButton
                         aria-label="Hide"
                         h={"24px"}
                         minH={"24px"}
                         w={"24px"}
                         minW={"24px"}
                         color={isBaseline ? "gray.300" : "gray.600"}
-                        icon={<FiEyeOff size={16} />}
+                        icon={<FiEye size={16} />}
                         disabled={isBaseline}
                         onClick={() => {
-                          // setHighlightedFlowId(null);
+                          if (isBaseline) return; // cant hide baseline flow
+                          setFlowVisibility(flowId, false);
                         }}
                       />
                     ) : (
@@ -108,17 +112,16 @@ const Legend = () => {
                         minH={"24px"}
                         w={"24px"}
                         minW={"24px"}
-                        icon={<FiEye size={16} />}
                         disabled={isBaseline}
+                        icon={<FiEyeOff size={16} />}
                         color={isBaseline ? "gray.300" : "gray.600"}
                         cursor={isBaseline ? "not-allowed" : "pointer"}
                         onClick={() => {
-                          // setHighlightedFlowId(flowId);
+                          setFlowVisibility(flowId, true);
                         }}
                       />
                     )}
                   </Td>
-                   **/}
                 </Tr>
               );
             })}

kontrol-frontend/src/components/CytoscapeGraph/index.tsx

@@ -60,10 +60,12 @@ const CytoscapeGraph = ({
         if (tooltip.current != null) {
           tooltip.current.destroy();
         }
-        const tooltipInstance = createTooltip(e.target);
-        if (tooltipInstance == null) return;
-        tooltip.current = tooltipInstance.instance;
-        setTooltipPortalElem(tooltipInstance.element);
+        const newTooltip = createTooltip(e.target);
+        if (newTooltip == null) return;
+        const { instance, element } = newTooltip;
+        if (instance == null || element == null) return;
+        tooltip.current = instance;
+        setTooltipPortalElem(element);
         setHoveredNode(e.target);
       });
       cy.current.on("mouseout", function () {

kontrol-frontend/src/components/CytoscapeGraph/stylesheet.ts

@@ -142,6 +142,7 @@ const stylesheet = [
   {
     selector: ".external",
     css: {
+      ghost: "no",
       "line-style": "dashed",
       "border-style": "dotted",
       "background-color": "#f2ebf8",

kontrol-frontend/src/contexts/ApiContext.tsx

@@ -25,35 +25,37 @@ export type RequestBody<
   : never;
 
 export interface ApiContextType {
-  deleteFlow: (flowId: string) => Promise<void>;
+  deleteFlow: (flowId: string) => Promise<Flow[]>;
   deleteTemplate: (templateName: string) => Promise<void>;
   error: string | null;
-  flows: Flow[];
-  getFlows: () => Promise<void>;
+  getFlows: () => Promise<Flow[]>;
   getTemplates: () => Promise<void>;
   getTopology: () => Promise<components["schemas"]["ClusterTopology"]>;
   loading: boolean;
   postFlowCreate: (
     b: RequestBody<"/tenant/{uuid}/flow/create", "post">,
-  ) => Promise<void>;
+  ) => Promise<Flow>;
   postTemplateCreate: (
     b: RequestBody<"/tenant/{uuid}/templates/create", "post">,
   ) => Promise<void>;
   templates: Template[];
 }
 
 const defaultContextValue: ApiContextType = {
-  deleteFlow: async () => {},
+  deleteFlow: async () => [],
   deleteTemplate: async () => {},
   error: null,
-  flows: [],
-  getFlows: async () => {},
+  getFlows: async () => [],
   getTemplates: async () => {},
   getTopology: async () => {
     return { nodes: [], edges: [] };
   },
   loading: false,
-  postFlowCreate: async () => {},
+  postFlowCreate: async () => ({
+    "flow-id": "",
+    "flow-urls": [],
+    isBaseline: false,
+  }),
   postTemplateCreate: async () => {},
   templates: [],
 };
@@ -72,7 +74,6 @@ export const ApiContextProvider = ({ children }: PropsWithChildren) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [templates, setTemplates] = useState<Template[]>([]);
-  const [flows, setFlows] = useState<Flow[]>([]);
 
   // boilerplate loading state, error handling for any API call
   const handleApiCall = useCallback(async function <T>(
@@ -104,7 +105,7 @@ export const ApiContextProvider = ({ children }: PropsWithChildren) => {
           body,
         }),
       );
-      setFlows((state) => [...state, flow]);
+      return flow;
     },
     [uuid, handleApiCall],
   );
@@ -117,7 +118,7 @@ export const ApiContextProvider = ({ children }: PropsWithChildren) => {
         params: { path: { uuid } },
       }),
     );
-    setFlows(flows);
+    return flows;
   }, [uuid, handleApiCall]);
 
   // DELETE "/tenant/{uuid}/flow/{flow-id}"
@@ -129,7 +130,7 @@ export const ApiContextProvider = ({ children }: PropsWithChildren) => {
           params: { path: { uuid, "flow-id": flowId } },
         }),
       );
-      setFlows(flows);
+      return flows;
     },
     [uuid, handleApiCall],
   );
@@ -193,7 +194,6 @@ export const ApiContextProvider = ({ children }: PropsWithChildren) => {
         deleteFlow,
         deleteTemplate,
         error,
-        flows,
         getFlows,
         getTemplates,
         getTopology,

kontrol-frontend/src/contexts/FlowsContext.tsx

@@ -0,0 +1,90 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+import { useApi } from "@/contexts/ApiContext";
+import { Flow } from "@/types";
+
+interface FlowsContextType {
+  flows: Flow[];
+  refetchFlows: () => Promise<Flow[]>;
+  flowVisibility: Record<string, boolean>;
+  setFlowVisibility: (flowId: string, visible: boolean) => void;
+}
+
+// Create the context with a default value
+const FlowsContext = createContext<FlowsContextType>({
+  flows: [],
+  refetchFlows: async () => [],
+  flowVisibility: {},
+  setFlowVisibility: () => {},
+});
+
+// Create a provider component
+interface FlowsContextProviderProps {
+  children: ReactNode;
+}
+
+export const FlowsContextProvider = ({
+  children,
+}: FlowsContextProviderProps) => {
+  const { getFlows } = useApi();
+  const [flows, setFlows] = useState<Flow[]>([]);
+
+  const [flowVisibility, setFlowVisibility] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  useEffect(() => {
+    setFlowVisibility((prevState) =>
+      flows.reduce(
+        (acc, flow) => ({
+          ...acc,
+          [flow["flow-id"]]: prevState[flow["flow-id"]] ?? true,
+        }),
+        {},
+      ),
+    );
+  }, [flows]);
+
+  useEffect(() => {
+    getFlows().then(setFlows);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const refetchFlows = async () => {
+    const newFlows = await getFlows();
+    setFlows(newFlows);
+    return newFlows;
+  };
+
+  return (
+    <FlowsContext.Provider
+      value={{
+        flows,
+        refetchFlows,
+        flowVisibility,
+        setFlowVisibility: (flowId: string, visible: boolean) => {
+          setFlowVisibility({ ...flowVisibility, [flowId]: visible });
+        },
+      }}
+    >
+      {children}
+    </FlowsContext.Provider>
+  );
+};
+
+// Create a custom hook to use the context
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFlowsContext = (): FlowsContextType => {
+  const context = useContext(FlowsContext);
+  if (context === undefined) {
+    throw new Error(
+      "useFlowsContext must be used within a FlowsContextProvider",
+    );
+  }
+  return context;
+};

kontrol-frontend/src/main.tsx

@@ -16,6 +16,7 @@ import NotFound from "@/pages/NotFound";
 import { ErrorBoundary } from "react-error-boundary";
 import { NavigationContextProvider } from "@/contexts/NavigationContext";
 import { ApiContextProvider } from "@/contexts/ApiContext";
+import { FlowsContextProvider } from "@/contexts/FlowsContext";
 
 const router = createBrowserRouter([
   {
@@ -72,7 +73,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <ChakraProvider theme={theme} resetCSS>
       <ApiContextProvider>
         <NavigationContextProvider>
-          <RouterProvider router={router} />
+          <FlowsContextProvider>
+            <RouterProvider router={router} />
+          </FlowsContextProvider>
         </NavigationContextProvider>
       </ApiContextProvider>
     </ChakraProvider>

kontrol-frontend/src/pages/TrafficConfiguration.tsx

@@ -3,18 +3,31 @@ import { Grid } from "@chakra-ui/react";
 import CytoscapeGraph, { utils } from "@/components/CytoscapeGraph";
 import { ElementDefinition } from "cytoscape";
 import { useApi } from "@/contexts/ApiContext";
+import { useFlowsContext } from "@/contexts/FlowsContext";
 
 const pollingIntervalSeconds = 1;
 
 const Page = () => {
   const [elems, setElems] = useState<ElementDefinition[]>([]);
   const prevResponse = useRef<string>();
   const { getTopology } = useApi();
+  const { refetchFlows, flowVisibility } = useFlowsContext();
 
   useEffect(() => {
     const fetchElems = async () => {
       const response = await getTopology();
-      const newElems = utils.normalizeData(response);
+      const filtered = {
+        ...response,
+        nodes: response.nodes.map((node) => {
+          return {
+            ...node,
+            versions: node.versions?.filter((version) => {
+              return flowVisibility[version.flowId] === true;
+            }),
+          };
+        }),
+      };
+      const newElems = utils.normalizeData(filtered);
 
       // dont update react state if the API response is identical to the previous one
       // This avoids unnecessary re-renders
@@ -23,13 +36,16 @@ const Page = () => {
       }
       prevResponse.current = JSON.stringify(newElems);
       setElems(newElems);
+      // re-fetch flows if topology changes
+      refetchFlows();
     };
 
     // Continuously fetch elements
     const intervalId = setInterval(fetchElems, pollingIntervalSeconds * 1000);
     fetchElems();
     return () => clearInterval(intervalId);
-  }, [getTopology]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flowVisibility]);
 
   return (
     <Grid