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

improved sparkdata state (#823)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-13 11:58:10 -05:00
parent 56277a4712
commit a558131c93
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui100/src/ApiConsole.tsx
View File

@ -8,7 +8,7 @@ import AccountPanel from "./AccountPanel.tsx";
import EnvironmentPanel from "./EnvironmentPanel.tsx";
import SharePanel from "./SharePanel.tsx";
import AccessPanel from "./AccessPanel.tsx";
import useStore from "./model/store.ts";
import useStore, {Sparkdata} from "./model/store.ts";
import TabularView from "./TabularView.tsx";
import {Node} from "@xyflow/react";
@ -21,6 +21,10 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
const graph = useStore((state) => state.graph);
const updateGraph = useStore((state) => state.updateGraph);
const oldGraph = useRef<Graph>(graph);
const sparkdata = useStore((state) => state.sparkdata);
const sparkdataRef = useRef<Map<string, Sparkdata>>();
sparkdataRef.current = sparkdata;
const updateSparkdata = useStore((state) => state.updateSparkdata);
const nodes = useStore((state) => state.nodes);
const nodesRef = useRef<Node[]>();
nodesRef.current = nodes;
@ -97,30 +101,25 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
"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 sparkdataIn = new Map<string, Number[]>();
d.sparklines!.forEach(s => {
let activity = new Array<Number>(31);
if(spark.samples) {
spark.samples?.forEach((sample, i) => {
if(s.samples) {
s.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;
}
sparkdataIn.set(s.id!, activity);
}
});
if(updatedNodes) {
updateNodes(updatedNodes);
console.log("updatedNodes", updatedNodes);
}
updateSparkdata(sparkdataIn);
}
})
.catch(e => {

7
ui100/src/EnvironmentNode.tsx
View File

@ -2,12 +2,15 @@ import {Handle, Position} from "@xyflow/react";
import {Grid2} from "@mui/material";
import EnvironmentIcon from "@mui/icons-material/Computer";
import {SparkLineChart} from "@mui/x-charts";
import useStore from "./model/store.ts";
const EnvironmentNode = ({ data }) => {
const sparkdata = useStore((state) => state.sparkdata);
const hiddenSparkline = <></>;
const visibleSparkline = (
<Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
<SparkLineChart data={data.activity ? data.activity : []} height={30} width={100} colors={['#04adef']} />
<SparkLineChart data={sparkdata.get(data.envZId) ? sparkdata.get(data.envZId)! : []} height={30} width={100} colors={['#04adef']} />
</Grid2>
);
@ -19,7 +22,7 @@ const EnvironmentNode = ({ data }) => {
<Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
<Grid2 display="flex">{data.label}</Grid2>
</Grid2>
{data.activity?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
{sparkdata.get(data.envZId)?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
</>
);
}

13
ui100/src/ShareNode.tsx
View File

@ -1,12 +1,24 @@
import {Handle, Position} from "@xyflow/react";
import {Grid2} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
import useStore from "./model/store.ts";
import {SparkLineChart} from "@mui/x-charts";
const ShareNode = ({ data }) => {
const sparkdata = useStore((state) => state.sparkdata);
let shareHandle = <></>;
if(data.accessed) {
shareHandle = <Handle type="target" position={Position.Bottom} id="access"/>;
}
const hiddenSparkline = <></>;
const visibleSparkline = (
<Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
<SparkLineChart data={sparkdata.get(data.shrToken) ? sparkdata.get(data.shrToken)! : []} height={30} width={100} colors={['#04adef']} />
</Grid2>
);
return (
<>
<Handle type="target" position={Position.Top} />
@ -15,6 +27,7 @@ const ShareNode = ({ data }) => {
<Grid2 display="flex"><ShareIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
<Grid2 display="flex">{data.label}</Grid2>
</Grid2>
{sparkdata.get(data.shrToken)?.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
</>
);
}

6
ui100/src/model/store.ts
View File

@ -8,6 +8,7 @@ type StoreState = {
user: User;
graph: Graph;
environments: Array<Environment>;
sparkdata: Map<string, Number[]>;
nodes: Node[];
edges: Edge[];
selectedNode: Node;
@ -18,9 +19,10 @@ type StoreAction = {
updateUser: (user: StoreState['user']) => void,
updateGraph: (vov: StoreState['graph']) => void,
updateEnvironments: (environments: StoreState['environments']) => void,
updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
updateSparkdata: (sparkdata: StoreState['sparkdata']) => void,
updateNodes: (nodes: StoreState['nodes']) => void,
updateEdges: (edges: StoreState['edges']) => void,
updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
updateViewport: (viewport: StoreState['viewport']) => void,
};
@ -28,6 +30,7 @@ const useStore = create<StoreState & StoreAction>((set) => ({
user: null,
graph: new Graph(),
environments: new Array<Environment>(),
sparkdata: new Map<string, Sparkdata>(),
nodes: [],
edges: [],
selectedNode: null,
@ -35,6 +38,7 @@ const useStore = create<StoreState & StoreAction>((set) => ({
updateUser: (user) => set({user: user}),
updateGraph: (vov) => set({overview: vov}),
updateEnvironments: (environments) => set({environments: environments}),
updateSparkdata: (sparkdata) => set({sparkdata: sparkdata}),
updateNodes: (nodes) => set({nodes: nodes}),
updateEdges: (edges) => set({edges: edges}),
updateSelectedNode: (selectedNode) => set({selectedNode: selectedNode}),