[ML] Anomaly Detection: Annotations enhancements

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

@@ -73,8 +73,15 @@ export interface Annotation {
   annotation: string;
   job_id: string;
   type: ANNOTATION_TYPE.ANNOTATION | ANNOTATION_TYPE.COMMENT;
+  event?: string;
+  detector_index?: number;
+  partition_field_name?: string;
+  partition_field_value?: string;
+  over_field_name?: string;
+  over_field_value?: string;
+  by_field_name?: string;
+  by_field_value?: string;
 }
-
 export function isAnnotation(arg: any): arg is Annotation {
   return (
     arg.timestamp !== undefined &&
@@ -93,3 +100,27 @@ export function isAnnotations(arg: any): arg is Annotations {
   }
   return arg.every((d: Annotation) => isAnnotation(d));
 }
+
+export interface FieldToBucket {
+  field: string;
+  missing?: string | number;
+}
+
+export interface FieldToBucketResult {
+  key: string;
+  doc_count: number;
+}
+
+export interface TermAggregationResult {
+  doc_count_error_upper_bound: number;
+  sum_other_doc_count: number;
+  buckets: FieldToBucketResult[];
+}
+
+export type EsAggregationResult = Record<string, TermAggregationResult>;
+
+export interface GetAnnotationsResponse {
+  aggregations?: EsAggregationResult;
+  annotations: Record<string, Annotations>;
+  success: boolean;
+}

x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx

@@ -7,6 +7,7 @@
 import React, { Component, Fragment, FC, ReactNode } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import * as Rx from 'rxjs';
+import { cloneDeep } from 'lodash';
 
 import {
   EuiButton,
@@ -21,12 +22,12 @@ import {
   EuiSpacer,
   EuiTextArea,
   EuiTitle,
+  EuiCheckbox,
 } from '@elastic/eui';
 
 import { CommonProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-
 import { ANNOTATION_MAX_LENGTH_CHARS } from '../../../../../common/constants/annotations';
 import {
   annotation$,
@@ -35,21 +36,32 @@ import {
 } from '../../../services/annotations_service';
 import { AnnotationDescriptionList } from '../annotation_description_list';
 import { DeleteAnnotationModal } from '../delete_annotation_modal';
-
 import { ml } from '../../../services/ml_api_service';
 import { getToastNotifications } from '../../../util/dependency_cache';
+interface Entity {
+  fieldName: string;
+  fieldType: string;
+  fieldValue: string;
+}
 
 interface Props {
   annotation: AnnotationState;
+  chartDetails: {
+    entityData: { entities: Entity[] };
+    functionLabel: string;
+  };
+  detectorIndex: number;
 }
 
 interface State {
   isDeleteModalVisible: boolean;
+  applyAnnotationToSeries: boolean;
 }
 
 class AnnotationFlyoutUI extends Component<CommonProps & Props> {
   public state: State = {
     isDeleteModalVisible: false,
+    applyAnnotationToSeries: false,
   };
 
   public annotationSub: Rx.Subscription | null = null;
@@ -150,11 +162,24 @@ class AnnotationFlyoutUI extends Component<CommonProps & Props> {
   };
 
   public saveOrUpdateAnnotation = () => {
-    const { annotation } = this.props;
-
-    if (annotation === null) {
+    const { annotation: originalAnnotation, chartDetails, detectorIndex } = this.props;
+    if (originalAnnotation === null) {
       return;
     }
+    const annotation = cloneDeep(originalAnnotation);
+
+    if (this.state.applyAnnotationToSeries && chartDetails?.entityData?.entities) {
+      chartDetails.entityData.entities.forEach((entity: Entity) => {
+        const { fieldName, fieldType, fieldValue } = entity;
+        // @ts-ignore
+        annotation[`${fieldType}_name`] = fieldName;
+        // @ts-ignore
+        annotation[`${fieldType}_value`] = fieldValue;
+      });
+      annotation.detector_index = detectorIndex;
+    }
+    // Mark the annotation created by `user` instead of automatically generated
+    annotation.event = 'user';
 
     annotation$.next(null);
 
@@ -286,6 +311,23 @@ class AnnotationFlyoutUI extends Component<CommonProps & Props> {
                 value={annotation.annotation}
               />
             </EuiFormRow>
+            <EuiFormRow>
+              <EuiCheckbox
+                id={'xpack.ml.timeSeriesExplorer.annotationFlyout.applyToPartition'}
+                label={
+                  <FormattedMessage
+                    id="xpack.ml.timeSeriesExplorer.annotationFlyout.applyToPartitionTextLabel"
+                    defaultMessage="Apply annotation to this series"
+                  />
+                }
+                checked={this.state.applyAnnotationToSeries}
+                onChange={() =>
+                  this.setState({
+                    applyAnnotationToSeries: !this.state.applyAnnotationToSeries,
+                  })
+                }
+              />
+            </EuiFormRow>
           </EuiFlyoutBody>
           <EuiFlyoutFooter>
             <EuiFlexGroup justifyContent="spaceBetween">