ugly, rough react flow

controller/store/service.go

@@ -7,7 +7,7 @@ import (
 
 type Service struct {
 	Model
-	EnvId         int
+	EnvironmentId int
 	ZitiServiceId string
 	Endpoint      string
 	Active        bool

ui/package-lock.json

@@ -3898,6 +3898,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classcat": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.3.tgz",
+      "integrity": "sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -4427,6 +4432,72 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -10075,6 +10146,19 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-flow-renderer": {
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.12.tgz",
+      "integrity": "sha512-DTaz4HV0rA/qtvY80fjdb/QwIvtZEhqCQ2iAqfzFH08RjWCrLmESX4Nc400EB3CGcCK8/pDn/ta4cOS3udunTw==",
+      "requires": {
+        "@babel/runtime": "^7.18.9",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^3.7.2"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -12181,6 +12265,11 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA=="
     }
   }
 }

ui/package.json

@@ -11,6 +11,7 @@
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.2",
     "react-dom": "^18.2.0",
+    "react-flow-renderer": "^10.3.12",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"

ui/src/App.js

@@ -1,5 +1,6 @@
 import Login from './Login';
 import Logout from './Logout';
+import Network from './Network';
 import Version from './Version';
 import {useEffect, useState} from "react";
 import Environments from "./Environments";
@@ -44,6 +45,7 @@ const App = () => {
                     </div>
                 </div>
                 <div className="main">
+                    <Network />
                     <Environments user={user}/>
                 </div>
             </div>

ui/src/Network.js

@@ -0,0 +1,69 @@
+import ReactFlow, {applyNodeChanges, useNodesState} from "react-flow-renderer";
+import * as metadata from './api/metadata';
+import {useCallback, useEffect, useState} from "react";
+
+const Network = (props) => {
+    const [nodes, setNodes, onNodesChange] = useNodesState([])
+    const [edges, setEdges] = useState([]);
+
+    useEffect(() => {
+        let mounted = true
+        metadata.overview().then(resp => {
+            let ovr = buildGraph(resp.data)
+            setNodes(ovr.nodes)
+            setEdges(ovr.edges)
+            console.log('nodes', ovr.nodes);
+        })
+        return () => {
+            mounted = false
+        }
+    }, [])
+
+    return (
+        <div className={"network"}>
+            <h1>Network</h1>
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+            />
+        </div>
+
+    )
+}
+
+function buildGraph(overview) {
+    let out = {
+        nodes: [],
+        edges: []
+    }
+    let id = 1
+    overview.forEach((item) => {
+        let envId = id
+        out.nodes.push({
+            id: '' + envId,
+            data: { label: 'Environment: ' + item.environment.zitiIdentityId },
+            position: { x: (id * 25), y: 0 },
+            draggable: true
+        });
+        id++
+        item.services.forEach((item) => {
+            out.nodes.push({
+                id: '' + id,
+                data: { label: 'Service: ' + item.zitiServiceId },
+                position: { x: (id * 25), y: 0 },
+                draggable: true
+            })
+            out.edges.push({
+                id: 'e' + envId + '-' + id,
+                source: '' + id,
+                target: '' + envId,
+                animated: true
+            })
+            id++
+        });
+    });
+    return out
+}
+
+export default Network;

ui/src/index.css

@@ -113,4 +113,8 @@ h1, h2, h3, h4, h5, h6 {
 .rdt_TableCol_Sortable div {
   font-family: 'Russo One', sans-serif;
   font-size: 1.25em;
+}
+
+.network {
+  height: 400px;
 }