adding error rate to detail page

elastic · Jul 13, 2020 · a2b6c94 · a2b6c94
1 parent 50676a7
commit a2b6c94
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 27 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -13,6 +13,7 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
+import { EuiFlexGrid } from '@elastic/eui';
 import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { useTransactionDistribution } from '../../../hooks/useTransactionDistribution';
 import { useWaterfall } from '../../../hooks/useWaterfall';
@@ -29,6 +30,7 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { HeightRetainer } from '../../shared/HeightRetainer';
+import { ErroneousTransactionsRateChart } from '../../shared/charts/ErroneousTransactionsRateChart';
 
 export function TransactionDetails() {
   const location = useLocation();
@@ -84,7 +86,14 @@ export function TransactionDetails() {
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
           <ChartsSyncContextProvider>
-            <TransactionBreakdown />
+            <EuiFlexGrid columns={2} gutterSize="s">
+              <EuiFlexItem>
+                <TransactionBreakdown />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <ErroneousTransactionsRateChart />
+              </EuiFlexItem>
+            </EuiFlexGrid>
 
             <EuiSpacer size="s" />
 

diff --git a/x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx
@@ -25,25 +25,34 @@ export const ErroneousTransactionsRateChart = () => {
   const { urlParams, uiFilters } = useUrlParams();
   const syncedChartsProps = useChartsSync();
 
-  const { serviceName, start, end, errorGroupId } = urlParams;
+  const {
+    serviceName,
+    start,
+    end,
+    transactionType,
+    transactionName,
+  } = urlParams;
+
   const { data } = useFetcher(() => {
     if (serviceName && start && end) {
       return callApmApi({
-        pathname: '/api/apm/services/{serviceName}/errors/rate',
+        pathname:
+          '/api/apm/services/{serviceName}/transaction_groups/error_rate',
         params: {
           path: {
             serviceName,
           },
           query: {
             start,
             end,
+            transactionType,
+            transactionName,
             uiFilters: JSON.stringify(uiFilters),
-            groupId: errorGroupId,
           },
         },
       });
     }
-  }, [serviceName, start, end, uiFilters, errorGroupId]);
+  }, [serviceName, start, end, uiFilters, transactionType, transactionName]);
 
   const combinedOnHover = useCallback(
     (hoverX: number) => {

diff --git a/...s/apm/server/lib/errors/get_error_rate.ts → .../lib/transaction_groups/get_error_rate.ts b/...s/apm/server/lib/errors/get_error_rate.ts → .../lib/transaction_groups/get_error_rate.ts
@@ -4,9 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import {
-  HTTP_RESPONSE_STATUS_CODE,
   PROCESSOR_EVENT,
-  SERVICE_NAME,
+  HTTP_RESPONSE_STATUS_CODE,
+  TRANSACTION_NAME,
+  TRANSACTION_TYPE,
 } from '../../../common/elasticsearch_fieldnames';
 import { ProcessorEvent } from '../../../common/processor_event';
 import { rangeFilter } from '../../../common/utils/range_filter';
@@ -19,18 +20,30 @@ import {
 
 export async function getErrorRate({
   serviceName,
+  transactionType,
+  transactionName,
   setup,
 }: {
   serviceName: string;
+  transactionType?: string;
+  transactionName?: string;
   setup: Setup & SetupTimeRange & SetupUIFilters;
 }) {
   const { start, end, uiFiltersES, client, indices } = setup;
 
+  const transactionNamefilter = transactionName
+    ? [{ term: { [TRANSACTION_NAME]: transactionName } }]
+    : [];
+  const transactionTypefilter = transactionType
+    ? [{ term: { [TRANSACTION_TYPE]: transactionType } }]
+    : [];
+
   const filter = [
-    { term: { [SERVICE_NAME]: serviceName } },
     { term: { [PROCESSOR_EVENT]: ProcessorEvent.transaction } },
     { range: rangeFilter(start, end) },
     { exists: { field: HTTP_RESPONSE_STATUS_CODE } },
+    ...transactionNamefilter,
+    ...transactionTypefilter,
     ...uiFiltersES,
   ];
 

diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -13,7 +13,6 @@ import {
   errorDistributionRoute,
   errorGroupsRoute,
   errorsRoute,
-  errorRateRoute,
 } from './errors';
 import {
   serviceAgentNameRoute,
@@ -49,6 +48,7 @@ import {
   transactionGroupsRoute,
   transactionGroupsAvgDurationByCountry,
   transactionGroupsAvgDurationByBrowser,
+  transactionGroupsErrorRateRoute,
 } from './transaction_groups';
 import {
   errorGroupsLocalFiltersRoute,
@@ -99,7 +99,6 @@ const createApmApi = () => {
     .add(errorDistributionRoute)
     .add(errorGroupsRoute)
     .add(errorsRoute)
-    .add(errorRateRoute)
 
     // Services
     .add(serviceAgentNameRoute)
@@ -139,6 +138,7 @@ const createApmApi = () => {
     .add(transactionGroupsRoute)
     .add(transactionGroupsAvgDurationByBrowser)
     .add(transactionGroupsAvgDurationByCountry)
+    .add(transactionGroupsErrorRateRoute)
 
     // UI filters
     .add(errorGroupsLocalFiltersRoute)

diff --git a/x-pack/plugins/apm/server/routes/errors.ts b/x-pack/plugins/apm/server/routes/errors.ts
@@ -11,7 +11,6 @@ import { getErrorGroup } from '../lib/errors/get_error_group';
 import { getErrorGroups } from '../lib/errors/get_error_groups';
 import { setupRequest } from '../lib/helpers/setup_request';
 import { uiFiltersRt, rangeRt } from './default_api_types';
-import { getErrorRate } from '../lib/errors/get_error_rate';
 
 export const errorsRoute = createRoute(() => ({
   path: '/api/apm/services/{serviceName}/errors',
@@ -81,19 +80,3 @@ export const errorDistributionRoute = createRoute(() => ({
     return getErrorDistribution({ serviceName, groupId, setup });
   },
 }));
-
-export const errorRateRoute = createRoute(() => ({
-  path: '/api/apm/services/{serviceName}/errors/rate',
-  params: {
-    path: t.type({
-      serviceName: t.string,
-    }),
-    query: t.intersection([uiFiltersRt, rangeRt]),
-  },
-  handler: async ({ context, request }) => {
-    const setup = await setupRequest(context, request);
-    const { params } = context;
-    const { serviceName } = params.path;
-    return getErrorRate({ serviceName, setup });
-  },
-}));
diff --git a/x-pack/plugins/apm/server/routes/transaction_groups.ts b/x-pack/plugins/apm/server/routes/transaction_groups.ts
@@ -14,6 +14,7 @@ import { createRoute } from './create_route';
 import { uiFiltersRt, rangeRt } from './default_api_types';
 import { getTransactionAvgDurationByBrowser } from '../lib/transactions/avg_duration_by_browser';
 import { getTransactionAvgDurationByCountry } from '../lib/transactions/avg_duration_by_country';
+import { getErrorRate } from '../lib/transaction_groups/get_error_rate';
 
 export const transactionGroupsRoute = createRoute(() => ({
   path: '/api/apm/services/{serviceName}/transaction_groups',
@@ -195,3 +196,32 @@ export const transactionGroupsAvgDurationByCountry = createRoute(() => ({
     });
   },
 }));
+
+export const transactionGroupsErrorRateRoute = createRoute(() => ({
+  path: '/api/apm/services/{serviceName}/transaction_groups/error_rate',
+  params: {
+    path: t.type({
+      serviceName: t.string,
+    }),
+    query: t.intersection([
+      uiFiltersRt,
+      rangeRt,
+      t.partial({
+        transactionType: t.string,
+        transactionName: t.string,
+      }),
+    ]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+    const { params } = context;
+    const { serviceName } = params.path;
+    const { transactionType, transactionName } = params.query;
+    return getErrorRate({
+      serviceName,
+      transactionType,
+      transactionName,
+      setup,
+    });
+  },
+}));