From 5495b3a812abf74f0e2eeae053f814dfb27cee8d Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Mon, 25 Nov 2024 10:30:13 +0100
Subject: [PATCH 01/17] fix select all for metrics filter

---
 .../data_usage/common/rest_types/usage_metrics.ts    | 12 ++++++++++++
 .../public/app/components/filters/charts_filter.tsx  |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/data_usage/common/rest_types/usage_metrics.ts b/x-pack/plugins/data_usage/common/rest_types/usage_metrics.ts
index ccc8158ecace7..07130c84b6fdf 100644
--- a/x-pack/plugins/data_usage/common/rest_types/usage_metrics.ts
+++ b/x-pack/plugins/data_usage/common/rest_types/usage_metrics.ts
@@ -39,6 +39,18 @@ export const METRIC_TYPE_API_VALUES_TO_UI_OPTIONS_MAP = Object.freeze<Record<Met
   search_rate: 'Search Rate',
 });
 
+export const METRIC_TYPE_UI_OPTIONS_VALUES_TO_API_MAP = Object.freeze<Record<string, MetricTypes>>({
+  'Data Retained in Storage': 'storage_retained',
+  'Data Ingested': 'ingest_rate',
+  'Search VCU': 'search_vcu',
+  'Ingest VCU': 'ingest_vcu',
+  'ML VCU': 'ml_vcu',
+  'Index Latency': 'index_latency',
+  'Index Rate': 'index_rate',
+  'Search Latency': 'search_latency',
+  'Search Rate': 'search_rate',
+});
+
 // type guard for MetricTypes
 export const isMetricType = (type: string): type is MetricTypes =>
   METRIC_TYPE_VALUES.includes(type as MetricTypes);
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 fcff6fc13f260..2e60561f3ed29 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
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { orderBy, findKey } from 'lodash/fp';
+import { orderBy } from 'lodash/fp';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { EuiPopoverTitle, EuiSelectable, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
-import { METRIC_TYPE_API_VALUES_TO_UI_OPTIONS_MAP } from '../../../../common/rest_types';
+import { METRIC_TYPE_UI_OPTIONS_VALUES_TO_API_MAP } from '../../../../common/rest_types';
 import { UX_LABELS } from '../../../translations';
 import { ChartsFilterPopover } from './charts_filter_popover';
 import { ToggleAllButton } from './toggle_all_button';
@@ -171,7 +171,7 @@ export const ChartsFilter = memo<ChartsFilterProps>(
       if (isMetricsFilter) {
         setUrlMetricTypesFilter(
           optionsToSelect
-            .map((option) => findKey(METRIC_TYPE_API_VALUES_TO_UI_OPTIONS_MAP, option))
+            .map((option) => METRIC_TYPE_UI_OPTIONS_VALUES_TO_API_MAP[option])
             .join(',')
         );
       }

From aa72841317d235d99a3379eedb219dc08961a3e6 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Mon, 25 Nov 2024 10:30:59 +0100
Subject: [PATCH 02/17] right align filters for wide screens

---
 .../public/app/components/filters/charts_filters.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 3b2142e0e3360..0ede618c77712 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
@@ -59,7 +59,8 @@ export const ChartFilters = memo<ChartFiltersProps>(
     const onClickRefreshButton = useCallback(() => onClick(), [onClick]);
 
     return (
-      <EuiFlexGroup responsive gutterSize="m">
+      <EuiFlexGroup responsive gutterSize="m" alignItems="center" justifyContent="flexEnd">
+        <EuiFlexItem grow={2} />
         <EuiFlexItem grow={1}>
           <EuiFilterGroup>{filters}</EuiFilterGroup>
         </EuiFlexItem>

From 1544ccf411f3288a76fa7904b31874ca4141077b Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Mon, 25 Nov 2024 17:13:36 +0100
Subject: [PATCH 03/17] disable refresh if no metric types or data streams

---
 .../public/app/components/data_usage_metrics.tsx          | 8 +++++++-
 .../public/app/components/filters/charts_filters.tsx      | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

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 d7d6417cf1444..1188e601d6541 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
@@ -107,6 +107,11 @@ export const DataUsageMetrics = memo(
       }));
     }, [metricTypesFromUrl, dataStreamsFromUrl]);
 
+    const enableFetchUsageMetricsData = useMemo(
+      () => metricsFilters.dataStreams.length > 0 && metricsFilters.metricTypes.length > 0,
+      [metricsFilters.dataStreams, metricsFilters.metricTypes]
+    );
+
     const { dateRangePickerState, onRefreshChange, onTimeChange } = useDateRangePicker();
 
     const {
@@ -123,7 +128,7 @@ export const DataUsageMetrics = memo(
       },
       {
         retry: false,
-        enabled: !!(metricsFilters.dataStreams.length && metricsFilters.metricTypes.length),
+        enabled: enableFetchUsageMetricsData,
       }
     );
 
