[7.x] [ML] Anomaly Explorer / Single Metric Viewer: Fix error reporting for annotations. (#74953)

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

@@ -103,8 +103,7 @@ export function isAnnotation(arg: any): arg is Annotation {
   );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Annotations extends Array<Annotation> {}
+export type Annotations = Annotation[];
 
 export function isAnnotations(arg: any): arg is Annotations {
   if (Array.isArray(arg) === false) {
@@ -134,5 +133,12 @@ export type EsAggregationResult = Record<string, TermAggregationResult>;
 export interface GetAnnotationsResponse {
   aggregations?: EsAggregationResult;
   annotations: Record<string, Annotations>;
+  error?: string;
   success: boolean;
 }
+
+export interface AnnotationsTable {
+  annotationsData: Annotations;
+  aggregations: EsAggregationResult;
+  error?: string;
+}

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

@@ -15,6 +15,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   htmlIdGenerator,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
@@ -221,7 +222,7 @@ export class Explorer extends React.Component {
       selectedJobs,
       tableData,
     } = this.props.explorerState;
-    const { annotationsData, aggregations } = annotations;
+    const { annotationsData, aggregations, error: annotationsError } = annotations;
 
     const jobSelectorProps = {
       dateFormatTz: getDateFormatTz(),
@@ -302,9 +303,36 @@ export class Explorer extends React.Component {
               setSelectedCells={this.props.setSelectedCells}
             />
             <EuiSpacer size="m" />
-            {annotationsData.length > 0 && (
+            {annotationsError !== undefined && (
               <>
+                <EuiTitle
+                  className="panel-title"
+                  data-test-subj="mlAnomalyExplorerAnnotationsPanel error"
+                >
+                  <h2>
+                    <FormattedMessage
+                      id="xpack.ml.explorer.annotationsErrorTitle"
+                      defaultMessage="Annotations"
+                    />
+                  </h2>
+                </EuiTitle>
                 <EuiPanel>
+                  <EuiCallOut
+                    title={i18n.translate('xpack.ml.explorer.annotationsErrorCallOutTitle', {
+                      defaultMessage: 'An error occurred loading annotations:',
+                    })}
+                    color="danger"
+                    iconType="alert"
+                  >
+                    <p>{annotationsError}</p>
+                  </EuiCallOut>
+                </EuiPanel>
+                <EuiSpacer size="m" />
+              </>
+            )}
+            {annotationsData.length > 0 && (
+              <>
+                <EuiPanel data-test-subj="mlAnomalyExplorerAnnotationsPanel loaded">
                   <EuiAccordion
                     id={this.htmlIdGen()}
                     buttonContent={

x-pack/plugins/ml/public/application/explorer/explorer_utils.d.ts

@@ -6,6 +6,7 @@
 
 import { Moment } from 'moment';
 
+import { AnnotationsTable } from '../../../common/types/annotations';
 import { CombinedJob } from '../../../common/types/anomaly_detection_jobs';
 import { SwimlaneType } from './explorer_constants';
 
@@ -111,7 +112,7 @@ export declare const loadAnnotationsTableData: (
   selectedJobs: ExplorerJob[],
   interval: number,
   bounds: TimeRangeBounds
-) => Promise<any[]>;
+) => Promise<AnnotationsTable>;
 
 export declare interface AnomaliesTableData {
   anomalies: any[];

x-pack/plugins/ml/public/application/explorer/explorer_utils.js

@@ -16,6 +16,7 @@ import {
   ANOMALIES_TABLE_DEFAULT_QUERY_SIZE,
 } from '../../../common/constants/search';
 import { getEntityFieldList } from '../../../common/util/anomaly_utils';
+import { extractErrorMessage } from '../../../common/util/errors';
 import {
   isSourceDataChartableForDetector,
   isModelPlotChartableForDetector,
@@ -406,7 +407,12 @@ export function loadAnnotationsTableData(selectedCells, selectedJobs, interval,
       .toPromise()
       .then((resp) => {
         if (resp.error !== undefined || resp.annotations === undefined) {
-          return resolve([]);
+          const errorMessage = extractErrorMessage(resp.error);
+          return resolve({
+            annotationsData: [],
+            aggregations: {},
+            error: errorMessage !== '' ? errorMessage : undefined,
+          });
         }
 
         const annotationsData = [];
@@ -430,9 +436,12 @@ export function loadAnnotationsTableData(selectedCells, selectedJobs, interval,
         });
       })
       .catch((resp) => {
-        console.log('Error loading list of annotations for jobs list:', resp);
-        // Silently fail and just return an empty array for annotations to not break the UI.
-        return resolve([]);
+        const errorMessage = extractErrorMessage(resp);
+        return resolve({
+          annotationsData: [],
+          aggregations: {},
+          error: errorMessage !== '' ? errorMessage : undefined,
+        });
       });
   });
 }

x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/state.ts

@@ -21,14 +21,11 @@ import {
   SwimlaneData,
   ViewBySwimLaneData,
 } from '../../explorer_utils';
-import { Annotations, EsAggregationResult } from '../../../../../common/types/annotations';
+import { AnnotationsTable } from '../../../../../common/types/annotations';
 import { SWIM_LANE_DEFAULT_PAGE_SIZE } from '../../explorer_constants';
 
 export interface ExplorerState {
-  annotations: {
-    annotationsData: Annotations;
-    aggregations: EsAggregationResult;
-  };
+  annotations: AnnotationsTable;
   bounds: TimeRangeBounds | undefined;
   chartsData: ExplorerChartsData;
   fieldFormatsLoading: boolean;
@@ -67,6 +64,7 @@ function getDefaultIndexPattern() {
 export function getExplorerDefaultState(): ExplorerState {
   return {
     annotations: {
+      error: undefined,
       annotationsData: [],
       aggregations: {},
     },

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

@@ -552,7 +552,7 @@ class TimeseriesChartIntl extends Component {
   renderFocusChart() {
     const {
       focusAggregationInterval,
-      focusAnnotationData,
+      focusAnnotationData: focusAnnotationDataOriginalPropValue,
       focusChartData,
       focusForecastData,
       modelPlotEnabled,
@@ -565,6 +565,10 @@ class TimeseriesChartIntl extends Component {
       zoomToFocusLoaded,
     } = this.props;
 
+    const focusAnnotationData = Array.isArray(focusAnnotationDataOriginalPropValue)
+      ? focusAnnotationDataOriginalPropValue
+      : [];
+
     if (focusChartData === undefined) {
       return;
     }

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

@@ -27,6 +27,7 @@ import {
   EuiFormRow,
   EuiSelect,
   EuiSpacer,
+  EuiPanel,
   EuiTitle,
   EuiAccordion,
   EuiBadge,
@@ -1028,6 +1029,7 @@ export class TimeSeriesExplorer extends React.Component {
       dataNotChartable,
       entityValues,
       focusAggregationInterval,
+      focusAnnotationError,
       focusAnnotationData,
       focusAggregations,
       focusChartData,
@@ -1316,6 +1318,36 @@ export class TimeSeriesExplorer extends React.Component {
                     )}
                   </MlTooltipComponent>
                 </div>
+                {focusAnnotationError !== undefined && (
+                  <>
+                    <EuiTitle
+                      className="panel-title"
+                      data-test-subj="mlAnomalyExplorerAnnotations error"
+                    >
+                      <h2>
+                        <FormattedMessage
+                          id="xpack.ml.timeSeriesExplorer.annotationsErrorTitle"
+                          defaultMessage="Annotations"
+                        />
+                      </h2>
+                    </EuiTitle>
+                    <EuiPanel>
+                      <EuiCallOut
+                        title={i18n.translate(
+                          'xpack.ml.timeSeriesExplorer.annotationsErrorCallOutTitle',
+                          {
+                            defaultMessage: 'An error occurred loading annotations:',
+                          }
+                        )}
+                        color="danger"
+                        iconType="alert"
+                      >
+                        <p>{focusAnnotationError}</p>
+                      </EuiCallOut>
+                    </EuiPanel>
+                    <EuiSpacer size="m" />
+                  </>
+                )}
                 {focusAnnotationData && focusAnnotationData.length > 0 && (
                   <EuiAccordion
                     id={'EuiAccordion-blah'}
@@ -1340,6 +1372,7 @@ export class TimeSeriesExplorer extends React.Component {
                         </h2>
                       </EuiTitle>
                     }
+                    data-test-subj="mlAnomalyExplorerAnnotations loaded"
                   >
                     <AnnotationsTable
                       chartDetails={chartDetails}

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts

@@ -11,6 +11,7 @@ import {
   ANNOTATIONS_TABLE_DEFAULT_QUERY_SIZE,
   ANOMALIES_TABLE_DEFAULT_QUERY_SIZE,
 } from '../../../../common/constants/search';
+import { extractErrorMessage } from '../../../../common/util/errors';
 import { mlTimeSeriesSearchService } from '../timeseries_search_service';
 import { mlResultsService, CriteriaField } from '../../services/results_service';
 import { Job } from '../../../../common/types/anomaly_detection_jobs';
@@ -23,7 +24,7 @@ import {
 } from './timeseriesexplorer_utils';
 import { mlForecastService } from '../../services/forecast_service';
 import { mlFunctionToESAggregation } from '../../../../common/util/job_utils';
-import { Annotation } from '../../../../common/types/annotations';
+import { GetAnnotationsResponse } from '../../../../common/types/annotations';
 import { ANNOTATION_EVENT_USER } from '../../../../common/constants/annotations';
 
 export interface Interval {
@@ -36,7 +37,8 @@ export interface FocusData {
   anomalyRecords: any;
   scheduledEvents: any;
   showForecastCheckbox?: any;
-  focusAnnotationData?: any;
+  focusAnnotationError?: string;
+  focusAnnotationData?: any[];
   focusForecastData?: any;
   focusAggregations?: any;
 }
@@ -96,14 +98,14 @@ export function getFocusData(
         entities: nonBlankEntities,
       })
       .pipe(
-        catchError(() => {
-          // silent fail
-          return of({
-            annotations: {} as Record<string, Annotation[]>,
+        catchError((resp) =>
+          of({
+            annotations: {},
             aggregations: {},
+            error: extractErrorMessage(resp),
             success: false,
-          });
-        })
+          } as GetAnnotationsResponse)
+        )
       ),
     // Plus query for forecast data if there is a forecastId stored in the appState.
     forecastId !== undefined
@@ -152,16 +154,22 @@ export function getFocusData(
       };
 
       if (annotations) {
-        refreshFocusData.focusAnnotationData = (annotations.annotations[selectedJob.job_id] ?? [])
-          .sort((a, b) => {
-            return a.timestamp - b.timestamp;
-          })
-          .map((d, i: number) => {
-            d.key = (i + 1).toString();
-            return d;
-          });
+        if (annotations.error !== undefined) {
+          refreshFocusData.focusAnnotationError = annotations.error;
+          refreshFocusData.focusAnnotationData = [];
+          refreshFocusData.focusAggregations = {};
+        } else {
+          refreshFocusData.focusAnnotationData = (annotations.annotations[selectedJob.job_id] ?? [])
+            .sort((a, b) => {
+              return a.timestamp - b.timestamp;
+            })
+            .map((d, i: number) => {
+              d.key = (i + 1).toString();
+              return d;
+            });
 
-        refreshFocusData.focusAggregations = annotations.aggregations;
+          refreshFocusData.focusAggregations = annotations.aggregations;
+        }
       }
 
       if (forecastData) {