new metrics api

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;
 }
@@ -84,9 +86,11 @@ function getLatencyAggregationTypeLabel(latencyAggregationType?: string) {
 function getColumns({
   serviceName,
   latencyAggregationType,
+  transactionsMetricsData,
 }: {
   serviceName: string;
   latencyAggregationType?: string;
+  transactionsMetricsData: TransactionGroupMetrics;
 }): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
   return [
     {
@@ -119,12 +123,15 @@ function getColumns({
       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)}
           />
         );
@@ -137,12 +144,15 @@ function getColumns({
         { 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)}
           />
         );
@@ -157,12 +167,15 @@ function getColumns({
         }
       ),
       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)}
           />
         );
@@ -265,7 +278,47 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     tableOptions: { pageIndex, sort },
   } = data;
 
-  const columns = getColumns({ serviceName, latencyAggregationType });
+  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(),
+          },
+        },
+      });
+    }
+  }, [
+    serviceName,
+    start,
+    end,
+    uiFilters,
+    transactionType,
+    latencyAggregationType,
+    transactionNames,
+  ]);
+
+  const columns = getColumns({
+    serviceName,
+    latencyAggregationType,
+    transactionsMetricsData,
+  });
 
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
@@ -319,7 +372,10 @@ export function ServiceOverviewTransactionsTable(props: Props) {
                   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

@@ -82,7 +82,7 @@ export async function getTimeseriesDataForTransactionGroups({
         transaction_groups: {
           terms: {
             field: TRANSACTION_NAME,
-            // size, TODO: check it
+            size: 500,
           },
           aggs: {
             timeseries: {

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

@@ -6,12 +6,10 @@
 
 import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
 import { Setup, SetupTimeRange } from '../../helpers/setup_request';
-import { getTimeseriesDataForTransactionGroups } from './get_timeseries_data_for_transaction_groups';
 import {
   getTransactionGroupsForPage,
   ServiceOverviewTransactionGroupSortField,
 } from './get_transaction_groups_for_page';
-import { mergeTransactionGroupData } from './merge_transaction_group_data';
 
 export async function getServiceTransactionGroups({
   serviceName,
@@ -51,29 +49,16 @@ export async function getServiceTransactionGroups({
     latencyAggregationType,
   });
 
-  const transactionNames = transactionGroups.map((group) => group.name);
-
-  const timeseriesData = await getTimeseriesDataForTransactionGroups({
-    apmEventClient,
-    start,
-    end,
-    esFilter,
-    numBuckets,
-    searchAggregatedTransactions,
-    serviceName,
-    transactionNames,
-    transactionType,
-    latencyAggregationType,
-  });
-
   return {
-    transactionGroups: mergeTransactionGroupData({
-      transactionGroups,
-      timeseriesData,
-      start,
-      end,
-      latencyAggregationType,
-      transactionType,
+    transactionGroups: transactionGroups.map((transactionGroup) => {
+      return {
+        name: transactionGroup.name,
+        transactionType,
+        latency: { value: transactionGroup.latency },
+        throughput: { value: transactionGroup.throughput },
+        errorRate: { value: transactionGroup.errorRate },
+        impact: transactionGroup.impact,
+      };
     }),
     totalTransactionGroups,
     isAggregationAccurate,