change words and padding according to ux review comments (#132)

* change words and padding according to ux review comments * fix padding of monitor schedule
opendistro-for-elasticsearch · Apr 29, 2020 · 4705f82 · 4705f82
1 parent 7b79602
commit 4705f82
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 12 deletions.
diff --git a/public/pages/CreateMonitor/components/MonitorDefinition/MonitorDefinition.js b/public/pages/CreateMonitor/components/MonitorDefinition/MonitorDefinition.js
@@ -31,15 +31,15 @@ const onChangeDefinition = (e, form, resetResponse) => {
 const selectDefinitions = plugins => {
   return plugins === undefined || plugins.indexOf(ES_AD_PLUGIN) == -1
     ? defaultSelectDefinitions
-    : [...defaultSelectDefinitions, { value: 'ad', text: 'Define using Anomaly detector' }];
+    : [...defaultSelectDefinitions, { value: 'ad', text: 'Define using anomaly detector' }];
 };
 
 const MonitorDefinition = ({ resetResponse, plugins }) => (
   <FormikSelect
     name="searchType"
     formRow
     rowProps={{
-      label: 'How do you want to define the monitor?',
+      label: 'Define the monitor',
       style: { paddingLeft: '10px' },
     }}
     inputProps={{

diff --git a/...s/CreateMonitor/components/MonitorDefinition/__snapshots__/MonitorDefinition.test.js.snap b/...s/CreateMonitor/components/MonitorDefinition/__snapshots__/MonitorDefinition.test.js.snap
@@ -13,7 +13,7 @@ exports[`MonitorDefinition renders 1`] = `
       class="euiFormLabel euiFormRow__label"
       for="searchType-form-row"
     >
-      How do you want to define the monitor?
+      Define the monitor
     </label>
   </div>
   <div

diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Interval.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Interval.js
@@ -49,7 +49,7 @@ const Interval = () => (
         inputProps={{ icon: 'clock', min: 1 }}
       />
     </EuiFlexItem>
-    <EuiFlexItem style={{ margin: '0px' }}>
+    <EuiFlexItem style={{ margin: '2px' }}>
       <FormikSelect
         name="period.unit"
         formRow

diff --git a/...ages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap b/...ages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap
@@ -265,7 +265,7 @@ exports[`Frequencies renders FrequencyPicker 1`] = `
   </div>
   <div
     class="euiFlexItem"
-    style="margin:0px"
+    style="margin:2px"
   >
     <div
       class="euiFormRow euiFormRow--hasEmptyLabelSpace"
@@ -379,7 +379,7 @@ exports[`Frequencies renders Interval 1`] = `
   </div>
   <div
     class="euiFlexItem"
-    style="margin:0px"
+    style="margin:2px"
   >
     <div
       class="euiFormRow euiFormRow--hasEmptyLabelSpace"

diff --git a/public/pages/CreateMonitor/containers/AnomalyDetectors/AnomalyDetectors.js b/public/pages/CreateMonitor/containers/AnomalyDetectors/AnomalyDetectors.js
@@ -65,7 +65,11 @@ class AnomalyDetectors extends React.Component {
       }
     }
     return (
-      <div>
+      <div
+        style={{
+          maxWidth: '390px',
+        }}
+      >
         <FormikComboBox
           name={'detectorId'}
           formRow

diff --git a/...eMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap b/...eMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
@@ -113,7 +113,13 @@ exports[`AnomalyDetectors renders 1`] = `
       }
     }
   >
-    <div>
+    <div
+      style={
+        Object {
+          "maxWidth": "390px",
+        }
+      }
+    >
       <FormikComboBox
         fieldProps={
           Object {

diff --git a/public/pages/CreateTrigger/containers/DefineTrigger/AnomalyDetectorTrigger.js b/public/pages/CreateTrigger/containers/DefineTrigger/AnomalyDetectorTrigger.js
@@ -58,7 +58,7 @@ class AnomalyDetectorTrigger extends React.Component {
                     thresholdEnum={adValues.anomalyGradeThresholdEnum}
                     keyFieldName="anomalyDetector.anomalyGradeThresholdEnum"
                     valueFieldName="anomalyDetector.anomalyGradeThresholdValue"
-                    label="Anomaly grade condition"
+                    label="Anomaly grade threshold"
                   />
                   <EuiSpacer size="xs" />
                   <AnomaliesChart
@@ -77,7 +77,7 @@ class AnomalyDetectorTrigger extends React.Component {
                     thresholdEnum={adValues.anomalyConfidenceThresholdEnum}
                     keyFieldName="anomalyDetector.anomalyConfidenceThresholdEnum"
                     valueFieldName="anomalyDetector.anomalyConfidenceThresholdValue"
-                    label="Anomaly confidence condition"
+                    label="Anomaly confidence threshold"
                   />
                   <EuiSpacer size="xs" />
                   <AnomaliesChart

diff --git a/public/pages/MonitorDetails/containers/MonitorDetails.js b/public/pages/MonitorDetails/containers/MonitorDetails.js
@@ -297,8 +297,7 @@ export default class MonitorDetails extends Component {
                     external="true"
                     target="_blank"
                   >
-                    {detector.name}
-                    <EuiIcon size="s" type="popout" />
+                    {detector.name} <EuiIcon size="s" type="popout" />
                   </EuiLink>
                 </EuiText>
               </EuiFlexItem>