[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_chart_single_metric.js

@@ -493,6 +493,22 @@ export class ExplorerChartSingleMetric extends React.Component {
         });
       }
 
+      if (marker.metricActualPlotFunction !== undefined) {
+        tooltipData.push({
+          label: i18n.translate(
+            'xpack.ml.explorer.singleMetricChart.metricActualPlotFunctionLabel',
+            {
+              defaultMessage: 'function',
+            }
+          ),
+          value: marker.metricActualPlotFunction,
+          seriesIdentifier: {
+            key: seriesKey,
+          },
+          valueAccessor: 'metricActualPlotFunction',
+        });
+      }
+
       tooltipService.show(tooltipData, circle, {
         x: LINE_CHART_ANOMALY_RADIUS * 3,
         y: LINE_CHART_ANOMALY_RADIUS * 2,

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/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,
+    actualPlotFunction?: string | undefined
   ) {
     const body = JSON.stringify({
       jobIds,
@@ -39,6 +40,7 @@ export const resultsApiProvider = (httpService: HttpService) => ({
       maxRecords,
       maxExamples,
       influencersFilterQuery,
+      actualPlotFunction,
     });
 
     return httpService.http$<any>({

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

@@ -1272,7 +1272,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,
@@ -1300,6 +1307,14 @@ export function resultsServiceProvider(mlApiServices) {
             },
           });
         });
+        if (actualPlotFunctionIfMetric !== undefined && actualPlotFunctionIfMetric !== 'unknown') {
+          mustCriteria.push({
+            term: {
+              function_description:
+                actualPlotFunctionIfMetric === 'avg' ? 'mean' : actualPlotFunctionIfMetric,
+            },
+          });
+        }
 
         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,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 React from 'react';
+import { EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const plotByFunctionOptions = [
+  {
+    value: 'avg',
+    text: i18n.translate('xpack.ml.timeSeriesExplorer.plotByAvgOptionLabel', {
+      defaultMessage: 'average',
+    }),
+  },
+  {
+    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 = ({
+  actualPlotFunction,
+  setPlotByFunction,
+}: {
+  actualPlotFunction: undefined | string;
+  setPlotByFunction: (func: string) => void;
+}) => {
+  if (actualPlotFunction === 'unknown' || !actualPlotFunction) return null;
+  return (
+    <EuiFlexItem style={{ textAlign: 'right' }} grow={false}>
+      <EuiFormRow
+        label={i18n.translate('xpack.ml.timeSeriesExplorer.metricPlotByOption', {
+          defaultMessage: 'Function',
+        })}
+      >
+        <EuiSelect
+          options={plotByFunctionOptions}
+          value={actualPlotFunction ?? 'avg'}
+          onChange={(e) => setPlotByFunction(e.target.value)}
+          aria-label="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

@@ -1382,6 +1382,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_plot_by_options.ts

@@ -0,0 +1,35 @@
+/*
+ * 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 { mlJobService } from '../services/job_service';
+export const UNKNOWN_METRIC_PLOT_FUNCTION = 'unknown';
+
+export const getPlotByOptions = (
+  selectedJobId: string,
+  selectedDetectorIndex: number,
+  currentActualPlotFunction: string | undefined,
+  defaultFunctionToPlotIfMetric: string | undefined
+) => {
+  // only load the options to view chart by 'avg', 'min', or 'max'
+  // if the original function is 'metric'
+  const selectedJob = mlJobService.getJob(selectedJobId);
+
+  if (selectedJob === undefined) return;
+
+  const detectors = selectedJob.analysis_config.detectors;
+
+  if (detectors && detectors[selectedDetectorIndex]?.function) {
+    if (detectors[selectedDetectorIndex]?.function === 'metric') {
+      if (currentActualPlotFunction === undefined) {
+        // here we just know the detector is a metric function, but we don't know what to plot yet
+        // need to find the highest scoring anomaly record in order to pick the default view
+        return defaultFunctionToPlotIfMetric || UNKNOWN_METRIC_PLOT_FUNCTION;
+      }
+    } else {
+      return undefined;
+    }
+  }
+};

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,