[Metrics UI] Add anomalies to timeline

x-pack/plugins/infra/common/http_api/infra_ml/results/common.ts

@@ -57,3 +57,11 @@ export const sortRT = rt.type({
 });
 
 export type Sort = rt.TypeOf<typeof sortRT>;
+
+export const metricRT = rt.keyof({
+  memory_usage: null,
+  network_in: null,
+  network_out: null,
+});
+
+export type Metric = rt.TypeOf<typeof metricRT>;

x-pack/plugins/infra/common/http_api/infra_ml/results/metrics_hosts_anomalies.ts

@@ -7,7 +7,7 @@
 import * as rt from 'io-ts';
 
 import { timeRangeRT, routeTimingMetadataRT } from '../../shared';
-import { anomalyTypeRT, paginationCursorRT, sortRT, paginationRT } from './common';
+import { anomalyTypeRT, paginationCursorRT, sortRT, paginationRT, metricRT } from './common';
 
 export const INFA_ML_GET_METRICS_HOSTS_ANOMALIES_PATH =
   '/api/infra/infra_ml/results/metrics_hosts_anomalies';
@@ -18,6 +18,7 @@ const metricsHostAnomalyCommonFieldsRT = rt.type({
   typical: rt.number,
   actual: rt.number,
   type: anomalyTypeRT,
+  influencers: rt.array(rt.string),
   duration: rt.number,
   startTime: rt.number,
   jobId: rt.string,
@@ -64,12 +65,11 @@ export const getMetricsHostsAnomaliesRequestPayloadRT = rt.type({
       timeRange: timeRangeRT,
     }),
     rt.partial({
+      metric: metricRT,
       // Pagination properties
       pagination: paginationRT,
       // Sort properties
       sort: sortRT,
-      // // Dataset filters
-      // datasets: rt.array(rt.string),
     }),
   ]),
 });

x-pack/plugins/infra/common/http_api/infra_ml/results/metrics_k8s_anomalies.ts

@@ -7,7 +7,7 @@
 import * as rt from 'io-ts';
 
 import { timeRangeRT, routeTimingMetadataRT } from '../../shared';
-import { paginationCursorRT, anomalyTypeRT, sortRT, paginationRT } from './common';
+import { paginationCursorRT, anomalyTypeRT, sortRT, paginationRT, metricRT } from './common';
 
 export const INFA_ML_GET_METRICS_K8S_ANOMALIES_PATH =
   '/api/infra/infra_ml/results/metrics_k8s_anomalies';
