mirror of
https://github.com/openziti/zrok.git
synced 2025-06-23 03:01:54 +02:00
sparklines on environment nodes (#799)
This commit is contained in:
parent
7428b8afd6
commit
6b63a0455a
@ -7,7 +7,7 @@ import {useEffect, useState} from "react";
|
|||||||
|
|
||||||
|
|
||||||
const AccountNode = ({ data }) => {
|
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 [sparkData, setSparkData] = useState<number[]>(Array<number>(31).fill(0));
|
||||||
const hiddenSparkline = <></>;
|
const hiddenSparkline = <></>;
|
||||||
const visibleSparkline = (
|
const visibleSparkline = (
|
||||||
@ -18,18 +18,20 @@ const AccountNode = ({ data }) => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let s = new Array<number>(31);
|
let s = new Array<number>(31);
|
||||||
if(environmentMetrics) {
|
if(environments) {
|
||||||
environmentMetrics.forEach(env => {
|
environments.forEach(env => {
|
||||||
if(env.activity) {
|
if(env.activity) {
|
||||||
env.activity.forEach((sample, i) => {
|
env.activity.forEach((sample, i) => {
|
||||||
s[i] = s[i] + sample.rx ? sample.rx : 0;
|
let v = s[i] ? s[i] : 0;
|
||||||
s[i] = s[i] + sample.tx ? sample.tx : 0;
|
v += sample.rx! ? sample.rx! : 0;
|
||||||
|
v += sample.tx! ? sample.tx! : 0;
|
||||||
|
s[i] = v;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setSparkData(s);
|
setSparkData(s);
|
||||||
}, [environmentMetrics]);
|
}, [environments]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,8 +1,38 @@
|
|||||||
import {Handle, Position} from "@xyflow/react";
|
import {Handle, Position} from "@xyflow/react";
|
||||||
import {Grid2} from "@mui/material";
|
import {Grid2} from "@mui/material";
|
||||||
import EnvironmentIcon from "@mui/icons-material/Computer";
|
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 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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Handle type="target" position={Position.Top} />
|
<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"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
|
||||||
<Grid2 display="flex">{data.label}</Grid2>
|
<Grid2 display="flex">{data.label}</Grid2>
|
||||||
</Grid2>
|
</Grid2>
|
||||||
|
{sparkData.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user