[Uptime] Ml detection of duration anomalies

src/plugins/kibana_react/public/index.ts

@@ -26,6 +26,7 @@ export * from './field_icon';
 export * from './table_list_view';
 export * from './split_panel';
 export { ValidatedDualRange } from './validated_range';
+export * from './notifications';
 export { Markdown, MarkdownSimple } from './markdown';
 export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';

x-pack/legacy/plugins/uptime/common/constants/rest_api.ts

@@ -16,4 +16,10 @@ export enum API_URLS {
   PING_HISTOGRAM = `/api/uptime/ping/histogram`,
   SNAPSHOT_COUNT = `/api/uptime/snapshot/count`,
   FILTERS = `/api/uptime/filters`,
+
+  ML_MODULE_JOBS = `/api/ml/modules/jobs_exist/`,
+  ML_SETUP_MODULE = '/api/ml/modules/setup/',
+  ML_DELETE_JOB = `/api/ml/jobs/delete_jobs`,
+  ML_CAPABILITIES = '/api/ml/ml_capabilities',
+  ML_ANOMALIES_RESULT = `/api/ml/results/anomalies_table_data`,
 }

x-pack/legacy/plugins/uptime/common/constants/ui.ts

@@ -13,6 +13,10 @@ export enum STATUS {
   DOWN = 'down',
 }
 
+export const ML_JOB_ID = 'high_latency_by_geo';
+
+export const ML_MODULE_ID = 'uptime_heartbeat';
+
 export const UNNAMED_LOCATION = 'Unnamed-location';
 
 export const SHORT_TS_LOCALE = 'en-short-locale';

x-pack/legacy/plugins/uptime/public/components/connected/charts/monitor_duration.tsx

@@ -7,35 +7,80 @@
 import React, { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useUrlParams } from '../../../hooks';
-import { getMonitorDurationAction } from '../../../state/actions';
+import {
+  getAnomalyRecordsAction,
+  getMLCapabilitiesAction,
+  getMonitorDurationAction,
+} from '../../../state/actions';
 import { DurationChartComponent } from '../../functional/charts';
-import { selectDurationLines } from '../../../state/selectors';
+import {
+  anomaliesSelector,
+  hasMLFeatureAvailable,
+  hasMLJobSelector,
+  selectDurationLines,
+} from '../../../state/selectors';
 import { UptimeRefreshContext } from '../../../contexts';
