[APM] Break down transaction table api removing the sparklines

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

@@ -12,7 +12,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ValuesType } from 'utility-types';
 import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
 import {
@@ -40,6 +40,8 @@ type ServiceTransactionGroupItem = ValuesType<
   APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/overview'>['transactionGroups']
 >;
 
+type TransactionGroupMetrics = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/metrics'>;
+
 interface Props {
   serviceName: string;
 }
@@ -81,90 +83,16 @@ function getLatencyAggregationTypeLabel(latencyAggregationType?: string) {
   }
 }
 
-export function ServiceOverviewTransactionsTable(props: Props) {
-  const { serviceName } = props;
-  const { transactionType } = useApmServiceContext();
-  const {
-    uiFilters,
-    urlParams: { start, end, latencyAggregationType },
-  } = useUrlParams();
-
-  const [tableOptions, setTableOptions] = useState<{
-    pageIndex: number;
-    sort: {
-      direction: SortDirection;
-      field: SortField;
-    };
-  }>({
-    pageIndex: 0,
-    sort: DEFAULT_SORT,
-  });
-
-  const {
-    data = {
-      totalItemCount: 0,
-      items: [],
-      tableOptions: {
-        pageIndex: 0,
-        sort: DEFAULT_SORT,
-      },
-    },
-    status,
-  } = useFetcher(() => {
-    if (!start || !end || !latencyAggregationType || !transactionType) {
-      return;
-    }
-
-    return callApmApi({
-      endpoint:
-        'GET /api/apm/services/{serviceName}/transactions/groups/overview',
-      params: {
-        path: { serviceName },
-        query: {
-          start,
-          end,
-          uiFilters: JSON.stringify(uiFilters),
-          size: PAGE_SIZE,
-          numBuckets: 20,
-          pageIndex: tableOptions.pageIndex,
-          sortField: tableOptions.sort.field,
-          sortDirection: tableOptions.sort.direction,
-          transactionType,
-          latencyAggregationType: latencyAggregationType as LatencyAggregationType,
-        },
-      },
-    }).then((response) => {
-      return {
-        items: response.transactionGroups,
-        totalItemCount: response.totalTransactionGroups,
-        tableOptions: {
-          pageIndex: tableOptions.pageIndex,
-          sort: {
-            field: tableOptions.sort.field,
-            direction: tableOptions.sort.direction,
-          },
-        },
-      };
-    });
-  }, [
-    serviceName,
-    start,
-    end,
-    uiFilters,
-    tableOptions.pageIndex,
-    tableOptions.sort.field,
-    tableOptions.sort.direction,
-    transactionType,
-    latencyAggregationType,
-  ]);
-
-  const {
-    items,
-    totalItemCount,
-    tableOptions: { pageIndex, sort },
-  } = data;
-
-  const columns: Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> = [
+function getColumns({
+  serviceName,
+  latencyAggregationType,
+  transactionsMetricsData,
+}: {
+  serviceName: string;
+  latencyAggregationType?: string;
+  transactionsMetricsData?: TransactionGroupMetrics;
+}): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
+  return [
     {
       field: 'name',
       name: i18n.translate(
@@ -195,12 +123,15 @@ export function ServiceOverviewTransactionsTable(props: Props) {
       field: 'latency',
       name: getLatencyAggregationTypeLabel(latencyAggregationType),
       width: px(unit * 10),
-      render: (_, { latency }) => {
+      render: (_, { latency, name }) => {
+        const timeseries = transactionsMetricsData
+          ? transactionsMetricsData[name]?.latency.timeseries
+          : undefined;
         return (
           <SparkPlot
             color="euiColorVis1"
             compact
-            series={latency.timeseries ?? undefined}
+            series={timeseries}
             valueLabel={asMillisecondDuration(latency.value)}
           />
         );
@@ -213,12 +144,15 @@ export function ServiceOverviewTransactionsTable(props: Props) {
         { defaultMessage: 'Throughput' }
       ),
       width: px(unit * 10),
-      render: (_, { throughput }) => {
+      render: (_, { throughput, name }) => {
+        const timeseries = transactionsMetricsData
+          ? transactionsMetricsData[name]?.throughput.timeseries
+          : undefined;
         return (
           <SparkPlot
             color="euiColorVis0"
             compact
-            series={throughput.timeseries ?? undefined}
+            series={timeseries}
             valueLabel={asTransactionRate(throughput.value)}
           />
         );
@@ -233,12 +167,15 @@ export function ServiceOverviewTransactionsTable(props: Props) {
         }
       ),
       width: px(unit * 8),
-      render: (_, { errorRate }) => {
+      render: (_, { errorRate, name }) => {
+        const timeseries = transactionsMetricsData
+          ? transactionsMetricsData[name]?.errorRate.timeseries
+          : undefined;
         return (
           <SparkPlot
             color="euiColorVis7"
             compact
-            series={errorRate.timeseries ?? undefined}
+            series={timeseries}
             valueLabel={asPercent(errorRate.value, 1)}
           />
         );
@@ -258,6 +195,127 @@ export function ServiceOverviewTransactionsTable(props: Props) {
       },
     },
   ];
+}
+
+export function ServiceOverviewTransactionsTable(props: Props) {
+  const { serviceName } = props;
+  const { transactionType } = useApmServiceContext();
+  const {
+    uiFilters,
+    urlParams: { start, end, latencyAggregationType },
+  } = useUrlParams();
+
+  const [tableOptions, setTableOptions] = useState<{
+    pageIndex: number;
+    sort: {
+      direction: SortDirection;
+      field: SortField;
+    };
+  }>({
+    pageIndex: 0,
+    sort: DEFAULT_SORT,
+  });
+
+  const {
+    data = {
+      totalItemCount: 0,
+      items: [],
+      tableOptions: {
+        pageIndex: 0,
+        sort: DEFAULT_SORT,
+      },
+    },
+    status,
+  } = useFetcher(() => {
+    if (!start || !end || !latencyAggregationType || !transactionType) {
+      return;
+    }
+
+    return callApmApi({
+      endpoint:
+        'GET /api/apm/services/{serviceName}/transactions/groups/overview',
+      params: {
+        path: { serviceName },
+        query: {
+          start,
+          end,
+          uiFilters: JSON.stringify(uiFilters),
+          numBuckets: 20,
+          sortField: tableOptions.sort.field,
+          sortDirection: tableOptions.sort.direction,
+          transactionType,
+          latencyAggregationType: latencyAggregationType as LatencyAggregationType,
+        },
+      },
+    }).then((response) => {
+      return {
+        items: response.transactionGroups,
+        totalItemCount: response.totalTransactionGroups,
+        tableOptions: {
+          pageIndex: tableOptions.pageIndex,
+          sort: {
+            field: tableOptions.sort.field,
+            direction: tableOptions.sort.direction,
+          },
+        },
+      };
+    });
+  }, [
+    serviceName,
+    start,
+    end,
+    uiFilters,
+    tableOptions.pageIndex,
+    tableOptions.sort.field,
+    tableOptions.sort.direction,
+    transactionType,
+    latencyAggregationType,
+  ]);
+
+  const {
+    items,
+    totalItemCount,
+    tableOptions: { pageIndex, sort },
+  } = data;
+
+  const transactionNames = useMemo(() => items.map(({ name }) => name), [
+    items,
+  ]);
+
+  const {
+    data: transactionsMetricsData,
+    status: transactionsMetricsStatus,
+  } = useFetcher(
+    () => {
+      if (transactionNames.length && start && end && transactionType) {
+        return callApmApi({
+          endpoint:
+            'GET /api/apm/services/{serviceName}/transactions/groups/metrics',
+          params: {
+            path: { serviceName },
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              numBuckets: 20,
+              transactionType,
+              latencyAggregationType: latencyAggregationType as LatencyAggregationType,
+              transactionNames: transactionNames.join(),
+            },
+          },
+        });
+      }
+    },
+    // only fetches metrics when transaction names change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [transactionNames]
+  );
+
+  const columns = getColumns({
+    serviceName,
+    latencyAggregationType,
+    transactionsMetricsData,
+  });
 
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
@@ -300,15 +358,21 @@ export function ServiceOverviewTransactionsTable(props: Props) {
             >
               <EuiBasicTable
                 columns={columns}
-                items={items}
+                items={items.slice(
+                  pageIndex * PAGE_SIZE,
+                  (pageIndex + 1) * PAGE_SIZE
+                )}
                 pagination={{
                   pageIndex,
                   pageSize: PAGE_SIZE,
                   totalItemCount,
                   pageSizeOptions: [PAGE_SIZE],
                   hidePerPageOptions: true,
                 }}
-                loading={status === FETCH_STATUS.LOADING}
+                loading={
+                  status === FETCH_STATUS.LOADING ||
+                  transactionsMetricsStatus === FETCH_STATUS.LOADING
+                }
                 onChange={(newTableOptions: {
                   page?: {
                     index: number;

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

@@ -15,6 +15,7 @@ import {
   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';
@@ -38,7 +39,7 @@ export function SparkPlot({
   compact,
 }: {
   color: Color;
-  series?: Array<{ x: number; y: number | null }> | null;
+  series?: Coordinate[] | null;
   valueLabel: React.ReactNode;
   compact?: boolean;
 }) {
@@ -57,18 +58,18 @@ export function SparkPlot({
 
   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" />
+          <EuiIcon type="visLine" color="subdued" style={chartSize} />
         ) : (
-          <Chart
-            size={{
-              height: px(24),
-              width: compact ? px(unit * 3) : px(unit * 4),
-            }}
-          >
+          <Chart size={chartSize}>
             <Settings
               theme={sparkplotChartTheme}
               showLegend={false}

x-pack/plugins/apm/server/lib/services/get_service_transaction_groups/get_timeseries_data_for_transaction_groups.ts

@@ -36,7 +36,6 @@ export async function getTimeseriesDataForTransactionGroups({
   transactionNames,
   esFilter,
   searchAggregatedTransactions,
-  size,
   numBuckets,
   transactionType,
   latencyAggregationType,
@@ -48,7 +47,6 @@ export async function getTimeseriesDataForTransactionGroups({
   transactionNames: string[];
   esFilter: ESFilter[];
   searchAggregatedTransactions: boolean;
-  size: number;
   numBuckets: number;
   transactionType: string;
   latencyAggregationType: LatencyAggregationType;
@@ -84,7 +82,7 @@ export async function getTimeseriesDataForTransactionGroups({
         transaction_groups: {
           terms: {
             field: TRANSACTION_NAME,
-            size,
+            size: 500,
           },
           aggs: {
             timeseries: {