Capacity Dropdowns

sass/components/Dashboard/capacity.scss

@@ -9,7 +9,7 @@
   flex-direction: column;
   text-align: center;
   justify-content: space-between;
-  flex: 0 1 120px;
+  flex: 0 1 150px;
 }
 
 .kubevirt-capacity__item-title {

src/components/StorageOverview/Capacity/Capacity.js

@@ -1,38 +1,89 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { InlineLoading } from '../../Loading';
+import { Row } from 'patternfly-react/dist/js/components/Grid';
+import Col from 'patternfly-react/dist/js/components/Grid/Col';
 
 import {
   DashboardCard,
   DashboardCardBody,
   DashboardCardHeader,
   DashboardCardTitle,
 } from '../../Dashboard/DashboardCard';
+import { Dropdown } from '../../Form/Dropdown';
+import { DashboardCardActionsBody } from '../../Dashboard/DashboardCard/DashboardCardActionsBody';
+
 import { StorageOverviewContext } from '../StorageOverviewContext';
 import { CapacityItem } from '../../Dashboard/Capacity/CapacityItem';
 import { formatBytes } from '../../../utils';
 import { getCapacityStats } from '../../../selectors';
 import { CapacityBody } from '../../Dashboard/Capacity/CapacityBody';
+import { TOTAL, CAPACITY, VMSVSPODS } from './strings';
+
+const capacityTypes = [TOTAL, CAPACITY, VMSVSPODS];
 
 export class Capacity extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      capacity: capacityTypes[0],
+    };
+  }
+
+  convertMetrics = (total, used, title) => ({ total, used, title });
+
+  changeCapacityMetric = newVal => {
+    this.setState({ capacity: newVal }, this.getNewCapacityMetric);
+  };
+
+  getNewCapacityMetric = () => {
+    switch (this.state.capacity) {
+      case TOTAL:
+        return this.convertMetrics(this.props.capacityTotal, this.props.capacityUsed, TOTAL);
+      case CAPACITY:
+        return this.convertMetrics(this.props.capacityRequested, this.props.capacityUsed, CAPACITY);
+      case VMSVSPODS:
+        return this.convertMetrics(this.props.podsCapacity, this.props.vmsCapacity, VMSVSPODS);
+      default:
+        return [];
+    }
+  };
+
   render() {
-    const { capacityTotal, capacityUsed, LoadingComponent } = this.props;
+    const { capacityTotal, capacityRequested, capacityUsed, vmsCapacity, podsCapacity } = this.props;
+
+    const capacitymetric = this.getNewCapacityMetric();
+    const isLoading = !capacityTotal && !capacityRequested && !capacityUsed && !vmsCapacity && !podsCapacity;
+
     return (
       <DashboardCard className="kubevirt-capacity__card">
         <DashboardCardHeader>
-          <DashboardCardTitle>Capacity</DashboardCardTitle>
+          <Row>
+            <Col lg={6} md={6} sm={6} xs={6}>
+              <DashboardCardTitle>Capacity</DashboardCardTitle>
+            </Col>
+            <Col>
+              <DashboardCardActionsBody>
+                <Dropdown
+                  id="capacity-type"
+                  value={this.state.capacity}
+                  onChange={this.changeCapacityMetric}
+                  choices={capacityTypes}
+                  disabled={isLoading}
+                  groupClassName="kubevirt-dropdown__group"
+                />
+              </DashboardCardActionsBody>
+            </Col>
+          </Row>
         </DashboardCardHeader>
         <DashboardCardBody>
           <CapacityBody>
             <CapacityItem
               id="capacity"
-              title="Total capacity"
-              used={getCapacityStats(capacityUsed)}
-              total={getCapacityStats(capacityTotal)}
+              title={capacitymetric.title}
+              used={getCapacityStats(capacitymetric.used)}
+              total={getCapacityStats(capacitymetric.total)}
               formatValue={formatBytes}
-              LoadingComponent={LoadingComponent}
-              isLoading={!(capacityUsed && capacityTotal)}
+              isLoading={!(capacitymetric.used && capacitymetric.total)}
             />
           </CapacityBody>
         </DashboardCardBody>
@@ -43,14 +94,18 @@ export class Capacity extends React.PureComponent {
 
 Capacity.defaultProps = {
   capacityTotal: null,
+  capacityRequested: null,
   capacityUsed: null,
-  LoadingComponent: InlineLoading,
+  vmsCapacity: null,
+  podsCapacity: null,
 };
 
 Capacity.propTypes = {
   capacityTotal: PropTypes.object,
+  capacityRequested: PropTypes.object,
   capacityUsed: PropTypes.object,
-  LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  vmsCapacity: PropTypes.object,
+  podsCapacity: PropTypes.object,
 };
 
 export const CapacityConnected = () => (
@@ -59,6 +114,9 @@ export const CapacityConnected = () => (
       <Capacity
         capacityTotal={props.capacityTotal}
         capacityUsed={props.capacityUsed}
+        capacityRequested={props.capacityRequested}
+        vmsCapacity={props.vmsCapacity}
+        podsCapacity={props.podsCapacity}
         LoadingComponent={props.LoadingComponent}
       />
     )}

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

@@ -13,6 +13,9 @@ const getPromResponse = value => ({
 export const capacityStats = {
   capacityTotal: getPromResponse(11),
   capacityUsed: getPromResponse(5),
+  capacityRequested: getPromResponse(7),
+  vmsCapacity: getPromResponse(3),
+  podsCapacity: getPromResponse(10),
 };
 
 export default [

src/components/StorageOverview/Capacity/strings.js

@@ -0,0 +1,3 @@
+export const TOTAL = 'Total Capacity';
+export const CAPACITY = 'Requested vs Used';
+export const VMSVSPODS = 'VMs vs Pods';

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

@@ -1,21 +1,36 @@
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render, shallow, mount } from 'enzyme';
 
 import { Capacity, CapacityConnected } from '../Capacity';
 import { default as CapacityFixtures } from '../fixtures/Capacity.fixture';
 import { default as StorageOverviewFixtures } from '../../fixtures/StorageOverview.fixture';
 import { StorageOverviewContext } from '../../StorageOverviewContext';
+import { selectDropdownItem } from '../../../../tests/enzyme';
+
+import { TOTAL, CAPACITY } from '../strings';
 
 // eslint-disable-next-line react/prop-types
 const testCapacityOverview = ({ props }) => <Capacity {...props} />;
 
+const getCapacityDropdown = component => component.find('#capacity-type');
+
+const testCapacityResults = (component, capacity) => {
+  selectDropdownItem(getCapacityDropdown(component), capacity);
+  expect(component.state().capacity).toBe(capacity);
+};
+
 describe('<Capacity />', () => {
   CapacityFixtures.forEach(fixture => {
     it(`renders ${fixture.name} correctly`, () => {
       const component = shallow(testCapacityOverview(fixture));
       expect(component).toMatchSnapshot();
     });
   });
+  it('switches between capacity dropdown options', () => {
+    const component = mount(testCapacityOverview(CapacityFixtures[0]));
+    expect(component.state().capacity).toBe(TOTAL);
+    testCapacityResults(component, CAPACITY);
+  });
   it('renders correctly with Provider', () => {
     const component = render(
       <StorageOverviewContext.Provider value={StorageOverviewFixtures[0].props}>