ClusterOverview: Add Memory to Utilization (#309)

kubevirt · Apr 5, 2019 · a9eab17 · a9eab17
1 parent 164739f
commit a9eab17
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 4 deletions.
diff --git a/src/components/ClusterOverview/Utilization/Utilization.js b/src/components/ClusterOverview/Utilization/Utilization.js
@@ -11,10 +11,28 @@ import { ClusterOverviewContext } from '../ClusterOverviewContext';
 import { InlineLoading } from '../../Loading';
 import { UtilizationBody } from '../../Dashboard/Utilization/UtilizationBody';
 import { UtilizationItem } from '../../Dashboard/Utilization/UtilizationItem';
-import { getUtilizationCpuStats } from '../../../selectors';
+import { getCapacityStats, getUtilizationVectorStats } from '../../../selectors';
+import { formatBytes } from '../../../utils';
+
+export const Utilization = ({ cpuUtilization, memoryUtilization, memoryTotal, LoadingComponent }) => {
+  const cpuStats = getUtilizationVectorStats(cpuUtilization);
+
+  let memoryStats = null;
+  let memoryTotalConverted;
+  let memoryMax = 0;
+  let maxConverted;
+  const memoryStatsRaw = getUtilizationVectorStats(memoryUtilization);
+  if (memoryStatsRaw) {
+    memoryMax = Math.max(0, ...memoryStatsRaw);
+    maxConverted = formatBytes(memoryMax);
+    memoryStats = memoryStatsRaw.map(bytes => formatBytes(bytes, maxConverted.unit, 1).value);
+    memoryTotalConverted = memoryTotal
+      ? formatBytes(getCapacityStats(memoryTotal), maxConverted.unit, 1).value
+      : undefined;
+  } else {
+    maxConverted = formatBytes(memoryMax); // B
+  }
 
-export const Utilization = ({ cpuUtilization, LoadingComponent }) => {
-  const cpuStats = getUtilizationCpuStats(cpuUtilization);
   return (
     <DashboardCard>
       <DashboardCardHeader>
@@ -31,6 +49,15 @@ export const Utilization = ({ cpuUtilization, LoadingComponent }) => {
             LoadingComponent={LoadingComponent}
             isLoading={!cpuUtilization}
           />
+          <UtilizationItem
+            unit={maxConverted.unit}
+            id="memory"
+            title="Memory"
+            data={memoryStats}
+            maxY={memoryTotalConverted}
+            LoadingComponent={LoadingComponent}
+            isLoading={!memoryUtilization}
+          />
         </UtilizationBody>
       </DashboardCardBody>
     </DashboardCard>
@@ -39,11 +66,15 @@ export const Utilization = ({ cpuUtilization, LoadingComponent }) => {
 
 Utilization.defaultProps = {
   cpuUtilization: null,
+  memoryUtilization: null,
+  memoryTotal: null,
   LoadingComponent: InlineLoading,
 };
 
 Utilization.propTypes = {
   cpuUtilization: PropTypes.object,
+  memoryUtilization: PropTypes.object,
+  memoryTotal: PropTypes.object,
   LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 

diff --git a/src/components/ClusterOverview/Utilization/fixtures/Utilization.fixture.js b/src/components/ClusterOverview/Utilization/fixtures/Utilization.fixture.js
@@ -1,6 +1,7 @@
 import { Utilization } from '../Utilization';
 
 const time0 = 1000;
+const KiB = 1024;
 
 export const utilizationStats = {
   cpuUtilization: {
@@ -12,6 +13,30 @@ export const utilizationStats = {
       ],
     },
   },
+  memoryUtilization: {
+    data: {
+      result: [
+        {
+          values: [
+            [time0, 2 * KiB],
+            [time0 + 10, 5 * KiB],
+            [time0 + 20, 15 * KiB],
+            [time0 + 30, 10 * KiB],
+            [time0 + 40, 30 * KiB],
+          ],
+        },
+      ],
+    },
+  },
+  memoryTotal: {
+    data: {
+      result: [
+        {
+          value: [0, 100 * KiB],
+        },
+      ],
+    },
+  },
 };
 
 export default {

diff --git a/src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap b/src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap
@@ -44,6 +44,31 @@ exports[`<Utilization /> renders correctly 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="kubevirt-utilization__item"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
+          >
+            Memory
+          </div>
+          <div
+            class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
+          >
+            30 KB
+          </div>
+          <div
+            class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
+          >
+            <div
+              class=" chart-pf-sparkline"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -93,6 +118,31 @@ exports[`<Utilization /> renders correctly in Loading state 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="kubevirt-utilization__item"
+      >
+        <div
+          class="row"
+        >
+          <div
+            class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
+          >
+            Memory
+          </div>
+          <div
+            class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
+          />
+          <div
+            class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
+          >
+            <div>
+              <div
+                class="spinner spinner-md blank-slate-pf-icon"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

diff --git a/src/selectors/prometheus/selectors.js b/src/selectors/prometheus/selectors.js
@@ -20,7 +20,7 @@ export const getCapacityStats = response => {
   return parseNumber(value);
 };
 
-export const getUtilizationCpuStats = response => {
+export const getUtilizationVectorStats = response => {
   const values = get(response, 'data.result[0].values');
   return values && Array.isArray(values) ? values.map(timeValuePair => parseNumber(timeValuePair[1])) : null;
 };