@@ -18,6 +18,7 @@ const metricsK8sAnomalyCommonFieldsRT = rt.type({
   typical: rt.number,
   actual: rt.number,
   type: anomalyTypeRT,
+  influencers: rt.array(rt.string),
   duration: rt.number,
   startTime: rt.number,
   jobId: rt.string,
@@ -64,6 +65,7 @@ export const getMetricsK8sAnomaliesRequestPayloadRT = rt.type({
       timeRange: timeRangeRT,
     }),
     rt.partial({
+      metric: metricRT,
       // Pagination properties
       pagination: paginationRT,
       // Sort properties

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx

@@ -84,7 +84,7 @@ export const FlyoutHome = (props: Props) => {
     return (
       <LoadingPage
         message={i18n.translate('xpack.infra.ml.anomalyFlyout.jobStatusLoadingMessage', {
-          defaultMessage: 'Checking status of metris jobs...',
+          defaultMessage: 'Checking status of metrics jobs...',
         })}
       />
     );

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/job_setup_screen.tsx

@@ -223,7 +223,7 @@ export const JobSetupScreen = (props: Props) => {
                   label={
                     <FormattedMessage
                       id="xpack.infra.ml.steps.setupProcess.partition.label"
-                      defaultMessage="Partition filed"
+                      defaultMessage="Partition field"
                     />
                   }
                   compressed

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
@@ -18,7 +18,12 @@ import {
   TooltipValue,
   niceTimeFormatter,
   ElementClickListener,
+  RectAnnotation,
+  RectAnnotationDatum,
 } from '@elastic/charts';
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { EuiIcon } from '@elastic/eui';
 import { useUiSetting } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { toMetricOpt } from '../../../../../../common/snapshot_metric_i18n';
 import { MetricsExplorerAggregation } from '../../../../../../common/http_api';
@@ -35,6 +40,8 @@ import { calculateDomain } from '../../../metrics_explorer/components/helpers/ca
 
 import { euiStyled } from '../../../../../../../observability/public';
 import { InfraFormatter } from '../../../../../lib/lib';
+import { useMetricsHostsAnomaliesResults } from '../../hooks/use_metrics_hosts_anomalies';
+import { useMetricsK8sAnomaliesResults } from '../../hooks/use_metrics_k8s_anomalies';
 
 interface Props {
   interval: string;
@@ -47,7 +54,8 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
   const { metric, nodeType, accountId, region } = useWaffleOptionsContext();
   const { currentTime, jumpToTime, stopAutoReload } = useWaffleTimeContext();
   const { filterQueryAsJson } = useWaffleFiltersContext();
-  const { loading, error, timeseries, reload } = useTimeline(
+
+  const { loading, error, startTime, endTime, timeseries, reload } = useTimeline(
     filterQueryAsJson,
     [metric],
     nodeType,
@@ -59,6 +67,40 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
     isVisible
   );
 
+  const anomalyParams = {
+    sourceId: 'default',
+    startTime,
+    endTime,
+    defaultSortOptions: {
+      direction: 'desc' as const,
+      field: 'anomalyScore' as const,
+    },
+    defaultPaginationOptions: { pageSize: 100 },
+  };
+
+  const { metricsHostsAnomalies, getMetricsHostsAnomalies } = useMetricsHostsAnomaliesResults(
+    anomalyParams
+  );
+  const { metricsK8sAnomalies, getMetricsK8sAnomalies } = useMetricsK8sAnomaliesResults(
+    anomalyParams
+  );
+
+  const getAnomalies = useMemo(() => {
+    if (nodeType === 'host') {
+      return getMetricsHostsAnomalies;
+    } else if (nodeType === 'pod') {
+      return getMetricsK8sAnomalies;
+    }
+  }, [nodeType, getMetricsK8sAnomalies, getMetricsHostsAnomalies]);
+
+  const anomalies = useMemo(() => {
+    if (nodeType === 'host') {
+      return metricsHostsAnomalies;
+    } else if (nodeType === 'pod') {
+      return metricsK8sAnomalies;
+    }
+  }, [nodeType, metricsHostsAnomalies, metricsK8sAnomalies]);
+
   const metricLabel = toMetricOpt(metric.type)?.textLC;
 
   const chartMetric = {
@@ -104,6 +146,25 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
     [jumpToTime, stopAutoReload]
   );
 
+  const anomalyMetricName = useMemo(() => {
+    const metricType = metric.type;
+    if (metricType === 'memory') {
+      return 'memory_usage';
+    }
+    if (metricType === 'rx') {
+      return 'network_in';
+    }
+    if (metricType === 'tx') {
+      return 'network_out';
+    }
+  }, [metric]);
+
+  useEffect(() => {
+    if (getAnomalies && anomalyMetricName) {
+      getAnomalies(anomalyMetricName);
+    }
+  }, [getAnomalies, anomalyMetricName]);
+
   if (loading) {
     return (
       <TimelineContainer>
@@ -130,21 +191,86 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
     );
   }
 
+  function generateAnnotationData(results: Array<[number, string[]]>): RectAnnotationDatum[] {
+    return results.map((anomaly) => {
+      const [val, influencers] = anomaly;
+      return {
+        coordinates: {
+          x0: val,
+          x1: moment(val).add(15, 'minutes').valueOf(),
+          y0: dataDomain?.min,
+          y1: dataDomain?.max,
+        },
+        details: influencers.join(','),
+      };
+    });
+  }
+
   return (
     <TimelineContainer>
       <TimelineHeader>
-        <EuiText>
-          <strong>
-            <FormattedMessage
-              id="xpack.infra.inventoryTimeline.header"
-              defaultMessage="Average {metricLabel}"
-              values={{ metricLabel }}
-            />
-          </strong>
-        </EuiText>
+        <EuiFlexItem grow={true}>
+          <EuiText>
+            <strong>
+              <FormattedMessage
+                id="xpack.infra.inventoryTimeline.header"
+                defaultMessage="Average {metricLabel}"
+                values={{ metricLabel }}
+              />
+            </strong>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems={'center'}>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon
+                    color={getTimelineChartTheme(isDarkMode).crosshair.band.fill}
+                    type={'dot'}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiText size={'xs'}>
+                    <FormattedMessage
+                      id="xpack.infra.inventoryTimeline.header"
+                      defaultMessage="Average {metricLabel}"
+                      values={{ metricLabel }}
+                    />
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+                <EuiFlexItem
+                  grow={false}
+                  style={{ backgroundColor: '#D36086', height: 5, width: 10 }}
+                />
+                <EuiFlexItem>
+                  <EuiText size={'xs'}>
+                    <FormattedMessage
+                      id="xpack.infra.inventoryTimeline.legend.anomalyLabel"
+                      defaultMessage="Anomaly detected"
+                    />
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
       </TimelineHeader>
       <TimelineChartContainer>
         <Chart>
+          {anomalies && (
+            <RectAnnotation
+              id={'anomalies'}
+              dataValues={generateAnnotationData(
+                anomalies.map((a) => [a.startTime, a.influencers])
+              )}
+              style={{ fill: '#D36086' }}
+            />
+          )}
           <MetricExplorerSeriesChart
             type={MetricsExplorerChartType.area}
             metric={chartMetric}
@@ -196,7 +322,7 @@ const TimelineHeader = euiStyled.div`
 `;
 
 const TimelineChartContainer = euiStyled.div`
-  padding-left: ${(props) => props.theme.eui.paddingSizes.xs}; 
+  padding-left: ${(props) => props.theme.eui.paddingSizes.xs};
   width: 100%;
   height: 100%;
 `;

x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_hosts_anomalies.ts

@@ -7,6 +7,7 @@
 import { useMemo, useState, useCallback, useEffect, useReducer } from 'react';
 import {
   INFA_ML_GET_METRICS_HOSTS_ANOMALIES_PATH,
+  Metric,
   Sort,
   Pagination,
   PaginationCursor,
@@ -168,7 +169,7 @@ export const useMetricsHostsAnomaliesResults = ({
   const [getMetricsHostsAnomaliesRequest, getMetricsHostsAnomalies] = useTrackedPromise(
     {
       cancelPreviousOn: 'creation',
-      createPromise: async () => {
+      createPromise: async (metric: Metric) => {
         const {
           timeRange: { start: queryStartTime, end: queryEndTime },
           sortOptions,
@@ -179,6 +180,7 @@ export const useMetricsHostsAnomaliesResults = ({
           sourceId,
           queryStartTime,
           queryEndTime,
+          metric,
           sortOptions,
           {
             ...paginationOptions,
@@ -249,10 +251,6 @@ export const useMetricsHostsAnomaliesResults = ({
     });
   }, [filteredDatasets]);
 
-  useEffect(() => {
-    getMetricsHostsAnomalies();
-  }, [getMetricsHostsAnomalies]); // TODO: FIgure out the deps here.
-
   const handleFetchNextPage = useCallback(() => {
     if (reducerState.lastReceivedCursors) {
       dispatch({ type: 'fetchNextPage' });
@@ -294,6 +292,7 @@ export const callGetMetricHostsAnomaliesAPI = async (
   sourceId: string,
   startTime: number,
   endTime: number,
+  metric: Metric,
   sort: Sort,
   pagination: Pagination
 ) => {
@@ -307,6 +306,7 @@ export const callGetMetricHostsAnomaliesAPI = async (
             startTime,
             endTime,
           },
+          metric,
           sort,
           pagination,
         },