From 4df554f86ba91d4ea554f5cb9f9fa91e1f5b6921 Mon Sep 17 00:00:00 2001
From: Umberto Pepato <umberto.pepato@elastic.co>
Date: Wed, 29 Jan 2025 12:22:13 +0100
Subject: [PATCH] Show column id when column dislpay name is not available in
 flyout overview

---
 .../components/default_alerts_flyout.tsx             |  2 +-
 .../alerts_table/components/default_cell_value.tsx   | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/response-ops/alerts_table/components/default_alerts_flyout.tsx b/packages/response-ops/alerts_table/components/default_alerts_flyout.tsx
index 43eefb7a88303..77c3cc66733fc 100644
--- a/packages/response-ops/alerts_table/components/default_alerts_flyout.tsx
+++ b/packages/response-ops/alerts_table/components/default_alerts_flyout.tsx
@@ -46,7 +46,7 @@ export const DefaultAlertsFlyoutBody = <AC extends AdditionalContext>(
               const value = alert[column.id]?.[0];
 
               return {
-                title: column.displayAsText as string,
+                title: (column.displayAsText as string) ?? column.id,
                 description:
                   value != null ? (
                     <DefaultCellValue columnId={column.id} alert={props.alert} />
diff --git a/packages/response-ops/alerts_table/components/default_cell_value.tsx b/packages/response-ops/alerts_table/components/default_cell_value.tsx
index 11d4705306a7a..4ccf02ee242f7 100644
--- a/packages/response-ops/alerts_table/components/default_cell_value.tsx
+++ b/packages/response-ops/alerts_table/components/default_cell_value.tsx
@@ -20,6 +20,7 @@ import {
   ALERT_RULE_PRODUCER,
 } from '@kbn/rule-data-utils';
 import { EuiBadge, EuiLink } from '@elastic/eui';
+import { JsonValue } from '@kbn/utility-types';
 import { AlertsTableSupportedConsumers, GetAlertsTableProp } from '../types';
 import { alertProducersData, observabilityFeatureIds } from '../constants';
 import { useFieldFormatter } from '../hooks/use_field_formatter';
@@ -33,8 +34,8 @@ export const DefaultCellValue = ({
     services: { fieldFormats, http },
   } = useAlertsTableContext();
   const formatField = useFieldFormatter(fieldFormats);
-  const rawValue = alert[columnId]?.[0];
-  const value = getRenderValue(rawValue);
+  const rawValue = alert[columnId];
+  const value = extractFieldValue(rawValue);
 
   switch (columnId) {
     case TIMESTAMP:
@@ -88,8 +89,11 @@ export const DefaultCellValue = ({
   }
 };
 
-const getRenderValue = (mappedNonEcsValue: any) => {
-  const value = Array.isArray(mappedNonEcsValue) ? mappedNonEcsValue.join() : mappedNonEcsValue;
+/**
+ * Extracts the value from the raw json ES field
+ */
+const extractFieldValue = (rawValue: string | JsonValue[]) => {
+  const value = Array.isArray(rawValue) ? rawValue.join() : rawValue;
 
   if (!isEmpty(value)) {
     if (typeof value === 'object') {