feat: batch destination metrics requests in portal list view

internal/portal/src/common/MetricsChart/useMetrics.ts

@@ -137,3 +137,85 @@ export function useMetrics({
 
   return { data, error, isLoading };
 }
+
+export function useBatchedMetrics({
+  measures,
+  destinationIds,
+  timeframe,
+  filters,
+  granularity: granularityOverride,
+}: {
+  measures: string[];
+  destinationIds: string[];
+  timeframe: Timeframe;
+  filters?: Record<string, string>;
+  granularity?: string;
+}) {
+  const apiClient = useContext(ApiContext);
+
+  const measuresKey = measures.join(",");
+  const filtersKey = filters
+    ? Object.entries(filters)
+        .map(([k, v]) => `${k}=${v}`)
+        .join(",")
+    : "";
+  const idsKey = [...destinationIds].sort().join(",");
+
+  const url = useMemo(() => {
+    if (destinationIds.length === 0) return null;
+
+    const { start, end } = getDateRange(timeframe);
+    const params = new URLSearchParams();
+    params.set("time[start]", start);
+    params.set("time[end]", end);
+
+    for (const m of measures) {
+      params.append("measures[]", m);
+    }
+
+    const sortedIds = [...destinationIds].sort();
+    for (const id of sortedIds) {
+      params.append("filters[destination_id][]", id);
+    }
+
+    params.append("dimensions[]", "destination_id");
+
+    if (filters) {
+      for (const [k, v] of Object.entries(filters)) {
+        params.set(`filters[${k}]`, v);
+      }
+    }
+
+    params.set(
+      "granularity",
+      granularityOverride ?? getGranularity(timeframe),
+    );
+
+    return `metrics/attempts?${params.toString()}`;
+  }, [idsKey, measuresKey, filtersKey, granularityOverride, timeframe]);
+
+  const { data, error, isLoading } = useSWR<MetricsResponse>(
+    url,
+    (path: string) => apiClient.fetchRoot(path),
+    {
+      refreshInterval: 60_000,
+      revalidateOnFocus: false,
+    },
+  );
+
+  const grouped = useMemo(() => {
+    if (!data) return undefined;
+
+    const result: Record<string, MetricsDataPoint[]> = {};
+    for (const point of data.data) {
+      const destId = point.dimensions.destination_id;
+      if (!result[destId]) {
+        result[destId] = [];
+      }
+      result[destId].push(point);
+    }
+    return result;
+  }, [data]);
+
+  return { data: grouped, error, isLoading };
+}

internal/portal/src/scenes/Destination/DestinationMetrics.tsx

@@ -61,7 +61,7 @@ const DestinationMetrics: React.FC<DestinationMetricsProps> = ({
     measures: ["count"],
     destinationId: destination.id,
     timeframe,
-    filters: { attempt_number: "0", manual: "false" },
+    filters: { attempt_number: "1", manual: "false" },
   });
 
   const delivery = useMetrics({

internal/portal/src/scenes/DestinationsList/DestinationEventsCell.tsx

@@ -1,8 +1,9 @@
 import Sparkline from "../../common/Sparkline/Sparkline";
-import { useMetrics } from "../../common/MetricsChart/useMetrics";
+import { MetricsDataPoint } from "../../common/MetricsChart/useMetrics";
 
 interface DestinationEventsCellProps {
-  destinationId: string;
+  metricsData?: MetricsDataPoint[];
+  isLoading: boolean;
 }
 
 function formatCount(n: number): string {
@@ -12,21 +13,14 @@ function formatCount(n: number): string {
 }
 
 const DestinationEventsCell: React.FC<DestinationEventsCellProps> = ({
-  destinationId,
+  metricsData,
+  isLoading,
 }) => {
-  const { data, isLoading } = useMetrics({
-    measures: ["successful_count", "failed_count"],
-    destinationId,
-    timeframe: "24h",
-    granularity: "4h",
-    filters: { attempt_number: "0", manual: "false" },
-  });
-
-  if (isLoading || !data) {
+  if (isLoading || !metricsData) {
     return <span className="histogram-cell__loading"></span>;
   }
 
-  const points = data.data.map((d) => ({
+  const points = metricsData.map((d) => ({
     successful: d.metrics.successful_count ?? 0,
     failed: d.metrics.failed_count ?? 0,
   }));

internal/portal/src/scenes/DestinationsList/DestinationList.tsx

@@ -1,13 +1,14 @@
 import "./DestinationList.scss";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import useSWR from "swr";
 
 import Badge from "../../common/Badge/Badge";
 import Button from "../../common/Button/Button";
 import { Checkbox } from "../../common/Checkbox/Checkbox";
 import Dropdown from "../../common/Dropdown/Dropdown";
 import { AddIcon, FilterIcon, Loading } from "../../common/Icons";
+import { useBatchedMetrics } from "../../common/MetricsChart/useMetrics";
 import SearchInput from "../../common/SearchInput/SearchInput";
 import Table from "../../common/Table/Table";
 import Tooltip from "../../common/Tooltip/Tooltip";
@@ -20,6 +21,20 @@ import DestinationEventsCell from "./DestinationEventsCell";
 const DestinationList: React.FC = () => {
   const { data: destinations } = useSWR<Destination[]>("destinations");
   const destination_types = useDestinationTypes();
+
+  const destinationIds = useMemo(
+    () => destinations?.map((d) => d.id) ?? [],
+    [destinations],
+  );
+  const { data: batchedMetrics, isLoading: metricsLoading } =
+    useBatchedMetrics({
+      measures: ["successful_count", "failed_count"],
+      destinationIds,
+      timeframe: "24h",
+      granularity: "4h",
+      filters: { attempt_number: "1", manual: "false" },
+    });
+
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedStatus, setSelectedStatus] = useState<Record<string, boolean>>(
     {},
@@ -122,7 +137,10 @@ const DestinationList: React.FC = () => {
         ) : (
           <Badge text="Active" success />
         ),
-        <DestinationEventsCell destinationId={destination.id} />,
+        <DestinationEventsCell
+          metricsData={batchedMetrics?.[destination.id]}
+          isLoading={metricsLoading}
+        />,
       ].filter((entry) => entry !== null),
       link: `/destinations/${destination.id}`,
     })) || [];