[APM] Breakdown Top dependencies API

x-pack/solutions/observability/plugins/apm/common/connections.ts

@@ -36,19 +36,19 @@ export type Node = ServiceNode | DependencyNode;
 export interface ConnectionStats {
   latency: {
     value: number | null;
-    timeseries: Coordinate[];
+    timeseries?: Coordinate[];
   };
   throughput: {
     value: number | null;
-    timeseries: Coordinate[];
+    timeseries?: Coordinate[];
   };
   errorRate: {
     value: number | null;
-    timeseries: Coordinate[];
+    timeseries?: Coordinate[];
   };
   totalTime: {
     value: number | null;
-    timeseries: Coordinate[];
+    timeseries?: Coordinate[];
   };
 }
 

x-pack/solutions/observability/plugins/apm/public/components/app/dependencies_inventory/dependencies_inventory_table/index.tsx

@@ -4,26 +4,45 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import { METRIC_TYPE } from '@kbn/analytics';
-import { i18n } from '@kbn/i18n';
-import React, { useEffect } from 'react';
 import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { useUiTracker } from '@kbn/observability-shared-plugin/public';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { usePerformanceContext } from '@kbn/ebt-tools';
-import { isTimeComparison } from '../../../shared/time_comparison/get_comparison_options';
-import { getNodeName, NodeType } from '../../../../../common/connections';
+import { i18n } from '@kbn/i18n';
+import { useUiTracker } from '@kbn/observability-shared-plugin/public';
+import { orderBy } from 'lodash';
+import React, { useEffect, useMemo } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { NodeType, getNodeName } from '../../../../../common/connections';
 import { useApmParams } from '../../../../hooks/use_apm_params';
-import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
+import { FETCH_STATUS, isPending, useFetcher } from '../../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../../hooks/use_time_range';
+import type { DependenciesItem } from '../../../shared/dependencies_table';
+import {
+  DependenciesTable,
+  INITIAL_SORTING_FIELD,
+  INITIAL_SORTING_DIRECTION,
+} from '../../../shared/dependencies_table';
 import { DependencyLink } from '../../../shared/links/dependency_link';
-import { DependenciesTable } from '../../../shared/dependencies_table';
+import { isTimeComparison } from '../../../shared/time_comparison/get_comparison_options';
 import { RandomSamplerBadge } from '../random_sampler_badge';
 
+const INITIAL_PAGE_SIZE = 25;
+
 export function DependenciesInventoryTable() {
   const {
-    query: { rangeFrom, rangeTo, environment, kuery, comparisonEnabled, offset },
+    query: {
+      rangeFrom,
+      rangeTo,
+      environment,
+      kuery,
+      comparisonEnabled,
+      offset,
+      page = 0,
+      pageSize = INITIAL_PAGE_SIZE,
+      sortDirection = INITIAL_SORTING_DIRECTION,
+      sortField = INITIAL_SORTING_FIELD,
+    },
   } = useApmParams('/dependencies/inventory');
   const { onPageReady } = usePerformanceContext();
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
@@ -38,19 +57,63 @@ export function DependenciesInventoryTable() {
       }
 
       return callApmApi('GET /internal/apm/dependencies/top_dependencies', {
-        params: {
-          query: {
-            start,
-            end,
-            environment,
-            numBuckets: 8,
-            offset: comparisonEnabled && isTimeComparison(offset) ? offset : undefined,
-            kuery,
-          },
-        },
+        params: { query: { start, end, environment, numBuckets: 8, kuery } },
+      }).then((response) => {
+        return {
+          ...response,
+          requestId: uuidv4(),
+        };
       });
     },
-    [start, end, environment, offset, kuery, comparisonEnabled]
+    [start, end, environment, kuery]
+  );
+
+  const visibleDependenciesNames = useMemo(
+    () =>
+      data?.dependencies
+        ? orderBy(
+            data.dependencies.map((item) => ({
+              name: getNodeName(item.location),
+              impact: item.currentStats.impact,
+              latency: item.currentStats.latency.value,
+              throughput: item.currentStats.throughput.value,
+              failureRate: item.currentStats.errorRate.value,
+            })),
+            sortField,
+            sortDirection
+          )
+            .slice(page * pageSize, (page + 1) * pageSize)
+            .map(({ name }) => name)
+            .sort()
+        : undefined,
+    [data?.dependencies, page, pageSize, sortDirection, sortField]
+  );
+
+  const { data: timeseriesData, status: timeseriesStatus } = useFetcher(
+    (callApmApi) => {
+      if (data?.requestId && visibleDependenciesNames?.length) {
+        return callApmApi('POST /internal/apm/dependencies/top_dependencies/statistics', {
+          params: {
+            query: {
+              start,
+              end,
+              environment,
+              numBuckets: 8,
+              offset: comparisonEnabled && isTimeComparison(offset) ? offset : undefined,
+              kuery,
+            },
+            body: {
+              dependencyNames: JSON.stringify(visibleDependenciesNames),
+            },
+          },
+        });
+      }
+    },
+    // Disables exhaustive deps because the statistics api must only be called when the rendered items changed or when comparison is toggled or changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data?.requestId, visibleDependenciesNames, comparisonEnabled, offset],
+    // Do not invalidate this API call when the refresh button is clicked
+    { skipTimeRangeRefreshUpdate: true }
   );
 
   useEffect(() => {
@@ -66,46 +129,91 @@ export function DependenciesInventoryTable() {
     }
   }, [status, onPageReady, rangeFrom, rangeTo]);
 