+import { getMLJobId } from '../../../state/api/ml_anomaly';
+import { JobStat } from '../../../../../../../plugins/ml/common/types/anomaly_detection_jobs';
 
 interface Props {
   monitorId: string;
 }
 
 export const DurationChart: React.FC<Props> = ({ monitorId }: Props) => {
   const [getUrlParams] = useUrlParams();
-  const { dateRangeStart, dateRangeEnd } = getUrlParams();
+  const {
+    dateRangeStart,
+    dateRangeEnd,
+    absoluteDateRangeStart,
+    absoluteDateRangeEnd,
+  } = getUrlParams();
 
-  const { monitor_duration, loading } = useSelector(selectDurationLines);
+  const { durationLines, loading } = useSelector(selectDurationLines);
+
+  const isMLAvailable = useSelector(hasMLFeatureAvailable);
+
+  const { data: mlJobs } = useSelector(hasMLJobSelector);
+
+  const hasMLJob =
+    !!mlJobs?.jobsExist &&
+    !!mlJobs.jobs.find((job: JobStat) => job.id === getMLJobId(monitorId as string));
+
+  const anomalies = useSelector(anomaliesSelector);
 
   const dispatch = useDispatch();
 
   const { lastRefresh } = useContext(UptimeRefreshContext);
 
   useEffect(() => {
-    dispatch(
-      getMonitorDurationAction({ monitorId, dateStart: dateRangeStart, dateEnd: dateRangeEnd })
-    );
+    if (isMLAvailable) {
+      const anomalyParams = {
+        listOfMonitorIds: [monitorId],
+        dateStart: absoluteDateRangeStart,
+        dateEnd: absoluteDateRangeEnd,
+      };
+
+      dispatch(getAnomalyRecordsAction.get(anomalyParams));
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dateRangeStart, dateRangeEnd, dispatch, lastRefresh, monitorId, isMLAvailable]);
+
+  useEffect(() => {
+    const params = { monitorId, dateStart: dateRangeStart, dateEnd: dateRangeEnd };
+    dispatch(getMonitorDurationAction(params));
   }, [dateRangeStart, dateRangeEnd, dispatch, lastRefresh, monitorId]);
 
+  useEffect(() => {
+    dispatch(getMLCapabilitiesAction.get());
+  }, [dispatch]);
+
   return (
     <DurationChartComponent
-      locationDurationLines={monitor_duration?.locationDurationLines ?? []}
+      anomalies={anomalies}
+      hasMLJob={hasMLJob}
       loading={loading}
+      locationDurationLines={durationLines?.locationDurationLines ?? []}
     />
   );
 };

x-pack/legacy/plugins/uptime/public/components/connected/empty_state/empty_state.tsx

@@ -11,7 +11,7 @@ import { indexStatusSelector } from '../../../state/selectors';
 import { EmptyStateComponent } from '../../functional/empty_state/empty_state';
 
 export const EmptyState: React.FC = ({ children }) => {
-  const { data, loading, errors } = useSelector(indexStatusSelector);
+  const { data, loading, error } = useSelector(indexStatusSelector);
 
   const dispatch = useDispatch();
 
@@ -23,7 +23,7 @@ export const EmptyState: React.FC = ({ children }) => {
     <EmptyStateComponent
       statesIndexStatus={data}
       loading={loading}
-      errors={errors}
+      errors={error ? [error] : undefined}
       children={children as React.ReactElement}
     />
   );

x-pack/legacy/plugins/uptime/public/components/connected/monitor/status_bar_container.tsx

@@ -22,7 +22,8 @@ interface StateProps {
 }
 
 interface DispatchProps {
-  loadMonitorStatus: (dateStart: string, dateEnd: string, monitorId: string) => void;
+  loadMonitorStatus: typeof getMonitorStatusAction;
+  loadSelectedMonitor: typeof getSelectedMonitorAction;
 }
 
 interface OwnProps {
@@ -33,6 +34,7 @@ type Props = OwnProps & StateProps & DispatchProps;
 
 const Container: React.FC<Props> = ({
   loadMonitorStatus,
+  loadSelectedMonitor,
   monitorId,
   monitorStatus,
   monitorLocations,
@@ -43,8 +45,9 @@ const Container: React.FC<Props> = ({
   const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = getUrlParams();
 
   useEffect(() => {
-    loadMonitorStatus(dateStart, dateEnd, monitorId);
-  }, [monitorId, dateStart, dateEnd, loadMonitorStatus, lastRefresh]);
+    loadMonitorStatus({ dateStart, dateEnd, monitorId });
+    loadSelectedMonitor({ monitorId });
+  }, [monitorId, dateStart, dateEnd, loadMonitorStatus, lastRefresh, loadSelectedMonitor]);
 
   return (
     <MonitorStatusBarComponent
@@ -61,20 +64,8 @@ const mapStateToProps = (state: AppState, ownProps: OwnProps) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchProps => ({
-  loadMonitorStatus: (dateStart: string, dateEnd: string, monitorId: string) => {
-    dispatch(
-      getMonitorStatusAction({
-        monitorId,
-        dateStart,
-        dateEnd,
-      })
-    );
-    dispatch(
-      getSelectedMonitorAction({
-        monitorId,
-      })
-    );
-  },
+  loadSelectedMonitor: params => dispatch(getSelectedMonitorAction(params)),
+  loadMonitorStatus: params => dispatch(getMonitorStatusAction(params)),
 });
 
 // @ts-ignore TODO: Investigate typescript issues here

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/duration_charts.test.tsx

@@ -64,8 +64,10 @@ describe('MonitorCharts component', () => {
   it('renders the component without errors', () => {
     const component = shallowWithRouter(
       <DurationChartComponent
-        locationDurationLines={chartResponse.monitorChartsData.locationDurationLines}
         loading={false}
+        hasMLJob={false}
+        anomalies={[]}
+        locationDurationLines={chartResponse.monitorChartsData.locationDurationLines}
       />
     );
     expect(component).toMatchSnapshot();

x-pack/legacy/plugins/uptime/public/components/functional/charts/annotation_tooltip.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 React from 'react';
+import moment from 'moment';
+import styled from 'styled-components';
+
+const Header = styled.div`
+  font-weight: bold;
+  padding-left: 4px;
+`;
+
+const RecordSeverity = styled.div`
+  font-weight: bold;
+  border-left: 4px solid ${props => props.color};
+  padding-left: 2px;
+`;
+
+const TimeDiv = styled.div`
+  font-weight: 500;
+  border-bottom: 1px solid gray;
+  padding-bottom: 2px;
+`;
+
+export const AnnotationTooltip = ({ details }: { details: string }) => {
+  const data = JSON.parse(details);
+
+  function capitalizeFirstLetter(str: string) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  return (
+    <>
+      <TimeDiv>{moment(data.time).format('lll')}</TimeDiv>
+      <Header>Score: {data.score.toFixed(2)}</Header>
+      <RecordSeverity color={data.color}>
+        Severity: {capitalizeFirstLetter(data.severity)}
+      </RecordSeverity>
+    </>
+  );
+};

x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx

@@ -4,19 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Axis, Chart, Position, timeFormatter, Settings } from '@elastic/charts';
-import { EuiPanel, EuiTitle } from '@elastic/eui';
-import React from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
+import { Axis, Chart, Position, timeFormatter, Settings } from '@elastic/charts';
+import { SeriesIdentifier } from '@elastic/charts/dist/chart_types/xy_chart/utils/series';
 import { getChartDateLabel } from '../../../lib/helper';
 import { LocationDurationLine } from '../../../../common/types';
 import { DurationLineSeriesList } from './duration_line_series_list';
 import { ChartWrapper } from './chart_wrapper';
 import { useUrlParams } from '../../../hooks';
 import { getTickFormat } from './get_tick_format';
 import { ChartEmptyState } from './chart_empty_state';
+import { DurationAnomaliesBar } from './duration_line_bar_list';
+import { MLIntegrationComponent } from '../../monitor_details/ml/ml_integeration';
 
 interface DurationChartProps {
   /**
@@ -29,6 +32,10 @@ interface DurationChartProps {
    * To represent the loading spinner on chart
    */
   loading: boolean;
+
+  hasMLJob: boolean;
+
+  anomalies: any;
 }
 
 /**
@@ -37,29 +44,66 @@ interface DurationChartProps {
  * milliseconds.
  * @param props The props required for this component to render properly
  */
-export const DurationChartComponent = ({ locationDurationLines, loading }: DurationChartProps) => {
+export const DurationChartComponent = ({
+  locationDurationLines,
+  anomalies,
+  loading,
+  hasMLJob,
+}: DurationChartProps) => {
   const hasLines = locationDurationLines.length > 0;
   const [getUrlParams, updateUrlParams] = useUrlParams();
   const { absoluteDateRangeStart: min, absoluteDateRangeEnd: max } = getUrlParams();
 
+  const [hiddenLegends, setHiddenLegends] = useState<string[]>([]);
+
   const onBrushEnd = (minX: number, maxX: number) => {
     updateUrlParams({
       dateRangeStart: moment(minX).toISOString(),
       dateRangeEnd: moment(maxX).toISOString(),
     });
   };
+
+  const legendToggleVisibility = (legendItem: SeriesIdentifier | null) => {
+    if (legendItem) {
+      setHiddenLegends(prevState => {
+        if (prevState.includes(legendItem.specId)) {
+          return [...prevState.filter(item => item !== legendItem.specId)];
+        } else {
+          return [...prevState, legendItem.specId];
+        }
+      });
+    }
+  };
+
   return (
     <>
       <EuiPanel paddingSize="m">
-        <EuiTitle size="xs">
-          <h4>
-            <FormattedMessage
-              id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
-              defaultMessage="Monitor duration"
-              description="The 'ms' is an abbreviation for milliseconds."
-            />
-          </h4>
-        </EuiTitle>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiTitle size="xs">
+              <h4>
+                {hasMLJob ? (
+                  <FormattedMessage
+                    id="xpack.uptime.monitorCharts.monitorDuration.titleLabelWithAnomaly"
+                    defaultMessage="Monitor duration (Anomalies: {noOfAnomalies})"
+                    description="The 'ms' is an abbreviation for milliseconds."
+                    values={{ noOfAnomalies: anomalies?.anomalies?.length ?? 0 }}
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.uptime.monitorCharts.monitorDuration.titleLabel"
+                    defaultMessage="Monitor duration"
+                    description="The 'ms' is an abbreviation for milliseconds."
+                  />
+                )}
+              </h4>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <MLIntegrationComponent />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
         <ChartWrapper height="400px" loading={loading}>
           {hasLines ? (
             <Chart>
@@ -68,6 +112,7 @@ export const DurationChartComponent = ({ locationDurationLines, loading }: Durat
                 showLegend={true}
                 legendPosition={Position.Bottom}
                 onBrushEnd={onBrushEnd}
+                onLegendItemClick={legendToggleVisibility}
               />
               <Axis
                 id="bottom"
@@ -88,6 +133,7 @@ export const DurationChartComponent = ({ locationDurationLines, loading }: Durat
                 })}
               />
               <DurationLineSeriesList lines={locationDurationLines} />
+              <DurationAnomaliesBar anomalies={anomalies} hiddenLegends={hiddenLegends} />
             </Chart>
           ) : (
             <ChartEmptyState