[ML] DF Analytics results: ensure View link is only enabled when job has successfully completed (#73539)

* disable view link if job is incomplete or failed

* ensure hooks run before return to avoid react error

Author: alvarezmelissa87

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx

@@ -56,6 +56,13 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
 
   const { columnsWithCharts, errorMessage, status, tableItems } = outlierData;
 
+  /* eslint-disable-next-line react-hooks/rules-of-hooks */
+  const colorRange = useColorRange(
+    COLOR_RANGE.BLUE,
+    COLOR_RANGE_SCALE.INFLUENCER,
+    jobConfig !== undefined ? getFeatureCount(jobConfig.dest.results_field, tableItems) : 1
+  );
+
   // if it's a searchBar syntax error leave the table visible so they can try again
   if (status === INDEX_STATUS.ERROR && !errorMessage.includes('failed to create query')) {
     return (
@@ -74,13 +81,6 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
     );
   }
 
-  /* eslint-disable-next-line react-hooks/rules-of-hooks */
-  const colorRange = useColorRange(
-    COLOR_RANGE.BLUE,
-    COLOR_RANGE_SCALE.INFLUENCER,
-    jobConfig !== undefined ? getFeatureCount(jobConfig.dest.results_field, tableItems) : 1
-  );
-
   return (
     <EuiPanel data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
       {jobConfig !== undefined && needsDestIndexPattern && (

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_view/get_view_link_status.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import {
+  isRegressionAnalysis,
+  isOutlierAnalysis,
+  isClassificationAnalysis,
+} from '../../../../common/analytics';
+import {
+  DataFrameAnalyticsListRow,
+  isDataFrameAnalyticsStopped,
+  isDataFrameAnalyticsFailed,
+  getDataFrameAnalyticsProgressPhase,
+} from '../analytics_list/common';
+
+const unknownJobTypeMessage = i18n.translate(
+  'xpack.ml.dataframe.analyticsList.viewActionUnknownJobTypeToolTipContent',
+  {
+    defaultMessage: 'There is no results page available for this type of data frame analytics job.',
+  }
+);
+const jobNotStartedMessage = i18n.translate(
+  'xpack.ml.dataframe.analyticsList.viewActionJobNotStartedToolTipContent',
+  {
+    defaultMessage:
+      'The data frame analytics job did not start. There is no results page available.',
+  }
+);
+const jobNotFinishedMessage = i18n.translate(
+  'xpack.ml.dataframe.analyticsList.viewActionJobNotFinishedToolTipContent',
+  {
+    defaultMessage:
+      'The data frame analytics job is not finished. There is no results page available.',
+  }
+);
+const jobFailedMessage = i18n.translate(
+  'xpack.ml.dataframe.analyticsList.viewActionJobFailedToolTipContent',
+  {
+    defaultMessage: 'The data frame analytics job failed. There is no results page available.',
+  }
+);
+
+interface ViewLinkStatusReturn {
+  disabled: boolean;
+  tooltipContent?: string;
+}
+
+export function getViewLinkStatus(item: DataFrameAnalyticsListRow): ViewLinkStatusReturn {
+  const viewLinkStatus: ViewLinkStatusReturn = { disabled: false };
+
+  const progressStats = getDataFrameAnalyticsProgressPhase(item.stats);
+  const jobFailed = isDataFrameAnalyticsFailed(item.stats.state);
+  const jobNotStarted = progressStats.currentPhase === 1 && progressStats.progress === 0;
+  const jobFinished =
+    isDataFrameAnalyticsStopped(item.stats.state) &&
+    progressStats.currentPhase === progressStats.totalPhases &&
+    progressStats.progress === 100;
+  const isUnknownJobType =
+    !isRegressionAnalysis(item.config.analysis) &&
+    !isOutlierAnalysis(item.config.analysis) &&
+    !isClassificationAnalysis(item.config.analysis);
+
+  const disabled = !jobFinished || jobFailed || isUnknownJobType;
+
+  if (disabled) {
+    viewLinkStatus.disabled = true;
+    if (isUnknownJobType) {
+      viewLinkStatus.tooltipContent = unknownJobTypeMessage;
+    } else if (jobFailed) {
+      viewLinkStatus.tooltipContent = jobFailedMessage;
+    } else if (jobNotStarted) {
+      viewLinkStatus.tooltipContent = jobNotStartedMessage;
+    } else if (!jobFinished) {
+      viewLinkStatus.tooltipContent = jobNotFinishedMessage;
+    }
+  }
+
+  return viewLinkStatus;
+}

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_view/view_button.tsx

@@ -8,16 +8,13 @@ import React, { FC } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
 
-import {
-  getAnalysisType,
-  isRegressionAnalysis,
-  isOutlierAnalysis,
-  isClassificationAnalysis,
-} from '../../../../common/analytics';
+import { getAnalysisType } from '../../../../common/analytics';
 import { useMlKibana } from '../../../../../contexts/kibana';
 
 import { getResultsUrl, DataFrameAnalyticsListRow } from '../analytics_list/common';
 
+import { getViewLinkStatus } from './get_view_link_status';
+
 interface ViewButtonProps {
   item: DataFrameAnalyticsListRow;
   isManagementTable: boolean;
@@ -30,11 +27,8 @@ export const ViewButton: FC<ViewButtonProps> = ({ item, isManagementTable }) =>
     },
   } = useMlKibana();
 
+  const { disabled, tooltipContent } = getViewLinkStatus(item);
   const analysisType = getAnalysisType(item.config.analysis);
-  const buttonDisabled =
-    !isRegressionAnalysis(item.config.analysis) &&
-    !isOutlierAnalysis(item.config.analysis) &&
-    !isClassificationAnalysis(item.config.analysis);
 
   const url = getResultsUrl(item.id, analysisType);
   const navigator = isManagementTable
@@ -52,23 +46,17 @@ export const ViewButton: FC<ViewButtonProps> = ({ item, isManagementTable }) =>
       data-test-subj="mlAnalyticsJobViewButton"
       flush="left"
       iconType="visTable"
-      isDisabled={buttonDisabled}
+      isDisabled={disabled}
       onClick={navigator}
       size="s"
     >
       {buttonText}
     </EuiButtonEmpty>
   );
 
-  if (buttonDisabled) {
+  if (disabled) {
     return (
-      <EuiToolTip
-        position="top"
-        content={i18n.translate('xpack.ml.dataframe.analyticsList.viewActionToolTipContent', {
-          defaultMessage:
-            'There is no results page available for this type of data frame analytics job.',
-        })}
-      >
+      <EuiToolTip position="top" content={tooltipContent}>
         {button}
       </EuiToolTip>
     );