Merge pull request #1506 from jpuzz0/MTV-2016-migration-type-column

[MTV-2016] Add 'Migration type' column to plan list table

Author: avivtur

packages/common/src/components/Filter/GroupedEnumFilter.tsx

@@ -10,6 +10,7 @@ import {
   SelectOption,
   ToolbarFilter,
 } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
 
 import { FilterTypeProps } from './types';
 
@@ -40,6 +41,8 @@ export const GroupedEnumFilter = ({
   supportedGroups = [],
   placeholderLabel,
   showFilter = true,
+  showFilterIcon,
+  hasMultipleResources,
 }: FilterTypeProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -52,23 +55,54 @@ export const GroupedEnumFilter = ({
     supportedEnumValues.map(({ label, ...rest }) => [label, { label, ...rest }]),
   );
 
-  const deleteGroup = (groupId: string): void =>
+  const deleteGroup = (groupId: string): void => {
+    if (hasMultipleResources) {
+      return onSelectedEnumIdsChange([], groupId);
+    }
+
     onSelectedEnumIdsChange(
-      selectedEnumIds
-        .filter((id) => id2enum[id])
-        .filter((enumId) => id2enum[enumId].groupId !== groupId),
+      selectedEnumIds.filter((id) => id2enum[id] && id2enum[id].groupId !== groupId),
     );
+  };
+
+  const deleteFilter = (id: string): void => {
+    if (hasMultipleResources) {
+      onSelectedEnumIdsChange(
+        selectedEnumIds.filter(
+          (selectedId) =>
+            id2enum[selectedId]?.resourceFieldId === id2enum[id]?.resourceFieldId &&
+            selectedId !== id,
+        ),
+        id2enum[id].resourceFieldId,
+      );
+    }
 
-  const deleteFilter = (id: string): void =>
     onSelectedEnumIdsChange(
-      selectedEnumIds.filter((id) => id2enum[id]).filter((enumId) => enumId !== id),
+      selectedEnumIds.filter((id) => id2enum[id] && id !== id),
+      id2enum[id].resourceFieldId,
     );
+  };
 
   const hasFilter = (id: string): boolean =>
     !!id2enum[id] && !!selectedEnumIds.find((enumId) => enumId === id);
 
   const addFilter = (id: string): void => {
-    onSelectedEnumIdsChange([...selectedEnumIds.filter((id) => id2enum[id]), id]);
+    if (hasMultipleResources) {
+      onSelectedEnumIdsChange(
+        [
+          ...selectedEnumIds.filter(
+            (selectedId) => id2enum[selectedId]?.resourceFieldId === id2enum[id]?.resourceFieldId,
+          ),
+          id,
+        ],
+        id2enum[id].resourceFieldId,
+      );
+    }
+
+    onSelectedEnumIdsChange(
+      [...selectedEnumIds.filter((id) => id2enum[id]), id],
+      id2enum[id].resourceFieldId,
+    );
   };
 
   const onSelect = (
@@ -85,7 +119,13 @@ export const GroupedEnumFilter = ({
   };
 
   const toggle = (toggleRef: Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+      {...(showFilterIcon && { icon: <FilterIcon /> })}
+    >
       {placeholderLabel}
       {selectedEnumIds.length > 0 && <Badge isRead>{selectedEnumIds.length}</Badge>}
     </MenuToggle>

packages/common/src/components/Filter/types.ts

@@ -12,7 +12,7 @@ export interface FilterTypeProps {
    * Filter apply handler. Implementation of filter values is filter specific.
    * @param values list of selected filter values
    */
-  onFilterUpdate(values: string[]);
+  onFilterUpdate(values: string[], resourceFieldId?: string);
   /**
    * A text located inside the filter field or next to it.
    */
@@ -43,6 +43,10 @@ export interface FilterTypeProps {
   resolvedLanguage: string;
   /** Text that explains how to use the filter. */
   helperText?: string | React.ReactNode;
+  /** Toggles visibility of FilterIcon within the Select input field. */
+  showFilterIcon?: boolean;
+  /** Used for grouped enum filters that deal with groups pointing to different resources. */
+  hasMultipleResources?: boolean;
 }
 
 export interface InlineFilter {

packages/common/src/components/FilterGroup/FilterFromDef.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { FilterDef } from '../../utils';
 import { FilterTypeProps } from '../Filter';
@@ -17,7 +17,7 @@ interface FilterFromDefProps {
 }
 
 export const FilterFromDef = ({
-  resourceFieldId: id,
+  resourceFieldId,
   label,
   filterDef: def,
   selectedFilters,
@@ -26,26 +26,49 @@ export const FilterFromDef = ({
   showFilter = true,
   resolvedLanguage,
 }: FilterFromDefProps) => {
-  return (
-    FilterType && (
-      <FilterType
-        key={id}
-        filterId={id}
-        onFilterUpdate={(values) =>
-          onFilterUpdate({
-            ...selectedFilters,
-            [id]: values,
-          })
+  const [filterId, setFilterId] = useState(resourceFieldId);
+
+  const selectedFilterValues = useMemo(() => {
+    const groupSelectedIds = def.groups?.map((group) => group.groupId);
+
+    if (!resourceFieldId && groupSelectedIds.length > 0) {
+      return Object.entries(selectedFilters).reduce((acc, [selectedId, selectedValues]) => {
+        if (groupSelectedIds.includes(selectedId)) {
+          acc = acc.length > 0 ? acc.concat(selectedValues) : selectedValues;
         }
-        placeholderLabel={def.placeholderLabel}
-        selectedFilters={selectedFilters[id] ?? []}
-        title={def?.fieldLabel ?? label}
-        showFilter={showFilter}
-        supportedValues={def.values}
-        supportedGroups={def.groups}
-        resolvedLanguage={resolvedLanguage}
-        helperText={def.helperText}
-      />
-    )
-  );
+
+        return acc;
+      }, []);
+    }
+
+    return selectedFilters[filterId] ?? [];
+  }, [def.groups, filterId, resourceFieldId, selectedFilters]);
+
+  const setSelectedFilters = (values: string[], selectedResourceId?: string) => {
+    if (selectedResourceId) {
+      setFilterId(selectedResourceId);
+    }
+
+    onFilterUpdate({
+      ...selectedFilters,
+      [selectedResourceId || resourceFieldId]: values,
+    });
+  };
+
+  return !def.isHidden && FilterType ? (
+    <FilterType
+      filterId={filterId}
+      onFilterUpdate={setSelectedFilters}
+      placeholderLabel={def.placeholderLabel}
+      selectedFilters={selectedFilterValues}
+      title={def?.fieldLabel ?? label}
+      showFilter={showFilter}
+      supportedValues={def.values}
+      supportedGroups={def.groups}
+      resolvedLanguage={resolvedLanguage}
+      helperText={def.helperText}
+      showFilterIcon={def.showFilterIcon}
+      hasMultipleResources={!resourceFieldId && def.groups.length > 0}
+    />
+  ) : null;
 };

packages/common/src/utils/types.ts

@@ -10,11 +10,20 @@ export interface EnumValue {
   id: string;
   groupId?: string;
   label: string;
+  resourceFieldId?: string;
+}
+
+export enum FilterDefType {
+  FreeText = 'freetext',
+  Enum = 'enum',
+  GroupedEnum = 'groupedEnum',
+  DateRange = 'dateRange',
+  Slider = 'slider',
 }
 
 export interface FilterDef {
   type: string;
-  placeholderLabel: string;
+  placeholderLabel?: string;
   values?: EnumValue[];
   fieldLabel?: string;
   primary?: boolean;
@@ -25,14 +34,16 @@ export interface FilterDef {
   defaultValues?: string[];
   helperText?: string | React.ReactNode;
   dynamicFilter?: (items: unknown[]) => Partial<FilterDef>;
+  isHidden?: boolean;
+  showFilterIcon?: boolean;
 }
 
 type OpenApiJsonPath = string | ((resourceData: unknown) => unknown);
 
 export interface ResourceField {
-  resourceFieldId: string;
+  resourceFieldId: string | null;
   jsonPath?: OpenApiJsonPath;
-  label: string;
+  label: string | null;
   // visibility status, can change in time
   isVisible?: boolean;
   isIdentity?: boolean;

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

@@ -123,6 +123,7 @@
   "Click to unselect.": "Click to unselect.",
   "Cluster": "Cluster",
   "Clusters": "Clusters",
+  "Cold": "Cold",
   "Completed {{completed}} of {{total}} {{name}} tasks": "Completed {{completed}} of {{total}} {{name}} tasks",
   "Completed at": "Completed at",
   "Concern": "Concern",
@@ -230,6 +231,7 @@
   "False": "False",
   "Features": "Features",
   "Fetch certificate from URL": "Fetch certificate from URL",
+  "Filter": "Filter",
   "Filter by cluster": "Filter by cluster",
   "Filter by endpoint": "Filter by endpoint",
   "Filter by features": "Filter by features",

packages/forklift-console-plugin/src/modules/NetworkMaps/actions/NetworkMapActionsDropdown.tsx

@@ -64,7 +64,7 @@ const NetworkMapActionsKebabDropdown_: FC<NetworkMapActionsDropdownProps> = ({ d
 export const NetworkMapActionsDropdown: FC<NetworkMapActionsDropdownProps> = (props) => (
   <ModalHOC>
     <Flex flex={{ default: 'flex_3' }} flexWrap={{ default: 'nowrap' }}>
-      <FlexItem grow={{ default: 'grow' }}></FlexItem>
+      <FlexItem grow={{ default: 'grow' }} />
       <FlexItem align={{ default: 'alignRight' }}>
         <NetworkMapActionsKebabDropdown_ {...props} />
       </FlexItem>

packages/forklift-console-plugin/src/modules/Plans/utils/constants/migrationTypes.ts

@@ -0,0 +1,6 @@
+import { MigrationType } from '../types';
+
+export const migrationTypes: { id: MigrationType; label: MigrationType }[] = [
+  { id: MigrationType.Warm, label: MigrationType.Warm },
+  { id: MigrationType.Cold, label: MigrationType.Cold },
+];

packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getMigrationType.ts

@@ -0,0 +1,11 @@
+import { MigrationType, PlanData } from '../types';
+
+export const getMigrationType = (data: PlanData): MigrationType => {
+  const plan = data?.obj;
+
+  if (plan?.spec?.warm) {
+    return MigrationType.Warm;
+  }
+
+  return MigrationType.Cold;
+};

packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts

@@ -1,6 +1,7 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './anyValidationErrorExists';
 export * from './getMigrationPhase';
+export * from './getMigrationType';
 export * from './getMigrationVmsCounts';
 export * from './getPlanPhase';
 export * from './getPlanProgressVariant';

packages/forklift-console-plugin/src/modules/Plans/utils/types/MigrationType.ts

@@ -0,0 +1,4 @@
+export enum MigrationType {
+  Warm = 'Warm',
+  Cold = 'Cold',
+}

packages/forklift-console-plugin/src/modules/Plans/utils/types/index.ts

@@ -1,5 +1,6 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './MigrationPhase';
+export * from './MigrationType';
 export * from './PlanData';
 export * from './PlanPhase';
 // @endindex

packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/Plan/ActionsCell.tsx

@@ -10,7 +10,7 @@ import PlanVMActionsDropdown from './PlanVMActionsDropdown';
 const ActionsCell: FC<PlanVMsCellProps> = ({ data: vm }) => {
   return (
     <Flex flex={{ default: 'flex_3' }} flexWrap={{ default: 'nowrap' }}>
-      <FlexItem grow={{ default: 'grow' }}></FlexItem>
+      <FlexItem grow={{ default: 'grow' }} />
 
       <FlexItem align={{ default: 'alignRight' }}>
         <ModalHOC>

packages/forklift-console-plugin/src/modules/Plans/views/list/PlanRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { ConsoleTimestamp } from 'src/components';
 import { TableCell } from 'src/modules/Providers/utils';
 
@@ -10,12 +10,14 @@ import { PlanData } from '../../utils';
 import {
   ActionsCell,
   CellProps,
+  MigrationTypeCell,
   NamespaceCell,
   PlanCell,
   PlanStatusCell,
   ProviderLinkCell,
   VMsCell,
 } from './components';
+import { PlanTableResourceId } from './constants';
 
 export const PlanRow: React.FC<RowProps<PlanData>> = ({ resourceFields, resourceData }) => {
   return (
@@ -38,19 +40,22 @@ const renderTd = ({ resourceData, resourceFieldId, resourceFields }: RenderTdPro
   );
 };
 
-const cellRenderers: Record<string, React.FC<CellProps>> = {
-  ['name']: PlanCell,
-  ['namespace']: NamespaceCell,
-  ['migration-started']: (props: CellProps) => {
+const cellRenderers: Partial<Record<PlanTableResourceId, FC<CellProps>>> = {
+  [PlanTableResourceId.Name]: PlanCell,
+  [PlanTableResourceId.Namespace]: NamespaceCell,
+  [PlanTableResourceId.MigrationStarted]: (props: CellProps) => {
     const value = getResourceFieldValue(props.data, props.fieldId, props.fields);
     return <ConsoleTimestamp timestamp={value} />;
   },
-  ['destination']: ProviderLinkCell,
-  ['source']: ProviderLinkCell,
-  ['phase']: PlanStatusCell,
-  ['vms']: VMsCell,
-  ['description']: ({ data }: CellProps) => <TableCell>{data?.obj?.spec?.description}</TableCell>,
-  ['actions']: ActionsCell,
+  [PlanTableResourceId.Destination]: ProviderLinkCell,
+  [PlanTableResourceId.Source]: ProviderLinkCell,
+  [PlanTableResourceId.Phase]: PlanStatusCell,
+  [PlanTableResourceId.MigrationType]: MigrationTypeCell,
+  [PlanTableResourceId.Vms]: VMsCell,
+  [PlanTableResourceId.Description]: ({ data }: CellProps) => (
+    <TableCell>{data?.obj?.spec?.description}</TableCell>
+  ),
+  [PlanTableResourceId.Actions]: ActionsCell,
 };
 
 interface RenderTdProps {