diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx index 730fb748..15dd93b2 100644 --- a/ui100/src/ApiConsole.tsx +++ b/ui100/src/ApiConsole.tsx @@ -8,7 +8,7 @@ import AccountPanel from "./AccountPanel.tsx"; import EnvironmentPanel from "./EnvironmentPanel.tsx"; import SharePanel from "./SharePanel.tsx"; import AccessPanel from "./AccessPanel.tsx"; -import useStore from "./model/store.ts"; +import useStore, {Sparkdata} from "./model/store.ts"; import TabularView from "./TabularView.tsx"; import {Node} from "@xyflow/react"; @@ -21,6 +21,10 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => { const graph = useStore((state) => state.graph); const updateGraph = useStore((state) => state.updateGraph); const oldGraph = useRef(graph); + const sparkdata = useStore((state) => state.sparkdata); + const sparkdataRef = useRef>(); + sparkdataRef.current = sparkdata; + const updateSparkdata = useStore((state) => state.updateSparkdata); const nodes = useStore((state) => state.nodes); const nodesRef = useRef(); nodesRef.current = nodes; @@ -97,30 +101,25 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => { "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; - } + let sparkdataIn = new Map(); + d.sparklines!.forEach(s => { + let activity = new Array(31); + if(s.samples) { + s.samples?.forEach((sample, i) => { + let v = 0; + v += sample.rx! ? sample.rx! : 0; + v += sample.tx! ? sample.tx! : 0; + activity[i] = v; + }); + sparkdataIn.set(s.id!, activity); } }); - if(updatedNodes) { - updateNodes(updatedNodes); - console.log("updatedNodes", updatedNodes); - } + updateSparkdata(sparkdataIn); } }) .catch(e => { diff --git a/ui100/src/EnvironmentNode.tsx b/ui100/src/EnvironmentNode.tsx index 6c0103b4..0ff5ff29 100644 --- a/ui100/src/EnvironmentNode.tsx +++ b/ui100/src/EnvironmentNode.tsx @@ -2,12 +2,15 @@ import {Handle, Position} from "@xyflow/react"; import {Grid2} from "@mui/material"; import EnvironmentIcon from "@mui/icons-material/Computer"; import {SparkLineChart} from "@mui/x-charts"; +import useStore from "./model/store.ts"; const EnvironmentNode = ({ data }) => { + const sparkdata = useStore((state) => state.sparkdata); + const hiddenSparkline = <>; const visibleSparkline = ( - + ); @@ -19,7 +22,7 @@ const EnvironmentNode = ({ data }) => { {data.label} - {data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline} + {sparkdata.get(data.envZId)?.find(x => x > 0) ? visibleSparkline : hiddenSparkline} ); } diff --git a/ui100/src/ShareNode.tsx b/ui100/src/ShareNode.tsx index 67ae5c45..a0dba507 100644 --- a/ui100/src/ShareNode.tsx +++ b/ui100/src/ShareNode.tsx @@ -1,12 +1,24 @@ import {Handle, Position} from "@xyflow/react"; import {Grid2} from "@mui/material"; import ShareIcon from "@mui/icons-material/Share"; +import useStore from "./model/store.ts"; +import {SparkLineChart} from "@mui/x-charts"; const ShareNode = ({ data }) => { + const sparkdata = useStore((state) => state.sparkdata); + let shareHandle = <>; if(data.accessed) { shareHandle = ; } + + const hiddenSparkline = <>; + const visibleSparkline = ( + + + + ); + return ( <> @@ -15,6 +27,7 @@ const ShareNode = ({ data }) => { {data.label} + {sparkdata.get(data.shrToken)?.find(x => x > 0) ? visibleSparkline : hiddenSparkline} ); } diff --git a/ui100/src/model/store.ts b/ui100/src/model/store.ts index 884ecc92..4b4770a3 100644 --- a/ui100/src/model/store.ts +++ b/ui100/src/model/store.ts @@ -8,6 +8,7 @@ type StoreState = { user: User; graph: Graph; environments: Array; + sparkdata: Map; nodes: Node[]; edges: Edge[]; selectedNode: Node; @@ -18,9 +19,10 @@ type StoreAction = { updateUser: (user: StoreState['user']) => void, updateGraph: (vov: StoreState['graph']) => void, updateEnvironments: (environments: StoreState['environments']) => void, - updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void, + updateSparkdata: (sparkdata: StoreState['sparkdata']) => void, updateNodes: (nodes: StoreState['nodes']) => void, updateEdges: (edges: StoreState['edges']) => void, + updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void, updateViewport: (viewport: StoreState['viewport']) => void, }; @@ -28,6 +30,7 @@ const useStore = create((set) => ({ user: null, graph: new Graph(), environments: new Array(), + sparkdata: new Map(), nodes: [], edges: [], selectedNode: null, @@ -35,6 +38,7 @@ const useStore = create((set) => ({ updateUser: (user) => set({user: user}), updateGraph: (vov) => set({overview: vov}), updateEnvironments: (environments) => set({environments: environments}), + updateSparkdata: (sparkdata) => set({sparkdata: sparkdata}), updateNodes: (nodes) => set({nodes: nodes}), updateEdges: (edges) => set({edges: edges}), updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode}),