fix(dashboard): topology reflects connection health + clears finished requests (#7672)

The provider topology only lit nodes from live/recent traffic, so between
requests (and right after a restart) it went blank even though 50+ connections
were healthy — which reads as "lost providers". Two root causes:

1. Stuck-green latch: request.completed/request.failed are declared in the
   dashboard event map and consumed by useLiveRequests to drain the active-request
   set, but they were never emitted (only request.started was). A node's green
   "active" pulse therefore only cleared on a page reload, and accumulated over a
   session. Emit the terminal event from persistAttemptLogs — keyed by the same
   traceId as request.started — through a pure resolveRequestLifecycleEvent()
   helper (2xx/3xx + no error => completed, else failed).

2. No at-rest state: the map had nothing to show when idle. Colour each node by
   connection health (green connected / red error / grey idle) as a base layer,
   with live/recent traffic still taking precedence and pulsing brighter on top.
   edgeStyle() gains an optional trailing `healthy` param (static dim green) and
   StatusDot a `pulse` prop (static dot for connected-at-rest); both backward
   compatible. Legend "Active" -> "Connected".

Tests: resolveRequestLifecycleEvent success/failure/token-alias units, edgeStyle
healthy variant + precedence, and source guards for the emit wiring (traceId
threaded into persistAttemptLogs) and the health-colour wiring.

Co-authored-by: Diego Rodrigues de Sa e Souza <diegosouza.pw@gmail.com>
Co-authored-by: Diego Rodrigues de Sa e Souza <diegosouzapw@users.noreply.github.com>
This commit is contained in:
danscMax
2026-07-20 02:52:43 +03:00
committed by GitHub
parent 1b7209034e
commit 18a8da6df7
10 changed files with 359 additions and 31 deletions

View File

@@ -10,21 +10,34 @@ type StatusDotProps = {
* value used by ProviderTopology so the home pulse is pixel-identical.
*/
sizeClass?: string;
/**
* Whether to render the `animate-ping` halo. Defaults to true (live/active pulse).
* Pass false for a static presence dot — e.g. a connection that is healthy but has
* no in-flight traffic, which should read as "connected" without implying activity.
*/
pulse?: boolean;
};
/**
* The pulsing presence indicator extracted from `ProviderTopology` (U0). Renders
* an `animate-ping` halo plus a solid dot. Callers decide *whether* to show it
* (e.g. only when a node is active or errored); this component only draws it.
* The presence indicator extracted from `ProviderTopology` (U0). Renders an optional
* `animate-ping` halo plus a solid dot. Callers decide *whether* to show it (e.g. only
* when a node is active, healthy, or errored); this component only draws it.
*/
export function StatusDot({ color, error = false, sizeClass = "size-1.5" }: StatusDotProps) {
export function StatusDot({
color,
error = false,
sizeClass = "size-1.5",
pulse = true,
}: StatusDotProps) {
const dotColor = error ? FLOW_EDGE_COLORS.error : color;
return (
<span className={`relative flex ${sizeClass} shrink-0`}>
<span
className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-70"
style={{ backgroundColor: dotColor }}
/>
{pulse && (
<span
className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-70"
style={{ backgroundColor: dotColor }}
/>
)}
<span
className={`relative inline-flex rounded-full ${sizeClass}`}
style={{ backgroundColor: dotColor }}

View File

@@ -21,12 +21,22 @@ export interface FlowEdgeStyle {
/**
* Resolve the stroke style for an edge given its state. Precedence is
* error > active > last-used > idle — identical to the original ProviderTopology
* implementation (do not reorder without updating the home regression).
* error > active > last-used > healthy > idle — the first three are identical to the
* original ProviderTopology implementation (do not reorder without updating the home
* regression). `healthy` is the connection-health base state (a configured provider with
* a live/healthy connection but no in-flight traffic): a static, dimmer green that makes
* the map meaningful at rest, distinct from the animated `active` pulse. It is an optional
* trailing param so existing callers (Combo/Compression studios) stay unaffected.
*/
export function edgeStyle(active: boolean, last: boolean, error: boolean): FlowEdgeStyle {
export function edgeStyle(
active: boolean,
last: boolean,
error: boolean,
healthy = false
): FlowEdgeStyle {
if (error) return { stroke: FLOW_EDGE_COLORS.error, strokeWidth: 2, opacity: 0.85 };
if (active) return { stroke: FLOW_EDGE_COLORS.active, strokeWidth: 2.5, opacity: 1 };
if (last) return { stroke: FLOW_EDGE_COLORS.last, strokeWidth: 1.5, opacity: 0.6 };
if (healthy) return { stroke: FLOW_EDGE_COLORS.active, strokeWidth: 1.5, opacity: 0.4 };
return { stroke: FLOW_EDGE_COLORS.idle, strokeWidth: 1, opacity: 0.3 };
}