ClusterOverview: refactor Utilization card and connect (kubevirt#307)

Utilization card is refactored to split concern between
ClusterOverview and Dashboard components.

Connected to real data.

So far CPU only, others will follow.

Author: mareklibra

sass/_components.scss

@@ -23,12 +23,12 @@
 @import './components/Dashboard/inventory';
 @import './components/Dashboard/detail';
 @import './components/Dashboard/capacity';
+@import './components/Dashboard/utilization';
 @import './components/ClusterOverview/cluster-overview';
 @import './components/ClusterOverview/events';
 @import './components/ClusterOverview/consumers';
 @import './components/ClusterOverview/health';
 @import './components/ClusterOverview/compliance';
-@import './components/ClusterOverview/utilization';
 @import './components/CreateBaremetalHostDialog/create-baremetal-host-dialog';
 
 /*

sass/components/ClusterOverview/utilization.scss

@@ -0,0 +1,19 @@
+.kubevirt-utilization__item {
+  border-bottom: 1px solid #d1d1d1;
+  font-size: 1.333em; // aligned with the Inventory card
+
+  .row {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.kubevirt-utilization__item-actual {
+  text-align: right;
+}
+
+.kubevirt-utilization__item-chart {
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-left-color: rgb(209, 209, 209);
+}

sass/components/Dashboard/utilization.scss

@@ -12,7 +12,7 @@ import ComplianceConnected from './Compliance/Compliance';
 import EventsConnected from './Events/Events';
 import { InventoryConnected } from './Inventory/Inventory';
 import { CapacityConnected } from './Capacity/Capacity';
-import UtilizationConnected from './Utilization/Utilization';
+import { UtilizationConnected } from './Utilization/Utilization';
 import TopConsumersConnected from './TopConsumers/TopConsumers';
 
 const MainCards = () => (

src/components/ClusterOverview/ClusterOverview.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { SparklineChart, Row, Col } from 'patternfly-react';
 import PropTypes from 'prop-types';
 
 import {
@@ -8,74 +7,77 @@ import {
   DashboardCardHeader,
   DashboardCardTitle,
 } from '../../Dashboard/DashboardCard';
-import { ClusterOverviewContextGenericConsumer } from '../ClusterOverviewContext';
+import { ClusterOverviewContext } from '../ClusterOverviewContext';
+import { InlineLoading } from '../../Loading';
+import { UtilizationBody } from '../../Dashboard/Utilization/UtilizationBody';
+import { UtilizationItem } from '../../Dashboard/Utilization/UtilizationItem';
+import { getCapacityStats, getUtilizationVectorStats } from '../../../selectors';
+import { formatBytes } from '../../../utils';
 
-const UtilizationItem = ({ id, title, data, unit }) => (
-  <div className="kubevirt-utilization__item">
-    <Row>
-      <Col lg={2} md={2} sm={2} xs={2}>
-        <h2>{title}</h2>
-      </Col>
-      <Col lg={3} md={3} sm={3} xs={3}>
-        <h2>{`${data[data.length - 1]} ${unit}`}</h2>
-      </Col>
-      <Col lg={7} md={7} sm={7} xs={7}>
-        <SparklineChart
-          id={id}
-          data={{
-            columns: [[unit, ...data]],
-            unload: true,
-            type: 'area',
-          }}
-          unloadBeforeLoad
-        />
-      </Col>
-    </Row>
-  </div>
-);
-
-UtilizationItem.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  data: PropTypes.array.isRequired,
-  unit: PropTypes.string.isRequired,
-};
+export const Utilization = ({ cpuUtilization, memoryUtilization, memoryTotal, LoadingComponent }) => {
+  const cpuStats = getUtilizationVectorStats(cpuUtilization);
 
-class UtilizationBody extends React.PureComponent {
-  render() {
-    const { stats } = this.props;
-    return Object.keys(stats).map(key => (
-      <UtilizationItem id={key} key={key} title={stats[key].title} data={stats[key].data} unit={stats[key].unit} />
-    ));
+  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
   }
-}
 
-UtilizationBody.propTypes = {
-  stats: PropTypes.object.isRequired,
+  return (
+    <DashboardCard>
+      <DashboardCardHeader>
+        <DashboardCardTitle>Cluster Utilization</DashboardCardTitle>
+      </DashboardCardHeader>
+      <DashboardCardBody>
+        <UtilizationBody>
+          <UtilizationItem
+            unit="%"
+            id="cpu"
+            title="CPU"
+            data={cpuStats}
+            maxY={100}
+            LoadingComponent={LoadingComponent}
+            isLoading={!cpuUtilization}
+          />
+          <UtilizationItem
+            unit={maxConverted.unit}
+            id="memory"
+            title="Memory"
+            data={memoryStats}
+            maxY={memoryTotalConverted}
+            LoadingComponent={LoadingComponent}
+            isLoading={!memoryUtilization}
+          />
+        </UtilizationBody>
+      </DashboardCardBody>
+    </DashboardCard>
+  );
 };
 
-export const Utilization = ({ stats, loaded }) => (
-  <DashboardCard>
-    <DashboardCardHeader>
-      <DashboardCardTitle>Cluster utilization</DashboardCardTitle>
-    </DashboardCardHeader>
-    <DashboardCardBody isLoading={!loaded}>
-      <UtilizationBody stats={stats} />
-    </DashboardCardBody>
-  </DashboardCard>
-);
-
 Utilization.defaultProps = {
-  loaded: false,
+  cpuUtilization: null,
+  memoryUtilization: null,
+  memoryTotal: null,
+  LoadingComponent: InlineLoading,
 };
 
 Utilization.propTypes = {
-  stats: PropTypes.object.isRequired,
-  loaded: PropTypes.bool,
+  cpuUtilization: PropTypes.object,
+  memoryUtilization: PropTypes.object,
+  memoryTotal: PropTypes.object,
+  LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
-const UtilizationConnected = () => (
-  <ClusterOverviewContextGenericConsumer Component={Utilization} dataPath="utilizationStats" />
+export const UtilizationConnected = () => (
+  <ClusterOverviewContext.Consumer>{props => <Utilization {...props} />}</ClusterOverviewContext.Consumer>
 );
-
-export default UtilizationConnected;

src/components/ClusterOverview/Utilization/Utilization.js

@@ -1,8 +1,45 @@
 import { Utilization } from '../Utilization';
 
-import { utilizationStats } from '../..';
+const time0 = 1000;
+const KiB = 1024;
+
+export const utilizationStats = {
+  cpuUtilization: {
+    data: {
+      result: [
+        {
+          values: [[time0, 0], [time0 + 10, 10], [time0 + 20, 15], [time0 + 30, 100], [time0 + 40, 50]],
+        },
+      ],
+    },
+  },
+  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 {
   component: Utilization,
-  props: { ...utilizationStats },
+  props: utilizationStats,
 };

src/components/ClusterOverview/Utilization/fixtures/Utilization.fixture.js

@@ -4,11 +4,13 @@ import { render } from 'enzyme';
 import { Utilization } from '../Utilization';
 import { default as UtilizationFixtures } from '../fixtures/Utilization.fixture';
 
-const testUtilizationOverview = () => <Utilization {...UtilizationFixtures.props} />;
-
 describe('<Utilization />', () => {
   it('renders correctly', () => {
-    const component = render(testUtilizationOverview());
+    const component = render(<Utilization {...UtilizationFixtures.props} />);
+    expect(component).toMatchSnapshot();
+  });
+  it('renders correctly in Loading state', () => {
+    const component = render(<Utilization />);
     expect(component).toMatchSnapshot();
   });
 });