[APM] Render related errors link in transaction flyout (elastic#29807)

* [APM] closes elastic#29563 by rendering related errors link with error count in transaction flyout * [APM] improved get_trace query by narrowing indices and parallelizing queries, improved code org/readability * [APM] code improvements, split get_trace queries into separate source files * [APM] remove initial transaction details request in favor of looking up the current transaction data within the trace (waterfall) data * Add test for `getWaterfall` * Revert change to `getWaterfallItems` test * simplified aggregation, waterfall helpers code, and moved get_trace_errors_per_transaction.ts under 'errors' * improved naming and readbility of waterfall properties * removed unused routes and queries and fixed some invisible bugs in the waterfall helpers * added trace.id in addition to the transaction.id filter in the kuery bar for related errors
ogupte · Feb 8, 2019 · fdac059 · fdac059
1 parent dee4da7
commit fdac059
Show file tree

Hide file tree

Showing 18 changed files with 1,350 additions and 337 deletions.
diff --git a/x-pack/plugins/apm/index.js b/x-pack/plugins/apm/index.js
@@ -5,7 +5,6 @@
  */
 
 import { resolve } from 'path';
-import { initTransactionsApi } from './server/routes/transactions';
 import { initTransactionGroupsApi } from './server/routes/transaction_groups';
 import { initServicesApi } from './server/routes/services';
 import { initErrorsApi } from './server/routes/errors';
@@ -70,7 +69,6 @@ export function apm(kibana) {
     },
 
     init(server) {
-      initTransactionsApi(server);
       initTransactionGroupsApi(server);
       initTracesApi(server);
       initServicesApi(server);

diff --git a/.../apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.tsx b/.../apm/public/components/app/TransactionDetails/Transaction/StickyTransactionProperties.tsx
@@ -40,6 +40,34 @@ export function StickyTransactionProperties({
     idx(transaction, _ => _.url.full) ||
     NOT_AVAILABLE_LABEL;
   const duration = transaction.transaction.duration.us;
+
+  const errorsOverviewLink = (
+    <KibanaLink
+      pathname={'/app/apm'}
+      hash={`/${idx(transaction, _ => _.service.name)}/errors`}
+      query={{
+        kuery: legacyEncodeURIComponent(
+          `trace.id : "${transaction.trace.id}" and transaction.id : "${
+            transaction.transaction.id
+          }"`
+        )
+      }}
+    >
+      {i18n.translate('xpack.apm.transactionDetails.errorsOverviewLink', {
+        values: { errorCount: errorCount || 0 },
+        defaultMessage:
+          '{errorCount, plural, one {View 1 error} other {View # errors}}'
+      })}
+    </KibanaLink>
+  );
+
+  const noErrorsText = i18n.translate(
+    'xpack.apm.transactionDetails.errorsNone',
+    {
+      defaultMessage: 'None'
+    }
+  );
+
   const stickyProperties: IStickyProperty[] = [
     {
       label: i18n.translate('xpack.apm.transactionDetails.timestampLabel', {
@@ -91,46 +119,18 @@ export function StickyTransactionProperties({
       val: idx(transaction, _ => _.user.id) || NOT_AVAILABLE_LABEL,
       truncated: true,
       width: '25%'
-    }
-  ];
-
-  if (errorCount !== undefined) {
-    const errorsOverviewLink = (
-      <KibanaLink
-        pathname={'/app/apm'}
-        hash={`/${idx(transaction, _ => _.service.name)}/errors`}
-        query={{
-          kuery: legacyEncodeURIComponent(
-            `transaction.id : "${transaction.transaction.id}"`
-          )
-        }}
-      >
-        {i18n.translate('xpack.apm.transactionDetails.errorsOverviewLink', {
-          values: { errorCount },
-          defaultMessage:
-            '{errorCount, plural, one {View 1 error} other {View # errors}}'
-        })}
-      </KibanaLink>
-    );
-
-    const noErrorsText = i18n.translate(
-      'xpack.apm.transactionDetails.errorsNone',
-      {
-        defaultMessage: 'None'
-      }
-    );
-
-    stickyProperties.push({
+    },
+    {
       label: i18n.translate(
         'xpack.apm.transactionDetails.errorsOverviewLabel',
         {
           defaultMessage: 'Errors'
         }
       ),
-      val: errorCount === 0 ? noErrorsText : errorsOverviewLink,
+      val: errorCount ? errorsOverviewLink : noErrorsText,
       width: '25%'
-    });
-  }
+    }
+  ];
 
   return <StickyProperties stickyProperties={stickyProperties} />;
 }
diff --git a/...p/TransactionDetails/Transaction/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx b/...p/TransactionDetails/Transaction/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx
@@ -28,14 +28,14 @@ import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
 import { StickyTransactionProperties } from '../../../StickyTransactionProperties';
 import { TransactionPropertiesTableForFlyout } from '../../../TransactionPropertiesTableForFlyout';
 import { FlyoutTopLevelProperties } from '../FlyoutTopLevelProperties';
-import { IWaterfall } from '../waterfall_helpers/waterfall_helpers';
 
 interface Props {
   onClose: () => void;
   transaction?: Transaction;
   location: Location;
   urlParams: IUrlParams;
-  waterfall: IWaterfall;
+  errorCount: number;
+  traceRootDuration?: number;
 }
 
 const ResponsiveFlyout = styled(EuiFlyout)`
@@ -98,7 +98,8 @@ export function TransactionFlyout({
   onClose,
   location,
   urlParams,
-  waterfall
+  errorCount,
+  traceRootDuration
 }: Props) {
   if (!transactionDoc) {
     return null;
@@ -134,8 +135,9 @@ export function TransactionFlyout({
           <FlyoutTopLevelProperties transaction={transactionDoc} />
           <EuiHorizontalRule />
           <StickyTransactionProperties
+            errorCount={errorCount}
             transaction={transactionDoc}
-            totalDuration={waterfall.traceRootDuration}
+            totalDuration={traceRootDuration}
           />
           <EuiHorizontalRule />
           <DroppedSpansWarning transactionDoc={transactionDoc} />

diff --git a/...blic/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx b/...blic/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/index.tsx
@@ -64,7 +64,7 @@ export class Waterfall extends Component<Props> {
     });
   };
 
-  public getWaterfallItem = (item: IWaterfallItem) => {
+  public renderWaterfallItem = (item: IWaterfallItem) => {
     const { serviceColors, waterfall, urlParams }: Props = this.props;
 
     return (
@@ -112,7 +112,8 @@ export class Waterfall extends Component<Props> {
             onClose={this.onCloseFlyout}
             location={location}
             urlParams={urlParams}
-            waterfall={waterfall}
+            traceRootDuration={waterfall.traceRootDuration}
+            errorCount={currentItem.errorCount}
           />
         );
       default:
@@ -123,7 +124,7 @@ export class Waterfall extends Component<Props> {
   public render() {
     const { waterfall } = this.props;
     const itemContainerHeight = 58; // TODO: This is a nasty way to calculate the height of the svg element. A better approach should be found
-    const waterfallHeight = itemContainerHeight * waterfall.items.length;
+    const waterfallHeight = itemContainerHeight * waterfall.orderedItems.length;
 
     return (
       <Container>
@@ -140,7 +141,7 @@ export class Waterfall extends Component<Props> {
               paddingTop: TIMELINE_MARGINS.top
             }}
           >
-            {waterfall.items.map(this.getWaterfallItem)}
+            {waterfall.orderedItems.map(this.renderWaterfallItem)}
           </div>
         </StickyContainer>