diff --git a/ui100/src/AccountNode.tsx b/ui100/src/AccountNode.tsx index f30351f7..b994b664 100644 --- a/ui100/src/AccountNode.tsx +++ b/ui100/src/AccountNode.tsx @@ -7,7 +7,7 @@ import {useEffect, useState} from "react"; const AccountNode = ({ data }) => { - const environmentMetrics = useStore((state) => state.environments); + const environments = useStore((state) => state.environments); const [sparkData, setSparkData] = useState(Array(31).fill(0)); const hiddenSparkline = <>; const visibleSparkline = ( @@ -18,18 +18,20 @@ const AccountNode = ({ data }) => { useEffect(() => { let s = new Array(31); - if(environmentMetrics) { - environmentMetrics.forEach(env => { + if(environments) { + environments.forEach(env => { if(env.activity) { env.activity.forEach((sample, i) => { - s[i] = s[i] + sample.rx ? sample.rx : 0; - s[i] = s[i] + sample.tx ? sample.tx : 0; + let v = s[i] ? s[i] : 0; + v += sample.rx! ? sample.rx! : 0; + v += sample.tx! ? sample.tx! : 0; + s[i] = v; }); } }); } setSparkData(s); - }, [environmentMetrics]); + }, [environments]); return ( <> diff --git a/ui100/src/EnvironmentNode.tsx b/ui100/src/EnvironmentNode.tsx index 461e9cb7..112dfe72 100644 --- a/ui100/src/EnvironmentNode.tsx +++ b/ui100/src/EnvironmentNode.tsx @@ -1,8 +1,38 @@ 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); + } else { + console.log("not found", data, environments); + } + } + }, [environments]); + return ( <> @@ -11,6 +41,7 @@ const EnvironmentNode = ({ data }) => { {data.label} + {sparkData.find(x => x > 0) ? visibleSparkline : hiddenSparkline} ); }