[APM] Use status_code field to calculate error rate (elastic#71109)

* calculating error rate based on status code * fixing unit test * addressing pr comments * adding erroneous transactions rate * adding erroneous transactions rate * adding error rate to detail page * fixing i18n Co-authored-by: Elastic Machine <[email protected]>
gmmorris · Jul 14, 2020 · 90f233b · 90f233b
1 parent 3374b2d
commit 90f233b
Show file tree

Hide file tree

Showing 18 changed files with 219 additions and 283 deletions.
diff --git a/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap b/x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap
diff --git a/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts b/x-pack/plugins/apm/common/elasticsearch_fieldnames.ts
@@ -24,6 +24,7 @@ export const AGENT_VERSION = 'agent.version';
 
 export const URL_FULL = 'url.full';
 export const HTTP_REQUEST_METHOD = 'http.request.method';
+export const HTTP_RESPONSE_STATUS_CODE = 'http.response.status_code';
 export const USER_ID = 'user.id';
 export const USER_AGENT_ORIGINAL = 'user_agent.original';
 export const USER_AGENT_NAME = 'user_agent.name';

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx
@@ -12,6 +12,7 @@ import d3 from 'd3';
 import { scaleUtc } from 'd3-scale';
 import { mean } from 'lodash';
 import React from 'react';
+import { px } from '../../../../style/variables';
 import { asRelativeDateTimeRange } from '../../../../utils/formatters';
 import { getTimezoneOffsetInMs } from '../../../shared/charts/CustomPlot/getTimezoneOffsetInMs';
 // @ts-ignore
@@ -88,6 +89,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
         <span>{title}</span>
       </EuiTitle>
       <Histogram
+        height={px(180)}
         noHits={distribution.noHits}
         tooltipHeader={tooltipHeader}
         verticalLineHover={(bucket: FormattedBucket) => bucket.x}

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -16,18 +16,16 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
+import { useTrackPageview } from '../../../../../observability/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 import { useFetcher } from '../../../hooks/useFetcher';
+import { useLocation } from '../../../hooks/useLocation';
+import { useUrlParams } from '../../../hooks/useUrlParams';
+import { callApmApi } from '../../../services/rest/createCallApmApi';
 import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { DetailView } from './DetailView';
 import { ErrorDistribution } from './Distribution';
-import { useLocation } from '../../../hooks/useLocation';
-import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useTrackPageview } from '../../../../../observability/public';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
-import { ErrorRateChart } from '../../shared/charts/ErrorRateChart';
-import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 
 const Titles = styled.div`
   margin-bottom: ${px(units.plus)};
@@ -181,24 +179,15 @@ export function ErrorGroupDetails() {
             </EuiText>
           </Titles>
         )}
-        <EuiFlexGroup gutterSize="s">
-          <ChartsSyncContextProvider>
-            <EuiFlexItem>
-              <ErrorDistribution
-                distribution={errorDistributionData}
-                title={i18n.translate(
-                  'xpack.apm.errorGroupDetails.occurrencesChartLabel',
-                  {
-                    defaultMessage: 'Occurrences',
-                  }
-                )}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <ErrorRateChart />
-            </EuiFlexItem>
-          </ChartsSyncContextProvider>
-        </EuiFlexGroup>
+        <ErrorDistribution
+          distribution={errorDistributionData}
+          title={i18n.translate(
+            'xpack.apm.errorGroupDetails.occurrencesChartLabel',
+            {
+              defaultMessage: 'Occurrences',
+            }
+          )}
+        />
       </EuiPanel>
       <EuiSpacer size="s" />
       {showDetails && (

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -18,11 +18,9 @@ import { PROJECTION } from '../../../../common/projections/typings';
 import { useFetcher } from '../../../hooks/useFetcher';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { callApmApi } from '../../../services/rest/createCallApmApi';
-import { ErrorRateChart } from '../../shared/charts/ErrorRateChart';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
-import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
 
 const ErrorGroupOverview: React.FC = () => {
   const { urlParams, uiFilters } = useUrlParams();
@@ -99,28 +97,17 @@ const ErrorGroupOverview: React.FC = () => {
           <LocalUIFilters {...localUIFiltersConfig} />
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
-          <EuiFlexGroup gutterSize="s">
-            <ChartsSyncContextProvider>
-              <EuiFlexItem>
-                <EuiPanel>
-                  <ErrorDistribution
-                    distribution={errorDistributionData}
-                    title={i18n.translate(
-                      'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                      {
-                        defaultMessage: 'Error occurrences',
-                      }
-                    )}
-                  />
-                </EuiPanel>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiPanel>
-                  <ErrorRateChart />
-                </EuiPanel>
-              </EuiFlexItem>
-            </ChartsSyncContextProvider>
-          </EuiFlexGroup>
+          <EuiPanel>
+            <ErrorDistribution
+              distribution={errorDistributionData}
+              title={i18n.translate(
+                'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                {
+                  defaultMessage: 'Error occurrences',
+                }
+              )}
+            />
+          </EuiPanel>
 
           <EuiSpacer size="s" />
 

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/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -19,10 +19,12 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { first } from 'lodash';
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiFlexGrid } from '@elastic/eui';
 import { useTransactionList } from '../../../hooks/useTransactionList';
 import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { IUrlParams } from '../../../context/UrlParamsContext/types';
 import { TransactionCharts } from '../../shared/charts/TransactionCharts';
+import { ErroneousTransactionsRateChart } from '../../shared/charts/ErroneousTransactionsRateChart';
 import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 import { TransactionList } from './List';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
@@ -125,7 +127,14 @@ export function TransactionOverview() {
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
           <ChartsSyncContextProvider>
-            <TransactionBreakdown initialIsOpen={true} />
+            <EuiFlexGrid columns={2} gutterSize="s">
+              <EuiFlexItem>
+                <TransactionBreakdown />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <ErroneousTransactionsRateChart />
+              </EuiFlexItem>
+            </EuiFlexGrid>
 
             <EuiSpacer size="s" />
 

diff --git a/.../plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx b/.../plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
@@ -3,58 +3,51 @@
  * 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, { useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { useTransactionBreakdown } from '../../../hooks/useTransactionBreakdown';
-import { TransactionBreakdownHeader } from './TransactionBreakdownHeader';
-import { TransactionBreakdownKpiList } from './TransactionBreakdownKpiList';
 import { TransactionBreakdownGraph } from './TransactionBreakdownGraph';
-import { FETCH_STATUS } from '../../../hooks/useFetcher';
-import { useUiTracker } from '../../../../../observability/public';
+import { TransactionBreakdownKpiList } from './TransactionBreakdownKpiList';
 
 const emptyMessage = i18n.translate('xpack.apm.transactionBreakdown.noData', {
   defaultMessage: 'No data within this time range.',
 });
 
-const TransactionBreakdown: React.FC<{
-  initialIsOpen?: boolean;
-}> = ({ initialIsOpen }) => {
-  const [showChart, setShowChart] = useState(!!initialIsOpen);
+const TransactionBreakdown = () => {
   const { data, status } = useTransactionBreakdown();
-  const trackApmEvent = useUiTracker({ app: 'apm' });
   const { kpis, timeseries } = data;
   const noHits = data.kpis.length === 0 && status === FETCH_STATUS.SUCCESS;
-  const showEmptyMessage = noHits && !showChart;
 
   return (
     <EuiPanel>
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem grow={false}>
-          <TransactionBreakdownHeader
-            showChart={showChart}
-            onToggleClick={() => {
-              setShowChart(!showChart);
-              if (showChart) {
-                trackApmEvent({ metric: 'hide_breakdown_chart' });
-              } else {
-                trackApmEvent({ metric: 'show_breakdown_chart' });
-              }
-            }}
-          />
+          <EuiTitle size="xs">
+            <h3>
+              {i18n.translate('xpack.apm.transactionBreakdown.chartTitle', {
+                defaultMessage: 'Time spent by span type',
+              })}
+            </h3>
+          </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          {showEmptyMessage ? (
+          {noHits ? (
             <EuiText>{emptyMessage}</EuiText>
           ) : (
             <TransactionBreakdownKpiList kpis={kpis} />
           )}
         </EuiFlexItem>
-        {showChart ? (
-          <EuiFlexItem grow={false}>
-            <TransactionBreakdownGraph timeseries={timeseries} />
-          </EuiFlexItem>
-        ) : null}
+        <EuiFlexItem grow={false}>
+          <TransactionBreakdownGraph timeseries={timeseries} />
+        </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
   );