fix: align all pages with design system mocks — stat cards, tables, detail panels

Dashboard: correct stat card labels (Exchanges/Success Rate/Errors/Throughput/Latency p99), add detail text, trends, sparklines on all cards, Agent column, LIVE badge, expanded detail panel with Agent/Correlation/Timestamp, "Open full details" link. Agent Health: per-group meta (TPS/routes) in GroupCard header, proper HTML table with column headers for instance list. Agent Instance: stat card detail props (heap info, start date), scope trail with inline status/version/routes badges. Routes: 5th In-Flight stat card, enriched stat card props (detail/trend/sparkline), SLA threshold line on latency chart. Exchange Detail: Agent stat box in header. Also: vite proxy CORS fix, cross-env dev scripts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-23 20:28:56 +01:00
parent 752d7ec0e7
commit 4572230c9c
12 changed files with 466 additions and 73 deletions
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -82,3 +82,19 @@
  flex-shrink: 0;
  padding-top: 2px;
 }
+
+.openDetailLink {
+  display: inline-block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent, #c6820e);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: none;
+}
+
+.openDetailLink:hover {
+  text-decoration: underline;
+}
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -1,20 +1,28 @@
 import { useState, useMemo } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import {
-  StatCard, StatusDot, Badge, MonoText, Sparkline,
+  StatCard, StatusDot, Badge, MonoText,
  DataTable, DetailPanel, ProcessorTimeline, RouteFlow,
-  Alert, Collapsible, CodeBlock,
+  Alert, Collapsible, CodeBlock, ShortcutsBar,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useSearchExecutions, useExecutionStats, useStatsTimeseries, useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions';
+import { useDiagramByRoute } from '../../api/queries/diagrams';
 import { useGlobalFilters } from '@cameleer/design-system';
 import type { ExecutionSummary } from '../../api/types';
+import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
 import styles from './Dashboard.module.css';

 interface Row extends ExecutionSummary { id: string }

+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
 export default function Dashboard() {
  const { appId, routeId } = useParams();
+  const navigate = useNavigate();
  const { timeRange } = useGlobalFilters();
  const timeFrom = timeRange.start.toISOString();
  const timeTo = timeRange.end.toISOString();
@@ -35,29 +43,58 @@ export default function Dashboard() {
  }, true);
  const { data: detail } = useExecutionDetail(selectedId);
  const { data: snapshot } = useProcessorSnapshot(selectedId, processorIdx);
+  const { data: diagram } = useDiagramByRoute(detail?.groupName, detail?.routeId);

  const rows: Row[] = useMemo(() =>
    (searchResult?.data || []).map((e: ExecutionSummary) => ({ ...e, id: e.executionId })),
    [searchResult],
  );

-  const sparklineData = useMemo(() =>
-    (timeseries?.buckets || []).map((b: any) => b.totalCount as number),
-    [timeseries],
-  );
+  const totalCount = stats?.totalCount ?? 0;
+  const failedCount = stats?.failedCount ?? 0;
+  const successRate = totalCount > 0 ? ((totalCount - failedCount) / totalCount * 100) : 100;
+  const throughput = timeWindowSeconds > 0 ? totalCount / timeWindowSeconds : 0;
+
+  const sparkExchanges = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.totalCount as number), [timeseries]);
+  const sparkErrors = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.failedCount as number), [timeseries]);
+  const sparkLatency = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => b.p99DurationMs as number), [timeseries]);
+  const sparkThroughput = useMemo(() =>
+    (timeseries?.buckets || []).map((b: any) => {
+      const bucketSeconds = timeWindowSeconds / Math.max((timeseries?.buckets || []).length, 1);
+      return bucketSeconds > 0 ? (b.totalCount as number) / bucketSeconds : 0;
+    }), [timeseries, timeWindowSeconds]);
+
+  const prevTotal = stats?.prevTotalCount ?? 0;
+  const prevFailed = stats?.prevFailedCount ?? 0;
+  const exchangeTrend = prevTotal > 0 ? ((totalCount - prevTotal) / prevTotal * 100) : 0;
+  const prevSuccessRate = prevTotal > 0 ? ((prevTotal - prevFailed) / prevTotal * 100) : 100;
+  const successRateDelta = successRate - prevSuccessRate;
+  const errorDelta = failedCount - prevFailed;

  const columns: Column<Row>[] = [
    {
      key: 'status', header: 'Status', width: '80px',
-      render: (v) => <StatusDot variant={v === 'COMPLETED' ? 'success' : v === 'FAILED' ? 'error' : 'running'} />,
+      render: (v, row) => (
+        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <StatusDot variant={v === 'COMPLETED' ? 'success' : v === 'FAILED' ? 'error' : 'running'} />
+          <MonoText size="xs">{v === 'COMPLETED' ? 'OK' : v === 'FAILED' ? 'ERR' : 'RUN'}</MonoText>
+        </span>
+      ),
    },
-    { key: 'routeId', header: 'Route', render: (v) => <MonoText size="sm">{String(v)}</MonoText> },
-    { key: 'groupName', header: 'App', render: (v) => <Badge label={String(v)} color="auto" /> },
-    { key: 'executionId', header: 'Exchange ID', render: (v) => <MonoText size="xs">{String(v).slice(0, 12)}</MonoText> },
-    { key: 'startTime', header: 'Started', sortable: true, render: (v) => new Date(v as string).toLocaleTimeString() },
+    { key: 'routeId', header: 'Route', sortable: true, render: (v) => <span>{String(v)}</span> },
+    { key: 'groupName', header: 'Application', sortable: true, render: (v) => <span>{String(v ?? '')}</span> },
+    { key: 'executionId', header: 'Exchange ID', sortable: true, render: (v) => <MonoText size="xs">{String(v)}</MonoText> },
+    { key: 'startTime', header: 'Started', sortable: true, render: (v) => <MonoText size="xs">{new Date(v as string).toISOString().replace('T', ' ').slice(0, 19)}</MonoText> },
    {
      key: 'durationMs', header: 'Duration', sortable: true,
-      render: (v) => `${v}ms`,
+      render: (v) => <MonoText size="sm">{formatDuration(v as number)}</MonoText>,
+    },
+    {
+      key: 'agentId', header: 'Agent',
+      render: (v) => v ? <Badge label={String(v)} color="auto" /> : null,
    },
  ];

