[APM] Adding comparison to transactions table

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

@@ -57,7 +57,11 @@ export function ServiceOverview({
   return (
     <AnnotationsContextProvider>
       <ChartPointerEventContextProvider>
-        <SearchBar prepend={transactionTypeLabel} showCorrelations />
+        <SearchBar
+          prepend={transactionTypeLabel}
+          showCorrelations
+          showTimeComparison
+        />
         <EuiPage>
           <EuiFlexGroup direction="column" gutterSize="s">
             <EuiFlexItem>

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiBasicTableColumn } from '@elastic/eui';
+import { EuiBasicTableColumn, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ValuesType } from 'utility-types';
@@ -34,10 +34,12 @@ export function getColumns({
   serviceName,
   latencyAggregationType,
   transactionGroupComparisonStatistics,
+  comparisonEnabled,
 }: {
   serviceName: string;
   latencyAggregationType?: LatencyAggregationType;
   transactionGroupComparisonStatistics?: TransactionGroupComparisonStatistics;
+  comparisonEnabled?: boolean;
 }): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
   return [
     {
@@ -71,13 +73,18 @@ export function getColumns({
       name: getLatencyColumnLabel(latencyAggregationType),
       width: px(unit * 10),
       render: (_, { latency, name }) => {
-        const timeseries =
-          transactionGroupComparisonStatistics?.[name]?.latency;
+        const currentTimeseries =
+          transactionGroupComparisonStatistics?.currentPeriod?.[name]?.latency;
+        const previousTimeseries =
+          transactionGroupComparisonStatistics?.previousPeriod?.[name]?.latency;
         return (
           <SparkPlot
             color="euiColorVis1"
             compact
-            series={timeseries}
+            series={currentTimeseries}
+            comparisonSeries={
+              comparisonEnabled ? previousTimeseries : undefined
+            }
             valueLabel={asMillisecondDuration(latency)}
           />
         );
@@ -92,13 +99,20 @@ export function getColumns({
       ),
       width: px(unit * 10),
       render: (_, { throughput, name }) => {
-        const timeseries =
-          transactionGroupComparisonStatistics?.[name]?.throughput;
+        const currentTimeseries =
+          transactionGroupComparisonStatistics?.currentPeriod?.[name]
+            ?.throughput;
+        const previousTimeseries =
+          transactionGroupComparisonStatistics?.previousPeriod?.[name]
+            ?.throughput;
         return (
           <SparkPlot
             color="euiColorVis0"
             compact
-            series={timeseries}
+            series={currentTimeseries}
+            comparisonSeries={
+              comparisonEnabled ? previousTimeseries : undefined
+            }
             valueLabel={asTransactionRate(throughput)}
           />
         );
@@ -113,13 +127,20 @@ export function getColumns({
       ),
       width: px(unit * 8),
       render: (_, { errorRate, name }) => {
-        const timeseries =
-          transactionGroupComparisonStatistics?.[name]?.errorRate;
+        const currentTimeseries =
+          transactionGroupComparisonStatistics?.currentPeriod?.[name]
+            ?.errorRate;
+        const previousTimeseries =
+          transactionGroupComparisonStatistics?.previousPeriod?.[name]
+            ?.errorRate;
         return (
           <SparkPlot
             color="euiColorVis7"
             compact
-            series={timeseries}
+            series={currentTimeseries}
+            comparisonSeries={
+              comparisonEnabled ? previousTimeseries : undefined
+            }
             valueLabel={asPercent(errorRate, 1)}
           />
         );
@@ -134,9 +155,22 @@ export function getColumns({
       ),
       width: px(unit * 5),
       render: (_, { name }) => {
-        const impact =
-          transactionGroupComparisonStatistics?.[name]?.impact ?? 0;
-        return <ImpactBar value={impact} size="m" />;
+        const currentImpact =
+          transactionGroupComparisonStatistics?.currentPeriod?.[name]?.impact ??
+          0;
+        const previousImpact =
+          transactionGroupComparisonStatistics?.previousPeriod?.[name]
+            ?.impact ?? 0;
+        return (
+          <EuiFlexGroup gutterSize="xs" direction="column">
+            <EuiFlexItem>
+              <ImpactBar value={currentImpact} size="m" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <ImpactBar value={previousImpact} size="s" color="subdued" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        );
       },
     },
   ];

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

@@ -20,6 +20,7 @@ import { useUrlParams } from '../../../../context/url_params_context/use_url_par
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { TransactionOverviewLink } from '../../../shared/Links/apm/transaction_overview_link';
 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_columns';
 
@@ -31,6 +32,7 @@ const INITIAL_STATE = {
   transactionGroups: [],
   isAggregationAccurate: true,
   requestId: '',
+  transactionGroupsTotalItems: 0,
 };
 
 type SortField = 'name' | 'latency' | 'throughput' | 'errorRate' | 'impact';
@@ -54,12 +56,27 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
   });
 
   const { pageIndex, sort } = tableOptions;
+  const { direction, field } = sort;
 
   const { transactionType } = useApmServiceContext();
   const {
-    urlParams: { environment, kuery, start, end, latencyAggregationType },
+    urlParams: {
+      start,
+      end,
+      latencyAggregationType,
+      comparisonType,
+      comparisonEnabled,
+      environment,
+      kuery,
+    },
   } = useUrlParams();
 
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+  });
+
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end || !latencyAggregationType || !transactionType) {
@@ -80,12 +97,23 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
           },
         },
       }).then((response) => {
+        const currentPageTransactionGroups = orderBy(
+          response.transactionGroups,
+          field,
+          direction
+        ).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
+
         return {
-          requestId: uuid(),
           ...response,
+          // Everytime the primary statistics is refetched, updates the requestId making the comparison API to be refetched.
+          requestId: uuid(),
+          transactionGroupsTotalItems: response.transactionGroups.length,
+          transactionGroups: currentPageTransactionGroups,
         };
       });
     },
+    // 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,
@@ -94,27 +122,22 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
       end,
       transactionType,
       latencyAggregationType,
+      pageIndex,
+      direction,
+      field,
+      comparisonType,
     ]
   );
 
