[9.1] [Discover][APM] Infer field types for summary overview fields correctly (elastic#226055) (elastic#226416)

# Backport

This will backport the following commits from `main` to `9.1`:
- [[Discover][APM] Infer field types for summary overview fields
correctly (elastic#226055)](elastic#226055)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Gonçalo Rica Pais da
Silva","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-07-03T13:05:27Z","message":"[Discover][APM]
Infer field types for summary overview fields correctly (elastic#226055)\n\n##
Summary\n\nThis PR adds in a new hook to help build a map of fields with
their\ninferred field type from either `dataView` or `columnsMeta`. This
then\nis used to feed the field type information into the fields
actions, so\nthat when a filter is applied to the ES|QL query, it
doesn't try to cast\nthe field to a string if it doesn't have an
explicit mapping.\n\nCloses
elastic#220626\n\n\n![image](https://github.com/user-attachments/assets/943e0344-1f8c-4216-91f1-c819ba6c3d64)\n\n##
How to test\n\n\n- Set the space to Observability mode, go to Discover,
select ES|QL and\nwrite a query to target a `traces-*` index that has
documents with\nunmapped non-string fields. (For example,
remote_cluster:traces-* when\nusing edge-oblt-ccs)\n- Click on a span
document to open the document overview, hover over\nStatus Code to click
to add it as a WHERE clause to the query.\n- Click on a client.ip field
where possible to check string casting\nworks when encountering
special/non-primitive field types.\n- Every clause added to the query
should not result in an
error.","sha":"ebff918b4d4f3c8b06b1e4dda6228e18b33babea","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-infra_services","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Discover][APM]
Infer field types for summary overview fields
correctly","number":226055,"url":"https://github.com/elastic/kibana/pull/226055","mergeCommit":{"message":"[Discover][APM]
Infer field types for summary overview fields correctly (elastic#226055)\n\n##
Summary\n\nThis PR adds in a new hook to help build a map of fields with
their\ninferred field type from either `dataView` or `columnsMeta`. This
then\nis used to feed the field type information into the fields
actions, so\nthat when a filter is applied to the ES|QL query, it
doesn't try to cast\nthe field to a string if it doesn't have an
explicit mapping.\n\nCloses
elastic#220626\n\n\n![image](https://github.com/user-attachments/assets/943e0344-1f8c-4216-91f1-c819ba6c3d64)\n\n##
How to test\n\n\n- Set the space to Observability mode, go to Discover,
select ES|QL and\nwrite a query to target a `traces-*` index that has
documents with\nunmapped non-string fields. (For example,
remote_cluster:traces-* when\nusing edge-oblt-ccs)\n- Click on a span
document to open the document overview, hover over\nStatus Code to click
to add it as a WHERE clause to the query.\n- Click on a client.ip field
where possible to check string casting\nworks when encountering
special/non-primitive field types.\n- Every clause added to the query
should not result in an
error.","sha":"ebff918b4d4f3c8b06b1e4dda6228e18b33babea"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/226055","number":226055,"mergeCommit":{"message":"[Discover][APM]
Infer field types for summary overview fields correctly (elastic#226055)\n\n##
Summary\n\nThis PR adds in a new hook to help build a map of fields with
their\ninferred field type from either `dataView` or `columnsMeta`. This
then\nis used to feed the field type information into the fields
actions, so\nthat when a filter is applied to the ES|QL query, it
doesn't try to cast\nthe field to a string if it doesn't have an
explicit mapping.\n\nCloses
elastic#220626\n\n\n![image](https://github.com/user-attachments/assets/943e0344-1f8c-4216-91f1-c819ba6c3d64)\n\n##
How to test\n\n\n- Set the space to Observability mode, go to Discover,
select ES|QL and\nwrite a query to target a `traces-*` index that has
documents with\nunmapped non-string fields. (For example,
remote_cluster:traces-* when\nusing edge-oblt-ccs)\n- Click on a span
document to open the document overview, hover over\nStatus Code to click
to add it as a WHERE clause to the query.\n- Click on a client.ip field
where possible to check string casting\nworks when encountering
special/non-primitive field types.\n- Every clause added to the query
should not result in an
error.","sha":"ebff918b4d4f3c8b06b1e4dda6228e18b33babea"}}]}]
BACKPORT-->

Co-authored-by: Gonçalo Rica Pais da Silva <[email protected]>

Author: kibanamachine

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/field_with_actions/field_hover_popover_action.tsx

@@ -17,11 +17,13 @@ import {
   PopoverAnchorPosition,
   type EuiPopoverProps,
 } from '@elastic/eui';
+import { DataViewField } from '@kbn/data-views-plugin/common';
 import { useUIFieldActions } from '../../../../../hooks/use_field_actions';
 
 interface HoverPopoverActionProps {
   children: React.ReactChild;
   field: string;
+  fieldMapping?: DataViewField;
   value: unknown;
   formattedValue?: string;
   title: string;
@@ -33,14 +35,15 @@ export const FieldHoverActionPopover = ({
   children,
   title,
   field,
+  fieldMapping: mapping,
   value,
   formattedValue,
   anchorPosition = 'upCenter',
   display = 'inline-block',
 }: HoverPopoverActionProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const leaveTimer = useRef<NodeJS.Timeout | null>(null);
-  const uiFieldActions = useUIFieldActions({ field, value, formattedValue });
+  const uiFieldActions = useUIFieldActions({ field, value, formattedValue, mapping });
 
   const clearTimeoutIfExists = () => {
     if (leaveTimer.current) {

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/field_with_actions/field_with_actions.tsx

@@ -10,11 +10,13 @@
 import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiLoadingSpinner, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { PartialFieldMetadataPlain } from '@kbn/fields-metadata-plugin/common';
+import { DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldHoverActionPopover } from './field_hover_popover_action';
 
 export interface FieldWithActionsProps {
   field: string;
   fieldMetadata?: PartialFieldMetadataPlain;
+  fieldMapping?: DataViewField;
   formattedValue: string;
   label: string;
   value: string;
@@ -26,6 +28,7 @@ export interface FieldWithActionsProps {
 export function FieldWithActions({
   field,
   fieldMetadata,
+  fieldMapping,
   formattedValue,
   label,
   value,
@@ -72,7 +75,12 @@ export function FieldWithActions({
 
         <EuiFlexItem grow={2}>
           {showActions ? (
-            <FieldHoverActionPopover title={value} value={value} field={field}>
+            <FieldHoverActionPopover
+              title={value}
+              value={value}
+              field={field}
+              fieldMapping={fieldMapping}
+            >
               {fieldContent}
             </FieldHoverActionPopover>
           ) : (

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/trace.tsx

@@ -12,6 +12,7 @@ import { EmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
+import { DataViewField } from '@kbn/data-views-plugin/common';
 import { spanTraceFields } from '../doc_viewer_span_overview/resources/fields';
 import { transactionTraceFields } from '../doc_viewer_transaction_overview/resources/fields';
 import { SpanSummaryField } from '../doc_viewer_span_overview/sub_components/span_summary_field';
@@ -22,6 +23,7 @@ import { FullScreenWaterfall } from './full_screen_waterfall';
 
 export interface TraceProps {
   fields: Record<string, FieldConfiguration>;
+  fieldMappings: Record<string, DataViewField | undefined>;
   traceId: string;
   displayType: 'span' | 'transaction';
   docId: string;
@@ -34,6 +36,7 @@ export interface TraceProps {
 export const Trace = ({
   traceId,
   fields,
+  fieldMappings,
   displayType,
   docId,
   dataView,
@@ -67,6 +70,7 @@ export const Trace = ({
             key={fieldId}
             fieldId={fieldId}
             fieldConfiguration={fields[fieldId]}
+            fieldMapping={fieldMappings[fieldId]}
             showActions={showActions}
           />
         ))
@@ -75,6 +79,7 @@ export const Trace = ({
             key={fieldId}
             fieldId={fieldId}
             fieldConfiguration={fields[fieldId]}
+            fieldMapping={fieldMappings[fieldId]}
             showActions={showActions}
           />
         ));

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_span_overview/resources/fields.ts

@@ -28,3 +28,5 @@ export const spanFields = [
 ];
 
 export const spanTraceFields = [TRACE_ID_FIELD, TRANSACTION_NAME_FIELD];
+
+export const allSpanFields = [...spanFields, ...spanTraceFields];

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_span_overview/span_overview.tsx

@@ -22,10 +22,11 @@ import { getFlattenedSpanDocumentOverview } from '@kbn/discover-utils/src';
 import { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
 import React, { useMemo } from 'react';
 import { FieldActionsProvider } from '../../../../hooks/use_field_actions';
+import { useDataViewFields } from '../../../../hooks/use_data_view_fields';
 import { getUnifiedDocViewerServices } from '../../../../plugin';
 import { Trace } from '../components/trace';
 import { RootSpanProvider } from './hooks/use_root_span';
-import { spanFields } from './resources/fields';
+import { spanFields, allSpanFields } from './resources/fields';
 import { getSpanFieldConfiguration } from './resources/get_span_field_configuration';
 import { SpanDurationSummary } from './sub_components/span_duration_summary';
 import { SpanSummaryField } from './sub_components/span_summary_field';
@@ -55,6 +56,7 @@ export function SpanOverview({
   showWaterfall = true,
   showActions = true,
   dataView,
+  columnsMeta,
 }: SpanOverviewProps) {
   const { fieldFormats } = getUnifiedDocViewerServices();
   const { formattedDoc, flattenedDoc } = useMemo(
@@ -64,6 +66,7 @@ export function SpanOverview({
     }),
     [dataView, fieldFormats, hit]
   );
+  const { dataViewFields } = useDataViewFields({ fields: allSpanFields, dataView, columnsMeta });
   const fieldConfigurations = useMemo(
     () => getSpanFieldConfiguration({ attributes: formattedDoc, flattenedDoc }),
     [formattedDoc, flattenedDoc]
@@ -110,6 +113,7 @@ export function SpanOverview({
                     <SpanSummaryField
                       key={fieldId}
                       fieldId={fieldId}
+                      fieldMapping={dataViewFields[fieldId]}
                       fieldConfiguration={fieldConfigurations[fieldId]}
                       showActions={showActions}
                     />
@@ -130,6 +134,7 @@ export function SpanOverview({
                 <EuiFlexItem>
                   <Trace
                     fields={fieldConfigurations}
+                    fieldMappings={dataViewFields}
                     traceId={flattenedDoc[TRACE_ID_FIELD]}
                     docId={flattenedDoc[SPAN_ID_FIELD]}
                     displayType="span"

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_span_overview/sub_components/span_summary_field.tsx

@@ -9,19 +9,22 @@
 
 import { TRANSACTION_NAME_FIELD } from '@kbn/discover-utils';
 import { EuiHorizontalRule } from '@elastic/eui';
+import type { DataViewField } from '@kbn/data-views-plugin/common';
 import React, { useState, useEffect } from 'react';
 import { FieldWithActions } from '../../components/field_with_actions/field_with_actions';
 import { useRootSpanContext } from '../hooks/use_root_span';
 import { FieldConfiguration } from '../../resources/get_field_configuration';
 export interface SpanSummaryFieldProps {
   fieldId: string;
   fieldConfiguration: FieldConfiguration;
+  fieldMapping?: DataViewField;
   showActions?: boolean;
 }
 
 export function SpanSummaryField({
   fieldConfiguration,
   fieldId,
+  fieldMapping,
   showActions = true,
 }: SpanSummaryFieldProps) {
   const { trace, loading } = useRootSpanContext();
@@ -50,6 +53,7 @@ export function SpanSummaryField({
         field={fieldId}
         value={fieldValue as string}
         formattedValue={fieldValue as string}
+        fieldMapping={fieldMapping}
         fieldMetadata={fieldConfiguration.fieldMetadata}
         loading={isTransactionNameFieldWithoutValue && loading}
         showActions={showActions}

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_transaction_overview/resources/fields.ts

@@ -25,3 +25,5 @@ export const transactionFields = [
 ];
 
 export const transactionTraceFields = [TRACE_ID_FIELD];
+
+export const allTransactionFields = [...transactionFields, ...transactionTraceFields];

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_transaction_overview/sub_components/transaction_summary_field.tsx

@@ -9,18 +9,21 @@
 
 import { EuiHorizontalRule } from '@elastic/eui';
 import React from 'react';
+import { DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldConfiguration } from '../../resources/get_field_configuration';
 import { FieldWithActions } from '../../components/field_with_actions/field_with_actions';
 
 export interface TransactionSummaryFieldProps {
   fieldId: string;
   fieldConfiguration: FieldConfiguration;
+  fieldMapping?: DataViewField;
   showActions?: boolean;
 }
 
 export function TransactionSummaryField({
   fieldConfiguration,
   fieldId,
+  fieldMapping,
   showActions = true,
 }: TransactionSummaryFieldProps) {
   if (!fieldConfiguration.value) {
@@ -33,6 +36,7 @@ export function TransactionSummaryField({
         data-test-subj={`unifiedDocViewerObservabilityTracesAttribute-${fieldId}`}
         label={fieldConfiguration.title}
         field={fieldId}
+        fieldMapping={fieldMapping}
         value={fieldConfiguration.value as string}
         formattedValue={fieldConfiguration.value as string}
         fieldMetadata={fieldConfiguration.fieldMetadata}

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_transaction_overview/transaction_overview.tsx

@@ -20,8 +20,9 @@ import {
   TRANSACTION_ID_FIELD,
 } from '@kbn/discover-utils';
 import { getFlattenedTransactionDocumentOverview } from '@kbn/discover-utils/src';
+import { useDataViewFields } from '../../../../hooks/use_data_view_fields';
 import { FieldActionsProvider } from '../../../../hooks/use_field_actions';
-import { transactionFields } from './resources/fields';
+import { transactionFields, allTransactionFields } from './resources/fields';
 import { getTransactionFieldConfiguration } from './resources/get_transaction_field_configuration';
 import { TransactionSummaryField } from './sub_components/transaction_summary_field';
 import { TransactionDurationSummary } from './sub_components/transaction_duration_summary';
@@ -53,6 +54,7 @@ export function TransactionOverview({
   showWaterfall = true,
   showActions = true,
   dataView,
+  columnsMeta,
 }: TransactionOverviewProps) {
   const { fieldFormats } = getUnifiedDocViewerServices();
   const { formattedDoc, flattenedDoc } = useMemo(
@@ -62,7 +64,11 @@ export function TransactionOverview({
     }),
     [dataView, fieldFormats, hit]
   );
-
+  const { dataViewFields } = useDataViewFields({
+    fields: allTransactionFields,
+    dataView,
+    columnsMeta,
+  });
   const transactionDuration = flattenedDoc[TRANSACTION_DURATION_FIELD];
   const fieldConfigurations = useMemo(
     () => getTransactionFieldConfiguration({ attributes: formattedDoc, flattenedDoc }),
@@ -98,6 +104,7 @@ export function TransactionOverview({
                   <TransactionSummaryField
                     key={fieldId}
                     fieldId={fieldId}
+                    fieldMapping={dataViewFields[fieldId]}
                     fieldConfiguration={fieldConfigurations[fieldId]}
                     showActions={showActions}
                   />
@@ -117,6 +124,7 @@ export function TransactionOverview({
                 {traceId && transactionId && (
                   <Trace
                     fields={fieldConfigurations}
+                    fieldMappings={dataViewFields}
                     traceId={traceId}
                     docId={transactionId}
                     displayType="transaction"

src/platform/plugins/shared/unified_doc_viewer/public/hooks/use_data_view_fields.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import { useMemo } from 'react';
+import type { DataView, DataViewField } from '@kbn/data-views-plugin/common';
+import type { DataTableColumnsMeta } from '@kbn/discover-utils/types';
+import { getDataViewFieldOrCreateFromColumnMeta } from '@kbn/data-view-utils';
+
+interface UseFieldTypesProps {
+  fields: string[];
+  dataView: DataView;
+  columnsMeta?: DataTableColumnsMeta;
+}
+
+export const useDataViewFields = ({
+  fields,
+  dataView,
+  columnsMeta,
+}: UseFieldTypesProps): { dataViewFields: Record<string, DataViewField | undefined> } => {
+  const dataViewFields = useMemo(
+    () =>
+      fields.reduce((acc, fieldName) => {
+        acc[fieldName] = getDataViewFieldOrCreateFromColumnMeta({
+          fieldName,
+          dataView,
+          columnMeta: columnsMeta?.[fieldName],
+        });
+
+        return acc;
+      }, {} as Record<string, DataViewField | undefined>),
+    [fields, dataView, columnsMeta]
+  );
+
+  return { dataViewFields };
+};