@@ -67,23 +104,42 @@ export default function Dashboard() {
      content: (
        <>
          <div className={styles.panelSection}>
-            <div className={styles.panelSectionTitle}>Details</div>
+            <button
+              className={styles.openDetailLink}
+              onClick={() => navigate(`/exchanges/${detail.executionId}`)}
+            >
+              Open full details &#x2192;
+            </button>
+          </div>
+          <div className={styles.panelSection}>
+            <div className={styles.panelSectionTitle}>Overview</div>
            <div className={styles.overviewGrid}>
              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Exchange ID</span>
-                <MonoText size="sm">{detail.executionId}</MonoText>
+                <span className={styles.overviewLabel}>Status</span>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <StatusDot variant={detail.status === 'COMPLETED' ? 'success' : 'error'} />
+                  <span>{detail.status}</span>
+                </span>
              </div>
              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Status</span>
-                <Badge label={detail.status} color={detail.status === 'COMPLETED' ? 'success' : 'error'} />
+                <span className={styles.overviewLabel}>Duration</span>
+                <MonoText size="sm">{formatDuration(detail.durationMs)}</MonoText>
              </div>
              <div className={styles.overviewRow}>
                <span className={styles.overviewLabel}>Route</span>
                <span>{detail.routeId}</span>
              </div>
              <div className={styles.overviewRow}>
-                <span className={styles.overviewLabel}>Duration</span>
-                <span>{detail.durationMs}ms</span>
+                <span className={styles.overviewLabel}>Agent</span>
+                <MonoText size="sm">{detail.agentId ?? '—'}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Correlation</span>
+                <MonoText size="xs">{detail.correlationId ?? '—'}</MonoText>
+              </div>
+              <div className={styles.overviewRow}>
+                <span className={styles.overviewLabel}>Timestamp</span>
+                <MonoText size="xs">{detail.startTime ? new Date(detail.startTime).toISOString().replace('T', ' ').slice(0, 19) : '—'}</MonoText>
              </div>
            </div>
          </div>
@@ -118,42 +174,71 @@ export default function Dashboard() {
        ) : <div style={{ padding: '1rem' }}>No processor data</div>;
      })(),
    },
