const { useState: useStateTD, useMemo: useMemoTD } = React; const { IconArrowLeft, IconShare, IconChevDown, IconCopy, IconSearch, IconChevRight, IconChevsLeft, IconChevsRight, IconChevLeft, IconWaterfall, IconFire, IconGitGraph, IconJSON, IconTable, IconX, IconClock, } = window.Icons; const { TRACE_DETAIL } = window.Data; // ─── Span color palette (mirrors OO span coloring) const SPAN_COLOR = { blue: "#3D6EF0", purple: "#7A52E0", green: "#2E9D63", yellow: "#E0A53C", orange: "#E07B3C", red: "#DC4040", }; // ─── Header: back · trace name · timestamp · trace ID · spans · errors function TraceHeader({ trace, onBack }) { return (
{trace.name} {trace.startedAt} ({trace.ago})
Trace ID: {trace.traceId}
{trace.spanCount} spans 0 ? "var(--err-bg)" : "var(--err-bg)", color: "var(--err)", padding: "3px 9px", fontSize: 11, border: "1px solid rgba(220,64,64,.15)", }}>{trace.errors} errors
); } // ─── Sub-view tabs (Waterfall / Flame Graph / Trace Graph) function ViewTabs({ view, onView }) { const Tab = ({ k, Ico, label }) => { const active = view === k; return ( ); }; return (
); } // ─── Span row glyph (s/c/i/l badges from the screenshot) function KindBadge({ k }) { const palette = { l: { bg: "#E2EAFF", fg: "#3D6EF0" }, // load-generator (link/load) s: { bg: "#DEF2E5", fg: "#2E9D63" }, // server c: { bg: "#E9DEF5", fg: "#7A52E0" }, // client i: { bg: "#FCEFC9", fg: "#A77622" }, // internal }; const c = palette[k] || palette.s; return ( {k} ); } // ─── Waterfall view: span tree (left) + selected span detail (right) function WaterfallView({ trace }) { const [activeTab, setActiveTab] = useStateTD("logs"); const [bodyFormat, setBodyFormat] = useStateTD("json"); return (
{/* Left: span tree */}
Operation Name
{trace.spans.map((s, i) => { const isSelected = s.selected; return (
{ if (!isSelected) e.currentTarget.style.background = "var(--rail)"; }} onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = "transparent"; }}> {/* depth bracket */} {s.depth > 0 && ( )} {i === 0 ? "2" : "1"} {s.service} {s.op} {s.dot && } {s.status}
); })}
{/* Right: selected span detail */}
{/* Span name + stats */}
{trace.name}
◎} label="Service" value={trace.selectedSpan.service} /> } label="Duration" value={trace.selectedSpan.duration} /> } label="Start" value={trace.selectedSpan.start} />
{trace.selectedSpan.id}
{/* Sub-tabs */}
{["attributes","error","events","links","logs","metrics"].map(t => ( ))}
{/* Tab content */}
{activeTab === "logs" && } {activeTab === "attributes" && ( )} {activeTab !== "logs" && activeTab !== "attributes" && (
No {activeTab} recorded for this span.
)}
); } function SpanChip({ icon, label, value }) { return ( {icon} {label} {value} ); } // ─── Logs tab: associated logs with stream_name + body + severity function LogsTab({ trace }) { return (
timestamp (Asia/Calcutta)
stream_name
body
severity
{trace.associatedLogs.map((row, i) => (
{row.time}
{row.stream || "otel_demo"}
{row.body}
{row.sev}
))}
); } // ─── Attributes tab: JSON / Table viewer function AttributesTab({ attrs, format, onFormat }) { return (
{["json","table"].map(f => ( ))}
{format === "json" ? ( 
          {"{\n"}
          {Object.entries(attrs).map(([k, v], i, arr) => (
            
              {"  - "}{k}
              : 
              {v}
              {i < arr.length - 1 ? "," : ""}
              {"\n"}
            
          ))}
          {"}"}
) : (
{Object.entries(attrs).map(([k, v]) => (
{k} {v}
))}
)}
); } // ─── Flame Graph view — depth-based rows, full-width, hover-interactive function FlameGraphView({ trace }) { const [hoverId, setHoverId] = useStateTD(null); const [selectedId, setSelectedId] = useStateTD(() => { const sel = trace.spans.find(s => s.selected); return sel ? sel.id : trace.spans[0].id; }); const maxStart = Math.max(...trace.spans.map(s => s.start + s.dur)); const maxDepth = Math.max(...trace.spans.map(s => s.depth)); const ROW_H = 24; const W = 1600; const padL = 24, padR = 24, padT = 28; const chartW = W - padL - padR; const chartH = (maxDepth + 1) * ROW_H; const H = padT + chartH + 8; // 7 evenly-spaced ticks in microseconds const TICKS = Array.from({ length: 7 }, (_, i) => (maxStart * i) / 6); function fmt(us) { if (us >= 1000) return (us / 1000).toFixed(2) + "ms"; return Math.round(us) + "us"; } const selected = trace.spans.find(s => s.id === selectedId); const hovered = hoverId ? trace.spans.find(s => s.id === hoverId) : null; return (
{/* Header */}
{trace.spanCount} spans • {maxDepth + 1} depth
{/* Flame area + axis */}
{/* Axis labels */} {TICKS.map((t, i) => { const x = padL + (t / maxStart) * chartW; return ( {fmt(t)} ); })} {/* Spans */} {trace.spans.map(s => { const left = padL + (s.start / maxStart) * chartW; const width = Math.max(2, (s.dur / maxStart) * chartW); const y = padT + s.depth * ROW_H; const isSelected = s.id === selectedId; const isHovered = s.id === hoverId; const color = SPAN_COLOR[s.color] || SPAN_COLOR.yellow; const showLabel = width > 50; return ( setHoverId(s.id)} onMouseLeave={() => setHoverId(null)} onClick={() => setSelectedId(s.id)} style={{ cursor: "pointer" }}> {showLabel && ( {truncateForWidth(s.op, width)} )} ); })}
{/* Selected span detail */}
{selected.service}.{selected.op} {hovered && hovered.id !== selected.id && ( hovering: {hovered.service}.{hovered.op} )}
◎} label="Service" value={selected.service}/> } label="Duration" value={fmt(selected.dur)}/> } label="Start" value={fmt(selected.start)}/> ●} label="Status" value={selected.status}/> ↧} label="Depth" value={selected.depth}/> #} label="Kind" value={kindLabel(selected.kind)}/>
span_id: {spanIdFor(selected.id)}
trace_id: {trace.traceId}
parent_span_id: {parentSpanId(selected, trace)}
operation_name: {selected.op}
service.name: {selected.service}
span.kind: {kindLabel(selected.kind)}
status_code: OK
); } function truncateForWidth(text, widthPx) { // Roughly 7px per char const maxChars = Math.max(3, Math.floor(widthPx / 7) - 2); if (text.length <= maxChars) return text; return text.slice(0, maxChars - 1) + "…"; } function kindLabel(k) { return ({ l: "load-generator", s: "server", c: "client", i: "internal" })[k] || k; } function spanIdFor(id) { // deterministic-looking hex let h = 0; for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0; return ("00000000000000" + h.toString(16)).slice(-16); } function parentSpanId(s, trace) { if (s.depth === 0) return "—"; // pick last span with depth = s.depth - 1 whose range covers s.start const candidates = trace.spans.filter(p => p.depth === s.depth - 1 && p.start <= s.start && (p.start + p.dur) >= (s.start + s.dur)); const parent = candidates[candidates.length - 1] || trace.spans.find(p => p.depth === s.depth - 1); return parent ? spanIdFor(parent.id) : "—"; } // ─── Trace Graph view: directed graph (vertical flow) function TraceGraphView({ trace }) { // Build a simple service-call graph from spans (chain by depth pair) const W = 1100, H = 540; const nodes = [ { id: "lg", label: "load-generator", x: 80, y: 240, color: SPAN_COLOR.blue }, { id: "fp", label: "frontend-proxy", x: 260, y: 240, color: SPAN_COLOR.green }, { id: "fe", label: "frontend", x: 460, y: 240, color: SPAN_COLOR.purple }, { id: "pc", label: "product-catalog",x: 720, y: 120, color: SPAN_COLOR.green }, { id: "ct", label: "cart", x: 720, y: 240, color: SPAN_COLOR.green }, { id: "ad", label: "ad", x: 720, y: 360, color: SPAN_COLOR.green }, { id: "rd", label: "redis", x: 920, y: 240, color: SPAN_COLOR.red }, ]; const edges = [ ["lg", "fp", 19], ["fp", "fe", 19], ["fe", "pc", 6], ["fe", "ct", 8], ["fe", "ad", 3], ["ct", "rd", 8], ]; return (
7 services · {trace.spanCount} spans · showing service call graph
{/* Edges */} {edges.map(([a, b, cnt], i) => { const na = nodes.find(n => n.id === a); const nb = nodes.find(n => n.id === b); const mx = (na.x + nb.x) / 2; return ( {cnt} ); })} {/* Nodes */} {nodes.map(n => ( {n.label} ))}
); } // ─── Trace Detail main function TraceDetailScreen({ onBack }) { const trace = TRACE_DETAIL; const [view, setView] = useStateTD("waterfall"); return (
{view === "waterfall" && } {view === "flame" && } {view === "graph" && }
); } window.TraceDetailScreen = TraceDetailScreen;