From bf7495c3cd9ebe594c551a2cd6dfd047e23bd410 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Thu, 25 Feb 2021 12:14:51 -0500
Subject: [PATCH 01/21] Get data successfully

---
 client/src/components/menu.tsx       |  4 +++
 client/src/router.tsx                |  3 ++
 client/src/views/prometheusgraph.tsx | 51 ++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 client/src/views/prometheusgraph.tsx

diff --git a/client/src/components/menu.tsx b/client/src/components/menu.tsx
index a065d16..c69576a 100644
--- a/client/src/components/menu.tsx
+++ b/client/src/components/menu.tsx
@@ -62,6 +62,10 @@ export default class Menu extends Base<MenuProps, MenuStates> {
                         {canView(rules, api.namespace) && (
                             <MenuItem title='Namespaces' path='namespace' resource='Namespace' onClick={onClick} />
                         )}
+
+                        {canView(rules, api.namespace) && (
+                            <MenuItem title='PrometheusGraph' path='prometheusgraph' resource='Node' onClick={onClick} />
+                        )}
                     </Group>
 
                     {/* Workloads */}
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 0f79f10..4905448 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -26,6 +26,7 @@ import PersistentVolumeClaims from './views/persistentVolumeClaims';
 import PersistentVolumes from './views/persistentVolumes';
 import Pod from './views/pod';
 import Pods from './views/pods';
+import PrometheusGraph from './views/prometheusgraph';
 import ReplicaSet from './views/replicaSet';
 import ReplicaSets from './views/replicaSets';
 import Role from './views/role';
@@ -108,6 +109,8 @@ registerRoute('storageclass', () => <StorageClasses />);
 // @ts-ignore
 registerRoute('storageclass/:name', params => <StorageClass {...params} />);
 registerRoute('workload', () => <Workloads />);
+
+registerRoute('prometheusgraph', () => <PrometheusGraph />);
 // @ts-ignore
 registerRoute('workload/cronjob/:namespace/:name', params => <CronJob {...params} />);
 // @ts-ignore
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
new file mode 100644
index 0000000..e0d7220
--- /dev/null
+++ b/client/src/views/prometheusgraph.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Base from '../components/base';
+
+
+const {hostname} = window.location;
+const isDev = process.env.NODE_ENV !== 'production';
+const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:50642' : '';
+const GRAPH_QUERIES = [
+    'instance:node_cpu:ratio',
+];
+
+
+type Props = {
+
+}
+
+type State = {
+    metric: string;
+    result: string;
+    values: Array<Array<string>>;
+}
+
+export default class PrometheusGraph extends Base<Props, State> {
+    componentDidMount() {
+        // TODO: use proxy if ready
+        const url = `${BASE_HTTP_URL}/api/v1/query_range`;
+        for (let i = 0; i < GRAPH_QUERIES.length; i++) {
+            const query = GRAPH_QUERIES[i];
+            const params = {
+                query,
+                start: (Date.now() / 1000).toString(),
+                end: (Date.now() / 1000 + 60 * 60).toString(), // One hour range
+                step: '1',
+            };
+            fetch(`${url}?${new URLSearchParams(params).toString()}`).then((result) => {
+                console.log(result);
+                // @ts-ignore
+                this.setState(prevState => ({
+                    ...prevState,
+                    result,
+                }));
+            });
+        }
+    }
+
+    render() {
+        return <div>
+            <div>{this.state?.result && (this.state?.result)}</div>
+        </div>;
+    }
+}

From f2f046cb1accc9419f5fa987e1b88f439c2af819 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Thu, 25 Feb 2021 12:55:15 -0500
Subject: [PATCH 02/21] Fix frontend to update data in state

---
 client/src/views/prometheusgraph.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index e0d7220..e3640a4 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 type State = {
     metric: string;
-    result: string;
+    result: any;
     values: Array<Array<string>>;
 }
 
@@ -32,20 +32,22 @@ export default class PrometheusGraph extends Base<Props, State> {
                 end: (Date.now() / 1000 + 60 * 60).toString(), // One hour range
                 step: '1',
             };
-            fetch(`${url}?${new URLSearchParams(params).toString()}`).then((result) => {
-                console.log(result);
-                // @ts-ignore
-                this.setState(prevState => ({
-                    ...prevState,
-                    result,
-                }));
-            });
+            fetch(`${url}?${new URLSearchParams(params).toString()}`)
+                .then((result) => result.json())
+                .then((json) => {
+                    // @ts-ignore
+                    this.setState(prevState => ({
+                        ...prevState,
+                        result: json,
+                    }));
+                    console.log(this.state?.result);
+                });
         }
     }
 
     render() {
         return <div>
-            <div>{this.state?.result && (this.state?.result)}</div>
+            <div>{this.state?.result && (this.state?.result.data.toString())}</div>
         </div>;
     }
 }

From 5104f3e10d29a6d582e04f3dd9a9c9b3854d654f Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Thu, 25 Feb 2021 15:15:29 -0500
Subject: [PATCH 03/21] Plot the graph