+    {
+      label: 'Route Flow', value: 'flow',
+      content: diagram ? (
+        <RouteFlow
+          nodes={mapDiagramToRouteNodes(
+            diagram.nodes || [],
+            detail.processors?.length ? detail.processors : (detail.children ?? [])
+          )}
+          onNodeClick={(_node, _i) => { /* optionally select processor */ }}
+        />
+      ) : <div style={{ padding: '1rem' }}>No diagram available</div>,
+    },
  ] : [];

  return (
    <div>
      <div className={styles.healthStrip}>
        <StatCard
-          label="Throughput"
-          value={timeWindowSeconds > 0 ? `${((stats?.totalCount ?? 0) / timeWindowSeconds).toFixed(2)} ex/s` : '0.00 ex/s'}
-          sparkline={sparklineData}
+          label="Exchanges"
+          value={totalCount.toLocaleString()}
+          detail={`${successRate.toFixed(1)}% success rate`}
+          trend={exchangeTrend > 0 ? 'up' : exchangeTrend < 0 ? 'down' : 'neutral'}
+          trendValue={exchangeTrend > 0 ? `+${exchangeTrend.toFixed(0)}%` : `${exchangeTrend.toFixed(0)}%`}
+          sparkline={sparkExchanges}
+          accent="amber"
        />
        <StatCard
-          label="Error Rate"
-          value={(stats?.totalCount ?? 0) > 0 ? `${((stats?.failedCount ?? 0) / stats!.totalCount * 100).toFixed(1)}%` : '0.0%'}
+          label="Success Rate"
+          value={`${successRate.toFixed(1)}%`}
+          detail={`${(totalCount - failedCount).toLocaleString()} ok / ${failedCount} error`}
+          trend={successRateDelta >= 0 ? 'up' : 'down'}
+          trendValue={`${successRateDelta >= 0 ? '+' : ''}${successRateDelta.toFixed(1)}%`}
+          accent="success"
+        />
+        <StatCard
+          label="Errors"
+          value={failedCount}
+          detail={`${failedCount} errors in selected period`}
+          trend={errorDelta > 0 ? 'up' : errorDelta < 0 ? 'down' : 'neutral'}
+          trendValue={errorDelta > 0 ? `+${errorDelta}` : `${errorDelta}`}
+          sparkline={sparkErrors}
          accent="error"
        />
        <StatCard
-          label="Avg Latency"
-          value={`${stats?.avgDurationMs ?? 0}ms`}
-        />
-        <StatCard
-          label="P99 Latency"
-          value={`${stats?.p99LatencyMs ?? 0}ms`}
-          accent="warning"
-        />
-        <StatCard
-          label="In-Flight"
-          value={stats?.activeCount ?? 0}
+          label="Throughput"
+          value={throughput.toFixed(1)}
+          detail={`${throughput.toFixed(1)} msg/s`}
+          sparkline={sparkThroughput}
          accent="running"
        />
+        <StatCard
+          label="Latency p99"
+          value={stats?.p99LatencyMs ?? 0}
+          detail={`${stats?.p99LatencyMs ?? 0}ms`}
+          sparkline={sparkLatency}
+          accent="warning"
+        />
      </div>

      <div className={styles.tableSection}>
        <div className={styles.tableHeader}>
          <span className={styles.tableTitle}>Recent Exchanges</span>
          <div className={styles.tableRight}>
-            <span className={styles.tableMeta}>{rows.length} results</span>
+            <span className={styles.tableMeta}>{rows.length} of {searchResult?.total ?? 0} exchanges</span>
+            <Badge label="LIVE" color="success" />
          </div>
        </div>
        <DataTable