Improve error handling on missing result index errors on detector detail pages (opensearch-project#158)

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

.github/workflows/link-check-workflow.yml

@@ -15,7 +15,7 @@ jobs:
         id: lychee
         uses: lycheeverse/lychee-action@master
         with:
-          args: --accept=200,403,429 --exclude=localhost "**/*.html" "**/*.md" "**/*.txt" "**/*.json"
+          args: --accept=200,403,429 --exclude=localhost **/*.html **/*.md **/*.txt **/*.json
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
       - name: Fail if there were link errors

public/pages/DetectorDetail/containers/DetectorDetail.tsx

@@ -22,21 +22,24 @@ import {
   EuiText,
   EuiFieldText,
   EuiLoadingSpinner,
+  EuiButton,
 } from '@elastic/eui';
 import { CoreStart } from '../../../../../../src/core/public';
 import { CoreServicesContext } from '../../../components/CoreServices/CoreServices';
 import { get, isEmpty } from 'lodash';
 import { RouteComponentProps, Switch, Route, Redirect } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useFetchDetectorInfo } from '../../CreateDetectorSteps/hooks/useFetchDetectorInfo';
 import { useHideSideNavBar } from '../../main/hooks/useHideSideNavBar';
+import { AppState } from '../../../redux/reducers';
 import {
   deleteDetector,
   startDetector,
   stopDetector,
   getDetector,
   stopHistoricalDetector,
 } from '../../../redux/reducers/ad';
+import { getIndices } from '../../../redux/reducers/opensearch';
 import { getErrorMessage, Listener } from '../../../utils/utils';
 import { darkModeEnabled } from '../../../utils/opensearchDashboardsUtils';
 import { BREADCRUMBS } from '../../../utils/constants';
@@ -53,6 +56,8 @@ import {
   prettifyErrorMessage,
 } from '../../../../server/utils/helpers';
 import { DETECTOR_STATE } from '../../../../server/utils/constants';
+import { CatIndex } from '../../../../server/models/types';
+import { containsIndex } from '../utils/helpers';
 
 export interface DetectorRouterProps {
   detectorId?: string;
@@ -102,6 +107,15 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
     useFetchDetectorInfo(detectorId);
   const { monitor, fetchMonitorError, isLoadingMonitor } =
     useFetchMonitorInfo(detectorId);
+  const visibleIndices = useSelector(
+    (state: AppState) => state.opensearch.indices
+  ) as CatIndex[];
+  const isResultIndexMissing = isLoadingDetector
+    ? false
+    : isEmpty(get(detector, 'resultIndex', ''))
+    ? false
+    : !containsIndex(get(detector, 'resultIndex', ''), visibleIndices);
+
   // String to set in the modal if the realtime detector and/or historical analysis
   // are running when the user tries to edit the detector details or model config
   const isRTJobRunning = get(detector, 'enabled');
@@ -138,6 +152,18 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
     scroll(0, 0);
   }, []);
 
