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

move visual overview into state store (#809)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-18 14:53:19 -05:00
parent 686443c921
commit 2f3fa58b21
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui100/src/ApiConsole.tsx
View File

@ -18,25 +18,14 @@ interface ApiConsoleProps {
} }
const ApiConsole = ({ user, logout }: ApiConsoleProps) => { const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
const [version, setVersion] = useState("no version set"); const overview = useMetricsStore((state) => state.overview);
const [overview, setOverview] = useState(new VisualOverview()); const updateOverview = useMetricsStore((state) => state.updateOverview);
const oldVov = useRef<VisualOverview>(overview);
const [selectedNode, setSelectedNode] = useState(null as Node); const [selectedNode, setSelectedNode] = useState(null as Node);
const [sidePanel, setSidePanel] = useState(<></>); const [sidePanel, setSidePanel] = useState(<></>);
const oldVov = useRef<VisualOverview>(overview);
const updateEnvironments = useMetricsStore((state) => state.updateEnvironments); const updateEnvironments = useMetricsStore((state) => state.updateEnvironments);
useEffect(() => { const retrieveOverview = () => {
let api = new MetadataApi();
api.version()
.then(d => {
setVersion(d);
})
.catch(e => {
console.log(e);
});
}, []);
const update = () => {
let cfg = new Configuration({ let cfg = new Configuration({
headers: { headers: {
"X-TOKEN": user.token "X-TOKEN": user.token
@ -47,8 +36,8 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
.then(d => { .then(d => {
let newVov = mergeVisualOverview(oldVov.current, user, d.accountLimited!, d); let newVov = mergeVisualOverview(oldVov.current, user, d.accountLimited!, d);
if(!nodesEqual(oldVov.current.nodes, newVov.nodes)) { if(!nodesEqual(oldVov.current.nodes, newVov.nodes)) {
console.log("refreshed vov", oldVov.current.nodes, newVov.nodes); console.log("refreshed vov", oldVov.nodes, newVov.nodes);
setOverview(newVov); updateOverview(newVov);
oldVov.current = newVov; oldVov.current = newVov;
} }
}) })
@ -58,11 +47,11 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
} }
useEffect(() => { useEffect(() => {
update(); retrieveOverview();
let mounted = true; let mounted = true;
let interval = setInterval(() => { let interval = setInterval(() => {
if(mounted) { if(mounted) {
update(); retrieveOverview();
} }
}, 1000); }, 1000);
return () => { return () => {

8
ui100/src/Visualizer.tsx
View File

@ -65,9 +65,11 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
} }
useEffect(() => { useEffect(() => {
let layouted = layout(vov.nodes, vov.edges); if(vov) {
setNodes(layouted.nodes); let layouted = layout(vov.nodes, vov.edges);
setEdges(layouted.edges); setNodes(layouted.nodes);
setEdges(layouted.edges);
}
}, [vov]); }, [vov]);
return ( return (

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

@ -1,16 +1,21 @@
import {create} from "zustand"; import {create} from "zustand";
import {Environment} from "../api"; import {Environment} from "../api";
import {VisualOverview} from "./visualizer.ts";
type State = { type MetricsStoreState = {
overview: VisualOverview;
environments: Array<Environment>; environments: Array<Environment>;
}; };
type Action = { type MetricsStoreAction = {
updateEnvironments: (environments: State['environments']) => void updateOverview: (vov: MetricsStoreState['overview']) => void,
updateEnvironments: (environments: MetricsStoreState['environments']) => void
}; };
const useMetricsStore = create<State & Action>((set) => ({ const useMetricsStore = create<MetricsStoreState & MetricsStoreAction>((set) => ({
overview: new VisualOverview(),
environments: new Array<Environment>(), environments: new Array<Environment>(),
updateOverview: (vov) => set({overview: vov}),
updateEnvironments: (environments) => set({environments: environments}), updateEnvironments: (environments) => set({environments: environments}),
})); }));