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

global store sparkline first plumbing attempt (#823)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-10 16:41:46 -05:00
parent 89a9f5b8db
commit 56277a4712
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 66 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
ui100/src/ApiConsole.tsx
View File

@ -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>(graph);
const nodes = useStore((state) => state.nodes);
const nodesRef = useRef<Node[]>();
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(<Visualizer />);
const [sidePanel, setSidePanel] = useState<JSX>(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<Number>(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) {

24
ui100/src/EnvironmentNode.tsx
View File

@ -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<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']} />
<SparkLineChart data={data.activity ? data.activity : []} 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);
}
}
}, [environments]);
return (
<>
<Handle type="target" position={Position.Top} />
@ -39,7 +19,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}
{data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
</>
);
}