diff --git a/frontend/packages/kubevirt-plugin/package.json b/frontend/packages/kubevirt-plugin/package.json index fbd3ffd432a2..92c44d91ac7e 100644 --- a/frontend/packages/kubevirt-plugin/package.json +++ b/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" } } diff --git a/frontend/packages/kubevirt-plugin/src/components/dashboards-page/overview-dashboard/inventory.scss b/frontend/packages/kubevirt-plugin/src/components/dashboards-page/overview-dashboard/inventory.scss new file mode 100644 index 000000000000..207bb5c5473f --- /dev/null +++ b/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; +} diff --git a/frontend/packages/kubevirt-plugin/src/components/dashboards-page/overview-dashboard/inventory.tsx b/frontend/packages/kubevirt-plugin/src/components/dashboards-page/overview-dashboard/inventory.tsx new file mode 100644 index 000000000000..5b8fa9921b87 --- /dev/null +++ b/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<{}> = () => ( + +); diff --git a/frontend/packages/kubevirt-plugin/src/plugin.ts b/frontend/packages/kubevirt-plugin/src/plugin.tsx similarity index 78% rename from frontend/packages/kubevirt-plugin/src/plugin.ts rename to frontend/packages/kubevirt-plugin/src/plugin.tsx index 00226dc5df91..d0220deaae4e 100644 --- a/frontend/packages/kubevirt-plugin/src/plugin.ts +++ b/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; + | DashboardsOverviewHealthURLSubsystem + | DashboardsOverviewInventoryItem + | DashboardsInventoryItemGroup; const FLAG_KUBEVIRT = 'KUBEVIRT'; @@ -148,6 +157,38 @@ const plugin: Plugin = [ 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: , + }, + }, ]; export default plugin;