[8.x] [APM][Transactions] Test trace summary (#207115) (#207358)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[APM][Transactions] Test trace summary
(#207115)](https://github.com/elastic/kibana/pull/207115)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT
[{"author":{"name":"jennypavlova","email":"dzheni.pavlova@elastic.co"},"sourceCommit":{"committedDate":"2025-01-21T08:49:03Z","message":"[APM][Transactions]
Test trace summary (#207115)\n\nCloses #206947\r\n\r\n##
Summary\r\n\r\nThis PR adds tests for trace summary (Otel / APM cases)
and changes the\r\n`styled-components` to
`css`.","sha":"8b97ad0b1332fbef0e0e13ac3a01d842a8f7b8c9","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services"],"title":"[APM][Transactions]
Test trace
summary","number":207115,"url":"https://github.com/elastic/kibana/pull/207115","mergeCommit":{"message":"[APM][Transactions]
Test trace summary (#207115)\n\nCloses #206947\r\n\r\n##
Summary\r\n\r\nThis PR adds tests for trace summary (Otel / APM cases)
and changes the\r\n`styled-components` to
`css`.","sha":"8b97ad0b1332fbef0e0e13ac3a01d842a8f7b8c9"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/207115","number":207115,"mergeCommit":{"message":"[APM][Transactions]
Test trace summary (#207115)\n\nCloses #206947\r\n\r\n##
Summary\r\n\r\nThis PR adds tests for trace summary (Otel / APM cases)
and changes the\r\n`styled-components` to
`css`.","sha":"8b97ad0b1332fbef0e0e13ac3a01d842a8f7b8c9"}}]}]
BACKPORT-->

packages/kbn-apm-synthtrace-client/src/lib/apm/apm_fields.ts

@@ -213,6 +213,7 @@ export type ApmFields = Fields<{
     }>;
     'url.original': string;
     'url.domain': string;
+    'url.full': string;
   }> &
   ApmApplicationMetricFields &
   ExperimentalFields;

packages/kbn-apm-synthtrace-client/src/lib/apm/transaction.ts

@@ -25,6 +25,9 @@ export class Transaction extends BaseSpan {
       'processor.event': 'transaction',
       'transaction.id': generateShortId(),
       'transaction.sampled': true,
+      'http.request.method': 'GET',
+      'http.response.status_code': 200,
+      'url.full': 'elastic.co',
     });
   }
 

packages/kbn-apm-synthtrace/src/test/scenarios/01_simple_trace.test.ts

@@ -95,6 +95,8 @@ describe('simple trace', () => {
       'container.id': 'instance-1',
       'event.outcome': 'success',
       'host.name': 'instance-1',
+      'http.request.method': 'GET',
+      'http.response.status_code': 200,
       'processor.event': 'transaction',
       'processor.name': 'transaction',
       'service.environment': 'production',
@@ -107,6 +109,7 @@ describe('simple trace', () => {
       'transaction.name': 'GET /api/product/list',
       'transaction.type': 'request',
       'transaction.sampled': true,
+      'url.full': 'elastic.co',
     });
   });
 

packages/kbn-apm-synthtrace/src/test/scenarios/__snapshots__/01_simple_trace.test.ts.snap

@@ -8,6 +8,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -20,6 +22,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459200050,
@@ -89,6 +92,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -101,6 +106,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459260050,
@@ -170,6 +176,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -182,6 +190,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459320050,
@@ -251,6 +260,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -263,6 +274,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459380050,
@@ -332,6 +344,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -344,6 +358,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459440050,
@@ -413,6 +428,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -425,6 +442,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459500050,
@@ -494,6 +512,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -506,6 +526,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459560050,
@@ -575,6 +596,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -587,6 +610,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459620050,
@@ -656,6 +680,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -668,6 +694,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459680050,
@@ -737,6 +764,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -749,6 +778,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459740050,
@@ -818,6 +848,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -830,6 +862,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459800050,
@@ -899,6 +932,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -911,6 +946,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459860050,
@@ -980,6 +1016,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -992,6 +1030,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459920050,
@@ -1061,6 +1100,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -1073,6 +1114,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609459980050,
@@ -1142,6 +1184,8 @@ Array [
     "container.id": "instance-1",
     "event.outcome": "success",
     "host.name": "instance-1",
+    "http.request.method": "GET",
+    "http.response.status_code": 200,
     "processor.event": "transaction",
     "processor.name": "transaction",
     "service.environment": "production",
@@ -1154,6 +1198,7 @@ Array [
     "transaction.name": "GET /api/product/list",
     "transaction.sampled": true,
     "transaction.type": "request",
+    "url.full": "elastic.co",
   },
   Object {
     "@timestamp": 1609460040050,

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/transaction_details/transaction_details.cy.ts

@@ -124,6 +124,21 @@ describe.skip('Transaction details', () => {
     cy.url().should('include', 'opbeans-java/errors');
   });
 
+  describe('Trace sample summary', () => {
+    it('shows transaction summary', () => {
+      cy.visitKibana(
+        `/app/apm/services/opbeans-node/transactions/view?${new URLSearchParams({
+          ...timeRange,
+          transactionName: 'GET /api/product/:id',
+        })}`
+      );
+
+      cy.getByTestSubj('apmHttpInfoRequestMethod').should('exist');
+      cy.getByTestSubj('apmHttpInfoUrl').should('exist');
+      cy.getByTestSubj('apmHttpStatusBadge').should('exist');
+    });
+  });
+
   describe('when navigating to a trace sample', () => {
     it('keeps the same trace sample after reloading the page', () => {
       cy.visitKibana(

x-pack/solutions/observability/plugins/apm/public/components/shared/summary/http_info_summary_item/index.tsx

@@ -5,21 +5,20 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiToolTip } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { truncate, unit } from '../../../../utils/style';
+import { EuiBadge, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+import { unit } from '../../../../utils/style';
 import { HttpStatusBadge } from '../http_status_badge';
 
-const HttpInfoBadge = euiStyled(EuiBadge)`
-  margin-right: ${({ theme }) => theme.eui.euiSizeXS};
-`;
-
-const Url = euiStyled('span')`
+const urlStyles = css`
   display: inline-block;
   vertical-align: bottom;
-  ${truncate(unit * 24)};
+  max-width: ${unit * 24}px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 interface HttpInfoProps {
   method?: string;
@@ -27,11 +26,9 @@ interface HttpInfoProps {
   url: string;
 }
 
-const Span = euiStyled('span')`
-  white-space: nowrap;
-`;
-
 export function HttpInfoSummaryItem({ status, method, url }: HttpInfoProps) {
+  const { euiTheme } = useEuiTheme();
+
   if (!url) {
     return null;
   }
@@ -41,18 +38,29 @@ export function HttpInfoSummaryItem({ status, method, url }: HttpInfoProps) {
   });
 
   return (
-    <Span>
-      <HttpInfoBadge title={undefined}>
+    <span
+      css={css`
+        whitespace: nowrap;
+      `}
+    >
+      <EuiBadge
+        title={undefined}
+        css={{
+          marginRight: `${euiTheme.size.xs}`,
+        }}
+      >
         {method && (
           <EuiToolTip content={methodLabel}>
-            <>{method.toUpperCase()}</>
+            <span data-test-subj="apmHttpInfoRequestMethod">{method.toUpperCase()}</span>
           </EuiToolTip>
         )}{' '}
         <EuiToolTip content={url}>
-          <Url>{url}</Url>
+          <span data-test-subj="apmHttpInfoUrl" css={urlStyles}>
+            {url}
+          </span>
         </EuiToolTip>
-      </HttpInfoBadge>
+      </EuiBadge>
       {status && <HttpStatusBadge status={status} />}
-    </Span>
+    </span>
   );
 }

x-pack/solutions/observability/plugins/apm/public/components/shared/summary/http_status_badge/index.tsx

@@ -22,7 +22,9 @@ export function HttpStatusBadge({ status }: HttpStatusBadgeProps) {
   return (
     <EuiToolTip content={label}>
       <EuiBadge color={httpStatusCodeToColor(status) || 'default'}>
-        {status} {statusCodes[status.toString()]}
+        <span data-test-subj="apmHttpStatusBadge">
+          {status} {statusCodes[status.toString()]}
+        </span>
       </EuiBadge>
     </EuiToolTip>
   );