disable button while fetching validation data

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/advanced_step/advanced_step_form.tsx

@@ -27,24 +27,25 @@ import {
 } from '../../../../common/analytics';
 import { DEFAULT_MODEL_MEMORY_LIMIT } from '../../../analytics_management/hooks/use_create_analytics_form/state';
 import { ANALYTICS_STEPS } from '../../page';
-import { getExplainData } from '../shared';
+import { fetchExplainData } from '../shared';
 import { ContinueButton } from '../continue_button';
 import { OutlierHyperParameters } from './outlier_hyper_parameters';
 
 export function getNumberValue(value?: number) {
  return value === undefined ? '' : +value;
 }
 
+export type AdvancedParamErrors = {
+ [key in ANALYSIS_ADVANCED_FIELDS]?: string;
+};
+
 export const AdvancedStepForm: FC<CreateAnalyticsStepProps> = ({
  actions,
  state,
  setCurrentStep,
 }) => {
- const [advancedParamErrors, setAdvancedParamErrors] = useState<
- {
- [key in ANALYSIS_ADVANCED_FIELDS]?: string;
- }
- >({});
+ const [advancedParamErrors, setAdvancedParamErrors] = useState<AdvancedParamErrors>({});
+ const [fetchingAdvancedParamErrors, setFetchingAdvancedParamErrors] = useState<boolean>(false);
 
  const { setFormState } = actions;
  const { form, isJobCreated } = state;
@@ -78,14 +79,16 @@ export const AdvancedStepForm: FC<CreateAnalyticsStepProps> = ({
 
  const mmlInvalid = modelMemoryLimitValidationResult !== null;
 
- const isStepInvalid = mmlInvalid || Object.keys(advancedParamErrors).length > 0;
+ const isStepInvalid =
+ mmlInvalid ||
+ Object.keys(advancedParamErrors).length > 0 ||
+ fetchingAdvancedParamErrors === true;
 
  useEffect(() => {
+ setFetchingAdvancedParamErrors(true);
  (async function () {
- const { success, errorMessage } = await getExplainData(form);
- const paramErrors: {
- [key in ANALYSIS_ADVANCED_FIELDS]?: string;
- } = {};
+ const { success, errorMessage } = await fetchExplainData(form);
+ const paramErrors: AdvancedParamErrors = {};
 
  if (!success) {
  // Check which field is invalid
@@ -95,6 +98,7 @@ export const AdvancedStepForm: FC<CreateAnalyticsStepProps> = ({
  }
  });
  }
+ setFetchingAdvancedParamErrors(false);
  setAdvancedParamErrors(paramErrors);
  })();
  }, [

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/advanced_step/hyper_parameters.tsx

@@ -8,13 +8,13 @@ import React, { FC, Fragment } from 'react';
 import { EuiFieldNumber, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { CreateAnalyticsFormProps } from '../../../analytics_management/hooks/use_create_analytics_form';
-import { getNumberValue } from './advanced_step_form';
+import { AdvancedParamErrors, getNumberValue } from './advanced_step_form';
 import { ANALYSIS_ADVANCED_FIELDS } from '../../../../common/analytics';
 
 const MAX_TREES_LIMIT = 2000;
 
 interface Props extends CreateAnalyticsFormProps {
- advancedParamErrors: any;
+ advancedParamErrors: AdvancedParamErrors;
 }
 
 export const HyperParameters: FC<Props> = ({ actions, state, advancedParamErrors }) => {

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/advanced_step/outlier_hyper_parameters.tsx

@@ -9,10 +9,10 @@ import { EuiFieldNumber, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui
 import { i18n } from '@kbn/i18n';
 import { OUTLIER_ANALYSIS_METHOD, ANALYSIS_ADVANCED_FIELDS } from '../../../../common/analytics';
 import { CreateAnalyticsFormProps } from '../../../analytics_management/hooks/use_create_analytics_form';
-import { getNumberValue } from './advanced_step_form';
+import { AdvancedParamErrors, getNumberValue } from './advanced_step_form';
 
 interface Props extends CreateAnalyticsFormProps {
- advancedParamErrors: any;
+ advancedParamErrors: AdvancedParamErrors;
 }
 
 export const OutlierHyperParameters: FC<Props> = ({ actions, state, advancedParamErrors }) => {

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

@@ -41,7 +41,7 @@ import { JobType } from './job_type';
 import { SupportedFieldsMessage } from './supported_fields_message';
 import { MemoizedAnalysisFieldsTable } from './analysis_fields_table';
 import { DataGrid } from '../../../../../components/data_grid';
-import { getExplainData } from '../shared';
+import { fetchExplainData } from '../shared';
 import { useIndexData } from '../../hooks';
 import { ExplorationQueryBar } from '../../../analytics_exploration/components/exploration_query_bar';
 import { useSavedSearch } from './use_saved_search';
@@ -172,7 +172,7 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
  setLoadingFieldOptions(true);
  }
 
- const { success, expectedMemory, fieldSelection, errorMessage } = await getExplainData(form);
+ const { success, expectedMemory, fieldSelection, errorMessage } = await fetchExplainData(form);
 
  if (success) {
  if (shouldUpdateEstimatedMml) {

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/shared/get_explain_data.ts → x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/shared/fetch_explain_data.ts

@@ -12,14 +12,14 @@ import {
  State,
 } from '../../../analytics_management/hooks/use_create_analytics_form/state';
 
-export interface GetExplainDataReturnType {
+export interface FetchExplainDataReturnType {
  success: boolean;
  expectedMemory: string;
  fieldSelection: FieldSelectionItem[];
  errorMessage: string;
 }
 
-export const getExplainData = async (formState: State['form']) => {
+export const fetchExplainData = async (formState: State['form']) => {
  const jobConfig = getJobConfigFromFormState(formState);
  let errorMessage = '';
  let success = true;

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/shared/index.ts

@@ -5,4 +5,4 @@
  */
 
 export { Messages } from './messages';
-export { getExplainData } from './get_explain_data';
+export { fetchExplainData } from './fetch_explain_data';

x-pack/test/functional/apps/ml/data_frame_analytics/cloning.ts

@@ -168,7 +168,7 @@ export default function ({ getService }: FtrProviderContext) {
  );
  });
 
- it('continues to the additional options step', async () => {
+ it('should continue to the additional options step', async () => {
  await ml.dataFrameAnalyticsCreation.continueToAdditionalOptionsStep();
  });
 
@@ -178,7 +178,7 @@ export default function ({ getService }: FtrProviderContext) {
  );
  });
 
- it('continues to the details step', async () => {
+ it('should continue to the details step', async () => {
  await ml.dataFrameAnalyticsCreation.continueToDetailsStep();
  });
 
@@ -190,7 +190,7 @@ export default function ({ getService }: FtrProviderContext) {
  await ml.dataFrameAnalyticsCreation.setDestIndex(cloneDestIndex);
  });
 
- it('continues to the create step', async () => {
+ it('should continue to the create step', async () => {
  await ml.dataFrameAnalyticsCreation.continueToCreateStep();
  });
 
@@ -202,11 +202,11 @@ export default function ({ getService }: FtrProviderContext) {
  await ml.dataFrameAnalyticsCreation.createAnalyticsJob(cloneJobId);
  });
 
- it('finishes analytics processing', async () => {
+ it('should finish analytics processing', async () => {
  await ml.dataFrameAnalytics.waitForAnalyticsCompletion(cloneJobId);
  });
 
- it('displays the created job in the analytics table', async () => {
+ it('should display the created job in the analytics table', async () => {
  await ml.dataFrameAnalyticsCreation.navigateToJobManagementPage();
  await ml.dataFrameAnalyticsTable.refreshAnalyticsTable();
  await ml.dataFrameAnalyticsTable.filterWithSearchString(cloneJobId);