diff --git a/packages/common/src/components/Filter/DateFilter.tsx b/packages/common/src/components/Filter/DateFilter.tsx new file mode 100644 index 000000000..c183828ba --- /dev/null +++ b/packages/common/src/components/Filter/DateFilter.tsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react'; +import { DateTime } from 'luxon'; + +import { DatePicker, InputGroup, ToolbarFilter } from '@patternfly/react-core'; + +import { FilterTypeProps } from './types'; + +/** + * This Filter type enables selecting a single date (a day). + * + * **FilterTypeProps are interpreted as follows**:
+ * 1) selectedFilters - dates in YYYY-MM-DD format (ISO date format).
+ * 2) onFilterUpdate - accepts the list of dates.
+ * + * [ + * View component source on GitHub](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/Filter/DateFilter.tsx) + */ +export const DateFilter = ({ + selectedFilters = [], + onFilterUpdate, + title, + filterId, + placeholderLabel, + showFilter = true, +}: FilterTypeProps) => { + const validFilters = + selectedFilters + ?.map((str) => DateTime.fromISO(str)) + ?.filter((dt: DateTime) => dt.isValid()) + ?.map((dt: DateTime) => dt.toISODate()) ?? []; + + // internal state - stored as ISO date string (no time) + const [date, setDate] = useState(DateTime.now().toISODate()); + + const clearSingleDate = (option) => { + console.warn('clearSingle ', option); + onFilterUpdate([...validFilters.filter((d) => d !== option)]); + }; + + const onDateChange = (inputDate) => { + if (DateTime.fromISO(inputDate).isValid()) { + const targetDate = DateTime.fromISO(inputDate).toISODate(); + setDate(targetDate); + onFilterUpdate([...validFilters.filter((d) => d !== targetDate), targetDate]); + } + }; + + return ( + clearSingleDate(option)} + deleteChipGroup={() => onFilterUpdate([])} + categoryName={title} + showToolbarItem={showFilter} + > + + DateTime.fromJSDate(date).toISODate()} + dateParse={(str) => DateTime.fromISO(str).toJSDate()} + onChange={onDateChange} + aria-label={'Date'} + buttonAriaLabel={'Toggle date picker'} + placeholder={placeholderLabel} + invalidFormatText={'Invalid date format. The correct format is AA-AA-AA'} + /> + + + ); +}; diff --git a/packages/common/src/components/Filter/index.ts b/packages/common/src/components/Filter/index.ts index 334f6f06f..78ffce26c 100644 --- a/packages/common/src/components/Filter/index.ts +++ b/packages/common/src/components/Filter/index.ts @@ -1,4 +1,5 @@ // @index(['./*', /__/g], f => `export * from '${f.path}';`) +export * from './DateFilter'; export * from './EnumFilter'; export * from './FreetextFilter'; export * from './GroupedEnumFilter'; diff --git a/packages/common/src/components/FilterGroup/matchers.ts b/packages/common/src/components/FilterGroup/matchers.ts index 8ed9ad518..b555892ab 100644 --- a/packages/common/src/components/FilterGroup/matchers.ts +++ b/packages/common/src/components/FilterGroup/matchers.ts @@ -1,7 +1,7 @@ import jsonpath from 'jsonpath'; import { ResourceField } from '../../utils'; -import { EnumFilter, FreetextFilter, GroupedEnumFilter, SwitchFilter } from '../Filter'; +import { DateFilter, EnumFilter, FreetextFilter, GroupedEnumFilter, SwitchFilter } from '../Filter'; import { FilterRenderer, ValueMatcher } from './types'; @@ -96,6 +96,11 @@ const groupedEnumMatcher = { matchValue: enumMatcher.matchValue, }; +const dateMatcher = { + filterType: 'date', + matchValue: enumMatcher.matchValue, +}; + const sliderMatcher = { filterType: 'slider', matchValue: (value: string) => (filter: string) => Boolean(value).toString() === filter || !value, @@ -106,9 +111,11 @@ export const defaultValueMatchers: ValueMatcher[] = [ enumMatcher, groupedEnumMatcher, sliderMatcher, + dateMatcher, ]; export const defaultSupportedFilters: Record = { + date: DateFilter, enum: EnumFilter, freetext: FreetextFilter, groupedEnum: GroupedEnumFilter, 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 68d60dd63..025743d02 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 @@ -180,6 +180,7 @@ "Migration networks maps are used to map network interfaces between source and target workloads.": "Migration networks maps are used to map network interfaces between source and target workloads.", "Migration plans are used to plan migration or virtualization workloads from source providers to target providers.": "Migration plans are used to plan migration or virtualization workloads from source providers to target providers.", "Migration plans are used to plan migration or virtualization workloads from source providers to target providers. At least one source and one target provider must be available in order to create a migration plan, <2>Learn more.": "Migration plans are used to plan migration or virtualization workloads from source providers to target providers. At least one source and one target provider must be available in order to create a migration plan, <2>Learn more.", + "Migration started": "Migration started", "Migration storage maps are used to map storage interfaces between source and target workloads, at least one source and one target provider must be available in order to create a migration plan, <2>Learn more.": "Migration storage maps are used to map storage interfaces between source and target workloads, at least one source and one target provider must be available in order to create a migration plan, <2>Learn more.", "Migration storage maps are used to map storage interfaces between source and target workloads.": "Migration storage maps are used to map storage interfaces between source and target workloads.", "Migration Toolkit for Virtualization": "Migration Toolkit for Virtualization", diff --git a/packages/forklift-console-plugin/src/modules/Plans/PlanRow.tsx b/packages/forklift-console-plugin/src/modules/Plans/PlanRow.tsx index 37f556c3a..5783c5091 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/PlanRow.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/PlanRow.tsx @@ -192,6 +192,7 @@ const cellCreator: Record JSX.Element> = { {value} ), + [C.MIGRATION_STARTED]: ({ value }: CellProps) => <>{value}, }; const PlanRow = ({ diff --git a/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx index ce30e9865..2e967b232 100644 --- a/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx +++ b/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx @@ -43,6 +43,15 @@ export const fieldsMetadataFactory: ResourceFieldFactory = (t) => [ }, sortable: true, }, + { + resourceFieldId: C.MIGRATION_STARTED, + label: t('Migration started'), + isVisible: true, + filter: { + type: 'date', + placeholderLabel: 'YYYY-MM-DD', + }, + }, { resourceFieldId: C.SOURCE, label: t('Source provider'),