diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx index a4c38af5..730fb748 100644 --- 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); + const nodes = useStore((state) => state.nodes); + const nodesRef = useRef(); + 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(); const [sidePanel, setSidePanel] = useState(null); @@ -75,6 +78,66 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => { }); } + 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); + } + }); + } + + let cfg = new Configuration({ + headers: { + "X-TOKEN": user.token + } + }); + let api = new MetadataApi(cfg); + api.getSparklines({body: {environments: environments, shares: shares}}) + .then(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(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("getSparklines", e); + }); + } + + useEffect(() => { + retrieveSparklines(); + let interval = setInterval(() => { + retrieveSparklines(); + }, 5000); + return () => { + clearInterval(interval); + } + }, []); + useEffect(() => { retrieveOverview(); let mounted = true; @@ -89,32 +152,6 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => { } }, []); - const retrieveEnvironmentDetail = () => { - let cfg = new Configuration({ - headers: { - "X-TOKEN": user.token - } - }); - let metadata = new MetadataApi(cfg); - metadata.getAccountDetail() - .then(d => { - updateEnvironments(d); - }) - .catch(e => { - console.log("environmentDetail", e); - }); - } - - useEffect(() => { - retrieveEnvironmentDetail(); - let interval = setInterval(() => { - retrieveEnvironmentDetail(); - }, 5000); - return () => { - clearInterval(interval); - } - }, []); - useEffect(() => { if(selectedNode) { switch(selectedNode.type) { diff --git a/ui100/src/EnvironmentNode.tsx b/ui100/src/EnvironmentNode.tsx index fcc8f42a..6c0103b4 100644 --- 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(Array(31).fill(0)); const hiddenSparkline = <>; const visibleSparkline = ( - + ); - useEffect(() => { - let s = new Array(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 ( <> @@ -39,7 +19,7 @@ const EnvironmentNode = ({ data }) => { {data.label} - {sparkData.find(x => x > 0) ? visibleSparkline : hiddenSparkline} + {data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline} ); }