[APM] Adding comparison to Throughput chart, Error rate chart, and Errors table

x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx

@@ -22,9 +22,11 @@ type ErrorGroupComparisonStatistics = APIReturnType<'GET /api/apm/services/{serv
 export function getColumns({
   serviceName,
   errorGroupComparisonStatistics,
+  comparisonEnabled,
 }: {
   serviceName: string;
   errorGroupComparisonStatistics: ErrorGroupComparisonStatistics;
+  comparisonEnabled?: boolean;
 }): Array<EuiBasicTableColumn<ErrorGroupPrimaryStatistics['error_groups'][0]>> {
   return [
     {
@@ -71,12 +73,17 @@ export function getColumns({
       ),
       width: px(unit * 12),
       render: (_, { occurrences, group_id: errorGroupId }) => {
-        const timeseries =
-          errorGroupComparisonStatistics?.[errorGroupId]?.timeseries;
+        const currentPeriodTimeseries =
+          errorGroupComparisonStatistics?.currentPeriod?.[errorGroupId]
+            ?.timeseries;
+        const previousPeriodTimeseries =
+          errorGroupComparisonStatistics?.previousPeriod?.[errorGroupId]
+            ?.timeseries;
+
         return (
           <SparkPlot
             color="euiColorVis7"
-            series={timeseries}
+            series={currentPeriodTimeseries}
             valueLabel={i18n.translate(
               'xpack.apm.serviceOveriew.errorsTableOccurrences',
               {
@@ -86,6 +93,9 @@ export function getColumns({
                 },
               }
             )}
+            comparisonSeries={
+              comparisonEnabled ? previousPeriodTimeseries : undefined
+            }
           />
         );
       },

x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx

@@ -18,14 +18,18 @@ import uuid from 'uuid';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
+import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
 import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
 import { getColumns } from './get_column';
 
 interface Props {
   serviceName: string;
 }
+type ErrorGroupPrimaryStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/primary_statistics'>;
+type ErrorGroupComparisonStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/comparison_statistics'>;
 
 type SortDirection = 'asc' | 'desc';
 type SortField = 'name' | 'last_seen' | 'occurrences';
@@ -36,14 +40,31 @@ const DEFAULT_SORT = {
   field: 'occurrences' as const,
 };
 
-const INITIAL_STATE = {
+const INITIAL_STATE_PRIMARY_STATISTICS: {
+  items: ErrorGroupPrimaryStatistics['error_groups'];
+  totalItems: number;
+  requestId?: string;
+} = {
   items: [],
+  totalItems: 0,
   requestId: undefined,
 };
 
+const INITIAL_STATE_COMPARISON_STATISTICS: ErrorGroupComparisonStatistics = {
+  currentPeriod: {},
+  previousPeriod: {},
+};
+
 export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   const {
-    urlParams: { environment, kuery, start, end },
+    urlParams: {
+      environment,
+      kuery,
+      start,
+      end,
+      comparisonType,
+      comparisonEnabled,
+    },
   } = useUrlParams();
   const { transactionType } = useApmServiceContext();
   const [tableOptions, setTableOptions] = useState<{
@@ -57,9 +78,16 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
     sort: DEFAULT_SORT,
   });
 
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+  });
+
   const { pageIndex, sort } = tableOptions;
+  const { direction, field } = sort;
 
-  const { data = INITIAL_STATE, status } = useFetcher(
+  const { data = INITIAL_STATE_PRIMARY_STATISTICS, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end || !transactionType) {
         return;
@@ -78,37 +106,43 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
           },
         },
       }).then((response) => {
+        const currentPageErrorGroups = orderBy(
+          response.error_groups,
+          field,
+          direction
+        ).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
+
         return {
           requestId: uuid(),
-          items: response.error_groups,
+          items: currentPageErrorGroups,
+          totalItems: response.error_groups.length,
         };
       });
     },
-    [environment, kuery, start, end, serviceName, transactionType]
+    // comparisonType is listed as dependency even thought it is not used. This is needed to trigger the comparison api when it is changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      environment,
+      kuery,
+      start,
+      end,
+      serviceName,
+      transactionType,
+      pageIndex,
+      direction,
+      field,
+      comparisonType,
+    ]
   );
 
-  const { requestId, items } = data;
-  const currentPageErrorGroups = orderBy(
-    items,
-    sort.field,
-    sort.direction
-  ).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
+  const { requestId, items, totalItems } = data;
 
-  const groupIds = JSON.stringify(
-    currentPageErrorGroups.map(({ group_id: groupId }) => groupId).sort()
-  );
   const {
-    data: errorGroupComparisonStatistics,
+    data: errorGroupComparisonStatistics = INITIAL_STATE_COMPARISON_STATISTICS,
     status: errorGroupComparisonStatisticsStatus,
   } = useFetcher(
     (callApmApi) => {
-      if (
-        requestId &&
-        currentPageErrorGroups.length &&
-        start &&
-        end &&
-        transactionType
-      ) {
+      if (requestId && items.length && start && end && transactionType) {
         return callApmApi({
           endpoint:
             'GET /api/apm/services/{serviceName}/error_groups/comparison_statistics',
@@ -121,21 +155,26 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
               end,
               numBuckets: 20,
               transactionType,
-              groupIds,
+              groupIds: JSON.stringify(
+                items.map(({ group_id: groupId }) => groupId).sort()
+              ),
+              comparisonStart,
+              comparisonEnd,
             },
           },
         });
       }
     },