-  const { transactionGroups, requestId } = data;
-  const currentPageTransactionGroups = orderBy(
-    transactionGroups,
-    sort.field,
-    sort.direction
-  ).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
-
-  const transactionNames = JSON.stringify(
-    currentPageTransactionGroups.map(({ name }) => name).sort()
-  );
+  const { transactionGroups, requestId, transactionGroupsTotalItems } = data;
 
   const {
     data: transactionGroupComparisonStatistics,
     status: transactionGroupComparisonStatisticsStatus,
   } = useFetcher(
     (callApmApi) => {
       if (
-        currentPageTransactionGroups.length &&
+        transactionGroupsTotalItems &&
         start &&
         end &&
         transactionType &&
@@ -133,22 +156,27 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
               numBuckets: 20,
               transactionType,
               latencyAggregationType,
-              transactionNames,
+              transactionNames: JSON.stringify(
+                transactionGroups.map(({ name }) => name).sort()
+              ),
+              comparisonStart,
+              comparisonEnd,
             },
           },
         });
       }
     },
-    // only fetches statistics when requestId changes or transaction names changes
+    // only fetches comparison statistics when requestId is invalidated by primary statistics api call
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [requestId, transactionNames],
+    [requestId],
     { preservePreviousData: false }
   );
 
   const columns = getColumns({
     serviceName,
     latencyAggregationType,
     transactionGroupComparisonStatistics,
+    comparisonEnabled,
   });
 
   const isLoading =
@@ -158,17 +186,10 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
   const pagination = {
     pageIndex,
     pageSize: PAGE_SIZE,
-    totalItemCount: transactionGroups.length,
+    totalItemCount: transactionGroupsTotalItems,
     hidePerPageOptions: true,
   };
 
-  const sorting = {
-    sort: {
-      field: sort.field,
-      direction: sort.direction,
-    },
-  };
-
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
@@ -204,14 +225,14 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
         <EuiFlexItem>
           <TableFetchWrapper status={status}>
             <ServiceOverviewTableContainer
-              isEmptyAndLoading={transactionGroups.length === 0 && isLoading}
+              isEmptyAndLoading={transactionGroupsTotalItems === 0 && isLoading}
             >
               <EuiBasicTable
                 loading={isLoading}
-                items={currentPageTransactionGroups}
+                items={transactionGroups}
                 columns={columns}
                 pagination={pagination}
-                sorting={sorting}
+                sorting={{ sort: { field, direction } }}
                 onChange={(newTableOptions: {
                   page?: {
                     index: number;

x-pack/plugins/apm/public/components/shared/ImpactBar/index.tsx

@@ -11,23 +11,19 @@ import React from 'react';
 // TODO: extend from EUI's EuiProgress prop interface
 export interface ImpactBarProps extends Record<string, unknown> {
   value: number;
-  size?: 'l' | 'm';
+  size?: 's' | 'l' | 'm';
   max?: number;
+  color?: string;
 }
 
 export function ImpactBar({
   value,
   size = 'l',
   max = 100,
+  color = 'primary',
   ...rest
 }: ImpactBarProps) {
   return (
-    <EuiProgress
-      size={size}
-      value={value}
-      max={max}
-      color="primary"
-      {...rest}
-    />
+    <EuiProgress size={size} value={value} max={max} color={color} {...rest} />
   );
 }