@@ -206,6 +211,7 @@ export const DataUsageMetrics = memo(
           <ChartFilters
             dateRangePickerState={dateRangePickerState}
             isDataLoading={isFetchingDataStreams}
+            isUpdateDisabled={!enableFetchUsageMetricsData}
             onClick={refetchDataUsageMetrics}
             onRefresh={onRefresh}
             onRefreshChange={onRefreshChange}
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 0ede618c77712..52561aa9f26f0 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
@@ -20,6 +20,7 @@ import { FilterName } from '../../hooks';
 export interface ChartFiltersProps {
   dateRangePickerState: DateRangePickerValues;
   isDataLoading: boolean;
+  isUpdateDisabled: boolean;
   filterOptions: Record<FilterName, ChartsFilterProps['filterOptions']>;
   onRefresh: () => void;
   onRefreshChange: (evt: OnRefreshChangeProps) => void;
@@ -33,6 +34,7 @@ export const ChartFilters = memo<ChartFiltersProps>(
   ({
     dateRangePickerState,
     isDataLoading,
+    isUpdateDisabled,
     filterOptions,
     onClick,
     onRefresh,
@@ -79,6 +81,7 @@ export const ChartFilters = memo<ChartFiltersProps>(
             data-test-subj={getTestId('super-refresh-button')}
             fill={false}
             isLoading={isDataLoading}
+            isDisabled={isUpdateDisabled}
             onClick={onClickRefreshButton}
           />
         </EuiFlexItem>

From 74ffc38d5d5ffb78f9b9b55d96b900c765ac9b87 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Mon, 25 Nov 2024 18:05:23 +0100
Subject: [PATCH 04/17] treat date picker time as UTC time

---
 x-pack/plugins/data_usage/common/utils.ts      | 18 ++++++++++++++++++
 .../public/hooks/use_get_usage_metrics.ts      |  7 ++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/data_usage/common/utils.ts b/x-pack/plugins/data_usage/common/utils.ts
index ddd707b1134fd..40f74e568e754 100644
--- a/x-pack/plugins/data_usage/common/utils.ts
+++ b/x-pack/plugins/data_usage/common/utils.ts
@@ -6,5 +6,23 @@
  */
 
 import dateMath from '@kbn/datemath';
+
 export const dateParser = (date: string) => dateMath.parse(date)?.toISOString();
 export const momentDateParser = (date: string) => dateMath.parse(date);
+export const transformToUTCtime = ({
+  start,
+  end,
+  isISOString = false,
+}: {
+  start: string;
+  end: string;
+  isISOString?: boolean;
+}) => {
+  const utcOffset = momentDateParser(start)?.utcOffset() ?? 0;
+  const utcStart = momentDateParser(start)?.utc().add(utcOffset, 'm');
+  const utcEnd = momentDateParser(end)?.utc().add(utcOffset, 'm');
+  return {
+    start: isISOString ? utcStart?.toISOString() : momentDateParser(start),
+    end: isISOString ? utcEnd?.toISOString() : momentDateParser(end),
+  };
+};
diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
index da5f3004d0024..46f8aabcd18a9 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
@@ -8,7 +8,7 @@
 import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { IHttpFetchError } from '@kbn/core-http-browser';
-import { dateParser } from '../../common/utils';
+import { transformToUTCtime } from '../../common/utils';
 import { DATA_USAGE_METRICS_API_ROUTE } from '../../common';
 import type {
   UsageMetricsRequestBody,
@@ -27,6 +27,7 @@ export const useGetDataUsageMetrics = (
 ): UseQueryResult<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>> => {
   const { http } = useKibanaContextForPlugin().services;
 
+  const utcDateRange = transformToUTCtime({ start: body.from, end: body.to, isISOString: true });
   return useQuery<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>>({
     queryKey: ['get-data-usage-metrics', body],
     ...options,
@@ -37,8 +38,8 @@ export const useGetDataUsageMetrics = (
           signal,
           version: '1',
           body: JSON.stringify({
-            from: dateParser(body.from),
-            to: dateParser(body.to),
+            from: utcDateRange.start,
+            to: utcDateRange.end,
             metricTypes: body.metricTypes,
             dataStreams: body.dataStreams,
           }),

From e0c7ef196f9115ce20df757ddc59592040909015 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Mon, 25 Nov 2024 18:11:24 +0100
Subject: [PATCH 05/17] send date string as is to autoOps

---
 x-pack/plugins/data_usage/server/services/autoops_api.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/data_usage/server/services/autoops_api.ts b/x-pack/plugins/data_usage/server/services/autoops_api.ts
index 2ff824e04f6dd..8b8838e7da608 100644
--- a/x-pack/plugins/data_usage/server/services/autoops_api.ts
+++ b/x-pack/plugins/data_usage/server/services/autoops_api.ts
@@ -19,7 +19,6 @@ import {
   type UsageMetricsAutoOpsResponseSchemaBody,
   type UsageMetricsRequestBody,
 } from '../../common/rest_types';
-import { dateParser } from '../../common/utils';
 import { AutoOpsConfig } from '../types';
 import { AutoOpsError } from './errors';
 import { appContextService } from './app_context';
@@ -76,8 +75,8 @@ export class AutoOpsAPIService {
     const requestConfig: AxiosRequestConfig = {
       url: getAutoOpsAPIRequestUrl(autoopsConfig.api?.url, cloudSetup?.serverless.projectId),
       data: {
-        from: dateParser(requestBody.from),
-        to: dateParser(requestBody.to),
+        from: requestBody.from,
+        to: requestBody.to,
         size: requestBody.dataStreams.length,
         level: 'datastream',
         metric_types: requestBody.metricTypes,

From a4e3496ce88b0b863e4b13f308c9d6f7dd86c96f Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 11:26:29 +0100
Subject: [PATCH 06/17] validate date/time range before fetching data

---
 x-pack/plugins/data_usage/common/utils.ts     | 24 ++++++++++++++++++-
 .../app/components/data_usage_metrics.tsx     | 24 ++++++++++++++-----
 .../app/components/filters/date_picker.tsx    |  3 +--
 .../app/hooks/use_charts_url_params.tsx       |  2 +-
 .../public/app/hooks/use_date_picker.tsx      | 13 +---------
 5 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/data_usage/common/utils.ts b/x-pack/plugins/data_usage/common/utils.ts
index 40f74e568e754..61da3fac3c5bb 100644
--- a/x-pack/plugins/data_usage/common/utils.ts
+++ b/x-pack/plugins/data_usage/common/utils.ts
@@ -7,7 +7,18 @@
 
 import dateMath from '@kbn/datemath';
 
-export const dateParser = (date: string) => dateMath.parse(date)?.toISOString();
+export const DEFAULT_DATE_RANGE_OPTIONS = Object.freeze({
+  autoRefreshOptions: {
+    enabled: false,
+    duration: 10000,
+  },
+  startDate: 'now-24h/h',
+  endDate: 'now',
+  maxDate: 'now+1s',
+  minDate: 'now-9d',
+  recentlyUsedDateRanges: [],
+});
+
 export const momentDateParser = (date: string) => dateMath.parse(date);
 export const transformToUTCtime = ({
   start,
@@ -26,3 +37,14 @@ export const transformToUTCtime = ({
     end: isISOString ? utcEnd?.toISOString() : momentDateParser(end),
   };
 };
+
+export const validateDateRangeWithinMinMax = (start: string, end: string): boolean => {
+  const startDate = momentDateParser(start);
+  const endDate = momentDateParser(end);
+  if (!startDate || !endDate) {
+    return false;
+  }
+  const minDate = momentDateParser(DEFAULT_DATE_RANGE_OPTIONS.minDate);
+  const maxDate = momentDateParser(DEFAULT_DATE_RANGE_OPTIONS.maxDate);
+  return startDate.isSameOrAfter(minDate) && endDate.isSameOrBefore(maxDate);
+};
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 1188e601d6541..c7578f8167e59 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,7 +17,8 @@ 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, useDateRangePicker } from '../hooks/use_date_picker';
+import { DEFAULT_DATE_RANGE_OPTIONS, validateDateRangeWithinMinMax } from '../../../common/utils';
+import { useDateRangePicker } from '../hooks/use_date_picker';
 import { ChartFilters, ChartFiltersProps } from './filters/charts_filters';
 import { ChartsLoading } from './charts_loading';
 import { NoDataCallout } from './no_data_callout';
@@ -104,15 +105,26 @@ export const DataUsageMetrics = memo(
         ...prevState,
         metricTypes: metricTypesFromUrl?.length ? metricTypesFromUrl : prevState.metricTypes,
         dataStreams: dataStreamsFromUrl?.length ? dataStreamsFromUrl : prevState.dataStreams,
+        from: startDateFromUrl ?? prevState.from,
+        to: endDateFromUrl ?? prevState.to,
       }));
-    }, [metricTypesFromUrl, dataStreamsFromUrl]);
+    }, [metricTypesFromUrl, dataStreamsFromUrl, startDateFromUrl, endDateFromUrl]);
 
-    const enableFetchUsageMetricsData = useMemo(
-      () => metricsFilters.dataStreams.length > 0 && metricsFilters.metricTypes.length > 0,
-      [metricsFilters.dataStreams, metricsFilters.metricTypes]
+    const { dateRangePickerState, onRefreshChange, onTimeChange } = useDateRangePicker();
+
+    const isValidDateRange = useMemo(
+      () =>
+        validateDateRangeWithinMinMax(dateRangePickerState.startDate, dateRangePickerState.endDate),
+      [dateRangePickerState.endDate, dateRangePickerState.startDate]
     );
 
-    const { dateRangePickerState, onRefreshChange, onTimeChange } = useDateRangePicker();
+    const enableFetchUsageMetricsData = useMemo(
+      () =>
+        isValidDateRange &&
+        metricsFilters.dataStreams.length > 0 &&
+        metricsFilters.metricTypes.length > 0,
+      [isValidDateRange, metricsFilters.dataStreams, metricsFilters.metricTypes]
+    );
 
     const {
       error: errorFetchingDataUsageMetrics,
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
index 81ab435670f89..1b04587b4245d 100644
--- 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
@@ -15,9 +15,8 @@ import type {
   OnRefreshChangeProps,
 } from '@elastic/eui/src/components/date_picker/types';
 import { UI_SETTINGS } from '@kbn/data-plugin/common';
-import { momentDateParser } from '../../../../common/utils';
+import { momentDateParser, DEFAULT_DATE_RANGE_OPTIONS } from '../../../../common/utils';
 import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
-import { DEFAULT_DATE_RANGE_OPTIONS } from '../../hooks/use_date_picker';
 
 export interface DateRangePickerValues {
   autoRefreshOptions: {
diff --git a/x-pack/plugins/data_usage/public/app/hooks/use_charts_url_params.tsx b/x-pack/plugins/data_usage/public/app/hooks/use_charts_url_params.tsx
index 3a1ba7dc1de62..37e1fdc5d1ab1 100644
--- a/x-pack/plugins/data_usage/public/app/hooks/use_charts_url_params.tsx
+++ b/x-pack/plugins/data_usage/public/app/hooks/use_charts_url_params.tsx
@@ -8,7 +8,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { type MetricTypes, isMetricType } from '../../../common/rest_types';
 import { useUrlParams } from '../../hooks/use_url_params';
-import { DEFAULT_DATE_RANGE_OPTIONS } from './use_date_picker';
+import { DEFAULT_DATE_RANGE_OPTIONS } from '../../../common/utils';
 
 interface UrlParamsDataUsageMetricsFilters {
   metricTypes: string;
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 f4d198461f733..6b7e6f792b69b 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
@@ -12,18 +12,7 @@ import type {
 } from '@elastic/eui/src/components/date_picker/types';
 import { useDataUsageMetricsUrlParams } from './use_charts_url_params';
 import { DateRangePickerValues } from '../components/filters/date_picker';
-
-export const DEFAULT_DATE_RANGE_OPTIONS = Object.freeze({
-  autoRefreshOptions: {
-    enabled: false,
-    duration: 10000,
-  },
-  startDate: 'now-24h/h',
-  endDate: 'now',
-  maxDate: 'now+1s',
-  minDate: 'now-9d',
-  recentlyUsedDateRanges: [],
-});
+import { DEFAULT_DATE_RANGE_OPTIONS } from '../../../common/utils';
 
 export const useDateRangePicker = () => {
   const {

From 19a0051abfc49a4c50f44a66d92b08a1abc0845d Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 12:46:39 +0100
Subject: [PATCH 07/17] fix test

---
 .../components/data_usage_metrics.test.tsx    | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.test.tsx b/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.test.tsx
index 91e2fd5ddafa9..befae95393e1c 100644
--- a/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.test.tsx
+++ b/x-pack/plugins/data_usage/public/app/components/data_usage_metrics.test.tsx
@@ -344,18 +344,27 @@ describe('DataUsageMetrics', () => {
   });
 
   it('should refetch usage metrics with `Refresh` button click', async () => {
-    const refetch = jest.fn();
-    mockUseGetDataUsageMetrics.mockReturnValue({
-      ...getBaseMockedDataUsageMetrics,
-      data: ['.ds-1', '.ds-2'],
-      isFetched: true,
+    mockUseGetDataUsageDataStreams.mockReturnValue({
+      error: undefined,
+      data: generateDataStreams(3),
+      isFetching: false,
     });
+    const refetch = jest.fn();
     mockUseGetDataUsageMetrics.mockReturnValue({
       ...getBaseMockedDataUsageMetrics,
-      isFetched: true,
+      data: {},
+      isFetched: false,
       refetch,
     });
-    const { getByTestId } = renderComponent();
+    const { getByTestId, getAllByTestId } = renderComponent();
+
+    const toggleFilterButton = getByTestId(`${testIdFilter}-dataStreams-popoverButton`);
+
+    expect(toggleFilterButton).toHaveTextContent('Data streams3');
+    await user.click(toggleFilterButton);
+    const allFilterOptions = getAllByTestId('dataStreams-filter-option');
+    await user.click(allFilterOptions[2]);
+
     const refreshButton = getByTestId(`${testIdFilter}-super-refresh-button`);
     // click refresh 5 times
     for (let i = 0; i < 5; i++) {
@@ -364,7 +373,7 @@ describe('DataUsageMetrics', () => {
 
     expect(mockUseGetDataUsageMetrics).toHaveBeenLastCalledWith(
       expect.any(Object),
-      expect.objectContaining({ enabled: false })
+      expect.objectContaining({ enabled: true })
     );
     expect(refetch).toHaveBeenCalledTimes(5);
   });

From d8b40e603ea11e255904d83f229bf7c445be6802 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 12:47:01 +0100
Subject: [PATCH 08/17] test for validation function

---
 .../plugins/data_usage/common/utils.test.ts   | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 x-pack/plugins/data_usage/common/utils.test.ts

diff --git a/x-pack/plugins/data_usage/common/utils.test.ts b/x-pack/plugins/data_usage/common/utils.test.ts
new file mode 100644
index 0000000000000..189cb6200c41e
--- /dev/null
+++ b/x-pack/plugins/data_usage/common/utils.test.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { validateDateRangeWithinMinMax } from './utils';
+
+describe('validateDateRangeWithinMinMax', () => {
+  it.each([
+    { start: 'now-1d', end: 'now' },
+    { start: 'now-8d', end: 'now-1s' },
+  ])(
+    'should return true if the date range is within the min and max date range',
+    ({ start, end }) => {
+      expect(validateDateRangeWithinMinMax(start, end)).toBe(true);
+    }
+  );
+
+  it.each([
+    { start: 'now-10d', end: 'now' },
+    { start: 'now-9d', end: 'now+2s' },
+  ])(
+    'should return false if the date range is not within the min and max date range',
+    ({ start, end }) => {
+      expect(validateDateRangeWithinMinMax(start, end)).toBe(false);
+    }
+  );
+});

From a7bef2a80716294ede6d013296d425154fe439dc Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 14:31:21 +0100
Subject: [PATCH 09/17] cleanup

---
 .../data_usage/common/test_utils/index.ts     |  1 -
 .../data_usage/common/test_utils/time_ago.ts  |  9 ---------
 .../app/components/data_usage_metrics.tsx     | 19 ++++++++++++++++---
 .../hooks/use_get_usage_metrics.test.tsx      | 15 ++++++++++++---
 .../public/hooks/use_get_usage_metrics.ts     |  6 ++----
 5 files changed, 30 insertions(+), 20 deletions(-)
 delete mode 100644 x-pack/plugins/data_usage/common/test_utils/time_ago.ts

diff --git a/x-pack/plugins/data_usage/common/test_utils/index.ts b/x-pack/plugins/data_usage/common/test_utils/index.ts
index c3c8e75b29454..4e13a4048ee2c 100644
--- a/x-pack/plugins/data_usage/common/test_utils/index.ts
+++ b/x-pack/plugins/data_usage/common/test_utils/index.ts
@@ -7,4 +7,3 @@
 
 export { TestProvider } from './test_provider';
 export { dataUsageTestQueryClientOptions } from './test_query_client_options';
-export { timeXMinutesAgo } from './time_ago';
diff --git a/x-pack/plugins/data_usage/common/test_utils/time_ago.ts b/x-pack/plugins/data_usage/common/test_utils/time_ago.ts
deleted file mode 100644
index 7fe74e232bdac..0000000000000
--- a/x-pack/plugins/data_usage/common/test_utils/time_ago.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-export const timeXMinutesAgo = (x: number) =>
-  new Date(new Date().getTime() - x * 60 * 1000).toISOString();
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 c7578f8167e59..e3f8b04d8613e 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,7 +17,11 @@ 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, validateDateRangeWithinMinMax } from '../../../common/utils';
+import {
+  DEFAULT_DATE_RANGE_OPTIONS,
+  transformToUTCtime,
+  validateDateRangeWithinMinMax,
+} from '../../../common/utils';
 import { useDateRangePicker } from '../hooks/use_date_picker';
 import { ChartFilters, ChartFiltersProps } from './filters/charts_filters';
 import { ChartsLoading } from './charts_loading';
@@ -126,6 +130,15 @@ export const DataUsageMetrics = memo(
       [isValidDateRange, metricsFilters.dataStreams, metricsFilters.metricTypes]
     );
 
+    const utcTimeRange = useMemo(
+      () =>
+        transformToUTCtime({
+          start: dateRangePickerState.startDate,
+          end: dateRangePickerState.endDate,
+          isISOString: true,
+        }),
+      [dateRangePickerState]
+    );
     const {
       error: errorFetchingDataUsageMetrics,
       data: usageMetricsData,
@@ -135,8 +148,8 @@ export const DataUsageMetrics = memo(
     } = useGetDataUsageMetrics(
       {
         ...metricsFilters,
-        from: dateRangePickerState.startDate,
-        to: dateRangePickerState.endDate,
+        from: utcTimeRange.start as string,
+        to: utcTimeRange.end as string,
       },
       {
         retry: false,
diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
index 1ddb84d89ffc9..657b83d55a069 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
@@ -11,7 +11,8 @@ import { renderHook } from '@testing-library/react-hooks';
 import { useGetDataUsageMetrics } from './use_get_usage_metrics';
 import { DATA_USAGE_METRICS_API_ROUTE } from '../../common';
 import { coreMock as mockCore } from '@kbn/core/public/mocks';
-import { dataUsageTestQueryClientOptions, timeXMinutesAgo } from '../../common/test_utils';
+import { dataUsageTestQueryClientOptions } from '../../common/test_utils';
+import { transformToUTCtime } from '../../common/utils';
 
 const useQueryMock = _useQuery as jest.Mock;
 
@@ -40,9 +41,17 @@ jest.mock('../utils/use_kibana', () => {
   };
 });
 
+const timeRange = {
+  start: 'now-15m',
+  end: 'now',
+};
+const utcTimeRange = transformToUTCtime({
+  ...timeRange,
+  isISOString: true,
+});
 const defaultUsageMetricsRequestBody = {
-  from: timeXMinutesAgo(15),
-  to: timeXMinutesAgo(0),
+  from: utcTimeRange.start as string,
+  to: utcTimeRange.end as string,
   metricTypes: ['ingest_rate'],
   dataStreams: ['ds-1'],
 };
diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
index 46f8aabcd18a9..55aa6deda0973 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
@@ -8,7 +8,6 @@
 import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { IHttpFetchError } from '@kbn/core-http-browser';
-import { transformToUTCtime } from '../../common/utils';
 import { DATA_USAGE_METRICS_API_ROUTE } from '../../common';
 import type {
   UsageMetricsRequestBody,
@@ -27,7 +26,6 @@ export const useGetDataUsageMetrics = (
 ): UseQueryResult<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>> => {
   const { http } = useKibanaContextForPlugin().services;
 
-  const utcDateRange = transformToUTCtime({ start: body.from, end: body.to, isISOString: true });
   return useQuery<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>>({
     queryKey: ['get-data-usage-metrics', body],
     ...options,
@@ -38,8 +36,8 @@ export const useGetDataUsageMetrics = (
           signal,
           version: '1',
           body: JSON.stringify({
-            from: utcDateRange.start,
-            to: utcDateRange.end,
+            from: body.from,
+            to: body.to,
             metricTypes: body.metricTypes,
             dataStreams: body.dataStreams,
           }),

From 97bbddaae32af5746fa26b9341fb962516f9c71e Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 15:37:50 +0100
Subject: [PATCH 10/17] date validation on server as well

---
 .../routes/internal/usage_metrics.test.ts     | 23 +++++++++++++------
 .../routes/internal/usage_metrics_handler.ts  | 16 +++++++++++--
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/data_usage/server/routes/internal/usage_metrics.test.ts b/x-pack/plugins/data_usage/server/routes/internal/usage_metrics.test.ts
index c0eb0e5e8ef2d..f2bccd6d9c6b0 100644
--- a/x-pack/plugins/data_usage/server/routes/internal/usage_metrics.test.ts
+++ b/x-pack/plugins/data_usage/server/routes/internal/usage_metrics.test.ts
@@ -19,7 +19,16 @@ import { DATA_USAGE_METRICS_API_ROUTE } from '../../../common';
 import { createMockedDataUsageContext } from '../../mocks';
 import { CustomHttpRequestError } from '../../utils';
 import { AutoOpsError } from '../../services/errors';
-import { timeXMinutesAgo } from '../../../common/test_utils';
+import { transformToUTCtime } from '../../../common/utils';
+
+const timeRange = {
+  start: 'now-15m',
+  end: 'now',
+};
+const utcTimeRange = transformToUTCtime({
+  ...timeRange,
+  isISOString: true,
+});
 
 describe('registerUsageMetricsRoute', () => {
   let mockCore: MockedKeys<CoreSetup<{}, DataUsageServerStart>>;
@@ -56,8 +65,8 @@ describe('registerUsageMetricsRoute', () => {
 
     const mockRequest = httpServerMock.createKibanaRequest({
       body: {
-        from: timeXMinutesAgo(15),
-        to: timeXMinutesAgo(0),
+        from: utcTimeRange.start,
+        to: utcTimeRange.end,
         metricTypes: ['ingest_rate'],
         dataStreams: [],
       },
@@ -123,8 +132,8 @@ describe('registerUsageMetricsRoute', () => {
 
     const mockRequest = httpServerMock.createKibanaRequest({
       body: {
-        from: timeXMinutesAgo(15),
-        to: timeXMinutesAgo(0),
+        from: utcTimeRange.start,
+        to: utcTimeRange.end,
         metricTypes: ['ingest_rate', 'storage_retained'],
         dataStreams: ['.ds-1', '.ds-2'],
       },
@@ -191,8 +200,8 @@ describe('registerUsageMetricsRoute', () => {
 
     const mockRequest = httpServerMock.createKibanaRequest({
       body: {
-        from: timeXMinutesAgo(15),
-        to: timeXMinutesAgo(0),
+        from: utcTimeRange.start,
+        to: utcTimeRange.end,
         metricTypes: ['ingest_rate'],
         dataStreams: ['.ds-1', '.ds-2'],
       },
diff --git a/x-pack/plugins/data_usage/server/routes/internal/usage_metrics_handler.ts b/x-pack/plugins/data_usage/server/routes/internal/usage_metrics_handler.ts
index c2dee4ca2ce52..eb27c2a9b7ede 100644
--- a/x-pack/plugins/data_usage/server/routes/internal/usage_metrics_handler.ts
+++ b/x-pack/plugins/data_usage/server/routes/internal/usage_metrics_handler.ts
@@ -7,6 +7,7 @@
 
 import { chunk } from 'lodash/fp';
 import { RequestHandler } from '@kbn/core/server';
+import { momentDateParser } from '../../../common/utils';
 import type {
   MetricTypes,
   UsageMetricsAutoOpsResponseSchemaBody,
@@ -37,6 +38,17 @@ export const getUsageMetricsHandler = (
       logger.debug(`Retrieving usage metrics`);
       const { from, to, metricTypes, dataStreams: requestDsNames } = request.body;
 
+      // parse date strings to validate
+      const parsedFrom = momentDateParser(from)?.toISOString();
+      const parsedTo = momentDateParser(to)?.toISOString();
+
+      if (!parsedFrom || !parsedTo) {
+        const customErrorMessage = `[request body.${
+          !parsedTo ? 'to' : 'from'
+        }] Invalid date range ${!parsedTo ? to : from} is out of range`;
+        return errorHandler(logger, response, new CustomHttpRequestError(customErrorMessage, 400));
+      }
+
       // redundant check as we don't allow making requests via UI without data streams,
       // but it's here to make sure the request body is validated before requesting metrics from auto-ops
       if (!requestDsNames?.length) {
@@ -74,8 +86,8 @@ export const getUsageMetricsHandler = (
 
       const dataUsageService = new DataUsageService(logger);
       const metrics = await dataUsageService.getMetrics({
-        from,
-        to,
+        from: parsedFrom,
+        to: parsedTo,
         metricTypes: formatStringParams(metricTypes) as MetricTypes[],
         dataStreams: formatStringParams(dataStreamsResponse.map((ds) => ds.name)),
       });

From ee05a8f6eecb0bf00417b3aa1052bf4682eee075 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 15:38:15 +0100
Subject: [PATCH 11/17] validate date on the UX hook

---
 .../hooks/use_get_usage_metrics.test.tsx      | 50 +++++++++++++------
 .../public/hooks/use_get_usage_metrics.ts     | 11 +++-
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
index 657b83d55a069..5709b5e81d643 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
@@ -41,24 +41,31 @@ jest.mock('../utils/use_kibana', () => {
   };
 });
 
-const timeRange = {
-  start: 'now-15m',
-  end: 'now',
-};
-const utcTimeRange = transformToUTCtime({
-  ...timeRange,
-  isISOString: true,
-});
-const defaultUsageMetricsRequestBody = {
-  from: utcTimeRange.start as string,
-  to: utcTimeRange.end as string,
-  metricTypes: ['ingest_rate'],
-  dataStreams: ['ds-1'],
-};
-
 describe('useGetDataUsageMetrics', () => {
+  const timeRange = {
+    start: 'now-15m',
+    end: 'now',
+  };
+  const getUtcTimeRange = (range: { start: string; end: string }) =>
+    transformToUTCtime({
+      ...range,
+      isISOString: true,
+    });
+  let defaultUsageMetricsRequestBody = {
+    from: '',
+    to: '',
+    metricTypes: ['ingest_rate'],
+    dataStreams: ['ds-1'],
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
+
+    defaultUsageMetricsRequestBody = {
+      ...defaultUsageMetricsRequestBody,
+      from: getUtcTimeRange(timeRange).start as string,
+      to: getUtcTimeRange(timeRange).end as string,
+    };
   });
 
   it('should call the correct API', async () => {
@@ -76,6 +83,19 @@ describe('useGetDataUsageMetrics', () => {
     });
   });
 
+  it('should call the API if invalid date range', async () => {
+    const requestBody = {
+      ...defaultUsageMetricsRequestBody,
+      from: 'invalid-date',
+      to: 'invalid-date',
+    };
+    await renderHook(() => useGetDataUsageMetrics(requestBody, { enabled: true }), {
+      wrapper: createWrapper(),
+    });
+
+    expect(mockServices.http.post).not.toHaveBeenCalled();
+  });
+
   it('should not call the API if disabled', async () => {
     await renderHook(
       () => useGetDataUsageMetrics(defaultUsageMetricsRequestBody, { enabled: false }),
diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
index 55aa6deda0973..9cf6ef661f233 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
@@ -8,6 +8,7 @@
 import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { IHttpFetchError } from '@kbn/core-http-browser';
+import { momentDateParser } from '../../common/utils';
 import { DATA_USAGE_METRICS_API_ROUTE } from '../../common';
 import type {
   UsageMetricsRequestBody,
@@ -26,9 +27,15 @@ export const useGetDataUsageMetrics = (
 ): UseQueryResult<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>> => {
   const { http } = useKibanaContextForPlugin().services;
 
+  // parse values anyway to ensure they are valid
+  // and to avoid sending invalid values to the server
+  const from = momentDateParser(body.from)?.toISOString();
+  const to = momentDateParser(body.to)?.toISOString();
+
   return useQuery<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>>({
     queryKey: ['get-data-usage-metrics', body],
     ...options,
+    enabled: !!(from && to),
     keepPreviousData: true,
     queryFn: async ({ signal }) => {
       return http
@@ -36,8 +43,8 @@ export const useGetDataUsageMetrics = (
           signal,
           version: '1',
           body: JSON.stringify({
-            from: body.from,
-            to: body.to,
+            from,
+            to,
             metricTypes: body.metricTypes,
             dataStreams: body.dataStreams,
           }),

From dab912ffafa026d0528493d27296e00ba443cb62 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 15:43:10 +0100
Subject: [PATCH 12/17] fix logic

---
 .../data_usage/public/hooks/use_get_usage_metrics.test.tsx  | 6 +++---
 .../data_usage/public/hooks/use_get_usage_metrics.ts        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
index 5709b5e81d643..4532126bc1a58 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.test.tsx
@@ -52,8 +52,8 @@ describe('useGetDataUsageMetrics', () => {
       isISOString: true,
     });
   let defaultUsageMetricsRequestBody = {
-    from: '',
-    to: '',
+    from: 'now-15m',
+    to: 'now',
     metricTypes: ['ingest_rate'],
     dataStreams: ['ds-1'],
   };
@@ -83,7 +83,7 @@ describe('useGetDataUsageMetrics', () => {
     });
   });
 
-  it('should call the API if invalid date range', async () => {
+  it('should not call the API if invalid date range', async () => {
     const requestBody = {
       ...defaultUsageMetricsRequestBody,
       from: 'invalid-date',
diff --git a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
index 9cf6ef661f233..649bcb45ee376 100644
--- a/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
+++ b/x-pack/plugins/data_usage/public/hooks/use_get_usage_metrics.ts
@@ -35,7 +35,7 @@ export const useGetDataUsageMetrics = (
   return useQuery<UsageMetricsResponseSchemaBody, IHttpFetchError<ErrorType>>({
     queryKey: ['get-data-usage-metrics', body],
     ...options,
-    enabled: !!(from && to),
+    enabled: !!(from && to) && options.enabled,
     keepPreviousData: true,
     queryFn: async ({ signal }) => {
       return http

From a6fdfa57d488fc023d20376a30e5f6063ea3bbbe Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 15:55:39 +0100
Subject: [PATCH 13/17] update test names

---
 .../plugins/data_usage/common/utils.test.ts   | 26 +++++++------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/data_usage/common/utils.test.ts b/x-pack/plugins/data_usage/common/utils.test.ts
index 189cb6200c41e..4dece2eb0dbb5 100644
--- a/x-pack/plugins/data_usage/common/utils.test.ts
+++ b/x-pack/plugins/data_usage/common/utils.test.ts
@@ -9,22 +9,16 @@ import { validateDateRangeWithinMinMax } from './utils';
 
 describe('validateDateRangeWithinMinMax', () => {
   it.each([
-    { start: 'now-1d', end: 'now' },
-    { start: 'now-8d', end: 'now-1s' },
-  ])(
-    'should return true if the date range is within the min and max date range',
-    ({ start, end }) => {
-      expect(validateDateRangeWithinMinMax(start, end)).toBe(true);
-    }
-  );
+    ['both start and end date is `now`', { start: 'now', end: 'now' }],
+    ['bounded within the min and max date range', { start: 'now-8d', end: 'now-1s' }],
+  ])('should return true if %s', (_, { start, end }) => {
+    expect(validateDateRangeWithinMinMax(start, end)).toBe(true);
+  });
 
   it.each([
-    { start: 'now-10d', end: 'now' },
-    { start: 'now-9d', end: 'now+2s' },
-  ])(
-    'should return false if the date range is not within the min and max date range',
-    ({ start, end }) => {
-      expect(validateDateRangeWithinMinMax(start, end)).toBe(false);
-    }
-  );
+    ['starts before the min date', { start: 'now-10d', end: 'now' }],
+    ['ends after the max date', { start: 'now-9d', end: 'now+2s' }],
+  ])('should return false if the date range %s', (_, { start, end }) => {
+    expect(validateDateRangeWithinMinMax(start, end)).toBe(false);
+  });
 });

From 9e4cd426677a928ce1b16174e8237ce110685af0 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 16:03:02 +0100
Subject: [PATCH 14/17] parse date on auto ops

---
 x-pack/plugins/data_usage/server/services/autoops_api.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/data_usage/server/services/autoops_api.ts b/x-pack/plugins/data_usage/server/services/autoops_api.ts
index 8b8838e7da608..ac9265d081d31 100644
--- a/x-pack/plugins/data_usage/server/services/autoops_api.ts
+++ b/x-pack/plugins/data_usage/server/services/autoops_api.ts
@@ -14,6 +14,7 @@ import { Logger } from '@kbn/logging';
 import type { AxiosError, AxiosRequestConfig } from 'axios';
 import axios from 'axios';
 import { LogMeta } from '@kbn/core/server';
+import { momentDateParser } from '../../common/utils';
 import {
   UsageMetricsAutoOpsResponseSchema,
   type UsageMetricsAutoOpsResponseSchemaBody,
@@ -75,8 +76,8 @@ export class AutoOpsAPIService {
     const requestConfig: AxiosRequestConfig = {
       url: getAutoOpsAPIRequestUrl(autoopsConfig.api?.url, cloudSetup?.serverless.projectId),
       data: {
-        from: requestBody.from,
-        to: requestBody.to,
+        from: momentDateParser(requestBody.from)?.toISOString(),
+        to: momentDateParser(requestBody.to)?.toISOString(),
         size: requestBody.dataStreams.length,
         level: 'datastream',
         metric_types: requestBody.metricTypes,

From 63a87ec45d74edc3b9a8134256c4365a9793d25a Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 17:18:58 +0100
Subject: [PATCH 15/17] fix date range logic

---
 .../plugins/data_usage/common/utils.test.ts   | 29 ++++++++++++-------
 x-pack/plugins/data_usage/common/utils.ts     |  7 ++++-
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/data_usage/common/utils.test.ts b/x-pack/plugins/data_usage/common/utils.test.ts
index 4dece2eb0dbb5..9b25b67b98ebb 100644
--- a/x-pack/plugins/data_usage/common/utils.test.ts
+++ b/x-pack/plugins/data_usage/common/utils.test.ts
@@ -8,17 +8,26 @@
 import { validateDateRangeWithinMinMax } from './utils';
 
 describe('validateDateRangeWithinMinMax', () => {
-  it.each([
-    ['both start and end date is `now`', { start: 'now', end: 'now' }],
-    ['bounded within the min and max date range', { start: 'now-8d', end: 'now-1s' }],
-  ])('should return true if %s', (_, { start, end }) => {
-    expect(validateDateRangeWithinMinMax(start, end)).toBe(true);
+  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 }) => {
+      expect(validateDateRangeWithinMinMax(start, end)).toBe(true);
+    });
   });
 
-  it.each([
-    ['starts before the min date', { start: 'now-10d', end: 'now' }],
-    ['ends after the max date', { start: 'now-9d', end: 'now+2s' }],
-  ])('should return false if the date range %s', (_, { start, end }) => {
-    expect(validateDateRangeWithinMinMax(start, end)).toBe(false);
+  describe('Invalid ranges', () => {
+    it.each([
+      ['starts before the min date', { start: 'now-11d', end: 'now-5s' }],
+      ['ends after the max date', { start: 'now-9d', end: 'now+2s' }],
+      [
+        'end date is before the start date even when both are within min and max date range',
+        { start: 'now-3s', end: 'now-10s' },
+      ],
+    ])('should return false if the date range %s', (_, { start, end }) => {
+      expect(validateDateRangeWithinMinMax(start, end)).toBe(false);
+    });
   });
 });
diff --git a/x-pack/plugins/data_usage/common/utils.ts b/x-pack/plugins/data_usage/common/utils.ts
index 61da3fac3c5bb..6b0930846cc91 100644
--- a/x-pack/plugins/data_usage/common/utils.ts
+++ b/x-pack/plugins/data_usage/common/utils.ts
@@ -41,10 +41,15 @@ export const transformToUTCtime = ({
 export const validateDateRangeWithinMinMax = (start: string, end: string): boolean => {
   const startDate = momentDateParser(start);
   const endDate = momentDateParser(end);
+
   if (!startDate || !endDate) {
     return false;
   }
   const minDate = momentDateParser(DEFAULT_DATE_RANGE_OPTIONS.minDate);
   const maxDate = momentDateParser(DEFAULT_DATE_RANGE_OPTIONS.maxDate);
-  return startDate.isSameOrAfter(minDate) && endDate.isSameOrBefore(maxDate);
+  return (
+    startDate.isSameOrAfter(minDate, 's') &&
+    endDate.isSameOrBefore(maxDate, 's') &&
+    startDate <= endDate
+  );
 };

From 863a3628399178cf179e163323163d678f5eb734 Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Tue, 26 Nov 2024 17:27:36 +0100
Subject: [PATCH 16/17] no refetching unless valid request

---
 .../data_usage/public/app/components/data_usage_metrics.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 e3f8b04d8613e..34d8fd8984862 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
@@ -164,8 +164,11 @@ export const DataUsageMetrics = memo(
     }, [isFetching, hasFetchedDataUsageMetricsData]);
 
     const onRefresh = useCallback(() => {
+      if (!enableFetchUsageMetricsData) {
+        return;
+      }
       refetchDataUsageMetrics();
-    }, [refetchDataUsageMetrics]);
+    }, [enableFetchUsageMetricsData, refetchDataUsageMetrics]);
 
     const onChangeDataStreamsFilter = useCallback(
       (selectedDataStreams: string[]) => {

From 60f97aa2b51bf656eff6f46493e456fcbcd7e70d Mon Sep 17 00:00:00 2001
From: Ashokaditya <ashokaditya@elastic.co>
Date: Wed, 27 Nov 2024 18:24:36 +0100
Subject: [PATCH 17/17] refactor

---
 x-pack/plugins/data_usage/common/utils.test.ts            | 8 ++++----
 x-pack/plugins/data_usage/common/utils.ts                 | 2 +-
 .../public/app/components/data_usage_metrics.tsx          | 7 +++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/data_usage/common/utils.test.ts b/x-pack/plugins/data_usage/common/utils.test.ts
index 9b25b67b98ebb..fc6b158c1caa0 100644
--- a/x-pack/plugins/data_usage/common/utils.test.ts
+++ b/x-pack/plugins/data_usage/common/utils.test.ts
@@ -5,16 +5,16 @@
  * 2.0.
  */
 
-import { validateDateRangeWithinMinMax } from './utils';
+import { isDateRangeValid } from './utils';
 
-describe('validateDateRangeWithinMinMax', () => {
+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 }) => {
-      expect(validateDateRangeWithinMinMax(start, end)).toBe(true);
+      expect(isDateRangeValid({ start, end })).toBe(true);
     });
   });
 
@@ -27,7 +27,7 @@ describe('validateDateRangeWithinMinMax', () => {
         { start: 'now-3s', end: 'now-10s' },
       ],
     ])('should return false if the date range %s', (_, { start, end }) => {
-      expect(validateDateRangeWithinMinMax(start, end)).toBe(false);
+      expect(isDateRangeValid({ start, end })).toBe(false);
     });
   });
 });
diff --git a/x-pack/plugins/data_usage/common/utils.ts b/x-pack/plugins/data_usage/common/utils.ts
index 6b0930846cc91..3fd7240153d4d 100644
--- a/x-pack/plugins/data_usage/common/utils.ts
+++ b/x-pack/plugins/data_usage/common/utils.ts
@@ -38,7 +38,7 @@ export const transformToUTCtime = ({
   };
 };
 
-export const validateDateRangeWithinMinMax = (start: string, end: string): boolean => {
+export const isDateRangeValid = ({ start, end }: { start: string; end: string }): boolean => {
   const startDate = momentDateParser(start);
   const endDate = momentDateParser(end);
 
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 34d8fd8984862..efaa779dfe3c9 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
@@ -20,7 +20,7 @@ import { useDataUsageMetricsUrlParams } from '../hooks/use_charts_url_params';
 import {
   DEFAULT_DATE_RANGE_OPTIONS,
   transformToUTCtime,
-  validateDateRangeWithinMinMax,
+  isDateRangeValid,
 } from '../../../common/utils';
 import { useDateRangePicker } from '../hooks/use_date_picker';
 import { ChartFilters, ChartFiltersProps } from './filters/charts_filters';
@@ -118,7 +118,10 @@ export const DataUsageMetrics = memo(
 
     const isValidDateRange = useMemo(
       () =>
-        validateDateRangeWithinMinMax(dateRangePickerState.startDate, dateRangePickerState.endDate),
+        isDateRangeValid({
+          start: dateRangePickerState.startDate,
+          end: dateRangePickerState.endDate,
+        }),
       [dateRangePickerState.endDate, dateRangePickerState.startDate]
     );