[APM] Break down transaction table api removing the sparklines (elast…

…ic#88946)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dario Gieselaar <dario.gieselaar@elastic.co>

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

@@ -80,21 +80,21 @@ describe('ServiceOverview', () => {
         status: FETCH_STATUS.SUCCESS,
       });
 
+    /* eslint-disable @typescript-eslint/naming-convention */
     const calls = {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
       'GET /api/apm/services/{serviceName}/error_groups': {
         error_groups: [],
         total_error_groups: 0,
       },
-      'GET /api/apm/services/{serviceName}/transactions/groups/overview': {
+      'GET /api/apm/services/{serviceName}/transactions/groups/primary_statistics': {
         transactionGroups: [],
         totalTransactionGroups: 0,
         isAggregationAccurate: true,
       },
       'GET /api/apm/services/{serviceName}/dependencies': [],
-      // eslint-disable-next-line @typescript-eslint/naming-convention
       'GET /api/apm/services/{serviceName}/service_overview_instances': [],
     };
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     jest
       .spyOn(callApmApiModule, 'createCallApmApi')

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

@@ -0,0 +1,163 @@
+/*
+ * 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 { EuiBasicTableColumn } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { ValuesType } from 'utility-types';
+import {
+  asMillisecondDuration,
+  asPercent,
+  asTransactionRate,
+} from '../../../../../common/utils/formatters';
+import { APIReturnType } from '../../../../services/rest/createCallApmApi';
+import { px, unit } from '../../../../style/variables';
+import { SparkPlot } from '../../../shared/charts/spark_plot';
+import { ImpactBar } from '../../../shared/ImpactBar';
+import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
+import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
+
+type TransactionGroupPrimaryStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/primary_statistics'>;
+
+type ServiceTransactionGroupItem = ValuesType<
+  TransactionGroupPrimaryStatistics['transactionGroups']
+>;
+type TransactionGroupComparisonStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/comparison_statistics'>;
+
+function getLatencyAggregationTypeLabel(latencyAggregationType?: string) {
+  switch (latencyAggregationType) {
+    case 'avg':
+      return i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnLatency.avg',
+        { defaultMessage: 'Latency (avg.)' }
+      );
+
+    case 'p95':
+      return i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnLatency.p95',
+        { defaultMessage: 'Latency (95th)' }
+      );
+
+    case 'p99':
+      return i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnLatency.p99',
+        { defaultMessage: 'Latency (99th)' }
+      );
+  }
+}
+
+export function getColumns({
+  serviceName,
+  latencyAggregationType,
+  transactionGroupComparisonStatistics,
+}: {
+  serviceName: string;
+  latencyAggregationType?: string;
+  transactionGroupComparisonStatistics?: TransactionGroupComparisonStatistics;
+}): Array<EuiBasicTableColumn<ServiceTransactionGroupItem>> {
+  return [
+    {
+      field: 'name',
+      sortable: true,
+      name: i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnName',
+        { defaultMessage: 'Name' }
+      ),
+      render: (_, { name, transactionType: type }) => {
+        return (
+          <TruncateWithTooltip
+            text={name}
+            content={
+              <TransactionDetailLink
+                serviceName={serviceName}
+                transactionName={name}
+                transactionType={type}
+                latencyAggregationType={latencyAggregationType}
+              >
+                {name}
+              </TransactionDetailLink>
+            }
+          />
+        );
+      },
+    },
+    {
+      field: 'latency',
+      sortable: true,
+      name: getLatencyAggregationTypeLabel(latencyAggregationType),
+      width: px(unit * 10),
+      render: (_, { latency, name }) => {
+        const timeseries =
+          transactionGroupComparisonStatistics?.[name]?.latency;
+        return (
+          <SparkPlot
+            color="euiColorVis1"
+            compact
+            series={timeseries}
+            valueLabel={asMillisecondDuration(latency)}
+          />
+        );
+      },
+    },
+    {
+      field: 'throughput',
+      sortable: true,
+      name: i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnThroughput',
+        { defaultMessage: 'Throughput' }
+      ),
+      width: px(unit * 10),
+      render: (_, { throughput, name }) => {
+        const timeseries =
+          transactionGroupComparisonStatistics?.[name]?.throughput;
+        return (
+          <SparkPlot
+            color="euiColorVis0"
+            compact
+            series={timeseries}
+            valueLabel={asTransactionRate(throughput)}
+          />
+        );
+      },
+    },
+    {
+      field: 'errorRate',
+      sortable: true,
+      name: i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnErrorRate',
+        { defaultMessage: 'Error rate' }
+      ),
+      width: px(unit * 8),
+      render: (_, { errorRate, name }) => {
+        const timeseries =
+          transactionGroupComparisonStatistics?.[name]?.errorRate;
+        return (
+          <SparkPlot
+            color="euiColorVis7"
+            compact
+            series={timeseries}
+            valueLabel={asPercent(errorRate, 1)}
+          />
+        );
+      },
+    },
+    {
+      field: 'impact',
+      sortable: true,
+      name: i18n.translate(
+        'xpack.apm.serviceOverview.transactionsTableColumnImpact',
+        { defaultMessage: 'Impact' }
+      ),
+      width: px(unit * 5),
+      render: (_, { name }) => {
+        const impact =
+          transactionGroupComparisonStatistics?.[name]?.impact ?? 0;
+        return <ImpactBar value={impact} size="m" />;
+      },
+    },
+  ];
+}