added dropdown for VMs in top consumers card (#481)

kubevirt · Jun 19, 2019 · afa3f6a · afa3f6a
1 parent 6cd0967
commit afa3f6a
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/src/components/StorageOverview/TopConsumers/TopConsumers.js b/src/components/StorageOverview/TopConsumers/TopConsumers.js
@@ -26,11 +26,11 @@ import {
   DashboardCardTitle,
 } from '../../Dashboard/DashboardCard';
 
-import { PROJECTS, STORAGE_CLASSES, PODS, BY_USED_CAPACITY, BY_REQUESTED_CAPACITY } from './strings';
+import { PROJECTS, STORAGE_CLASSES, PODS, VMS, BY_USED_CAPACITY, BY_REQUESTED_CAPACITY } from './strings';
 import { StorageOverviewContext } from '../StorageOverviewContext/StorageOverviewContext';
 import { getTopConsumerVectorStats } from '../../../selectors/prometheus/storage';
 
-const metricTypes = [PROJECTS, STORAGE_CLASSES, PODS];
+const metricTypes = [PROJECTS, STORAGE_CLASSES, PODS, VMS];
 const sortBy = [
   { name: BY_USED_CAPACITY, refObj: 'byUsedCapacity' },
   { name: BY_REQUESTED_CAPACITY, refObj: 'byRequestedCapacity' },
@@ -133,6 +133,10 @@ export class TopConsumers extends React.PureComponent {
       byUsedCapacity: () => this.getCapacity(this.props.podsUsedCapacity),
       byRequestedCapacity: () => this.getCapacity(this.props.podsRequestedCapacity),
     },
+    vms: {
+      byUsedCapacity: () => this.getCapacity(this.props.vmsUsedCapacity),
+      byRequestedCapacity: () => this.getCapacity(this.props.vmsRequestedCapacity),
+    },
   };
 
   getCurrentMetric = () => {
@@ -146,6 +150,9 @@ export class TopConsumers extends React.PureComponent {
       case PODS:
         return this.metrics.pods[this.state.sortBy.refObj]();
 
+      case VMS:
+        return this.metrics.vms[this.state.sortBy.refObj]();
+
       default:
         return [];
     }
@@ -160,6 +167,8 @@ export class TopConsumers extends React.PureComponent {
       slClassesRequestedCapacity,
       podsUsedCapacity,
       podsRequestedCapacity,
+      vmsUsedCapacity,
+      vmsRequestedCapacity,
     } = this.props;
     const metric = this.getCurrentMetric();
     const isLoading =
@@ -168,7 +177,9 @@ export class TopConsumers extends React.PureComponent {
       !slClassesRequestedCapacity &&
       !slClassesUsedCapacity &&
       !podsUsedCapacity &&
-      !podsRequestedCapacity;
+      !podsRequestedCapacity &&
+      !vmsUsedCapacity &&
+      !vmsRequestedCapacity;
 
     return (
       <DashboardCard>
@@ -220,6 +231,8 @@ TopConsumers.defaultProps = {
   slClassesUsedCapacity: null,
   podsRequestedCapacity: null,
   podsUsedCapacity: null,
+  vmsRequestedCapacity: null,
+  vmsUsedCapacity: null,
   LoadingComponent: InlineLoading,
 };
 
@@ -230,6 +243,8 @@ TopConsumers.propTypes = {
   slClassesUsedCapacity: PropTypes.object,
   podsUsedCapacity: PropTypes.object,
   podsRequestedCapacity: PropTypes.object,
+  vmsUsedCapacity: PropTypes.object,
+  vmsRequestedCapacity: PropTypes.object,
   LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
@@ -244,6 +259,8 @@ const TopConsumersConnected = () => (
         slClassesRequestedCapacity={props.slClassesRequestedCapacity}
         podsUsedCapacity={props.podsUsedCapacity}
         podsRequestedCapacity={props.podsRequestedCapacity}
+        vmsUsedCapacity={props.vmsUsedCapacity}
+        vmsRequestedCapacity={props.vmsRequestedCapacity}
       />
     )}
   </StorageOverviewContext.Consumer>

diff --git a/src/components/StorageOverview/TopConsumers/strings.js b/src/components/StorageOverview/TopConsumers/strings.js
@@ -1,6 +1,7 @@
 export const PROJECTS = 'Projects';
 export const STORAGE_CLASSES = 'Storage Classes';
 export const PODS = 'Pods';
+export const VMS = 'VMs';
 
 export const BY_USED_CAPACITY = 'By Used Capacity';
 export const BY_REQUESTED_CAPACITY = 'By Requested Capacity';
diff --git a/src/components/StorageOverview/TopConsumers/tests/TopConsumers.test.js b/src/components/StorageOverview/TopConsumers/tests/TopConsumers.test.js
@@ -7,7 +7,7 @@ import { default as StorageOverviewFixtures } from '../../fixtures/StorageOvervi
 import { StorageOverviewContext } from '../../StorageOverviewContext';
 import { selectDropdownItem } from '../../../../tests/enzyme';
 
-import { PROJECTS, STORAGE_CLASSES, PODS, BY_USED_CAPACITY, BY_REQUESTED_CAPACITY } from '../strings';
+import { PROJECTS, STORAGE_CLASSES, PODS, VMS, BY_USED_CAPACITY, BY_REQUESTED_CAPACITY } from '../strings';
 
 // eslint-disable-next-line react/prop-types
 const testTopConsumersOverview = ({ props }) => <TopConsumers {...props} />;
@@ -43,6 +43,8 @@ describe('<TopConsumers />', () => {
     testConsumerResults(component, STORAGE_CLASSES, BY_REQUESTED_CAPACITY);
     testConsumerResults(component, PODS, BY_USED_CAPACITY);
     testConsumerResults(component, PODS, BY_REQUESTED_CAPACITY);
+    testConsumerResults(component, VMS, BY_USED_CAPACITY);
+    testConsumerResults(component, VMS, BY_REQUESTED_CAPACITY);
   });
   it('renders correctly with Provider', () => {
     const component = shallow(

diff --git a/src/components/StorageOverview/TopConsumers/tests/__snapshots__/TopConsumers.test.js.snap b/src/components/StorageOverview/TopConsumers/tests/__snapshots__/TopConsumers.test.js.snap
@@ -40,6 +40,7 @@ exports[`<TopConsumers /> renders Loading top consumers correctly 1`] = `
                 "Projects",
                 "Storage Classes",
                 "Pods",
+                "VMs",
               ]
             }
             disabled={true}
@@ -131,6 +132,7 @@ exports[`<TopConsumers /> renders Not available top consumers correctly 1`] = `
                 "Projects",
                 "Storage Classes",
                 "Pods",
+                "VMs",
               ]
             }
             disabled={true}
@@ -222,6 +224,7 @@ exports[`<TopConsumers /> renders Top Consumers correctly 1`] = `
                 "Projects",
                 "Storage Classes",
                 "Pods",
+                "VMs",
               ]
             }
             disabled={false}
@@ -296,5 +299,7 @@ exports[`<TopConsumers /> renders correctly with Provider 1`] = `
   projectsUsedCapacity={null}
   slClassesRequestedCapacity={null}
   slClassesUsedCapacity={null}
+  vmsRequestedCapacity={null}
+  vmsUsedCapacity={null}
 />
 `;
diff --git a/src/selectors/prometheus/storage.js b/src/selectors/prometheus/storage.js
@@ -1,7 +1,7 @@
 import { flatMap, max } from 'lodash';
 
 import { parseNumber, formatBytes } from '../../utils';
-import { PROJECTS, STORAGE_CLASSES, PODS } from '../../components/StorageOverview/TopConsumers/strings';
+import { PROJECTS, STORAGE_CLASSES, PODS, VMS } from '../../components/StorageOverview/TopConsumers/strings';
 
 export const getTopConsumerVectorStats = (result, metricType) => {
   let maxVal = 0;
@@ -46,6 +46,7 @@ export const getLegends = (data, metricType) => {
       return data.map(r => ({ name: r.metric.namespace }));
     case STORAGE_CLASSES:
       return data.map(r => ({ name: r.metric.storageclass }));
+    case VMS:
     case PODS:
       return data.map(r => ({ name: r.metric.pod }));
     default: