[ML] Anomaly Detection: Visualize delayed - data Part 2 (#102270)

* add link in datafeed tab.remove interval * add annotation overlay to chart * adds annotations checkbox * ensure annotation with same start/end time show up in chart * update annotations time format * move time format to client * adds info tooltip to modal title * adds model snapshots to datafeed chart
elastic · Jun 22, 2021 · b161bf0 · b161bf0
1 parent dec77cf
commit b161bf0
Show file tree

Hide file tree

Showing 9 changed files with 308 additions and 201 deletions.
diff --git a/x-pack/plugins/ml/common/types/results.ts b/x-pack/plugins/ml/common/types/results.ts
@@ -6,13 +6,17 @@
  */
 
 import { estypes } from '@elastic/elasticsearch';
+import { LineAnnotationDatum, RectAnnotationDatum } from '@elastic/charts';
 
 export interface GetStoppedPartitionResult {
   jobs: string[] | Record<string, string[]>;
 }
 export interface GetDatafeedResultsChartDataResult {
   bucketResults: number[][];
   datafeedResults: number[][];
+  annotationResultsRect: RectAnnotationDatum[];
+  annotationResultsLine: LineAnnotationDatum[];
+  modelSnapshotResultsLine: LineAnnotationDatum[];
 }
 
 export interface DatafeedResultsChartDataParams {

diff --git a/...ugins/ml/public/application/components/annotations/annotations_table/annotations_table.js b/...ugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
@@ -494,13 +494,13 @@ class AnnotationsTableUI extends Component {
         render: (annotation) => {
           const viewDataFeedText = (
             <FormattedMessage
-              id="xpack.ml.annotationsTable.viewDatafeedTooltip"
-              defaultMessage="View datafeed"
+              id="xpack.ml.annotationsTable.datafeedChartTooltip"
+              defaultMessage="Datafeed chart"
             />
           );
           const viewDataFeedTooltipAriaLabelText = i18n.translate(
-            'xpack.ml.annotationsTable.viewDatafeedTooltipAriaLabel',
-            { defaultMessage: 'View datafeed' }
+            'xpack.ml.annotationsTable.datafeedChartTooltipAriaLabel',
+            { defaultMessage: 'Datafeed chart' }
           );
           return (
             <EuiButtonEmpty
@@ -735,9 +735,7 @@ class AnnotationsTableUI extends Component {
               });
             }}
             end={this.state.datafeedEnd}
-            timefield={this.props.jobs[0].data_description.time_field}
             jobId={this.state.jobId}
-            bucketSpan={this.props.jobs[0].analysis_config.bucket_span}
           />
         ) : null}
       </Fragment>

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_modal/constants.ts b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_modal/constants.ts
@@ -15,7 +15,7 @@ export const CHART_DIRECTION = {
 export type ChartDirectionType = typeof CHART_DIRECTION[keyof typeof CHART_DIRECTION];
 
 // [width, height]
-export const CHART_SIZE: ChartSizeArray = ['100%', 300];
+export const CHART_SIZE: ChartSizeArray = ['100%', 380];
 
 export const TAB_IDS = {
   CHART: 'chart',