[ML] DF Analytics: stop status polling when job stopped (#71159)

* clear interval if job stopped

* ensure analysisFieldsTable error messages up to date

* use shared constant for job state

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/analysis_fields_table.tsx

@@ -85,16 +85,27 @@ export const AnalysisFieldsTable: FC<{
   includes: string[];
   loadingItems: boolean;
   setFormState: React.Dispatch<React.SetStateAction<any>>;
+  minimumFieldsRequiredMessage?: string;
+  setMinimumFieldsRequiredMessage: React.Dispatch<React.SetStateAction<any>>;
   tableItems: FieldSelectionItem[];
-}> = ({ dependentVariable, includes, loadingItems, setFormState, tableItems }) => {
+  unsupportedFieldsError?: string;
+  setUnsupportedFieldsError: React.Dispatch<React.SetStateAction<any>>;
+}> = ({
+  dependentVariable,
+  includes,
+  loadingItems,
+  setFormState,
+  minimumFieldsRequiredMessage,
+  setMinimumFieldsRequiredMessage,
+  tableItems,
+  unsupportedFieldsError,
+  setUnsupportedFieldsError,
+}) => {
   const [sortableProperties, setSortableProperties] = useState();
   const [currentPaginationData, setCurrentPaginationData] = useState<{
     pageIndex: number;
     itemsPerPage: number;
   }>({ pageIndex: 0, itemsPerPage: 5 });
-  const [minimumFieldsRequiredMessage, setMinimumFieldsRequiredMessage] = useState<
-    undefined | string
-  >(undefined);
 
   useEffect(() => {
     if (includes.length === 0 && tableItems.length > 0) {
@@ -164,8 +175,21 @@ export const AnalysisFieldsTable: FC<{
         label={i18n.translate('xpack.ml.dataframe.analytics.create.includedFieldsLabel', {
           defaultMessage: 'Included fields',
         })}
-        isInvalid={minimumFieldsRequiredMessage !== undefined}
+        fullWidth
-        error={minimumFieldsRequiredMessage}
+        isInvalid={
+          minimumFieldsRequiredMessage !== undefined || unsupportedFieldsError !== undefined
+        }
+        error={[
+          ...(minimumFieldsRequiredMessage !== undefined ? [minimumFieldsRequiredMessage] : []),
+          ...(unsupportedFieldsError !== undefined
+            ? [
+                i18n.translate('xpack.ml.dataframe.analytics.create.unsupportedFieldsError', {
+                  defaultMessage: 'Invalid. {message}',
+                  values: { message: unsupportedFieldsError },
+                }),
+              ]
+            : []),
+        ]}
       >
         <Fragment />
       </EuiFormRow>
@@ -209,9 +233,10 @@ export const AnalysisFieldsTable: FC<{
               ) {
                 selection = [dependentVariable];
               }
-              // If nothing selected show minimum fields required message and don't update form yet
+              // If includes is empty show minimum fields required message and don't update form yet
               if (selection.length === 0) {
                 setMinimumFieldsRequiredMessage(minimumFieldsMessage);
+                setUnsupportedFieldsError(undefined);
               } else {
                 setMinimumFieldsRequiredMessage(undefined);
                 setFormState({ includes: selection });

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx

@@ -73,6 +73,9 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
   const [includesTableItems, setIncludesTableItems] = useState<FieldSelectionItem[]>([]);
   const [maxDistinctValuesError, setMaxDistinctValuesError] = useState<string | undefined>();
   const [unsupportedFieldsError, setUnsupportedFieldsError] = useState<string | undefined>();
+  const [minimumFieldsRequiredMessage, setMinimumFieldsRequiredMessage] = useState<
+    undefined | string
+  >();
 
   const { setEstimatedModelMemoryLimit, setFormState } = actions;
   const { estimatedModelMemoryLimit, form, isJobCreated, requestMessages } = state;
@@ -117,6 +120,7 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
     dependentVariableEmpty ||
     jobType === undefined ||
     maxDistinctValuesError !== undefined ||
+    minimumFieldsRequiredMessage !== undefined ||
     requiredFieldsError !== undefined ||
     unsupportedFieldsError !== undefined;
 
@@ -400,32 +404,22 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
       )}
       <EuiFormRow
         fullWidth
-        isInvalid={requiredFieldsError !== undefined || unsupportedFieldsError !== undefined}
+        isInvalid={requiredFieldsError !== undefined}
-        error={[
+        error={i18n.translate('xpack.ml.dataframe.analytics.create.requiredFieldsError', {
-          ...(requiredFieldsError !== undefined
+          defaultMessage: 'Invalid. {message}',
-            ? [
+          values: { message: requiredFieldsError },
-                i18n.translate('xpack.ml.dataframe.analytics.create.requiredFieldsError', {
+        })}
-                  defaultMessage: 'Invalid. {message}',
-                  values: { message: requiredFieldsError },
-                }),
-              ]
-            : []),
-          ...(unsupportedFieldsError !== undefined
-            ? [
-                i18n.translate('xpack.ml.dataframe.analytics.create.unsupportedFieldsError', {
-                  defaultMessage: 'Invalid. {message}',
-                  values: { message: unsupportedFieldsError },
-                }),
-              ]
-            : []),
-        ]}
       >
         <Fragment />
       </EuiFormRow>
       <AnalysisFieldsTable
         dependentVariable={dependentVariable}
         includes={includes}
+        minimumFieldsRequiredMessage={minimumFieldsRequiredMessage}
+        setMinimumFieldsRequiredMessage={setMinimumFieldsRequiredMessage}
         tableItems={includesTableItems}
+        unsupportedFieldsError={unsupportedFieldsError}
+        setUnsupportedFieldsError={setUnsupportedFieldsError}
         loadingItems={loadingFieldOptions}
         setFormState={setFormState}
       />

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_step/progress_stats.tsx

@@ -15,13 +15,15 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useMlKibana } from '../../../../../contexts/kibana';
-import { getDataFrameAnalyticsProgressPhase } from '../../../analytics_management/components/analytics_list/common';
+import {
+  getDataFrameAnalyticsProgressPhase,
+  DATA_FRAME_TASK_STATE,
+} from '../../../analytics_management/components/analytics_list/common';
 import { isGetDataFrameAnalyticsStatsResponseOk } from '../../../analytics_management/services/analytics_service/get_analytics';
 import { ml } from '../../../../../services/ml_api_service';
 import { DataFrameAnalyticsId } from '../../../../common/analytics';
 
 export const PROGRESS_REFRESH_INTERVAL_MS = 1000;
-const FAILED = 'failed';
 
 export const ProgressStats: FC<{ jobId: DataFrameAnalyticsId }> = ({ jobId }) => {
   const [initialized, setInitialized] = useState<boolean>(false);
@@ -54,7 +56,7 @@ export const ProgressStats: FC<{ jobId: DataFrameAnalyticsId }> = ({ jobId }) =>
         if (jobStats !== undefined) {
           const progressStats = getDataFrameAnalyticsProgressPhase(jobStats);
 
-          if (jobStats.state === FAILED) {
+          if (jobStats.state === DATA_FRAME_TASK_STATE.FAILED) {
             clearInterval(interval);
             setFailedJobMessage(
               jobStats.failure_reason ||
@@ -70,8 +72,9 @@ export const ProgressStats: FC<{ jobId: DataFrameAnalyticsId }> = ({ jobId }) =>
 
           setCurrentProgress(progressStats);
           if (
-            progressStats.currentPhase === progressStats.totalPhases &&
+            (progressStats.currentPhase === progressStats.totalPhases &&
-            progressStats.progress === 100
+              progressStats.progress === 100) ||
+            jobStats.state === DATA_FRAME_TASK_STATE.STOPPED
           ) {
             clearInterval(interval);
           }