// Shared right-side drawer + Source Details panel with multi-tab correlation const { useState: useStateD, useEffect: useEffectD, useMemo: useMemoD } = React; const { IconX, IconCopy, IconChevRight, IconChevDown, IconChevLeft, IconSearch, IconClock, IconWarnTri, IconJSON, IconTable, IconCaretRight, } = window.Icons; // ─── Generic right-side drawer function Drawer({ open, width = 1120, onClose, children, headerless = false }) { if (!open) return null; return (
{/* Scrim */}
{/* Panel */}
{children}
); } function DrawerHeader({ title, subtitle, onClose, right }) { return (
{title}
{subtitle &&
{subtitle}
}
{right}
); } // ─── Source Details drawer — multi-tab correlation // tabs: JSON · Table · Logs · Metrics · Traces (+ AI sparkle) function SourceDetailsDrawer({ open, source, onClose }) { const [tab, setTab] = useStateD("json"); useEffectD(() => { if (open) setTab("json"); }, [open, source]); if (!open || !source) return null; return (
{tab === "json" && } {tab === "table" && } {tab === "logs" && } {tab === "metrics" && } {tab === "traces" && }
); } function SDTabBar({ tab, onTab }) { const Tab = ({ k, label, ai }) => ( ); return (
); } // ─── JSON tab: render the source as colored JSON tree function SDJson({ source }) { return ( 
        {"{\n"}
        {Object.entries(source).map(([k, v], i, arr) => (
          
            {"  "}▾{" "}
            {k}
            : 
            
              {typeof v === "string" ? `${v}` : String(v)}
            
            {i < arr.length - 1 ? "," : ""}
            {"\n"}
          
        ))}
        {"}"}
); } // ─── Table tab: same data, table layout function SDTable({ source }) { return (
Field Value
{Object.entries(source).map(([k, v]) => (
{k} {String(v)}
))}
); } // ─── Logs tab: correlated logs (other rows from the seeded dataset) function SDLogs({ source }) { const allRows = (window.Data.LOG_ROWS_DEFAULT || []).slice(0, 14); return (
timestamp (Asia/Calcutta) stream_name body severity
{allRows.map((row, i) => { const body = row.source.body || JSON.stringify(row.source).slice(0, 80); const isErr = /ERROR|warn/i.test(body); return (
{row.date} {row.ts} otel_demo {body} {isErr ? "ERROR" : "INFO"}
); })}
); } // ─── Metrics tab: Infra/Network sub-tabs + selectable field list + chart grid const SD_METRIC_LIST = [ { key: "container_cpu_time", group: "infra", selected: true, max: 1.35, unit: "M" }, { key: "container_cpu_usage", group: "infra", selected: true, max: 0.15, unit: "" }, { key: "container_filesystem_available", group: "infra", selected: true, max: 18.54, unit: "GB" }, { key: "container_filesystem_capacity", group: "infra", selected: true, max: 46.57, unit: "GB" }, { key: "container_filesystem_usage", group: "infra", selected: true, max: 117.19, unit: "KB" }, { key: "container_memory_major_page_faults", group: "infra", selected: true, max: 250, unit: "" }, { key: "container_memory_page_faults", group: "infra" }, { key: "container_memory_rss", group: "infra" }, { key: "container_memory_usage", group: "infra" }, { key: "container_memory_working_set", group: "infra" }, { key: "k8s_container_ready", group: "infra" }, { key: "k8s_container_restarts", group: "infra" }, { key: "k8s_deployment_available", group: "infra" }, { key: "k8s_deployment_desired", group: "infra" }, { key: "k8s_pod_cpu_request_utilization", group: "infra" }, { key: "k8s_pod_cpu_time", group: "infra" }, { key: "k8s_pod_cpu_usage", group: "infra" }, { key: "k8s_pod_filesystem_available", group: "infra" }, { key: "k8s_pod_filesystem_capacity", group: "infra" }, { key: "k8s_pod_filesystem_usage", group: "infra" }, { key: "k8s_pod_memory_major_page_faults", group: "infra" }, { key: "k8s_pod_memory_page_faults", group: "infra" }, { key: "k8s_pod_memory_request_utilization", group: "infra" }, { key: "k8s_pod_memory_rss", group: "infra" }, { key: "k8s_pod_memory_usage", group: "infra" }, { key: "k8s_pod_memory_working_set", group: "infra" }, { key: "k8s_pod_phase", group: "infra" }, { key: "k8s_volume_available", group: "infra" }, { key: "k8s_volume_capacity", group: "infra" }, ]; function SDMetrics({ source }) { const [group, setGroup] = useStateD("infra"); const [selected, setSelected] = useStateD(() => new Set(SD_METRIC_LIST.filter(m => m.selected).map(m => m.key)) ); const filtered = SD_METRIC_LIST.filter(m => m.group === group); const drawn = filtered.filter(m => selected.has(m.key)); return (
{/* Field selector */}
{filtered.map(m => { const on = selected.has(m.key); return ( ); })}
{selected.size} of {filtered.length} selected
{/* Charts grid */}
{drawn.map(m => )}
{drawn.length === 0 && (
Select metrics on the left to chart them.
)}
); } // Deterministic series for SD metric card function sdSeries(seed, n, max) { let s = seed; const r = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; const out = []; let v = max * 0.6; for (let i = 0; i < n; i++) { v += (r() - 0.5) * max * 0.08; v = Math.max(max * 0.05, Math.min(max * 0.98, v)); out.push(v); } return out; } function MetricCardLite({ metric }) { const data = useMemoD(() => sdSeries(metric.key.length * 7, 60, metric.max || 100), [metric.key]); const [hoverIdx, setHoverIdx] = useStateD(null); const W = 260, H = 110; const padL = 4, padR = 4, padT = 6, padB = 18; const chartW = W - padL - padR; const chartH = H - padT - padB; const max = Math.max(...data) * 1.05; const min = 0; const stepX = chartW / (data.length - 1); const pts = data.map((v, i) => [padL + i * stepX, padT + chartH - (v / max) * chartH]); const path = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" "); const area = `${path} L ${padL + chartW} ${padT + chartH} L ${padL} ${padT + chartH} Z`; const yTicks = 5; const tooltip = hoverIdx !== null ? data[hoverIdx] : null; const hoverX = hoverIdx !== null ? pts[hoverIdx][0] : 0; const hoverY = hoverIdx !== null ? pts[hoverIdx][1] : 0; return (
{metric.key}
{ const r = e.currentTarget.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width * W; const idx = Math.max(0, Math.min(data.length - 1, Math.round((x - padL) / stepX))); setHoverIdx(idx); }} onMouseLeave={() => setHoverIdx(null)}> {/* Y grid */} {Array.from({ length: yTicks }, (_, i) => { const y = padT + (chartH / (yTicks - 1)) * i; const val = max * (1 - i / (yTicks - 1)); return ( {formatMetric(val, metric.unit)} ); })} {/* Hover line + dot */} {hoverIdx !== null && ( )} {/* X labels */} {["20:01","20:03","20:05","20:07"].map((t, i) => ( {t} ))} {hoverIdx !== null && tooltip !== null && (
2026-04-01 20:0{Math.floor(hoverIdx / 10)}:{String((hoverIdx % 10) * 6).padStart(2, "0")}
● {formatMetric(tooltip, metric.unit)}
)}
); } function formatMetric(v, unit) { if (v >= 1e6) return (v / 1e6).toFixed(2) + "M"; if (v >= 1e3) return (v / 1e3).toFixed(2) + "K"; if (unit === "GB") return v.toFixed(2) + "GB"; if (unit === "KB") return v.toFixed(2) + "KB"; if (unit === "M") return v.toFixed(2) + "M"; return v.toFixed(2); } // ─── Traces tab: Waterfall + Flame Graph + Service Map sub-tabs function SDTraces({ source }) { const [sub, setSub] = useStateD("waterfall"); const [selectedSpan, setSelectedSpan] = useStateD("otel-3"); // Compact trace data scoped to this log row const trace = { name: "order-consumed", startedAt: "1 Apr 11:00:04:946", ago: "9h ago", id: "e49386c6dd7224a208f8c11b629197a5", spans: 3, errors: 1, tree: [ { id: "acc-1", service: "accounting", op: "order-consumed", kind: "l", status: 200, depth: 0, dur: 10360, start: 0 }, { id: "acc-2", service: "accounting", op: "orders receive", kind: "i", status: 200, depth: 1, dur: 57.98, start: 100 }, { id: "otel-3", service: "accounting", op: "otel", kind: "i", status: 500, depth: 1, dur: 122.92, start: 200, err: true }, ], }; return (
{/* Trace header */}
{trace.name} {trace.startedAt} ({trace.ago}) Trace ID: {trace.id}
{trace.spans} spans {trace.errors} errors
{/* Sub-tabs */}
{[["waterfall","Waterfall"], ["flame","Flame Graph"], ["servicemap","Service Map"]].map(([k, label]) => ( ))}
{/* Content */}
{sub === "waterfall" && ( )} {sub === "flame" && } {sub === "servicemap" && }
); } // Span-kind badge function KindBadgeSD({ k }) { const palette = { l: { bg: "#E2EAFF", fg: "#3D6EF0" }, i: { bg: "#FCEFC9", fg: "#A77622" }, s: { bg: "#DEF2E5", fg: "#2E9D63" }, c: { bg: "#E9DEF5", fg: "#7A52E0" }, }; const c = palette[k] || palette.s; return ( {k} ); } function TraceWaterfallCompact({ trace, selected, onSelect }) { const W = 1080; const treeW = 320; const timelineW = W - treeW; const maxT = Math.max(...trace.tree.map(s => s.start + s.dur)); const ticks = [0, maxT * 0.25, maxT * 0.5, maxT * 0.75, maxT]; // Span detail (right panel for selected span) const sel = trace.tree.find(s => s.id === selected) || trace.tree[0]; return (
{/* Tree + timeline */}
{/* Header row */}
Operation Name
{ticks.map((t, i) => ( {formatDur(t)} ))}
{trace.tree.map(s => { const isSel = s.id === selected; const left = (s.start / maxT) * timelineW; const width = Math.max(8, (s.dur / maxT) * timelineW); return (
onSelect(s.id)} style={{ display: "grid", gridTemplateColumns: `${treeW}px 1fr`, alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border)", background: isSel ? "var(--accent-bg)" : "transparent", cursor: "pointer", }}>
{s.depth > 0 && ( )} {s.err && } {s.depth === 0 ? "2" : "1"} {s.service} {s.op} {s.status}
{formatDur(s.dur)}
); })}
{/* Selected span detail */}
{sel.op}
Tags
{sel.err ? <>
db_system: postgresql
db_name: otel
db_statement: INSERT INTO "order"...
net_peer_name: postgresql
net_peer_ip: 172.20.166.142
: <>
service_k8s_namespace: default
service_k8s_pod_name: accounting-84458d886f-ftt29
service_k8s_node_name: ip-10-1-2-215.us-east-2
}
); } function ChipRow({ label, value, crit }) { return (
{label} {value}
); } function formatDur(us) { if (us >= 1000) return (us / 1000).toFixed(2) + "ms"; if (us >= 1) return us.toFixed(2) + "us"; return us + "ns"; } // Compact flame view: scaled span rectangles function TraceFlameCompact({ trace }) { const W = 1080, H = 200; const padL = 24, padR = 24; const maxT = Math.max(...trace.tree.map(s => s.start + s.dur)); const chartW = W - padL - padR; return (
{trace.spans} spans · 2 depth
0us{formatDur(maxT * 0.25)} {formatDur(maxT * 0.5)} {formatDur(maxT * 0.75)} {formatDur(maxT)}
{trace.tree.map((s, i) => { const left = padL + (s.start / maxT) * chartW; const width = Math.max(40, (s.dur / maxT) * chartW); const top = s.depth * 28; return (
{s.service}.{s.op}
); })}
); } function TraceServiceMapCompact() { // 3-node service graph: load-generator → accounting → postgresql return (
{/* edges */} {/* nodes */} {[ { x: 100, y: 120, color: "#3D6EF0", label: "load-generator" }, { x: 410, y: 120, color: "#2E9D63", label: "accounting" }, { x: 630, y: 120, color: "#DC4040", label: "postgresql" }, ].map((n, i) => ( {n.label} ))} 2 calls 1 error
); } // ─── Animations (function () { if (document.getElementById("drawer-anim")) return; const s = document.createElement("style"); s.id = "drawer-anim"; s.textContent = ` .drawer-panel, .drawer-scrim { opacity: 1 !important; } `; document.head.appendChild(s); })(); window.Drawer = Drawer; window.DrawerHeader = DrawerHeader; window.SourceDetailsDrawer = SourceDetailsDrawer;