mats/go-otel
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Quick polish pass on remaining screens; hide legacy chrome on RUM tab
Build and Publish / Metadata (push) Successful in 2s
Details
Build and Publish / BuildAndDeployAmd64 (push) Successful in 55s
Details

Browse Source 
Normalize radii, drop shadows/blur and font-black, and document the
one-view-at-a-time plan in AGENTS.md.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
matsandClaude Sonnet 5 committed 2026-09-19 08:57:09 +00:00
1 parent 1e9482ed21
commit 0fde8a0f92
17 files changed
+73 -66
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

otel-ui/src/App.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ function App() {
// The Issues tab is the redesigned triage overview: it owns its own filter
// bar and cards, so the legacy anomaly banner and volume waveform above it
// would just duplicate that UI in a different visual language.
const isTriageOverview = activeTab === "tab0";
const isTriageOverview = activeTab === "tab0" || activeTab === "tab7";
if (isCallback) {
return <AuthCallbackView />;
otel-ui/src/components/CommandAndQueryBar.tsx
+4 -4
View File
@@ -102,7 +102,7 @@ export const CommandAndQueryBar: React.FC = () => {
<div className="flex flex-col gap-2.5 mb-4 font-body">
{/* Real Anomaly Radar Banner */}
{(errorStats.errorCount > 0 || topOpenIssue) && (
<div className="rounded-xl border border-ds-critical/30 bg-ds-surface-2 p-3 shadow-lg flex flex-col sm:flex-row sm:items-center justify-between gap-3 animate-in fade-in duration-300">
<div className="rounded-xl border border-ds-critical/30 bg-ds-surface-2 p-3 flex flex-col sm:flex-row sm:items-center justify-between gap-3 animate-in fade-in duration-300">
<div className="flex items-center gap-2.5 min-w-0">
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-ds-critical-bg text-ds-critical border border-ds-critical/40">
<AlertTriangle className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
@@ -130,7 +130,7 @@ export const CommandAndQueryBar: React.FC = () => {
<button
type="button"
onClick={() => setActiveTab("tab0")}
className="px-3 py-1 rounded-lg bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors shadow-sm"
className="px-3 py-1 rounded-lg bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors"
>
Triage Issues
</button>
@@ -148,7 +148,7 @@ export const CommandAndQueryBar: React.FC = () => {
)}
{/* Filter and Telemetry Status Bar */}
<div className="flex flex-wrap items-center justify-between gap-2.5 p-3 rounded-xl bg-ds-bg border border-ds-line shadow-sm">
<div className="flex flex-wrap items-center justify-between gap-2.5 p-3 rounded-xl bg-ds-bg border border-ds-line">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold shrink-0">
Active Context:
@@ -237,7 +237,7 @@ export const CommandAndQueryBar: React.FC = () => {
<button
type="button"
onClick={exportNDJSON}
className="flex items-center gap-1 px-2.5 py-1 bg-ds-surface hover:bg-ds-surface-2 text-ds-text font-mono text-xs rounded-lg transition-colors border border-ds-line shadow-sm"
className="flex items-center gap-1 px-2.5 py-1 bg-ds-surface hover:bg-ds-surface-2 text-ds-text font-mono text-xs rounded-lg transition-colors border border-ds-line"
title="Export currently filtered telemetry signals as NDJSON"
>
<Download className="h-[15px] w-[15px] shrink-0" aria-hidden="true" />
otel-ui/src/components/GaugeMeter.tsx
+5 -5
View File
@@ -185,7 +185,7 @@ export const GaugeMeter = ({
);
return (
<div className="flex flex-col items-center justify-between rounded-2xl border border-ds-line bg-ds-surface-2 p-4 shadow-lg backdrop-blur-sm transition-all hover:border-ds-line-strong">
<div className="flex flex-col items-center justify-between rounded-[14px] border border-ds-line bg-ds-surface-2 p-4 transition-all hover:border-ds-line-strong">
<div className="flex w-full items-start justify-between gap-2 border-b border-ds-line pb-2">
<div className="flex flex-col min-w-0 pr-1">
<div className="flex items-center gap-1 flex-wrap mb-1">
@@ -203,7 +203,7 @@ export const GaugeMeter = ({
className="inline-flex items-center gap-1 rounded bg-ds-accent-bg px-1.5 py-0.5 text-[9px] font-mono font-bold text-ds-accent border border-ds-accent/30"
title={`Sum of values across ${podCount} pods`}
>
<span className="text-[11px] font-black leading-none text-ds-accent">∑</span>
<span className="text-[11px] font-bold leading-none text-ds-accent">∑</span>
<span>{podCount} pods</span>
</span>
)}
@@ -287,15 +287,15 @@ export const GaugeMeter = ({
{/* Center Readout */}
<div className="absolute inset-0 flex flex-col items-center justify-center pt-3 text-center pointer-events-none">
{soloPod ? (
<span className="text-[8px] font-mono uppercase font-black text-ds-warn tracking-wider truncate max-w-[100px]" title={`Solo: ${soloPod}`}>
<span className="text-[8px] font-mono uppercase font-bold text-ds-warn tracking-wider truncate max-w-[100px]" title={`Solo: ${soloPod}`}>
{soloPod}
</span>
) : aggLabel ? (
<span className="text-[8.5px] font-mono uppercase font-black text-ds-accent tracking-wider">
<span className="text-[8.5px] font-mono uppercase font-bold text-ds-accent tracking-wider">
{aggLabel}
</span>
) : podCount !== undefined && podCount > 1 ? (
<span className="text-[8.5px] font-mono uppercase font-black text-ds-accent tracking-wider">
<span className="text-[8.5px] font-mono uppercase font-bold text-ds-accent tracking-wider">
{isSum ? "Sum (∑)" : "Avg (μ)"}
</span>
) : null}
otel-ui/src/components/MetricsVisualizer.tsx
+6 -6
View File
@@ -303,7 +303,7 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
if (active && payload && payload.length) {
const data = payload[0].payload;
return (
<div className="z-50 flex flex-col gap-2 rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs shadow-2xl backdrop-blur-md min-w-[220px]">
<div className="z-50 flex flex-col gap-2 rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs min-w-[220px]">
<div className="flex items-center justify-between gap-4 border-b border-ds-line pb-2">
<span className="font-mono text-ds-text-2">
{new Date(data.time).toLocaleTimeString([], {
@@ -394,11 +394,11 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
};
return (
<article className="group relative flex flex-col overflow-hidden rounded-3xl border border-ds-line bg-ds-surface-2 transition-all hover:border-ds-line hover:bg-ds-surface-2">
<article className="group relative flex flex-col overflow-hidden rounded-[14px] border border-ds-line bg-ds-surface-2 transition-all hover:border-ds-line hover:bg-ds-surface-2">
<header className="flex items-start justify-between p-5 border-b border-ds-line gap-3 flex-wrap sm:flex-nowrap">
<div className="flex items-center gap-3 min-w-0">
<div
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-ds-surface-2 shadow-md"
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-ds-surface-2"
style={{
backgroundImage: `linear-gradient(to bottom right, ${color.from}, ${color.to})`,
color: "var(--ds-bg)",
@@ -555,7 +555,7 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
<div className="text-[9px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
{currentDisplay.label}
</div>
<div className="text-lg font-black text-ds-text font-mono">
<div className="text-lg font-bold text-ds-text font-mono">
{valueFormatter.format(currentDisplay.value)}
{unit && <span className="ml-1 text-xs text-ds-text-2 font-normal">{unit}</span>}
</div>
@@ -804,7 +804,7 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
<span className={`font-bold ${isSelected ? "text-ds-warn" : pal.text}`}>
{valueFormatter.format(ps.value)}
</span>
{isSelected && <span className="text-[8.5px] uppercase font-black text-ds-warn">SOLO</span>}
{isSelected && <span className="text-[8.5px] uppercase font-bold text-ds-warn">SOLO</span>}
</button>
);
})}
@@ -939,7 +939,7 @@ export const MetricsVisualizer = () => {
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Gauge className="h-4 w-4 text-ds-accent" />
<h2 className="text-xs font-black uppercase tracking-[0.2em] text-ds-text-2">
<h2 className="text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
Live Gauge Dashboard
</h2>
</div>
otel-ui/src/components/NeedleTestModal.tsx
+3 -3
View File
@@ -73,8 +73,8 @@ export const NeedleTestModal: React.FC<NeedleTestModalProps> = ({ isOpen, onClos
}
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-ds-bg/80 p-4 backdrop-blur-sm animate-fade-in">
<div className="relative flex flex-col w-full max-w-2xl rounded-2xl border border-ds-ok/30 bg-ds-bg/95 p-6 shadow-2xl max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-ds-bg/80 p-4 animate-fade-in">
<div className="relative flex flex-col w-full max-w-2xl rounded-[14px] border border-ds-ok/30 bg-ds-bg/95 p-6 max-h-[90vh] overflow-y-auto">
{/* Header */}
<div className="flex items-center justify-between border-b border-ds-line pb-4">
<div className="flex items-center gap-3">
@@ -148,7 +148,7 @@ export const NeedleTestModal: React.FC<NeedleTestModalProps> = ({ isOpen, onClos
type="button"
onClick={handleClassify}
disabled={loading || !inputText.trim()}
className="inline-flex items-center gap-2 rounded-xl bg-ds-surface-2 px-4 py-2 text-xs font-bold text-ds-on-accent transition-all hover:opacity-95 active:scale-95 disabled:opacity-50 shadow-lg "
className="inline-flex items-center gap-2 rounded-xl bg-ds-surface-2 px-4 py-2 text-xs font-bold text-ds-on-accent transition-all hover:opacity-95 active:scale-95 disabled:opacity-50"
>
{loading ? (
<>
otel-ui/src/components/PatternsVisualizer.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export function PatternsVisualizer() {
if (loading && patterns.length === 0) return <div className="py-16 text-center text-sm text-ds-text-3">Loading deterministic patterns…</div>
return <div className="space-y-4">
<div className="flex flex-wrap items-center gap-3 border-b border-ds-line pb-3">
<div><div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3"><GitBranch className="h-3 w-3 text-ds-accent" /> Similarity Patterns</div><div className="mt-1 text-xs text-ds-text-3">Exact issues stay separate; broader deterministic patterns are reviewable.</div></div>
<div><div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3"><GitBranch className="h-3 w-3 text-ds-accent" /> Similarity Patterns</div><div className="mt-1 text-xs text-ds-text-3">Exact issues stay separate; broader deterministic patterns are reviewable.</div></div>
<input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Filter patterns…" className="ml-auto rounded-lg border border-ds-line bg-ds-surface-2 px-3 py-2 text-xs text-ds-text outline-none placeholder:text-ds-text-3 focus:border-ds-accent/40" />
<button onClick={() => void refresh()} className="inline-flex items-center gap-2 rounded-lg border border-ds-line px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-2 hover:text-ds-text"><RefreshCw className="h-3 w-3" /> Refresh</button>
</div>
otel-ui/src/components/RolloutsVisualizer.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export function RolloutsVisualizer() {
if (loading && rollouts.length === 0) return <div className="py-16 text-center text-sm text-ds-text-3">Loading cluster rollouts…</div>
return <div className="space-y-4">
<div className="flex flex-wrap items-center gap-3 border-b border-ds-line pb-3">
<div><div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3"><CloudCog className="h-3 w-3 text-ds-accent" /> Cluster Rollouts</div><div className="mt-1 text-xs text-ds-text-3">Read-only Kubernetes deployment state with optional Prometheus impact data.</div></div>
<div><div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3"><CloudCog className="h-3 w-3 text-ds-accent" /> Cluster Rollouts</div><div className="mt-1 text-xs text-ds-text-3">Read-only Kubernetes deployment state with optional Prometheus impact data.</div></div>
<button onClick={() => void refresh()} className="ml-auto inline-flex items-center gap-2 rounded-lg border border-ds-line px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-2 hover:text-ds-text"><RefreshCw className="h-3 w-3" /> Refresh</button>
</div>
{error && <div className="rounded-lg border border-ds-warn/20 bg-ds-warn-bg p-3 text-xs text-ds-warn">Rollout watcher unavailable: {String(error)}</div>}
otel-ui/src/components/SearchAndWatcher.tsx
+8 -8
View File
@@ -143,7 +143,7 @@ export const SearchAndWatcher: React.FC = () => {
return (
<div className="space-y-8 max-w-6xl font-body">
{/* Top Banner */}
<div className="rounded-2xl border border-ds-accent/20 bg-ds-surface-2 p-5 shadow-xl backdrop-blur-md">
<div className="rounded-[14px] border border-ds-accent/20 bg-ds-surface-2 p-5">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
@@ -162,11 +162,11 @@ export const SearchAndWatcher: React.FC = () => {
</div>
{/* SECTION 1: Live Signal Trap */}
<section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-5 shadow-xl space-y-4">
<section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-5 space-y-4">
<div className="flex items-center justify-between border-b border-ds-line pb-3">
<div className="flex items-center gap-2">
<Radar className="h-4 w-4 text-ds-accent" />
<h3 className="text-xs font-black uppercase tracking-[0.2em] text-ds-text-2">
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
Live Signal Trap (/api/history/wait)
</h3>
</div>
@@ -230,7 +230,7 @@ export const SearchAndWatcher: React.FC = () => {
<button
type="button"
onClick={cancelWatcher}
className="h-9 px-4 rounded-xl bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5 shadow-lg "
className="h-9 px-4 rounded-xl bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5"
>
<Square className="h-3.5 w-3.5 fill-current" />
<span>Cancel</span>
@@ -239,7 +239,7 @@ export const SearchAndWatcher: React.FC = () => {
<button
type="button"
onClick={startWatcher}
className="h-9 px-4 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5 shadow-lg "
className="h-9 px-4 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5"
>
<Play className="h-3.5 w-3.5 fill-current" />
<span>Arm Trap</span>
@@ -308,11 +308,11 @@ export const SearchAndWatcher: React.FC = () => {
</section>
{/* SECTION 2: Persistent Storage Search */}
<section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-5 shadow-xl space-y-4">
<section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-5 space-y-4">
<div className="flex items-center justify-between border-b border-ds-line pb-3">
<div className="flex items-center gap-2">
<Search className="h-4 w-4 text-ds-accent" />
<h3 className="text-xs font-black uppercase tracking-[0.2em] text-ds-text-2">
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
Query Persistent Telemetry Store (/api/history/search)
</h3>
</div>
@@ -389,7 +389,7 @@ export const SearchAndWatcher: React.FC = () => {
<button
type="submit"
disabled={searchLoading}
className="w-full h-9 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-on-accent font-mono text-xs font-bold transition-colors flex items-center justify-center gap-1.5 shadow-lg disabled:opacity-50"
className="w-full h-9 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-on-accent font-mono text-xs font-bold transition-colors flex items-center justify-center gap-1.5 disabled:opacity-50"
>
<Search className="h-3.5 w-3.5" />
<span>{searchLoading ? "Searching..." : "Search"}</span>
otel-ui/src/components/ServiceGraph.tsx
+1 -1
View File
@@ -220,7 +220,7 @@ export const ServiceGraph = ({
const nodeMap = new Map(nodes.map((n) => [n.id, n]));
return (
<div className="relative overflow-hidden rounded-2xl border border-ds-line bg-ds-surface-2 p-4 shadow-2xl backdrop-blur-md">
<div className="relative overflow-hidden rounded-[14px] border border-ds-line bg-ds-surface-2 p-4">
<div className="mb-4 flex flex-wrap items-center justify-between gap-4 border-b border-ds-line pb-3">
<div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-ds-accent" />
otel-ui/src/components/SetupPanel.tsx
+2 -2
View File
@@ -48,7 +48,7 @@ export const SetupPanel = () => {
<div className="space-y-6 max-w-3xl">
<div className="rounded-xl border border-ds-line bg-ds-surface-2 p-5">
<div className="flex items-center justify-between gap-4">
<span className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3">
<span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
<Globe className="h-3.5 w-3.5 text-ds-accent" />
Browser instrumentation (otel-rum.js)
</span>
@@ -87,7 +87,7 @@ export const SetupPanel = () => {
</div>
<div className="rounded-xl border border-ds-line bg-ds-surface-2 p-5">
<span className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3">
<span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
<FileText className="h-3.5 w-3.5 text-ds-accent" />
Agent instructions
</span>
otel-ui/src/components/StructuredLogTerminal.tsx
+4 -4
View File
@@ -165,7 +165,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
{/* LEFT PANEL: Faceted Filter Breakdown (3 Cols) */}
<aside className="lg:col-span-3 flex flex-col gap-4">
{/* Severity Breakdown Card */}
<div className="bg-ds-bg p-4 rounded-xl shadow-md flex flex-col gap-2 border border-ds-line">
<div className="bg-ds-bg p-4 rounded-xl flex flex-col gap-2 border border-ds-line">
<div className="flex items-center justify-between pb-1 border-b border-ds-line">
<span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold">
Severity Breakdown
@@ -263,7 +263,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
</div>
{/* Service Facet Card */}
<div className="bg-ds-bg p-4 rounded-xl shadow-md flex flex-col gap-2 border border-ds-line">
<div className="bg-ds-bg p-4 rounded-xl flex flex-col gap-2 border border-ds-line">
<div className="flex items-center justify-between pb-1 border-b border-ds-line">
<span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold">
Service Name
@@ -303,7 +303,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
</div>
{/* AI Root Cause Diagnostic Hint Box */}
<div className="bg-ds-surface p-4 rounded-xl shadow-md flex flex-col gap-1.5 border border-ds-line">
<div className="bg-ds-surface p-4 rounded-xl flex flex-col gap-1.5 border border-ds-line">
<div className="flex items-center gap-2 text-ds-accent">
<Brain className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
<span className="font-[family-name:var(--font-display)] font-semibold text-xs leading-none">
@@ -328,7 +328,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
</aside>
{/* RIGHT PANEL: High-Density Structured Live Log Stream (9 Cols) */}
<main className="lg:col-span-9 flex flex-col bg-ds-bg rounded-xl shadow-md overflow-hidden border border-ds-line">
<main className="lg:col-span-9 flex flex-col bg-ds-bg rounded-xl overflow-hidden border border-ds-line">
{/* Stream Controls Bar */}
<div className="flex flex-wrap items-center justify-between gap-2 p-2.5 bg-ds-surface border-b border-ds-line">
<div className="flex items-center gap-2 flex-1 min-w-[240px]">
otel-ui/src/components/Tabs.tsx
+1 -1
View File
@@ -250,7 +250,7 @@ export const LogEntryView = ({ log }: { log: LogEntry }) => {
{record.traceId && (
<button
onClick={() => navigateToSpan(record.traceId!, record.spanId)}
className="inline-flex items-center gap-2 rounded-xl bg-ds-accent px-4 py-2 text-[10px] font-black uppercase tracking-widest text-ds-on-accent transition-all hover:bg-ds-accent hover:scale-[1.02] active:scale-[0.98] shadow-lg "
className="inline-flex items-center gap-2 rounded-xl bg-ds-accent px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-ds-on-accent transition-all hover:bg-ds-accent hover:scale-[1.02] active:scale-[0.98]"
>
<Activity className="h-3 w-3" />
Jump to Span in Trace
otel-ui/src/components/TraceVisualization.tsx
+18 -18
View File
@@ -191,7 +191,7 @@ const SpanInspector = ({
traceTotalRange > 0 ? ((span.duration / traceTotalRange) * 100).toFixed(1) : "100";
return (
<aside className="flex flex-col h-full rounded-2xl border border-ds-line bg-ds-bg/95 shadow-2xl backdrop-blur-xl animate-in slide-in-from-right-4 duration-300">
<aside className="flex flex-col h-full rounded-[14px] border border-ds-line bg-ds-bg/95 animate-in slide-in-from-right-4 duration-300">
{/* Header */}
<div className="flex items-start justify-between border-b border-ds-line p-4">
<div className="space-y-1 min-w-0 pr-2">
@@ -278,7 +278,7 @@ const SpanInspector = ({
<div className="space-y-4">
<div className="grid grid-cols-2 gap-3">
<div className="rounded-xl border border-ds-line bg-ds-surface-2 p-3 space-y-1">
<span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3">
<span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3">
Duration
</span>
<p className="font-mono text-base font-bold text-ds-text">
@@ -287,7 +287,7 @@ const SpanInspector = ({
<p className="text-[10px] text-ds-text-2">{percentageOfTrace}% of total trace</p>
</div>
<div className="rounded-xl border border-ds-line bg-ds-surface-2 p-3 space-y-1">
<span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3">
<span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3">
Start Time
</span>
<p className="font-mono text-[11px] font-bold text-ds-text">
@@ -305,7 +305,7 @@ const SpanInspector = ({
</div>
<div className="space-y-2 rounded-xl border border-ds-line bg-ds-surface-2 p-3">
<span className="text-[10px] font-black uppercase tracking-widest text-ds-text-3">
<span className="text-[10px] font-bold uppercase tracking-widest text-ds-text-3">
Identifiers
</span>
<div className="space-y-2 font-mono text-[11px]">
@@ -584,7 +584,7 @@ const VirtualizedSpanWaterfall = ({
const rulerTicks = [0, 0.25, 0.5, 0.75, 1];
return (
<div className="flex flex-col rounded-2xl border border-ds-line bg-ds-surface-2 shadow-xl overflow-hidden">
<div className="flex flex-col rounded-[14px] border border-ds-line bg-ds-surface-2 overflow-hidden">
{/* Waterfall Toolbar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-ds-line bg-ds-surface-2 px-4 py-2.5">
<div className="flex items-center gap-2">
@@ -656,7 +656,7 @@ const VirtualizedSpanWaterfall = ({
</div>
{/* Synchronized Time Ruler Header */}
<div className="grid grid-cols-12 border-b border-ds-line bg-ds-surface-2 px-4 py-2 text-[10px] font-black uppercase tracking-wider text-ds-text-3 select-none">
<div className="grid grid-cols-12 border-b border-ds-line bg-ds-surface-2 px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-3 select-none">
<div className="col-span-12 sm:col-span-6 lg:col-span-5 flex items-center justify-between pr-4">
<span>Hierarchy & Operation</span>
<span>Duration</span>
@@ -914,13 +914,13 @@ const SingleTraceView = ({
<div className="flex items-center gap-4">
<div className="flex items-center gap-3 font-mono text-xs">
<div className="text-right">
<span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3 block">
<span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3 block">
Total Spans
</span>
<span className="font-bold text-ds-text">{trace.spans.length}</span>
</div>
<div className="text-right">
<span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3 block">
<span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3 block">
Duration
</span>
<span
@@ -962,7 +962,7 @@ const SingleTraceView = ({
</header>
{/* Visual Service Distribution Timeline Bar */}
<div className="space-y-1.5 rounded-2xl border border-ds-line bg-ds-surface-2 p-3">
<div className="space-y-1.5 rounded-[14px] border border-ds-line bg-ds-surface-2 p-3">
<div className="flex items-center justify-between text-[10px] font-bold text-ds-text-2">
<span className="uppercase tracking-widest text-ds-text-3">Service Time Distribution</span>
<div className="flex gap-3">
@@ -1084,7 +1084,7 @@ const TracePickerDropdown = ({
<button
type="button"
onClick={() => setIsOpen((prev) => !prev)}
className="flex items-center gap-2 rounded-xl bg-ds-surface-2 border border-ds-line-strong px-3 py-1.5 text-xs font-bold text-ds-text hover:border-ds-line-strong hover:bg-ds-surface transition-all shadow-sm"
className="flex items-center gap-2 rounded-xl bg-ds-surface-2 border border-ds-line-strong px-3 py-1.5 text-xs font-bold text-ds-text hover:border-ds-line-strong hover:bg-ds-surface transition-all"
title="Switch trace"
>
<span
@@ -1107,7 +1107,7 @@ const TracePickerDropdown = ({
</button>
{isOpen && (
<div className="absolute left-0 top-full mt-2 w-80 sm:w-96 z-50 rounded-2xl border border-ds-line-strong bg-ds-bg/95 shadow-2xl backdrop-blur-xl p-3 flex flex-col gap-2 animate-in fade-in slide-in-from-top-2 duration-150">
<div className="absolute left-0 top-full mt-2 w-80 sm:w-96 z-50 rounded-[14px] border border-ds-line-strong bg-ds-bg/95 p-3 flex flex-col gap-2 animate-in fade-in slide-in-from-top-2 duration-150">
<div className="relative flex items-center">
<Search className="absolute left-2.5 h-3.5 w-3.5 text-ds-text-3 pointer-events-none" />
<input
@@ -1234,7 +1234,7 @@ const TraceDirectoryTable = ({
}, [traces]);
return (
<div className="space-y-4 rounded-3xl border border-ds-line bg-ds-surface-2 p-5 shadow-xl">
<div className="space-y-4 rounded-[14px] border border-ds-line bg-ds-surface-2 p-5">
{/* Directory Header & Toolbar */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-ds-line pb-4">
<div className="flex items-center gap-3">
@@ -1262,7 +1262,7 @@ const TraceDirectoryTable = ({
<button
type="button"
onClick={onSwitchToWaterfall}
className="flex items-center gap-1.5 self-start md:self-auto rounded-xl bg-ds-accent-bg hover:bg-ds-accent-bg text-ds-accent border border-ds-accent/30 px-3.5 py-2 text-xs font-bold transition-all shadow-sm"
className="flex items-center gap-1.5 self-start md:self-auto rounded-xl bg-ds-accent-bg hover:bg-ds-accent-bg text-ds-accent border border-ds-accent/30 px-3.5 py-2 text-xs font-bold transition-all"
>
<SlidersHorizontal className="h-3.5 w-3.5" />
Open Waterfall Detail
@@ -1270,7 +1270,7 @@ const TraceDirectoryTable = ({
</div>
{/* Filter and Search Controls */}
<div className="flex flex-wrap items-center justify-between gap-3 bg-ds-surface-2 p-3 rounded-2xl border border-ds-line">
<div className="flex flex-wrap items-center justify-between gap-3 bg-ds-surface-2 p-3 rounded-[14px] border border-ds-line">
<div className="flex items-center gap-2 flex-1 min-w-[220px] max-w-md">
<div className="relative flex-1">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-ds-text-3 pointer-events-none" />
@@ -1386,10 +1386,10 @@ const TraceDirectoryTable = ({
No traces match your filter or search criteria.
</div>
) : (
<div className="overflow-x-auto rounded-2xl border border-ds-line bg-ds-surface-2">
<div className="overflow-x-auto rounded-[14px] border border-ds-line bg-ds-surface-2">
<table className="w-full text-left border-collapse">
<thead>
<tr className="border-b border-ds-line bg-ds-surface-2 text-[10px] font-black uppercase tracking-wider text-ds-text-3">
<tr className="border-b border-ds-line bg-ds-surface-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-3">
<th className="py-3 px-4">Status</th>
<th className="py-3 px-4">Trace / Operation</th>
<th className="py-3 px-4">Services</th>
@@ -1710,7 +1710,7 @@ export const TraceVisualization = ({ traces }: TraceVisualizationProps) => {
if (orderedTraces.length === 0) {
return (
<div className="flex min-h-[300px] flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-ds-line-strong bg-ds-surface-2 p-12 text-center text-ds-text-2">
<div className="flex min-h-[300px] flex-col items-center justify-center gap-4 rounded-[14px] border border-dashed border-ds-line-strong bg-ds-surface-2 p-12 text-center text-ds-text-2">
<Sparkles className="h-10 w-10 text-ds-accent" />
<div>
<p className="text-lg font-semibold text-ds-text">No traces match your filters</p>
@@ -1744,7 +1744,7 @@ export const TraceVisualization = ({ traces }: TraceVisualizationProps) => {
<div className="space-y-5">
{/* Waveform Focus Notification Banner if Active */}
{selectedTimeRange && (
<div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-ds-accent/30 bg-ds-accent-bg px-4 py-2.5 text-xs text-ds-accent">
<div className="flex flex-wrap items-center justify-between gap-3 rounded-[14px] border border-ds-accent/30 bg-ds-accent-bg px-4 py-2.5 text-xs text-ds-accent">
<div className="flex items-center gap-2.5">
<span className="flex h-2 w-2 rounded-full bg-ds-accent animate-ping" />
<span>
otel-ui/src/components/TrendsVisualizer.tsx
+5 -5
View File
@@ -36,7 +36,7 @@ const ChartTooltip = ({ active, payload, granularity }: any) => {
const p = payload[0].payload
const d = new Date(String(p.bucket).replace(" ", "T") + "Z")
return (
<div className="rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs shadow-2xl backdrop-blur-md">
<div className="rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs">
<div className="mb-1 font-mono text-[10px] text-ds-text-2">
{d.toLocaleString([], {
month: "short",
@@ -116,9 +116,9 @@ export const TrendsVisualizer = () => {
return (
<div className="space-y-6">
{/* Toolbar */}
<div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-3 border-b border-ds-line bg-ds-bg/95 py-2 backdrop-blur">
<div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-3 border-b border-ds-line bg-ds-bg/95 py-2">
<div className="flex flex-wrap items-center gap-3">
<span className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3">
<span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
<GitCompareArrows className="h-3 w-3 text-ds-accent" />
Historical Trends
</span>
@@ -178,7 +178,7 @@ export const TrendsVisualizer = () => {
)}
{/* Error trend */}
<section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-4">
<section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-4">
<header className="mb-3 flex items-center justify-between">
<h3 className="flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
<AlertOctagon className="h-3.5 w-3.5 text-ds-critical" />
@@ -253,7 +253,7 @@ export const TrendsVisualizer = () => {
</section>
{/* Release comparison */}
<section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-4">
<section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-4">
<header className="mb-3 flex items-center justify-between">
<h3 className="flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
<GitCompareArrows className="h-3.5 w-3.5 text-ds-accent" />
otel-ui/src/components/ViewErrorBoundary.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export class ViewErrorBoundary extends Component<Props, State> {
render() {
if (this.state.error) {
return (
<div className="flex min-h-[240px] flex-col items-center justify-center gap-4 rounded-3xl border border-ds-critical/20 bg-ds-critical-bg p-12 text-center">
<div className="flex min-h-[240px] flex-col items-center justify-center gap-4 rounded-[14px] border border-ds-critical/20 bg-ds-critical-bg p-12 text-center">
<AlertTriangle className="h-10 w-10 text-ds-critical" />
<div>
<p className="text-lg font-semibold text-ds-text">
@@ -48,7 +48,7 @@ export class ViewErrorBoundary extends Component<Props, State> {
<button
type="button"
onClick={() => this.setState({ error: null })}
className="inline-flex items-center gap-2 rounded-xl border border-ds-critical/30 bg-ds-critical-bg px-4 py-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-critical transition-all hover:bg-ds-critical-bg"
className="inline-flex items-center gap-2 rounded-xl border border-ds-critical/30 bg-ds-critical-bg px-4 py-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-critical transition-all hover:bg-ds-critical-bg"
>
<RotateCcw className="h-3 w-3" />
Retry
otel-ui/src/components/WaveformHistogram.tsx
+3 -3
View File
@@ -168,7 +168,7 @@ export const WaveformHistogram = () => {
if (buckets.length === 0) {
return (
<div className="relative bg-ds-bg p-3.5 rounded-xl shadow-md mb-4 border border-ds-line">
<div className="relative bg-ds-bg p-3.5 rounded-xl mb-4 border border-ds-line">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Activity className="text-ds-accent h-[18px] w-[18px] shrink-0" aria-hidden="true" />
@@ -183,7 +183,7 @@ export const WaveformHistogram = () => {
}
return (
<div className="relative bg-ds-bg p-3.5 rounded-xl shadow-md mb-4 overflow-hidden border border-ds-line font-body">
<div className="relative bg-ds-bg p-3.5 rounded-xl mb-4 overflow-hidden border border-ds-line font-body">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-2">
<div className="flex items-center gap-3 flex-wrap">
<button
@@ -268,7 +268,7 @@ export const WaveformHistogram = () => {
{/* Active Selection Focus Pin Indicator */}
{isSelected && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2 flex flex-col items-center pointer-events-none z-20 whitespace-nowrap">
<span className="px-1.5 py-0.5 bg-ds-accent text-ds-on-accent font-mono text-[9px] font-black rounded shadow">
<span className="px-1.5 py-0.5 bg-ds-accent text-ds-on-accent font-mono text-[9px] font-bold rounded shadow">
FOCUS
</span>
<span className="w-0.5 h-1 bg-ds-accent"></span>