Adding Capacity Card to Storage Overview

src/components/StorageOverview/Capacity/Capacity.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { InlineLoading } from '../../Loading';
+
+import {
+  DashboardCard,
+  DashboardCardBody,
+  DashboardCardHeader,
+  DashboardCardTitle,
+} from '../../Dashboard/DashboardCard';
+import { StorageOverviewContext } from '../StorageOverviewContext';
+import { CapacityItem } from '../../Dashboard/Capacity/CapacityItem';
+import { formatBytes } from '../../../utils';
+import { getCapacityStats } from '../../../selectors';
+import { CapacityBody } from '../../Dashboard/Capacity/CapacityBody';
+
+export const Capacity = ({ capacityTotal, capacityUsed, LoadingComponent }) => (
+  <DashboardCard>
+    <DashboardCardHeader>
+      <DashboardCardTitle>Capacity</DashboardCardTitle>
+    </DashboardCardHeader>
+    <DashboardCardBody>
+      <CapacityBody>
+        <CapacityItem
+          id="capacity"
+          title="Total capacity"
+          used={getCapacityStats(capacityUsed)}
+          total={getCapacityStats(capacityTotal)}
+          formatValue={formatBytes}
+          LoadingComponent={LoadingComponent}
+          isLoading={!(capacityUsed && capacityTotal)}
+        />
+      </CapacityBody>
+    </DashboardCardBody>
+  </DashboardCard>
+);
+
+Capacity.defaultProps = {
+  capacityTotal: null,
+  capacityUsed: null,
+  LoadingComponent: InlineLoading,
+};
+
+Capacity.propTypes = {
+  capacityTotal: PropTypes.object,
+  capacityUsed: PropTypes.object,
+  LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+};
+
+export const CapacityConnected = () => (
+  <StorageOverviewContext.Consumer>{props => <Capacity {...props} />}</StorageOverviewContext.Consumer>
+);

src/components/StorageOverview/Capacity/fixtures/Capacity.fixture.js

@@ -0,0 +1,21 @@
+import { Capacity } from '../Capacity';
+
+const getPromResponse = value => ({
+  data: {
+    result: [
+      {
+        value: [0, value],
+      },
+    ],
+  },
+});
+
+export const capacityStats = {
+  capacityTotal: getPromResponse(11),
+  capacityUsed: getPromResponse(5),
+};
+
+export default {
+  component: Capacity,
+  props: { capacityStats },
+};

src/components/StorageOverview/Capacity/tests/Capacity.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from 'enzyme';
+
+import { Capacity } from '../Capacity';
+import { default as CapacityFixtures } from '../fixtures/Capacity.fixture';
+
+const testCapacityOverview = () => <Capacity {...CapacityFixtures.props} />;
+
+describe('<Capacity />', () => {
+  it('renders correctly', () => {
+    const component = render(testCapacityOverview());
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders correctly in Loading state', () => {
+    const component = render(<Capacity />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/StorageOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Capacity /> renders correctly 1`] = `
+<div
+  class="card-pf kubevirt-dashboard__card"
+>
+  <div
+    class="card-pf-heading kubevirt-dashboard__card-heading"
+  >
+    <h2
+      class="card-pf-title"
+    >
+      Capacity
+    </h2>
+  </div>
+  <div
+    class="card-pf-body"
+  >
+    <div
+      class="kubevirt-capacity__items"
+    >
+      <div
+        class="kubevirt-capacity__item"
+      >
+        <h2
+          class="kubevirt-capacity__item-title"
+        >
+          Total capacity
+        </h2>
+        <h6>
+          <div>
+            <div
+              class="spinner spinner-md blank-slate-pf-icon"
+            />
+          </div>
+        </h6>
+        <div>
+          <div
+            class=" donut-chart-pf"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Capacity /> renders correctly in Loading state 1`] = `
+<div
+  class="card-pf kubevirt-dashboard__card"
+>
+  <div
+    class="card-pf-heading kubevirt-dashboard__card-heading"
+  >
+    <h2
+      class="card-pf-title"
+    >
+      Capacity
+    </h2>
+  </div>
+  <div
+    class="card-pf-body"
+  >
+    <div
+      class="kubevirt-capacity__items"
+    >
+      <div
+        class="kubevirt-capacity__item"
+      >
+        <h2
+          class="kubevirt-capacity__item-title"
+        >
+          Total capacity
+        </h2>
+        <h6>
+          <div>
+            <div
+              class="spinner spinner-md blank-slate-pf-icon"
+            />
+          </div>
+        </h6>
+        <div>
+          <div
+            class=" donut-chart-pf"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/StorageOverview/StorageOverview.js

@@ -9,13 +9,17 @@ import { MEDIA_QUERY_EXCLUSIVE_DEVIATION, MEDIA_QUERY_LG } from '../../utils';
 import { StorageDetailsConnected } from './Details/Details';
 import { InventoryConnected } from './Inventory/Inventory';
 import OCSHealthConnected from './OCSHealth/Health';
+import { CapacityConnected } from './Capacity/Capacity';
 
 const MainCards = () => (
   <GridItem lg={6} md={12} sm={12}>
     <Grid>
       <GridItem span={12}>
         <OCSHealthConnected />
       </GridItem>
+      <GridItem span={6}>
+        <CapacityConnected />
+      </GridItem>
     </Grid>
   </GridItem>
 );

src/components/StorageOverview/fixtures/StorageOverview.fixture.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { StorageOverview as StorageOverviewComponent } from '../StorageOverview';
 import { cephCluster } from '../Details/fixtures/Details.fixture';
 import { ocsHealthData } from '../OCSHealth/fixtures/Health.fixture';
+import { capacityStats } from '../Capacity/fixtures/Capacity.fixture';
 
 import { StorageOverviewContext } from '../StorageOverviewContext';
 
@@ -26,9 +27,17 @@ export default [
     props: {
       cephCluster,
       ocsHealthData,
+      ...capacityStats,
       nodes,
       pvcs,
       pvs,
     },
   },
+  {
+    component: StorageOverview,
+    name: 'Loading overview',
+    props: {
+      ocsHealthData: { loaded: false },
+    },
+  },
 ];