[ML] Fixing missing advanced job summary items (#48537) (#48622)

* [ML] Fixing missing advanced job summary items * updating translations
elastic · Oct 18, 2019 · 1d6dcdb · 1d6dcdb
1 parent b06d553
commit 1d6dcdb
Show file tree

Hide file tree

Showing 21 changed files with 276 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
@@ -19,5 +19,6 @@ export enum CREATED_BY_LABEL {
 
 export const DEFAULT_MODEL_MEMORY_LIMIT = '10MB';
 export const DEFAULT_BUCKET_SPAN = '15m';
+export const DEFAULT_QUERY_DELAY = '60s';
 
 export const SHARED_RESULTS_INDEX_NAME = 'shared';
diff --git a/...s/new_job_new/pages/components/datafeed_step/components/query_delay/query_delay_input.tsx b/...s/new_job_new/pages/components/datafeed_step/components/query_delay/query_delay_input.tsx
@@ -9,8 +9,7 @@ import { EuiFieldText } from '@elastic/eui';
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Description } from './description';
 import { useStringifiedValue } from '../hooks';
-
-const DEFAULT_QUERY_DELAY = '60s';
+import { DEFAULT_QUERY_DELAY } from '../../../../../common/job_creator/util/constants';
 
 export const QueryDelayInput: FC = () => {
   const { jobCreator, jobCreatorUpdate, jobValidator, jobValidatorUpdated } = useContext(

diff --git a/...s/new_job_new/pages/components/datafeed_step/components/scroll_size/scroll_size_input.tsx b/...s/new_job_new/pages/components/datafeed_step/components/scroll_size/scroll_size_input.tsx
@@ -6,7 +6,7 @@
 
 import React, { FC, useState, useContext, useEffect } from 'react';
 import { EuiFieldNumber } from '@elastic/eui';
-import { newJobDefaults } from '../../../../../../new_job_new/utils/new_job_defaults';
+import { newJobDefaults } from '../../../../../utils/new_job_defaults';
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Description } from './description';
 

diff --git a/.../new_job_new/pages/components/pick_fields_step/components/advanced_view/advanced_view.tsx b/.../new_job_new/pages/components/pick_fields_step/components/advanced_view/advanced_view.tsx
@@ -8,14 +8,16 @@ import React, { Fragment, FC, useEffect, useState } from 'react';
 import { EuiHorizontalRule } from '@elastic/eui';
 
 import { AdvancedDetectors } from './metric_selection';
+import { AdvancedDetectorsSummary } from './metric_selection_summary';
 import { AdvancedSettings } from './settings';
 import { ExtraSettings } from './extra';
 
 interface Props {
+  isActive: boolean;
   setCanProceed?: (proceed: boolean) => void;
 }
 
-export const AdvancedView: FC<Props> = ({ setCanProceed }) => {
+export const AdvancedView: FC<Props> = ({ isActive, setCanProceed }) => {
   const [metricsValid, setMetricValid] = useState(false);
   const [settingsValid, setSettingsValid] = useState(false);
 
@@ -27,13 +29,17 @@ export const AdvancedView: FC<Props> = ({ setCanProceed }) => {
 
   return (
     <Fragment>
-      <Fragment>
-        <ExtraSettings />
-        <EuiHorizontalRule margin="l" />
-        <AdvancedDetectors setIsValid={setMetricValid} />
-        <EuiHorizontalRule margin="l" />
-        <AdvancedSettings setIsValid={setSettingsValid} />
-      </Fragment>
+      {isActive === false ? (
+        <AdvancedDetectorsSummary />
+      ) : (
+        <Fragment>
+          <ExtraSettings />
+          <EuiHorizontalRule margin="l" />
+          <AdvancedDetectors setIsValid={setMetricValid} />
+          <EuiHorizontalRule margin="l" />
+          <AdvancedSettings setIsValid={setSettingsValid} />
+        </Fragment>
+      )}
     </Fragment>
   );
 };
diff --git a/.../new_job_new/pages/components/pick_fields_step/components/advanced_view/detector_list.tsx b/.../new_job_new/pages/components/pick_fields_step/components/advanced_view/detector_list.tsx
@@ -25,11 +25,12 @@ import { AdvancedJobCreator } from '../../../../../common/job_creator';
 import { detectorToString } from '../../../../../../../util/string_utils';
 
 interface Props {
+  isActive: boolean;
   onEditJob: (i: number) => void;
   onDeleteJob: (i: number) => void;
 }
 
-export const DetectorList: FC<Props> = ({ onEditJob, onDeleteJob }) => {
+export const DetectorList: FC<Props> = ({ isActive, onEditJob, onDeleteJob }) => {
   const { jobCreator: jc, jobCreatorUpdated } = useContext(JobCreatorContext);
   const jobCreator = jc as AdvancedJobCreator;
   const [detectors, setDetectors] = useState(jobCreator.detectors);

diff --git a/...w_job_new/pages/components/pick_fields_step/components/advanced_view/metric_selection.tsx b/...w_job_new/pages/components/pick_fields_step/components/advanced_view/metric_selection.tsx
@@ -85,7 +85,7 @@ export const AdvancedDetectors: FC<Props> = ({ setIsValid }) => {
 
   return (
     <Fragment>
-      <DetectorList onEditJob={onEditJob} onDeleteJob={onDeleteJob} />
+      <DetectorList isActive={true} onEditJob={onEditJob} onDeleteJob={onDeleteJob} />
       <MetricSelector
         payload={modalPayload}
         fields={fields}

diff --git a/...w/pages/components/pick_fields_step/components/advanced_view/metric_selection_summary.tsx b/...w/pages/components/pick_fields_step/components/advanced_view/metric_selection_summary.tsx
@@ -0,0 +1,13 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import { DetectorList } from './detector_list';
+
+export const AdvancedDetectorsSummary: FC = () => (
+  <DetectorList isActive={false} onEditJob={() => {}} onDeleteJob={() => {}} />
+);
diff --git a/..._new/pages/components/pick_fields_step/components/multi_metric_view/multi_metric_view.tsx b/..._new/pages/components/pick_fields_step/components/multi_metric_view/multi_metric_view.tsx
@@ -28,9 +28,9 @@ export const MultiMetricView: FC<Props> = ({ isActive, setCanProceed }) => {
 
   return (
     <Fragment>
-      {isActive === false && <MultiMetricDetectorsSummary />}
-
-      {isActive === true && (
+      {isActive === false ? (
+        <MultiMetricDetectorsSummary />
+      ) : (
         <Fragment>
           <MultiMetricDetectors setIsValid={setMetricValid} />
 

diff --git a/..._job_new/pages/components/pick_fields_step/components/population_view/population_view.tsx b/..._job_new/pages/components/pick_fields_step/components/population_view/population_view.tsx
@@ -28,9 +28,9 @@ export const PopulationView: FC<Props> = ({ isActive, setCanProceed }) => {
 
   return (
     <Fragment>
-      {isActive === false && <PopulationDetectorsSummary />}
-
-      {isActive === true && (
+      {isActive === false ? (
+        <PopulationDetectorsSummary />
+      ) : (
         <Fragment>
           <PopulationDetectors setIsValid={setMetricValid} />
           {metricsValid && (

diff --git a/...ew/pages/components/pick_fields_step/components/single_metric_view/single_metric_view.tsx b/...ew/pages/components/pick_fields_step/components/single_metric_view/single_metric_view.tsx
@@ -28,9 +28,9 @@ export const SingleMetricView: FC<Props> = ({ isActive, setCanProceed }) => {
 
   return (
     <Fragment>
-      {isActive === false && <SingleMetricDetectorsSummary />}
-
-      {isActive === true && (
+      {isActive === false ? (
+        <SingleMetricDetectorsSummary />
+      ) : (
         <Fragment>
           <SingleMetricDetectors setIsValid={setMetricValid} />
           {metricsValid && (

diff --git a/...gacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/pick_fields.tsx b/...gacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/pick_fields.tsx
@@ -47,7 +47,9 @@ export const PickFieldsStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep })
           {jobType === JOB_TYPE.POPULATION && (
             <PopulationView isActive={isCurrentStep} setCanProceed={setNextActive} />
           )}
-          {jobType === JOB_TYPE.ADVANCED && <AdvancedView setCanProceed={setNextActive} />}
+          {jobType === JOB_TYPE.ADVANCED && (
+            <AdvancedView isActive={isCurrentStep} setCanProceed={setNextActive} />
+          )}
           <WizardNav
             previous={() =>
               setCurrentStep(

diff --git a/...cy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/common.tsx b/...cy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/components/common.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 React, { FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiTitle } from '@elastic/eui';
+
+export interface ListItems {
+  title: string;
+  description: string | JSX.Element;
+}
+
+export const trueLabel = i18n.translate('xpack.ml.newJob.wizard.summaryStep.trueLabel', {
+  defaultMessage: 'True',
+});
+
+export const falseLabel = i18n.translate('xpack.ml.newJob.wizard.summaryStep.falseLabel', {
+  defaultMessage: 'False',
+});
+
+export const defaultLabel = i18n.translate('xpack.ml.newJob.wizard.summaryStep.defaultString', {
+  defaultMessage: 'default',
+});
+
+export const JobSectionTitle: FC = () => (
+  <EuiTitle size="s">
+    <h3>
+      <FormattedMessage
+        id="xpack.ml.newJob.wizard.summaryStep.jobConfig.title"
+        defaultMessage="Job configuration"
+      />
+    </h3>
+  </EuiTitle>
+);
+
+export const DatafeedSectionTitle: FC = () => (
+  <EuiTitle size="s">
+    <h3>
+      <FormattedMessage
+        id="xpack.ml.newJob.wizard.summaryStep.datafeedConfig.title"
+        defaultMessage="Datafeed configuration"
+      />
+    </h3>
+  </EuiTitle>
+);
+
+export const Italic: FC = ({ children }) => <span style={{ fontStyle: 'italic' }}>{children}</span>;
diff --git a/...ew_job_new/pages/components/summary_step/components/datafeed_details/datafeed_details.tsx b/...ew_job_new/pages/components/summary_step/components/datafeed_details/datafeed_details.tsx
@@ -0,0 +1,88 @@
+/*
+ * 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 React, { FC, useContext } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiDescriptionList, EuiFormRow } from '@elastic/eui';
+import { JobCreatorContext } from '../../../job_creator_context';
+import { MLJobEditor } from '../../../../../../jobs_list/components/ml_job_editor';
+import { calculateDatafeedFrequencyDefaultSeconds } from '../../../../../../../../common/util/job_utils';
+import { DEFAULT_QUERY_DELAY } from '../../../../../common/job_creator/util/constants';
+import { newJobDefaults } from '../../../../../utils/new_job_defaults';
+import { ListItems, defaultLabel, Italic } from '../common';
+
+const EDITOR_HEIGHT = '200px';
+
+export const DatafeedDetails: FC = () => {
+  const { jobCreator } = useContext(JobCreatorContext);
+  const { datafeeds } = newJobDefaults();
+
+  const queryString = JSON.stringify(jobCreator.query, null, 2);
+  const defaultFrequency = calculateDatafeedFrequencyDefaultSeconds(jobCreator.bucketSpanMs / 1000);
+  const scrollSizeDefault = datafeeds.scroll_size || '';
+
+  const queryDelay = jobCreator.queryDelay || (
+    <Italic>{`${DEFAULT_QUERY_DELAY} (${defaultLabel})`}</Italic>
+  );
+  const frequency = jobCreator.frequency || (
+    <Italic>{`${defaultFrequency} (${defaultLabel})`}</Italic>
+  );
+  const scrollSize =
+    jobCreator.scrollSize !== null ? (
+      `${jobCreator.scrollSize}`
+    ) : (
+      <Italic>{`${scrollSizeDefault} (${defaultLabel})`}</Italic>
+    );
+
+  const datafeedDetails: ListItems[] = [
+    {
+      title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.datafeedDetails.timeField.title', {
+        defaultMessage: 'Time field',
+      }),
+      description: jobCreator.timeFieldName,
+    },
+    {
+      title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.datafeedDetails.queryDelay.title', {
+        defaultMessage: 'Query delay',
+      }),
+      description: queryDelay,
+    },
+
+    {
+      title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.datafeedDetails.frequency.title', {
+        defaultMessage: 'Frequency',
+      }),
+      description: frequency,
+    },
+
+    {
+      title: i18n.translate('xpack.ml.newJob.wizard.summaryStep.datafeedDetails.scrollSize.title', {
+        defaultMessage: 'Scroll size',
+      }),
+      description: scrollSize,
+    },
+  ];
+
+  const queryTitle = i18n.translate(
+    'xpack.ml.newJob.wizard.summaryStep.datafeedDetails.query.title',
+    {
+      defaultMessage: 'Scroll size',
+    }
+  );
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFormRow label={queryTitle} fullWidth={true}>
+          <MLJobEditor value={queryString} height={EDITOR_HEIGHT} readOnly={true} />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiDescriptionList compressed listItems={datafeedDetails} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/...ublic/jobs/new_job_new/pages/components/summary_step/components/datafeed_details/index.ts b/...ublic/jobs/new_job_new/pages/components/summary_step/components/datafeed_details/index.ts
@@ -0,0 +1,6 @@
+/*
+ * 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.
+ */
+export { DatafeedDetails } from './datafeed_details';
diff --git a/...omponents/summary_step/detector_chart.tsx → ...ponents/detector_chart/detector_chart.tsx b/...omponents/summary_step/detector_chart.tsx → ...ponents/detector_chart/detector_chart.tsx
@@ -5,11 +5,12 @@
  */
 
 import React, { Fragment, FC, useContext } from 'react';
-import { JobCreatorContext } from '../job_creator_context';
-import { JOB_TYPE } from '../../../common/job_creator/util/constants';
-import { SingleMetricView } from '../pick_fields_step/components/single_metric_view';
-import { MultiMetricView } from '../pick_fields_step/components/multi_metric_view';
-import { PopulationView } from '../pick_fields_step/components/population_view';
+import { JobCreatorContext } from '../../../job_creator_context';
+import { JOB_TYPE } from '../../../../../common/job_creator/util/constants';
+import { SingleMetricView } from '../../../pick_fields_step/components/single_metric_view';
+import { MultiMetricView } from '../../../pick_fields_step/components/multi_metric_view';
+import { PopulationView } from '../../../pick_fields_step/components/population_view';
+import { AdvancedView } from '../../../pick_fields_step/components/advanced_view';
 
 export const DetectorChart: FC = () => {
   const { jobCreator } = useContext(JobCreatorContext);
@@ -19,6 +20,7 @@ export const DetectorChart: FC = () => {
       {jobCreator.type === JOB_TYPE.SINGLE_METRIC && <SingleMetricView isActive={false} />}
       {jobCreator.type === JOB_TYPE.MULTI_METRIC && <MultiMetricView isActive={false} />}
       {jobCreator.type === JOB_TYPE.POPULATION && <PopulationView isActive={false} />}
+      {jobCreator.type === JOB_TYPE.ADVANCED && <AdvancedView isActive={false} />}
     </Fragment>
   );
 };
diff --git a/.../public/jobs/new_job_new/pages/components/summary_step/components/detector_chart/index.ts b/.../public/jobs/new_job_new/pages/components/summary_step/components/detector_chart/index.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { DetectorChart } from './detector_chart';
diff --git a/.../ml/public/jobs/new_job_new/pages/components/summary_step/components/job_details/index.ts b/.../ml/public/jobs/new_job_new/pages/components/summary_step/components/job_details/index.ts
@@ -0,0 +1,6 @@
+/*
+ * 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.
+ */
+export { JobDetails } from './job_details';