mirror of
https://github.com/openziti/zrok.git
synced 2025-06-22 02:31:54 +02:00
global store sparkline first plumbing attempt (#823)
This commit is contained in:
parent
89a9f5b8db
commit
56277a4712
@ -10,6 +10,7 @@ import SharePanel from "./SharePanel.tsx";
|
|||||||
import AccessPanel from "./AccessPanel.tsx";
|
import AccessPanel from "./AccessPanel.tsx";
|
||||||
import useStore from "./model/store.ts";
|
import useStore from "./model/store.ts";
|
||||||
import TabularView from "./TabularView.tsx";
|
import TabularView from "./TabularView.tsx";
|
||||||
|
import {Node} from "@xyflow/react";
|
||||||
|
|
||||||
interface ApiConsoleProps {
|
interface ApiConsoleProps {
|
||||||
logout: () => void;
|
logout: () => void;
|
||||||
@ -20,10 +21,12 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
const graph = useStore((state) => state.graph);
|
const graph = useStore((state) => state.graph);
|
||||||
const updateGraph = useStore((state) => state.updateGraph);
|
const updateGraph = useStore((state) => state.updateGraph);
|
||||||
const oldGraph = useRef<Graph>(graph);
|
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 updateNodes = useStore((state) => state.updateNodes);
|
||||||
const updateEdges = useStore((state) => state.updateEdges);
|
const updateEdges = useStore((state) => state.updateEdges);
|
||||||
const selectedNode = useStore((state) => state.selectedNode);
|
const selectedNode = useStore((state) => state.selectedNode);
|
||||||
const updateEnvironments = useStore((state) => state.updateEnvironments);
|
|
||||||
const [mainPanel, setMainPanel] = useState(<Visualizer />);
|
const [mainPanel, setMainPanel] = useState(<Visualizer />);
|
||||||
const [sidePanel, setSidePanel] = useState<JSX>(null);
|
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(() => {
|
useEffect(() => {
|
||||||
retrieveOverview();
|
retrieveOverview();
|
||||||
let mounted = true;
|
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(() => {
|
useEffect(() => {
|
||||||
if(selectedNode) {
|
if(selectedNode) {
|
||||||
switch(selectedNode.type) {
|
switch(selectedNode.type) {
|
||||||
|
@ -1,36 +1,16 @@
|
|||||||
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";
|
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 hiddenSparkline = <></>;
|
||||||
const visibleSparkline = (
|
const visibleSparkline = (
|
||||||
<Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
|
<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>
|
</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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Handle type="target" position={Position.Top} />
|
<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"><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}
|
{data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user