mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-03 13:52:09 +03:00
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:
@@ -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 }}
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user