extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-24 11:41:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

sparklines on environment nodes (#799)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-18 15:12:19 -05:00
parent 7428b8afd6
commit 6b63a0455a
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui100/src/AccountNode.tsx
View File

@ -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<number[]>(Array<number>(31).fill(0));
const hiddenSparkline = <></>;
const visibleSparkline = (
@ -18,18 +18,20 @@ const AccountNode = ({ data }) => {
useEffect(() => {
let s = new Array<number>(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 (
<>

31
ui100/src/EnvironmentNode.tsx
View File

@ -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<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']} />
</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);
} else {
console.log("not found", data, environments);
}
}
}, [environments]);
return (
<>
<Handle type="target" position={Position.Top} />
@ -11,6 +41,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}
</>
);
}