[8.16] [ML] Single Metric Viewer embeddable: fix job refetch on error (#199726) (#200766)

# Backport This will backport the following commits from `main` to `8.16`: - [[ML] Single Metric Viewer embeddable: fix job refetch on error (#199726)](https://github.com/elastic/kibana/pull/199726)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>
2025-04-23 17:28:26 -04:00 · 2024-11-20 04:47:05 +11:00 · 2024-11-20 04:47:05 +11:00 · d2fc28cf92
commit d2fc28cf92
parent 5ea363173d
1 changed files with 31 additions and 5 deletions
--- a/x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx
+++ b/x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx
@ -20,6 +20,7 @@ import type { MlJob, MlJobStats } from '@elastic/elasticsearch/lib/api/types';
 import { DatePickerContextProvider, type DatePickerDependencies } from '@kbn/ml-date-picker';
 import type { TimeRangeBounds } from '@kbn/ml-time-buckets';
 import usePrevious from 'react-use/lib/usePrevious';
+import { extractErrorProperties } from '@kbn/ml-error-utils';
 import { tz } from 'moment';
 import { pick, throttle } from 'lodash';
 import type { MlDependencies } from '../../application/app';
@ -39,10 +40,17 @@ interface AppStateZoom {
  to?: string;
 }

-const errorMessage = i18n.translate('xpack.ml.singleMetricViewerEmbeddable.errorMessage"', {
+const basicErrorMessage = i18n.translate('xpack.ml.singleMetricViewerEmbeddable.errorMessage"', {
  defaultMessage: 'Unable to load the ML single metric viewer data',
 });

+const jobNotFoundErrorMessage = i18n.translate(
+  'xpack.ml.singleMetricViewerEmbeddable.jobNotFoundErrorMessage"',
+  {
+    defaultMessage: 'No known job with the selected id',
+  }
+);
+
 export type SingleMetricViewerSharedComponent = FC<SingleMetricViewerProps>;

 /**
@ -67,7 +75,7 @@ export interface SingleMetricViewerProps {
   */
  lastRefresh?: number;
  onRenderComplete?: () => void;
-  onError?: (error: Error) => void;
+  onError?: (error?: Error) => void;
  onForecastIdChange?: (forecastId: string | undefined) => void;
  uuid: string;
 }
@ -106,6 +114,7 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({
  const [selectedJobWrapper, setSelectedJobWrapper] = useState<
    { job: MlJob; stats: MlJobStats } | undefined
  >();
+  const [errorEncountered, setErrorEncountered] = useState<number | undefined>();

  const isMounted = useMountedState();
  const { mlApi, mlTimeSeriesExplorerService, toastNotificationService } = mlServices;
@ -119,6 +128,16 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({

  const previousRefresh = usePrevious(lastRefresh ?? 0);

+  useEffect(
+    function resetErrorOnJobChange() {
+      // Calling onError to clear any previous error
+      setErrorEncountered(undefined);
+      onError?.();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedJobId]
+  );
+
  useEffect(
    function setUpSelectedJob() {
      async function fetchSelectedJob() {
@ -130,19 +149,26 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({
            ]);
            setSelectedJobWrapper({ job: jobs[0], stats: jobStats[0] });
          } catch (e) {
+            const error = extractErrorProperties(e);
+            // Could get 404 because job has been deleted and also avoid infinite refetches on any error
+            setErrorEncountered(error.statusCode);
            if (onError) {
-              onError(new Error(errorMessage));
+              onError(
+                new Error(errorEncountered === 404 ? jobNotFoundErrorMessage : basicErrorMessage)
+              );
            }
          }
        }
      }
-      if (isMounted() === false) {
+      if (isMounted() === false || errorEncountered !== undefined) {
        return;
      }
      fetchSelectedJob();
    },
-    [selectedJobId, mlApi, isMounted, onError]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedJobId, isMounted, errorEncountered]
  );
+
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const resizeHandler = useCallback(
    throttle((e: { width: number; height: number }) => {