[LogsUI] Add analysis results screen (#43471) (#43932)

* Add empty analysis tab

* Add ml capabilities check

* Add job status checking functionality

* Add a loading page for the job status check

* Change types / change method for deriving space ID / change setup requirement filtering check

* Use new structure

* Add a loading page

* Initial timeRange URL state hookup

* Hook up params to data fetching

* Fleshing out EUI structure

* Change tab syntax

* i18n translate message prop

* Fix import

* Add structural visual components

* Split section in to independent component

* Real loading and no data states

* Add initial chart rendering (WIP)

* Tick formatting for x axis

* Add series styling, tickFormatter etc

* Base bucketDuration on time range for a sensible number of data points (naieve version)

* Add auto refresh

* Adjust bucketDuration algorithm

* Add some dark theme support

* Call the functions

* Extract chart helpers

* Amend io-ts types

* i18n translations

* Add types for graph data

* Allow ability to toggle model bounds

* Add anomaly series

* Format date correctly

* Add anomalies detected text

* Simplify syntax

* Update title

* Render panel within a page

* Add ability to switch between chart and table view

* Fix typechecking errors

* Add a Beta badge to the analysis tab

x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx

@@ -10,7 +10,7 @@ import { Route } from 'react-router-dom';
 import euiStyled from '../../../../../common/eui_styled_components';
 
 interface TabConfiguration {
-  title: string;
+  title: string | React.ReactNode;
   path: string;
 }
 

x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/index.ts

@@ -7,3 +7,4 @@
 export * from './log_analysis_capabilities';
 export * from './log_analysis_jobs';
 export * from './log_analysis_results';
+export * from './log_analysis_results_url_state';

x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_graph_data/log_entry_rate.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useMemo } from 'react';
+import { GetLogEntryRateSuccessResponsePayload } from '../../../../../common/http_api/log_analysis';
+
+interface LogRateAreaSeriesDataPoint {
+  x: number;
+  min: number | null;
+  max: number | null;
+}
+type LogRateAreaSeries = LogRateAreaSeriesDataPoint[];
+type LogRateLineSeriesDataPoint = [number, number | null];
+type LogRateLineSeries = LogRateLineSeriesDataPoint[];
+type LogRateAnomalySeriesDataPoint = [number, number];
+type LogRateAnomalySeries = LogRateAnomalySeriesDataPoint[];
+
+export const useLogEntryRateGraphData = ({
+  data,
+}: {
+  data: GetLogEntryRateSuccessResponsePayload['data'] | null;
+}) => {
+  const areaSeries: LogRateAreaSeries = useMemo(() => {
+    if (!data || (data && data.histogramBuckets && !data.histogramBuckets.length)) {
+      return [];
+    }
+    return data.histogramBuckets.reduce((acc: any, bucket) => {
+      acc.push({
+        x: bucket.startTime,
+        min: bucket.modelLowerBoundStats.min,
+        max: bucket.modelUpperBoundStats.max,
+      });
+      return acc;
+    }, []);
+  }, [data]);
+
+  const lineSeries: LogRateLineSeries = useMemo(() => {
+    if (!data || (data && data.histogramBuckets && !data.histogramBuckets.length)) {
+      return [];
+    }
+    return data.histogramBuckets.reduce((acc: any, bucket) => {
+      acc.push([bucket.startTime, bucket.logEntryRateStats.avg]);
+      return acc;
+    }, []);
+  }, [data]);
+
+  const anomalySeries: LogRateAnomalySeries = useMemo(() => {
+    if (!data || (data && data.histogramBuckets && !data.histogramBuckets.length)) {
+      return [];
+    }
+    return data.histogramBuckets.reduce((acc: any, bucket) => {
+      if (bucket.anomalies.length > 0) {
+        bucket.anomalies.forEach(anomaly => {
+          acc.push([anomaly.startTime, anomaly.actualLogEntryRate]);
+        });
+        return acc;
+      } else {
+        return acc;
+      }
+    }, []);
+  }, [data]);
+
+  return {
+    areaSeries,
+    lineSeries,
+    anomalySeries,
+  };
+};

x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_results.tsx

@@ -5,15 +5,34 @@
  */
 
 import createContainer from 'constate-latest';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 
 import { useLogEntryRate } from './log_entry_rate';
 
