diff --git a/x-pack/plugins/data_usage/common/utils.test.ts b/x-pack/plugins/data_usage/common/utils.test.ts index fc6b158c1caa0..c7ff57069e44e 100644 --- a/x-pack/plugins/data_usage/common/utils.test.ts +++ b/x-pack/plugins/data_usage/common/utils.test.ts @@ -10,7 +10,6 @@ import { isDateRangeValid } from './utils'; describe('isDateRangeValid', () => { describe('Valid ranges', () => { it.each([ - ['both start and end date is `now`', { start: 'now', end: 'now' }], ['start date is `now-10s` and end date is `now`', { start: 'now-10s', end: 'now' }], ['bounded within the min and max date range', { start: 'now-8d', end: 'now-4s' }], ])('should return true if %s', (_, { start, end }) => { @@ -20,8 +19,10 @@ describe('isDateRangeValid', () => { describe('Invalid ranges', () => { it.each([ + ['both start and end date is `now`', { start: 'now', end: 'now' }], ['starts before the min date', { start: 'now-11d', end: 'now-5s' }], - ['ends after the max date', { start: 'now-9d', end: 'now+2s' }], + ['ends after the max date in seconds', { start: 'now-9d', end: 'now+2s' }], + ['ends after the max date in days', { start: 'now-6d', end: 'now+6d' }], [ 'end date is before the start date even when both are within min and max date range', { start: 'now-3s', end: 'now-10s' }, diff --git a/x-pack/plugins/data_usage/common/utils.ts b/x-pack/plugins/data_usage/common/utils.ts index 3fd7240153d4d..2fe683dc8310d 100644 --- a/x-pack/plugins/data_usage/common/utils.ts +++ b/x-pack/plugins/data_usage/common/utils.ts @@ -19,6 +19,7 @@ export const DEFAULT_DATE_RANGE_OPTIONS = Object.freeze({ recentlyUsedDateRanges: [], }); +export type ParsedDate = ReturnType; export const momentDateParser = (date: string) => dateMath.parse(date); export const transformToUTCtime = ({ start, @@ -50,6 +51,6 @@ export const isDateRangeValid = ({ start, end }: { start: string; end: string }) return ( startDate.isSameOrAfter(minDate, 's') && endDate.isSameOrBefore(maxDate, 's') && - startDate <= endDate + startDate.isBefore(endDate, 's') ); }; diff --git a/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.tsx b/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.tsx index efaa779dfe3c9..ce7926656974e 100644 --- a/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.tsx +++ b/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.tsx @@ -17,11 +17,7 @@ import { PLUGIN_NAME } from '../../translations'; import { useGetDataUsageMetrics } from '../../hooks/use_get_usage_metrics'; import { useGetDataUsageDataStreams } from '../../hooks/use_get_data_streams'; import { useDataUsageMetricsUrlParams } from '../hooks/use_charts_url_params'; -import { - DEFAULT_DATE_RANGE_OPTIONS, - transformToUTCtime, - isDateRangeValid, -} from '../../../common/utils'; +import { DEFAULT_DATE_RANGE_OPTIONS, transformToUTCtime } from '../../../common/utils'; import { useDateRangePicker } from '../hooks/use_date_picker'; import { ChartFilters, ChartFiltersProps } from './filters/charts_filters'; import { ChartsLoading } from './charts_loading'; @@ -114,16 +110,8 @@ export const DataUsageMetrics = memo( })); }, [metricTypesFromUrl, dataStreamsFromUrl, startDateFromUrl, endDateFromUrl]); - const { dateRangePickerState, onRefreshChange, onTimeChange } = useDateRangePicker(); - - const isValidDateRange = useMemo( - () => - isDateRangeValid({ - start: dateRangePickerState.startDate, - end: dateRangePickerState.endDate, - }), - [dateRangePickerState.endDate, dateRangePickerState.startDate] - ); + const { dateRangePickerState, isValidDateRange, onRefreshChange, onTimeChange } = + useDateRangePicker(); const enableFetchUsageMetricsData = useMemo( () => @@ -243,6 +231,7 @@ export const DataUsageMetrics = memo( dateRangePickerState={dateRangePickerState} isDataLoading={isFetchingDataStreams} isUpdateDisabled={!enableFetchUsageMetricsData} + isValidDateRange={isValidDateRange} onClick={refetchDataUsageMetrics} onRefresh={onRefresh} onRefreshChange={onRefreshChange} diff --git a/x-pack/plugins/data_usage/public/app/components/filters/charts_filter.tsx b/x-pack/plugins/data_usage/public/app/components/filters/charts_filter.tsx index 2e60561f3ed29..0b6b2b0abf1b6 100644 --- a/x-pack/plugins/data_usage/public/app/components/filters/charts_filter.tsx +++ b/x-pack/plugins/data_usage/public/app/components/filters/charts_filter.tsx @@ -107,7 +107,12 @@ export const ChartsFilter = memo( const sortedDataStreamsFilterOptions = useMemo(() => { if (shouldPinSelectedDataStreams() || areDataStreamsSelectedOnMount) { // pin checked items to the top - return orderBy('checked', 'asc', items); + const sorted = orderBy( + 'checked', + 'asc', + items.filter((item) => !item.isGroupLabel) + ); + return [...items.filter((item) => item.isGroupLabel), ...sorted]; } // return options as are for other filters return items; diff --git a/x-pack/plugins/data_usage/public/app/components/filters/charts_filters.tsx b/x-pack/plugins/data_usage/public/app/components/filters/charts_filters.tsx index 0d0b07764d17e..f53854a7acac9 100644 --- a/x-pack/plugins/data_usage/public/app/components/filters/charts_filters.tsx +++ b/x-pack/plugins/data_usage/public/app/components/filters/charts_filters.tsx @@ -6,28 +6,27 @@ */ import React, { memo, useCallback, useMemo } from 'react'; -import { EuiFilterGroup, EuiFlexGroup, EuiFlexItem, EuiSuperUpdateButton } from '@elastic/eui'; -import type { - DurationRange, - OnRefreshChangeProps, -} from '@elastic/eui/src/components/date_picker/types'; +import { + EuiFilterGroup, + EuiFlexGroup, + EuiFlexItem, + EuiSuperUpdateButton, + EuiText, + EuiTextAlign, +} from '@elastic/eui'; + import { useTestIdGenerator } from '../../../hooks/use_test_id_generator'; import { useGetDataUsageMetrics } from '../../../hooks/use_get_usage_metrics'; -import { DateRangePickerValues, UsageMetricsDateRangePicker } from './date_picker'; +import { type UsageMetricsDateRangePickerProps, UsageMetricsDateRangePicker } from './date_picker'; import { ChartsFilter, ChartsFilterProps } from './charts_filter'; import { FilterName } from '../../hooks'; -export interface ChartFiltersProps { - dateRangePickerState: DateRangePickerValues; - isDataLoading: boolean; +export interface ChartFiltersProps extends UsageMetricsDateRangePickerProps { isUpdateDisabled: boolean; + isValidDateRange: boolean; filterOptions: Record; - onRefresh: () => void; - onRefreshChange: (evt: OnRefreshChangeProps) => void; - onTimeChange: ({ start, end }: DurationRange) => void; onClick: ReturnType['refetch']; showMetricsTypesFilter?: boolean; - 'data-test-subj'?: string; } export const ChartFilters = memo( @@ -35,6 +34,7 @@ export const ChartFilters = memo( dateRangePickerState, isDataLoading, isUpdateDisabled, + isValidDateRange, filterOptions, onClick, onRefresh, @@ -74,6 +74,13 @@ export const ChartFilters = memo( onTimeChange={onTimeChange} data-test-subj={dataTestSubj} /> + {!isValidDateRange && ( + + +

The date range should be within 10 days from now.

+ + + )} void; diff --git a/x-pack/plugins/data_usage/public/app/hooks/use_date_picker.tsx b/x-pack/plugins/data_usage/public/app/hooks/use_date_picker.tsx index 6b7e6f792b69b..ce5c70584946d 100644 --- a/x-pack/plugins/data_usage/public/app/hooks/use_date_picker.tsx +++ b/x-pack/plugins/data_usage/public/app/hooks/use_date_picker.tsx @@ -5,14 +5,14 @@ * 2.0. */ -import { useCallback, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import type { DurationRange, OnRefreshChangeProps, } from '@elastic/eui/src/components/date_picker/types'; import { useDataUsageMetricsUrlParams } from './use_charts_url_params'; import { DateRangePickerValues } from '../components/filters/date_picker'; -import { DEFAULT_DATE_RANGE_OPTIONS } from '../../../common/utils'; +import { DEFAULT_DATE_RANGE_OPTIONS, isDateRangeValid } from '../../../common/utils'; export const useDateRangePicker = () => { const { @@ -85,5 +85,14 @@ export const useDateRangePicker = () => { ] ); - return { dateRangePickerState, onRefreshChange, onTimeChange }; + const isValidDateRange = useMemo( + () => + isDateRangeValid({ + start: dateRangePickerState.startDate, + end: dateRangePickerState.endDate, + }), + [dateRangePickerState.endDate, dateRangePickerState.startDate] + ); + + return { dateRangePickerState, isValidDateRange, onRefreshChange, onTimeChange }; };