[ML] Configure sorting for partition values on Single Metric Viewer

x-pack/plugins/ml/common/types/anomalies.ts

@@ -74,3 +74,5 @@ export interface AnomalyCategorizerStatsDoc {
   log_time: number;
   timestamp: number;
 }
+
+export type EntityFieldType = 'partition_field' | 'over_field' | 'by_field';

x-pack/plugins/ml/common/types/storage.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 { EntityFieldType } from './anomalies';
+
+export const ML_PARTITION_FIELDS_CONFIG = 'ml.singleMetricViewer.partitionFields';
+
+export type PartitionFieldConfig =
+  | {
+      anomalousOnly: boolean;
+      sort: {
+        by: string; // 'anomaly_score' | 'name';
+        order: string; // 'asc' | 'desc';
+      };
+    }
+  | undefined;
+
+export type PartitionFieldsConfig =
+  | Partial<Record<EntityFieldType, PartitionFieldConfig>>
+  | undefined;
+
+export type MlStorage = Partial<{
+  [ML_PARTITION_FIELDS_CONFIG]: PartitionFieldsConfig;
+}> | null;

x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts

@@ -14,6 +14,7 @@ import { SecurityPluginSetup } from '../../../../../security/public';
 import { LicenseManagementUIPluginSetup } from '../../../../../license_management/public';
 import { SharePluginStart } from '../../../../../../../src/plugins/share/public';
 import { MlServicesContext } from '../../app';
