From 8e4f4203f57673eb0a8638ad961f224627510bc3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 4 Sep 2024 07:19:54 +0000 Subject: [PATCH] Register alerts card with analytics workspace use case (#1064) * added recent alerts card Signed-off-by: Amardeepsingh Siglani * fixed overflow in card Signed-off-by: Amardeepsingh Siglani * updated badge text; fixed integ test Signed-off-by: Amardeepsingh Siglani --------- Signed-off-by: Amardeepsingh Siglani (cherry picked from commit 04119a5b2a21a19eb4d9271f912e83d5419f74b1) Signed-off-by: github-actions[bot] --- .../composite_level_monitor_spec.js | 2 +- opensearch_dashboards.json | 3 +- .../DataSourceAlertsCard.tsx | 144 ++++++++++++++++++ .../AlertsDashboardFlyoutComponent.js | 8 +- .../DefineBucketLevelTrigger.js | 4 +- .../DefineCompositeLevelTrigger.js | 5 +- .../DefineCompositeLevelTrigger.test.js.snap | 10 ++ .../DefineDocumentLevelTrigger.js | 4 +- .../containers/DefineTrigger/DefineTrigger.js | 4 +- public/pages/CreateTrigger/utils/constants.js | 8 - .../__snapshots__/Dashboard.test.js.snap | 13 ++ public/pages/Dashboard/utils/tableUtils.js | 5 +- .../DestinationsList.test.js.snap | 3 + public/pages/Main/Main.js | 16 +- public/plugin.tsx | 9 +- public/services/services.ts | 3 + public/utils/constants.js | 37 +++++ public/utils/helpers.js | 53 ++++++- 18 files changed, 288 insertions(+), 43 deletions(-) create mode 100644 public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx diff --git a/cypress/integration/composite_level_monitor_spec.js b/cypress/integration/composite_level_monitor_spec.js index d09a8f65a..4ef877d73 100644 --- a/cypress/integration/composite_level_monitor_spec.js +++ b/cypress/integration/composite_level_monitor_spec.js @@ -75,7 +75,7 @@ describe('CompositeLevelMonitor', () => { .type('{backspace}') .type('Composite trigger'); - cy.intercept('api/alerting/workflows?*').as('createMonitorRequest'); + cy.intercept('api/alerting/workflows*').as('createMonitorRequest'); cy.intercept(`api/alerting/monitors?*`).as('getMonitorsRequest'); cy.get('button').contains('Create').click({ force: true }); diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json index f561272c0..e900ffaf4 100644 --- a/opensearch_dashboards.json +++ b/opensearch_dashboards.json @@ -14,7 +14,8 @@ "expressions", "data", "visAugmenter", - "opensearchDashboardsUtils" + "opensearchDashboardsUtils", + "contentManagement" ], "server": true, "ui": true, diff --git a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx new file mode 100644 index 000000000..9ab053441 --- /dev/null +++ b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx @@ -0,0 +1,144 @@ +/* +* Copyright OpenSearch Contributors +* SPDX-License-Identifier: Apache-2.0 +*/ + +import React, { useCallback, useEffect, useState } from "react"; +import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiLoadingContent, EuiPanel, EuiSmallButtonEmpty, EuiText, EuiTitle } from "@elastic/eui"; +import { DataSourceManagementPluginSetup, DataSourceOption } from "../../../../../src/plugins/data_source_management/public"; +import { getApplication, getClient, getNotifications, getSavedObjectsClient } from "../../services"; +import { dataSourceFilterFn, getSeverityColor, getSeverityBadgeText, getTruncatedText } from "../../utils/helpers"; +import { renderTime } from "../../pages/Dashboard/utils/tableUtils"; +import { ALERTS_NAV_ID } from "../../../utils/constants"; +import { DEFAULT_EMPTY_DATA } from "../../utils/constants"; + +export interface DataSourceAlertsCardProps { + getDataSourceMenu: DataSourceManagementPluginSetup['ui']['getDataSourceMenu']; +} + +export const DataSourceAlertsCard: React.FC = ({ getDataSourceMenu }) => { + const DataSourceSelector = getDataSourceMenu(); + const [loading, setLoading] = useState(false); + const [dataSource, setDataSource] = useState({ + label: 'Local cluster', + id: '', + }); + const [alerts, setAlerts] = useState([]); + + useEffect(() => { + setLoading(true); + getClient().get('../api/alerting/alerts', { + query: { + size: 25, + sortField: 'start_time', + dataSourceId: dataSource?.id || '', + sortDirection: 'desc' + } + }).then(res => { + if (res.ok) { + setAlerts(res.alerts); + } + setLoading(false); + }).catch(() => { + setLoading(false); + }) + }, [dataSource]); + + const onDataSourceSelected = useCallback((options: any[]) => { + if (dataSource?.id !== undefined && dataSource?.id !== options[0]?.id) { + setDataSource(options[0]); + } + }, [dataSource]); + + const createAlertDetailsHeader = useCallback((alert) => { + const severityColor = getSeverityColor(alert.severity); + const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA; + + return ( + + +
+ {getSeverityBadgeText(alert.severity)} +    + {getTruncatedText(triggerName)} +
+ + + {renderTime(alert.start_time, { showFromNow: true })} + + + ) + }, []); + + const createAlertDetailsDescription = useCallback((alert) => { + const monitorName = alert.monitor_name ?? DEFAULT_EMPTY_DATA; + + return ( + <> + + + Monitor: + + + {getTruncatedText(monitorName)} + + + + + ) + }, []); + + const alertsListItems = alerts.map((alert) => { + return { + title: createAlertDetailsHeader(alert), + description: createAlertDetailsDescription(alert) + } + }); + + return ( + + + + + + + + +

+ Recent alerts +

+ + + + + + + + + {loading ? ( + + ) : ( + + )} + + + + + View all + + + + ) +}; \ No newline at end of file diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js index a45774ac8..e639019b8 100644 --- a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js +++ b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js @@ -46,7 +46,6 @@ import { queryColumns } from '../../../../pages/Dashboard/utils/tableUtils'; import { DEFAULT_PAGE_SIZE_OPTIONS } from '../../../../pages/Monitors/containers/Monitors/utils/constants'; import queryString from 'query-string'; import { MAX_ALERT_COUNT } from '../../../../pages/Dashboard/utils/constants'; -import { SEVERITY_OPTIONS } from '../../../../pages/CreateTrigger/utils/constants'; import { getAlertsFindingColumn, TABLE_TAB_IDS, @@ -62,6 +61,7 @@ import { getDataSourceId, getIsCommentsEnabled, } from '../../../../pages/utils/helpers'; +import { getSeverityText } from '../../../../utils/helpers'; export const DEFAULT_NUM_FLYOUT_ROWS = 10; @@ -172,10 +172,6 @@ export default class AlertsDashboardFlyoutComponent extends Component { }); }; - getSeverityText = (severity) => { - return _.get(_.find(SEVERITY_OPTIONS, { value: severity }), 'text'); - }; - getBucketLevelGraphFilter = (trigger) => { const compositeAggFilter = _.get(trigger, 'condition.composite_agg_filter'); if (_.isEmpty(compositeAggFilter)) return DEFAULT_WHERE_EXPRESSION_TEXT; @@ -601,7 +597,7 @@ export default class AlertsDashboardFlyoutComponent extends Component { Severity -

{this.getSeverityText(severity) || severity || DEFAULT_EMPTY_DATA}

+

{getSeverityText(severity) || severity || DEFAULT_EMPTY_DATA}

 diff --git a/public/pages/CreateTrigger/containers/DefineBucketLevelTrigger/DefineBucketLevelTrigger.js b/public/pages/CreateTrigger/containers/DefineBucketLevelTrigger/DefineBucketLevelTrigger.js index f1ee229af..970680b20 100644 --- a/public/pages/CreateTrigger/containers/DefineBucketLevelTrigger/DefineBucketLevelTrigger.js +++ b/public/pages/CreateTrigger/containers/DefineBucketLevelTrigger/DefineBucketLevelTrigger.js @@ -10,7 +10,7 @@ import { EuiAccordion, EuiButton, EuiSpacer, EuiText, EuiTitle } from '@elastic/ import 'brace/mode/plain_text'; import { FormikFieldText, FormikSelect } from '../../../../components/FormControls'; import { hasError, isInvalid } from '../../../../utils/validate'; -import { SEARCH_TYPE } from '../../../../utils/constants'; +import { SEARCH_TYPE, SEVERITY_OPTIONS } from '../../../../utils/constants'; import { FORMIK_INITIAL_TRIGGER_CONDITION_VALUES } from '../CreateTrigger/utils/constants'; import AddTriggerConditionButton from '../../components/AddTriggerConditionButton'; import BucketLevelTriggerGraph from '../../components/BucketLevelTriggerGraph'; @@ -20,7 +20,7 @@ import WhereExpression from '../../../CreateMonitor/components/MonitorExpression import { FieldArray } from 'formik'; import ConfigureActions from '../ConfigureActions'; import { inputLimitText } from '../../../../utils/helpers'; -import { DEFAULT_TRIGGER_NAME, SEVERITY_OPTIONS } from '../../utils/constants'; +import { DEFAULT_TRIGGER_NAME } from '../../utils/constants'; import { getTriggerContext } from '../../utils/helper'; const defaultRowProps = { diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/DefineCompositeLevelTrigger.js b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/DefineCompositeLevelTrigger.js index 4cf833c81..852f97a88 100644 --- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/DefineCompositeLevelTrigger.js +++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/DefineCompositeLevelTrigger.js @@ -8,12 +8,13 @@ import PropTypes from 'prop-types'; import _ from 'lodash'; import { EuiSpacer, EuiTitle, EuiAccordion, EuiButton } from '@elastic/eui'; import { FormikFieldText, FormikSelect } from '../../../../components/FormControls'; -import { hasError, isInvalid, required } from '../../../../utils/validate'; -import { DEFAULT_TRIGGER_NAME, SEVERITY_OPTIONS } from '../../utils/constants'; +import { hasError, isInvalid } from '../../../../utils/validate'; +import { DEFAULT_TRIGGER_NAME } from '../../utils/constants'; import CompositeTriggerCondition from '../../components/CompositeTriggerCondition/CompositeTriggerCondition'; import TriggerNotifications from './TriggerNotifications'; import { FORMIK_COMPOSITE_INITIAL_TRIGGER_VALUES } from '../CreateTrigger/utils/constants'; import { titleTemplate } from '../../../../utils/helpers'; +import { SEVERITY_OPTIONS } from '../../../../utils/constants'; const defaultRowProps = { label: titleTemplate('Trigger name'), diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap index f7c1788e0..b3164e9df 100644 --- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap +++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap @@ -241,26 +241,36 @@ exports[`DefineCompositeLevelTrigger renders 1`] = ` name="triggerDefinitions[undefined].severity" >