const { useState, useMemo } = React; const { IconSearch, IconChevDown, IconClock, IconRefresh, IconInfo, } = window.Icons; // ─── Service icon glyphs (rendered inside circular nodes) function SvcIcon({ kind, size = 16 }) { const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }; switch (kind) { case "money": return ; case "server": return ; case "globe": return ; case "pulse": return ; case "image": return ; case "speaker": return ; case "doc": return ; case "chip": return ; case "monitor": return ; case "cart": return ; case "mail": return ; case "truck": return ; case "sliders": return ; default: return ; } } // ─── Service map graph (horizontal layout, x,y in px) const SERVICES = [ // Sources (col 0, left side) { id: "accounting", label: "accounting", icon: "money", req: "5.3K", col: 0, row: 1.0, status: "ok" }, { id: "fraud-detection",label: "fraud-detection",icon: "server", req: "120", col: 0, row: 2.2, status: "critical" }, { id: "frontend-proxy", label: "frontend-proxy", icon: "globe", req: "98.7K", col: 1, row: 3.8, status: "ok" }, { id: "load-generator", label: "load-generator", icon: "pulse", req: "112.7K", col: 0, row: 4.4, status: "ok" }, { id: "image-provider", label: "image-provider", icon: "image", req: "8.6K", col: 0, row: 5.6, status: "ok" }, // flagd (downstream of multiple — show two instances) { id: "flagd-fraud", label: "flagd", icon: "sliders", req: "120", col: 1, row: 2.2, status: "ok", flagd: true }, { id: "flagd-load", label: "flagd", icon: "sliders", req: "14.0K", col: 1, row: 5.0, status: "ok", flagd: true }, // Frontend hub { id: "frontend", label: "frontend", icon: "monitor", req: "100.1K", col: 2, row: 4.0, status: "ok" }, // Downstream services from frontend (col 3 right side) { id: "ad", label: "ad", icon: "speaker", req: "8.5K", col: 3, row: 0.6, status: "ok" }, { id: "product-catalog",label: "product-catalog",icon: "doc", req: "82.5K", col: 3, row: 1.6, status: "ok" }, { id: "recommendation", label: "recommendation", icon: "chip", req: "7.8K", col: 3, row: 2.6, status: "ok" }, { id: "payment", label: "payment", icon: "money", req: "5.3K", col: 3, row: 3.7, status: "ok" }, { id: "cart", label: "cart", icon: "cart", req: "10.6K", col: 3, row: 4.5, status: "ok" }, { id: "email", label: "email", icon: "mail", req: "5.3K", col: 3, row: 5.3, status: "ok" }, { id: "checkout", label: "checkout", icon: "cart", req: "5.3K", col: 3, row: 6.0, status: "ok" }, { id: "shipping", label: "shipping", icon: "truck", req: "10.6K", col: 3, row: 6.8, status: "ok" }, { id: "currency", label: "currency", icon: "money", req: "14.6K", col: 3, row: 7.6, status: "ok" }, // Downstream of right-side services { id: "flagd-ad", label: "flagd", icon: "sliders", req: "120", col: 4, row: 0.6, status: "ok", flagd: true }, { id: "flagd-reco", label: "flagd", icon: "sliders", req: "120", col: 4, row: 2.6, status: "ok", flagd: true }, { id: "pc-2", label: "product-cat", icon: "doc", req: "7.8K", col: 4, row: 1.6, status: "ok" }, { id: "pc-3", label: "product-cat", icon: "doc", req: "9.3K", col: 4, row: 4.8, status: "ok" }, { id: "flagd-cart", label: "flagd", icon: "sliders", req: "5.3K", col: 4, row: 8.2, status: "ok", flagd: true }, { id: "cart-down", label: "cart", icon: "cart", req: "39.8K", col: 3, row: 8.2, status: "ok" }, ]; const EDGES = [ // accounting goes to virtual root only (no downstream) ["fraud-detection", "flagd-fraud"], ["load-generator", "frontend-proxy"], ["load-generator", "flagd-load"], ["frontend-proxy", "frontend"], ["frontend", "ad"], ["frontend", "product-catalog"], ["frontend", "recommendation"], ["frontend", "checkout"], ["frontend", "cart"], ["ad", "flagd-ad"], ["recommendation", "flagd-reco"], ["product-catalog", "pc-2"], ["checkout", "payment"], ["checkout", "email"], ["checkout", "shipping"], ["checkout", "currency"], ["checkout", "pc-3"], ["cart-down", "flagd-cart"], ]; // Service details (Recent Traces, error rate, etc.) const SERVICE_DETAILS = { "fraud-detection": { status: "critical", requestsMin: 120, rateChangeIn: 0, rateChangeOut: 120, errorRate: "100.00%", p50: "N/A", p95: "N/A", p99: "N/A", upstream: [], downstream: [{ name: "flagd", status: "critical" }], recentTraces: [ { id: "2d5cd943...70f5", dur: "3.10s", spans: 2, status: "ok", time: "10:36:06 PM" }, { id: "4d2e70b4...5940", dur: "93.46s", spans: 2, status: "ok", time: "10:34:52 PM" }, { id: "5595dfa3...d3e8", dur: "48.43s", spans: 2, status: "ok", time: "10:34:41 PM" }, { id: "c2e070c7...080b", dur: "12.84s", spans: 2, status: "ok", time: "10:33:18 PM" }, { id: "a73fc011...4ee2", dur: "8.21s", spans: 2, status: "ok", time: "10:32:55 PM" }, ], }, "frontend": { status: "ok", requestsMin: "100.1K", rateChangeIn: 100100, rateChangeOut: 100100, errorRate: "0.12%", p50: "48ms", p95: "210ms", p99: "640ms", upstream: [{ name: "frontend-proxy", status: "ok" }], downstream: [ { name: "ad", status: "ok" }, { name: "product-catalog", status: "ok" }, { name: "recommendation", status: "ok" }, { name: "checkout", status: "ok" }, { name: "cart", status: "ok" }, ], recentTraces: [ { id: "8f3e4b29...1c4a", dur: "182ms", spans: 8, status: "ok", time: "10:36:18 PM" }, { id: "ab73e119...88d2", dur: "94ms", spans: 6, status: "ok", time: "10:36:14 PM" }, { id: "ddef34a1...0091", dur: "421ms", spans: 9, status: "ok", time: "10:36:10 PM" }, ], }, "checkout": { status: "ok", requestsMin: "5.3K", rateChangeIn: 5300, rateChangeOut: 26500, errorRate: "0.04%", p50: "230ms", p95: "780ms", p99: "1.4s", upstream: [{ name: "frontend", status: "ok" }], downstream: [ { name: "payment", status: "ok" }, { name: "email", status: "ok" }, { name: "shipping", status: "ok" }, { name: "currency", status: "ok" }, ], recentTraces: [ { id: "f1ce7e2c...44a8", dur: "1.21s", spans: 12, status: "ok", time: "10:36:08 PM" }, { id: "0c4a9133...77fe", dur: "920ms", spans: 11, status: "ok", time: "10:36:01 PM" }, ], }, }; const DEFAULT_DETAIL = "fraud-detection"; const COL_X = [180, 380, 580, 780, 1010]; const ROW_H = 76; function nodeXY(svc) { return [COL_X[svc.col], 80 + svc.row * ROW_H]; } function edgePath(from, to) { const [x1, y1] = nodeXY(from); const [x2, y2] = nodeXY(to); const mx = (x1 + x2) / 2; return `M${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`; } function ServiceNode({ svc, selected, onClick }) { const [x, y] = nodeXY(svc); const ringColor = svc.status === "critical" ? "var(--err)" : svc.flagd ? "var(--warn)" : "var(--ok)"; const isPlaceholder = false; return ( onClick(svc.id)}> {selected && ( )} {svc.label} {svc.req} req ); } function ServiceMap({ selected, onSelect }) { const W = 1200, H = 740; return ( ); } // ─── Detail panel function DetailPanel({ serviceId, onClose, onOpenTrace }) { const svc = SERVICES.find(s => s.id === serviceId); const d = SERVICE_DETAILS[serviceId] || SERVICE_DETAILS[DEFAULT_DETAIL]; if (!svc) return null; const isCrit = d.status === "critical"; return ( ); } function Stat({ label, value, unit, accent, crit, small, icon }) { return (

{label && ( {crit && "⚠ "}{label}{accent && ":"} )}

{icon === "in" && →} {value} {unit && {unit}} {icon === "out" && →}

); } function Section({ title, children }) { return (

{title}

{children}

); } function DepRow({ name, status }) { const isCrit = status === "critical"; return (

{name}

{isCrit ? "Critical" : "OK"}

); } function TraceRow({ id, dur, spans, status, time, onOpen }) { return (

{ if (onOpen) e.currentTarget.style.background = "var(--accent-bg)"; }} onMouseLeave={e => { if (onOpen) e.currentTarget.style.background = "var(--canvas)"; }}>

{id} OK

{dur} {spans} spans

{time}

); } // ─── Traces toolbar function TracesToolbar({ view, onView, layout, onLayout }) { return (

{/* Tree/Graph toggle */}

{["tree", "graph"].map(k => ( ))}

); } // ─── Main function TracesScreen({ onOpenTrace }) { const [selected, setSelected] = useState(DEFAULT_DETAIL); const [view, setView] = useState("tree"); const [layout, setLayout] = useState("Horizontal"); return (

{selected && setSelected(null)} onOpenTrace={onOpenTrace} />}

); } window.TracesScreen = TracesScreen;