Code review opensearch-project#573

Signed-off-by: Jovan Cvetkovic <[email protected]>

public/pages/CreateMonitor/components/AssociateMonitors/AssociateMonitors.js

@@ -3,90 +3,38 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
 import { EuiSpacer, EuiText } from '@elastic/eui';
 import MonitorsList from './components/MonitorsList';
-import { FormikCodeEditor } from '../../../../components/FormControls';
-import * as _ from 'lodash';
-import { isInvalid, hasError, validateExtractionQuery } from '../../../../utils/validate';
-
-const AssociateMonitors = ({
-  monitors,
-  options,
-  searchType = 'graph',
-  isDarkMode,
-  monitorValues,
-}) => {
-  const [graphUi, setGraphUi] = useState(searchType === 'graph');
-
-  const fieldName = 'associatedMonitors';
-  const fieldEditorName = 'associatedMonitorsEditor';
-  const queryTemplate = {
-    sequence: {
-      delegates: [],
+import MonitorsEditor from './components/MonitorsEditor';
+
+export const getMonitors = async (httpClient) => {
+  const response = await httpClient.get('../api/alerting/monitors', {
+    query: {
+      from: 0,
+      size: 1000,
+      search: '',
+      sortField: 'name',
+      sortDirection: 'desc',
+      state: 'all',
     },
-  };
+  });
+
+  if (response.ok) {
+    const { monitors, totalMonitors } = response;
+    return monitors.map((monitor) => ({ monitor_id: monitor.id, monitor_name: monitor.name }));
+  } else {
+    console.log('error getting monitors:', response);
+    return [];
+  }
+};
 
-  const delegatesToMonitors = (value) =>
-    value.sequence.delegates.map((monitor) => ({
-      label: '',
-      value: monitor.monitor_id,
-    }));
+const AssociateMonitors = ({ isDarkMode, values, httpClient }) => {
+  const [graphUi, setGraphUi] = useState(false);
 
   useEffect(() => {
-    if (monitors?.length) {
-      const value = { ...queryTemplate };
-      monitors.forEach((monitor, idx) => {
-        let delegate = {
-          order: idx + 1,
-          monitor_id: monitor.monitor_id,
-        };
-        value.sequence.delegates.push(delegate);
-        _.set(monitorValues, `associatedMonitor_${idx}`, {
-          label: monitor.monitor_name || '',
-          value: monitor.monitor_id,
-        });
-      });
-
-      try {
-        _.set(monitorValues, fieldEditorName, JSON.stringify(value, null, 4));
-        _.set(monitorValues, fieldName, delegatesToMonitors(value));
-      } catch (e) {
-        console.log('No monitor options are available.');
-      }
-    } else if (options?.length && !graphUi) {
-      const value = { ...queryTemplate };
-      const firstTwo = options.slice(0, 2);
-      firstTwo.map((monitor, idx) => {
-        value.sequence.delegates.push({
-          order: idx + 1,
-          monitor_id: monitor.monitor_id,
-        });
-      });
-
-      try {
-        _.set(monitorValues, fieldEditorName, JSON.stringify(value, null, 4));
-        _.set(monitorValues, fieldName, delegatesToMonitors(value));
-      } catch (e) {
-        console.log('No monitor options are available.');
-      }
-    }
-
-    setGraphUi(searchType === 'graph');
-  }, [searchType, monitors, options]);
-
-  const onCodeChange = useCallback(
-    (query, field, form) => {
-      form.setFieldValue(fieldEditorName, query);
-      try {
-        const code = JSON.parse(query);
-        form.setFieldValue(fieldName, delegatesToMonitors(code));
-      } catch (e) {
-        console.error('Invalid json.');
-      }
-    },
-    [options, monitors]
-  );
+    setGraphUi(values.searchType === 'graph');
+  }, [values.searchType]);
 
   return (
     <Fragment>
@@ -100,30 +48,9 @@ const AssociateMonitors = ({
       <EuiSpacer size="m" />
 
       {graphUi ? (
-        <MonitorsList monitors={monitors} options={options} />
+        <MonitorsList values={values} httpClient={httpClient} />
       ) : (
-        <FormikCodeEditor
-          name={fieldEditorName}
-          formRow
-          fieldProps={{
-            validate: validateExtractionQuery,
-          }}
-          rowProps={{
-            label: 'Define workflow',
-            fullWidth: true,
-            isInvalid,
-            error: hasError,
-          }}
-          inputProps={{
-            mode: 'json',
-            width: '80%',
-            height: '300px',
-            theme: isDarkMode ? 'sense-dark' : 'github',
-            onChange: onCodeChange,
-            onBlur: (e, field, form) => form.setFieldTouched(fieldEditorName, true),
-            'data-test-subj': 'associatedMonitorsCodeEditor',
-          }}
-        />
+        <MonitorsEditor values={values} />
       )}
     </Fragment>
   );

public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsEditor.js

@@ -0,0 +1,86 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { FormikCodeEditor } from '../../../../../components/FormControls';
+import { hasError, isInvalid, validateExtractionQuery } from '../../../../../utils/validate';
+
+const MonitorsEditor = ({ values, isDarkMode }) => {
+  const codeFieldName = 'associatedMonitorsEditor';
+  const formikValueName = 'associatedMonitors';
+  const [editorValue, setEditorValue] = useState('');
+
+  useEffect(() => {
+    try {
+      const code = JSON.stringify(values.associatedMonitors, null, 4);
+      // _.set(values, codeFieldName, code);
+      setEditorValue(code);
+    } catch (e) {}
+  }, [values.associatedMonitors]);
+
+  const onCodeChange = (codeValue, field, form) => {
+    form.setFieldValue(codeFieldName, codeValue);
+    form.setFieldTouched(codeFieldName, true);
+    setEditorValue(codeValue);
+
+    try {
+      const code = JSON.parse(codeValue); // test the code before setting it to formik
+      form.setFieldValue(formikValueName, code);
+    } catch (e) {
+      console.error('Invalid json.');
+    }
+  };
+
+  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;
+      }
+    }
+  };
+
+  const hasError = (name, form) => {
+    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.'
+      );
+    } catch (e) {
+      return 'Invalid json.';
+    }
+  };
+
+  return (
+    <FormikCodeEditor
+      name={codeFieldName}
+      formRow
+      fieldProps={{}}
+      rowProps={{
+        label: 'Define workflow',
+        fullWidth: true,
+        // isInvalid: (name, form) => isInvalid(name, form),
+        // error: (name, form) => hasError(name, form),
+      }}
+      inputProps={{
+        mode: 'json',
+        width: '80%',
+        height: '300px',
+        theme: isDarkMode ? 'sense-dark' : 'github',
+        onChange: onCodeChange,
+        onBlur: (e, field, form) => form.setFieldTouched(codeFieldName, true),
+        value: editorValue,
+        'data-test-subj': codeFieldName,
+      }}
+    />
+  );
+};
+
+export default MonitorsEditor;