Merge pull request #778 from rszwajko/dynamicConcernEnum

Filter VMs based on concerns label

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -36,11 +36,13 @@
   "Cannot delete migration plan": "Cannot delete migration plan",
   "Cannot delete network mapping": "Cannot delete network mapping",
   "Cannot delete storage mapping": "Cannot delete storage mapping",
+  "Category": "Category",
   "Clear all filters": "Clear all filters",
   "Click the update credentials button to save your changes, button is disabled until a change is detected.": "Click the update credentials button to save your changes, button is disabled until a change is detected.",
   "Close": "Close",
   "Cluster": "Cluster",
   "Clusters": "Clusters",
+  "Concern": "Concern",
   "Concerns": "Concerns",
   "Conditions": "Conditions",
   "Connection Failed": "Connection Failed",

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesList.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common';
 
+import { concernFilter } from './utils/concernFilter';
 import { ProviderVirtualMachinesList, VmData } from './components';
 import { OVirtVirtualMachinesRow } from './OVirtVirtualMachinesRow';
 import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines';
@@ -26,12 +27,7 @@ export const oVirtVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
     label: t('Concerns'),
     isVisible: true,
     sortable: true,
-    filter: {
-      type: 'concerns',
-      primary: true,
-      placeholderLabel: t('Concerns'),
-      values: EnumToTuple({ Critical: 'Critical', Warning: 'Warning', Information: 'Information' }),
-    },
+    filter: concernFilter(t),
   },
   {
     resourceFieldId: 'cluster',

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesList.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common';
 
+import { concernFilter } from './utils/concernFilter';
 import { getVmPowerState } from './utils/helpers/getVmPowerState';
 import { ProviderVirtualMachinesList, VmData } from './components';
 import { OpenStackVirtualMachinesRow } from './OpenStackVirtualMachinesRow';
@@ -26,12 +27,7 @@ export const openStackVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
     label: t('Concerns'),
     isVisible: true,
     sortable: true,
-    filter: {
-      type: 'concerns',
-      primary: true,
-      placeholderLabel: t('Concerns'),
-      values: EnumToTuple({ Critical: 'Critical', Warning: 'Warning', Information: 'Information' }),
-    },
+    filter: concernFilter(t),
   },
   {
     resourceFieldId: 'hostID',

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OvaVirtualMachinesList.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common';
+import { ResourceFieldFactory } from '@kubev2v/common';
 
+import { concernFilter } from './utils/concernFilter';
 import { ProviderVirtualMachinesList } from './components';
 import { OvaVirtualMachinesRow } from './OvaVirtualMachinesRow';
 import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines';
@@ -25,12 +26,7 @@ export const ovaVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
     label: t('Concerns'),
     isVisible: true,
     sortable: true,
-    filter: {
-      type: 'concerns',
-      primary: true,
-      placeholderLabel: t('Concerns'),
-      values: EnumToTuple({ Critical: 'Critical', Warning: 'Warning', Information: 'Information' }),
-    },
+    filter: concernFilter(t),
   },
   {
     resourceFieldId: 'ovaPath',

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesList.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { EnumToTuple, ResourceFieldFactory } from '@kubev2v/common';
 
+import { concernFilter } from './utils/concernFilter';
 import { ProviderVirtualMachinesList, VmData } from './components';
 import { ProviderVirtualMachinesProps } from './ProviderVirtualMachines';
 import { getVmPowerState } from './utils';
@@ -26,12 +27,7 @@ export const vSphereVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
     label: t('Concerns'),
     isVisible: true,
     sortable: true,
-    filter: {
-      type: 'concerns',
-      primary: true,
-      placeholderLabel: t('Concerns'),
-      values: EnumToTuple({ Critical: 'Critical', Warning: 'Warning', Information: 'Information' }),
-    },
+    filter: concernFilter(t),
   },
   {
     resourceFieldId: 'isTemplate',

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx

@@ -5,10 +5,10 @@ import { ProviderData } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import {
-  EnumFilter,
   loadUserSettings,
   ResourceFieldFactory,
   RowProps,
+  SearchableGroupedEnumFilter,
   ValueMatcher,
 } from '@kubev2v/common';
 import { Concern } from '@kubev2v/types';
@@ -52,7 +52,7 @@ export const ProviderVirtualMachinesList: React.FC<ProviderVirtualMachinesListPr
       title={t('Virtual Machines')}
       userSettings={userSettings}
       extraSupportedFilters={{
-        concerns: EnumFilter,
+        concerns: SearchableGroupedEnumFilter,
       }}
       extraSupportedMatchers={[concernsMatcher]}
     />
@@ -62,5 +62,6 @@ export const ProviderVirtualMachinesList: React.FC<ProviderVirtualMachinesListPr
 const concernsMatcher: ValueMatcher = {
   filterType: 'concerns',
   matchValue: (concerns: Concern[]) => (filter: string) =>
-    Array.isArray(concerns) && concerns.some(({ category }) => category === filter),
+    Array.isArray(concerns) &&
+    concerns.some(({ category, label }) => category === filter || label === filter),
 };

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/utils/concernFilter.ts

@@ -0,0 +1,29 @@
+import { EnumToTuple, EnumValue } from '@kubev2v/common';
+
+export const concernFilter = (t: (string) => string) => ({
+  type: 'concerns',
+  primary: true,
+  placeholderLabel: t('Concerns'),
+  groups: [
+    { groupId: 'category', label: t('Category') },
+    { groupId: 'label', label: t('Concern') },
+  ],
+  dynamicFilter: (items: { vm: { concerns: { label: string }[] } }[]) => ({
+    values: [
+      ...EnumToTuple({
+        Critical: 'Critical',
+        Warning: 'Warning',
+        Information: 'Information',
+      }).map(({ id, label }: EnumValue): EnumValue => ({ id, label, groupId: 'category' })),
+      ...Array.from(
+        new Set(
+          items
+            .filter((item) => item?.vm?.concerns?.length)
+            .flatMap((item) => item.vm.concerns)
+            .map((concern) => concern.label),
+        ),
+      ) // at this point the list contains unique strings that can be used as ID
+        .map((label: string): EnumValue => ({ groupId: 'label', id: label, label })),
+    ],
+  }),
+});