diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx index d8ba7a96ad2c6..754e568e3befd 100644 --- a/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx @@ -110,10 +110,10 @@ export const columns: Array< { columnHeaderType: 'not-filtered', displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', { - defaultMessage: 'Status', + defaultMessage: 'Alert Status', }), id: ALERT_STATUS, - initialWidth: 79, + initialWidth: 110, }, { columnHeaderType: 'not-filtered', diff --git a/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx b/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx index 03b79a77baadc..d96751b4eb33a 100644 --- a/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/render_cell_value.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiIconTip, EuiLink } from '@elastic/eui'; +import { EuiLink, EuiHealth, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useEffect } from 'react'; /** @@ -34,6 +34,7 @@ import { SeverityBadge } from './severity_badge'; import { TopAlert } from '.'; import { parseAlert } from './parse_alert'; import { usePluginContext } from '../../hooks/use_plugin_context'; +import { useTheme } from '../../hooks/use_theme'; const ALERT_DURATION: typeof ALERT_DURATION_TYPED = ALERT_DURATION_NON_TYPED; const ALERT_SEVERITY: typeof ALERT_SEVERITY_TYPED = ALERT_SEVERITY_NON_TYPED; @@ -86,24 +87,33 @@ export const getRenderCellValue = ({ } }, [columnId, setCellProps]); + const theme = useTheme(); + switch (columnId) { case ALERT_STATUS: - return value !== 'closed' ? ( - - ) : ( - - ); + switch (value) { + case 'open': + return ( + + {i18n.translate('xpack.observability.alertsTGrid.statusActiveDescription', { + defaultMessage: 'Active', + })} + + ); + case 'closed': + return ( + + + {i18n.translate('xpack.observability.alertsTGrid.statusRecoveredDescription', { + defaultMessage: 'Recovered', + })} + + + ); + default: + // NOTE: This fallback shouldn't be needed. Status should be either "active" or "recovered". + return null; + } case TIMESTAMP: return ; case ALERT_DURATION: