Added document column to alerts dashboard for doc level monitors. Adj…

…usted alerts dashboard configuration to remove unused alert states for doc level monitors. Refactored style of alerts flyout based on UX feedback. (#223) * Removed unsupported prop from EuiGrid. Signed-off-by: AWSHurneyt <[email protected]> * Increased limit of doc level trigger conditions. Signed-off-by: AWSHurneyt <[email protected]> * Refactored empty dashboard button based on UX feedback. Signed-off-by: AWSHurneyt <[email protected]> * Refactored query performance text based on UX feedback. Signed-off-by: AWSHurneyt <[email protected]> * Refactored logic to apply default sortField value for the getAlerts API. Signed-off-by: AWSHurneyt <[email protected]> * Refactored logic to apply default sortField value for the getFindings API. Signed-off-by: AWSHurneyt <[email protected]> * Refactored alerts table to display finding doc IDs. Fixed a bug that was preventing the alerts flyout table from refreshing after acknowledging alerts. Removed edit monitor button from alerts table on monitor details page. Fixed a bug that was causing the monitor create/update page to crash when changing from extraction editor to visual editor. Refactored position of finding flyout. Fixed a bug that was preventing sorting and pagination of the findings table. Repurposed QueryPopover to FindingsPopover, and added support for displaying doc IDs using the popover. Removed parentheses from the trigger condition sent to backend. Added validation for queries defined using the visual editor. Signed-off-by: AWSHurneyt <[email protected]> * Updated snapshots, and implemented fix for a unit test. Signed-off-by: AWSHurneyt <[email protected]> * Added document column to alerts dashboard for doc level monitors. Adjusted alerts dashboard configuration to remove unused alert states for doc level monitors. Refactored style of alerts flyout based on UX feedback. Signed-off-by: AWSHurneyt <[email protected]> * Updated snapshot. Signed-off-by: AWSHurneyt <[email protected]>
opensearch-project · Apr 21, 2022 · 7ab0303 · 7ab0303
1 parent 7180f8a
commit 7ab0303
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 57 deletions.
diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
@@ -8,6 +8,7 @@ Object {
     "data-test-subj": "alertsDashboardFlyout_undefined",
     "hideCloseButton": true,
     "size": "m",
+    "type": "push",
   },
   "footer": <EuiButtonEmpty
     data-test-subj="alertsDashboardFlyout_closeButton_undefined"

diff --git a/public/components/Flyout/flyouts/alertsDashboard.js b/public/components/Flyout/flyouts/alertsDashboard.js
@@ -15,6 +15,7 @@ const alertsDashboard = (payload) => {
       size: 'm',
       hideCloseButton: true,
       'data-test-subj': `alertsDashboardFlyout_${trigger_name}`,
+      type: 'push',
     },
     headerProps: { hasBorder: true },
     header: (

diff --git a/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery.js b/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery.js
@@ -14,21 +14,17 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import { FormikFieldText, FormikComboBox, FormikSelect } from '../../../../components/FormControls';
+import { FormikComboBox, FormikFieldText, FormikSelect } from '../../../../components/FormControls';
 import { hasError, isInvalid, required } from '../../../../utils/validate';
 import { FORMIK_INITIAL_DOCUMENT_LEVEL_QUERY_VALUES } from '../../containers/CreateMonitor/utils/constants';
 import { DOC_LEVEL_TAG_TOOLTIP } from './DocumentLevelQueryTag';
 import IconToolTip from '../../../../components/IconToolTip';
 import ConfigureDocumentLevelQueryTags from './ConfigureDocumentLevelQueryTags';
 import { getIndexFields } from '../MonitorExpressions/expressions/utils/dataTypes';
+import { QUERY_OPERATORS } from '../../../Dashboard/components/FindingsDashboard/utils';
 
 const ALLOWED_DATA_TYPES = ['number', 'text', 'keyword', 'boolean'];
 
-export const QUERY_OPERATORS = [
-  { text: 'is', value: '==' },
-  { text: 'is not', value: '!=' },
-];
-
 export const getInitialQueryValues = (queryIndexNum = 0) =>
   _.cloneDeep({
     ...FORMIK_INITIAL_DOCUMENT_LEVEL_QUERY_VALUES,

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/utils/constants.js b/public/pages/CreateMonitor/containers/CreateMonitor/utils/constants.js
@@ -5,7 +5,7 @@
 
 import { OPERATORS_MAP } from '../../../components/MonitorExpressions/expressions/utils/constants';
 import { MONITOR_TYPE } from '../../../../../utils/constants';
-import { QUERY_OPERATORS } from '../../../components/DocumentLevelMonitorQueries/DocumentLevelQuery';
+import { QUERY_OPERATORS } from '../../../../Dashboard/components/FindingsDashboard/utils';
 
 export const BUCKET_COUNT = 5;
 

diff --git a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js
@@ -44,6 +44,7 @@ import DashboardControls from '../DashboardControls';
 import ContentPanel from '../../../../components/ContentPanel';
 import { queryColumns } from '../../utils/tableUtils';
 import DashboardEmptyPrompt from '../DashboardEmptyPrompt';
+import { ALERTS_FINDING_COLUMN } from '../FindingsDashboard/utils';
 
 export const DEFAULT_NUM_MODAL_ROWS = 10;
 
@@ -326,15 +327,18 @@ export default class AcknowledgeAlertsModal extends Component {
     } = this.state;
 
     const columnType = () => {
-      let columns = [];
+      let columns;
       switch (monitorType) {
-        case MONITOR_TYPE.QUERY_LEVEL:
-        case MONITOR_TYPE.CLUSTER_METRICS:
-          columns = queryColumns;
-          break;
         case MONITOR_TYPE.BUCKET_LEVEL:
           columns = insertGroupByColumn(groupBy);
           break;
+        case MONITOR_TYPE.DOC_LEVEL:
+          columns = _.cloneDeep(queryColumns);
+          columns.splice(0, 0, ALERTS_FINDING_COLUMN);
+          break;
+        default:
+          columns = queryColumns;
+          break;
       }
       return removeColumns(['trigger_name'], columns);
     };

diff --git a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
@@ -4,8 +4,9 @@
  */
 
 import React from 'react';
+import _ from 'lodash';
 import { EuiFieldSearch, EuiFlexGroup, EuiSelect, EuiFlexItem, EuiPagination } from '@elastic/eui';
-import { ALERT_STATE } from '../../../../utils/constants';
+import { ALERT_STATE, MONITOR_TYPE } from '../../../../utils/constants';
 
 const severityOptions = [
   { value: 'ALL', text: 'All severity levels' },
@@ -36,35 +37,47 @@ const DashboardControls = ({
   onStateChange,
   onPageChange,
   isAlertsFlyout = false,
-}) => (
-  <EuiFlexGroup style={{ padding: '0px 5px' }}>
-    <EuiFlexItem>
-      <EuiFieldSearch
-        fullWidth={true}
-        placeholder="Search"
-        onChange={onSearchChange}
-        value={search}
-      />
-    </EuiFlexItem>
+  monitorType,
+}) => {
+  let supportedStateOptions = stateOptions;
+  switch (monitorType) {
+    case MONITOR_TYPE.DOC_LEVEL:
+      const supportedStates = [ALERT_STATE.ACKNOWLEDGED, ALERT_STATE.ACTIVE, ALERT_STATE.ERROR];
+      supportedStateOptions = stateOptions.filter((state) =>
+        _.includes(supportedStates, state.value)
+      );
+      break;
+  }
+  return (
+    <EuiFlexGroup style={{ padding: '0px 5px' }}>
+      <EuiFlexItem>
+        <EuiFieldSearch
+          fullWidth={true}
+          placeholder="Search"
+          onChange={onSearchChange}
+          value={search}
+        />
+      </EuiFlexItem>
+
+      {isAlertsFlyout ? null : (
+        <EuiFlexItem grow={false}>
+          <EuiSelect options={severityOptions} value={severity} onChange={onSeverityChange} />
+        </EuiFlexItem>
+      )}
 
-    {isAlertsFlyout ? null : (
       <EuiFlexItem grow={false}>
-        <EuiSelect options={severityOptions} value={severity} onChange={onSeverityChange} />
+        <EuiSelect
+          options={supportedStateOptions}
+          value={state}
+          onChange={onStateChange}
+          data-test-subj={'dashboardAlertStateFilter'}
+        />
       </EuiFlexItem>
-    )}
-
-    <EuiFlexItem grow={false}>
-      <EuiSelect
-        options={stateOptions}
-        value={state}
-        onChange={onStateChange}
-        data-test-subj={'dashboardAlertStateFilter'}
-      />
-    </EuiFlexItem>
-    <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
-      <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageChange} />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+      <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+        <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageChange} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
 
 export default DashboardControls;
diff --git a/public/pages/Dashboard/components/FindingsDashboard/utils.js b/public/pages/Dashboard/components/FindingsDashboard/utils.js
@@ -8,7 +8,11 @@ import _ from 'lodash';
 import { renderTime } from '../../utils/tableUtils';
 import FindingFlyout from './FindingFlyout';
 import FindingsPopover from './FindingsPopover';
-import { QUERY_OPERATORS } from '../../../CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery';
+
+export const QUERY_OPERATORS = [
+  { text: 'is', value: '==' },
+  { text: 'is not', value: '!=' },
+];
 
 export const TABLE_TAB_IDS = {
   ALERTS: { id: 'alerts', name: 'Alerts' },

diff --git a/public/pages/Dashboard/containers/Dashboard.js b/public/pages/Dashboard/containers/Dashboard.js
@@ -27,6 +27,7 @@ import {
 import { DEFAULT_PAGE_SIZE_OPTIONS } from '../../Monitors/containers/Monitors/utils/constants';
 import { MAX_ALERT_COUNT } from '../utils/constants';
 import AcknowledgeAlertsModal from '../components/AcknowledgeAlertsModal';
+import { ALERTS_FINDING_COLUMN } from '../components/FindingsDashboard/utils';
 
 export default class Dashboard extends Component {
   constructor(props) {
@@ -314,22 +315,34 @@ export default class Dashboard extends Component {
     let totalItems = perAlertView ? totalAlerts : totalTriggers;
     const isBucketMonitor = monitorType === MONITOR_TYPE.BUCKET_LEVEL;
 
-    let columnType = perAlertView
-      ? isBucketMonitor
-        ? insertGroupByColumn(groupBy)
-        : queryColumns
-      : alertColumns(
-          history,
-          httpClient,
-          loadingMonitors,
-          location,
-          monitors,
-          notifications,
-          setFlyout,
-          this.openFlyout,
-          this.closeFlyout,
-          this.refreshDashboard
-        );
+    let columnType;
+    if (perAlertView) {
+      switch (monitorType) {
+        case MONITOR_TYPE.BUCKET_LEVEL:
+          columnType = insertGroupByColumn(groupBy);
+          break;
+        case MONITOR_TYPE.DOC_LEVEL:
+          columnType = _.cloneDeep(queryColumns);
+          columnType.splice(0, 0, ALERTS_FINDING_COLUMN);
+          break;
+        default:
+          columnType = queryColumns;
+          break;
+      }
+    } else {
+      columnType = alertColumns(
+        history,
+        httpClient,
+        loadingMonitors,
+        location,
+        monitors,
+        notifications,
+        setFlyout,
+        this.openFlyout,
+        this.closeFlyout,
+        this.refreshDashboard
+      );
+    }
 
     const pagination = {
       pageIndex: page,
@@ -429,6 +442,7 @@ export default class Dashboard extends Component {
           onStateChange={this.onAlertStateChange}
           onPageChange={this.onPageClick}
           isAlertsFlyout={isAlertsFlyout}
+          monitorType={monitorType}
         />
 
         <EuiHorizontalRule margin="xs" />