[ML] Add option for anomaly charts for metric detector should plot min, mean or max as appropriate

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_config_builder.js

@@ -13,6 +13,7 @@ import { parseInterval } from '../../../../common/util/parse_interval';
 import { getEntityFieldList } from '../../../../common/util/anomaly_utils';
 import { buildConfigFromDetector } from '../../util/chart_config_builder';
 import { mlJobService } from '../../services/job_service';
+import { mlFunctionToESAggregation } from '../../../../common/util/job_utils';
 
 // Builds the chart configuration for the provided anomaly record, returning
 // an object with properties used for the display (series function and field, aggregation interval etc),
@@ -48,6 +49,10 @@ export function buildConfig(record) {
   // define the metric series to be plotted.
   config.entityFields = getEntityFieldList(record);
 
+  if (record.function === 'metric') {
+    config.metricFunction = mlFunctionToESAggregation(record.function_description);
+  }
+
   // Build the tooltip data for the chart info icon, showing further details on what is being plotted.
   let functionLabel = config.metricFunction;
   if (config.metricFieldName !== undefined) {

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js

@@ -46,8 +46,6 @@ const ML_TIME_FIELD_NAME = 'timestamp';
 const USE_OVERALL_CHART_LIMITS = false;
 const MAX_CHARTS_PER_ROW = 4;
 
-// callback(getDefaultChartsData());
-
 export const anomalyDataChange = function (
   chartsContainerWidth,
   anomalyRecords,

x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx

@@ -38,6 +38,7 @@ import { useResolver } from '../use_resolver';
 import { basicResolvers } from '../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../breadcrumbs';
 import { useTimefilter } from '../../contexts/kibana';
+import { useToastNotificationService } from '../../services/toast_notification_service';
 
 export const timeSeriesExplorerRouteFactory = (
   navigateToPath: NavigateToPath,
@@ -88,6 +89,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   config,
   jobsWithTimeRange,
 }) => {
+  const toastNotificationService = useToastNotificationService();
   const [appState, setAppState] = useUrlState('_a');
   const [globalState, setGlobalState] = useUrlState('_g');
   const [lastRefresh, setLastRefresh] = useState(0);
@@ -293,6 +295,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   return (
     <TimeSeriesExplorer
       {...{
+        toastNotificationService,
         appStateHandler,
         autoZoomDuration,
         bounds,

x-pack/plugins/ml/public/application/services/ml_api_service/results.ts

@@ -24,8 +24,9 @@ export const resultsApiProvider = (httpService: HttpService) => ({
     latestMs: number,
     dateFormatTz: string,
     maxRecords: number,
-    maxExamples: number,
-    influencersFilterQuery: any
+    maxExamples?: number,
+    influencersFilterQuery?: any,
+    functionDescription?: string | undefined
   ) {
     const body = JSON.stringify({
       jobIds,
@@ -39,6 +40,7 @@ export const resultsApiProvider = (httpService: HttpService) => ({
       maxRecords,
       maxExamples,
       influencersFilterQuery,
+      functionDescription,
     });
 
     return httpService.http$<any>({

x-pack/plugins/ml/public/application/services/results_service/result_service_rx.ts

@@ -19,6 +19,7 @@ import { ML_MEDIAN_PERCENTS } from '../../../../common/util/job_utils';
 import { JobId } from '../../../../common/types/anomaly_detection_jobs';
 import { MlApiServices } from '../ml_api_service';
 import { CriteriaField } from './index';
+import { aggregationTypeTransform } from '../../../../common/util/anomaly_utils';
 
 interface ResultResponse {
   success: boolean;
@@ -347,9 +348,10 @@ export function resultsServiceRxProvider(mlApiServices: MlApiServices) {
       jobIds: string[],
       criteriaFields: CriteriaField[],
       threshold: any,
-      earliestMs: number,
-      latestMs: number,
-      maxResults: number | undefined
+      earliestMs: number | null,
+      latestMs: number | null,
+      maxResults: number | undefined,
+      functionDescription?: string | undefined
     ): Observable<RecordsForCriteria> {
       const obj: RecordsForCriteria = { success: true, records: [] };
 
@@ -400,6 +402,19 @@ export function resultsServiceRxProvider(mlApiServices: MlApiServices) {
         });
       });
 
+      if (functionDescription !== undefined) {
+        const mlFunctionToPlotIfMetric =
+          functionDescription !== undefined
+            ? aggregationTypeTransform.toML(functionDescription)
+            : functionDescription;
+
+        boolCriteria.push({
+          term: {
+            function_description: mlFunctionToPlotIfMetric,
+          },
+        });
+      }
+
       return mlApiServices.results
         .anomalySearch$(
           {

x-pack/plugins/ml/public/application/services/results_service/results_service.d.ts

@@ -76,6 +76,7 @@ export function resultsServiceProvider(
     criteriaFields: any[],
     earliestMs: number,
     latestMs: number,
-    intervalMs: number
+    intervalMs: number,
+    actualPlotFunctionIfMetric?: string
   ): Promise<any>;
 };

x-pack/plugins/ml/public/application/services/results_service/results_service.js

@@ -12,6 +12,7 @@ import {
   ANOMALY_SWIM_LANE_HARD_LIMIT,
   SWIM_LANE_DEFAULT_PAGE_SIZE,
 } from '../../explorer/explorer_constants';
+import { aggregationTypeTransform } from '../../../../common/util/anomaly_utils';
 
 /**
  * Service for carrying out Elasticsearch queries to obtain data for the Ml Results dashboards.
@@ -1293,7 +1294,14 @@ export function resultsServiceProvider(mlApiServices) {
     // criteria, time range, and aggregation interval.
     // criteriaFields parameter must be an array, with each object in the array having 'fieldName'
     // 'fieldValue' properties.
-    getRecordMaxScoreByTime(jobId, criteriaFields, earliestMs, latestMs, intervalMs) {
+    getRecordMaxScoreByTime(
+      jobId,
+      criteriaFields,
+      earliestMs,
+      latestMs,
+      intervalMs,
+      actualPlotFunctionIfMetric
+    ) {
       return new Promise((resolve, reject) => {
         const obj = {
           success: true,
@@ -1321,7 +1329,18 @@ export function resultsServiceProvider(mlApiServices) {
             },
           });
         });
+        if (actualPlotFunctionIfMetric !== undefined) {
+          const mlFunctionToPlotIfMetric =
+            actualPlotFunctionIfMetric !== undefined
+              ? aggregationTypeTransform.toML(actualPlotFunctionIfMetric)
+              : actualPlotFunctionIfMetric;
 
+          mustCriteria.push({
+            term: {
+              function_description: mlFunctionToPlotIfMetric,
+            },
+          });
+        }
         mlApiServices.results
           .anomalySearch(
             {

x-pack/plugins/ml/public/application/timeseriesexplorer/components/plot_function_controls/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { PlotByFunctionControls } from './plot_function_controls';

x-pack/plugins/ml/public/application/timeseriesexplorer/components/plot_function_controls/plot_function_controls.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const plotByFunctionOptions = [
+  {
+    value: 'mean',
+    text: i18n.translate('xpack.ml.timeSeriesExplorer.plotByAvgOptionLabel', {
+      defaultMessage: 'mean',
+    }),
+  },
+  {
+    value: 'min',
+    text: i18n.translate('xpack.ml.timeSeriesExplorer.plotByMinOptionLabel', {
+      defaultMessage: 'min',
+    }),
+  },
+  {
+    value: 'max',
+    text: i18n.translate('xpack.ml.timeSeriesExplorer.plotByMaxOptionLabel', {
+      defaultMessage: 'max',
+    }),
+  },
+];
+export const PlotByFunctionControls = ({
+  functionDescription,
+  setFunctionDescription,
+}: {
+  functionDescription: undefined | string;
+  setFunctionDescription: (func: string) => void;
+}) => {
+  if (functionDescription === undefined) return null;
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiFormRow
+        label={i18n.translate('xpack.ml.timeSeriesExplorer.metricPlotByOption', {
+          defaultMessage: 'Function',
+        })}
+      >
+        <EuiSelect
+          options={plotByFunctionOptions}
+          value={functionDescription}
+          onChange={(e) => setFunctionDescription(e.target.value)}
+          aria-label={i18n.translate('xpack.ml.timeSeriesExplorer.metricPlotByOptionLabel', {
+            defaultMessage: 'Pick function to plot by (min, max, or average) if metric function',
+          })}
+        />
+      </EuiFormRow>
+    </EuiFlexItem>
+  );
+};

x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js

@@ -1475,6 +1475,22 @@ class TimeseriesChartIntl extends Component {
         });
       }
 
+      if (marker.metricFunction) {
+        tooltipData.push({
+          label: i18n.translate(
+            'xpack.ml.timeSeriesExplorer.timeSeriesChart.metricActualPlotFunctionLabel',
+            {
+              defaultMessage: 'function',
+            }
+          ),
+          value: marker.metricFunction,
+          seriesIdentifier: {
+            key: seriesKey,
+          },
+          valueAccessor: 'metric_function',
+        });
+      }
+
       if (modelPlotEnabled === false) {
         // Show actual/typical when available except for rare detectors.
         // Rare detectors always have 1 as actual and the probability as typical.

x-pack/plugins/ml/public/application/timeseriesexplorer/get_criteria_fields.ts

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+/**
+ * Updates criteria fields for API calls, e.g. getAnomaliesTableData
+ * @param detectorIndex
+ * @param entities
+ */
+export const getCriteriaFields = (detectorIndex: number, entities: Record<string, any>) => {
+  // Only filter on the entity if the field has a value.
+  const nonBlankEntities = entities.filter(
+    (entity: { fieldValue: any }) => entity.fieldValue !== null
+  );
+  return [
+    {
+      fieldName: 'detector_index',
+      fieldValue: detectorIndex,
+    },
+    ...nonBlankEntities,
+  ];
+};

x-pack/plugins/ml/public/application/timeseriesexplorer/get_function_description.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { mlResultsService } from '../services/results_service';
+import { ToastNotificationService } from '../services/toast_notification_service';
+import { getControlsForDetector } from './get_controls_for_detector';
+import { getCriteriaFields } from './get_criteria_fields';
+import { CombinedJob } from '../../../common/types/anomaly_detection_jobs';
+
+/**
+ * Get the function description from the record with the highest anomaly score
+ */
+export const getFunctionDescription = async (
+  {
+    selectedDetectorIndex,
+    selectedEntities,
+    selectedJobId,
+    selectedJob,
+  }: {
+    selectedDetectorIndex: number;
+    selectedEntities: Record<string, any>;
+    selectedJobId: string;
+    selectedJob: CombinedJob;
+  },
+  toastNotificationService: ToastNotificationService
+) => {
+  // if the detector's function is metric, fetch the highest scoring anomaly record
+  // and set to plot the function_description (avg/min/max) of that record by default
+  if (selectedJob?.analysis_config?.detectors[selectedDetectorIndex]?.function !== 'metric') return;
+
+  const entityControls = getControlsForDetector(
+    selectedDetectorIndex,
+    selectedEntities,
+    selectedJobId
+  );
+  const criteriaFields = getCriteriaFields(selectedDetectorIndex, entityControls);
+  try {
+    const resp = await mlResultsService
+      .getRecordsForCriteria([selectedJob.job_id], criteriaFields, 0, null, null, 1)
+      .toPromise();
+    if (Array.isArray(resp?.records) && resp.records.length === 1) {
+      const highestScoringAnomaly = resp.records[0];
+      return highestScoringAnomaly?.function_description;
+    }
+  } catch (error) {
+    toastNotificationService.displayErrorToast(
+      error,
+      i18n.translate('xpack.ml.timeSeriesExplorer.highestAnomalyScoreErrorToastTitle', {
+        defaultMessage: 'An error occurred getting record with the highest anomaly score',
+      })
+    );
+  }
+};

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseries_search_service.ts

@@ -26,7 +26,8 @@ function getMetricData(
   entityFields: EntityField[],
   earliestMs: number,
   latestMs: number,
-  intervalMs: number
+  intervalMs: number,
+  esMetricFunction?: string
 ): Observable<ModelPlotOutput> {
   if (
     isModelPlotChartableForDetector(job, detectorIndex) &&
@@ -88,7 +89,7 @@ function getMetricData(
         chartConfig.datafeedConfig.indices,
         entityFields,
         chartConfig.datafeedConfig.query,
-        chartConfig.metricFunction,
+        esMetricFunction ?? chartConfig.metricFunction,
         chartConfig.metricFieldName,
         chartConfig.timeField,
         earliestMs,