[APM] Adding comparison to transactions table

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';
@@ -16,7 +16,7 @@ import {
 } from '../../../../../common/utils/formatters';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { px, unit } from '../../../../style/variables';
-import { SparkPlot } from '../../../shared/charts/spark_plot';
+import { ComparisonSparkPlot } from '../../../shared/charts/comparison_spark_plot';
 import { ImpactBar } from '../../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
@@ -54,10 +54,12 @@ export function getColumns({
   serviceName,
   latencyAggregationType,
   transactionGroupComparisonStatistics,
+  comparisonEnabled = true,
 }: {
   serviceName: string;
   latencyAggregationType?: string;
   transactionGroupComparisonStatistics?: TransactionGroupComparisonStatistics;
+  comparisonEnabled?: boolean;
 }): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
   return [
     {
@@ -91,13 +93,18 @@ export function getColumns({
       name: getLatencyAggregationTypeLabel(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
+          <ComparisonSparkPlot
             color="euiColorVis1"
             compact
-            series={timeseries}
+            series={currentTimeseries}
+            comparisonSeries={
+              comparisonEnabled ? previousTimeseries : undefined
+            }
             valueLabel={asMillisecondDuration(latency)}
           />
         );
@@ -112,13 +119,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
+          <ComparisonSparkPlot
             color="euiColorVis0"
             compact
-            series={timeseries}
+            series={currentTimeseries}
+            comparisonSeries={
+              comparisonEnabled ? previousTimeseries : undefined
+            }
             valueLabel={asTransactionRate(throughput)}
           />
         );
@@ -133,13 +147,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
+          <ComparisonSparkPlot
             color="euiColorVis7"
             compact
-            series={timeseries}
+            series={currentTimeseries}
+            comparisonSeries={
+              comparisonEnabled ? previousTimeseries : undefined
+            }
             valueLabel={asPercent(errorRate, 1)}
           />
         );
@@ -154,9 +175,22 @@ export function getColumns({
       ),
       width: px(unit * 5),
       render: (_, { name }) => {
-        const impact =
-          transactionGroupComparisonStatistics?.[name]?.impact ?? 0;
-        return <ImpactBar value={impact} size="m" />;
+        const currenIimpact =
+          transactionGroupComparisonStatistics?.currentPeriod?.[name]?.impact ??
+          0;
+        const previousIimpact =
+          transactionGroupComparisonStatistics?.previousPeriod?.[name]
+            ?.impact ?? 0;
+        return (
+          <EuiFlexGroup gutterSize="xs" direction="column">
+            <EuiFlexItem>
+              <ImpactBar value={currenIimpact} size="m" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <ImpactBar value={previousIimpact} 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';
 
@@ -58,9 +59,26 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
   const { transactionType } = useApmServiceContext();
   const {
     uiFilters,
-    urlParams: { start, end, latencyAggregationType },
+    urlParams: {
+      start,
+      end,
+      latencyAggregationType,
+      comparisonType,
+      comparisonEnabled,
+    },
   } = useUrlParams();
 
+  const {
+    comparisonStart = undefined,
+    comparisonEnd = undefined,
+  } = comparisonType
+    ? getTimeRangeComparison({
+        start,
+        end,
+        comparisonType,
+      })
+    : {};
+
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end || !latencyAggregationType || !transactionType) {
@@ -132,21 +150,24 @@ export function ServiceOverviewTransactionsTable({ serviceName }: Props) {
               transactionType,
               latencyAggregationType,
               transactionNames,
+              comparisonStart,
+              comparisonEnd,
             },
           },
         });
       }
     },
-    // only fetches statistics when requestId changes or transaction names changes
+    // only fetches statistics when requestId, transaction names or comparison range change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [requestId, transactionNames],
+    [requestId, transactionNames, comparisonStart, comparisonEnd],
     { preservePreviousData: false }
   );
 
   const columns = getColumns({
     serviceName,
     latencyAggregationType,
     transactionGroupComparisonStatistics,
+    comparisonEnabled,
   });
 
   const isLoading =

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

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

@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import { EuiIcon } from '@elastic/eui';
+import {
+  AreaSeries,
+  Chart,
+  CurveType,
+  LineSeries,
+  ScaleType,
+  Settings,
+} from '@elastic/charts';
+import { merge } from 'lodash';
+import { Coordinate } from '../../../../../typings/timeseries';
+import { useChartTheme } from '../../../../../../observability/public';
+import { px, unit } from '../../../../style/variables';
+import { useTheme } from '../../../../hooks/use_theme';
+import { getComparisonChartTheme } from '../../time_comparison/get_time_range_comparison';
+import { Color } from '../spark_plot';
+
+export function ComparisonSparkPlot({
+  color,
+  series,
+  valueLabel,
+  compact,
+  comparisonSeries = [],
+}: {
+  color: Color;
+  series?: Coordinate[] | null;
+  valueLabel: React.ReactNode;
+  compact?: boolean;
+  comparisonSeries?: Coordinate[];
+}) {
+  const theme = useTheme();
+  const defaultChartTheme = useChartTheme();
+  const comparisonChartTheme = getComparisonChartTheme(theme);
+
+  const sparkplotChartTheme = merge({}, defaultChartTheme, {
+    chartMargins: { left: 0, right: 0, top: 0, bottom: 0 },
+    lineSeriesStyle: {
+      point: { opacity: 0 },
+    },
+    ...comparisonChartTheme,
+  });
+
+  const colorValue = theme.eui[color];
+
+  const chartSize = {
+    height: px(24),
+    width: compact ? px(unit * 3) : px(unit * 4),
+  };
+
+  return (
+    <EuiFlexGroup gutterSize="m" responsive={false}>
+      <EuiFlexItem grow={false}>
+        {!series || series.every((point) => point.y === null) ? (
+          <EuiIcon type="visLine" color="subdued" style={chartSize} />
+        ) : (
+          <Chart size={chartSize}>
+            <Settings
+              theme={sparkplotChartTheme}
+              showLegend={false}
+              tooltip="none"
+            />
+            <LineSeries
+              id="line"
+              xScaleType={ScaleType.Time}
+              yScaleType={ScaleType.Linear}
+              xAccessor={'x'}
+              yAccessors={['y']}
+              data={series}
+              color={colorValue}
+              curve={CurveType.CURVE_MONOTONE_X}
+            />
+            <AreaSeries
+              id="area"
+              xScaleType={ScaleType.Time}
+              yScaleType={ScaleType.Linear}
+              xAccessor={'x'}
+              yAccessors={['y']}
+              data={comparisonSeries}
+              color={theme.eui.euiColorLightestShade}
+              curve={CurveType.CURVE_MONOTONE_X}
+            />
+          </Chart>
+        )}
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={{ whiteSpace: 'nowrap' }}>
+        {valueLabel}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

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

@@ -21,7 +21,7 @@ import { useChartTheme } from '../../../../../../observability/public';
 import { px, unit } from '../../../../style/variables';
 import { useTheme } from '../../../../hooks/use_theme';
 
-type Color =
+export type Color =
   | 'euiColorVis0'
   | 'euiColorVis1'
   | 'euiColorVis2'