+  // Getting all visible indices. Will re-fetch if changes to the detector (e.g.,
+  // detector starts, result index recreated or user switches tabs to re-fetch detector)
+  useEffect(() => {
+    const getInitialIndices = async () => {
+      await dispatch(getIndices('')).catch((error: any) => {
+        console.error(error);
+        core.notifications.toasts.addDanger('Error getting all indices');
+      });
+    };
+    getInitialIndices();
+  }, [detector]);
+
   useEffect(() => {
     if (hasError) {
       core.notifications.toasts.addDanger(
@@ -365,6 +391,22 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
               />
             </EuiFlexItem>
           </EuiFlexGroup>
+          {isResultIndexMissing ? (
+            <EuiCallOut
+              style={{
+                marginLeft: '10px',
+                marginRight: '10px',
+                marginBottom: '10px',
+              }}
+              title={`Your detector is using custom result index '${get(
+                detector,
+                'resultIndex',
+                ''
+              )}', but is not found in the cluster. The index will be recreated when you start a real-time or historical job.`}
+              color="danger"
+              iconType="alert"
+            ></EuiCallOut>
+          ) : null}
 
           <EuiFlexGroup>
             <EuiFlexItem>

public/pages/DetectorDetail/utils/helpers.tsx

@@ -10,13 +10,14 @@
  */
 
 import React, { Fragment } from 'react';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { DETECTOR_INIT_FAILURES } from './constants';
 import { DETECTOR_STATE_COLOR } from '../../utils/constants';
 import { DETECTOR_STATE } from '../../../../server/utils/constants';
 import { Detector } from '../../../models/interfaces';
 import { EuiHealth } from '@elastic/eui';
 import moment from 'moment';
+import { CatIndex } from '../../../../server/models/types';
 
 export const getInitFailureMessageAndActionItem = (error: string): object => {
   const failureDetails = Object.values(DETECTOR_INIT_FAILURES);
@@ -107,3 +108,15 @@ export const getDetectorStateDetails = (
     </Fragment>
   );
 };
+
+export const containsIndex = (index: string, indices: CatIndex[]) => {
+  let containsIndex = false;
+  if (!isEmpty(indices)) {
+    indices.forEach((catIndex: CatIndex) => {
+      if (get(catIndex, 'index', '') == index) {
+        containsIndex = true;
+      }
+    });
+  }
+  return containsIndex;
+};

public/pages/DetectorResults/containers/AnomalyHistory.tsx

@@ -17,7 +17,7 @@ import React, {
   useRef,
 } from 'react';
 
-import { isEmpty, get, stubTrue } from 'lodash';
+import { isEmpty, get } from 'lodash';
 import {
   EuiFlexItem,
   EuiFlexGroup,
@@ -59,7 +59,6 @@ import {
 import { AnomalyResultsTable } from './AnomalyResultsTable';
 import { AnomaliesChart } from '../../AnomalyCharts/containers/AnomaliesChart';
 import { FeatureBreakDown } from '../../AnomalyCharts/containers/FeatureBreakDown';
-import { minuteDateFormatter } from '../../utils/helpers';
 import {
   ANOMALY_HISTORY_TABS,
   MAX_TIME_SERIES_TO_DISPLAY,
@@ -383,7 +382,7 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
     if (showLoading) {
       setIsLoading(true);
     }
-
+    let errorFetchingResults = false;
     try {
       const params = buildParamsForGetAnomalyResultsWithDateRange(
         dateRange.startDate -
@@ -408,7 +407,11 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
               resultIndex,
               true
             )
-          )
+          ).catch((error: any) => {
+            setIsLoading(false);
+            setIsLoadingAnomalyResults(false);
+            errorFetchingResults = true;
+          })
         : await dispatch(
             getDetectorResults(
               props.detector.id,
@@ -417,7 +420,12 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
               resultIndex,
               true
             )
-          );
+          ).catch((error: any) => {
+            setIsLoading(false);
+            setIsLoadingAnomalyResults(false);
+            errorFetchingResults = true;
+          });
+
       const rawAnomaliesData = get(detectorResultResponse, 'response', []);
       const rawAnomaliesResult = {
         anomalies: get(rawAnomaliesData, 'results', []),
@@ -441,7 +449,7 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
       // After fetching raw results, re-fetch the latest HC anomaly summaries, if applicable.
       // Also clear any selected heatmap cell data in all of the child charts,
       // in case a user selected one while the job was still running.
-      if (isHCDetector) {
+      if (isHCDetector && !errorFetchingResults) {
         setSelectedHeatmapCell(undefined);
         fetchHCAnomalySummaries();
       }

public/redux/reducers/opensearch.ts

@@ -9,7 +9,6 @@
  * GitHub history for details.
  */
 
-
 import {
   APIAction,
   APIResponseAction,
@@ -295,36 +294,35 @@ export const deleteIndex = (index: string): APIAction => ({
     client.post(`..${AD_NODE_API.DELETE_INDEX}`, { query: { index: index } }),
 });
 
-export const getPrioritizedIndices = (searchKey: string): ThunkAction => async (
-  dispatch,
-  getState
-) => {
-  //Fetch Indices and Aliases with text provided
-  await dispatch(getIndices(searchKey));
-  await dispatch(getAliases(searchKey));
-  const osState = getState().opensearch;
-  const exactMatchedIndices = osState.indices;
-  const exactMatchedAliases = osState.aliases;
-  if (exactMatchedAliases.length || exactMatchedIndices.length) {
-    //If we have exact match just return that
-    return {
-      indices: exactMatchedIndices,
-      aliases: exactMatchedAliases,
-    };
-  } else {
-    //No results found for exact match, append wildCard and get partial matches if exists
-    await dispatch(getIndices(`${searchKey}*`));
-    await dispatch(getAliases(`${searchKey}*`));
+export const getPrioritizedIndices =
+  (searchKey: string): ThunkAction =>
+  async (dispatch, getState) => {
+    //Fetch Indices and Aliases with text provided
+    await dispatch(getIndices(searchKey));
+    await dispatch(getAliases(searchKey));
     const osState = getState().opensearch;
-    const partialMatchedIndices = osState.indices;
-    const partialMatchedAliases = osState.aliases;
-    if (partialMatchedAliases.length || partialMatchedIndices.length) {
+    const exactMatchedIndices = osState.indices;
+    const exactMatchedAliases = osState.aliases;
+    if (exactMatchedAliases.length || exactMatchedIndices.length) {
+      //If we have exact match just return that
       return {
-        indices: partialMatchedIndices,
-        aliases: partialMatchedAliases,
+        indices: exactMatchedIndices,
+        aliases: exactMatchedAliases,
       };
+    } else {
+      //No results found for exact match, append wildCard and get partial matches if exists
+      await dispatch(getIndices(`${searchKey}*`));
+      await dispatch(getAliases(`${searchKey}*`));
+      const osState = getState().opensearch;
+      const partialMatchedIndices = osState.indices;
+      const partialMatchedAliases = osState.aliases;
+      if (partialMatchedAliases.length || partialMatchedIndices.length) {
+        return {
+          indices: partialMatchedIndices,
+          aliases: partialMatchedAliases,
+        };
+      }
     }
-  }
-};
+  };
 
 export default reducer;

server/routes/opensearch.ts

@@ -9,7 +9,6 @@
  * GitHub history for details.
  */
 
-
 import { get } from 'lodash';
 import { SearchResponse } from '../models/interfaces';
 import {

utils/constants.ts

@@ -9,7 +9,6 @@
  * GitHub history for details.
  */
 
-
 export const BASE_NODE_API_PATH = '/api/anomaly_detectors';
 
 export const AD_NODE_API = Object.freeze({