[APM] Optimize traces overview

x-pack/plugins/apm/common/utils/array_union_to_callable.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { ValuesType } from 'utility-types';
+
+// work around a TypeScript limitation described in https://stackoverflow.com/posts/49511416
+
+export const arrayUnionToCallable = <T extends any[] | undefined>(
+  array: T
+): Array<ValuesType<Exclude<T, undefined>>> => {
+  return array ?? [];
+};

x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx

@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import styled from 'styled-components';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { ITransactionGroup } from '../../../../server/lib/transaction_groups/transform';
+import { TransactionGroup } from '../../../../server/lib/transaction_groups/fetcher';
 import { fontSizes, truncate } from '../../../style/variables';
 import { asMillisecondDuration } from '../../../utils/formatters';
 import { EmptyMessage } from '../../shared/EmptyMessage';
@@ -24,28 +24,31 @@ const StyledTransactionLink = styled(TransactionDetailLink)`
 `;
 
 interface Props {
-  items: ITransactionGroup[];
+  items: TransactionGroup[];
   isLoading: boolean;
 }
 
-const traceListColumns: Array<ITableColumn<ITransactionGroup>> = [
+const traceListColumns: Array<ITableColumn<TransactionGroup>> = [
   {
     field: 'name',
     name: i18n.translate('xpack.apm.tracesTable.nameColumnLabel', {
       defaultMessage: 'Name',
     }),
     width: '40%',
     sortable: true,
-    render: (name: string, { sample }: ITransactionGroup) => (
-      <EuiToolTip id="trace-transaction-link-tooltip" content={name}>
+    render: (_: string, { sample }: TransactionGroup) => (
+      <EuiToolTip
+        id="trace-transaction-link-tooltip"
+        content={sample.transaction.name}
+      >
         <StyledTransactionLink
           serviceName={sample.service.name}
           transactionId={sample.transaction.id}
           traceId={sample.trace.id}
           transactionName={sample.transaction.name}
           transactionType={sample.transaction.type}
         >
-          {name}
+          {sample.transaction.name}
         </StyledTransactionLink>
       </EuiToolTip>
     ),

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

@@ -10,7 +10,7 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { ITransactionGroup } from '../../../../../server/lib/transaction_groups/transform';
+import { TransactionGroup } from '../../../../../server/lib/transaction_groups/fetcher';
 import { fontFamilyCode, truncate } from '../../../../style/variables';
 import { asDecimal, asMillisecondDuration } from '../../../../utils/formatters';
 import { ImpactBar } from '../../../shared/ImpactBar';
@@ -25,12 +25,12 @@ const TransactionNameLink = styled(TransactionDetailLink)`
 `;
 
 interface Props {
-  items: ITransactionGroup[];
+  items: TransactionGroup[];
   isLoading: boolean;
 }
 
 export function TransactionList({ items, isLoading }: Props) {
-  const columns: Array<ITableColumn<ITransactionGroup>> = useMemo(
+  const columns: Array<ITableColumn<TransactionGroup>> = useMemo(
     () => [
       {
         field: 'name',
@@ -39,11 +39,11 @@ export function TransactionList({ items, isLoading }: Props) {
         }),
         width: '50%',
         sortable: true,
-        render: (transactionName: string, { sample }: ITransactionGroup) => {
+        render: (_, { sample }: TransactionGroup) => {
           return (
             <EuiToolTip
               id="transaction-name-link-tooltip"
-              content={transactionName || NOT_AVAILABLE_LABEL}
+              content={sample.transaction.name || NOT_AVAILABLE_LABEL}
             >
               <TransactionNameLink
                 serviceName={sample.service.name}
@@ -52,7 +52,7 @@ export function TransactionList({ items, isLoading }: Props) {
                 transactionName={sample.transaction.name}
                 transactionType={sample.transaction.type}
               >
-                {transactionName || NOT_AVAILABLE_LABEL}
+                {sample.transaction.name || NOT_AVAILABLE_LABEL}
               </TransactionNameLink>
             </EuiToolTip>
           );

x-pack/plugins/apm/public/hooks/useTransactionList.ts

@@ -4,45 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useMemo } from 'react';
 import { IUrlParams } from '../context/UrlParamsContext/types';
 import { useUiFilters } from '../context/UrlParamsContext';
 import { useFetcher } from './useFetcher';
 import { APIReturnType } from '../services/rest/createCallApmApi';
 
-const getRelativeImpact = (
-  impact: number,
-  impactMin: number,
-  impactMax: number
-) =>
-  Math.max(
-    ((impact - impactMin) / Math.max(impactMax - impactMin, 1)) * 100,
-    1
-  );
-
 type TransactionsAPIResponse = APIReturnType<
   '/api/apm/services/{serviceName}/transaction_groups'
 >;
 
-function getWithRelativeImpact(items: TransactionsAPIResponse['items']) {
-  const impacts = items
-    .map(({ impact }) => impact)
-    .filter((impact) => impact !== null) as number[];
-
-  const impactMin = Math.min(...impacts);
-  const impactMax = Math.max(...impacts);
-
-  return items.map((item) => {
-    return {
-      ...item,
-      impactRelative:
-        item.impact !== null
-          ? getRelativeImpact(item.impact, impactMin, impactMax)
-          : null,
-    };
-  });
-}
-
 const DEFAULT_RESPONSE: TransactionsAPIResponse = {
   items: [],
   isAggregationAccurate: true,
@@ -72,16 +42,8 @@ export function useTransactionList(urlParams: IUrlParams) {
     [serviceName, start, end, transactionType, uiFilters]
   );
 
-  const memoizedData = useMemo(
-    () => ({
-      items: getWithRelativeImpact(data.items),
-      isAggregationAccurate: data.isAggregationAccurate,
-      bucketSize: data.bucketSize,
-    }),
-    [data]
-  );
   return {
-    data: memoizedData,
+    data,
     status,
     error,
   };

x-pack/plugins/apm/server/lib/alerts/register_transaction_duration_alert_type.ts

@@ -157,7 +157,7 @@ export function registerTransactionDurationAlertType({
 
       const { agg } = response.aggregations;
 
-      const value = 'values' in agg ? agg.values[0] : agg?.value;
+      const value = 'values' in agg ? Object.values(agg.values)[0] : agg?.value;
 
       if (value && value > alertParams.threshold * 1000) {
         const alertInstance = services.alertInstanceFactory(

x-pack/plugins/apm/server/lib/metrics/fetch_and_transform_metrics.ts

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Unionize } from 'utility-types';
+import { Unionize, Overwrite } from 'utility-types';
+import { ESSearchRequest } from '../../../typings/elasticsearch';
 import {
   Setup,
   SetupTimeRange,
@@ -17,14 +18,28 @@ import { getMetricsProjection } from '../../../common/projections/metrics';
 import { mergeProjection } from '../../../common/projections/util/merge_projection';
 import { AggregationOptionsByType } from '../../../typings/elasticsearch/aggregations';
 
-interface Aggs {
-  [key: string]: Unionize<{
-    min: AggregationOptionsByType['min'];
-    max: AggregationOptionsByType['max'];
-    sum: AggregationOptionsByType['sum'];
-    avg: AggregationOptionsByType['avg'];
-  }>;
-}
+type MetricsAggregationMap = Unionize<{
+  min: AggregationOptionsByType['min'];
+  max: AggregationOptionsByType['max'];
+  sum: AggregationOptionsByType['sum'];
+  avg: AggregationOptionsByType['avg'];
+}>;
+
+type Aggs = Record<string, MetricsAggregationMap>;
+
+export type GenericMetricsRequest = Overwrite<
+  ESSearchRequest,
+  {
+    body: {
+      aggs: {
+        timeseriesData: {
+          date_histogram: AggregationOptionsByType['date_histogram'];
+          aggs: Record<string, MetricsAggregationMap>;
+        };
+      } & Record<string, MetricsAggregationMap>;
+    };
+  }
+>;
 
 interface Filter {
   exists?: {
@@ -58,7 +73,7 @@ export async function fetchAndTransformMetrics<T extends Aggs>({
     serviceNodeName,
   });
 
-  const params = mergeProjection(projection, {
+  const params: GenericMetricsRequest = mergeProjection(projection, {
     body: {
       size: 0,
       query: {

x-pack/plugins/apm/server/lib/metrics/transform_metrics_chart.ts

@@ -4,40 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import theme from '@elastic/eui/dist/eui_theme_light.json';
-import { Unionize, Overwrite } from 'utility-types';
 import { ChartBase } from './types';
-import {
-  ESSearchResponse,
-  ESSearchRequest,
-} from '../../../typings/elasticsearch';
-import { AggregationOptionsByType } from '../../../typings/elasticsearch/aggregations';
+import { ESSearchResponse } from '../../../typings/elasticsearch';
 import { getVizColorForIndex } from '../../../common/viz_colors';
+import { GenericMetricsRequest } from './fetch_and_transform_metrics';
 
 export type GenericMetricsChart = ReturnType<
   typeof transformDataToMetricsChart
 >;
 
-interface MetricsAggregationMap {
-  min: AggregationOptionsByType['min'];
-  max: AggregationOptionsByType['max'];
-  sum: AggregationOptionsByType['sum'];
-  avg: AggregationOptionsByType['avg'];
-}
-
-type GenericMetricsRequest = Overwrite<
-  ESSearchRequest,
-  {
-    body: {
-      aggs: {
-        timeseriesData: {
-          date_histogram: AggregationOptionsByType['date_histogram'];
-          aggs: Record<string, Unionize<MetricsAggregationMap>>;
-        };
-      } & Record<string, Unionize<MetricsAggregationMap>>;
-    };
-  }
->;
-
 export function transformDataToMetricsChart(
   result: ESSearchResponse<unknown, GenericMetricsRequest>,
   chartBase: ChartBase
@@ -51,11 +26,7 @@ export function transformDataToMetricsChart(
     yUnit: chartBase.yUnit,
     noHits: hits.total.value === 0,
     series: Object.keys(chartBase.series).map((seriesKey, i) => {
-      const overallValue = (aggregations?.[seriesKey] as
-        | {
-            value: number | null;
-          }
-        | undefined)?.value;
+      const overallValue = aggregations?.[seriesKey]?.value;
 
       return {
         title: chartBase.series[seriesKey].title,
@@ -66,7 +37,7 @@ export function transformDataToMetricsChart(
         overallValue,
         data:
           timeseriesData?.buckets.map((bucket) => {
-            const { value } = bucket[seriesKey] as { value: number | null };
+            const { value } = bucket[seriesKey];
             const y = value === null || isNaN(value) ? null : value;
             return {
               x: bucket.key,