-export const useLogAnalysisResults = ({ sourceId }: { sourceId: string }) => {
-  const { isLoading: isLoadingLogEntryRate, logEntryRate } = useLogEntryRate({ sourceId });
+export const useLogAnalysisResults = ({
+  sourceId,
+  startTime,
+  endTime,
+  bucketDuration = 15 * 60 * 1000,
+}: {
+  sourceId: string;
+  startTime: number;
+  endTime: number;
+  bucketDuration?: number;
+}) => {
+  const { isLoading: isLoadingLogEntryRate, logEntryRate, getLogEntryRate } = useLogEntryRate({
+    sourceId,
+    startTime,
+    endTime,
+    bucketDuration,
+  });
 
   const isLoading = useMemo(() => isLoadingLogEntryRate, [isLoadingLogEntryRate]);
 
+  useEffect(() => {
+    getLogEntryRate();
+  }, [sourceId, startTime, endTime, bucketDuration]);
+
   return {
     isLoading,
     logEntryRate,

x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_analysis_results_url_state.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import moment from 'moment';
+import { useEffect } from 'react';
+import * as rt from 'io-ts';
+import { useUrlState } from '../../../utils/use_url_state';
+import { timeRangeRT } from '../../../../common/http_api/shared/time_range';
+
+const autoRefreshRT = rt.union([rt.boolean, rt.undefined]);
+const urlTimeRangeRT = rt.union([timeRangeRT, rt.undefined]);
+
+const TIME_RANGE_URL_STATE_KEY = 'timeRange';
+const AUTOREFRESH_URL_STATE_KEY = 'autoRefresh';
+
+export const useLogAnalysisResultsUrlState = () => {
+  const [timeRange, setTimeRange] = useUrlState({
+    defaultState: {
+      startTime: moment
+        .utc()
+        .subtract(2, 'weeks')
+        .valueOf(),
+      endTime: moment.utc().valueOf(),
+    },
+    decodeUrlState: (value: unknown) => urlTimeRangeRT.decode(value).getOrElse(undefined),
+    encodeUrlState: urlTimeRangeRT.encode,
+    urlStateKey: TIME_RANGE_URL_STATE_KEY,
+  });
+
+  useEffect(() => {
+    setTimeRange(timeRange);
+  }, []);
+
+  const [autoRefreshEnabled, setAutoRefresh] = useUrlState({
+    defaultState: false,
+    decodeUrlState: (value: unknown) => autoRefreshRT.decode(value).getOrElse(undefined),
+    encodeUrlState: autoRefreshRT.encode,
+    urlStateKey: AUTOREFRESH_URL_STATE_KEY,
+  });
+
+  useEffect(() => {
+    setAutoRefresh(autoRefreshEnabled);
+  }, []);
+
+  return {
+    timeRange,
+    setTimeRange,
+    autoRefreshEnabled,
+    setAutoRefresh,
+  };
+};

x-pack/legacy/plugins/infra/public/containers/logs/log_analysis/log_entry_rate.tsx

@@ -18,7 +18,17 @@ import { useTrackedPromise } from '../../../utils/use_tracked_promise';
 
 type LogEntryRateResults = GetLogEntryRateSuccessResponsePayload['data'];
 
-export const useLogEntryRate = ({ sourceId }: { sourceId: string }) => {
+export const useLogEntryRate = ({
+  sourceId,
+  startTime,
+  endTime,
+  bucketDuration,
+}: {
+  sourceId: string;
+  startTime: number;
+  endTime: number;
+  bucketDuration: number;
+}) => {
   const [logEntryRate, setLogEntryRate] = useState<LogEntryRateResults | null>(null);
 
   const [getLogEntryRateRequest, getLogEntryRate] = useTrackedPromise(
@@ -31,12 +41,12 @@ export const useLogEntryRate = ({ sourceId }: { sourceId: string }) => {
           body: JSON.stringify(
             getLogEntryRateRequestPayloadRT.encode({
               data: {
-                sourceId, // TODO: get from hook arguments
+                sourceId,
                 timeRange: {
-                  startTime: Date.now(), // TODO: get from hook arguments
-                  endTime: Date.now() + 1000 * 60 * 60, // TODO: get from hook arguments
+                  startTime,
+                  endTime,
                 },
-                bucketDuration: 15 * 60 * 1000, // TODO: get from hook arguments
+                bucketDuration,
               },
             })
           ),
@@ -50,7 +60,7 @@ export const useLogEntryRate = ({ sourceId }: { sourceId: string }) => {
         setLogEntryRate(data);
       },
     },
-    [sourceId]
+    [sourceId, startTime, endTime, bucketDuration]
   );
 
   const isLoading = useMemo(() => getLogEntryRateRequest.state === 'pending', [

x-pack/legacy/plugins/infra/public/pages/logs/analysis/chart_helpers/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import chrome from 'ui/chrome';
+import { SpecId, Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts';
+
+export const getColorsMap = (color: string, specId: SpecId) => {
+  const map = new Map();
+  map.set({ colorValues: [], specId }, color);
+  return map;
+};
+
+export const isDarkMode = () => chrome.getUiSettingsClient().get('theme:darkMode');
+
+export const getChartTheme = (): Theme => {
+  return isDarkMode() ? DARK_THEME : LIGHT_THEME;
+};

x-pack/legacy/plugins/infra/public/pages/logs/analysis/page.tsx

@@ -47,7 +47,7 @@ export const AnalysisPage = () => {
             setupMlModule={setupMlModule}
           />
         ) : (
-          <AnalysisResultsContent />
+          <AnalysisResultsContent sourceId={sourceId} />
         )}
       </ColumnarPage>
     </AnalysisPageProviders>