mirror of
https://github.com/openziti/zrok.git
synced 2025-01-31 18:39:22 +01:00
structural and naming lint (#724)
This commit is contained in:
parent
70a1a43a9a
commit
272cc87797
@ -1,6 +1,6 @@
|
|||||||
import {JSX, useCallback, useEffect, useRef, useState} from "react";
|
import {JSX, useCallback, useEffect, useRef, useState} from "react";
|
||||||
import {Configuration, MetadataApi} from "./api";
|
import {Configuration, MetadataApi} from "./api";
|
||||||
import {layout, mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
|
import {Graph, layout, mergeGraph, nodesEqual} from "./model/graph.ts";
|
||||||
import {Grid2} from "@mui/material";
|
import {Grid2} from "@mui/material";
|
||||||
import NavBar from "./NavBar.tsx";
|
import NavBar from "./NavBar.tsx";
|
||||||
import Visualizer from "./Visualizer.tsx";
|
import Visualizer from "./Visualizer.tsx";
|
||||||
@ -17,9 +17,9 @@ interface ApiConsoleProps {
|
|||||||
|
|
||||||
const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
||||||
const user = useStore((state) => state.user);
|
const user = useStore((state) => state.user);
|
||||||
const overview = useStore((state) => state.overview);
|
const graph = useStore((state) => state.graph);
|
||||||
const updateOverview = useStore((state) => state.updateOverview);
|
const updateGraph = useStore((state) => state.updateGraph);
|
||||||
const oldVov = useRef<VisualOverview>(overview);
|
const oldGraph = useRef<Graph>(graph);
|
||||||
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);
|
||||||
@ -55,11 +55,11 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
let api = new MetadataApi(cfg);
|
let api = new MetadataApi(cfg);
|
||||||
api.overview()
|
api.overview()
|
||||||
.then(d => {
|
.then(d => {
|
||||||
let newVov = mergeVisualOverview(oldVov.current, user, d.accountLimited!, d);
|
let newVov = mergeGraph(oldGraph.current, user, d.accountLimited!, d);
|
||||||
if(!nodesEqual(oldVov.current.nodes, newVov.nodes)) {
|
if(!nodesEqual(oldGraph.current.nodes, newVov.nodes)) {
|
||||||
console.log("refreshed vov", oldVov.current.nodes, newVov.nodes);
|
console.log("refreshed vov", oldGraph.current.nodes, newVov.nodes);
|
||||||
updateOverview(newVov);
|
updateGraph(newVov);
|
||||||
oldVov.current = newVov;
|
oldGraph.current = newVov;
|
||||||
|
|
||||||
let laidOut = layout(newVov.nodes, newVov.edges);
|
let laidOut = layout(newVov.nodes, newVov.edges);
|
||||||
let selected = laidOut.nodes.map((n) => ({
|
let selected = laidOut.nodes.map((n) => ({
|
||||||
|
@ -3,13 +3,13 @@ import {Edge, Node} from "@xyflow/react";
|
|||||||
import {User} from "./user.ts";
|
import {User} from "./user.ts";
|
||||||
import {stratify, tree} from "d3-hierarchy";
|
import {stratify, tree} from "d3-hierarchy";
|
||||||
|
|
||||||
export class VisualOverview {
|
export class Graph {
|
||||||
nodes: Node[];
|
nodes: Node[];
|
||||||
edges: Edge[];
|
edges: Edge[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export const mergeVisualOverview = (oldVov: VisualOverview, u: User, limited: boolean, newOv: Overview): VisualOverview => {
|
export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Overview): Graph => {
|
||||||
let newVov = new VisualOverview();
|
let newVov = new Graph();
|
||||||
|
|
||||||
let accountNode = {
|
let accountNode = {
|
||||||
id: u.token,
|
id: u.token,
|
||||||
@ -152,7 +152,7 @@ export const nodesEqual = (a: Node[], b: Node[]) => {
|
|||||||
return a.every((e, i) => e.id === b[i].id && e.data.limited === b[i].data.limited && e.data.label === b[i].data.label);
|
return a.every((e, i) => e.id === b[i].id && e.data.limited === b[i].data.limited && e.data.label === b[i].data.label);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const layout = (nodes, edges): VisualOverview => {
|
export const layout = (nodes, edges): Graph => {
|
||||||
if(!nodes) {
|
if(!nodes) {
|
||||||
return { nodes: [], edges: [] };
|
return { nodes: [], edges: [] };
|
||||||
}
|
}
|
||||||
@ -170,5 +170,5 @@ export const layout = (nodes, edges): VisualOverview => {
|
|||||||
.descendants()
|
.descendants()
|
||||||
.map((node) => ({...node.data, position: {x: node.x, y: node.y}})),
|
.map((node) => ({...node.data, position: {x: node.x, y: node.y}})),
|
||||||
edges,
|
edges,
|
||||||
} as VisualOverview
|
} as Graph
|
||||||
}
|
}
|
@ -1,12 +1,12 @@
|
|||||||
import {create} from "zustand";
|
import {create} from "zustand";
|
||||||
import {Environment} from "../api";
|
import {Environment} from "../api";
|
||||||
import {VisualOverview} from "./visualizer.ts";
|
import {Graph} from "./graph.ts";
|
||||||
import {Edge, Node, Viewport} from "@xyflow/react";
|
import {Edge, Node, Viewport} from "@xyflow/react";
|
||||||
import {User} from "./user.ts";
|
import {User} from "./user.ts";
|
||||||
|
|
||||||
type StoreState = {
|
type StoreState = {
|
||||||
user: User;
|
user: User;
|
||||||
overview: VisualOverview;
|
graph: Graph;
|
||||||
environments: Array<Environment>;
|
environments: Array<Environment>;
|
||||||
nodes: Node[];
|
nodes: Node[];
|
||||||
edges: Edge[];
|
edges: Edge[];
|
||||||
@ -16,7 +16,7 @@ type StoreState = {
|
|||||||
|
|
||||||
type StoreAction = {
|
type StoreAction = {
|
||||||
updateUser: (user: StoreState['user']) => void,
|
updateUser: (user: StoreState['user']) => void,
|
||||||
updateOverview: (vov: StoreState['overview']) => void,
|
updateGraph: (vov: StoreState['graph']) => void,
|
||||||
updateEnvironments: (environments: StoreState['environments']) => void,
|
updateEnvironments: (environments: StoreState['environments']) => void,
|
||||||
updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
|
updateSelectedNode: (selectedNode: StoreState['selectedNode']) => void,
|
||||||
updateNodes: (nodes: StoreState['nodes']) => void,
|
updateNodes: (nodes: StoreState['nodes']) => void,
|
||||||
@ -26,14 +26,14 @@ type StoreAction = {
|
|||||||
|
|
||||||
const useStore = create<StoreState & StoreAction>((set) => ({
|
const useStore = create<StoreState & StoreAction>((set) => ({
|
||||||
user: null,
|
user: null,
|
||||||
overview: new VisualOverview(),
|
graph: new Graph(),
|
||||||
environments: new Array<Environment>(),
|
environments: new Array<Environment>(),
|
||||||
nodes: [],
|
nodes: [],
|
||||||
edges: [],
|
edges: [],
|
||||||
selectedNode: null,
|
selectedNode: null,
|
||||||
viewport: {x: 0, y: 0, zoom: 1},
|
viewport: {x: 0, y: 0, zoom: 1},
|
||||||
updateUser: (user) => set({user: user}),
|
updateUser: (user) => set({user: user}),
|
||||||
updateOverview: (vov) => set({overview: vov}),
|
updateGraph: (vov) => set({overview: vov}),
|
||||||
updateEnvironments: (environments) => set({environments: environments}),
|
updateEnvironments: (environments) => set({environments: environments}),
|
||||||
updateNodes: (nodes) => set({nodes: nodes}),
|
updateNodes: (nodes) => set({nodes: nodes}),
|
||||||
updateEdges: (edges) => set({edges: edges}),
|
updateEdges: (edges) => set({edges: edges}),
|
||||||
|
Loading…
Reference in New Issue
Block a user