first steps with reagraph (#799)

ui100/package.json

@@ -14,7 +14,8 @@
     "@emotion/styled": "^11.13.5",
     "@mui/material": "^6.1.8",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "reagraph": "^4.21.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

ui100/src/ApiConsole.tsx

@@ -1,8 +1,13 @@
 import {useEffect, useState} from "react";
-import {MetadataApi} from "./api";
+import {Configuration, MetadataApi} from "./api";
+import buildVisualizerGraph from "./model/visualizer.ts";
+import {GraphCanvas} from "reagraph";
+import {Box, Grid, Grid2} from "@mui/material";
 
 const ApiConsole = () => {
     const [version, setVersion] = useState("no version set");
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
 
     useEffect(() => {
         let api = new MetadataApi();
@@ -15,10 +20,41 @@ const ApiConsole = () => {
             });
     }, []);
 
+    useEffect(() => {
+        let interval = setInterval(() => {
+            let cfg = new Configuration({
+                headers: {
+                    // ignorable token, local development environment
+                    "X-TOKEN": "q9bwDQqMQ6K6"
+                }
+            });
+            let api = new MetadataApi(cfg);
+            api.overview()
+                .then(d => {
+                    console.log(d);
+                    let graph = buildVisualizerGraph(d);
+
+                    setNodes(graph.nodes);
+                    setEdges(graph.edges);
+                })
+                .catch(e => {
+                    console.log(e);
+                });
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        }
+    }, []);
+
     return (
         <div>
             <h1>zrok</h1>
             <h2>{version}</h2>
+            <Box>
+                <div style={{position: "relative", width: "100%", height: "500px"}}>
+                    <GraphCanvas nodes={nodes} edges={edges}/>
+                </div>
+            </Box>
         </div>
     );
 }

ui100/src/model/visualizer.ts

@@ -0,0 +1,18 @@
+import {Overview} from "../api";
+
+const buildVisualizerGraph = (overview: Overview) => {
+    let nodes = [
+        { id: "1", label: "michael@quigley.com" }
+    ]
+    let edges = [];
+    overview.environments?.forEach((env, i) => {
+        nodes.push({ id: (i+1).toString(), label: env.environment?.description! });
+        edges.push({ source: (i+1).toString(), target: "1", id: (i+1)+"-1" });
+    })
+    return {
+        nodes: nodes,
+        edges: edges,
+    }
+}
+
+export default buildVisualizerGraph;