refactored data heirarchy

ui/src/App.js

@@ -46,7 +46,6 @@ const App = () => {
                 </div>
                 <div className="main">
                     <Network />
-                    <Environments user={user}/>
                 </div>
             </div>
         </div>

ui/src/Environments.js

@@ -1,55 +1,42 @@
-import {useEffect, useState} from "react";
-import * as metadata from './api/metadata';
 import DataTable from 'react-data-table-component';
 
 const Environments = (props) => {
-    const [environments, setEnvironments] = useState([])
-
     const columns = [
         {
             name: 'Host',
-            selector: row => row.host,
+            selector: row => row.environment.host,
             sortable: true,
         },
         {
             name: 'Address',
-            selector: row => row.address,
+            selector: row => row.environment.address,
             sortable: true,
         },
         {
             name: 'Description',
-            selector: row => row.description,
+            selector: row => row.environment.description,
             sortable: true,
         },
         {
             name: 'Ziti Identity',
-            selector: row => row.zitiIdentityId,
+            selector: row => row.environment.zitiIdentityId,
             sortable: true,
         },
         {
             name: 'Active',
-            selector: row => row.active ? 'Active' : 'Inactive',
+            selector: row => row.environment.active ? 'Active' : 'Inactive',
             sortable: true,
         },
     ]
 
-    useEffect(() => {
-        let mounted = true;
-        metadata.listEnvironments().then((resp) => {
-            setEnvironments(resp.data)
-            console.log(resp.data);
-        })
-        return () => { mounted = false; }
-    }, [])
-
     return (
         <div>
-            <h1>Environments</h1>
+            <h2>Environments</h2>
-            { environments && environments.length > 0 && (
+            { props.overview && props.overview.length > 0 && (
                 <div>
                     <DataTable
                         columns={columns}
-                        data={environments}
+                        data={props.overview}
                         defaultSortFieldId={1}
                     />
                 </div>

ui/src/Network.js

@@ -1,9 +1,11 @@
+import Environments from './Environments';
 import * as metadata from './api/metadata';
 import {useEffect, useLayoutEffect, useRef, useState} from "react";
 import ReactFlow, {isNode, useNodesState} from "react-flow-renderer";
 import dagre from 'dagre';
 
-const Network = (props) => {
+const Network = () => {
+    const [overview, setOverview] = useState([]);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges] = useState([]);
 
@@ -11,6 +13,8 @@ const Network = (props) => {
         let mounted = true
         let interval = setInterval(() => {
             metadata.overview().then(resp => {
+                setOverview(resp.data)
+
                 let g = buildGraph(resp.data)
                 setNodes(getLayout(g))
                 setEdges(g.edges)
@@ -23,12 +27,17 @@ const Network = (props) => {
     }, [])
 
     return (
-        <div className={"network"}>
+        <div>
-            <h1>Network</h1>
+            <div className={"network"}>
-            <ReactFlow
+                <h1>Network</h1>
-                nodes={nodes}
+                <ReactFlow
-                edges={edges}
+                    nodes={nodes}
-                onNodesChange={onNodesChange}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                />
+            </div>
+            <Environments
+                overview={overview}
             />
         </div>
     )