From 9eb8c88a71704b628792107cba0ec906d16a97c9 Mon Sep 17 00:00:00 2001 From: Radoslaw Szwajkowski Date: Fri, 8 Sep 2023 19:07:16 +0200 Subject: [PATCH] Render VMs power state as icon with tooltip Signed-off-by: Radoslaw Szwajkowski --- .../en/plugin__forklift-console-plugin.json | 8 +++ .../OVirtVirtualMachinesList.tsx | 8 ++- .../OVirtVirtualMachinesRow.tsx | 10 +++- .../OpenShiftVirtualMachinesList.tsx | 18 +++++- .../OpenShiftVirtualMachinesRow.tsx | 9 ++- .../OpenStackVirtualMachinesList.tsx | 8 ++- .../OpenStackVirtualMachinesRow.tsx | 7 ++- .../VirtualMachines/OvaVirtualMachinesRow.tsx | 7 ++- .../VSphereVirtualMachinesList.tsx | 14 +++-- .../VSphereVirtualMachinesRow.tsx | 16 ++++- .../components/PowerStateCellRenderer.tsx | 28 +++++++++ .../VirtualMachines/components/VMCellProps.ts | 3 +- .../tabs/VirtualMachines/components/index.ts | 1 + .../utils/helpers/getVmPowerState.ts | 58 +++++++++++++++++++ .../VirtualMachines/utils/helpers/index.ts | 1 + 15 files changed, 173 insertions(+), 23 deletions(-) create mode 100644 packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/PowerStateCellRenderer.tsx create mode 100644 packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getVmPowerState.ts diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json index a75a136a2..c89b8c1a5 100644 --- a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json +++ b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json @@ -123,6 +123,7 @@ "Filter by namespace": "Filter by namespace", "Filter by network": "Filter by network", "Filter by path": "Filter by path", + "Filter by power state": "Filter by power state", "Filter by status": "Filter by status", "Filter by tenant": "Filter by tenant", "Flavor": "Flavor", @@ -227,6 +228,8 @@ "Number of storage volumes in cluster": "Number of storage volumes in cluster", "Number of virtual machines in cluster": "Number of virtual machines in cluster", "Number of virtual machines in OVA files": "Number of virtual machines in OVA files", + "Off": "Off", + "On": "On", "OpenShift cluster API endpoint. Empty may be used for the host provider.": "OpenShift cluster API endpoint. Empty may be used for the host provider.", "OpenStack domain for application credential credentials.": "OpenStack domain for application credential credentials.", "OpenStack domain for password credentials.": "OpenStack domain for password credentials.", @@ -265,6 +268,9 @@ "Please enter URL for the kubernetes API server, if empty URL default to this cluster.": "Please enter URL for the kubernetes API server, if empty URL default to this cluster.", "Please enter URL for vSphere REST APIs server.": "Please enter URL for vSphere REST APIs server.", "Pod network": "Pod network", + "Power state": "Power state", + "Powered off": "Powered off", + "Powered on": "Powered on", "Precopy interval (minutes)": "Precopy interval (minutes)", "Product": "Product", "Project": "Project", @@ -369,6 +375,8 @@ "Unable to retrieve data": "Unable to retrieve data", "Undefined": "Undefined", "Unique Kubernetes resource name identifier": "Unique Kubernetes resource name identifier", + "Unknown": "Unknown", + "Unknown power state": "Unknown power state", "Unsupported provider type": "Unsupported provider type", "Update credentials": "Update credentials", "Updated": "Updated", diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesList.tsx index 13c579521..788f25166 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesList.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesList.tsx @@ -2,9 +2,10 @@ import React from 'react'; import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common'; -import { ProviderVirtualMachinesList } from './components/ProviderVirtualMachinesList'; +import { ProviderVirtualMachinesList, VmData } from './components/ProviderVirtualMachinesList'; import { OVirtVirtualMachinesRow } from './OVirtVirtualMachinesRow'; import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines'; +import { getVmPowerState } from './utils'; export const oVirtVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [ { @@ -70,13 +71,14 @@ export const oVirtVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [ }, { resourceFieldId: 'status', - jsonPath: '$.vm.status', + jsonPath: (data) => getVmPowerState('ovirt', (data as VmData)?.vm), label: t('Status'), isVisible: true, isIdentity: false, filter: { - type: 'freetext', + type: 'enum', placeholderLabel: t('Filter by status'), + values: EnumToTuple({ off: 'Off', on: 'On', unknown: 'Unknown' }), }, sortable: true, }, diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesRow.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesRow.tsx index 3a3099754..76d8a8314 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesRow.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesRow.tsx @@ -5,6 +5,7 @@ import { ResourceField, RowProps } from '@kubev2v/common'; import { OVirtVM } from '@kubev2v/types'; import { Td, Tr } from '@patternfly/react-table'; +import { PowerStateCellRenderer } from './components/PowerStateCellRenderer'; import { VMCellProps, VMConcernsCellRenderer, VMNameCellRenderer } from './components'; export interface VmData { @@ -19,7 +20,12 @@ const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdPro const CellRenderer = cellRenderers?.[fieldId] ?? (() => <>); return ( - + ); }; @@ -36,7 +42,7 @@ const cellRenderers: Record> = { host: ({ data }) => {(data?.vm as OVirtVM)?.host}, cluster: ({ data }) => {(data?.vm as OVirtVM)?.cluster}, path: ({ data }) => {(data?.vm as OVirtVM)?.path}, - status: ({ data }) => {(data?.vm as OVirtVM)?.status}, + status: PowerStateCellRenderer, description: ({ data }) => {(data?.vm as OVirtVM)?.description}, }; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesList.tsx index 3e908e78d..8ec5f90e1 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesList.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesList.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { ResourceFieldFactory } from '@kubev2v/common'; +import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common'; -import { ProviderVirtualMachinesList } from './components/ProviderVirtualMachinesList'; +import { ProviderVirtualMachinesList, VmData } from './components/ProviderVirtualMachinesList'; +import { getVmPowerState } from './utils/helpers/getVmPowerState'; import { OpenShiftVirtualMachinesRow } from './OpenShiftVirtualMachinesRow'; import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines'; @@ -19,6 +20,19 @@ const openShiftVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [ }, sortable: true, }, + { + resourceFieldId: 'status', + jsonPath: (data) => getVmPowerState('openshift', (data as VmData)?.vm), + label: t('Status'), + isVisible: true, + isIdentity: false, + filter: { + type: 'enum', + placeholderLabel: t('Filter by status'), + values: EnumToTuple({ off: 'Off', on: 'On', unknown: 'Unknown' }), + }, + sortable: true, + }, ]; export const OpenShiftVirtualMachinesList: React.FC = ({ diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesRow.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesRow.tsx index 42608a1fc..69de51dae 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesRow.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesRow.tsx @@ -3,10 +3,12 @@ import React from 'react'; import { ResourceField, RowProps } from '@kubev2v/common'; import { Td, Tr } from '@patternfly/react-table'; +import { PowerStateCellRenderer } from './components/PowerStateCellRenderer'; import { VMCellProps, VmData, VMNameCellRenderer } from './components'; const cellRenderers: Record> = { name: VMNameCellRenderer, + status: PowerStateCellRenderer, }; const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdProps) => { @@ -15,7 +17,12 @@ const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdPro const CellRenderer = cellRenderers?.[fieldId] ?? (() => <>); return ( - + ); }; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesList.tsx index 6fe4271a6..2991401bb 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesList.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesList.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common'; -import { ProviderVirtualMachinesList } from './components/ProviderVirtualMachinesList'; +import { ProviderVirtualMachinesList, VmData } from './components/ProviderVirtualMachinesList'; +import { getVmPowerState } from './utils/helpers/getVmPowerState'; import { OpenStackVirtualMachinesRow } from './OpenStackVirtualMachinesRow'; import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines'; @@ -58,13 +59,14 @@ export const openStackVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [ }, { resourceFieldId: 'status', - jsonPath: '$.vm.status', + jsonPath: (data) => getVmPowerState('openstack', (data as VmData)?.vm), label: t('Status'), isVisible: true, isIdentity: false, filter: { - type: 'freetext', + type: 'enum', placeholderLabel: t('Filter by status'), + values: EnumToTuple({ off: 'Off', on: 'On', unknown: 'Unknown' }), }, sortable: true, }, diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesRow.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesRow.tsx index a07b3d51d..8b126fba6 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesRow.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesRow.tsx @@ -13,7 +13,12 @@ const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdPro const CellRenderer = cellRenderers?.[fieldId] ?? (() => <>); return ( - + ); }; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OvaVirtualMachinesRow.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OvaVirtualMachinesRow.tsx index 45bb65ebb..9b31e1f84 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OvaVirtualMachinesRow.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OvaVirtualMachinesRow.tsx @@ -19,7 +19,12 @@ const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdPro const CellRenderer = cellRenderers?.[fieldId] ?? (() => <>); return ( - + ); }; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesList.tsx index 2413a605c..d5fb42788 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesList.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesList.tsx @@ -2,8 +2,9 @@ import React from 'react'; import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common'; -import { ProviderVirtualMachinesList } from './components/ProviderVirtualMachinesList'; +import { ProviderVirtualMachinesList, VmData } from './components/ProviderVirtualMachinesList'; import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines'; +import { getVmPowerState } from './utils'; import { VSphereVirtualMachinesRow } from './VSphereVirtualMachinesRow'; export const vSphereVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [ @@ -65,14 +66,15 @@ export const vSphereVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [ sortable: true, }, { - resourceFieldId: 'status', - jsonPath: '$.vm.powerState', - label: t('Status'), + resourceFieldId: 'powerState', + jsonPath: (data) => getVmPowerState('vsphere', (data as VmData)?.vm), + label: t('Power state'), isVisible: true, isIdentity: false, filter: { - type: 'freetext', - placeholderLabel: t('Filter by status'), + type: 'enum', + placeholderLabel: t('Filter by power state'), + values: EnumToTuple({ off: 'Off', on: 'On', unknown: 'Unknown' }), }, sortable: true, }, diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesRow.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesRow.tsx index 3f1c571a4..e6cffe848 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesRow.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesRow.tsx @@ -5,7 +5,12 @@ import { ResourceField, RowProps } from '@kubev2v/common'; import { VSphereVM } from '@kubev2v/types'; import { Td, Tr } from '@patternfly/react-table'; -import { VMCellProps, VMConcernsCellRenderer, VMNameCellRenderer } from './components'; +import { + PowerStateCellRenderer, + VMCellProps, + VMConcernsCellRenderer, + VMNameCellRenderer, +} from './components'; export interface VmData { vm: VSphereVM; @@ -19,7 +24,12 @@ const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdPro const CellRenderer = cellRenderers?.[fieldId] ?? (() => <>); return ( - + ); }; @@ -38,7 +48,7 @@ const cellRenderers: Record> = { {Boolean((data?.vm as VSphereVM)?.isTemplate).toString()} ), path: ({ data }) => {(data?.vm as VSphereVM)?.path}, - status: ({ data }) => {(data?.vm as VSphereVM)?.powerState}, + powerState: PowerStateCellRenderer, }; export const VSphereVirtualMachinesRow: React.FC> = ({ diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/PowerStateCellRenderer.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/PowerStateCellRenderer.tsx new file mode 100644 index 000000000..5f61bfd69 --- /dev/null +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/PowerStateCellRenderer.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { TableIconCell } from 'src/modules/Providers/utils'; +import { useForkliftTranslation } from 'src/utils/i18n'; + +import { Tooltip } from '@patternfly/react-core'; +import { OffIcon, PowerOffIcon, UnknownIcon } from '@patternfly/react-icons'; + +import { getVmPowerState } from '../utils'; +import { PowerState } from '../utils/helpers/getVmPowerState'; + +import { VMCellProps } from './VMCellProps'; + +export const PowerStateCellRenderer: React.FC = ({ data, providerType }) => { + const { t } = useForkliftTranslation(); + const powerState = getVmPowerState(providerType, data?.vm); + const states: { [key in PowerState]: [JSX.Element, string, string] } = { + on: [, t('Powered on'), t('On')], + off: [, t('Powered off'), t('Off')], + unknown: [, t('Unknown power state'), t('Unknown')], + }; + const [icon, tooltipText, shortText] = states[powerState] || states.unknown; + + return ( + {icon}}> + {shortText} + + ); +}; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMCellProps.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMCellProps.ts index c0a6492ee..3b62952ea 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMCellProps.ts +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/VMCellProps.ts @@ -1,5 +1,5 @@ import { ResourceField } from '@kubev2v/common'; -import { ProviderVirtualMachine } from '@kubev2v/types'; +import { ProviderType, ProviderVirtualMachine } from '@kubev2v/types'; export interface VmData { vm: ProviderVirtualMachine; @@ -8,6 +8,7 @@ export interface VmData { } export interface VMCellProps { + providerType: ProviderType; data: VmData; fieldId: string; fields: ResourceField[]; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts index bfa04fb19..f374d52b9 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/index.ts @@ -1,4 +1,5 @@ // @index(['./*', /style/g], f => `export * from '${f.path}';`) +export * from './PowerStateCellRenderer'; export * from './VMCellProps'; export * from './VMConcernsCellRenderer'; export * from './VMNameCellRenderer'; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getVmPowerState.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getVmPowerState.ts new file mode 100644 index 000000000..aa0c262bb --- /dev/null +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/getVmPowerState.ts @@ -0,0 +1,58 @@ +import { + OpenshiftVM, + OpenstackVM, + OVirtVM, + ProviderType, + ProviderVirtualMachine, + VSphereVM, +} from '@kubev2v/types'; + +export type PowerState = 'on' | 'off' | 'unknown'; + +// moved from packages/legacy/src/common/components/VMNameWithPowerState.tsx +export const getVmPowerState = ( + providerType: ProviderType, + vm?: ProviderVirtualMachine, +): PowerState => { + let powerStatus: PowerState = 'unknown'; + if (!vm) return powerStatus; + switch (providerType) { + case 'ovirt': { + if ((vm as OVirtVM).status === 'up') powerStatus = 'on'; + if ((vm as OVirtVM).status === 'down') powerStatus = 'off'; + break; + } + case 'vsphere': { + if ((vm as VSphereVM).powerState === 'poweredOn') powerStatus = 'on'; + if ((vm as VSphereVM).powerState === 'poweredOff') powerStatus = 'off'; + break; + } + case 'openstack': { + const status = (vm as OpenstackVM).status; + if (status === 'ACTIVE') { + powerStatus = 'on'; + } + if (status === 'SHUTOFF') { + powerStatus = 'off'; + } + break; + } + case 'openshift': { + const status = (vm as OpenshiftVM)?.object?.status?.printableStatus; + if (status === 'Running') { + powerStatus = 'on'; + } else { + powerStatus = 'off'; + } + break; + } + case 'ova': { + powerStatus = 'off'; + break; + } + default: { + powerStatus = 'unknown'; + } + } + return powerStatus; +}; diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts index 07e829de1..266cbc91d 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts +++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/helpers/index.ts @@ -1,3 +1,4 @@ // @index(['./*', /style/g], f => `export * from '${f.path}';`) export * from './getHighestPriorityConcern'; +export * from './getVmPowerState'; // @endindex