From afebcc574d2ecdb1e2d9c339e9aa25fe29cdb8ca Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Thu, 3 Feb 2022 10:28:27 -0800
Subject: [PATCH] Add icons to header; randomly generate data.

---
 awx/ui/src/screens/TopologyView/Header.js    |  37 +++
 awx/ui/src/screens/TopologyView/MeshGraph.js | 259 +++----------------
 2 files changed, 76 insertions(+), 220 deletions(-)

diff --git a/awx/ui/src/screens/TopologyView/Header.js b/awx/ui/src/screens/TopologyView/Header.js
index 096d79ce22..ed94f2d295 100644
--- a/awx/ui/src/screens/TopologyView/Header.js
+++ b/awx/ui/src/screens/TopologyView/Header.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { t } from '@lingui/macro';
 import {
+  Button,
   PageSection,
   PageSectionVariants,
   Switch,
@@ -10,6 +11,12 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 
+import {
+  SearchMinusIcon,
+  SearchPlusIcon,
+  ExpandArrowsAltIcon,
+} from '@patternfly/react-icons';
+
 const Header = ({ title, handleSwitchToggle, toggleState }) => {
   const { light } = PageSectionVariants;
 
@@ -32,6 +39,36 @@ const Header = ({ title, handleSwitchToggle, toggleState }) => {
           </Title>
         </div>
         <div>
+          <Tooltip content={t`Zoom in`} position="top">
+            <Button
+              ouiaId="zoom-in-button"
+              aria-label={t`Zoom in`}
+              variant="plain"
+              icon={<SearchPlusIcon />}
+            >
+              <SearchPlusIcon />
+            </Button>
+          </Tooltip>
+          <Tooltip content={t`Zoom out`} position="top">
+            <Button
+              ouiaId="zoom-out-button"
+              aria-label={t`Zoom out`}
+              variant="plain"
+              icon={<SearchMinusIcon />}
+            >
+              <SearchMinusIcon />
+            </Button>
+          </Tooltip>
+          <Tooltip content={t`Fit to screen`} position="top">
+            <Button
+              ouiaId="fit-to-screen-button"
+              aria-label={t`Fit to screen`}
+              variant="plain"
+              icon={<ExpandArrowsAltIcon />}
+            >
+              <ExpandArrowsAltIcon />
+            </Button>
+          </Tooltip>
           <Tooltip content={t`Toggle legend`} position="top">
             <Switch
               id="legend-toggle-switch"
diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index d9b4a98a91..15d4f70b7f 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -14,227 +14,46 @@ function MeshGraph({ showLegend }) {
   const [nodeDetail, setNodeDetail] = useState(null);
   const history = useHistory();
 
+  function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+  let nodes = [];
+  let links = [];
+  const generateLinks = (n, r) => {
+    for (let i = 0; i < r; i++) {
+      const link = {
+        source: n[getRandomInt(0, n.length - 1)].hostname,
+        target: n[getRandomInt(0, n.length - 1)].hostname,
+      };
+      links.push(link);
+    }
+    return { nodes: n, links };
+  };
+  const generateNodes = (n) => {
+    function getRandomType() {
+      return ['hybrid', 'execution', 'control', 'hop'][getRandomInt(0, 3)];
+    }
+    function getRandomState() {
+      return ['healthy', 'error', 'disabled'][getRandomInt(0, 2)];
+    }
+    for (let i = 0; i < n; i++) {
+      const id = i + 1;
+      const randomType = getRandomType();
+      const randomState = getRandomState();
+      const node = {
+        id,
+        hostname: `node-${id}`,
+        node_type: randomType,
+        node_state: randomState,
+      };
+      nodes.push(node);
+    }
+    return generateLinks(nodes, getRandomInt(1, n - 1));
+  };
+  const data = generateNodes(getRandomInt(5, 30));
   const draw = () => {
-    const data = {
-      nodes: [
-        {
-          id: 1,
-          hostname: 'awx_1',
-          node_type: 'hybrid',
-          node_state: 'healthy',
-        },
-        {
-          id: 3,
-          hostname: 'receptor-1',
-          node_type: 'execution',
-          node_state: 'healthy',
-        },
-        {
-          id: 4,
-          hostname: 'receptor-2',
-          node_type: 'execution',
-          node_state: 'healthy',
-        },
-        {
-          id: 2,
-          hostname: 'receptor-hop',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 5,
-          hostname: 'receptor-hop-1',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 6,
-          hostname: 'receptor-hop-2',
-          node_type: 'hop',
-          node_state: 'disabled',
-        },
-        {
-          id: 7,
-          hostname: 'receptor-hop-3',
-          node_type: 'hop',
-          node_state: 'error',
-        },
-        {
-          id: 8,
-          hostname: 'receptor-hop-4',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 9,
-          hostname: 'receptor-hop-5',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 10,
-          hostname: 'receptor-hop-5',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 11,
-          hostname: 'receptor-hop-6',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 12,
-          hostname: 'awx_1',
-          node_type: 'hybrid',
-          node_state: 'healthy',
-        },
-        {
-          id: 13,
-          hostname: 'receptor-1',
-          node_type: 'execution',
-          node_state: 'healthy',
-        },
-        {
-          id: 14,
-          hostname: 'receptor-2',
-          node_type: 'execution',
-          node_state: 'healthy',
-        },
-        {
-          id: 1,
-          hostname: 'receptor-hop',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 5,
-          hostname: 'receptor-hop-1',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 6,
-          hostname: 'receptor-hop-2',
-          node_type: 'hop',
-          node_state: 'disabled',
-        },
-        {
-          id: 7,
-          hostname: 'receptor-hop-3',
-          node_type: 'hop',
-          node_state: 'error',
-        },
-        {
-          id: 8,
-          hostname: 'receptor-hop-4',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 9,
-          hostname: 'receptor-hop-5',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 10,
-          hostname: 'receptor-hop-5',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 11,
-          hostname: 'receptor-hop-6',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 14,
-          hostname: 'receptor-2',
-          node_type: 'execution',
-          node_state: 'healthy',
-        },
-        {
-          id: 1,
-          hostname: 'receptor-hop',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 5,
-          hostname: 'receptor-hop-1',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 6,
-          hostname: 'receptor-hop-2',
-          node_type: 'hop',
-          node_state: 'disabled',
-        },
-        {
-          id: 7,
-          hostname: 'receptor-hop-3',
-          node_type: 'hop',
-          node_state: 'error',
-        },
-        {
-          id: 8,
-          hostname: 'receptor-hop-4',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 9,
-          hostname: 'receptor-hop-5',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 10,
-          hostname: 'receptor-hop-5',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-        {
-          id: 11,
-          hostname: 'receptor-hop-6',
-          node_type: 'hop',
-          node_state: 'healthy',
-        },
-      ],
-      links: [
-        {
-          source: 'receptor-hop',
-          target: 'awx_1',
-        },
-        {
-          source: 'receptor-1',
-          target: 'receptor-hop',
-        },
-        {
-          source: 'receptor-2',
-          target: 'receptor-hop',
-        },
-        {
-          source: 'receptor-hop-3',
-          target: 'receptor-hop',
-        },
-        // {
-        //   "source": "receptor-hop",
-        //   "target": "receptor-hop-1"
-        // },
-        // {
-        //   "source": "receptor-1",
-        //   "target": "receptor-hop-2"
-        // },
-        // {
-        //   "source": "awx_1",
-        //   "target": "receptor-hop-4"
-        // }
-      ],
-    };
     const margin = 15;
     const defaultRadius = 16;
     const defaultCollisionFactor = 80;