---
 client/package-lock.json             | 284 ++++++++++++++++++++++-----
 client/package.json                  |   2 +
 client/src/scss/index.scss           |   7 +
 client/src/views/prometheusgraph.tsx |  39 +++-
 4 files changed, 275 insertions(+), 57 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 7c3e9ff..b985b37 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1577,27 +1577,27 @@
     },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
       "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
     },
     "@protobufjs/base64": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/base64/-/base64-1.1.2.tgz",
       "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
     },
     "@protobufjs/codegen": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/codegen/-/codegen-2.0.4.tgz",
       "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
     },
     "@protobufjs/eventemitter": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
       "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
     },
     "@protobufjs/fetch": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/fetch/-/fetch-1.1.0.tgz",
       "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
       "requires": {
         "@protobufjs/aspromise": "^1.1.1",
@@ -1606,27 +1606,27 @@
     },
     "@protobufjs/float": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/float/-/float-1.0.2.tgz",
       "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
     },
     "@protobufjs/inquire": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/inquire/-/inquire-1.1.0.tgz",
       "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
     },
     "@protobufjs/path": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/path/-/path-1.1.2.tgz",
       "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
     },
     "@protobufjs/pool": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/pool/-/pool-1.1.0.tgz",
       "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
     },
     "@protobufjs/utf8": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
     },
     "@svgr/babel-plugin-add-jsx-attribute": {
@@ -1975,7 +1975,7 @@
     },
     "@types/long": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@types/long/-/long-4.0.1.tgz",
       "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
     "@types/minimatch": {
@@ -2030,7 +2030,7 @@
     },
     "@types/react-select": {
       "version": "3.0.22",
-      "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.22.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@types/react-select/-/react-select-3.0.22.tgz",
       "integrity": "sha512-fqgmC979JPr/6476Pau6QnmI9zVV664R7Q92Ld1rgTn+umtUXT5X3+PO/x6O4imCZnh7XCqZcouabWAlAQJNpQ==",
       "requires": {
         "@types/react": "*",
@@ -2046,6 +2046,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-vis": {
+      "version": "1.11.6",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@types/react-vis/-/react-vis-1.11.6.tgz",
+      "integrity": "sha512-om55tYHY7X3dPsIG0IKOi4Cu4FNjRqCXOgfVBcFNuHYLJIZ+Mzlc8uDy7YXNxLAqDOo6tabNIFeTvej2svy95g==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -4004,7 +4012,7 @@
     },
     "cli-width": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
     },
     "cliui": {
@@ -4785,6 +4793,115 @@
         "type": "^1.0.1"
       }
     },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "requires": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "requires": {
+        "d3-array": "1"
+      }
+    },
+    "d3-hexbin": {
+      "version": "0.2.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
+      "integrity": "sha1-nFg32s/UcasFM3qeke8Qv8T5iDE="
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-sankey": {
+      "version": "0.7.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-sankey/-/d3-sankey-0.7.1.tgz",
+      "integrity": "sha1-0imDImj8aaf+yEgD6WwiVqYUxSE=",
+      "requires": {
+        "d3-array": "1",
+        "d3-collection": "1",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "d3-scale": {
+      "version": "1.0.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-scale/-/d3-scale-1.0.7.tgz",
+      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+    },
+    "d3-time-format": {
+      "version": "2.3.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-time-format/-/d3-time-format-2.3.0.tgz",
+      "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -5093,7 +5210,7 @@
     },
     "doctrine": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "requires": {
         "esutils": "^2.0.2"
@@ -5132,6 +5249,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5424,7 +5546,7 @@
     },
     "eslint": {
       "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/eslint/-/eslint-6.8.0.tgz",
       "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -5468,7 +5590,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "ansi-styles": {
@@ -5491,7 +5613,7 @@
         },
         "cross-spawn": {
           "version": "6.0.5",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/cross-spawn/-/cross-spawn-6.0.5.tgz",
           "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
           "requires": {
             "nice-try": "^1.0.4",
@@ -5503,14 +5625,14 @@
           "dependencies": {
             "semver": {
               "version": "5.7.1",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+              "resolved": "https://nexus.corp.indeed.com/repository/npm/semver/-/semver-5.7.1.tgz",
               "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
             }
           }
         },
         "eslint-utils": {
           "version": "1.4.3",
-          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/eslint-utils/-/eslint-utils-1.4.3.tgz",
           "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
           "requires": {
             "eslint-visitor-keys": "^1.1.0"
@@ -5518,7 +5640,7 @@
         },
         "globals": {
           "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/globals/-/globals-12.4.0.tgz",
           "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
           "requires": {
             "type-fest": "^0.8.1"
@@ -5535,22 +5657,22 @@
         },
         "regexpp": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/regexpp/-/regexpp-2.0.1.tgz",
           "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
         },
         "resolve-from": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/resolve-from/-/resolve-from-4.0.0.tgz",
           "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
         },
         "semver": {
           "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         },
         "strip-ansi": {
           "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5966,7 +6088,7 @@
     },
     "espree": {
       "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/espree/-/espree-6.2.1.tgz",
       "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
       "requires": {
         "acorn": "^7.1.1",
@@ -6422,7 +6544,7 @@
     },
     "file-entry-cache": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
       "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
       "requires": {
         "flat-cache": "^2.0.1"
@@ -6524,7 +6646,7 @@
     },
     "flat-cache": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/flat-cache/-/flat-cache-2.0.1.tgz",
       "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
       "requires": {
         "flatted": "^2.0.0",
@@ -6825,6 +6947,15 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -7062,6 +7193,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoek": {
+      "version": "4.2.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/hoek/-/hoek-4.2.1.tgz",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -7287,7 +7423,7 @@
     },
     "ignore": {
       "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "immer": {
@@ -7378,7 +7514,7 @@
     },
     "inquirer": {
       "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/inquirer/-/inquirer-7.3.3.tgz",
       "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
       "requires": {
         "ansi-escapes": "^4.2.1",
@@ -7398,7 +7534,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-regex/-/ansi-regex-5.0.0.tgz",
           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "ansi-styles": {
@@ -7411,7 +7547,7 @@
         },
         "chalk": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/chalk/-/chalk-4.1.0.tgz",
           "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -7420,7 +7556,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
@@ -7428,27 +7564,27 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "emoji-regex": {
           "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/emoji-regex/-/emoji-regex-8.0.0.tgz",
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
         "string-width": {
           "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/string-width/-/string-width-4.2.0.tgz",
           "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
           "requires": {
             "emoji-regex": "^8.0.0",
@@ -7458,7 +7594,7 @@
         },
         "strip-ansi": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-ansi/-/strip-ansi-6.0.0.tgz",
           "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
             "ansi-regex": "^5.0.0"
@@ -9250,7 +9386,7 @@
     },
     "long": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/long/-/long-4.0.0.tgz",
       "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
     },
     "loose-envify": {
@@ -9493,6 +9629,14 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -11589,7 +11733,7 @@
     },
     "protobufjs": {
       "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/protobufjs/-/protobufjs-6.10.2.tgz",
       "integrity": "sha512-27yj+04uF6ya9l+qfpH187aqEzfCF4+Uit0I9ZBQVqK09hk/SQzKa2MUqUpXaVa7LOFRg1TSSr3lVxGOk6c0SQ==",
       "requires": {
         "@protobufjs/aspromise": "^1.1.2",
@@ -12088,6 +12232,23 @@
         "warning": "^4.0.3"
       }
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
     "react-scripts": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.4.tgz",
@@ -12413,6 +12574,31 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-vis": {
+      "version": "1.11.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/react-vis/-/react-vis-1.11.7.tgz",
+      "integrity": "sha512-vJqS12l/6RHeSq8DVl4PzX0j8iPgbT8H8PtgTRsimKsBNcPjPseO4RICw1FUPrwj8MPrrna34LBtzyC4ATd5Ow==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "^1.0.3",
+        "d3-color": "^1.0.3",
+        "d3-contour": "^1.1.0",
+        "d3-format": "^1.2.0",
+        "d3-geo": "^1.6.4",
+        "d3-hexbin": "^0.2.2",
+        "d3-hierarchy": "^1.1.4",
+        "d3-interpolate": "^1.1.4",
+        "d3-sankey": "^0.7.1",
+        "d3-scale": "^1.0.5",
+        "d3-shape": "^1.1.0",
+        "d3-voronoi": "^1.1.2",
+        "deep-equal": "^1.0.1",
+        "global": "^4.3.1",
+        "hoek": "4.2.1",
+        "prop-types": "^15.5.8",
+        "react-motion": "^0.5.2"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -13287,7 +13473,7 @@
     },
     "slice-ansi": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/slice-ansi/-/slice-ansi-2.1.0.tgz",
       "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
       "requires": {
         "ansi-styles": "^3.2.0",
@@ -13297,7 +13483,7 @@
       "dependencies": {
         "ansi-styles": {
           "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "requires": {
             "color-convert": "^1.9.0"
@@ -13846,7 +14032,7 @@
     },
     "strip-json-comments": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
     "style-loader": {
@@ -13982,7 +14168,7 @@
     },
     "table": {
       "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/table/-/table-5.4.6.tgz",
       "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
       "requires": {
         "ajv": "^6.10.2",
@@ -13993,7 +14179,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "is-fullwidth-code-point": {
@@ -14003,7 +14189,7 @@
         },
         "string-width": {
           "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/string-width/-/string-width-3.1.0.tgz",
           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -14013,7 +14199,7 @@
         },
         "strip-ansi": {
           "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -14464,7 +14650,7 @@
     },
     "typescript": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/typescript/-/typescript-4.0.3.tgz",
       "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg=="
     },
     "unicode-canonical-property-names-ecmascript": {
@@ -15532,7 +15718,7 @@
     },
     "write": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/write/-/write-1.0.3.tgz",
       "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
       "requires": {
         "mkdirp": "^0.5.1"
diff --git a/client/package.json b/client/package.json
index 549aecd..f51934b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,6 +13,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-modal": "1.6.8",
     "@types/react-select": "3.0.22",
+    "@types/react-vis": "^1.11.6",
     "ansi-to-react": "^5.1.1",
     "humanize-duration": "^3.24.0",
     "js-base64": "^2.6.4",
@@ -27,6 +28,7 @@
     "react-select": "^3.1.0",
     "react-swipeable": "^5.5.1",
     "react-switch": "^5.0.1",
+    "react-vis": "^1.11.7",
     "swagger-parser": "^7.0.1",
     "typescript": "4.0.3",
     "xterm": "^3.14.5",
diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index 86bcf7f..6cfed92 100755
--- a/client/src/scss/index.scss
+++ b/client/src/scss/index.scss
@@ -12,6 +12,8 @@
 @import './elements/textarea.scss';
 @import './elements/textbox.scss';
 
+@import "~react-vis/dist/style";
+
 html, body, div, input, select {
 	box-sizing: border-box;
 }
@@ -112,6 +114,11 @@ button.titleBar_hamburger {
 	text-align: center;
 }
 
+.rv-xy-plot__inner {
+	width: 300px;
+	height: 300px;
+}
+
 @media only screen and (max-width: $media-medium) {
 	.optional_medium {
 		display: none;
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index e3640a4..cea3333 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Base from '../components/base';
+import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
 
 
 const {hostname} = window.location;
@@ -16,14 +17,17 @@ type Props = {
 
 type State = {
     metric: string;
-    result: any;
-    values: Array<Array<string>>;
+    data: Map<string, Array<Array<any>>>;
 }
 
 export default class PrometheusGraph extends Base<Props, State> {
     componentDidMount() {
         // TODO: use proxy if ready
         const url = `${BASE_HTTP_URL}/api/v1/query_range`;
+        this.setState((prevState => ({
+            ...prevState,
+            data: new Map()
+        })));
         for (let i = 0; i < GRAPH_QUERIES.length; i++) {
             const query = GRAPH_QUERIES[i];
             const params = {
@@ -35,19 +39,38 @@ export default class PrometheusGraph extends Base<Props, State> {
             fetch(`${url}?${new URLSearchParams(params).toString()}`)
                 .then((result) => result.json())
                 .then((json) => {
-                    // @ts-ignore
-                    this.setState(prevState => ({
-                        ...prevState,
-                        result: json,
+                    const json_data = json.data
+                    const graph_data : Array<Array<any>> = json_data.result[0].values.map((value: any) => {
+                        return {x: value[0], y: +value[1]}
+                    })
+                    this.state.data.set(query, graph_data);
+                    this.setState((prevState) => ({
+                        ...prevState
                     }));
-                    console.log(this.state?.result);
                 });
         }
     }
 
     render() {
         return <div>
-            <div>{this.state?.result && (this.state?.result.data.toString())}</div>
+            {this.state?.data && GRAPH_QUERIES.map((value, i) => {
+                if (!this.state.data.get(value)) {
+                    return <div>Pending...</div>
+                }
+                return this.state.data.get(value) &&
+                    <div>
+                        <XYPlot
+                            width={300}
+                            height={300}>
+                            <HorizontalGridLines />
+                            <LineSeries
+                                data={this.state.data.get(value)}/>
+                            <XAxis />
+                            <YAxis />
+                        </XYPlot>
+                    </div>
+            })}
+
         </div>;
     }
 }

From 03d186a28e79ca0dfcf00ec4a4a61a142775b3fd Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Thu, 25 Feb 2021 18:43:55 -0500
Subject: [PATCH 04/21] fix time

---
 client/src/scss/index.scss           |  4 ++--
 client/src/views/prometheusgraph.tsx | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index 6cfed92..1028f83 100755
--- a/client/src/scss/index.scss
+++ b/client/src/scss/index.scss
@@ -115,8 +115,8 @@ button.titleBar_hamburger {
 }
 
 .rv-xy-plot__inner {
-	width: 300px;
-	height: 300px;
+	width: 800px;
+	height: 800px;
 }
 
 @media only screen and (max-width: $media-medium) {
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index cea3333..e7b8c7a 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -5,7 +5,7 @@ import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
 
 const {hostname} = window.location;
 const isDev = process.env.NODE_ENV !== 'production';
-const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:50642' : '';
+const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:62577' : '';
 const GRAPH_QUERIES = [
     'instance:node_cpu:ratio',
 ];
@@ -32,8 +32,8 @@ export default class PrometheusGraph extends Base<Props, State> {
             const query = GRAPH_QUERIES[i];
             const params = {
                 query,
-                start: (Date.now() / 1000).toString(),
-                end: (Date.now() / 1000 + 60 * 60).toString(), // One hour range
+                start: (Date.now() / 1000 - 60 * 60).toString(),
+                end: (Date.now() / 1000 ).toString(), // One hour range
                 step: '1',
             };
             fetch(`${url}?${new URLSearchParams(params).toString()}`)
@@ -60,13 +60,13 @@ export default class PrometheusGraph extends Base<Props, State> {
                 return this.state.data.get(value) &&
                     <div>
                         <XYPlot
-                            width={300}
-                            height={300}>
+                            width={600}
+                            height={600}>
                             <HorizontalGridLines />
                             <LineSeries
                                 data={this.state.data.get(value)}/>
                             <XAxis />
-                            <YAxis />
+                            <YAxis/>
                         </XYPlot>
                     </div>
             })}

From 00d13647993d1924fa574a1b920776d9a5c09e9c Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 00:15:52 -0500
Subject: [PATCH 05/21] refine label

---
 client/src/views/prometheusgraph.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index e7b8c7a..36abb22 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -5,7 +5,7 @@ import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
 
 const {hostname} = window.location;
 const isDev = process.env.NODE_ENV !== 'production';
-const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:62577' : '';
+const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:57008' : '';
 const GRAPH_QUERIES = [
     'instance:node_cpu:ratio',
 ];
@@ -57,16 +57,28 @@ export default class PrometheusGraph extends Base<Props, State> {
                 if (!this.state.data.get(value)) {
                     return <div>Pending...</div>
                 }
+                console.log(this.state.data)
                 return this.state.data.get(value) &&
                     <div>
                         <XYPlot
                             width={600}
-                            height={600}>
+                            height={600}
+                            xType="time">
                             <HorizontalGridLines />
                             <LineSeries
                                 data={this.state.data.get(value)}/>
-                            <XAxis />
-                            <YAxis/>
+                            <XAxis
+                                tickFormat={function tickFormat(d){
+                                    const date = new Date(d*1000)
+                                    return date.toLocaleTimeString()
+                                }}
+                                tickLabelAngle={30}
+                            />
+                            <YAxis
+                                tickFormat={function tickFormet(d){
+                                    return Math.round(d*100) + "%"
+                                }}
+                            />
                         </XYPlot>
                     </div>
             })}

From c4e9ca7399f8fabfe1f5f66ab1896f9c9cf61aed Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 10:40:35 -0500
Subject: [PATCH 06/21] fix lint

---
 client/src/views/prometheusgraph.tsx | 41 +++++++++++++---------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 36abb22..49cbb9d 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Base from '../components/base';
 import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
+import Base from '../components/base';
 
 
 const {hostname} = window.location;
@@ -26,26 +26,24 @@ export default class PrometheusGraph extends Base<Props, State> {
         const url = `${BASE_HTTP_URL}/api/v1/query_range`;
         this.setState((prevState => ({
             ...prevState,
-            data: new Map()
+            data: new Map(),
         })));
         for (let i = 0; i < GRAPH_QUERIES.length; i++) {
             const query = GRAPH_QUERIES[i];
             const params = {
                 query,
                 start: (Date.now() / 1000 - 60 * 60).toString(),
-                end: (Date.now() / 1000 ).toString(), // One hour range
+                end: (Date.now() / 1000).toString(), // One hour range
                 step: '1',
             };
             fetch(`${url}?${new URLSearchParams(params).toString()}`)
-                .then((result) => result.json())
+                .then(result => result.json())
                 .then((json) => {
-                    const json_data = json.data
-                    const graph_data : Array<Array<any>> = json_data.result[0].values.map((value: any) => {
-                        return {x: value[0], y: +value[1]}
-                    })
-                    this.state.data.set(query, graph_data);
-                    this.setState((prevState) => ({
-                        ...prevState
+                    const jsonData = json.data;
+                    const graphData : Array<Array<any>> = jsonData.result[0].values.map((value: any) => ({x: value[0], y: +value[1]}));
+                    this.state.data.set(query, graphData);
+                    this.setState(prevState => ({
+                        ...prevState,
                     }));
                 });
         }
@@ -53,13 +51,12 @@ export default class PrometheusGraph extends Base<Props, State> {
 
     render() {
         return <div>
-            {this.state?.data && GRAPH_QUERIES.map((value, i) => {
+            {this.state?.data && GRAPH_QUERIES.map((value) => {
                 if (!this.state.data.get(value)) {
-                    return <div>Pending...</div>
+                    return <div>Pending...</div>;
                 }
-                console.log(this.state.data)
-                return this.state.data.get(value) &&
-                    <div>
+                return this.state.data.get(value)
+                    && <div>
                         <XYPlot
                             width={600}
                             height={600}
@@ -68,19 +65,19 @@ export default class PrometheusGraph extends Base<Props, State> {
                             <LineSeries
                                 data={this.state.data.get(value)}/>
                             <XAxis
-                                tickFormat={function tickFormat(d){
-                                    const date = new Date(d*1000)
-                                    return date.toLocaleTimeString()
+                                tickFormat={function tickFormat(d) {
+                                    const date = new Date(d * 1000);
+                                    return date.toLocaleTimeString();
                                 }}
                                 tickLabelAngle={30}
                             />
                             <YAxis
-                                tickFormat={function tickFormet(d){
-                                    return Math.round(d*100) + "%"
+                                tickFormat={function tickFormet(d) {
+                                    return `${Math.round(d * 100)}%`;
                                 }}
                             />
                         </XYPlot>
-                    </div>
+                    </div>;
             })}
 
         </div>;

From 24cdeceda4a5deceb67a03a21882a8e9a92b6aab Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 11:18:53 -0500
Subject: [PATCH 07/21] add padding, percentage, and memory chart

---
 client/src/views/prometheusgraph.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 49cbb9d..4dce78f 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -8,6 +8,7 @@ const isDev = process.env.NODE_ENV !== 'production';
 const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:57008' : '';
 const GRAPH_QUERIES = [
     'instance:node_cpu:ratio',
+    'instance:node_memory_utilisation:ratio',
 ];
 
 
@@ -56,14 +57,23 @@ export default class PrometheusGraph extends Base<Props, State> {
                     return <div>Pending...</div>;
                 }
                 return this.state.data.get(value)
-                    && <div>
+                    && <div style={{marginLeft: '36px'}}>
+                        <span>${value}</span>
                         <XYPlot
+                            yPadding={60}
                             width={600}
                             height={600}
                             xType="time">
                             <HorizontalGridLines />
                             <LineSeries
-                                data={this.state.data.get(value)}/>
+                                data={this.state.data.get(value)}
+                                onNearestXY={(datapoint) => {
+                                    return <div style={{background: 'black'}}>
+                                        {datapoint.x} <br/>
+                                        {datapoint.y}
+                                    </div>;
+                                }}
+                            />
                             <XAxis
                                 tickFormat={function tickFormat(d) {
                                     const date = new Date(d * 1000);
@@ -73,8 +83,10 @@ export default class PrometheusGraph extends Base<Props, State> {
                             />
                             <YAxis
                                 tickFormat={function tickFormet(d) {
-                                    return `${Math.round(d * 100)}%`;
+                                    return `${(d * 100).toFixed(2)}%`;
                                 }}
+                                tickLabelAngle={30}
+                                marginLeft={50}
                             />
                         </XYPlot>
                     </div>;

From 8d22b702d9a6730c1c9c22653ab9bb8c7b847ce5 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 11:22:11 -0500
Subject: [PATCH 08/21] fix lint

---
 client/src/views/prometheusgraph.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 4dce78f..0bd3d61 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -67,12 +67,12 @@ export default class PrometheusGraph extends Base<Props, State> {
                             <HorizontalGridLines />
                             <LineSeries
                                 data={this.state.data.get(value)}
-                                onNearestXY={(datapoint) => {
-                                    return <div style={{background: 'black'}}>
+                                onNearestXY={datapoint => (
+                                    <div style={{background: 'black'}}>
                                         {datapoint.x} <br/>
                                         {datapoint.y}
-                                    </div>;
-                                }}
+                                    </div>
+                                )}
                             />
                             <XAxis
                                 tickFormat={function tickFormat(d) {

From a3b80585734b24b75d117e565c6bf7b77a946e77 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 11:28:41 -0500
Subject: [PATCH 09/21] Adjust the padding of tick

---
 client/src/views/prometheusgraph.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 0bd3d61..b3f42bf 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -57,7 +57,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                     return <div>Pending...</div>;
                 }
                 return this.state.data.get(value)
-                    && <div style={{marginLeft: '36px'}}>
+                    && <div>
                         <span>${value}</span>
                         <XYPlot
                             yPadding={60}
@@ -86,7 +86,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                                     return `${(d * 100).toFixed(2)}%`;
                                 }}
                                 tickLabelAngle={30}
-                                marginLeft={50}
+                                tickPadding={-5}
                             />
                         </XYPlot>
                     </div>;

From 0fd23c169d4c8d6dc31b8c6b3ee0eb57663e464e Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Feb 2021 15:06:28 -0500
Subject: [PATCH 10/21] merge server and switch to use proxy

---
 client/src/views/prometheusgraph.tsx | 20 ++++++++------------
 server/index.js                      | 15 ++++++++++++++-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index b3f42bf..35c3a3e 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -3,9 +3,7 @@ import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
 import Base from '../components/base';
 
 
-const {hostname} = window.location;
-const isDev = process.env.NODE_ENV !== 'production';
-const BASE_HTTP_URL = isDev && hostname === 'localhost' ? 'http://localhost:57008' : '';
+const BASE_HTTP_URL = 'http://localhost:4654/prom';
 const GRAPH_QUERIES = [
     'instance:node_cpu:ratio',
     'instance:node_memory_utilisation:ratio',
@@ -41,7 +39,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                 .then(result => result.json())
                 .then((json) => {
                     const jsonData = json.data;
-                    const graphData : Array<Array<any>> = jsonData.result[0].values.map((value: any) => ({x: value[0], y: +value[1]}));
+                    const graphData : Array<Array<any>> = jsonData.result[0]?.values.map((value: any) => ({x: value[0], y: +value[1]}));
                     this.state.data.set(query, graphData);
                     this.setState(prevState => ({
                         ...prevState,
@@ -54,11 +52,14 @@ export default class PrometheusGraph extends Base<Props, State> {
         return <div>
             {this.state?.data && GRAPH_QUERIES.map((value) => {
                 if (!this.state.data.get(value)) {
-                    return <div>Pending...</div>;
+                    return <div>
+                        <span style={{fontWeight: 'bold'}}>${value}</span>
+                        <div>Pending...</div>
+                    </div>;
                 }
                 return this.state.data.get(value)
                     && <div>
-                        <span>${value}</span>
+                        <div style={{fontWeight: 'bold'}}>${value}</div>
                         <XYPlot
                             yPadding={60}
                             width={600}
@@ -67,12 +68,6 @@ export default class PrometheusGraph extends Base<Props, State> {
                             <HorizontalGridLines />
                             <LineSeries
                                 data={this.state.data.get(value)}
-                                onNearestXY={datapoint => (
-                                    <div style={{background: 'black'}}>
-                                        {datapoint.x} <br/>
-                                        {datapoint.y}
-                                    </div>
-                                )}
                             />
                             <XAxis
                                 tickFormat={function tickFormat(d) {
@@ -80,6 +75,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                                     return date.toLocaleTimeString();
                                 }}
                                 tickLabelAngle={30}
+                                tickTotal={5}
                             />
                             <YAxis
                                 tickFormat={function tickFormet(d) {
diff --git a/server/index.js b/server/index.js
index a7c6734..8af9602 100644
--- a/server/index.js
+++ b/server/index.js
@@ -15,6 +15,7 @@ const OIDC_URL = process.env.OIDC_URL;
 const OIDC_SCOPES = process.env.OIDC_SCOPES || 'openid email';
 const OIDC_METADATA = JSON.parse(process.env.OIDC_METADATA || '{}');
 const clientMetadata = Object.assign({client_id: OIDC_CLIENT_ID, client_secret: OIDC_SECRET}, OIDC_METADATA);
+const PROM_URL = process.env.PROM_URL || 'http://127.0.0.1:9090';
 
 console.log('OIDC_URL: ', OIDC_URL || 'None');
 
@@ -38,6 +39,17 @@ const proxySettings = {
     logLevel: 'debug',
     onError,
 };
+const proxySettingsProm = {
+    target: PROM_URL,
+    ws: false,
+    secure: false,
+    changeOrigin: true,
+    logLevel: 'debug',
+    onError,
+    pathRewrite: {
+        '/prom': '/'
+    }
+};
 
 if (DEBUG_VERBOSE) {
     proxySettings.onProxyRes = onProxyRes;
@@ -50,6 +62,7 @@ if (NODE_ENV !== 'production') app.use(cors());
 app.use('/', preAuth, express.static('public'));
 app.get('/oidc', getOidc);
 app.post('/oidc', postOidc);
+app.use('/prom', createProxyMiddleware(proxySettingsProm));
 app.use('/*', createProxyMiddleware(proxySettings));
 app.use(handleErrors);
 
@@ -160,4 +173,4 @@ async function logClusterInfo() {
     } catch (err) {
         console.error('Error getting cluster info', err);
     }
-}
+}
\ No newline at end of file

From bedff931c0db7b27561c19ab79c6ea0a3e8b0158 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Tue, 9 Mar 2021 11:20:28 -0500
Subject: [PATCH 11/21] frontend_prometheus refine title

---
 client/src/views/prometheusgraph.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 35c3a3e..57e89aa 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -5,8 +5,8 @@ import Base from '../components/base';
 
 const BASE_HTTP_URL = 'http://localhost:4654/prom';
 const GRAPH_QUERIES = [
-    'instance:node_cpu:ratio',
-    'instance:node_memory_utilisation:ratio',
+    ['instance:node_cpu:ratio', 'Node CPU Usage'],
+    ['instance:node_memory_utilisation:ratio', 'Node Memory Usage'],
 ];
 
 
@@ -28,7 +28,7 @@ export default class PrometheusGraph extends Base<Props, State> {
             data: new Map(),
         })));
         for (let i = 0; i < GRAPH_QUERIES.length; i++) {
-            const query = GRAPH_QUERIES[i];
+            const query = GRAPH_QUERIES[i][0];
             const params = {
                 query,
                 start: (Date.now() / 1000 - 60 * 60).toString(),
@@ -51,15 +51,17 @@ export default class PrometheusGraph extends Base<Props, State> {
     render() {
         return <div>
             {this.state?.data && GRAPH_QUERIES.map((value) => {
-                if (!this.state.data.get(value)) {
+                const query = value[0];
+                const title = value[1];
+                if (!this.state.data.get(query)) {
                     return <div>
-                        <span style={{fontWeight: 'bold'}}>${value}</span>
+                        <span style={{fontWeight: 'bold'}}>{title}</span>
                         <div>Pending...</div>
                     </div>;
                 }
-                return this.state.data.get(value)
+                return this.state.data.get(query)
                     && <div>
-                        <div style={{fontWeight: 'bold'}}>${value}</div>
+                        <div style={{fontWeight: 'bold'}}>{title}</div>
                         <XYPlot
                             yPadding={60}
                             width={600}
@@ -67,7 +69,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                             xType="time">
                             <HorizontalGridLines />
                             <LineSeries
-                                data={this.state.data.get(value)}
+                                data={this.state.data.get(query)}
                             />
                             <XAxis
                                 tickFormat={function tickFormat(d) {

From 2f2fa0fa2f0e7f2ea17ef25102532f795ec0739b Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Tue, 9 Mar 2021 11:24:42 -0500
Subject: [PATCH 12/21] frontend_prometheus how about purple line?

---
 client/src/views/prometheusgraph.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 57e89aa..a7ee3cd 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -70,6 +70,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                             <HorizontalGridLines />
                             <LineSeries
                                 data={this.state.data.get(query)}
+                                color={'#6822aa'}
                             />
                             <XAxis
                                 tickFormat={function tickFormat(d) {

From dfa00caf92e42cd69849074ea3006384bd5378fe Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 19 Mar 2021 13:03:52 -0400
Subject: [PATCH 13/21] Added a fancy crosshair and did some refactoring

---
 client/src/components/menu.tsx        |   2 +-
 client/src/router.tsx                 |   4 +-
 client/src/views/prometheusgraph.tsx  | 157 ++++++++++++++------------
 client/src/views/prometheusgraphs.tsx |  41 +++++++
 4 files changed, 130 insertions(+), 74 deletions(-)
 create mode 100644 client/src/views/prometheusgraphs.tsx

diff --git a/client/src/components/menu.tsx b/client/src/components/menu.tsx
index c69576a..698e694 100644
--- a/client/src/components/menu.tsx
+++ b/client/src/components/menu.tsx
@@ -64,7 +64,7 @@ export default class Menu extends Base<MenuProps, MenuStates> {
                         )}
 
                         {canView(rules, api.namespace) && (
-                            <MenuItem title='PrometheusGraph' path='prometheusgraph' resource='Node' onClick={onClick} />
+                            <MenuItem title='PrometheusGraphs' path='prometheusgraphs' resource='Node' onClick={onClick} />
                         )}
                     </Group>
 
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 4905448..6192ba2 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -26,7 +26,7 @@ import PersistentVolumeClaims from './views/persistentVolumeClaims';
 import PersistentVolumes from './views/persistentVolumes';
 import Pod from './views/pod';
 import Pods from './views/pods';
-import PrometheusGraph from './views/prometheusgraph';
+import PrometheusGraphs from './views/prometheusgraphs';
 import ReplicaSet from './views/replicaSet';
 import ReplicaSets from './views/replicaSets';
 import Role from './views/role';
@@ -110,7 +110,7 @@ registerRoute('storageclass', () => <StorageClasses />);
 registerRoute('storageclass/:name', params => <StorageClass {...params} />);
 registerRoute('workload', () => <Workloads />);
 
-registerRoute('prometheusgraph', () => <PrometheusGraph />);
+registerRoute('prometheusgraphs', () => <PrometheusGraphs />);
 // @ts-ignore
 registerRoute('workload/cronjob/:namespace/:name', params => <CronJob {...params} />);
 // @ts-ignore
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index a7ee3cd..a298e9a 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -1,96 +1,111 @@
 import React from 'react';
-import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
+import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries, Crosshair} from 'react-vis';
 import Base from '../components/base';
 
 
 const BASE_HTTP_URL = 'http://localhost:4654/prom';
-const GRAPH_QUERIES = [
-    ['instance:node_cpu:ratio', 'Node CPU Usage'],
-    ['instance:node_memory_utilisation:ratio', 'Node Memory Usage'],
-];
 
 
 type Props = {
-
+    queryString: string;
+    title: string;
 }
 
 type State = {
     metric: string;
-    data: Map<string, Array<Array<any>>>;
+    data: Array<any>;
+    crosshairValues: any[];
 }
 
 export default class PrometheusGraph extends Base<Props, State> {
+    /**
+     * Event handler for onMouseLeave.
+     * @private
+     */
+    onMouseLeave = () => {
+        this.setState({crosshairValues: []});
+    };
+
+    /**
+     * Event handler for onNearestX.
+     * @param {Object} value Selected value.
+     * @param {index} index Index of the value in the data array.
+     * @private
+     */
+    onNearestX = (value: any, {index} : any) => {
+        this.setState((prevState => ({
+            ...prevState,
+            crosshairValues: [value],
+        })));
+    };
+
     componentDidMount() {
-        // TODO: use proxy if ready
         const url = `${BASE_HTTP_URL}/api/v1/query_range`;
         this.setState((prevState => ({
             ...prevState,
-            data: new Map(),
+            data: new Array<any>(),
+            crosshairValues: [],
         })));
-        for (let i = 0; i < GRAPH_QUERIES.length; i++) {
-            const query = GRAPH_QUERIES[i][0];
-            const params = {
-                query,
-                start: (Date.now() / 1000 - 60 * 60).toString(),
-                end: (Date.now() / 1000).toString(), // One hour range
-                step: '1',
-            };
-            fetch(`${url}?${new URLSearchParams(params).toString()}`)
-                .then(result => result.json())
-                .then((json) => {
-                    const jsonData = json.data;
-                    const graphData : Array<Array<any>> = jsonData.result[0]?.values.map((value: any) => ({x: value[0], y: +value[1]}));
-                    this.state.data.set(query, graphData);
-                    this.setState(prevState => ({
-                        ...prevState,
-                    }));
-                });
-        }
+        const params = {
+            query: this.props.queryString,
+            start: (Date.now() / 1000 - 60 * 60).toString(),
+            end: (Date.now() / 1000).toString(), // One hour range
+            step: '1',
+        };
+        fetch(`${url}?${new URLSearchParams(params).toString()}`)
+            .then(result => result.json())
+            .then((json) => {
+                const jsonData = json.data;
+                const graphData : Array<any> = jsonData.result[0]?.values.map((value: any) => ({x: value[0], y: +value[1]}));
+                this.setState(prevState => ({
+                    ...prevState,
+                    data: graphData,
+                }));
+            });
     }
 
     render() {
-        return <div>
-            {this.state?.data && GRAPH_QUERIES.map((value) => {
-                const query = value[0];
-                const title = value[1];
-                if (!this.state.data.get(query)) {
-                    return <div>
-                        <span style={{fontWeight: 'bold'}}>{title}</span>
-                        <div>Pending...</div>
-                    </div>;
-                }
-                return this.state.data.get(query)
-                    && <div>
-                        <div style={{fontWeight: 'bold'}}>{title}</div>
-                        <XYPlot
-                            yPadding={60}
-                            width={600}
-                            height={600}
-                            xType="time">
-                            <HorizontalGridLines />
-                            <LineSeries
-                                data={this.state.data.get(query)}
-                                color={'#6822aa'}
-                            />
-                            <XAxis
-                                tickFormat={function tickFormat(d) {
-                                    const date = new Date(d * 1000);
-                                    return date.toLocaleTimeString();
-                                }}
-                                tickLabelAngle={30}
-                                tickTotal={5}
-                            />
-                            <YAxis
-                                tickFormat={function tickFormet(d) {
-                                    return `${(d * 100).toFixed(2)}%`;
-                                }}
-                                tickLabelAngle={30}
-                                tickPadding={-5}
-                            />
-                        </XYPlot>
-                    </div>;
-            })}
-
-        </div>;
+        if (!this.state || !this.state.data) {
+            return <div>
+                <span style={{fontWeight: 'bold'}}>{this.props.title}</span>
+                <div>Pending...</div>
+            </div>;
+        }
+        return this.state.data
+            && <div>
+                <div style={{fontWeight: 'bold'}}>{this.props.title}</div>
+                <XYPlot
+                    yPadding={60}
+                    width={600}
+                    height={600}
+                    xType="time"
+                    onMouseLeave={this.onMouseLeave}>
+                    <HorizontalGridLines />
+                    <LineSeries
+                        data={this.state.data}
+                        color={'#6822aa'}
+                        onNearestX={this.onNearestX}
+                    />
+                    <Crosshair
+                        values={this.state.crosshairValues}
+                        className={'test-class-name'}
+                    />
+                    <XAxis
+                        tickFormat={function tickFormat(d) {
+                            const date = new Date(d * 1000);
+                            return date.toLocaleTimeString();
+                        }}
+                        tickLabelAngle={30}
+                        tickTotal={5}
+                    />
+                    <YAxis
+                        tickFormat={function tickFormet(d) {
+                            return `${(d * 100).toFixed(2)}%`;
+                        }}
+                        tickLabelAngle={30}
+                        tickPadding={-5}
+                    />
+                </XYPlot>
+            </div>;
     }
 }
diff --git a/client/src/views/prometheusgraphs.tsx b/client/src/views/prometheusgraphs.tsx
new file mode 100644
index 0000000..396d59e
--- /dev/null
+++ b/client/src/views/prometheusgraphs.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PrometheusGraph from './prometheusgraph';
+import Base from '../components/base';
+
+
+type Props = {
+
+}
+
+type State = {
+    metric: string;
+    data: Map<string, Array<Array<any>>>;
+    crosshairValues: [];
+}
+
+export default class PrometheusGraphs extends Base<Props, State> {
+    // GRAPH_QUERIES = [
+    //     ['instance:node_cpu:ratio', 'Node CPU Usage'],
+    //     ['instance:node_memory_utilisation:ratio', 'Node Memory Usage'],
+    // ];
+    GRAPH_QUERIES = [
+        {
+            queryString: 'instance:node_cpu:ratio',
+            title: 'Node CPU Usage',
+        },
+        {
+            queryString: 'instance:node_memory_utilisation:ratio',
+            title: 'Node Memory Usage',
+        },
+    ]
+
+    render() {
+        return <div>
+            {/* eslint-disable-next-line react/jsx-key */}
+            {this.GRAPH_QUERIES.map(query => <PrometheusGraph
+                queryString={query.queryString}
+                title={query.title}
+            />)}
+        </div>;
+    }
+}

From 40848edc3c33359a1f53d8bde67dd1aca919aca0 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Mar 2021 12:30:41 -0400
Subject: [PATCH 14/21] add AreaSeries so the area is filled

---
 client/src/views/prometheusgraph.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index a298e9a..ef4f747 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries, Crosshair} from 'react-vis';
+import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries, Crosshair, GradientDefs, AreaSeries} from 'react-vis';
 import Base from '../components/base';
 
 
@@ -80,6 +80,18 @@ export default class PrometheusGraph extends Base<Props, State> {
                     height={600}
                     xType="time"
                     onMouseLeave={this.onMouseLeave}>
+                    <GradientDefs>
+                        <linearGradient id="CoolGradient" x1="0" x2="1" y1="0" y2="1">
+                            <stop offset="0%" stopColor="#6822aa" stopOpacity={0.5} />
+                            <stop offset="100%" stopColor="blue" stopOpacity={0.5} />
+                        </linearGradient>
+                    </GradientDefs>
+                    <AreaSeries
+                        color={'url(#CoolGradient)'}
+                        // color={'#6822aa'} this is another option
+                        opacity={0.5}
+                        data={this.state.data}
+                    />
                     <HorizontalGridLines />
                     <LineSeries
                         data={this.state.data}

From 8ff770fa8dd0245d8b09f832c8eb943b3bb960ea Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 26 Mar 2021 12:35:30 -0400
Subject: [PATCH 15/21] switch color

---
 client/src/views/prometheusgraph.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index ef4f747..32f0333 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -87,8 +87,8 @@ export default class PrometheusGraph extends Base<Props, State> {
                         </linearGradient>
                     </GradientDefs>
                     <AreaSeries
-                        color={'url(#CoolGradient)'}
-                        // color={'#6822aa'} this is another option
+                        // color={'url(#CoolGradient)'} this is another option
+                        color={'#6822aa'}
                         opacity={0.5}
                         data={this.state.data}
                     />

From 9226437dda9cea61f79c25137373b00729bf7845 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Tue, 30 Mar 2021 13:20:56 -0400
Subject: [PATCH 16/21] update color

---
 client/src/views/prometheusgraph.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 32f0333..f3df401 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries, Crosshair, GradientDefs, AreaSeries} from 'react-vis';
+import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries, Crosshair, AreaSeries} from 'react-vis';
 import Base from '../components/base';
 
 
@@ -80,16 +80,9 @@ export default class PrometheusGraph extends Base<Props, State> {
                     height={600}
                     xType="time"
                     onMouseLeave={this.onMouseLeave}>
-                    <GradientDefs>
-                        <linearGradient id="CoolGradient" x1="0" x2="1" y1="0" y2="1">
-                            <stop offset="0%" stopColor="#6822aa" stopOpacity={0.5} />
-                            <stop offset="100%" stopColor="blue" stopOpacity={0.5} />
-                        </linearGradient>
-                    </GradientDefs>
                     <AreaSeries
-                        // color={'url(#CoolGradient)'} this is another option
                         color={'#6822aa'}
-                        opacity={0.5}
+                        opacity={0.6}
                         data={this.state.data}
                     />
                     <HorizontalGridLines />

From 866ee99ebb313a0725ac1cfe2090460899a8c7d1 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Mon, 5 Apr 2021 11:53:02 -0400
Subject: [PATCH 17/21] exchange chart in nodes with linechart, remove title,
 fix crosshair, make it smaller to fit

---
 client/src/components/nodeCpuChart.tsx | 11 ++++++++++-
 client/src/components/nodeRamChart.tsx | 22 ++++++++++++++++------
 client/src/views/prometheusgraph.tsx   | 22 ++++++++++++++--------
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/client/src/components/nodeCpuChart.tsx b/client/src/components/nodeCpuChart.tsx
index f103961..78d7adc 100644
--- a/client/src/components/nodeCpuChart.tsx
+++ b/client/src/components/nodeCpuChart.tsx
@@ -4,14 +4,23 @@ import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {parseCpu, TO_ONE_CPU} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeCpuChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeCpuTotals(items, metrics);
+    const query = {
+        queryString: 'instance:node_cpu:ratio',
+        title: 'Node CPU Usage',
+    };
 
     return (
         <div className='charts_item'>
             {totals ? (
-                <Chart used={totals.used} available={totals.available} />
+                // <Chart used={totals.used} available={totals.available} />
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                />
             ) : (
                 <LoadingChart />
             )}
diff --git a/client/src/components/nodeRamChart.tsx b/client/src/components/nodeRamChart.tsx
index 4896da3..6722762 100644
--- a/client/src/components/nodeRamChart.tsx
+++ b/client/src/components/nodeRamChart.tsx
@@ -4,6 +4,7 @@ import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {parseRam, parseUnitsOfRam} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeRamTotals(items, metrics);
@@ -11,16 +12,25 @@ export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?
     const used = parseUnitsOfRam(totals && totals.used, available && available.unit);
     const decimals = used && used.value > 10 ? 1 : 2;
 
+    const query = {
+        queryString: 'instance:node_memory_utilisation:ratio',
+        title: 'Node Memory Usage',
+    };
+
     return (
         <div className='charts_item'>
             {totals ? (
-                <Chart
-                    decimals={decimals}
-                    used={used && used.value}
-                    usedSuffix={used && used.unit}
-                    available={available && available.value}
-                    availableSuffix={available && available.unit}
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
                 />
+                // <Chart
+                //     decimals={decimals}
+                //     used={used && used.value}
+                //     usedSuffix={used && used.unit}
+                //     available={available && available.value}
+                //     availableSuffix={available && available.unit}
+                // />
             ) : (
                 <LoadingChart />
             )}
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index f3df401..483f993 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -67,17 +67,17 @@ export default class PrometheusGraph extends Base<Props, State> {
     render() {
         if (!this.state || !this.state.data) {
             return <div>
-                <span style={{fontWeight: 'bold'}}>{this.props.title}</span>
+                {/* <span style={{fontWeight: 'bold'}}>{this.props.title}</span> */}
                 <div>Pending...</div>
             </div>;
         }
         return this.state.data
             && <div>
-                <div style={{fontWeight: 'bold'}}>{this.props.title}</div>
+                {/* <div style={{fontWeight: 'bold'}}>{this.props.title}</div> */}
                 <XYPlot
                     yPadding={60}
-                    width={600}
-                    height={600}
+                    width={150}
+                    height={150}
                     xType="time"
                     onMouseLeave={this.onMouseLeave}>
                     <AreaSeries
@@ -93,21 +93,27 @@ export default class PrometheusGraph extends Base<Props, State> {
                     />
                     <Crosshair
                         values={this.state.crosshairValues}
+                        itemsFormat={
+                            d => [
+                                {title: 'Time', value: new Date(d[0].x * 1000).toLocaleTimeString()},
+                                {title: 'Percent', value: `${(d[0].y * 100).toFixed(2)}%`},
+                            ]
+                        }
                         className={'test-class-name'}
                     />
                     <XAxis
                         tickFormat={function tickFormat(d) {
                             const date = new Date(d * 1000);
-                            return date.toLocaleTimeString();
+                            return date.toLocaleTimeString().slice(0, -6);
                         }}
-                        tickLabelAngle={30}
-                        tickTotal={5}
+                        tickPadding={5}
+                        tickTotal={3}
                     />
                     <YAxis
                         tickFormat={function tickFormet(d) {
                             return `${(d * 100).toFixed(2)}%`;
                         }}
-                        tickLabelAngle={30}
+                        tickLabelAngle={0}
                         tickPadding={-5}
                     />
                 </XYPlot>

From 49e15adc6eb5b8f7acda58ed2e79cfcc551a4121 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Mon, 5 Apr 2021 12:03:17 -0400
Subject: [PATCH 18/21] drop the gridlines&decimal places in Y

---
 client/src/views/prometheusgraph.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 483f993..0a7035e 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -85,7 +85,6 @@ export default class PrometheusGraph extends Base<Props, State> {
                         opacity={0.6}
                         data={this.state.data}
                     />
-                    <HorizontalGridLines />
                     <LineSeries
                         data={this.state.data}
                         color={'#6822aa'}
@@ -111,7 +110,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                     />
                     <YAxis
                         tickFormat={function tickFormet(d) {
-                            return `${(d * 100).toFixed(2)}%`;
+                            return `${(d * 100).toFixed(0)}%`;
                         }}
                         tickLabelAngle={0}
                         tickPadding={-5}

From 1d14036e3f32b256bf912e4331862ad8a38d09b8 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Mon, 5 Apr 2021 12:28:48 -0400
Subject: [PATCH 19/21] fix crosshair title

---
 client/src/views/prometheusgraph.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 0a7035e..f51b43e 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -92,9 +92,11 @@ export default class PrometheusGraph extends Base<Props, State> {
                     />
                     <Crosshair
                         values={this.state.crosshairValues}
+                        titleFormat={
+                            d => ({title: 'Time', value: new Date(d[0].x * 1000).toLocaleTimeString()})
+                        }
                         itemsFormat={
                             d => [
-                                {title: 'Time', value: new Date(d[0].x * 1000).toLocaleTimeString()},
                                 {title: 'Percent', value: `${(d[0].y * 100).toFixed(2)}%`},
                             ]
                         }

From aa0e8c55a749654b93f3c7bdce1d3abdd39edc3a Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Mon, 5 Apr 2021 12:39:55 -0400
Subject: [PATCH 20/21] fix linter, comment out unused code

---
 client/src/components/nodeCpuChart.tsx |  2 +-
 client/src/components/nodeRamChart.tsx | 11 ++++++-----
 client/src/views/prometheusgraph.tsx   |  2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/src/components/nodeCpuChart.tsx b/client/src/components/nodeCpuChart.tsx
index 78d7adc..4dc3535 100644
--- a/client/src/components/nodeCpuChart.tsx
+++ b/client/src/components/nodeCpuChart.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import Chart from './chart';
+// import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {parseCpu, TO_ONE_CPU} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
diff --git a/client/src/components/nodeRamChart.tsx b/client/src/components/nodeRamChart.tsx
index 6722762..2445500 100644
--- a/client/src/components/nodeRamChart.tsx
+++ b/client/src/components/nodeRamChart.tsx
@@ -1,16 +1,17 @@
 import _ from 'lodash';
 import React from 'react';
-import Chart from './chart';
+// import Chart from './chart';
 import LoadingChart from './loadingChart';
-import {parseRam, parseUnitsOfRam} from '../utils/unitHelpers';
+import {parseRam} from '../utils/unitHelpers';
+// import {parseUnitsOfRam} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
 import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeRamTotals(items, metrics);
-    const available = parseUnitsOfRam(totals && totals.available);
-    const used = parseUnitsOfRam(totals && totals.used, available && available.unit);
-    const decimals = used && used.value > 10 ? 1 : 2;
+    // const available = parseUnitsOfRam(totals && totals.available);
+    // const used = parseUnitsOfRam(totals && totals.used, available && available.unit);
+    // const decimals = used && used.value > 10 ? 1 : 2;
 
     const query = {
         queryString: 'instance:node_memory_utilisation:ratio',
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index f51b43e..ddb9094 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries, Crosshair, AreaSeries} from 'react-vis';
+import {XYPlot, XAxis, YAxis, LineSeries, Crosshair, AreaSeries} from 'react-vis';
 import Base from '../components/base';
 
 

From 8ccc5335eea848dd92760a4738b8a9ffb6e0ae33 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Wed, 14 Apr 2021 11:26:06 -0400
Subject: [PATCH 21/21] put scale to 0-1

---
 client/src/views/prometheusgraph.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index ddb9094..4de2353 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -79,6 +79,7 @@ export default class PrometheusGraph extends Base<Props, State> {
                     width={150}
                     height={150}
                     xType="time"
+                    yDomain={[0, 1]}
                     onMouseLeave={this.onMouseLeave}>
                     <AreaSeries
                         color={'#6822aa'}