diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx index b5773e6ac..7e7a27559 100644 --- a/public/pages/Alerts/containers/Alerts/Alerts.tsx +++ b/public/pages/Alerts/containers/Alerts/Alerts.tsx @@ -18,6 +18,12 @@ import { EuiTitle, EuiToolTip, EuiEmptyPrompt, + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalBody, + EuiModalFooter, + EuiIcon, } from '@elastic/eui'; import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter'; import dateMath from '@elastic/datemath'; @@ -84,6 +90,7 @@ export interface AlertsState { timeUnit: TimeUnit; dateFormat: string; widgetEmptyMessage: React.ReactNode | undefined; + isModalVisible: boolean; } const groupByOptions = [ @@ -116,6 +123,7 @@ export class Alerts extends Component { timeUnit: timeUnits.timeUnit, dateFormat: timeUnits.dateFormat, widgetEmptyMessage: undefined, + isModalVisible: false, }; } @@ -199,7 +207,39 @@ export class Alerts extends Component { name: 'Status', sortable: true, dataType: 'string', - render: (status) => (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}; + } + }, }, { field: 'severity', diff --git a/server/models/interfaces/Alerts.ts b/server/models/interfaces/Alerts.ts index 294cceb87..c3f099e9b 100644 --- a/server/models/interfaces/Alerts.ts +++ b/server/models/interfaces/Alerts.ts @@ -27,6 +27,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;