-  const dependencies =
-    data?.dependencies.map((dependency) => {
-      const { location } = dependency;
-      const name = getNodeName(location);
-
-      if (location.type !== NodeType.dependency) {
-        throw new Error('Expected a dependency node');
-      }
-      const link = (
-        <DependencyLink
-          type={location.spanType}
-          subtype={location.spanSubtype}
-          query={{
-            dependencyName: location.dependencyName,
-            comparisonEnabled,
-            offset,
-            environment,
-            kuery,
-            rangeFrom,
-            rangeTo,
-          }}
-          onClick={() => {
-            trackEvent({
-              app: 'apm',
-              metricType: METRIC_TYPE.CLICK,
-              metric: 'dependencies_inventory_to_dependency_detail',
-            });
-          }}
-        />
-      );
+  const dependencies: DependenciesItem[] = useMemo(
+    () =>
+      data?.dependencies.map((dependency) => {
+        const { location } = dependency;
+        const name = getNodeName(location);
 
-      return {
-        name,
-        currentStats: dependency.currentStats,
-        previousStats: dependency.previousStats,
-        link,
-      };
-    }) ?? [];
+        if (location.type !== NodeType.dependency) {
+          throw new Error('Expected a dependency node');
+        }
+        const link = (
+          <DependencyLink
+            type={location.spanType}
+            subtype={location.spanSubtype}
+            query={{
+              dependencyName: location.dependencyName,
+              comparisonEnabled,
+              offset,
+              environment,
+              kuery,
+              rangeFrom,
+              rangeTo,
+            }}
+            onClick={() => {
+              trackEvent({
+                app: 'apm',
+                metricType: METRIC_TYPE.CLICK,
+                metric: 'dependencies_inventory_to_dependency_detail',
+              });
+            }}
+          />
+        );
 
+        return {
+          name,
+          currentStats: {
+            impact: dependency.currentStats.impact,
+            totalTime: { value: dependency.currentStats.totalTime.value },
+            latency: {
+              value: dependency.currentStats.latency.value,
+              timeseries: timeseriesData?.currentTimeseries[name]?.latency,
+            },
+            throughput: {
+              value: dependency.currentStats.throughput.value,
+              timeseries: timeseriesData?.currentTimeseries[name]?.throughput,
+            },
+            errorRate: {
+              value: dependency.currentStats.errorRate.value,
+              timeseries: timeseriesData?.currentTimeseries[name]?.errorRate,
+            },
+          },
+          previousStats: {
+            impact: dependency.previousStats?.impact ?? 0,
+            totalTime: { value: dependency.previousStats?.totalTime.value ?? null },
+            latency: {
+              value: dependency.previousStats?.latency.value ?? null,
+              timeseries: timeseriesData?.comparisonTimeseries?.[name]?.latency,
+            },
+            throughput: {
+              value: dependency.previousStats?.throughput.value ?? null,
+              timeseries: timeseriesData?.comparisonTimeseries?.[name]?.throughput,
+            },
+            errorRate: {
+              value: dependency.previousStats?.errorRate.value ?? null,
+              timeseries: timeseriesData?.comparisonTimeseries?.[name]?.errorRate,
+            },
+          },
+          link,
+        };
+      }) ?? [],
+    [
+      comparisonEnabled,
+      data?.dependencies,
+      environment,
+      kuery,
+      offset,
+      rangeFrom,
+      rangeTo,
+      timeseriesData?.comparisonTimeseries,
+      timeseriesData?.currentTimeseries,
+      trackEvent,
+    ]
+  );
   const showRandomSamplerBadge = data?.sampled && status === FETCH_STATUS.SUCCESS;
+  const fetchingStatus =
+    isPending(status) || isPending(timeseriesStatus) ? FETCH_STATUS.LOADING : FETCH_STATUS.SUCCESS;
 
   return (
     <>
@@ -123,9 +231,9 @@ export function DependenciesInventoryTable() {
         nameColumnTitle={i18n.translate('xpack.apm.dependenciesInventory.dependencyTableColumn', {
           defaultMessage: 'Dependency',
         })}
-        status={status}
+        status={fetchingStatus}
         compact={false}
-        initialPageSize={25}
+        initialPageSize={INITIAL_PAGE_SIZE}
       />
     </>
   );

x-pack/solutions/observability/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx

@@ -28,17 +28,17 @@ export interface SpanMetricGroup {
   impact: number | null;
   currentStats:
     | {
-        latency: Coordinate[];
-        throughput: Coordinate[];
-        failureRate: Coordinate[];
+        latency?: Coordinate[];
+        throughput?: Coordinate[];
+        failureRate?: Coordinate[];
       }
     | undefined;
   previousStats:
     | {
-        latency: Coordinate[];
-        throughput: Coordinate[];
-        failureRate: Coordinate[];
-        impact: number;
+        latency?: Coordinate[];
+        throughput?: Coordinate[];
+        failureRate?: Coordinate[];
+        impact?: number;
       }
     | undefined;
 }