From 557a4034683f8cbc3b9ce61d2757d5105f6c9f81 Mon Sep 17 00:00:00 2001 From: Riya Saxena Date: Thu, 20 Jun 2024 15:33:42 -0700 Subject: [PATCH] addressed the comments by UX Signed-off-by: Riya Saxena --- .../CorrelationAlertFlyout.tsx | 9 +-- .../pages/Alerts/containers/Alerts/Alerts.tsx | 74 ++++++++++++------- .../components/ExperimentalBanner.tsx | 4 +- .../containers/CreateCorrelationRule.tsx | 17 ++--- types/Alert.ts | 5 ++ 5 files changed, 62 insertions(+), 47 deletions(-) diff --git a/public/pages/Alerts/components/CorrelationAlertFlyout/CorrelationAlertFlyout.tsx b/public/pages/Alerts/components/CorrelationAlertFlyout/CorrelationAlertFlyout.tsx index dfb659fc..1a0fd731 100644 --- a/public/pages/Alerts/components/CorrelationAlertFlyout/CorrelationAlertFlyout.tsx +++ b/public/pages/Alerts/components/CorrelationAlertFlyout/CorrelationAlertFlyout.tsx @@ -32,16 +32,13 @@ import { import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers'; import { NotificationsStart } from 'opensearch-dashboards/public'; import { DataStore } from '../../../../store/DataStore'; - import { CorrelationAlertItem, Finding } from '../../../../../types'; + import { CorrelationAlertColumns, Finding } from '../../../../../types'; export interface CorrelationAlertFlyoutProps { - alertItem: CorrelationAlertItem; + alertItem: CorrelationAlertColumns; notifications: NotificationsStart; - detectorService: DetectorsService; - opensearchService: OpenSearchService; - indexPatternService: IndexPatternsService; onClose: () => void; - onAcknowledge: (selectedItems: CorrelationAlertItem[]) => void; + onAcknowledge: (selectedItems: CorrelationAlertColumns[]) => void; } export interface CorrelationAlertFlyoutState { diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx index d70fecc1..eb36e6b8 100644 --- a/public/pages/Alerts/containers/Alerts/Alerts.tsx +++ b/public/pages/Alerts/containers/Alerts/Alerts.tsx @@ -59,7 +59,7 @@ import { import { NotificationsStart } from 'opensearch-dashboards/public'; import { match, RouteComponentProps, withRouter } from 'react-router-dom'; import { ChartContainer } from '../../../../components/Charts/ChartContainer'; -import { AlertItem, CorrelationAlertItem, DataSourceProps, DateTimeFilter, Detector } from '../../../../../types'; +import { AlertItem, CorrelationAlertColumns, DataSourceProps, DateTimeFilter, Detector } from '../../../../../types'; import { DurationRange } from '@elastic/eui/src/components/date_picker/types'; import { DataStore } from '../../../../store/DataStore'; @@ -80,13 +80,13 @@ export interface AlertsState { groupBy: string; recentlyUsedRanges: DurationRange[]; selectedItems: AlertItem[]; - correlatedItems: CorrelationAlertItem[]; + correlatedItems: CorrelationAlertColumns[]; alerts: AlertItem[]; - correlationAlerts: CorrelationAlertItem[]; + correlationAlerts: CorrelationAlertColumns[]; flyoutData?: { alertItem: AlertItem }; - flyoutCorrelationData?: { alertItem: CorrelationAlertItem }; + flyoutCorrelationData?: { alertItem: CorrelationAlertColumns }; alertsFiltered: boolean; - filteredCorrelationAlerts: CorrelationAlertItem[]; + filteredCorrelationAlerts: CorrelationAlertColumns[]; filteredAlerts: AlertItem[]; detectors: { [key: string]: Detector }; loading: boolean; @@ -127,7 +127,7 @@ export class Alerts extends Component { correlationAlerts: [], alertsFiltered: false, filteredAlerts: [], - filteredCorrelationAlerts:[], + filteredCorrelationAlerts: [], detectors: {}, timeUnit: timeUnits.timeUnit, dateFormat: timeUnits.dateFormat, @@ -149,13 +149,13 @@ export class Alerts extends Component { prevProps.dateTimeFilter?.endTime !== dateTimeFilter.endTime || prevState.alerts !== this.state.alerts || prevState.alerts.length !== this.state.alerts.length; - - const correlationAlertsChanged = + + const correlationAlertsChanged = prevProps.dateTimeFilter?.startTime !== dateTimeFilter.startTime || prevProps.dateTimeFilter?.endTime !== dateTimeFilter.endTime || prevState.correlationAlerts !== this.state.correlationAlerts || prevState.correlationAlerts.length !== this.state.correlationAlerts.length; - + if (prevState.tab !== this.state.tab) { this.onRefresh(); } @@ -328,7 +328,7 @@ export class Alerts extends Component { ]; } - getCorrelationColumns(): EuiBasicTableColumn[] { + getCorrelationColumns(): EuiBasicTableColumn[] { return [ { field: 'start_time', @@ -342,16 +342,23 @@ export class Alerts extends Component { name: 'Alert trigger name', sortable: false, dataType: 'string', - render: (triggerName: string, alertItem: CorrelationAlertItem) => ( - this.setCorrelationFlyout(alertItem)}>{triggerName} - ), + render: (triggerName: string) => triggerName || DEFAULT_EMPTY_DATA, }, { field: 'correlation_rule_name', name: 'Correlation Rule Name', sortable: true, dataType: 'string', - render: (correlationRulename: string) => correlationRulename || DEFAULT_EMPTY_DATA, + render: (correlationRulename: string, alertItem: CorrelationAlertColumns) => ( + this.setCorrelationFlyout(alertItem)}>{correlationRulename} + ), + }, + { + field: 'correlation_rule_categories', + name: 'Log Types', + sortable: false, + dataType: 'string', + render: (correlationRuleCategories: string[]) => correlationRuleCategories.join(', ') || DEFAULT_EMPTY_DATA, }, { field: 'state', @@ -373,7 +380,7 @@ export class Alerts extends Component { sortable: false, actions: [ { - render: (alertItem: CorrelationAlertItem) => { + render: (alertItem: CorrelationAlertColumns) => { const disableAcknowledge = alertItem.state !== ALERT_STATE.ACTIVE; return ( { }, }, { - render: (alertItem: CorrelationAlertItem) => ( + render: (alertItem: CorrelationAlertColumns) => ( { this.setState({ flyoutData: alertItem ? { alertItem } : undefined }); } - setCorrelationFlyout(alertItem?: CorrelationAlertItem): void { + setCorrelationFlyout(alertItem?: CorrelationAlertColumns): void { this.setState({ flyoutCorrelationData: alertItem ? { alertItem } : undefined }); } @@ -445,7 +452,7 @@ export class Alerts extends Component { }); } - generateCorrelationVisualizationSpec(alerts: CorrelationAlertItem[]) { + generateCorrelationVisualizationSpec(alerts: CorrelationAlertColumns[]) { const visData = alerts.map((alert) => { const time = new Date(alert.start_time); time.setMilliseconds(0); @@ -501,7 +508,18 @@ export class Alerts extends Component { try { const correlationRes = await correlationService.getCorrelationAlerts(); if (correlationRes.ok) { - this.setState({ correlationAlerts: correlationRes.response.correlationAlerts }); + const alerts = correlationRes.response.correlationAlerts; + // Fetch correlation queries for each alert + const enrichedAlerts = await Promise.all(alerts.map(async (alert) => { + const correlation = await DataStore.correlations.getCorrelationRule(alert.correlation_rule_id); + const correlationQueries = correlation?.queries || []; + const correlationRuleCategories = correlationQueries.map((query) => query.logType); + return { + ...alert, + correlation_rule_categories: correlationRuleCategories, + }; + })); + this.setState({ correlationAlerts: enrichedAlerts }); } else { errorNotificationToast(notifications, 'retrieve', 'correlations', correlationRes.error); } @@ -614,7 +632,7 @@ export class Alerts extends Component { this.setState({ selectedItems }); }; - onCorrelationSelectionChange = (correlatedItems: CorrelationAlertItem[]) => { + onCorrelationSelectionChange = (correlatedItems: CorrelationAlertColumns[]) => { this.setState({ correlatedItems }); }; @@ -656,7 +674,7 @@ export class Alerts extends Component { this.onRefresh(); }; - onAcknowledgeCorrelationAlert = async (selectedItems: CorrelationAlertItem[] = []) => { + onAcknowledgeCorrelationAlert = async (selectedItems: CorrelationAlertColumns[] = []) => { const { correlationService, notifications } = this.props; let successCount = 0; try { @@ -788,9 +806,9 @@ export class Alerts extends Component { selectableMessage: (selectable) => (selectable ? '' : DISABLE_ACKNOWLEDGED_ALERT_HELP_TEXT), }; - const correlationSelection: EuiTableSelectionType = { + const correlationSelection: EuiTableSelectionType = { onSelectionChange: this.onCorrelationSelectionChange, - selectable: (item: CorrelationAlertItem) => item.state === ALERT_STATE.ACTIVE, + selectable: (item: CorrelationAlertColumns) => item.state === ALERT_STATE.ACTIVE, selectableMessage: (selectable) => (selectable ? '' : DISABLE_ACKNOWLEDGED_ALERT_HELP_TEXT), }; @@ -872,10 +890,10 @@ export class Alerts extends Component { + this.state.tab === 'findings' + ? this.createAcknowledgeControl() + : this.createAcknowledgeControlForCorrelations() + ]}> this.setState({ tab: 'findings' })} isSelected={this.state.tab === 'findings'}> Findings @@ -911,7 +929,7 @@ export class Alerts extends Component { selection={correlationSelection} loading={loading} message={widgetEmptyCorrelationMessage} - /> + /> )} diff --git a/public/pages/Correlations/components/ExperimentalBanner.tsx b/public/pages/Correlations/components/ExperimentalBanner.tsx index 8e5d7dc3..ebf345b0 100644 --- a/public/pages/Correlations/components/ExperimentalBanner.tsx +++ b/public/pages/Correlations/components/ExperimentalBanner.tsx @@ -11,9 +11,7 @@ export const ExperimentalBanner = () => { <>

- The feature is experimental and should not be used in a production environment. Any index - patterns, visualization, and observability panels will be impacted if the feature is - deactivated. For more information see  + The alerts on correlations feature is experimental and should not be used in a production environment. Any generated alerts and created indexes in will be impacted if the feature is deactivated. For more information see  = ( if (!values.trigger.severity) { values.trigger.severity = ALERT_SEVERITY_OPTIONS.HIGHEST.value; } - if (!values.trigger.name) { - values.trigger.name = `trigger-${randomTriggerId}`; - } // Set default values for actions if present if (values.trigger.actions) { values.trigger.actions.forEach((action) => { @@ -1009,8 +1006,8 @@ export const CreateCorrelationRule: React.FC = ( {showForm && ( <> - - + + @@ -1019,9 +1016,9 @@ export const CreateCorrelationRule: React.FC = ( } > { - const triggerName = e.target.value || ''; + const triggerName = e.target.value || 'Trigger 1'; props.setFieldValue('trigger.name', triggerName) }} value={trigger?.name} @@ -1030,7 +1027,7 @@ export const CreateCorrelationRule: React.FC = ( /> - + @@ -1055,7 +1052,7 @@ export const CreateCorrelationRule: React.FC = ( - + _

}> = ( color="danger" onClick={() => setShowForm(false)} /> - + diff --git a/types/Alert.ts b/types/Alert.ts index 090a0c0d..fb575d7d 100644 --- a/types/Alert.ts +++ b/types/Alert.ts @@ -105,6 +105,11 @@ export interface CorrelationAlertItem { acknowledged_time: string | null; } +export interface CorrelationAlertColumns extends CorrelationAlertItem{ + correlation_rule_categories: string[]; +} + + export interface AlertResponse extends AlertItem { version: number; schema_version: number;