[ML] Fixes convert to advanced and tweaks wizard navigation buttons (#…

…44616) * [ML] Fixes convert to advanced and tweaks wizard navigation buttons * using job type constants
elastic · Sep 3, 2019 · 4645468 · 4645468
1 parent c429b0b
commit 4645468
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 58 deletions.
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/util/constants.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/util/constants.ts
@@ -8,6 +8,7 @@ export enum JOB_TYPE {
   SINGLE_METRIC = 'single_metric',
   MULTI_METRIC = 'multi_metric',
   POPULATION = 'population',
+  ADVANCED = 'advanced',
 }
 
 export enum CREATED_BY_LABEL {

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/util/general.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/util/general.ts
@@ -13,8 +13,15 @@ import {
 } from '../../../../../../common/constants/aggregation_types';
 import { EVENT_RATE_FIELD_ID } from '../../../../../../common/types/fields';
 import { mlJobService } from '../../../../../services/job_service';
-import { JobCreator } from '../job_creator';
-import { CREATED_BY_LABEL } from './constants';
+import {
+  JobCreator,
+  SingleMetricJobCreator,
+  MultiMetricJobCreator,
+  PopulationJobCreator,
+  isMultiMetricJobCreator,
+  isPopulationJobCreator,
+} from '../';
+import { CREATED_BY_LABEL, JOB_TYPE } from './constants';
 
 // populate the detectors with Field and Agg objects loaded from the job capabilities service
 export function getRichDetectors(job: Job, datafeed: Datafeed) {
@@ -125,11 +132,20 @@ export function isSparseDataJob(job: Job, datafeed: Datafeed): boolean {
   return false;
 }
 
-function stashCombinedJob(jobCreator: JobCreator, skipTimeRangeStep: boolean = false) {
-  mlJobService.tempJobCloningObjects.job = {
+function stashCombinedJob(
+  jobCreator: JobCreator,
+  skipTimeRangeStep: boolean = false,
+  advanced: boolean = false
+) {
+  const combinedJob = {
     ...jobCreator.jobConfig,
     datafeed_config: jobCreator.datafeedConfig,
   };
+  if (advanced === true) {
+    mlJobService.currentJob = combinedJob;
+  } else {
+    mlJobService.tempJobCloningObjects.job = combinedJob;
+  }
 
   if (skipTimeRangeStep === true) {
     mlJobService.tempJobCloningObjects.skipTimeRangeStep = true;
@@ -138,21 +154,33 @@ function stashCombinedJob(jobCreator: JobCreator, skipTimeRangeStep: boolean = f
 
 export function convertToMultiMetricJob(jobCreator: JobCreator) {
   jobCreator.createdBy = CREATED_BY_LABEL.MULTI_METRIC;
-  stashCombinedJob(jobCreator, true);
+  stashCombinedJob(jobCreator, true, false);
 
-  window.location.href = window.location.href.replace('single_metric', 'multi_metric');
+  window.location.href = window.location.href.replace(
+    JOB_TYPE.SINGLE_METRIC,
+    JOB_TYPE.MULTI_METRIC
+  );
 }
 
-export function convertToAdvancedJob(jobCreator: JobCreator) {
+export function convertToAdvancedJob(
+  jobCreator: SingleMetricJobCreator | MultiMetricJobCreator | PopulationJobCreator
+) {
   jobCreator.createdBy = null;
-  stashCombinedJob(jobCreator);
+  stashCombinedJob(jobCreator, false, true);
+
+  let jobType = JOB_TYPE.SINGLE_METRIC;
+  if (isMultiMetricJobCreator(jobCreator)) {
+    jobType = JOB_TYPE.MULTI_METRIC;
+  } else if (isPopulationJobCreator(jobCreator)) {
+    jobType = JOB_TYPE.POPULATION;
+  }
 
-  window.location.href = window.location.href.replace('multi_metric', 'advanced');
+  window.location.href = window.location.href.replace(jobType, JOB_TYPE.ADVANCED);
 }
 
 export function resetJob(jobCreator: JobCreator) {
   jobCreator.jobId = '';
-  stashCombinedJob(jobCreator, true);
+  stashCombinedJob(jobCreator, true, false);
 
   window.location.href = '#/jobs/new_job';
 }
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx
@@ -16,7 +16,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { toastNotifications } from 'ui/notify';
-import { WizardNav } from '../wizard_nav';
+import { PreviousButton } from '../wizard_nav';
 import { WIZARD_STEPS, StepProps } from '../step_types';
 import { JobCreatorContext } from '../job_creator_context';
 import { JobRunner } from '../../../common/job_runner';
@@ -97,22 +97,30 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
           <EuiSpacer size="m" />
           <JobDetails />
 
-          {progress === 0 && <WizardNav previous={() => setCurrentStep(WIZARD_STEPS.VALIDATION)} />}
           <EuiHorizontalRule />
           <EuiFlexGroup>
             {progress < 100 && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  onClick={start}
-                  isDisabled={creatingJob === true || isValid === false}
-                  data-test-subj="mlJobWizardButtonCreateJob"
-                >
-                  <FormattedMessage
-                    id="xpack.ml.newJob.wizard.summaryStep.createJobButton"
-                    defaultMessage="Create job"
+              <Fragment>
+                <EuiFlexItem grow={false}>
+                  <PreviousButton
+                    previous={() => setCurrentStep(WIZARD_STEPS.VALIDATION)}
+                    previousActive={creatingJob === false && isValid === true}
                   />
-                </EuiButton>
-              </EuiFlexItem>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    onClick={start}
+                    isDisabled={creatingJob === true || isValid === false}
+                    data-test-subj="mlJobWizardButtonCreateJob"
+                    fill
+                  >
+                    <FormattedMessage
+                      id="xpack.ml.newJob.wizard.summaryStep.createJobButton"
+                      defaultMessage="Create job"
+                    />
+                  </EuiButton>
+                </EuiFlexItem>
+              </Fragment>
             )}
             {creatingJob === false && (
               <Fragment>

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/wizard_nav/index.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/wizard_nav/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { WizardNav } from './wizard_nav';
+export { WizardNav, PreviousButton, NextButton } from './wizard_nav';
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/wizard_nav/wizard_nav.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/wizard_nav/wizard_nav.tsx
@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 
 interface StepsNavProps {
   previousActive?: boolean;
@@ -23,36 +23,42 @@ export const WizardNav: FC<StepsNavProps> = ({
   next,
   nextActive = true,
 }) => (
-  <EuiFlexGroup>
-    <EuiFlexItem />
-    {previous && (
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          disabled={!previousActive}
-          onClick={previous}
-          iconType="arrowLeft"
-          size="s"
-          data-test-subj="mlJobWizardNavButtonPrevious"
-        >
-          <FormattedMessage
-            id="xpack.ml.newJob.wizard.previousStepButton"
-            defaultMessage="Previous"
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    )}
-    {next && (
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          disabled={!nextActive}
-          onClick={next}
-          iconType="arrowRight"
-          size="s"
-          data-test-subj="mlJobWizardNavButtonNext"
-        >
-          <FormattedMessage id="xpack.ml.newJob.wizard.nextStepButton" defaultMessage="Next" />
-        </EuiButton>
-      </EuiFlexItem>
-    )}
-  </EuiFlexGroup>
+  <Fragment>
+    <EuiHorizontalRule />
+    <EuiFlexGroup>
+      {previous && (
+        <EuiFlexItem grow={false}>
+          <PreviousButton previous={previous} previousActive={previousActive} />
+        </EuiFlexItem>
+      )}
+      {next && (
+        <EuiFlexItem grow={false}>
+          <NextButton next={next} nextActive={nextActive} />
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem />
+    </EuiFlexGroup>
+  </Fragment>
+);
+
+export const PreviousButton: FC<StepsNavProps> = ({ previous, previousActive = true }) => (
+  <EuiButton
+    disabled={!previousActive}
+    onClick={previous}
+    iconType="arrowLeft"
+    data-test-subj="mlJobWizardNavButtonPrevious"
+  >
+    <FormattedMessage id="xpack.ml.newJob.wizard.previousStepButton" defaultMessage="Previous" />
+  </EuiButton>
+);
+
+export const NextButton: FC<StepsNavProps> = ({ next, nextActive = true }) => (
+  <EuiButton
+    disabled={!nextActive}
+    onClick={next}
+    iconType="arrowRight"
+    data-test-subj="mlJobWizardNavButtonNext"
+  >
+    <FormattedMessage id="xpack.ml.newJob.wizard.nextStepButton" defaultMessage="Next" />
+  </EuiButton>
 );