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: