Code review opensearch-project#573

Signed-off-by: Jovan Cvetkovic <[email protected]>
jovancacvetkovic · Jun 23, 2023 · a9cef2e · a9cef2e
1 parent 5ec5aad
commit a9cef2e
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 34 deletions.
diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/AssociateMonitors.js b/public/pages/CreateMonitor/components/AssociateMonitors/AssociateMonitors.js
@@ -29,7 +29,7 @@ export const getMonitors = async (httpClient) => {
   }
 };
 
-const AssociateMonitors = ({ isDarkMode, values, httpClient }) => {
+const AssociateMonitors = ({ isDarkMode, values, httpClient, errors }) => {
   const [graphUi, setGraphUi] = useState(false);
 
   useEffect(() => {
@@ -50,7 +50,7 @@ const AssociateMonitors = ({ isDarkMode, values, httpClient }) => {
       {graphUi ? (
         <MonitorsList values={values} httpClient={httpClient} />
       ) : (
-        <MonitorsEditor values={values} />
+        <MonitorsEditor values={values} errors={errors} isDarkMode={isDarkMode} />
       )}
     </Fragment>
   );

diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsEditor.js b/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsEditor.js
@@ -3,19 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormikCodeEditor } from '../../../../../components/FormControls';
-import { hasError, isInvalid, validateExtractionQuery } from '../../../../../utils/validate';
 
-const MonitorsEditor = ({ values, isDarkMode }) => {
+const MonitorsEditor = ({ values, isDarkMode, errors }) => {
   const codeFieldName = 'associatedMonitorsEditor';
   const formikValueName = 'associatedMonitors';
   const [editorValue, setEditorValue] = useState('');
 
   useEffect(() => {
     try {
       const code = JSON.stringify(values.associatedMonitors, null, 4);
-      // _.set(values, codeFieldName, code);
+      _.set(values, codeFieldName, code);
       setEditorValue(code);
     } catch (e) {}
   }, [values.associatedMonitors]);
@@ -34,25 +33,26 @@ const MonitorsEditor = ({ values, isDarkMode }) => {
   };
 
   const isInvalid = (name, form) => {
-    if (form.touched[codeFieldName]) {
-      try {
-        const associatedMonitors = form.values[name];
-        const json = JSON.parse(associatedMonitors);
-        return !json.sequence?.delegates?.length;
-      } catch (e) {
-        return false;
-      }
+    try {
+      const associatedMonitors = form.values[name];
+      const json = JSON.parse(associatedMonitors);
+      return !json.sequence?.delegates?.length || json.sequence?.delegates?.length < 2;
+    } catch (e) {
+      return true;
     }
   };
 
   const hasError = (name, form) => {
+    const associatedMonitors = form.values[name];
+    return validate(associatedMonitors);
+  };
+
+  const validate = (value) => {
     try {
-      const associatedMonitors = form.values[name];
-      const json = JSON.parse(associatedMonitors);
-      return (
-        json.sequence?.delegates?.length < 2 &&
-        'Delegates list can not be empty or have less then two associated monitors.'
-      );
+      const json = JSON.parse(value);
+      if (!json.sequence?.delegates?.length || json.sequence?.delegates?.length < 2) {
+        return 'Delegates list can not be empty or have less then two associated monitors.';
+      }
     } catch (e) {
       return 'Invalid json.';
     }
@@ -62,14 +62,17 @@ const MonitorsEditor = ({ values, isDarkMode }) => {
     <FormikCodeEditor
       name={codeFieldName}
       formRow
-      fieldProps={{}}
+      fieldProps={{
+        validate: validate,
+      }}
       rowProps={{
         label: 'Define workflow',
         fullWidth: true,
-        // isInvalid: (name, form) => isInvalid(name, form),
-        // error: (name, form) => hasError(name, form),
+        isInvalid: (name, form) => form.touched[codeFieldName] && isInvalid(name, form),
+        error: hasError,
       }}
       inputProps={{
+        isInvalid: (name, form) => isInvalid(name, form),
         mode: 'json',
         width: '80%',
         height: '300px',

diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsList.js b/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsList.js
@@ -177,7 +177,7 @@ const MonitorsList = ({ values, httpClient }) => {
     <FormikInputWrapper
       name={formikFieldName}
       fieldProps={{
-        validate: () => validate(),
+        validate: validate,
       }}
       render={({ form }) => (
         <FormikFormRow

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -303,7 +303,12 @@ export default class CreateMonitor extends Component {
 
               <EuiSpacer />
 
-              <WorkflowDetails isDarkMode={isDarkMode} values={values} httpClient={httpClient} />
+              <WorkflowDetails
+                isDarkMode={isDarkMode}
+                values={values}
+                httpClient={httpClient}
+                errors={errors}
+              />
 
               <EuiSpacer />
 

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/utils/constants.js b/public/pages/CreateMonitor/containers/CreateMonitor/utils/constants.js
@@ -73,6 +73,7 @@ export const FORMIK_INITIAL_VALUES = {
   detectorId: '',
   associatedMonitors: DEFAULT_ASSOCIATED_MONITORS_VALUE,
   associatedMonitorsList: [],
+  associatedMonitorsEditor: '',
 };
 
 export const FORMIK_INITIAL_AGG_VALUES = {

diff --git a/public/pages/CreateMonitor/containers/WorkflowDetails/WorkflowDetails.js b/public/pages/CreateMonitor/containers/WorkflowDetails/WorkflowDetails.js
@@ -10,7 +10,7 @@ import AssociateMonitors from '../../components/AssociateMonitors/AssociateMonit
 import { EuiSpacer } from '@elastic/eui';
 import { MONITOR_TYPE, SEARCH_TYPE } from '../../../../utils/constants';
 
-const WorkflowDetails = ({ values, isDarkMode, httpClient }) => {
+const WorkflowDetails = ({ values, isDarkMode, httpClient, errors }) => {
   const isAd = values.searchType === SEARCH_TYPE.AD;
   const isComposite = values.monitor_type === MONITOR_TYPE.COMPOSITE_LEVEL;
   return (
@@ -29,7 +29,12 @@ const WorkflowDetails = ({ values, isDarkMode, httpClient }) => {
       {isComposite && (
         <Fragment>
           <EuiSpacer size="xl" />
-          <AssociateMonitors isDarkMode={isDarkMode} values={values} httpClient={httpClient} />
+          <AssociateMonitors
+            isDarkMode={isDarkMode}
+            values={values}
+            httpClient={httpClient}
+            errors={errors}
+          />
         </Fragment>
       )}
     </ContentPanel>

diff --git a/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionBuilder.js b/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionBuilder.js
@@ -105,7 +105,7 @@ const ExpressionBuilder = ({
 
     const condition = _.get(values, formikFullFieldName, '');
     const expressions = conditionToExpressions(condition, monitors);
-    setUsedExpressions(expressions.length ? expressions : [DEFAULT_EXPRESSION]);
+    setUsedExpressions(expressions?.length ? expressions : [DEFAULT_EXPRESSION]);
   };
 
   const expressionsToCondition = (expressions) => {

diff --git a/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionEditor.js b/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionEditor.js
@@ -5,11 +5,11 @@ import { FormikCodeEditor } from '../../../../components/FormControls';
 const ExpressionEditor = ({ values, formikFieldName, formikFieldPath, isDarkMode = false }) => {
   const [editorValue, setEditorValue] = useState('');
   const formikFullFieldName = `${formikFieldPath}${formikFieldName}`;
-  const formikFullCodeFieldName = 'triggerConditionsCode';
+  const formikFullCodeFieldName = _.replace(`${formikFullFieldName}_code`, /[.\[\]]/gm, '_');
 
   useEffect(() => {
     const code = _.get(values, formikFullFieldName, '');
-    // _.set(values, formikFullCodeFieldName, code);
+    _.set(values, formikFullCodeFieldName, code);
     setEditorValue(code);
   }, [values]);
 
@@ -19,19 +19,25 @@ const ExpressionEditor = ({ values, formikFieldName, formikFieldPath, isDarkMode
     return !form.values[name]?.length && 'Invalid condition.';
   };
 
+  const validate = (value) => {
+    if (!value?.length) return 'Invalid condition.';
+  };
+
   return (
     <FormikCodeEditor
       name={formikFullCodeFieldName}
       formRow
-      fieldProps={{}}
+      fieldProps={{
+        validate: validate,
+      }}
       rowProps={{
         label: 'Trigger condition',
         fullWidth: true,
-        // isInvalid: (name, form) => form.touched[name] && isInvalid(name, form),
-        // error: (name, form) => hasError(name, form),
+        isInvalid: (name, form) => form.touched[name] && isInvalid(name, form),
+        error: (name, form) => hasError(name, form),
       }}
       inputProps={{
-        // isInvalid: (name, form) => form.touched[name] && isInvalid(name, form),
+        isInvalid: (name, form) => form.touched[name] && isInvalid(name, form),
         mode: 'text',
         width: '80%',
         height: '300px',