From 1a42086f25b7bc7348d5b0ff8a63f07088459bce Mon Sep 17 00:00:00 2001 From: Adhitya Mamallan Date: Thu, 16 Jan 2025 15:02:34 +0000 Subject: [PATCH 1/3] Fixes to date filter and datetime utils --- .../date-filter/date-filter.constants.ts | 10 +++++ src/components/date-filter/date-filter.tsx | 40 ++++++++++++++----- .../get-date-days-before-today.test.ts | 17 -------- .../get-timestamp-ns-from-iso.test.ts | 9 ----- .../datetime/get-date-days-before-today.ts | 5 --- .../datetime/get-timestamp-ns-from-iso.ts | 4 -- ...in-workflows-archival-start-days.config.ts | 3 ++ .../domain-workflows-archival-header.tsx | 10 +++-- ...omain-workflows-basic-start-days.config.ts | 3 ++ .../domain-workflows-basic-filters.tsx | 10 +++-- .../domains-page/helpers/get-all-domains.ts | 11 +++++ 11 files changed, 71 insertions(+), 51 deletions(-) delete mode 100644 src/utils/datetime/__tests__/get-date-days-before-today.test.ts delete mode 100644 src/utils/datetime/__tests__/get-timestamp-ns-from-iso.test.ts delete mode 100644 src/utils/datetime/get-date-days-before-today.ts delete mode 100644 src/utils/datetime/get-timestamp-ns-from-iso.ts create mode 100644 src/views/domain-workflows-archival/config/domain-workflows-archival-start-days.config.ts create mode 100644 src/views/domain-workflows-basic/config/domain-workflows-basic-start-days.config.ts diff --git a/src/components/date-filter/date-filter.constants.ts b/src/components/date-filter/date-filter.constants.ts index 7247f789f..44c706798 100644 --- a/src/components/date-filter/date-filter.constants.ts +++ b/src/components/date-filter/date-filter.constants.ts @@ -1 +1,11 @@ export const DATE_FORMAT = 'dd MMM yyyy, HH:mm:ss z'; + +export const QUICK_SELECT_OPTIONS = [ + { label: 'Last 5 minutes', durationSeconds: 5 * 60 }, + { label: 'Last 15 minutes', durationSeconds: 15 * 60 }, + { label: 'Last 1 hour', durationSeconds: 1 * 60 * 60 }, + { label: 'Last 6 hours', durationSeconds: 6 * 60 * 60 }, + { label: 'Last 12 hours', durationSeconds: 12 * 60 * 60 }, + { label: 'Last 1 day', durationSeconds: 1 * 24 * 60 * 60 }, + { label: 'Last 7 days', durationSeconds: 7 * 24 * 60 * 60 }, +] as const satisfies Array<{ label: string; durationSeconds: number }>; diff --git a/src/components/date-filter/date-filter.tsx b/src/components/date-filter/date-filter.tsx index be0332487..b0e75421c 100644 --- a/src/components/date-filter/date-filter.tsx +++ b/src/components/date-filter/date-filter.tsx @@ -5,7 +5,9 @@ import { DatePicker } from 'baseui/datepicker'; import { FormControl } from 'baseui/form-control'; import { SIZE } from 'baseui/input'; -import { DATE_FORMAT } from './date-filter.constants'; +import dayjs from '@/utils/datetime/dayjs'; + +import { DATE_FORMAT, QUICK_SELECT_OPTIONS } from './date-filter.constants'; import { overrides } from './date-filter.styles'; import { type Props } from './date-filter.types'; @@ -39,27 +41,45 @@ export default function DateFilter({ return; } setInternalDates(newDates); + if (newDates.length === 0) { onChangeDates({ start: undefined, end: undefined, }); - } else if (newDates.length === 2) { + } else if (newDates.length === 2 && newDates[0] && newDates[1]) { const [start, end] = newDates; - if (!start || !end) { - return; - } - onChangeDates({ start, end }); + onChangeDates({ + start, + end: + start.getTime() === end.getTime() + ? dayjs(start).endOf('day').toDate() + : end, + }); } }} onClose={() => { - if ( - internalDates.length !== 2 || - internalDates.some((date) => !date) - ) { + if (internalDates.some((date) => !date)) { resetDates(); + } else if (internalDates.length === 1 && internalDates[0]) { + onChangeDates({ + start: internalDates[0], + end: dayjs(internalDates[0]).endOf('day').toDate(), + }); } }} + quickSelectOptions={QUICK_SELECT_OPTIONS.map( + ({ label, durationSeconds }) => { + const now = new Date(); + return { + id: label, + beginDate: dayjs(now) + .subtract(durationSeconds, 'seconds') + .toDate(), + endDate: now, + }; + } + )} placeholder={placeholder} formatString={DATE_FORMAT} size={SIZE.compact} diff --git a/src/utils/datetime/__tests__/get-date-days-before-today.test.ts b/src/utils/datetime/__tests__/get-date-days-before-today.test.ts deleted file mode 100644 index 9b04873fc..000000000 --- a/src/utils/datetime/__tests__/get-date-days-before-today.test.ts +++ /dev/null @@ -1,17 +0,0 @@ -import getDateDaysBeforeToday from '../get-date-days-before-today'; - -jest.useFakeTimers().setSystemTime(new Date('2023-05-25')); - -describe(getDateDaysBeforeToday.name, () => { - it('should return date 30 days before today', () => { - expect(getDateDaysBeforeToday(30)).toEqual( - new Date('2023-04-25T00:00:00.000Z') - ); - }); - - it('should return date 0 days before today', () => { - expect(getDateDaysBeforeToday(0)).toEqual( - new Date('2023-05-25T00:00:00.000Z') - ); - }); -}); diff --git a/src/utils/datetime/__tests__/get-timestamp-ns-from-iso.test.ts b/src/utils/datetime/__tests__/get-timestamp-ns-from-iso.test.ts deleted file mode 100644 index 78101ff69..000000000 --- a/src/utils/datetime/__tests__/get-timestamp-ns-from-iso.test.ts +++ /dev/null @@ -1,9 +0,0 @@ -import getTimestampNsFromISO from '../get-timestamp-ns-from-iso'; - -describe('getTimestampNsFromISO', () => { - it('should get the timestamp in nanoseconds given the ISO 8601 date', () => { - expect(getTimestampNsFromISO('2024-04-02T22:15:00.000Z')).toEqual( - '1712096100000000000' - ); - }); -}); diff --git a/src/utils/datetime/get-date-days-before-today.ts b/src/utils/datetime/get-date-days-before-today.ts deleted file mode 100644 index 7b37668c5..000000000 --- a/src/utils/datetime/get-date-days-before-today.ts +++ /dev/null @@ -1,5 +0,0 @@ -export default function getDateDaysBeforeToday(n: number) { - const today = new Date(); - if (n === 0) return today; - return new Date(today.setDate(today.getDate() - n)); -} diff --git a/src/utils/datetime/get-timestamp-ns-from-iso.ts b/src/utils/datetime/get-timestamp-ns-from-iso.ts deleted file mode 100644 index 387db05e9..000000000 --- a/src/utils/datetime/get-timestamp-ns-from-iso.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default function getTimestampNsFromISO(isoDate: string): string { - const date = new Date(isoDate); - return date.getTime() + '000000'; -} diff --git a/src/views/domain-workflows-archival/config/domain-workflows-archival-start-days.config.ts b/src/views/domain-workflows-archival/config/domain-workflows-archival-start-days.config.ts new file mode 100644 index 000000000..3c2b191c9 --- /dev/null +++ b/src/views/domain-workflows-archival/config/domain-workflows-archival-start-days.config.ts @@ -0,0 +1,3 @@ +const DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG = 10; + +export default DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG; diff --git a/src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.tsx b/src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.tsx index d0fb1be34..efda9c311 100644 --- a/src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.tsx +++ b/src/views/domain-workflows-archival/domain-workflows-archival-header/domain-workflows-archival-header.tsx @@ -2,13 +2,14 @@ import { useEffect } from 'react'; import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params'; -import getDateDaysBeforeToday from '@/utils/datetime/get-date-days-before-today'; +import dayjs from '@/utils/datetime/dayjs'; import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config'; import useListWorkflows from '@/views/shared/hooks/use-list-workflows'; import WorkflowsHeader from '@/views/shared/workflows-header/workflows-header'; import domainWorkflowsArchivalFiltersConfig from '../config/domain-workflows-archival-filters.config'; import DOMAIN_WORKFLOWS_ARCHIVAL_PAGE_SIZE from '../config/domain-workflows-archival-page-size.config'; +import DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG from '../config/domain-workflows-archival-start-days.config'; import { type Props } from './domain-workflows-archival-header.types'; @@ -40,9 +41,12 @@ export default function DomainWorkflowsArchivalHeader({ !queryParams.timeRangeStartArchival && !queryParams.timeRangeEndArchival ) { + const now = dayjs(new Date()); setQueryParams({ - timeRangeStartArchival: getDateDaysBeforeToday(10).toISOString(), - timeRangeEndArchival: getDateDaysBeforeToday(0).toISOString(), + timeRangeStartArchival: now + .subtract(DOMAIN_WORKFLOWS_ARCHIVAL_START_DAYS_CONFIG, 'days') + .toISOString(), + timeRangeEndArchival: now.toISOString(), }); } }, [ diff --git a/src/views/domain-workflows-basic/config/domain-workflows-basic-start-days.config.ts b/src/views/domain-workflows-basic/config/domain-workflows-basic-start-days.config.ts new file mode 100644 index 000000000..0719cdfe9 --- /dev/null +++ b/src/views/domain-workflows-basic/config/domain-workflows-basic-start-days.config.ts @@ -0,0 +1,3 @@ +const DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG = 30; + +export default DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG; diff --git a/src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.tsx b/src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.tsx index 343eeadc5..01f0e115f 100644 --- a/src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.tsx +++ b/src/views/domain-workflows-basic/domain-workflows-basic-filters/domain-workflows-basic-filters.tsx @@ -5,11 +5,12 @@ import usePageFilters from '@/components/page-filters/hooks/use-page-filters'; import PageFiltersFields from '@/components/page-filters/page-filters-fields/page-filters-fields'; import PageFiltersSearch from '@/components/page-filters/page-filters-search/page-filters-search'; import PageFiltersToggle from '@/components/page-filters/page-filters-toggle/page-filters-toggle'; -import getDateDaysBeforeToday from '@/utils/datetime/get-date-days-before-today'; +import dayjs from '@/utils/datetime/dayjs'; import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config'; import domainWorkflowsBasicFiltersConfig from '../config/domain-workflows-basic-filters.config'; import DOMAIN_WORKFLOWS_BASIC_SEARCH_DEBOUNCE_MS from '../config/domain-workflows-basic-search-debounce-ms.config'; +import DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG from '../config/domain-workflows-basic-start-days.config'; import { styled } from './domain-workflows-basic-filters.styles'; @@ -24,9 +25,12 @@ export default function DomainWorkflowsBasicFilters() { useEffect(() => { if (!queryParams.timeRangeStart && !queryParams.timeRangeEnd) { + const now = dayjs(new Date()); setQueryParams({ - timeRangeStart: getDateDaysBeforeToday(30).toISOString(), - timeRangeEnd: getDateDaysBeforeToday(0).toISOString(), + timeRangeStart: now + .subtract(DOMAIN_WORKFLOWS_BASIC_START_DAYS_CONFIG, 'days') + .toISOString(), + timeRangeEnd: now.toISOString(), }); } }, [queryParams.timeRangeStart, queryParams.timeRangeEnd, setQueryParams]); diff --git a/src/views/domains-page/helpers/get-all-domains.ts b/src/views/domains-page/helpers/get-all-domains.ts index d1e12ca69..408593365 100644 --- a/src/views/domains-page/helpers/get-all-domains.ts +++ b/src/views/domains-page/helpers/get-all-domains.ts @@ -18,6 +18,17 @@ export const getAllDomains = async () => { .getClusterMethods(clusterName) .listDomains({ pageSize: MAX_DOMAINS_TO_FETCH }) .then(({ domains }) => { + logger.info( + { + domains: domains + .filter( + (d) => + d.visibilityArchivalStatus === 'ARCHIVAL_STATUS_ENABLED' + ) + .map((d) => d.name), + }, + 'Domains with archival enabled' + ); if (domains.length >= MAX_DOMAINS_TO_FETCH - 100) { logger.warn( { From 3d6b64768a3a8a8e8cbc7c4aa776d12f7e181bee Mon Sep 17 00:00:00 2001 From: Adhitya Mamallan Date: Thu, 16 Jan 2025 16:25:29 +0100 Subject: [PATCH 2/3] Fix unit tests --- .../__tests__/date-filter.test.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/components/date-filter/__tests__/date-filter.test.tsx b/src/components/date-filter/__tests__/date-filter.test.tsx index 961a7f605..5f6ee202d 100644 --- a/src/components/date-filter/__tests__/date-filter.test.tsx +++ b/src/components/date-filter/__tests__/date-filter.test.tsx @@ -50,10 +50,8 @@ describe(DateFilter.name, () => { }); }); - it('resets to previous date when one date is selected and then the modal is closed', () => { - const { mockOnChangeDates } = setup({ - overrides: mockDateOverrides, - }); + it('sets start and end time accordingly when one date is selected and then the modal is closed', () => { + const { mockOnChangeDates } = setup({}); const datePicker = screen.getByPlaceholderText('Mock placeholder'); act(() => { @@ -76,13 +74,13 @@ describe(DateFilter.name, () => { fireEvent.keyDown(datePicker, { keyCode: 9 }); }); - expect(datePicker).toHaveValue( - '23 May 2023, 00:00 +00 – 24 May 2023, 00:00 +00' - ); - expect(mockOnChangeDates).not.toHaveBeenCalled(); + expect(mockOnChangeDates).toHaveBeenCalledWith({ + start: new Date('2023-05-13T00:00:00.000Z'), + end: new Date('2023-05-13T23:59:59.999Z'), + }); }); - it('resets to empty state when one date is selected and then the modal is closed', () => { + it('sets start and end time accordingly when the same date is selected', () => { const { mockOnChangeDates } = setup({}); const datePicker = screen.getByPlaceholderText('Mock placeholder'); @@ -102,12 +100,20 @@ describe(DateFilter.name, () => { 'Selected date is 13 May 2023, 00:00 +00. Select the second date.' ); + screen.debug(); + + const timeRangeEndLabel = screen.getByLabelText( + "Selected start date. Saturday, May 13th 2023. It's available." + ); + act(() => { - fireEvent.keyDown(datePicker, { keyCode: 9 }); + fireEvent.click(timeRangeEndLabel); }); - expect(datePicker).toHaveValue(''); - expect(mockOnChangeDates).not.toHaveBeenCalled(); + expect(mockOnChangeDates).toHaveBeenCalledWith({ + start: new Date('2023-05-13T00:00:00.000Z'), + end: new Date('2023-05-13T23:59:59.999Z'), + }); }); it('clears the date when the clear button is clicked', () => { From f9fad9ff376d4868d51d8a5ea58e3454e3e381d2 Mon Sep 17 00:00:00 2001 From: Adhitya Mamallan Date: Thu, 16 Jan 2025 16:32:11 +0100 Subject: [PATCH 3/3] Remove log --- src/views/domains-page/helpers/get-all-domains.ts | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/views/domains-page/helpers/get-all-domains.ts b/src/views/domains-page/helpers/get-all-domains.ts index 408593365..d1e12ca69 100644 --- a/src/views/domains-page/helpers/get-all-domains.ts +++ b/src/views/domains-page/helpers/get-all-domains.ts @@ -18,17 +18,6 @@ export const getAllDomains = async () => { .getClusterMethods(clusterName) .listDomains({ pageSize: MAX_DOMAINS_TO_FETCH }) .then(({ domains }) => { - logger.info( - { - domains: domains - .filter( - (d) => - d.visibilityArchivalStatus === 'ARCHIVAL_STATUS_ENABLED' - ) - .map((d) => d.name), - }, - 'Domains with archival enabled' - ); if (domains.length >= MAX_DOMAINS_TO_FETCH - 100) { logger.warn( {