Composite monitor UI fixes (#664)

* composite monitor fixes Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * fixed monitor type height; updated snapshots Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> * updated test-subj attribute Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com> --------- Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
opensearch-project · Aug 1, 2023 · a11131f · a11131f
1 parent 0dd05f8
commit a11131f
Show file tree

Hide file tree

Showing 16 changed files with 481 additions and 645 deletions.
diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
@@ -33,7 +33,7 @@ import {
 import { TRIGGER_TYPE } from '../../../../pages/CreateTrigger/containers/CreateTrigger/utils/constants';
 import { UNITS_OF_TIME } from '../../../../pages/CreateMonitor/components/MonitorExpressions/expressions/utils/constants';
 import { DEFAULT_WHERE_EXPRESSION_TEXT } from '../../../../pages/CreateMonitor/components/MonitorExpressions/expressions/utils/whereHelpers';
-import { backendErrorNotification } from '../../../../utils/helpers';
+import { acknowledgeAlerts, backendErrorNotification } from '../../../../utils/helpers';
 import {
   displayAcknowledgedAlertsToast,
   filterActiveAlerts,
@@ -132,7 +132,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
     }
     const { monitorType } = this.state;
     if (
-      monitorType === MONITOR_TYPE.DOC_LEVEL &&
+      [MONITOR_TYPE.DOC_LEVEL, MONITOR_TYPE.COMPOSITE_LEVEL].includes(monitorType) &&
       !_.isEqual(prevState.selectedItems, this.state.selectedItems)
     )
       this.setState({ tabContent: this.renderAlertsTable() });
@@ -213,34 +213,10 @@ export default class AlertsDashboardFlyoutComponent extends Component {
 
   acknowledgeAlerts = async () => {
     const { selectedItems } = this.state;
-    const { httpClient, notifications } = this.props;
-
     if (!selectedItems.length) return;
 
-    const selectedAlerts = filterActiveAlerts(selectedItems);
-
-    const monitorAlerts = selectedAlerts.reduce((monitorAlerts, alert) => {
-      const { id, monitor_id: monitorId } = alert;
-      if (monitorAlerts[monitorId]) monitorAlerts[monitorId].push(id);
-      else monitorAlerts[monitorId] = [id];
-      return monitorAlerts;
-    }, {});
-
-    Object.entries(monitorAlerts).map(([monitorId, alerts]) =>
-      httpClient
-        .post(`../api/alerting/monitors/${monitorId}/_acknowledge/alerts`, {
-          body: JSON.stringify({ alerts }),
-        })
-        .then((resp) => {
-          if (!resp.ok) {
-            backendErrorNotification(notifications, 'acknowledge', 'alert', resp.resp);
-          } else {
-            const successfulCount = _.get(resp, 'resp.success', []).length;
-            displayAcknowledgedAlertsToast(notifications, successfulCount);
-          }
-        })
-        .catch((error) => error)
-    );
+    const { httpClient, notifications } = this.props;
+    acknowledgeAlerts(httpClient, notifications, selectedItems);
 
     const { page, size, search, sortField, sortDirection, severityLevel, alertState, monitorIds } =
       this.state;
@@ -330,6 +306,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
         case MONITOR_TYPE.QUERY_LEVEL:
         case MONITOR_TYPE.CLUSTER_METRICS:
         case MONITOR_TYPE.DOC_LEVEL:
+        case MONITOR_TYPE.COMPOSITE_LEVEL:
           return `${item.id}-${item.version}`;
         case MONITOR_TYPE.BUCKET_LEVEL:
           return item.id;
@@ -570,6 +547,10 @@ export default class AlertsDashboardFlyoutComponent extends Component {
         displayTableTabs = false;
         break;
     }
+    const monitorUrl = `${PLUGIN_NAME}#/monitors/${monitor_id}${
+      monitorType === MONITOR_TYPE.COMPOSITE_LEVEL ? '?type=workflow' : ''
+    }`;
+
     return (
       <div>
         <EuiFlexGroup>
@@ -614,7 +595,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
             <EuiText size={'m'} data-test-subj={`alertsDashboardFlyout_monitor_${trigger_name}`}>
               <strong>Monitor</strong>
               <p>
-                <EuiLink href={`${PLUGIN_NAME}#/monitors/${monitor_id}`}>{monitor_name}</EuiLink>
+                <EuiLink href={monitorUrl}>{monitor_name}</EuiLink>
               </p>
             </EuiText>
           </EuiFlexItem>
@@ -632,7 +613,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
             </EuiText>
           </EuiFlexItem>
 
-          {monitorType !== MONITOR_TYPE.DOC_LEVEL && (
+          {![MONITOR_TYPE.DOC_LEVEL, MONITOR_TYPE.COMPOSITE_LEVEL].includes(monitorType) && (
             <EuiFlexItem>
               <EuiText
                 size={'m'}
@@ -645,7 +626,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
           )}
         </EuiFlexGroup>
 
-        {monitorType !== MONITOR_TYPE.DOC_LEVEL && (
+        {![MONITOR_TYPE.DOC_LEVEL, MONITOR_TYPE.COMPOSITE_LEVEL].includes(monitorType) && (
           <div>
             <EuiSpacer size={'xxl'} />
 

diff --git a/public/components/FormControls/FormikCheckableCard/FormikCheckableCard.js b/public/components/FormControls/FormikCheckableCard/FormikCheckableCard.js
@@ -6,29 +6,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiCheckableCard } from '@elastic/eui';
-
 import FormikInputWrapper from '../FormikInputWrapper';
-import FormikFormRow from '../FormikFormRow';
 
-const FormikCheckableCard = ({
-  name,
-  formRow = false,
-  fieldProps = {},
-  rowProps = {},
-  inputProps = {},
-}) => (
+const FormikCheckableCard = ({ name, fieldProps = {}, inputProps = {} }) => (
   <FormikInputWrapper
     name={name}
     fieldProps={fieldProps}
-    render={({ field, form }) =>
-      formRow ? (
-        <FormikFormRow name={name} form={form} rowProps={rowProps}>
-          <FieldCheckableCard name={name} form={form} field={field} inputProps={inputProps} />
-        </FormikFormRow>
-      ) : (
-        <FieldCheckableCard name={name} form={form} field={field} inputProps={inputProps} />
-      )
-    }
+    render={({ field, form }) => (
+      <FieldCheckableCard name={name} form={form} field={field} inputProps={inputProps} />
+    )}
   />
 );
 
@@ -47,14 +33,13 @@ const FieldCheckableCard = ({
     onChange={(e) =>
       typeof onChange === 'function' ? onChange(e, field, form) : field.onChange(e)
     }
+    className="eui-fullHeight"
   />
 );
 
 FormikCheckableCard.propTypes = {
   name: PropTypes.string.isRequired,
-  formRow: PropTypes.bool,
   fieldProps: PropTypes.object,
-  rowProps: PropTypes.object,
   inputProps: PropTypes.object,
 };
 

diff --git a/...omponents/FormControls/FormikCheckableCard/__snapshots__/FormikCheckableCard.test.js.snap b/...omponents/FormControls/FormikCheckableCard/__snapshots__/FormikCheckableCard.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormikCheckableCard render 1`] = `
 <div
-  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard"
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard eui-fullHeight"
 >
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiPanel--isClickable euiSplitPanel__inner"
@@ -32,39 +32,30 @@ exports[`FormikCheckableCard render 1`] = `
 
 exports[`FormikCheckableCard render formRow 1`] = `
 <div
-  class="euiFormRow"
-  id="testing-form-row-row"
+  class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard eui-fullHeight"
 >
   <div
-    class="euiFormRow__fieldWrapper"
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiPanel--isClickable euiSplitPanel__inner"
   >
     <div
-      class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard"
+      class="euiRadio euiRadio--noLabel"
     >
+      <input
+        class="euiRadio__input"
+        name="testing"
+        type="radio"
+      />
       <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiPanel--isClickable euiSplitPanel__inner"
-      >
-        <div
-          class="euiRadio euiRadio--noLabel"
-        >
-          <input
-            class="euiRadio__input"
-            name="testing"
-            type="radio"
-          />
-          <div
-            class="euiRadio__circle"
-          />
-        </div>
-      </div>
-      <div
-        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner"
-      >
-        <label
-          class="euiCheckableCard__label"
-        />
-      </div>
+        class="euiRadio__circle"
+      />
     </div>
   </div>
+  <div
+    class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner"
+  >
+    <label
+      class="euiCheckableCard__label"
+    />
+  </div>
 </div>
 `;
diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/AssociateMonitors.js b/public/pages/CreateMonitor/components/AssociateMonitors/AssociateMonitors.js
@@ -49,8 +49,9 @@ const AssociateMonitors = ({ isDarkMode, values, httpClient, errors }) => {
         <h4>Delegate monitors</h4>
       </EuiText>
       <EuiText color={'subdued'} size={'xs'}>
-        Delegate two or more monitors to run as part of this workflow. The monitor types per query,
-        per bucket, and per document are supported.{' '}
+        Delegate two or more monitors to run as part of this workflow. The order in which you select
+        the monitors determines their order in the workflow. The monitor types per query, per
+        bucket, and per document are supported.&nbsp;
         <EuiLink
           href={
             'https://opensearch.org/docs/latest/observing-your-data/alerting/monitors/#monitor-types'

diff --git a/...s/CreateMonitor/components/AssociateMonitors/__snapshots__/AssociateMonitors.test.js.snap b/...s/CreateMonitor/components/AssociateMonitors/__snapshots__/AssociateMonitors.test.js.snap
@@ -16,7 +16,7 @@ Array [
     <div
       class="euiTextColor euiTextColor--subdued"
     >
-      Delegate two or more monitors to run as part of this workflow. The monitor types per query, per bucket, and per document are supported. 
+      Delegate two or more monitors to run as part of this workflow. The order in which you select the monitors determines their order in the workflow. The monitor types per query, per bucket, and per document are supported. 
       <a
         class="euiLink euiLink--primary"
         href="https://opensearch.org/docs/latest/observing-your-data/alerting/monitors/#monitor-types"