+import { IStorageWrapper } from '../../../../../../../src/plugins/kibana_utils/public';
 
 interface StartPlugins {
   data: DataPublicPluginStart;
@@ -22,6 +23,10 @@ interface StartPlugins {
   share: SharePluginStart;
 }
 export type StartServices = CoreStart &
-  StartPlugins & { appName: string; kibanaVersion: string } & MlServicesContext;
+  StartPlugins & {
+    appName: string;
+    kibanaVersion: string;
+    storage: IStorageWrapper;
+  } & MlServicesContext;
 export const useMlKibana = () => useKibana<StartServices>();
 export type MlKibanaReactContextValue = KibanaReactContextValue<StartServices>;

x-pack/plugins/ml/public/application/contexts/ml/use_storage.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { useCallback, useState } from 'react';
+import { useMlKibana } from '../kibana';
+
+/**
+ * Hook for accessing and changing a value in the storage.
+ * @param key - Storage key
+ * @param initValue
+ */
+export function useStorage<T>(key: string, initValue?: T): [T, (value: T) => void] {
+  const {
+    services: { storage },
+  } = useMlKibana();
+
+  const [val, setVal] = useState<T>(storage.get(key) ?? initValue);
+
+  const setStorage = useCallback((value: T): void => {
+    try {
+      storage.set(key, value);
+      setVal(value);
+    } catch (e) {
+      throw new Error('Unable to update storage with provided value');
+    }
+  }, []);
+
+  return [val, setStorage];
+}

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

@@ -11,6 +11,7 @@ import { basePath } from './index';
 import { JobId } from '../../../../common/types/anomaly_detection_jobs';
 import { JOB_ID, PARTITION_FIELD_VALUE } from '../../../../common/constants/anomalies';
 import { PartitionFieldsDefinition } from '../results_service/result_service_rx';
+import { PartitionFieldsConfig } from '../../../../common/types/storage';
 
 export const resultsApiProvider = (httpService: HttpService) => ({
   getAnomaliesTableData(
@@ -87,9 +88,17 @@ export const resultsApiProvider = (httpService: HttpService) => ({
     searchTerm: Record<string, string>,
     criteriaFields: Array<{ fieldName: string; fieldValue: any }>,
     earliestMs: number,
-    latestMs: number
+    latestMs: number,
+    fieldsConfig?: PartitionFieldsConfig
   ) {
-    const body = JSON.stringify({ jobId, searchTerm, criteriaFields, earliestMs, latestMs });
+    const body = JSON.stringify({
+      jobId,
+      searchTerm,
+      criteriaFields,
+      earliestMs,
+      latestMs,
+      fieldsConfig,
+    });
     return httpService.http$<PartitionFieldsDefinition>({
       path: `${basePath()}/results/partition_fields_values`,
       method: 'POST',

x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss

@@ -37,25 +37,6 @@
     }
   }
 
-  .series-controls {
-    div.entity-controls {
-      display: inline-block;
-      padding-left: $euiSize;
-
-      input.entity-input-blank {
-        border-color: $euiColorDanger;
-      }
-
-      .entity-input {
-        width: 300px;
-      }
-    }
-
-    button {
-      margin-left: $euiSizeXS;
-    }
-  }
-
   .forecast-controls {
     float: right;
   }

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

@@ -9,27 +9,56 @@ import React, { Component } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { EuiComboBox, EuiComboBoxOptionOption, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiSwitch,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPopover,
+  EuiText,
+  EuiRadioGroup,
+  EuiHorizontalRule,
+  EuiToolTip,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiRadioGroupOption,
+} from '@elastic/eui';
+import { EntityFieldType } from '../../../../../common/types/anomalies';
+import { UiPartitionFieldConfig } from '../series_controls/series_controls';
 
 export interface Entity {
   fieldName: string;
+  fieldType: EntityFieldType;
   fieldValue: any;
-  fieldValues: any;
+  fieldValues?: any;
 }
 
-interface EntityControlProps {
+/**
+ * Configuration for entity field dropdown options
+ */
+export interface FieldConfig {
+  isAnomalousOnly: boolean;
+}
+
+export interface EntityControlProps {
   entity: Entity;
   entityFieldValueChanged: (entity: Entity, fieldValue: any) => void;
   isLoading: boolean;
   onSearchChange: (entity: Entity, queryTerm: string) => void;
+  config: UiPartitionFieldConfig;
+  onConfigChange: (fieldType: EntityFieldType, config: Partial<UiPartitionFieldConfig>) => void;
   forceSelection: boolean;
   options: Array<EuiComboBoxOptionOption<string>>;
+  isModelPlotEnabled: boolean;
 }
 
 interface EntityControlState {
   selectedOptions: Array<EuiComboBoxOptionOption<string>> | undefined;
   isLoading: boolean;
   options: Array<EuiComboBoxOptionOption<string>> | undefined;
+  isEntityConfigPopoverOpen: boolean;
 }
 
 export const EMPTY_FIELD_VALUE_LABEL = i18n.translate(
@@ -46,6 +75,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     selectedOptions: undefined,
     options: undefined,
     isLoading: false,
+    isEntityConfigPopoverOpen: false,
   };
 
   componentDidUpdate(prevProps: EntityControlProps) {
@@ -111,6 +141,39 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     return label === EMPTY_FIELD_VALUE_LABEL ? <i>{label}</i> : label;
   };
 
+  getSortOptions = (): EuiRadioGroupOption[] => {
+    return [
+      {
+        id: 'anomaly_score',
+        label: i18n.translate('xpack.ml.timeSeriesExplorer.sortByScoreLabel', {
+          defaultMessage: 'Anomaly score',
+        }),
+        disabled: !this.props.config?.anomalousOnly && this.props.isModelPlotEnabled,
+      },
+      {
+        id: 'name',
+        label: i18n.translate('xpack.ml.timeSeriesExplorer.sortByNameLabel', {
+          defaultMessage: 'Name',
+        }),
+      },
+    ];
+  };
+
+  private readonly orderOptions: EuiRadioGroupOption[] = [
+    {
+      id: 'asc',
+      label: i18n.translate('xpack.ml.timeSeriesExplorer.ascOptionsOrderLabel', {
+        defaultMessage: 'asc',
+      }),
+    },
+    {
+      id: 'desc',
+      label: i18n.translate('xpack.ml.timeSeriesExplorer.descOptionsOrderLabel', {
+        defaultMessage: 'desc',
+      }),
+    },
+  ];
+
   render() {
     const { entity, forceSelection } = this.props;
     const { isLoading, options, selectedOptions } = this.state;
@@ -136,6 +199,132 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
         isClearable={false}
         renderOption={this.renderOption}
         data-test-subj={`mlSingleMetricViewerEntitySelection ${entity.fieldName}`}
+        prepend={
+          <EuiPopover
+            ownFocus
+            button={
+              <EuiButtonIcon
+                color="text"
+                iconSize="xxl"
+                iconType="gear"
+                aria-label={i18n.translate('xpack.ml.timeSeriesExplorer.editControlConfiguration', {
+                  defaultMessage: 'Edit field configuration',
+                })}
+                onClick={() => {
+                  this.setState({
+                    isEntityConfigPopoverOpen: !this.state.isEntityConfigPopoverOpen,
+                  });
+                }}
+                data-test-subj={`mlSingleMetricViewerEntitySelectionConfigButton_${entity.fieldName}`}
+              />
+            }
+            isOpen={this.state.isEntityConfigPopoverOpen}
+            closePopover={() => {
+              this.setState({
+                isEntityConfigPopoverOpen: false,
+              });
+            }}
+          >
+            <EuiText>
+              <EuiFlexGroup gutterSize={'xs'} alignItems={'center'}>
+                <EuiFlexItem grow={false}>
+                  <EuiSwitch
+                    label={
+                      <FormattedMessage
+                        id="xpack.ml.timeSeriesExplorer.anomalousOnlyLabel"
+                        defaultMessage="Anomalous only"
+                      />
+                    }
+                    checked={!!this.props.config?.anomalousOnly}
+                    onChange={(e) => {
+                      const isAnomalousOnly = e.target.checked;
+                      this.props.onConfigChange(this.props.entity.fieldType, {
+                        anomalousOnly: isAnomalousOnly,
+                        sort: {
+                          order: this.props.config.sort.order,
+                          by: this.props.config.sort.by,
+                        },
+                      });
+                    }}
+                    compressed
+                    data-test-subj={`mlSingleMetricViewerEntitySelectionConfigAnomalousOnly_${entity.fieldName}`}
+                  />
+                </EuiFlexItem>
+
+                <EuiFlexItem grow={false} style={{ width: '16px', height: '24px' }}>
+                  {!this.props.config?.anomalousOnly ? (
+                    <EuiToolTip
+                      position="top"
+                      content={
+                        this.props.isModelPlotEnabled ? (
+                          <FormattedMessage
+                            id="xpack.ml.timeSeriesExplorer.nonAnomalousResultsWithModelPlotInfo"
+                            defaultMessage="You will be suggested to select values for all possible model plot results"
+                          />
+                        ) : (
+                          <FormattedMessage
+                            id="xpack.ml.timeSeriesExplorer.nonAnomalousResultsAllRecordsInfo"
+                            defaultMessage="You will be suggested to select values for all records created during the job lifetime"
+                          />
+                        )
+                      }
+                    >
+                      <EuiIcon tabIndex={0} type="iInCircle" color={'accent'} />
+                    </EuiToolTip>
+                  ) : null}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+
+              <EuiHorizontalRule margin="s" />
+              <EuiFormRow
+                label={
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.sortByLabel"
+                    defaultMessage="Sort by"
+                  />
+                }
+              >
+                <EuiRadioGroup
+                  options={this.getSortOptions()}
+                  idSelected={this.props.config?.sort?.by}
+                  onChange={(id) => {
+                    this.props.onConfigChange(this.props.entity.fieldType, {
+                      sort: {
+                        order: this.props.config.sort.order,
+                        by: id,
+                      },
+                    });
+                  }}
+                  compressed
+                  data-test-subj={`mlSingleMetricViewerEntitySelectionConfigSortBy_${entity.fieldName}`}
+                />
+              </EuiFormRow>
+              <EuiFormRow
+                label={
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.orderLabel"
+                    defaultMessage="Order"
+                  />
+                }
+              >
+                <EuiRadioGroup
+                  options={this.orderOptions}
+                  idSelected={this.props.config?.sort?.order}
+                  onChange={(id) => {
+                    this.props.onConfigChange(this.props.entity.fieldType, {
+                      sort: {
+                        by: this.props.config.sort.by,
+                        order: id,
+                      },
+                    });
+                  }}
+                  compressed
+                  data-test-subj={`mlSingleMetricViewerEntitySelectionConfigOrder_${entity.fieldName}`}
+                />
+              </EuiFormRow>
+            </EuiText>
+          </EuiPopover>
+        }
       />
     );
 

x-pack/plugins/ml/public/application/timeseriesexplorer/components/series_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 { SeriesControls } from './series_controls';