updating detector text

elastic · Jun 22, 2021 · 6f648b1 · 6f648b1
1 parent adb6aa2
commit 6f648b1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 57 deletions.
diff --git a/...tion/jobs/new_job/pages/components/pick_fields_step/components/rare_field/description.tsx b/...tion/jobs/new_job/pages/components/pick_fields_step/components/rare_field/description.tsx
@@ -20,7 +20,7 @@ export const Description: FC = memo(({ children }) => {
       description={
         <FormattedMessage
           id="xpack.ml.newJob.wizard.pickFieldsStep.splitField.description"
-          defaultMessage="Select a field to partition analysis by. Each value of this field will be modeled independently individually."
+          defaultMessage="Select a field in which to detect rare values."
         />
       }
     >

diff --git a/...s/new_job/pages/components/pick_fields_step/components/rare_view/detector_description.tsx b/...s/new_job/pages/components/pick_fields_step/components/rare_view/detector_description.tsx
@@ -6,37 +6,33 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC, useContext, useEffect, useState } from 'react';
-import { EuiText, EuiCallOut } from '@elastic/eui';
+import { EuiCallOut } from '@elastic/eui';
 
 import { JobCreatorContext } from '../../../job_creator_context';
 import { RareJobCreator } from '../../../../../common/job_creator';
 import { RARE_DETECTOR_TYPE } from './rare_view';
 
 interface Props {
   detectorType: RARE_DETECTOR_TYPE;
-  isSummary?: boolean;
 }
 
-export const DetectorDescription: FC<Props> = ({ detectorType, isSummary = false }) => {
+export const DetectorDescription: FC<Props> = ({ detectorType }) => {
   const { jobCreator: jc, jobCreatorUpdated } = useContext(JobCreatorContext);
   const jobCreator = jc as RareJobCreator;
-  const [description, setDescription] = useState<string | null>(null);
+  const [description, setDescription] = useState<string[] | null>(null);
 
   useEffect(() => {
-    const desc = createDetectorDescription(jobCreator, detectorType, isSummary);
+    const desc = createDetectorDescription(jobCreator, detectorType);
     setDescription(desc);
   }, [jobCreatorUpdated]);
 
   if (description === null) {
     return null;
   }
 
-  return isSummary ? (
-    <EuiText>
-      <h5>{description}</h5>
-    </EuiText>
-  ) : (
+  return (
     <EuiCallOut
       title={i18n.translate(
         'xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.calloutTitle',
@@ -45,16 +41,20 @@ export const DetectorDescription: FC<Props> = ({ detectorType, isSummary = false
         }
       )}
     >
-      {description}
+      <FormattedMessage
+        id="xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.title"
+        defaultMessage="This job:"
+      />
+      <ul>
+        {description.map((d) => (
+          <li>{d}</li>
+        ))}
+      </ul>
     </EuiCallOut>
   );
 };
 
-function createDetectorDescription(
-  jobCreator: RareJobCreator,
-  detectorType: RARE_DETECTOR_TYPE,
-  isSummary: boolean
-) {
+function createDetectorDescription(jobCreator: RareJobCreator, detectorType: RARE_DETECTOR_TYPE) {
   if (jobCreator.rareField === null) {
     return null;
   }
@@ -63,52 +63,50 @@ function createDetectorDescription(
   const populationFieldName = jobCreator.populationField?.id;
   const splitFieldName = jobCreator.splitField?.id;
 
-  const desc = [
-    isSummary
-      ? i18n.translate(
-          'xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.beginningSummary',
-          {
-            defaultMessage: 'Detect ',
-          }
-        )
-      : i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.beginning', {
-          defaultMessage: 'This job will detect ',
-        }),
-  ];
+  const beginningSummary = i18n.translate(
+    'xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.beginningSummary',
+    {
+      defaultMessage: 'detects rare values of {rareFieldName}',
+      values: { rareFieldName },
+    }
+  );
 
-  if (detectorType === RARE_DETECTOR_TYPE.FREQ_RARE_POPULATION) {
-    desc.push(
-      i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.frequently', {
-        defaultMessage: 'frequently ',
-      })
-    );
-  }
+  const beginningSummaryFreq = i18n.translate(
+    'xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.beginningSummaryFreq',
+    {
+      defaultMessage: 'detects frequently rare values of {rareFieldName}',
+      values: { rareFieldName },
+    }
+  );
 
-  desc.push(
-    i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.values', {
-      defaultMessage: 'rare values of ',
-    })
+  const population = i18n.translate(
+    'xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.population',
+    {
+      defaultMessage: 'compared to the population of {populationFieldName}',
+      values: { populationFieldName },
+    }
   );
-  desc.push(rareFieldName);
+
+  const split = i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.split', {
+    defaultMessage: 'for each value of {splitFieldName}',
+    values: { splitFieldName },
+  });
+
+  const desc = [];
+
+  if (detectorType === RARE_DETECTOR_TYPE.FREQ_RARE_POPULATION) {
+    desc.push(beginningSummaryFreq);
+  } else {
+    desc.push(beginningSummary);
+  }
 
   if (populationFieldName !== undefined) {
-    desc.push(
-      i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.population', {
-        defaultMessage: ' compared to the population of ',
-      })
-    );
-    desc.push(populationFieldName);
+    desc.push(population);
   }
 
   if (splitFieldName !== undefined) {
-    desc.push(
-      i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.plainText.split', {
-        defaultMessage: ', for each value of ',
-      })
-    );
-    desc.push(splitFieldName);
+    desc.push(split);
   }
-  desc.push('.');
 
-  return desc.join('');
+  return desc;
 }
diff --git a/...w_job/pages/components/pick_fields_step/components/rare_view/metric_selection_summary.tsx b/...w_job/pages/components/pick_fields_step/components/rare_view/metric_selection_summary.tsx
@@ -72,7 +72,7 @@ export const RareDetectorsSummary: FC<Props> = ({ rareDetectorType }) => {
 
   return (
     <>
-      <DetectorDescription detectorType={rareDetectorType} isSummary={true} />
+      <DetectorDescription detectorType={rareDetectorType} />
       <EuiSpacer size="s" />
       <EventRateChart
         eventRateChartData={eventRateChartData}

diff --git a/...ion/jobs/new_job/pages/components/pick_fields_step/components/split_field/description.tsx b/...ion/jobs/new_job/pages/components/pick_fields_step/components/split_field/description.tsx
@@ -20,7 +20,7 @@ export const Description: FC = memo(({ children }) => {
       description={
         <FormattedMessage
           id="xpack.ml.newJob.wizard.pickFieldsStep.splitField.description"
-          defaultMessage="Select a field to partition analysis by. Each value of this field will be modeled independently individually."
+          defaultMessage="Select a field to split analysis by. Each value of this field will be modeled independently."
         />
       }
     >