diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx index 63486d71a..2a228e500 100644 --- a/public/pages/Alerts/containers/Alerts/Alerts.tsx +++ b/public/pages/Alerts/containers/Alerts/Alerts.tsx @@ -17,7 +17,13 @@ import { EuiTitle, EuiToolTip, EuiEmptyPrompt, - EuiTableSelectionType, + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalBody, + EuiModalFooter, + EuiIcon, + EuiTableSelectionType } from '@elastic/eui'; import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter'; import dateMath from '@elastic/datemath'; @@ -86,6 +92,7 @@ export interface AlertsState { timeUnit: TimeUnit; dateFormat: string; widgetEmptyMessage: React.ReactNode | undefined; + isModalVisible: boolean; } const groupByOptions = [ @@ -118,6 +125,7 @@ export class Alerts extends Component { timeUnit: timeUnits.timeUnit, dateFormat: timeUnits.dateFormat, widgetEmptyMessage: undefined, + isModalVisible: false, }; } @@ -201,7 +209,38 @@ export class Alerts extends Component { name: 'Status', sortable: true, dataType: 'string', - render: (status: string) => (status ? capitalizeFirstLetter(status) : DEFAULT_EMPTY_DATA), + render: (status, alertItem) => { + if (status === 'ERROR') { + const isModalVisible = this.state.isModalVisible; + return ( + + this.setState({ isModalVisible: true })}> + {capitalizeFirstLetter(status)} + + + {isModalVisible && ( + this.setState({ isModalVisible: false })}> + + {capitalizeFirstLetter(status)} + + + + +

{alertItem.error_message || ''}

+
+ + + this.setState({ isModalVisible: false })}> + Close + + +
+ )} +
+ ); + } else { + return {status ? capitalizeFirstLetter(status) : DEFAULT_EMPTY_DATA}; + } }, { field: 'severity', diff --git a/server/models/interfaces/Alerts.ts b/server/models/interfaces/Alerts.ts index 40204a47b..18f5a9df5 100644 --- a/server/models/interfaces/Alerts.ts +++ b/server/models/interfaces/Alerts.ts @@ -30,6 +30,7 @@ export interface AlertItem { trigger_name: string; detector_id: string; state: string; + error_message: string | null; severity: string; finding_ids: string[]; last_notification_time: string; diff --git a/types/Alert.ts b/types/Alert.ts index 6428ac49e..ba6713264 100644 --- a/types/Alert.ts +++ b/types/Alert.ts @@ -67,6 +67,7 @@ export interface AlertItem { trigger_name: string; detector_id: string; state: string; + error_message: string | null; severity: string; finding_ids: string[]; last_notification_time: string;