display invalid date range error

elastic · Dec 9, 2024 · 9a901f6 · 9a901f6
1 parent fc2a98a
commit 9a901f6
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 36 deletions.
diff --git 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
@@ -19,6 +19,7 @@ export const DEFAULT_DATE_RANGE_OPTIONS = Object.freeze({
   recentlyUsedDateRanges: [],
 });
 
+export type ParsedDate = ReturnType<typeof momentDateParser>;
 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
@@ -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
@@ -107,7 +107,12 @@ export const ChartsFilter = memo<ChartsFilterProps>(
     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
@@ -6,35 +6,35 @@
  */
 
 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<FilterName, ChartsFilterProps['filterOptions']>;
-  onRefresh: () => void;
-  onRefreshChange: (evt: OnRefreshChangeProps) => void;
-  onTimeChange: ({ start, end }: DurationRange) => void;
   onClick: ReturnType<typeof useGetDataUsageMetrics>['refetch'];
   showMetricsTypesFilter?: boolean;
-  'data-test-subj'?: string;
 }
 
 export const ChartFilters = memo<ChartFiltersProps>(
   ({
     dateRangePickerState,
     isDataLoading,
     isUpdateDisabled,
+    isValidDateRange,
     filterOptions,
     onClick,
     onRefresh,
@@ -74,6 +74,13 @@ export const ChartFilters = memo<ChartFiltersProps>(
             onTimeChange={onTimeChange}
             data-test-subj={dataTestSubj}
           />
+          {!isValidDateRange && (
+            <EuiText color="danger" size="s">
+              <EuiTextAlign textAlign="center">
+                <p>The date range should be within 10 days from now.</p>
+              </EuiTextAlign>
+            </EuiText>
+          )}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiSuperUpdateButton

diff --git a/x-pack/plugins/data_usage/public/app/components/filters/date_picker.tsx b/x-pack/plugins/data_usage/public/app/components/filters/date_picker.tsx
@@ -28,7 +28,7 @@ export interface DateRangePickerValues {
   recentlyUsedDateRanges: EuiSuperDatePickerRecentRange[];
 }
 
-interface UsageMetricsDateRangePickerProps {
+export interface UsageMetricsDateRangePickerProps {
   dateRangePickerState: DateRangePickerValues;
   isDataLoading: boolean;
   onRefresh: () => 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
@@ -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 };
 };