Add VMs to Inventory card

frontend/packages/kubevirt-plugin/package.json

@@ -10,6 +10,6 @@
     "kubevirt-web-ui-components": "~0.1.36"
   },
   "consolePlugin": {
-    "entry": "src/plugin.ts"
+    "entry": "src/plugin.tsx"
   }
 }

frontend/packages/kubevirt-plugin/src/components/dashboards-page/overview-dashboard/inventory.scss

@@ -0,0 +1,6 @@
+@import '~@patternfly/patternfly/sass-utilities/all';
+
+.kubevirt-inventory-card__status-icon--off {
+  font-size: 1rem;
+  color: $pf-color-black-600;
+}

frontend/packages/kubevirt-plugin/src/components/dashboards-page/overview-dashboard/inventory.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Icon } from 'patternfly-react';
+import {
+  getVmStatus,
+  VM_STATUS_V2V_CONVERSION_ERROR,
+  VM_STATUS_RUNNING,
+  VM_STATUS_OFF,
+  VM_STATUS_V2V_CONVERSION_IN_PROGRESS,
+  VM_STATUS_IMPORTING,
+  VM_STATUS_MIGRATING,
+  VM_STATUS_STARTING,
+  VM_STATUS_VMI_WAITING,
+  VM_STATUS_V2V_CONVERSION_PENDING,
+  VM_STATUS_POD_ERROR,
+  VM_STATUS_ERROR,
+  VM_STATUS_IMPORT_ERROR,
+} from 'kubevirt-web-ui-components';
+
+import { StatusGroupMapper } from '@console/internal/components/dashboard/inventory-card/inventory-item';
+import { InventoryStatusGroup } from '@console/internal/components/dashboard/inventory-card/status-group';
+
+import './inventory.scss';
+
+const VM_STATUS_GROUP_MAPPER = {
+  [InventoryStatusGroup.OK]: [VM_STATUS_RUNNING],
+  'vm-off': [VM_STATUS_OFF],
+  [InventoryStatusGroup.PROGRESS]: [
+    VM_STATUS_V2V_CONVERSION_IN_PROGRESS,
+    VM_STATUS_IMPORTING,
+    VM_STATUS_MIGRATING,
+    VM_STATUS_STARTING,
+    VM_STATUS_VMI_WAITING,
+    VM_STATUS_V2V_CONVERSION_PENDING,
+  ],
+  [InventoryStatusGroup.ERROR]: [
+    VM_STATUS_V2V_CONVERSION_ERROR,
+    VM_STATUS_POD_ERROR,
+    VM_STATUS_ERROR,
+    VM_STATUS_IMPORT_ERROR,
+  ],
+};
+
+export const getVMStatusGroups: StatusGroupMapper = (vms, { pods, migrations }) => {
+  const groups = {
+    [InventoryStatusGroup.NOT_MAPPED]: {
+      statusIDs: [],
+      count: 0,
+    },
+    [InventoryStatusGroup.PROGRESS]: {
+      statusIDs: [],
+      count: 0,
+    },
+    [InventoryStatusGroup.ERROR]: {
+      statusIDs: [],
+      count: 0,
+    },
+    [InventoryStatusGroup.OK]: {
+      statusIDs: [],
+      count: 0,
+    },
+    'vm-off': {
+      statusIDs: [VM_STATUS_OFF],
+      count: 0,
+      filterType: 'vm-status',
+    },
+  };
+  vms.forEach((vm) => {
+    const { status } = getVmStatus(vm, pods, migrations);
+    const group =
+      Object.keys(VM_STATUS_GROUP_MAPPER).find((key) =>
+        VM_STATUS_GROUP_MAPPER[key].includes(status),
+      ) || InventoryStatusGroup.NOT_MAPPED;
+    groups[group].count++;
+  });
+  return groups;
+};
+
+export const VMOffGroupIcon: React.FC<{}> = () => (
+  <Icon type="pf" name="off" className="kubevirt-inventory-card__status-icon--off" />
+);

frontend/packages/kubevirt-plugin/src/plugin.ts → frontend/packages/kubevirt-plugin/src/plugin.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import * as _ from 'lodash';
 import {
   Plugin,
@@ -9,14 +10,20 @@ import {
   ModelDefinition,
   RoutePage,
   DashboardsOverviewHealthURLSubsystem,
+  DashboardsOverviewInventoryItem,
+  DashboardsInventoryItemGroup,
 } from '@console/plugin-sdk';
-import { TemplateModel } from '@console/internal/models';
+import { TemplateModel, PodModel } from '@console/internal/models';
 
 import * as models from './models';
 import { VMTemplateYAMLTemplates, VirtualMachineYAMLTemplates } from './models/templates';
+import { getKubevirtHealthState } from './components/dashboards-page/overview-dashboard/health';
+import {
+  getVMStatusGroups,
+  VMOffGroupIcon,
+} from './components/dashboards-page/overview-dashboard/inventory';
 
 import './style.scss';
-import { getKubevirtHealthState } from './components/dashboards-page/overview-dashboard/health';
 
 type ConsumedExtensions =
   | ResourceNSNavItem
@@ -26,7 +33,9 @@ type ConsumedExtensions =
   | YAMLTemplate
   | ModelDefinition
   | RoutePage
-  | DashboardsOverviewHealthURLSubsystem<any>;
+  | DashboardsOverviewHealthURLSubsystem<any>
+  | DashboardsOverviewInventoryItem
+  | DashboardsInventoryItemGroup;
 
 const FLAG_KUBEVIRT = 'KUBEVIRT';
 
@@ -148,6 +157,38 @@ const plugin: Plugin<ConsumedExtensions> = [
       healthHandler: getKubevirtHealthState,
     },
   },
+  {
+    type: 'Dashboards/Overview/Inventory/Item',
+    properties: {
+      resource: {
+        isList: true,
+        kind: models.VirtualMachineModel.kind,
+        prop: 'vms',
+      },
+      additionalResources: [
+        {
+          isList: true,
+          kind: PodModel.kind,
+          prop: 'pods',
+        },
+        {
+          isList: true,
+          kind: models.VirtualMachineInstanceMigrationModel.kind,
+          prop: 'migrations',
+        },
+      ],
+      model: models.VirtualMachineModel,
+      mapper: getVMStatusGroups,
+      useAbbr: true,
+    },
+  },
+  {
+    type: 'Dashboards/Inventory/Item/Group',
+    properties: {
+      id: 'vm-off',
+      icon: <VMOffGroupIcon />,
+    },
+  },
 ];
 
 export default plugin;