[APM] Use status_code field to calculate error rate

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';

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}

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 && (

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" />
 

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" />
 

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>
   );

x-pack/plugins/apm/public/components/shared/charts/ErrorRateChart/index.tsx → x-pack/plugins/apm/public/components/shared/charts/ErroneousTransactionsRateChart/index.tsx

@@ -8,11 +8,11 @@ import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { mean } from 'lodash';
 import React, { useCallback } from 'react';
+import { EuiPanel } from '@elastic/eui';
 import { useChartsSync } from '../../../../hooks/useChartsSync';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { callApmApi } from '../../../../services/rest/createCallApmApi';
-import { unit } from '../../../../style/variables';
 import { asPercent } from '../../../../utils/formatters';
 // @ts-ignore
 import CustomPlot from '../CustomPlot';
@@ -21,12 +21,12 @@ const tickFormatY = (y?: number) => {
   return asPercent(y || 0, 1);
 };
 
-export const ErrorRateChart = () => {
+export const ErroneousTransactionsRateChart = () => {
   const { urlParams, uiFilters } = useUrlParams();
   const syncedChartsProps = useChartsSync();
 
   const { serviceName, start, end, errorGroupId } = urlParams;
-  const { data: errorRateData } = useFetcher(() => {
+  const { data } = useFetcher(() => {
     if (serviceName && start && end) {
       return callApmApi({
         pathname: '/api/apm/services/{serviceName}/errors/rate',
@@ -52,20 +52,20 @@ export const ErrorRateChart = () => {
     [syncedChartsProps]
   );
 
-  const errorRates = errorRateData?.errorRates || [];
+  const errorRates = data?.erroneousTransactionsRate || [];
 
   return (
-    <>
+    <EuiPanel>
       <EuiTitle size="xs">
         <span>
           {i18n.translate('xpack.apm.errorRateChart.title', {
-            defaultMessage: 'Error Rate',
+            defaultMessage: 'Erroneous Transactions Rate',
           })}
         </span>
       </EuiTitle>
       <CustomPlot
         {...syncedChartsProps}
-        noHits={errorRateData?.noHits}
+        noHits={data?.noHits}
         series={[
           {
             color: theme.euiColorVis7,
@@ -93,8 +93,7 @@ export const ErrorRateChart = () => {
         formatTooltipValue={({ y }: { y?: number }) =>
           Number.isFinite(y) ? tickFormatY(y) : 'N/A'
         }
-        height={unit * 10}
       />
-    </>
+    </EuiPanel>
   );
 };