global store sparkline first plumbing attempt (#823)

openziti · Jan 10, 2025 · 56277a4 · 56277a4
1 parent 89a9f5b
commit 56277a4
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 42 deletions.
diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx
@@ -10,6 +10,7 @@ import SharePanel from "./SharePanel.tsx";
 import AccessPanel from "./AccessPanel.tsx";
 import useStore from "./model/store.ts";
 import TabularView from "./TabularView.tsx";
+import {Node} from "@xyflow/react";
 
 interface ApiConsoleProps {
     logout: () => void;
@@ -20,10 +21,12 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const graph = useStore((state) => state.graph);
     const updateGraph = useStore((state) => state.updateGraph);
     const oldGraph = useRef<Graph>(graph);
+    const nodes = useStore((state) => state.nodes);
+    const nodesRef = useRef<Node[]>();
+    nodesRef.current = nodes;
     const updateNodes = useStore((state) => state.updateNodes);
     const updateEdges = useStore((state) => state.updateEdges);
     const selectedNode = useStore((state) => state.selectedNode);
-    const updateEnvironments = useStore((state) => state.updateEnvironments);
     const [mainPanel, setMainPanel] = useState(<Visualizer />);
     const [sidePanel, setSidePanel] = useState<JSX>(null);
 
@@ -75,46 +78,80 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
             });
     }
 
-    useEffect(() => {
-        retrieveOverview();
-        let mounted = true;
-        let interval = setInterval(() => {
-            if(mounted) {
-                retrieveOverview();
-            }
-        }, 1000);
-        return () => {
-            mounted = false;
-            clearInterval(interval);
+    const retrieveSparklines = () => {
+        let environments: string[] = [];
+        let shares: string[] = [];
+        if(nodesRef.current) {
+            nodesRef.current.map(node => {
+                if(node.type === "environment") {
+                    environments.push(node.id);
+                }
+                if(node.type === "share") {
+                    shares.push(node.id);
+                }
+            });
         }
-    }, []);
 
-    const retrieveEnvironmentDetail = () => {
         let cfg = new Configuration({
             headers: {
                 "X-TOKEN": user.token
             }
         });
-        let metadata = new MetadataApi(cfg);
-        metadata.getAccountDetail()
+        let api = new MetadataApi(cfg);
+        api.getSparklines({body: {environments: environments, shares: shares}})
             .then(d => {
-                updateEnvironments(d);
+                if(d.sparklines) {
+                    let updatedNodes = nodesRef.current;
+                    updatedNodes.map((n) => {
+                        let spark = d.sparklines!.find(s => s.scope === n.type && s.id === n.id);
+                        if(spark) {
+                            let activity = new Array<Number>(31);
+                            if(spark.samples) {
+                                spark.samples?.forEach((sample, i) => {
+                                    let v = 0;
+                                    v += sample.rx! ? sample.rx! : 0;
+                                    v += sample.tx! ? sample.tx! : 0;
+                                    activity[i] = v;
+                                });
+                                n.data.activity = activity;
+                            }
+                        }
+                    });
+                    if(updatedNodes) {
+                        updateNodes(updatedNodes);
+                        console.log("updatedNodes", updatedNodes);
+                    }
+                }
             })
             .catch(e => {
-                console.log("environmentDetail", e);
+                console.log("getSparklines", e);
             });
     }
 
     useEffect(() => {
-        retrieveEnvironmentDetail();
+        retrieveSparklines();
         let interval = setInterval(() => {
-            retrieveEnvironmentDetail();
+            retrieveSparklines();
         }, 5000);
         return () => {
             clearInterval(interval);
         }
     }, []);
 
+    useEffect(() => {
+        retrieveOverview();
+        let mounted = true;
+        let interval = setInterval(() => {
+            if(mounted) {
+                retrieveOverview();
+            }
+        }, 1000);
+        return () => {
+            mounted = false;
+            clearInterval(interval);
+        }
+    }, []);
+
     useEffect(() => {
         if(selectedNode) {
             switch(selectedNode.type) {

diff --git a/ui100/src/EnvironmentNode.tsx b/ui100/src/EnvironmentNode.tsx
@@ -1,36 +1,16 @@
 import {Handle, Position} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
-import useStore from "./model/store.ts";
-import {useEffect, useState} from "react";
 import {SparkLineChart} from "@mui/x-charts";
 
 const EnvironmentNode = ({ data }) => {
-    const environments = useStore((state) => state.environments);
-    const [sparkData, setSparkData] = useState<number[]>(Array<number>(31).fill(0));
     const hiddenSparkline = <></>;
     const visibleSparkline = (
         <Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
-            <SparkLineChart data={sparkData} height={30} width={100} colors={['#04adef']}  />
+            <SparkLineChart data={data.activity ? data.activity : []} height={30} width={100} colors={['#04adef']}  />
         </Grid2>
     );
 
-    useEffect(() => {
-        let s = new Array<number>(31);
-        if(environments) {
-            let env = environments.find(env => data.envZId === env.zId);
-            if(env) {
-                env.activity?.forEach((sample, i) => {
-                    let v = s[i] ? s[i] : 0;
-                    v += sample.rx! ? sample.rx! : 0;
-                    v += sample.tx! ? sample.tx! : 0;
-                    s[i] = v;
-                });
-                setSparkData(s);
-            }
-        }
-    }, [environments]);
-
     return (
         <>
             <Handle type="target" position={Position.Top} />
@@ -39,7 +19,7 @@ const EnvironmentNode = ({ data }) => {
                 <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex">{data.label}</Grid2>
             </Grid2>
-            {sparkData.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
+            {data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
         </>
     );
 }