[Discover][APM] Add trace waterfall section to traces doc viewer (elastic#217568)

## Summary

Enables the Trace section for the summary tab in the Traces Doc Viewer.
This PR focuses on just bringing the section with the widget, not for
adjusting the widget styles/look to be closer to the intended designs.
That is for follow-up work.

Closes elastic#217067

![Screenshot Trace Waterfall 3 2025-04-08
183800](https://github.com/user-attachments/assets/ef57a3c5-38a8-4aa0-854a-be483a6ebde3)

## How to test

* Add the following to your `kibana.dev.yml`:
```yaml
discover.experimental.enabledProfiles:
  - observability-traces-data-source-profile
  - observability-traces-transaction-document-profile
  - observability-traces-span-document-profile
```
* Ensure you are on an Observability root profile space
* Go to Discover, use or create a Data View profiles targetting
`traces-*` (such as `remote_cluster:traces-*`).
* Click on a span/transaction to expand the doc viewer
* The trace waterfall section should be present on the summary tab.

---------

Co-authored-by: kibanamachine <[email protected]>

Author: 2 people

src/platform/packages/shared/kbn-discover-utils/src/data_types/traces/traces_context_service.ts

@@ -12,7 +12,7 @@ import { createRegExpPatternFrom, testPatternAgainstAllowedList } from '@kbn/dat
 import { containsIndexPattern } from '../../utils';
 
 export interface TracesContextService {
-  getAllTracesIndexPattern(): string | undefined;
+  getAllTracesIndexPattern(): string;
   isTracesIndexPattern(indexPattern: unknown): boolean;
   containsTracesIndexPattern(indexPattern: unknown): boolean;
 }

src/platform/plugins/shared/discover/public/context_awareness/profile_providers/observability/traces_document_profile/span_document_profile/profile.ts

@@ -23,7 +23,7 @@ export const createObservabilityTracesSpanDocumentProfileProvider = ({
   isExperimental: true,
   profileId: OBSERVABILITY_TRACES_SPAN_DOCUMENT_PROFILE_ID,
   profile: {
-    getDocViewer: createGetDocViewer(tracesContextService.getAllTracesIndexPattern() || ''),
+    getDocViewer: createGetDocViewer(tracesContextService.getAllTracesIndexPattern()),
   },
   resolve: ({ record, rootContext }) => {
     const isObservabilitySolutionView = rootContext.profileId === OBSERVABILITY_ROOT_PROFILE_ID;

src/platform/plugins/shared/unified_doc_viewer/kibana.jsonc

@@ -14,7 +14,8 @@
     "requiredPlugins": [
       "data",
       "fieldFormats",
-      "share"
+      "share",
+      "embeddable"
     ],
     "optionalPlugins": [
       "fieldsMetadata"

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

@@ -0,0 +1,100 @@
+/*
+ * 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 React, { useCallback, useMemo } from 'react';
+import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { traceFields } from '../doc_viewer_span_overview/resources/fields';
+import { SpanSummaryField } from '../doc_viewer_span_overview/sub_components/span_summary_field';
+import { TransactionSummaryField } from '../doc_viewer_transaction_overview/sub_components/transaction_summary_field';
+import { getUnifiedDocViewerServices } from '../../../../plugin';
+import { FieldConfiguration } from '../resources/get_field_configuration';
+
+export interface TraceProps {
+  fields: Record<string, FieldConfiguration>;
+  serviceName: string;
+  traceId: string;
+  transactionId?: string;
+  displayType: 'span' | 'transaction';
+  displayLimit?: number;
+}
+
+export const Trace = ({
+  serviceName,
+  traceId,
+  transactionId,
+  fields,
+  displayType,
+  displayLimit = 5,
+}: TraceProps) => {
+  const { data } = getUnifiedDocViewerServices();
+
+  const { absoluteTimeRange } = data.query.timefilter.timefilter.useTimefilter();
+
+  const { rangeFrom, rangeTo } = useMemo(
+    () => ({
+      rangeFrom: new Date(absoluteTimeRange.start).toISOString(),
+      rangeTo: new Date(absoluteTimeRange.end).toISOString(),
+    }),
+    [absoluteTimeRange]
+  );
+
+  const getParentApi = useCallback(
+    () => ({
+      getSerializedStateForChild: () => ({
+        rawState: {
+          serviceName,
+          traceId,
+          entryTransactionId: transactionId,
+          rangeFrom,
+          rangeTo,
+          displayLimit,
+        },
+      }),
+    }),
+    [rangeFrom, rangeTo, displayLimit, serviceName, traceId, transactionId]
+  );
+
+  return (
+    <>
+      <EuiTitle size="s">
+        <h2>
+          {i18n.translate('unifiedDocViewer.observability.traces.trace.title', {
+            defaultMessage: 'Trace',
+          })}
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          {traceFields.map((fieldId: string) => {
+            const props = {
+              key: fieldId,
+              fieldId,
+              fieldConfiguration: fields[fieldId],
+            };
+
+            return displayType === 'span' ? (
+              <SpanSummaryField {...props} />
+            ) : (
+              <TransactionSummaryField {...props} />
+            );
+          })}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+      <ReactEmbeddableRenderer
+        type="APM_TRACE_WATERFALL_EMBEDDABLE"
+        getParentApi={getParentApi}
+        hidePanelChrome={true}
+      />
+    </>
+  );
+};

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

@@ -21,12 +21,12 @@ import {
 
 export const spanFields = [
   SPAN_NAME_FIELD,
-  TRANSACTION_NAME_FIELD,
   SERVICE_NAME_FIELD,
-  TRACE_ID_FIELD,
   SPAN_DESTINATION_SERVICE_RESOURCE_FIELD,
   TIMESTAMP_FIELD,
   HTTP_RESPONSE_STATUS_CODE_FIELD,
   SPAN_TYPE_FIELD,
   SPAN_SUBTYPE_FIELD,
 ];
+
+export const traceFields = [TRACE_ID_FIELD, TRANSACTION_NAME_FIELD];

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

@@ -7,12 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
+  SERVICE_NAME_FIELD,
   SPAN_DURATION_FIELD,
+  TRACE_ID_FIELD,
   TRANSACTION_ID_FIELD,
   getTraceDocumentOverview,
 } from '@kbn/discover-utils';
@@ -22,6 +24,7 @@ import { spanFields } from './resources/fields';
 import { getSpanFieldConfiguration } from './resources/get_span_field_configuration';
 import { SpanSummaryField } from './sub_components/span_summary_field';
 import { SpanDurationSummary } from './sub_components/span_duration_summary';
+import { Trace } from '../components/trace';
 
 export type SpanOverviewProps = DocViewRenderProps & {
   transactionIndexPattern: string;
@@ -35,14 +38,13 @@ export function SpanOverview({
   onRemoveColumn,
   transactionIndexPattern,
 }: SpanOverviewProps) {
-  const parsedDoc = getTraceDocumentOverview(hit);
+  const parsedDoc = useMemo(() => getTraceDocumentOverview(hit), [hit]);
   const spanDuration = parsedDoc[SPAN_DURATION_FIELD];
+  const transactionId = parsedDoc[TRANSACTION_ID_FIELD];
+  const fieldConfigurations = useMemo(() => getSpanFieldConfiguration(parsedDoc), [parsedDoc]);
 
   return (
-    <TransactionProvider
-      transactionId={parsedDoc[TRANSACTION_ID_FIELD]}
-      indexPattern={transactionIndexPattern}
-    >
+    <TransactionProvider transactionId={transactionId} indexPattern={transactionIndexPattern}>
       <FieldActionsProvider
         columns={columns}
         filter={filter}
@@ -59,24 +61,32 @@ export function SpanOverview({
             </h2>
           </EuiTitle>
           <EuiSpacer size="m" />
-          {spanFields.map((fieldId) => {
-            const fieldConfiguration = getSpanFieldConfiguration(parsedDoc)[fieldId];
-
-            return (
-              <SpanSummaryField
-                key={fieldId}
-                fieldId={fieldId}
-                fieldConfiguration={fieldConfiguration}
-              />
-            );
-          })}
+          {spanFields.map((fieldId) => (
+            <SpanSummaryField
+              key={fieldId}
+              fieldId={fieldId}
+              fieldConfiguration={fieldConfigurations[fieldId]}
+            />
+          ))}
 
           {spanDuration && (
             <>
               <EuiSpacer size="m" />
               <SpanDurationSummary duration={spanDuration} />
             </>
           )}
+          {transactionId && (
+            <>
+              <EuiSpacer size="m" />
+              <Trace
+                fields={fieldConfigurations}
+                serviceName={parsedDoc[SERVICE_NAME_FIELD]}
+                traceId={parsedDoc[TRACE_ID_FIELD]}
+                transactionId={transactionId}
+                displayType="span"
+              />
+            </>
+          )}
         </EuiPanel>
       </FieldActionsProvider>
     </TransactionProvider>

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

@@ -11,16 +11,12 @@ import {
   HTTP_RESPONSE_STATUS_CODE_FIELD,
   SERVICE_NAME_FIELD,
   TIMESTAMP_FIELD,
-  TRACE_ID_FIELD,
-  TRANSACTION_NAME_FIELD,
   USER_AGENT_NAME_FIELD,
   USER_AGENT_VERSION_FIELD,
 } from '@kbn/discover-utils';
 
 export const transactionFields = [
-  TRANSACTION_NAME_FIELD,
   SERVICE_NAME_FIELD,
-  TRACE_ID_FIELD,
   TIMESTAMP_FIELD,
   HTTP_RESPONSE_STATUS_CODE_FIELD,
   USER_AGENT_NAME_FIELD,

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

@@ -7,13 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DocViewRenderProps } from '@kbn/unified-doc-viewer/types';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
+  SERVICE_NAME_FIELD,
   TRACE_ID_FIELD,
   TRANSACTION_DURATION_FIELD,
+  TRANSACTION_ID_FIELD,
   getTraceDocumentOverview,
 } from '@kbn/discover-utils';
 import { FieldActionsProvider } from '../../../../hooks/use_field_actions';
@@ -22,6 +24,8 @@ import { getTransactionFieldConfiguration } from './resources/get_transaction_fi
 import { TransactionSummaryField } from './sub_components/transaction_summary_field';
 import { TransactionDurationSummary } from './sub_components/transaction_duration_summary';
 import { RootTransactionProvider } from './hooks/use_root_transaction';
+import { Trace } from '../components/trace';
+
 export type TransactionOverviewProps = DocViewRenderProps & {
   tracesIndexPattern: string;
 };
@@ -34,8 +38,13 @@ export function TransactionOverview({
   onRemoveColumn,
   tracesIndexPattern,
 }: TransactionOverviewProps) {
-  const parsedDoc = getTraceDocumentOverview(hit);
+  const parsedDoc = useMemo(() => getTraceDocumentOverview(hit), [hit]);
   const transactionDuration = parsedDoc[TRANSACTION_DURATION_FIELD];
+  const traceId = parsedDoc[TRACE_ID_FIELD];
+  const fieldConfigurations = useMemo(
+    () => getTransactionFieldConfiguration(parsedDoc),
+    [parsedDoc]
+  );
 
   const detailTitle = i18n.translate(
     'unifiedDocViewer.observability.traces.transactionOverview.title',
@@ -45,7 +54,7 @@ export function TransactionOverview({
   );
 
   return (
-    <RootTransactionProvider traceId={parsedDoc[TRACE_ID_FIELD]} indexPattern={tracesIndexPattern}>
+    <RootTransactionProvider traceId={traceId} indexPattern={tracesIndexPattern}>
       <FieldActionsProvider
         columns={columns}
         filter={filter}
@@ -58,24 +67,32 @@ export function TransactionOverview({
             <h2>{detailTitle}</h2>
           </EuiTitle>
           <EuiSpacer size="m" />
-          {transactionFields.map((fieldId) => {
-            const fieldConfiguration = getTransactionFieldConfiguration(parsedDoc)[fieldId];
-
-            return (
-              <TransactionSummaryField
-                key={fieldId}
-                fieldId={fieldId}
-                fieldConfiguration={fieldConfiguration}
-              />
-            );
-          })}
+          {transactionFields.map((fieldId) => (
+            <TransactionSummaryField
+              key={fieldId}
+              fieldId={fieldId}
+              fieldConfiguration={fieldConfigurations[fieldId]}
+            />
+          ))}
 
           {transactionDuration && (
             <>
               <EuiSpacer size="m" />
               <TransactionDurationSummary duration={transactionDuration} />
             </>
           )}
+          {traceId && (
+            <>
+              <EuiSpacer size="m" />
+              <Trace
+                fields={fieldConfigurations}
+                serviceName={parsedDoc[SERVICE_NAME_FIELD]}
+                traceId={traceId}
+                transactionId={parsedDoc[TRANSACTION_ID_FIELD]}
+                displayType="transaction"
+              />
+            </>
+          )}
         </EuiPanel>
       </FieldActionsProvider>
     </RootTransactionProvider>

src/platform/plugins/shared/unified_doc_viewer/tsconfig.json

@@ -42,7 +42,8 @@
     "@kbn/elastic-agent-utils",
     "@kbn/data-view-utils",
     "@kbn/apm-ui-shared",
-    "@kbn/react-hooks"
+    "@kbn/react-hooks",
+    "@kbn/embeddable-plugin"
   ],
   "exclude": ["target/**/*"]
 }