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] 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>;
+    }
+}