fix create/edit detector page according to UX review comments (#67)

opendistro-for-elasticsearch · Apr 30, 2020 · 12e8e61 · 12e8e61
1 parent b1238a6
commit 12e8e61
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 31 deletions.
diff --git a/public/pages/createDetector/components/DetectorInfo/DetectorInfo.tsx b/public/pages/createDetector/components/DetectorInfo/DetectorInfo.tsx
@@ -32,7 +32,8 @@ function DetectorInfo(props: DetectorInfoProps) {
           <FormattedFormRow
             title="Name"
             hint="Specify a unique and descriptive name that is easy to
-          recognize."
+          recognize. Detector name must contain 1-64 characters. 
+          Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)"
             isInvalid={isInvalid(field.name, form)}
             error={getError(field.name, form)}
           >

diff --git a/...createDetector/components/DetectorInfo/__tests__/__snapshots__/DetectorInfo.test.tsx.snap b/...createDetector/components/DetectorInfo/__tests__/__snapshots__/DetectorInfo.test.tsx.snap
@@ -4,17 +4,17 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
 <div>
   <div
     class="euiPanel euiPanel--paddingMedium"
-    style="padding-left: 0px; padding-right: 0px;"
+    style="padding: 20px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px 10px;"
+      style="padding: 0px;"
     >
       <div
         class="euiFlexItem"
       >
         <h3
-          class="euiTitle euiTitle--small"
+          class="euiTitle euiTitle--small content-panel-title"
         >
           Name and description
         </h3>
@@ -42,11 +42,11 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
     <div
-      style="padding: 0px 10px;"
+      style="padding: 10px 0px;"
     >
       <div
         class="euiFormRow"
-        hint="Specify a unique and descriptive name that is easy to recognize."
+        hint="Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters.  Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)"
         id="random_id-row"
         title="Name"
       >
@@ -66,7 +66,7 @@ exports[`<DetectorInfo /> spec renders the component 1`] = `
               <p
                 class="sublabel"
               >
-                Specify a unique and descriptive name that is easy to recognize.
+                Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters.  Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)
               </p>
             </div>
           </label>

diff --git a/public/pages/createDetector/components/Settings/Settings.tsx b/public/pages/createDetector/components/Settings/Settings.tsx
@@ -42,7 +42,8 @@ export const Settings = () => {
                 title="Detector interval"
                 hint="Define how often the detector collects data to generate
                 anomalies. The shorter the interval is, the more real time
-                the detector results will be. The detector interval,
+                the detector results will be, and the more computing resources
+                the detector will need. The detector interval,
                 together with data ingestion speed, also determines the
                 preparation time of the detector. Long intervals and slow
                 ingestion speed means the detector takes longer time to
@@ -80,6 +81,7 @@ export const Settings = () => {
             need to account for extra processing time."
             isInvalid={isInvalid(field.name, form)}
             error={getError(field.name, form)}
+            style={{ marginTop: '16px' }}
           >
             <EuiFlexGroup gutterSize="s" alignItems="center">
               <EuiFlexItem grow={false}>

diff --git a/public/pages/createDetector/containers/CreateDetector.tsx b/public/pages/createDetector/containers/CreateDetector.tsx
@@ -42,7 +42,7 @@ import {
   updateDetector,
 } from '../../../redux/reducers/ad';
 import { BREADCRUMBS } from '../../../utils/constants';
-import { getErrorMessage } from '../../../utils/utils';
+import { getErrorMessage, validateName } from '../../../utils/utils';
 import { DetectorInfo } from '../components/DetectorInfo';
 import { useFetchDetectorInfo } from '../hooks/useFetchDetectorInfo';
 import { DataSource } from './DataSource/index';
@@ -74,10 +74,19 @@ export function CreateDetector(props: CreateADProps) {
     const createOrEditBreadcrumb = props.isEdit
       ? BREADCRUMBS.EDIT_DETECTOR
       : BREADCRUMBS.CREATE_DETECTOR;
-    chrome.breadcrumbs.set([
+    let breadCrumbs = [
       BREADCRUMBS.ANOMALY_DETECTOR,
+      BREADCRUMBS.DETECTORS,
       createOrEditBreadcrumb,
-    ]);
+    ];
+    if (detector && detector.name) {
+      breadCrumbs.splice(2, 0, {
+        text: detector.name,
+        //@ts-ignore
+        href: `#/detectors/${detectorId}`,
+      });
+    }
+    chrome.breadcrumbs.set(breadCrumbs);
   });
   // If no detector found with ID, redirect it to list
   useEffect(() => {
@@ -144,6 +153,10 @@ export function CreateDetector(props: CreateADProps) {
     if (isEmpty(detectorName)) {
       throw 'Detector name can not be empty';
     } else {
+      const error = validateName(detectorName);
+      if (error) {
+        throw error;
+      }
       //TODO::Avoid making call if value is same
       const resp = await dispatch(
         searchDetector({ query: { term: { 'name.keyword': detectorName } } })
@@ -182,7 +195,7 @@ export function CreateDetector(props: CreateADProps) {
           initialValues={detectorToFormik(detector)}
           onSubmit={handleSubmit}
         >
-          {formikProps => (
+          {(formikProps) => (
             <Fragment>
               <DetectorInfo onValidateDetectorName={handleValidateName} />
               <EuiSpacer />
@@ -204,7 +217,7 @@ export function CreateDetector(props: CreateADProps) {
                     //@ts-ignore
                     onClick={formikProps.handleSubmit}
                   >
-                    {props.isEdit ? 'Save change' : 'Create'}
+                    {props.isEdit ? 'Save changes' : 'Create'}
                   </EuiButton>
                 </EuiFlexItem>
               </EuiFlexGroup>

diff --git a/public/pages/createDetector/containers/__tests__/__snapshots__/CreateDetector.test.tsx.snap b/public/pages/createDetector/containers/__tests__/__snapshots__/CreateDetector.test.tsx.snap
@@ -23,17 +23,17 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
     </div>
     <div
       class="euiPanel euiPanel--paddingMedium"
-      style="padding-left: 0px; padding-right: 0px;"
+      style="padding: 20px;"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        style="padding: 0px 10px;"
+        style="padding: 0px;"
       >
         <div
           class="euiFlexItem"
         >
           <h3
-            class="euiTitle euiTitle--small"
+            class="euiTitle euiTitle--small content-panel-title"
           >
             Name and description
           </h3>
@@ -61,11 +61,11 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
       <div
-        style="padding: 0px 10px;"
+        style="padding: 10px 0px;"
       >
         <div
           class="euiFormRow"
-          hint="Specify a unique and descriptive name that is easy to recognize."
+          hint="Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters.  Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)"
           id="random_id-row"
           title="Name"
         >
@@ -85,7 +85,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
                 <p
                   class="sublabel"
                 >
-                  Specify a unique and descriptive name that is easy to recognize.
+                  Specify a unique and descriptive name that is easy to recognize. Detector name must contain 1-64 characters.  Valid characters are a-z, A-Z, 0-9, -(hyphen) and _(underscore)
                 </p>
               </div>
             </label>
@@ -154,17 +154,17 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
     />
     <div
       class="euiPanel euiPanel--paddingMedium"
-      style="padding-left: 0px; padding-right: 0px;"
+      style="padding: 20px;"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        style="padding: 0px 10px;"
+        style="padding: 0px;"
       >
         <div
           class="euiFlexItem"
         >
           <h3
-            class="euiTitle euiTitle--small"
+            class="euiTitle euiTitle--small content-panel-title"
           >
             Data Source
           </h3>
@@ -192,7 +192,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
       <div
-        style="padding: 0px 10px;"
+        style="padding: 10px 0px;"
       >
         <div
           class="euiFormRow"
@@ -515,17 +515,17 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
     />
     <div
       class="euiPanel euiPanel--paddingMedium"
-      style="padding-left: 0px; padding-right: 0px;"
+      style="padding: 20px;"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        style="padding: 0px 10px;"
+        style="padding: 0px;"
       >
         <div
           class="euiFlexItem"
         >
           <h3
-            class="euiTitle euiTitle--small"
+            class="euiTitle euiTitle--small content-panel-title"
           >
             Detector operation settings
           </h3>
@@ -553,7 +553,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
       <div
-        style="padding: 0px 10px;"
+        style="padding: 10px 0px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -564,7 +564,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
           >
             <div
               class="euiFormRow euiFormRow--fullWidth"
-              hint="Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies."
+              hint="Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be, and the more computing resources the detector will need. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies."
               id="random_id-row"
               title="Detector interval"
             >
@@ -584,7 +584,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
                     <p
                       class="sublabel"
                     >
-                      Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies.
+                      Define how often the detector collects data to generate anomalies. The shorter the interval is, the more real time the detector results will be, and the more computing resources the detector will need. The detector interval, together with data ingestion speed, also determines the preparation time of the detector. Long intervals and slow ingestion speed means the detector takes longer time to collect sufficient data to generate anomalies.
                     </p>
                   </div>
                 </label>
@@ -635,6 +635,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
           class="euiFormRow euiFormRow--fullWidth"
           hint="Specify a window of delay for a detector to fetch data, if you need to account for extra processing time."
           id="random_id-row"
+          style="margin-top: 16px;"
           title="Window delay"
         >
           <div>
@@ -678,7 +679,7 @@ exports[`<CreateDetector /> spec create detector renders the component 1`] = `
                     name="windowDelay"
                     placeholder="Window delay"
                     type="number"
-                    value="0"
+                    value="1"
                   />
                 </div>
               </div>

diff --git a/public/pages/createDetector/containers/utils/constant.ts b/public/pages/createDetector/containers/utils/constant.ts
@@ -26,7 +26,7 @@ export const INITIAL_VALUES: ADFormikValues = {
   filterType: FILTER_TYPES.SIMPLE,
   filterQuery: JSON.stringify({ query: { bool: { filter: [] } } }, null, 4),
   detectionInterval: 10,
-  windowDelay: 0,
+  windowDelay: 1,
 };
 
 export const EMPTY_UI_FILTER: UIFilter = {