From bb546edce117751e319405c25c7c5c782d7fe72c Mon Sep 17 00:00:00 2001
From: salvadorac <salvadorac@indeed.com>
Date: Tue, 20 Jul 2021 14:18:57 -0700
Subject: [PATCH] using Prometheus to add time axis

Signed-off-by: salvadorac <salvadorac@indeed.com>
---
 client/src/components/podStatusChart.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/src/components/podStatusChart.tsx b/client/src/components/podStatusChart.tsx
index 8d55ebf..a593b25 100644
--- a/client/src/components/podStatusChart.tsx
+++ b/client/src/components/podStatusChart.tsx
@@ -1,17 +1,25 @@
-import _ from 'lodash';
 import React from 'react';
-import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {Pod} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function PodStatusChart({items}: {items?: Pod[]}) {
     const available = items && items.length;
-    const count = _.sumBy(items, x => x.status.phase === 'Running' ? 1 : 0); // eslint-disable-line no-confusing-arrow
-
+    const query = {
+        queryString: 'sum(kube_pod_info)',
+        title: 'Pod Count',
+        yAxisMin: 0,
+        yAxisUnit: 'Pods',
+    };
     return (
         <div className='charts_item'>
             {items && available ? (
-                <Chart used={count} pending={available - count} available={available} />
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                    yAxisMin={query.yAxisMin}
+                    yAxisUnit={query.yAxisUnit}
+                />
             ) : (
                 <LoadingChart />
             )}