From a2334eb03913d6da658012b837298d88bd9e747a Mon Sep 17 00:00:00 2001
From: Carlos Crespo <crespocarlos@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:59:17 +0200
Subject: [PATCH] [Infra] Fix date picker with relative date range (#187739)

fixes [187735](https://github.com/elastic/kibana/issues/187735)

## Summary

This PR fixes a problem with the Anomaly Detection component's date
picker when dealing with relative dates

https://github.com/elastic/kibana/assets/2767137/2f007a3e-1ee0-44ca-b4ae-8cdb56fbe06c

https://github.com/elastic/kibana/assets/2767137/c3b036df-e73c-48d5-a27a-6ed75ffbc76a

### How to test

The easiest way is to connect to an oblt cluster and create an ML job

- Navigate to `Infrastructure`
- Click on `Anomaly Detection` menu at the top of the page and create a
ML job for hosts
- Follow the same steps from the screen recordings above.

(cherry picked from commit 7c5cf9c76e35925cba7e3bd57cc01d1fffae81a4)
---
 .../anomalies_table/anomalies_table.tsx       | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/observability_solution/infra/public/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx b/x-pack/plugins/observability_solution/infra/public/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx
index b38af534df6e7..482d4c7294c5e 100644
--- a/x-pack/plugins/observability_solution/infra/public/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/components/ml/anomaly_detection/anomalies_table/anomalies_table.tsx
@@ -221,9 +221,9 @@ export const AnomaliesTable = ({
 }: Props) => {
   const [search, setSearch] = useState('');
   const trackMetric = useUiTracker({ app: 'infra_metrics' });
-  const [timeRange, setTimeRange] = useState<{ start: number; end: number }>({
-    start: datemathToEpochMillis(dateRange.from) || 0,
-    end: datemathToEpochMillis(dateRange.to, 'up') || 0,
+  const [timeRange, setTimeRange] = useState<{ start: string; end: string }>({
+    start: dateRange.from,
+    end: dateRange.to,
   });
   const { sorting, setSorting } = useSorting<MetricsHostsAnomaly>({
     field: 'startTime',
@@ -256,8 +256,8 @@ export const AnomaliesTable = ({
     ({ isInvalid, start: startChange, end: endChange }: OnTimeChangeProps) => {
       if (!isInvalid) {
         setTimeRange({
-          start: datemathToEpochMillis(startChange)!,
-          end: datemathToEpochMillis(endChange, 'up')!,
+          start: startChange,
+          end: endChange,
         });
       }
     },
@@ -265,14 +265,17 @@ export const AnomaliesTable = ({
   );
 
   const getTimeRange = useCallback(() => {
-    if (hideDatePicker) {
-      return {
-        start: datemathToEpochMillis(dateRange.from) || 0,
-        end: datemathToEpochMillis(dateRange.to, 'up') || 0,
-      };
-    } else {
-      return timeRange;
-    }
+    const { start, end } = hideDatePicker
+      ? {
+          start: dateRange.from,
+          end: dateRange.to,
+        }
+      : timeRange;
+
+    return {
+      start: datemathToEpochMillis(start) || 0,
+      end: datemathToEpochMillis(end, 'up') || 0,
+    };
   }, [dateRange.from, dateRange.to, hideDatePicker, timeRange]);
 
   const anomalyParams = useMemo(() => {
@@ -483,8 +486,8 @@ export const AnomaliesTable = ({
       {!hideDatePicker && (
         <EuiFlexItem grow={false}>
           <EuiSuperDatePicker
-            start={dateRange.from}
-            end={dateRange.to}
+            start={timeRange.start}
+            end={timeRange.end}
             showUpdateButton={false}
             onTimeChange={onTimeChange}
             width="full"