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

Unify otel-ui on ds-* theme; restore redesigned Issues view
Build and Publish / Metadata (push) Successful in 2s
Details
Build and Publish / BuildAndDeployAmd64 (push) Successful in 56s
Details

Browse Source 
Restore IssuesVisualizer redesign reverted by merge 67ce419 and re-apply
Needle triage/test additions. Migrate all remaining screens off the MD3
palette, raw Tailwind colors, gradients and Material Symbols. Remove the
legacy theme block and fonts, drop the duplicate tab strip, rebuild
TelemetryFilters on FilterBar, and document status 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:56:34 +00:00
1 parent 67ce4197da
commit 1e9482ed21
23 files changed
+1583 -1648
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

otel-ui/src/components/ServiceGraph.tsx
+39 -39
View File
@@ -211,7 +211,7 @@ export const ServiceGraph = ({
if (nodes.length === 0) {
return (
<div className="py-12 text-center text-sm text-slate-500">
<div className="py-12 text-center text-sm text-ds-text-3">
No service nodes available to visualize.
</div>
);
@@ -220,25 +220,25 @@ export const ServiceGraph = ({
const nodeMap = new Map(nodes.map((n) => [n.id, n]));
return (
<div className="relative overflow-hidden rounded-2xl border border-white/10 bg-slate-950/60 p-4 shadow-2xl backdrop-blur-md">
<div className="mb-4 flex flex-wrap items-center justify-between gap-4 border-b border-white/5 pb-3">
<div className="relative overflow-hidden rounded-2xl border border-ds-line bg-ds-surface-2 p-4 shadow-2xl backdrop-blur-md">
<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-sky-400" />
<span className="text-xs font-bold uppercase tracking-widest text-slate-300">
<Layers className="h-4 w-4 text-ds-accent" />
<span className="text-xs font-bold uppercase tracking-widest text-ds-text-2">
Service Call Graph ({nodes.length} Services, {edges.length} Cross-Service Links)
</span>
</div>
<div className="flex items-center gap-2 text-[10px] text-slate-400">
<div className="flex items-center gap-2 text-[10px] text-ds-text-2">
<span className="inline-flex items-center gap-1">
<span className="h-2 w-2 rounded-full bg-emerald-400" /> Healthy
<span className="h-2 w-2 rounded-full bg-ds-ok" /> Healthy
</span>
<span className="inline-flex items-center gap-1">
<span className="h-2 w-2 rounded-full bg-rose-400" /> Errors
<span className="h-2 w-2 rounded-full bg-ds-critical" /> Errors
</span>
{selectedService && (
<button
onClick={() => onSelectService?.(null)}
className="ml-2 rounded-lg bg-sky-500/20 px-2 py-0.5 text-sky-300 hover:bg-sky-500/30 transition-all font-semibold"
className="ml-2 rounded-lg bg-ds-accent-bg px-2 py-0.5 text-ds-accent hover:bg-ds-accent-bg transition-all font-semibold"
>
Clear filter ({selectedService})
</button>
@@ -263,7 +263,7 @@ export const ServiceGraph = ({
markerHeight="6"
orient="auto-start-reverse"
>
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#38bdf8" />
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--ds-accent)" />
</marker>
<marker
id="arrow-error"
@@ -274,15 +274,15 @@ export const ServiceGraph = ({
markerHeight="6"
orient="auto-start-reverse"
>
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#f43f5e" />
<path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="var(--ds-critical)" />
</marker>
<linearGradient id="edge-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#38bdf8" stopOpacity="0.8" />
<stop offset="100%" stopColor="#818cf8" stopOpacity="0.8" />
<stop offset="0%" stopColor="var(--ds-accent)" stopOpacity="0.8" />
<stop offset="100%" stopColor="var(--ds-accent)" stopOpacity="0.8" />
</linearGradient>
<linearGradient id="edge-error-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#f43f5e" stopOpacity="0.9" />
<stop offset="100%" stopColor="#fb7185" stopOpacity="0.9" />
<stop offset="0%" stopColor="var(--ds-critical)" stopOpacity="0.9" />
<stop offset="100%" stopColor="var(--ds-critical)" stopOpacity="0.9" />
</linearGradient>
</defs>
@@ -331,8 +331,8 @@ export const ServiceGraph = ({
edge.hasError
? "url(#edge-error-grad)"
: isEdgeHighlighted
? "#38bdf8"
: "rgba(56, 189, 248, 0.4)"
? "var(--ds-accent)"
: "color-mix(in srgb, var(--ds-accent) 40%, transparent)"
}
strokeWidth={isEdgeHighlighted ? 3 : 2}
strokeDasharray={edge.hasError ? "4 2" : undefined}
@@ -344,15 +344,15 @@ export const ServiceGraph = ({
width={70}
height={22}
rx={6}
fill="#030712"
stroke={edge.hasError ? "rgba(244,63,94,0.4)" : "rgba(255,255,255,0.1)"}
fill="var(--ds-bg)"
stroke={edge.hasError ? "color-mix(in srgb, var(--ds-critical) 40%, transparent)" : "var(--ds-line-strong)"}
strokeWidth={1}
/>
<text
x={35}
y={14}
textAnchor="middle"
fill={edge.hasError ? "#fb7185" : "#94a3b8"}
fill={edge.hasError ? "var(--ds-critical)" : "var(--ds-text-2)"}
fontSize={9}
fontWeight="bold"
fontFamily="monospace"
@@ -384,18 +384,18 @@ export const ServiceGraph = ({
width={200}
height={84}
rx={16}
fill="#090d16"
fill="var(--ds-bg)"
stroke={
isSelected
? "#38bdf8"
? "var(--ds-accent)"
: hasError
? "#f43f5e"
? "var(--ds-critical)"
: isHovered
? "rgba(255, 255, 255, 0.3)"
: "rgba(255, 255, 255, 0.1)"
? "var(--ds-line-strong)"
: "var(--ds-line-strong)"
}
strokeWidth={isSelected ? 2.5 : hasError ? 2 : 1}
filter={isSelected ? "drop-shadow(0 0 12px rgba(56,189,248,0.4))" : undefined}
filter={isSelected ? "drop-shadow(0 0 12px color-mix(in srgb, var(--ds-accent) 40%, transparent))" : undefined}
/>
{/* Left Accent Stripe */}
@@ -405,7 +405,7 @@ export const ServiceGraph = ({
width={6}
height={84}
rx={3}
fill={hasError ? "#f43f5e" : "#38bdf8"}
fill={hasError ? "var(--ds-critical)" : "var(--ds-accent)"}
/>
{/* Service Name Header */}
@@ -413,7 +413,7 @@ export const ServiceGraph = ({
<text
x={0}
y={0}
fill="#ffffff"
fill="var(--ds-text)"
fontSize={13}
fontWeight="bold"
fontFamily="sans-serif"
@@ -424,11 +424,11 @@ export const ServiceGraph = ({
{/* Spans Count & Latency Pills */}
<g transform="translate(16, 44)">
<text x={0} y={10} fill="#64748b" fontSize={10} fontFamily="monospace">
Spans: <tspan fill="#e2e8f0">{node.spanCount}</tspan>
<text x={0} y={10} fill="var(--ds-text-3)" fontSize={10} fontFamily="monospace">
Spans: <tspan fill="var(--ds-text)">{node.spanCount}</tspan>
</text>
<text x={75} y={10} fill="#64748b" fontSize={10} fontFamily="monospace">
Time: <tspan fill="#38bdf8">{formatDuration(node.totalDuration)}</tspan>
<text x={75} y={10} fill="var(--ds-text-3)" fontSize={10} fontFamily="monospace">
Time: <tspan fill="var(--ds-accent)">{formatDuration(node.totalDuration)}</tspan>
</text>
</g>
@@ -436,12 +436,12 @@ export const ServiceGraph = ({
<g transform="translate(16, 68)">
{hasError ? (
<g>
<rect width={80} height={16} rx={4} fill="rgba(244,63,94,0.15)" />
<rect width={80} height={16} rx={4} fill="color-mix(in srgb, var(--ds-critical) 15%, transparent)" />
<text
x={40}
y={11}
textAnchor="middle"
fill="#fb7185"
fill="var(--ds-critical)"
fontSize={9}
fontWeight="bold"
>
@@ -450,12 +450,12 @@ export const ServiceGraph = ({
</g>
) : (
<g>
<rect width={60} height={16} rx={4} fill="rgba(16,185,129,0.15)" />
<rect width={60} height={16} rx={4} fill="color-mix(in srgb, var(--ds-ok) 15%, transparent)" />
<text
x={30}
y={11}
textAnchor="middle"
fill="#34d399"
fill="var(--ds-ok)"
fontSize={9}
fontWeight="bold"
>
@@ -465,12 +465,12 @@ export const ServiceGraph = ({
)}
{isSelected && (
<g transform="translate(90, 0)">
<rect width={55} height={16} rx={4} fill="rgba(56,189,248,0.2)" />
<rect width={55} height={16} rx={4} fill="color-mix(in srgb, var(--ds-accent) 20%, transparent)" />
<text
x={27.5}
y={11}
textAnchor="middle"
fill="#38bdf8"
fill="var(--ds-accent)"
fontSize={9}
fontWeight="bold"
>
@@ -486,7 +486,7 @@ export const ServiceGraph = ({
</div>
{nodes.length === 1 && (
<div className="mt-3 text-center text-xs text-slate-500">
<div className="mt-3 text-center text-xs text-ds-text-3">
This trace was executed inside a single service ({nodes[0].name}). No cross-service network calls were made.
</div>
)}