-    // only fetches agg results when requestId or group ids change
+    // only fetches agg results when requestId changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [requestId, groupIds],
+    [requestId],
     { preservePreviousData: false }
   );
 
   const columns = getColumns({
     serviceName,
-    errorGroupComparisonStatistics: errorGroupComparisonStatistics ?? {},
+    errorGroupComparisonStatistics,
+    comparisonEnabled,
   });
 
   return (
@@ -164,16 +203,16 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
         <TableFetchWrapper status={status}>
           <ServiceOverviewTableContainer
             isEmptyAndLoading={
-              items.length === 0 && status === FETCH_STATUS.LOADING
+              totalItems === 0 && status === FETCH_STATUS.LOADING
             }
           >
             <EuiBasicTable
               columns={columns}
-              items={currentPageErrorGroups}
+              items={items}
               pagination={{
                 pageIndex,
                 pageSize: PAGE_SIZE,
-                totalItemCount: items.length,
+                totalItemCount: totalItems,
                 pageSizeOptions: [PAGE_SIZE],
                 hidePerPageOptions: true,
               }}

x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx

@@ -10,11 +10,15 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { asTransactionRate } from '../../../../common/utils/formatters';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTheme } from '../../../hooks/use_theme';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 const INITIAL_STATE = {
   currentPeriod: [],
@@ -29,9 +33,22 @@ export function ServiceOverviewThroughputChart({
   const theme = useTheme();
   const { serviceName } = useParams<{ serviceName?: string }>();
   const {
-    urlParams: { environment, kuery, start, end },
+    urlParams: {
+      environment,
+      kuery,
+      start,
+      end,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useUrlParams();
   const { transactionType } = useApmServiceContext();
+  const comparisonChartTheme = getComparisonChartTheme(theme);
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+  });
 
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
@@ -48,14 +65,49 @@ export function ServiceOverviewThroughputChart({
               start,
               end,
               transactionType,
+              comparisonStart,
+              comparisonEnd,
             },
           },
         });
       }
     },
-    [environment, kuery, serviceName, start, end, transactionType]
+    [
+      environment,
+      kuery,
+      serviceName,
+      start,
+      end,
+      transactionType,
+      comparisonStart,
+      comparisonEnd,
+    ]
   );
 
+  const timeseries = [
+    {
+      data: data.currentPeriod,
+      type: 'linemark',
+      color: theme.eui.euiColorVis0,
+      title: i18n.translate('xpack.apm.serviceOverview.throughtputChartTitle', {
+        defaultMessage: 'Throughput',
+      }),
+    },
+    ...(comparisonEnabled
+      ? [
+          {
+            data: data.previousPeriod,
+            type: 'area',
+            color: theme.eui.euiColorLightestShade,
+            title: i18n.translate(
+              'xpack.apm.serviceOverview.throughtputChart.previousPeriodLabel',
+              { defaultMessage: 'Previous period' }
+            ),
+          },
+        ]
+      : []),
+  ];
+
   return (
     <EuiPanel>
       <EuiTitle size="xs">
@@ -70,18 +122,9 @@ export function ServiceOverviewThroughputChart({
         height={height}
         showAnnotations={false}
         fetchStatus={status}
-        timeseries={[
-          {
-            data: data.currentPeriod,
-            type: 'linemark',
-            color: theme.eui.euiColorVis0,
-            title: i18n.translate(
-              'xpack.apm.serviceOverview.throughtputChartTitle',
-              { defaultMessage: 'Throughput' }
-            ),
-          },
-        ]}
+        timeseries={timeseries}
         yLabelFormat={asTransactionRate}
+        customTheme={comparisonChartTheme}
       />
     </EuiPanel>
   );

x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/get_columns.tsx

@@ -159,14 +159,13 @@ export function getColumns({
           transactionGroupComparisonStatistics?.currentPeriod?.[name]?.impact ??
           0;
         const previousImpact =
-          transactionGroupComparisonStatistics?.previousPeriod?.[name]
-            ?.impact ?? 0;
+          transactionGroupComparisonStatistics?.previousPeriod?.[name]?.impact;
         return (
           <EuiFlexGroup gutterSize="xs" direction="column">
             <EuiFlexItem>
               <ImpactBar value={currentImpact} size="m" />
             </EuiFlexItem>
-            {comparisonEnabled && (
+            {comparisonEnabled && previousImpact && (
               <EuiFlexItem>
                 <ImpactBar value={previousImpact} size="s" color="subdued" />
               </EuiFlexItem>