From 7ab0303b44f4a80b16fa3d44281a4784aac75962 Mon Sep 17 00:00:00 2001 From: AWSHurneyt Date: Thu, 21 Apr 2022 13:08:45 -0700 Subject: [PATCH] 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. (#223) * Removed unsupported prop from EuiGrid. Signed-off-by: AWSHurneyt * Increased limit of doc level trigger conditions. Signed-off-by: AWSHurneyt * Refactored empty dashboard button based on UX feedback. Signed-off-by: AWSHurneyt * Refactored query performance text based on UX feedback. Signed-off-by: AWSHurneyt * Refactored logic to apply default sortField value for the getAlerts API. Signed-off-by: AWSHurneyt * Refactored logic to apply default sortField value for the getFindings API. Signed-off-by: AWSHurneyt * 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 * Updated snapshots, and implemented fix for a unit test. Signed-off-by: AWSHurneyt * 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 * Updated snapshot. Signed-off-by: AWSHurneyt --- .../__snapshots__/flyouts.test.js.snap | 1 + .../Flyout/flyouts/alertsDashboard.js | 1 + .../DocumentLevelQuery.js | 8 +-- .../CreateMonitor/utils/constants.js | 2 +- .../AcknowledgeAlertsModal.js | 14 ++-- .../DashboardControls/DashboardControls.js | 69 +++++++++++-------- .../components/FindingsDashboard/utils.js | 6 +- .../pages/Dashboard/containers/Dashboard.js | 46 ++++++++----- 8 files changed, 90 insertions(+), 57 deletions(-) diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap index 4e8e406d6..03a9157ec 100644 --- 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": { 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 index d7516b9fe..0bed64e16 100644 --- 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 index 0f1437ad6..52acb4ff2 100644 --- 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 index 2c9475eb1..03ce1c9a6 100644 --- 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 index 709e80839..dd861bd04 100644 --- 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, -}) => ( - - - - + 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 ( + + + + + + {isAlertsFlyout ? null : ( + + + + )} - {isAlertsFlyout ? null : ( - + - )} - - - - - - - - -); + + + + + ); +}; export default DashboardControls; diff --git a/public/pages/Dashboard/components/FindingsDashboard/utils.js b/public/pages/Dashboard/components/FindingsDashboard/utils.js index 796b59f81..ac34b8d50 100644 --- 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 index a170b465e..c85b20093 100644 --- 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} />