feat(portal): add metrics dashboard to destination overview

internal/portal/package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.3",
     "react-router-dom": "^6.28.0",
+    "recharts": "^3.7.0",
     "swr": "^2.2.5"
   },
   "devDependencies": {

internal/portal/src/common/MetricsChart/MetricsBreakdown.scss

@@ -0,0 +1,117 @@
+.metrics-breakdown {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: var(--spacing-4);
+  }
+
+  &__title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--colors-foreground-neutral);
+  }
+
+  &__subtitle {
+    font-weight: 400;
+    color: var(--colors-foreground-neutral-3);
+  }
+
+  &__rows {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+  }
+
+  &__dimension {
+    font-size: 13px;
+    font-family: var(--font-family-monospace);
+    color: var(--colors-foreground-neutral);
+    min-width: 100px;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__bar-container {
+    flex: 1;
+    height: 8px;
+    background: var(--colors-background-neutral-2);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__bar {
+    height: 100%;
+    background: var(--colors-dataviz-info);
+    border-radius: 4px;
+    transition: width 0.2s ease;
+  }
+
+  &__bar--success {
+    background: var(--colors-dataviz-success);
+  }
+
+  &__bar--error {
+    background: var(--colors-dataviz-error);
+  }
+
+  &__column-headers {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-3);
+    font-size: 11px;
+    color: var(--colors-foreground-neutral-3);
+    margin-bottom: var(--spacing-1);
+
+    span:first-child {
+      min-width: 40px;
+      text-align: right;
+    }
+
+    span:last-child {
+      min-width: 48px;
+      text-align: right;
+    }
+  }
+
+  &__count {
+    font-size: 13px;
+    font-family: var(--font-family-monospace);
+    color: var(--colors-foreground-neutral-2);
+    min-width: 40px;
+    text-align: right;
+  }
+
+  &__rate {
+    font-size: 13px;
+    color: var(--colors-foreground-neutral-3);
+    min-width: 48px;
+    text-align: right;
+  }
+
+  &__empty,
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    color: var(--colors-foreground-neutral-3);
+    font-size: 14px;
+  }
+}

internal/portal/src/common/MetricsChart/MetricsBreakdown.tsx

@@ -0,0 +1,134 @@
+import "./MetricsBreakdown.scss";
+
+import { Loading } from "../Icons";
+import { MetricsDataPoint } from "./useMetrics";
+
+const VARIANT_CSS_VARS: Record<string, string> = {
+  success: "var(--colors-dataviz-success)",
+  error: "var(--colors-dataviz-error)",
+};
+
+function BreakdownBar({ width, variant }: { width: number; variant?: string }) {
+  const bg = variant ? VARIANT_CSS_VARS[variant] : undefined;
+
+  return (
+    <div
+      className="metrics-breakdown__bar"
+      style={{
+        width: `${width}%`,
+        ...(bg ? { background: bg } : {}),
+      }}
+    />
+  );
+}
+
+interface BreakdownRow {
+  dimension: string;
+  count: number;
+  error_rate?: number;
+}
+
+interface MetricsBreakdownProps {
+  title: string;
+  subtitle?: string;
+  data: MetricsDataPoint[] | undefined;
+  dimensionKey: string;
+  loading: boolean;
+  error: boolean;
+  showErrorRate?: boolean;
+  barColor?: (dimension: string) => string | undefined;
+}
+
+function toRows(
+  data: MetricsDataPoint[] | undefined,
+  dimension_key: string,
+): BreakdownRow[] {
+  if (!data) return [];
+  return data
+    .map((d) => ({
+      dimension: d.dimensions[dimension_key] ?? "unknown",
+      count: d.metrics.count ?? 0,
+      error_rate: d.metrics.error_rate,
+    }))
+    .sort((a, b) => b.count - a.count);
+}
+
+const MetricsBreakdown: React.FC<MetricsBreakdownProps> = ({
+  title,
+  subtitle,
+  data,
+  dimensionKey,
+  loading,
+  error,
+  showErrorRate,
+  barColor,
+}) => {
+  const rows = toRows(data, dimensionKey);
+  const max_count = rows.reduce((max, r) => Math.max(max, r.count), 0);
+
+  const renderBody = () => {
+    if (loading) {
+      return (
+        <div className="metrics-breakdown__loading">
+          <Loading />
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="metrics-breakdown__empty">Failed to load metrics</div>
+      );
+    }
+
+    if (rows.length === 0) {
+      return <div className="metrics-breakdown__empty">No data</div>;
+    }
+
+    return (
+      <div className="metrics-breakdown__rows">
+        {rows.map((row) => (
+          <div key={row.dimension} className="metrics-breakdown__row">
+            <span className="metrics-breakdown__dimension">
+              {row.dimension}
+            </span>
+            <div className="metrics-breakdown__bar-container">
+              <BreakdownBar
+                width={max_count > 0 ? (row.count / max_count) * 100 : 0}
+                variant={barColor?.(row.dimension)}
+              />
+            </div>
+            <span className="metrics-breakdown__count">{row.count}</span>
+            {showErrorRate && row.error_rate != null && (
+              <span className="metrics-breakdown__rate">
+                {(row.error_rate * 100).toFixed(1)}%
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="metrics-breakdown">
+      <div className="metrics-breakdown__header">
+        <span className="metrics-breakdown__title">
+          {title}
+          {subtitle && (
+            <span className="metrics-breakdown__subtitle"> / {subtitle}</span>
+          )}
+        </span>
+        {showErrorRate && (
+          <div className="metrics-breakdown__column-headers">
+            <span>Count</span>
+            <span>Error %</span>
+          </div>
+        )}
+      </div>
+      {renderBody()}
+    </div>
+  );
+};
+
+export default MetricsBreakdown;

internal/portal/src/common/MetricsChart/MetricsChart.scss

@@ -0,0 +1,44 @@
+.metrics-chart {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__header {
+    margin-bottom: var(--spacing-4);
+  }
+
+  &__title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--colors-foreground-neutral);
+  }
+
+  &__subtitle {
+    font-weight: 400;
+    color: var(--colors-foreground-neutral-3);
+    text-transform: capitalize;
+  }
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  &__empty,
+  &__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--colors-foreground-neutral-3);
+    font-size: 14px;
+  }
+
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+}