[APM] Display span.context.http.url in span details flyout

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import {
+  borderRadius,
+  colors,
+  fontFamilyCode,
+  px,
+  unit,
+  units
+} from '../../../../../../../style/variables';
+
+import { EuiTitle } from '@elastic/eui';
+import { HttpContext } from '../../../../../../../../typings/Span';
+
+const DatabaseStatement = styled.div`
+  margin-top: ${px(unit)};
+  padding: ${px(units.half)} ${px(unit)};
+  background: ${colors.gray5};
+  border-radius: ${borderRadius};
+  border: 1px solid ${colors.gray4};
+  font-family: ${fontFamilyCode};
+`;
+
+interface Props {
+  httpContext?: HttpContext;
+}
+
+export function HttpContext({ httpContext }: Props) {
+  if (!httpContext || !httpContext.url) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <EuiTitle size="xs">
+        <h3>HTTP URL</h3>
+      </EuiTitle>
+      <DatabaseStatement>{httpContext.url}</DatabaseStatement>
+    </Fragment>
+  );
+}

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/index.tsx

@@ -30,6 +30,7 @@ import { px, unit } from '../../../../../../../style/variables';
 import Stacktrace from '../../../../../../shared/Stacktrace';
 
 import { DatabaseContext } from './DatabaseContext';
+import { HttpContext } from './HttpContext';
 import { StickySpanProperties } from './StickySpanProperties';
 
 import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
@@ -75,6 +76,7 @@ export function SpanFlyout({
   const stackframes = span.span.stacktrace;
   const codeLanguage: string = get(span, SERVICE_LANGUAGE_NAME);
   const dbContext = span.context.db;
+  const httpContext = span.context.http;
 
   return (
     <EuiPortal>
@@ -99,6 +101,7 @@ export function SpanFlyout({
           <EuiHorizontalRule />
           <StickySpanProperties span={span} totalDuration={totalDuration} />
           <EuiHorizontalRule />
+          <HttpContext httpContext={httpContext} />
           <DatabaseContext dbContext={dbContext} />
           <StackTraceContainer>
             <Stacktrace stackframes={stackframes} codeLanguage={codeLanguage} />

x-pack/plugins/apm/typings/Span.ts

@@ -18,8 +18,13 @@ interface Processor {
   event: 'span';
 }
 
+export interface HttpContext {
+  url?: string;
+}
+
 interface Context {
   db?: DbContext;
+  http?: HttpContext;
   service: ContextService;
   [key: string]: unknown;
 }