From 90122d4f729e77587906a27a913d21d2b677c7aa Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 27 Aug 2021 11:45:54 -0500
Subject: [PATCH 1/2] fix #243

Signed-off-by: Yuqiu Wang <yuqiuw@indeed.com>
---
 client/src/views/prometheusgraph.tsx |  2 +-
 client/src/views/workloads.tsx       | 57 ++++++++++++++++++++++++++--
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index 63d73b2..e0f6003 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -3,7 +3,7 @@ import {XYPlot, XAxis, YAxis, LineSeries, Crosshair, AreaSeries} from 'react-vis
 import Base from '../components/base';
 
 
-export const BASE_HTTP_URL = 'http://localhost:4654/prom';
+export const BASE_HTTP_URL = 'http://localhost:50320';
 
 
 type Props = {
diff --git a/client/src/views/workloads.tsx b/client/src/views/workloads.tsx
index a5f411b..18cd257 100644
--- a/client/src/views/workloads.tsx
+++ b/client/src/views/workloads.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import Base from '../components/base';
 import Chart from '../components/chart';
 import Filter from '../components/filter';
@@ -11,6 +11,7 @@ import Working from '../components/working';
 import LoadingChart from '../components/loadingChart';
 import ChartsContainer from '../components/chartsContainer';
 import {ApiItem, CronJob, DaemonSet, Deployment, Job, StatefulSet, TODO} from '../utils/types';
+import PrometheusGraph, {BASE_HTTP_URL} from "./prometheusgraph";
 
 type Props = {
 
@@ -120,9 +121,34 @@ function ControllerStatusChart({items}: {items: ApiItem<any, any>[] | null}) {
     const count = items && items.length;
     const pending = workingItems.length;
 
+    const query = {
+        queryString: 'sum(namespace_workload_pod:kube_pod_owner:relabel)',
+        title: 'Workload Count',
+        yAxisMin: 0,
+        yAxisUnit: ' ',
+    };
+    const [prometheusData, setPrometheusData] = useState([] as any);
+
+    useEffect(() => {
+        const refreshPMData = async function () {
+            const data = await api.getPrometheusData(BASE_HTTP_URL, query.queryString);
+            setPrometheusData(data);
+        };
+        refreshPMData();
+    }, [query.queryString]);
+
     return (
         <div className='charts_item'>
-            {items && count != null && pending != null ? (
+            {/* eslint-disable-next-line no-nested-ternary */}
+            {prometheusData.length ? (
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                    yAxisMin={query.yAxisMin}
+                    yAxisUnit={query.yAxisUnit}
+                    prometheusData={prometheusData}
+                />
+            ) : items && count != null && pending != null ? (
                 <Chart used={count - pending} pending={pending} available={count} />
             ) : (
                 <LoadingChart />
@@ -137,9 +163,34 @@ function PodStatusChart({items}: {items: ApiItem<any, any>[] | null}) {
     const current = _.sumBy(items, getCurrentCount);
     const expected = _.sumBy(items, getExpectedCount);
 
+    const query = {
+        queryString: 'sum(namespace_workload_pod:kube_pod_owner:relabel)',
+        title: 'Workload Count',
+        yAxisMin: 0,
+        yAxisUnit: ' ',
+    };
+    const [prometheusData, setPrometheusData] = useState([] as any);
+
+    useEffect(() => {
+        const refreshPMData = async function () {
+            const data = await api.getPrometheusData(BASE_HTTP_URL, query.queryString);
+            setPrometheusData(data);
+        };
+        refreshPMData();
+    }, [query.queryString]);
+
     return (
         <div className='charts_item'>
-            {items ? (
+            {/* eslint-disable-next-line no-nested-ternary */}
+            {prometheusData.length ? (
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                    yAxisMin={query.yAxisMin}
+                    yAxisUnit={query.yAxisUnit}
+                    prometheusData={prometheusData}
+                />
+            ) : items ? (
                 <Chart used={current} pending={expected - current} available={expected} />
             ) : (
                 <LoadingChart />

From a46d07b27fd9faa26db6de57100f30793f00dfa5 Mon Sep 17 00:00:00 2001
From: Yuqiu Wang <yuqiuw@indeed.com>
Date: Fri, 27 Aug 2021 12:45:11 -0500
Subject: [PATCH 2/2] fix linter

Signed-off-by: Yuqiu Wang <yuqiuw@indeed.com>
---
 client/src/views/prometheusgraph.tsx | 2 +-
 client/src/views/workloads.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
index e0f6003..63d73b2 100644
--- a/client/src/views/prometheusgraph.tsx
+++ b/client/src/views/prometheusgraph.tsx
@@ -3,7 +3,7 @@ import {XYPlot, XAxis, YAxis, LineSeries, Crosshair, AreaSeries} from 'react-vis
 import Base from '../components/base';
 
 
-export const BASE_HTTP_URL = 'http://localhost:50320';
+export const BASE_HTTP_URL = 'http://localhost:4654/prom';
 
 
 type Props = {
diff --git a/client/src/views/workloads.tsx b/client/src/views/workloads.tsx
index 18cd257..d91ada7 100644
--- a/client/src/views/workloads.tsx
+++ b/client/src/views/workloads.tsx
@@ -11,7 +11,7 @@ import Working from '../components/working';
 import LoadingChart from '../components/loadingChart';
 import ChartsContainer from '../components/chartsContainer';
 import {ApiItem, CronJob, DaemonSet, Deployment, Job, StatefulSet, TODO} from '../utils/types';
-import PrometheusGraph, {BASE_HTTP_URL} from "./prometheusgraph";
+import PrometheusGraph, {BASE_HTTP_URL} from './prometheusgraph';
 
 type Props = {