[APM] Display transaction info on span flyout (#24189)

* [APM] Display transaction info on span flyout * Add links * Fix tests * Eui fixes * Remove color from span type
elastic · Oct 18, 2018 · 4d01d0b · 4d01d0b
1 parent cb3c28e
commit 4d01d0b
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 65 deletions.
diff --git a/...ransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx b/...ransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import {
   borderRadius,
@@ -26,9 +26,8 @@ import { xcode } from 'react-syntax-highlighter/dist/styles';
 // @ts-ignore
 import sql from 'react-syntax-highlighter/dist/languages/sql';
 
+import { EuiTitle } from '@elastic/eui';
 import { DbContext } from '../../../../../../../../typings/Span';
-// @ts-ignore
-import { HeaderXSmall } from '../../../../../../shared/UIComponents';
 
 registerLanguage('sql', sql);
 
@@ -55,8 +54,10 @@ export function DatabaseContext({ dbContext }: Props) {
   }
 
   return (
-    <div>
-      <HeaderXSmall>DB Statement</HeaderXSmall>
+    <Fragment>
+      <EuiTitle size="xs">
+        <h3>Database statement</h3>
+      </EuiTitle>
       <DatabaseStatement>
         <SyntaxHighlighter
           language={'sql'}
@@ -73,6 +74,6 @@ export function DatabaseContext({ dbContext }: Props) {
           {dbContext.statement}
         </SyntaxHighlighter>
       </DatabaseStatement>
-    </div>
+    </Fragment>
   );
 }
diff --git a/...ctionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/...ctionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
@@ -7,22 +7,14 @@
 // tslint:disable-next-line  no-var-requires
 const numeral = require('@elastic/numeral');
 import React from 'react';
-import styled from 'styled-components';
 
-// @ts-ignore
+import { first } from 'lodash';
 import { Span } from '../../../../../../../../typings/Span';
-import { units } from '../../../../../../../style/variables';
 // @ts-ignore
 import { asMillis } from '../../../../../../../utils/formatters';
 // @ts-ignore
-import { Indicator } from '../../../../../../shared/charts/Legend';
-// @ts-ignore
 import { StickyProperties } from '../../../../../../shared/StickyProperties';
 
-const LegendIndicator = styled(Indicator)`
-  display: inline-block;
-`;
-
 function getSpanLabel(type: string) {
   switch (type) {
     case 'db':
@@ -34,6 +26,10 @@ function getSpanLabel(type: string) {
   }
 }
 
+function getPrimaryType(type: string) {
+  return first(type.split('.'));
+}
+
 interface Props {
   span: Span;
   totalDuration: number;
@@ -43,8 +39,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) {
   const spanName = span.span.name;
   const spanDuration = span.span.duration.us;
   const relativeDuration = spanDuration / totalDuration;
-  const spanTypeLabel = getSpanLabel(span.span.type);
-  const spanTypeColor = 'red'; // TODO
+  const spanTypeLabel = getSpanLabel(getPrimaryType(span.span.type));
 
   const stickyProperties = [
     {
@@ -55,12 +50,7 @@ export function StickySpanProperties({ span, totalDuration }: Props) {
     {
       fieldName: 'span.type',
       label: 'Type',
-      val: (
-        <div>
-          <LegendIndicator radius={units.minus - 1} color={spanTypeColor} />
-          {spanTypeLabel}
-        </div>
-      )
+      val: spanTypeLabel
     },
     {
       fieldName: 'span.duration.us',

diff --git a/...tails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickyTransactionProperties.tsx b/...tails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/StickyTransactionProperties.tsx
@@ -0,0 +1,56 @@
+/*
+ * 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 from 'react';
+import {
+  SERVICE_NAME,
+  TRANSACTION_NAME
+} from 'x-pack/plugins/apm/common/constants';
+import {
+  KibanaLink,
+  legacyEncodeURIComponent
+  // @ts-ignore
+} from 'x-pack/plugins/apm/public/utils/url';
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
+// @ts-ignore
+import { StickyProperties } from '../../../../../../shared/StickyProperties';
+
+interface Props {
+  transaction: Transaction;
+}
+
+export function StickyTransactionProperties({ transaction }: Props) {
+  const stickyProperties = [
+    {
+      label: 'Service',
+      fieldName: SERVICE_NAME,
+      val: (
+        <KibanaLink
+          pathname={'/app/apm'}
+          hash={`/${transaction.context.service.name}`}
+        >
+          {transaction.context.service.name}
+        </KibanaLink>
+      )
+    },
+    {
+      label: 'Transaction',
+      fieldName: TRANSACTION_NAME,
+      val: (
+        <KibanaLink
+          pathname={'/app/apm'}
+          hash={`/${transaction.context.service.name}/transactions/${
+            transaction.transaction.type
+          }/${legacyEncodeURIComponent(transaction.transaction.name)}`}
+        >
+          {transaction.transaction.name}
+        </KibanaLink>
+      )
+    }
+  ];
+
+  return <StickyProperties stickyProperties={stickyProperties} />;
+}
diff --git a/...ents/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/index.tsx b/...ents/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
@@ -8,6 +8,7 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
+  EuiHorizontalRule,
   EuiTitle
 } from '@elastic/eui';
 import { get } from 'lodash';
@@ -24,33 +25,44 @@ import Stacktrace from '../../../../../../shared/Stacktrace';
 import { DatabaseContext } from './DatabaseContext';
 import { StickySpanProperties } from './StickySpanProperties';
 
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
 import { Span } from '../../../../../../../../typings/Span';
 // @ts-ignore
 import DiscoverButton from '../../../../../../shared/DiscoverButton';
+import { StickyTransactionProperties } from './StickyTransactionProperties';
 
 const StackTraceContainer = styled.div`
   margin-top: ${px(unit)};
 `;
 
-function getDiscoverQuery(id: number) {
+function getDiscoverQuery(span: Span) {
   return {
     _a: {
       interval: 'auto',
       query: {
         language: 'lucene',
-        query: `span.hex_id:${id}`
+        query:
+          span.version === 'v2'
+            ? `span.hex_id:${span.span.hex_id}`
+            : `span.id:${span.span.id}`
       }
     }
   };
 }
 
 interface Props {
   span?: Span;
+  parentTransaction: Transaction;
   totalDuration: number;
   onClose: () => void;
 }
 
-export function SpanFlyout({ span, totalDuration, onClose }: Props) {
+export function SpanFlyout({
+  span,
+  parentTransaction,
+  totalDuration,
+  onClose
+}: Props) {
   if (!span) {
     return null;
   }
@@ -60,16 +72,18 @@ export function SpanFlyout({ span, totalDuration, onClose }: Props) {
 
   return (
     <EuiFlyout onClose={onClose} size="l">
-      <EuiFlyoutHeader>
+      <EuiFlyoutHeader hasBorder>
         <EuiTitle>
           <h2>Span details</h2>
         </EuiTitle>
 
-        <DiscoverButton query={getDiscoverQuery(span.span.id)}>
+        <DiscoverButton query={getDiscoverQuery(span)}>
           {`View span in Discover`}
         </DiscoverButton>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
+        <StickyTransactionProperties transaction={parentTransaction} />
+        <EuiHorizontalRule />
         <StickySpanProperties span={span} totalDuration={totalDuration} />
         <DatabaseContext dbContext={dbContext} />
         <StackTraceContainer>

diff --git a/...blic/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx b/...blic/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx
@@ -95,6 +95,7 @@ export class Waterfall extends Component<Props, State> {
           <SpanFlyout
             totalDuration={waterfall.duration}
             span={currentItem.span}
+            parentTransaction={currentItem.parentTransaction}
             onClose={this.onCloseFlyout}
           />
         );

diff --git a/...ails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts b/...ails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.test.ts
@@ -4,10 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getWaterfallRoot } from './waterfall_helpers';
+import { Span } from 'x-pack/plugins/apm/typings/Span';
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
+import { getWaterfallRoot, IWaterfallItem } from './waterfall_helpers';
 
 it('getWaterfallRoot', () => {
-  const items = [
+  const items: IWaterfallItem[] = [
     {
       id: 'd',
       parentId: 'c',
@@ -16,7 +18,9 @@ it('getWaterfallRoot', () => {
       duration: 210,
       timestamp: 1536763736371000,
       offset: 0,
-      docType: 'span'
+      docType: 'span',
+      parentTransaction: {} as Transaction,
+      span: {} as Span
     },
     {
       id: 'b',
@@ -26,7 +30,9 @@ it('getWaterfallRoot', () => {
       duration: 4694,
       timestamp: 1536763736368000,
       offset: 0,
-      docType: 'span'
+      docType: 'span',
+      parentTransaction: {} as Transaction,
+      span: {} as Span
     },
     {
       id: 'b2',
@@ -36,7 +42,9 @@ it('getWaterfallRoot', () => {
       duration: 4694,
       timestamp: 1536763736367000,
       offset: 0,
-      docType: 'span'
+      docType: 'span',
+      parentTransaction: {} as Transaction,
+      span: {} as Span
     },
     {
       id: 'c',
@@ -46,7 +54,8 @@ it('getWaterfallRoot', () => {
       duration: 3581,
       timestamp: 1536763736369000,
       offset: 0,
-      docType: 'transaction'
+      docType: 'transaction',
+      transaction: {} as Transaction
     },
     {
       id: 'a',
@@ -55,7 +64,8 @@ it('getWaterfallRoot', () => {
       duration: 9480,
       timestamp: 1536763736366000,
       offset: 0,
-      docType: 'transaction'
+      docType: 'transaction',
+      transaction: {} as Transaction
     }
   ];