disable button while fetching validation data

elastic · Jun 24, 2020 · 48dd0b8 · 48dd0b8
1 parent 8cc3c34
commit 48dd0b8
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 25 deletions.
diff --git a/..._frame_analytics/pages/analytics_creation/components/advanced_step/advanced_step_form.tsx b/..._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);
     })();
   }, [

diff --git a/...ta_frame_analytics/pages/analytics_creation/components/advanced_step/hyper_parameters.tsx b/...ta_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 }) => {

diff --git a/..._analytics/pages/analytics_creation/components/advanced_step/outlier_hyper_parameters.tsx b/..._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 }) => {

diff --git a/...lytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx b/...lytics/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) {

diff --git a/...ion/components/shared/get_explain_data.ts → ...n/components/shared/fetch_explain_data.ts b/...ion/components/shared/get_explain_data.ts → ...n/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;

diff --git a/...blic/application/data_frame_analytics/pages/analytics_creation/components/shared/index.ts b/...blic/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';
diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/cloning.ts b/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);