Skip to content

Commit

Permalink
Add date filter
Browse files Browse the repository at this point in the history
Signed-off-by: Radoslaw Szwajkowski <[email protected]>
  • Loading branch information
rszwajko committed Oct 3, 2023
1 parent e83ffe5 commit 66ca13c
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 1 deletion.
73 changes: 73 additions & 0 deletions packages/common/src/components/Filter/DateFilter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
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**:<br>
* 1) selectedFilters - dates in YYYY-MM-DD format (ISO date format).<br>
* 2) onFilterUpdate - accepts the list of dates.<br>
*
* [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github">
* <font color="green">View component source on GitHub</font>](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: string, date: Date) => {
// TODO runtime types different then declared
// date is parsed string
if (DateTime.fromISO(date).isValid) {
const targetDate = DateTime.fromISO(date).toISODate();
setDate(targetDate);
onFilterUpdate([...validFilters.filter((d) => d !== targetDate), targetDate]);
}
};

return (
<ToolbarFilter
key={filterId}
chips={validFilters}
deleteChip={(category, option) => clearSingleDate(option)}
deleteChipGroup={() => onFilterUpdate([])}
categoryName={title}
showToolbarItem={showFilter}
>
<InputGroup>
<DatePicker
value={DateTime.fromISO(date).toISODate()}
dateFormat={(date) => 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'}
/>
</InputGroup>
</ToolbarFilter>
);
};
1 change: 1 addition & 0 deletions packages/common/src/components/Filter/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// @index(['./*', /__/g], f => `export * from '${f.path}';`)
export * from './DateFilter';
export * from './EnumFilter';
export * from './FreetextFilter';
export * from './GroupedEnumFilter';
Expand Down
9 changes: 8 additions & 1 deletion packages/common/src/components/FilterGroup/matchers.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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,
Expand All @@ -106,9 +111,11 @@ export const defaultValueMatchers: ValueMatcher[] = [
enumMatcher,
groupedEnumMatcher,
sliderMatcher,
dateMatcher,
];

export const defaultSupportedFilters: Record<string, FilterRenderer> = {
date: DateFilter,
enum: EnumFilter,
freetext: FreetextFilter,
groupedEnum: GroupedEnumFilter,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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</2>.": "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</2>.",
"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</2>.": "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</2>.",
"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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ const cellCreator: Record<string, (props: CellProps) => JSX.Element> = {
<VirtualMachineIcon /> {value}
</RouterLink>
),
[C.MIGRATION_STARTED]: ({ value }: CellProps) => <>{value}</>,
};

const PlanRow = ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@ exports[`Plan rows plantest-01 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -224,6 +230,10 @@ exports[`Plan rows plantest-02 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
/>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -408,6 +418,12 @@ exports[`Plan rows plantest-03 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -609,6 +625,12 @@ exports[`Plan rows plantest-04 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -810,6 +832,12 @@ exports[`Plan rows plantest-05 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -968,6 +996,10 @@ exports[`Plan rows plantest-06 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
/>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -1152,6 +1184,12 @@ exports[`Plan rows plantest-07 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -1308,6 +1346,12 @@ exports[`Plan rows plantest-08 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -1465,6 +1509,12 @@ exports[`Plan rows plantest-09 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -1646,6 +1696,12 @@ exports[`Plan rows plantest-10 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down Expand Up @@ -1847,6 +1903,12 @@ exports[`Plan rows plantest-11 1`] = `
name: openshift-migration, gvk: ~~, ns: undefined
</div>
</td>
<td
class=""
data-label="Migration started"
>
2020-10-10T14:04:10Z
</td>
<td
class=""
data-label="Source provider"
Expand Down

0 comments on commit 66ca13c

Please sign in to comment.