Switch from DOT to JSON data for network graph

Author: Michel Zimmer

Dockerfile

@@ -26,5 +26,5 @@ LABEL org.opencontainers.image.vendor="neuland – Büro für Informatik GmbH"
 LABEL org.opencontainers.image.licenses="MIT"
 LABEL org.opencontainers.image.title="bandwhichd-ui"
 LABEL org.opencontainers.image.description="bandwhichd ui displaying network topology and statistics"
-LABEL org.opencontainers.image.version="0.5.0"
+LABEL org.opencontainers.image.version="0.6.0"
 COPY --from=build --chown=root:root /home/node/dist /usr/share/nginx/html

mocks/apiHandler.ts

@@ -27,25 +27,27 @@ const handleWithMocks =
         });
 
         request.on("end", () => {
-            if (request.method !== "GET"
-                || request.url !== "/api/v1/stats") {
+            if (request.url !== "/api/v1/stats") {
                 response.writeHead(404);
                 response.end();
                 return;
             }
 
+            if (request.method !== "GET") {
+                response.writeHead(405, {
+                    "Allow": "GET",
+                });
+                response.end();
+                return;
+            }
+
             if (chunks.length > 0) {
                 response.writeHead(400);
                 response.end();
                 return;
             }
 
-            const format =
-                request.headers.accept === "text/vnd.graphviz; q=1.0"
-                    ? "dot"
-                    : "json";
-
-            const filePath = path.join(process.cwd(), 'mocks', `stats.${format}`);
+            const filePath = path.join(process.cwd(), 'mocks', `stats.json`);
             const fileStat = fs.statSync(filePath);
 
             response.writeHead(200, {

mocks/stats.dot

@@ -1,6 +1,6 @@
 {
   "name": "bandwhichd-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "bandwhichd ui displaying network topology and statistics",
   "license": "MIT",
   "private": true,

mocks/stats.json

@@ -1,20 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import * as VisNetwork from "vis-network";
-import { HostId } from "./Stats";
+import { HostId, Stats } from "./Stats";
 
 import styles from "./Graph.module.css";
-
-const fetchData = async (): Promise<string> => {
-    const response = await window.fetch("/api/v1/stats", {
-        method: "GET",
-        headers: {
-            "Accept": "text/vnd.graphviz; q=1.0"
-        }
-    });
-    return response.text();
-}
+import { Seq } from "immutable";
 
 export interface GraphProps {
+    maybeStats: Stats | null;
     maybeSelectedHostId: HostId | null,
     setMaybeSelectedHostId: (maybeSelectedHostId: HostId | null) => void,
 }
@@ -26,34 +18,63 @@ export const Graph: React.FC<GraphProps> =
         const networkRef = useRef<VisNetwork.Network | null>(null);
 
         useEffect(() => {
-            if (containerRef.current === null) {
+            if (containerRef.current === null
+                || props.maybeStats === null) {
                 return;
             }
             const container = containerRef.current;
+            const stats = props.maybeStats;
 
             setIsLoading(true);
-            fetchData().then(data => {
-                // @ts-ignore
-                const parsedData = VisNetwork.parseDOTNetwork(data);
-                parsedData.options.physics = {
+            const hostNodes: Seq.Indexed<VisNetwork.Node> =
+                stats.hosts
+                    .entrySeq()
+                    .map(([hostId, host]) => ({
+                        id: hostId,
+                        label: host.hostname,
+                    }));
+            const unmonitoredHostNodes: Seq.Indexed<VisNetwork.Node> =
+                stats.unmonitoredHosts
+                    .entrySeq()
+                    .map(([hostId, unmonitoredHost]) => ({
+                        id: hostId,
+                        label: unmonitoredHost.host,
+                    }));
+            const edges: Seq.Indexed<VisNetwork.Edge> =
+                stats.hosts
+                    .entrySeq()
+                    .flatMap(([hostId, host]) =>
+                        host.connections
+                            .entrySeq()
+                            .map(([otherHostId, _]) => ({
+                                from: hostId,
+                                to: otherHostId,
+                            }))
+                    );
+            const data: VisNetwork.Data = {
+                nodes: hostNodes.concat(unmonitoredHostNodes).toArray(),
+                edges: edges.toArray(),
+            };
+            const options: VisNetwork.Options = {
+                physics: {
                     solver: "forceAtlas2Based"
-                };
-                const network = new VisNetwork.Network(container, parsedData);
-                network.on("selectNode", (event) => {
-                    props.setMaybeSelectedHostId(event.nodes[0]);
-                });
-                network.on("afterDrawing", (_) => {
-                    setIsLoading(false);
-                });
-                networkRef.current = network;
-            }).catch(console.error);
+                }
+            };
+            const network = new VisNetwork.Network(container, data, options);
+            network.on("selectNode", (event) => {
+                props.setMaybeSelectedHostId(event.nodes[0]);
+            });
+            network.on("afterDrawing", (_) => {
+                setIsLoading(false);
+            });
+            networkRef.current = network;
 
             return () => {
                 if (networkRef.current !== null) {
                     networkRef.current.destroy();
                 }
             }
-        }, [containerRef]);
+        }, [containerRef, props.maybeStats]);
 
         useEffect(() => {
             if (networkRef.current !== null && props.maybeSelectedHostId !== null) {
@@ -62,7 +83,7 @@ export const Graph: React.FC<GraphProps> =
         }, [networkRef, props.maybeSelectedHostId]);
 
         return <section>
-            { isLoading && <span className={styles.loading}>Loading…</span> }
+            {isLoading && <span className={styles.loading}>Loading…</span>}
             <div className={styles.container} ref={containerRef}></div>
         </section>;
     };

package.json

@@ -29,7 +29,7 @@ export const Main: React.FC =
 
         return <main className={styles.main}>
             <NodeSelector {...{ maybeStats, maybeSelectedHostId, setMaybeSelectedHostId }} />
-            <Graph {...{ maybeSelectedHostId, setMaybeSelectedHostId }} />
+            <Graph {...{ maybeStats, maybeSelectedHostId, setMaybeSelectedHostId }} />
             <HostDetails {...{ maybeStats, maybeSelectedHost, setMaybeSelectedHostId }} />
         </main>;
     };