+
-
setExpanded((prev) => !prev)}
- className="flex cursor-pointer flex-wrap items-center gap-x-4 gap-y-2 p-3 pl-4"
- >
-
-
-
- {issue.service}
-
+
+ {latestSample?.traceId && (
+
+ )}
+
+
+
-
- {issue.title}
-
-
-
+
{expanded && (
-
+ Strongest correlate
+ {correlate ? (
+
+ {correlate.key}={correlate.value}{" "}
+
+ {Math.round(correlate.share * 100)}% of {correlate.total} occurrences
+
+
+ ) : (
+ NO SIGNAL
+ )}
+
+
-
+
- First seen {formatRelativeTime(issue.firstSeen / 1e6)}
- {issue.affectedServices.length > 1 && (
- Affects: {issue.affectedServices.join(", ")}
- )}
+
{stacktrace && (
{issue.status === "resolved" && issue.resolvedAt ? (
Resolved {formatRelativeTime(issue.resolvedAt / 1e6)}
) : null}
+ {issue.affectedServices.length > 1 && (
+ Affects: {issue.affectedServices.join(", ")}
+ )}
-
-
+
+ )
+}
+
+const ServiceDeviationPanel = () => {
+ const { uniqueServices, serviceHealth } = useObservabilityData()
+
+ const rows = useMemo(() => {
+ return uniqueServices
+ .map((name) => {
+ const health = serviceHealth[name]
+ const total = health?.totalSignals ?? 0
+ const errors = health?.errorCount ?? 0
+ return { name, total, errors, rate: total > 0 ? errors / total : 0 }
+ })
+ .sort((a, b) => b.errors - a.errors || b.rate - a.rate)
+ .slice(0, 8)
+ }, [uniqueServices, serviceHealth])
+
+ return (
+ +
{hasMappedStacktrace ? "Source-mapped stacktrace" : "Stacktrace"}
+
)}
-
{(contextSample?.userAgent || latestSample?.userAgent) && (
-
-
-
-
- {latestSample?.traceId && (
- +
Recent occurrences ({issue.samples.length})
{[...issue.samples].reverse().map((sample, idx) => (
-
+
{new Date(sample.timestamp / 1e6).toLocaleTimeString([], {
hour12: false,
hour: "2-digit",
@@ -311,51 +420,124 @@ const IssueCard = ({
})}
))}
-
-
- )}
+
+ {rows.length === 0 ? (
+ Services by deviation
+ + {uniqueServices.length} total +Listening for service signals…
+ ) : ( +-
+ {rows.map((row) => (
+
-
+
+ {row.name}
+
+ +0 ? "bg-ds-critical" : "bg-ds-line-strong"}`} + style={{ width: `${Math.max(row.rate * 100, row.errors > 0 ? 6 : 0)}%` }} + /> ++ 0 ? "text-ds-critical" : "text-ds-text-3" + }`} + > + {row.errors > 0 ? `${(row.rate * 100).toFixed(1)}%` : "0%"} + + + ))} + + )} + + ) +} + +const IssueStatusPanel = ({ counts }: { counts: Record
+ ) } @@ -376,7 +558,8 @@ export const IssuesVisualizer = ({ onStatusChange, statusBusy, }: IssuesVisualizerProps) => { - const { selectedServices, searchQuery } = useObservabilityData() + const { selectedServices, toggleService, resetFilters, searchQuery, setSearchQuery, uniqueServices } = + useObservabilityData() const [statusFilter, setStatusFilter] = useStateIssue status
++ {segments.map((seg) => ( + + ))} ++-
+ {segments.map((seg) => (
+
- + + {seg.key} + {counts[seg.key]} + + ))} +
("all") const [kindFilter, setKindFilter] = useState ("all") const [excludeSpamIPs, setExcludeSpamIPs] = useState(false) @@ -402,7 +585,7 @@ export const IssuesVisualizer = ({ const spamIPSet = useMemo(() => new Set(spamIPs.map((entry) => entry.ip)), [spamIPs]) const statusCounts = useMemo(() => { - const counts = { all: issues.length, open: 0, resolved: 0, ignored: 0 } + const counts: Record -- Loading issues... + +) } return ( -+ Loading issues… --- -- - {showSpamIPs && ( -- Deduplicated Issues - + +- -setKindFilter(v as KindFilter), + }} + chips={chips} + addFilterOptions={addFilterOptions} + onAddFilter={(v) => toggleService(v)} + matchText={`Matching ${filteredIssues.length} of ${issues.length} issues · ${activeFilterCount} filter${activeFilterCount === 1 ? "" : "s"}`} + onClearAll={activeFilterCount > 0 ? clearAll : undefined} + /> - {/* Status filter chips */} - - {statusFilters.map(({ value, label }) => ( - - ))} -- - - - {/* Kind filter chips */} -- {kindFilters.map(({ value, label, Icon }) => ( - - ))} -- - - {filteredIssues.length} shown - -- {error && Failed to load: {error}} - - -----Promoted honeypot IPs-Used by the ingress tarpit synchronizer.+++) } diff --git a/otel-ui/src/components/RumSessionsVisualizer.tsx b/otel-ui/src/components/RumSessionsVisualizer.tsx new file mode 100644 index 0000000..4a32aeb --- /dev/null +++ b/otel-ui/src/components/RumSessionsVisualizer.tsx @@ -0,0 +1,488 @@ +import { useMemo, useState } from "react" +import { + AlertOctagon, + Copy, + ExternalLink, + Laptop, + Monitor, + Radio, + Smartphone, +} from "lucide-react" +import { useObservabilityData } from "../hooks/useObservabilityData" +import { formatRelativeTime } from "../lib/timeUtils" +import { + VITAL_THRESHOLDS, + aggregateRum, + buildRumSessions, + getVitalRating, + type RumSession, + type RumTimelineEntry, + type VitalRating, +} from "../lib/rum-utils" +import { FilterBar, type FilterChip } from "./FilterBar" + +type DeviceFilter = "all" | "mobile" | "desktop" +type SortMode = "worst" | "recent" + +const vitalTone: Record+- {spamIPsLoading &&+ {statusFilter === "all" ? "Needs attention" : `${statusTabs.find((s) => s.value === statusFilter)?.label} issues`} +
+ + {statusFilter === "all" ? `${primaryIssues.length} open` : filteredIssues.length} + + ++ {statusTabs.map((t) => ( + + ))}+Loading…} - {spamIPsError &&Failed to load: {spamIPsError}} - {!spamIPsLoading && !spamIPsError && spamIPs.length === 0 && ( -No promoted IPs.+ + {error && ( +Failed to load: {error}
)} - {spamIPs.length > 0 && ( -- {spamIPs.map((entry) => ( -- {entry.ip} - ×{entry.count} + + {showSpamIPs && ( +- )} - {filteredIssues.length === 0 ? ( -++ )} + + {!showSpamIPs && ( + + )} + + {primaryIssues.length === 0 ? ( +++ {spamIPsLoading &&++ +Promoted honeypot IPs+Used by the ingress tarpit synchronizer.Loading…} + {spamIPsError &&Failed to load: {spamIPsError}} + {!spamIPsLoading && !spamIPsError && spamIPs.length === 0 && ( +No promoted IPs.+ )} + {spamIPs.length > 0 && ( ++ {spamIPs.map((entry) => ( ++ )} ++ {entry.ip} + ×{entry.count} ++ ))} +++ ) : ( ++ + {issues.length === 0 ? "No issues detected" : "Nothing matches your filters"} +
++ {issues.length === 0 + ? "Error-status spans and error/fatal-severity logs will show up here as they arrive." + : "Try widening the scope or clearing a filter."} +
++ {primaryIssues.map((issue) => ( +)} -))} -- ) : ( ---- - {issues.length === 0 ? "No issues detected" : "No issues match your filters"} -
-- {issues.length === 0 - ? "Error-status spans and error/fatal-severity logs will show up here as they arrive." - : "Try adjusting your filters or search query."} -
+ {secondaryIssues.length > 0 && ( + <> + + {showSecondary && ( ++ {secondaryIssues.map((issue) => ( ++ )} + + )}+ ))} + - {filteredIssues.map((issue) => ( -- )} + + +- ))} - + {label} + + {value} + + {detail} ++) + +const DeviceIcon = ({ isMobile }: { isMobile: boolean }) => + isMobile ? ( ++ ) : ( + + ) + +/** The per-row "session timeline" bar: real event shape, segments sized by real elapsed time. */ +const SessionTimelineBar = ({ session }: { session: RumSession }) => { + const span = Math.max(session.lastSeen - session.firstSeen, 1) + const entries = session.timeline + if (entries.length <= 1) { + return + } + const segments = entries.slice(1).map((entry, i) => { + const prevT = entries[i].timestamp + const pct = Math.max(((entry.timestamp - prevT) / span) * 100, 3) + return { pct, severe: entry.severe } + }) + return ( + + {segments.map((seg, i) => ( + + ))} + + ) +} + +const SessionRow = ({ + session, + isSelected, + onSelect, +}: { + session: RumSession + isSelected: boolean + onSelect: () => void +}) => { + const hasIssues = session.errorCount > 0 || session.httpFailureCount > 0 + const inp = session.vitals.INP + const inpRating = inp !== undefined ? getVitalRating("INP", inp) : null + + return ( + - + +
+ ) +} + +const SessionDetail = ({ session }: { session: RumSession | null }) => { + const { setActiveTraceId, setActiveSpanId, setActiveTab } = useObservabilityData() + const [copied, setCopied] = useState(false) + + if (!session) { + return ( + + ) + } + + const latestTracedError = session.errors.find((e) => e.traceId) + + const copySessionId = () => { + void navigator.clipboard.writeText(session.id) + setCopied(true) + setTimeout(() => setCopied(false), 1200) + } + + const viewTrace = (traceId: string) => { + setActiveTraceId(traceId) + setActiveSpanId(null) + setActiveTab("tab1") + } + + return ( + + ) +} + +export const RumSessionsVisualizer = () => { + const { logs, searchQuery, setSearchQuery } = useObservabilityData() + const [deviceFilter, setDeviceFilter] = useState("all") + const [errorsOnly, setErrorsOnly] = useState(false) + const [sortMode, setSortMode] = useState ("worst") + const [selectedSessionId, setSelectedSessionId] = useState (null) + + const sessions = useMemo(() => buildRumSessions(logs), [logs]) + const aggregates = useMemo(() => aggregateRum(sessions), [sessions]) + + const filtered = useMemo(() => { + return sessions.filter((s) => { + if (deviceFilter === "mobile" && !s.device.isMobile) return false + if (deviceFilter === "desktop" && s.device.isMobile) return false + if (errorsOnly && s.errorCount === 0 && s.httpFailureCount === 0) return false + if (searchQuery) { + const q = searchQuery.toLowerCase() + const haystack = [s.id, ...s.urls, ...s.errors.map((e) => e.message)].join(" ").toLowerCase() + if (!haystack.includes(q)) return false + } + return true + }) + }, [sessions, deviceFilter, errorsOnly, searchQuery]) + + const sorted = useMemo(() => { + if (sortMode === "recent") return [...filtered].sort((a, b) => b.lastSeen - a.lastSeen) + return filtered + }, [filtered, sortMode]) + + const selected = sorted.find((s) => s.id === selectedSessionId) ?? sorted[0] ?? null + + const activeFilterCount = (deviceFilter !== "all" ? 1 : 0) + (errorsOnly ? 1 : 0) + (searchQuery ? 1 : 0) + + const chips: FilterChip[] = [ + ...(deviceFilter !== "all" + ? [ + { + id: "device", + filterKey: "device.type", + value: deviceFilter, + tone: "neutral" as const, + onRemove: () => setDeviceFilter("all"), + }, + ] + : []), + ...(errorsOnly + ? [ + { + id: "errors", + filterKey: "status", + value: "has errors", + tone: "critical" as const, + onRemove: () => setErrorsOnly(false), + }, + ] + : []), + ...(searchQuery + ? [ + { + id: "query", + filterKey: "query", + value: searchQuery, + tone: "neutral" as const, + onRemove: () => setSearchQuery(""), + }, + ] + : []), + ] + + const addFilterOptions = [ + ...(deviceFilter !== "mobile" ? [{ value: "device:mobile", label: "device.type=mobile" }] : []), + ...(deviceFilter !== "desktop" ? [{ value: "device:desktop", label: "device.type=desktop" }] : []), + ...(!errorsOnly ? [{ value: "errors:yes", label: "has errors" }] : []), + ] + + const onAddFilter = (value: string) => { + if (value === "device:mobile") setDeviceFilter("mobile") + else if (value === "device:desktop") setDeviceFilter("desktop") + else if (value === "errors:yes") setErrorsOnly(true) + } + + const clearAll = () => { + setDeviceFilter("all") + setErrorsOnly(false) + setSearchQuery("") + } + + const inpRating = aggregates.inpP75 !== null ? getVitalRating("INP", aggregates.inpP75) : null + + if (sessions.length === 0) { + return ( + ++ ) + } + + return ( ++ +++ No real-user sessions yet
++ Sessions appear here once otel-rum.js reports Web Vitals, errors, or navigation from a browser. +
+++ ) +} + +export default RumSessionsVisualizer diff --git a/otel-ui/src/components/Sidebar.tsx b/otel-ui/src/components/Sidebar.tsx deleted file mode 100644 index 1acae66..0000000 --- a/otel-ui/src/components/Sidebar.tsx +++ /dev/null @@ -1,344 +0,0 @@ -import React from "react"; -import { useObservabilityData } from "../hooks/useObservabilityData"; -import { useIssues } from "../hooks/useIssues"; -import { useStatsAvailability } from "../hooks/useStats"; - -export const Sidebar: React.FC = () => { - const { - activeTab, - setActiveTab, - traces, - logs, - metrics, - isConnected, - uniqueServices, - serviceHealth, - selectedServices, - toggleService, - resetFilters, - } = useObservabilityData(); - - const { issues } = useIssues(); - const statsAvailable = useStatsAvailability(); - - // Active open issues count - const openIssuesCount = React.useMemo(() => { - return issues.filter((i) => !i.status || i.status === "open").length; - }, [issues]); - - const errorLogCount = React.useMemo(() => { - let errs = 0; - logs.forEach((log) => { - (log.scopeLogs ?? []).forEach((sl) => { - (sl.logRecords ?? []).forEach((r) => { - if ((r.severityNumber ?? 0) >= 17) errs += 1; - }); - }); - }); - return errs; - }, [logs]); - - const totalSpans = React.useMemo(() => { - let count = 0; - traces.forEach((t) => { - (t.resourceSpans ?? []).forEach((rs) => { - (rs.scopeSpans ?? []).forEach((ss) => { - count += (ss.spans ?? []).length; - }); - }); - }); - return count; - }, [traces]); - - const { frontendCount, frontendErrorCount } = React.useMemo(() => { - let count = 0; - let errors = 0; - logs.forEach((log) => { - (log.scopeLogs ?? []).forEach((sl) => { - (sl.logRecords ?? []).forEach((r) => { - const attrs = r.attributes ?? []; - const source = attrs.find((a) => a.key === "source")?.value.stringValue; - const isRum = sl.scope?.name === "otel-rum"; - const vital = attrs.find((a) => a.key === "rum.vital")?.value.stringValue; - const isFrontend = source === "frontend" || isRum || Boolean(vital); - if (isFrontend) { - count++; - if ((r.severityNumber ?? 0) >= 17 || attrs.some((a) => a.key === "exception.type")) { - errors++; - } - } - }); - }); - }); - return { frontendCount: count, frontendErrorCount: errors }; - }, [logs]); - - const navItems = [ - { - tab: "tab0", - label: "Issues & Anomalies", - icon: "error", - badge: openIssuesCount > 0 ? `${openIssuesCount} active` : `${issues.length} total`, - badgeType: openIssuesCount > 0 ? ("error" as const) : ("outline" as const), - }, - { - tab: "tab8", - label: "Similarity Patterns", - icon: "hub", - badge: undefined, - badgeType: "outline" as const, - }, - { - tab: "tab9", - label: "Cluster Rollouts", - icon: "cloud_sync", - badge: undefined, - badgeType: "outline" as const, - }, - { - tab: "tab1", - label: "Traces & Spans", - icon: "account_tree", - badge: totalSpans > 0 ? `${totalSpans} spans` : `${traces.length} traces`, - badgeType: totalSpans > 0 ? ("secondary" as const) : ("outline" as const), - }, - { - tab: "tab3", - label: "Live Log Stream", - icon: "terminal", - badge: errorLogCount > 0 ? `${errorLogCount} err` : `${logs.length} logs`, - badgeType: errorLogCount > 0 ? ("error" as const) : ("secondary" as const), - }, - { - tab: "tab2", - label: "Metrics & APM", - icon: "query_stats", - badge: `${metrics.length} metrics`, - badgeType: "outline" as const, - }, - { - tab: "tab7", - label: "Frontend & RUM", - icon: "devices", - badge: - frontendCount > 0 - ? frontendErrorCount > 0 - ? `${frontendErrorCount} err` - : `${frontendCount} sig` - : "RUM", - badgeType: frontendErrorCount > 0 ? ("error" as const) : ("secondary" as const), - }, - ...(statsAvailable - ? [ - { - tab: "tab5", - label: "Historical Trends", - icon: "trending_up", - badge: "ClickHouse", - badgeType: "outline" as const, - }, - ] - : []), - { - tab: "tab6", - label: "Archive & Trap", - icon: "radar", - badge: "Deep Query", - badgeType: "secondary" as const, - }, - { - tab: "tab4", - label: "Setup & Agent API", - icon: "build", - badge: "RUM / Doc", - badgeType: "outline" as const, - }, - ]; - - return ( - - ); -}; diff --git a/otel-ui/src/components/Tabs.tsx b/otel-ui/src/components/Tabs.tsx index c65e1ce..05ecbad 100644 --- a/otel-ui/src/components/Tabs.tsx +++ b/otel-ui/src/components/Tabs.tsx @@ -23,7 +23,7 @@ import TraceVisualization from "./TraceVisualization" import { IssuesVisualizer } from "./IssuesVisualizer" import { SetupPanel } from "./SetupPanel" import { SearchAndWatcher } from "./SearchAndWatcher" -import { FrontendVisualizer } from "./FrontendVisualizer" +import { RumSessionsVisualizer } from "./RumSessionsVisualizer" import { ViewErrorBoundary } from "./ViewErrorBoundary" import { useObservabilityData } from "../hooks/useObservabilityData" import { useIssues } from "../hooks/useIssues" @@ -375,8 +375,8 @@ export const TabsComponent = () => { }, { value: "tab7", - label: "Frontend & RUM", - description: "Web Vitals & browser errors", + label: "RUM sessions", + description: "Real-user sessions, worst experience first", Icon: Globe, count: frontendCount, }, @@ -484,7 +484,7 @@ export const TabsComponent = () => { className="outline-none py-2" value="tab7" > - {activeTab === "tab7" &&0 ? clearAll : undefined} + /> + + ++ +0 ? Math.round((aggregates.sessionsWithErrors / aggregates.totalSessions) * 100) : 0}% of ${aggregates.totalSessions} sessions`} + tone={aggregates.sessionsWithErrors > 0 ? "critical" : "ok"} + /> + 0 ? "critical" : "ok"} + /> + 0 ? "warn" : "ok"} + /> + + +++ + +++ ++ Sessions · worst experience first +
+ ++ {(["worst", "recent"] as const).map((mode) => ( + + ))} +++ Session + Device + INP + Errors + Session timeline + Last seen ++ + {sorted.length === 0 ? ( +++ ) : ( ++ No sessions match your filters.
+-
+ {sorted.map((s) => (
+
setSelectedSessionId(s.id)} + /> + ))} + + { - const user = currentUser(); - const { - searchQuery, - setSearchQuery, - showErrorsOnly, - setShowErrorsOnly, - resetFilters, - setActiveTab, - timeWindow, - setTimeWindow, - isStreaming, - setIsStreaming, - bufferedCount, - flushBufferedStream, - minDurationMs, - setMinDurationMs, - } = useObservabilityData(); - - const { issues } = useIssues(); - const searchInputRef = useRef (null); - - const openIssuesCount = React.useMemo(() => { - return issues.filter((i) => !i.status || i.status === "open").length; - }, [issues]); - - // ⌘K / Ctrl+K keyboard shortcut to focus search - useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if ((e.metaKey || e.ctrlKey) && e.key === "k") { - e.preventDefault(); - searchInputRef.current?.focus(); - } - }; - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, []); - - return ( - - {/* Search and Time Range */} - - ); -}; diff --git a/otel-ui/src/components/layout/IconRail.tsx b/otel-ui/src/components/layout/IconRail.tsx new file mode 100644 index 0000000..cb67b85 --- /dev/null +++ b/otel-ui/src/components/layout/IconRail.tsx @@ -0,0 +1,128 @@ +import React from "react" +import { + Activity, + AlertOctagon, + CloudCog, + GitBranch, + Globe, + LineChart, + Radar, + ScrollText, + TrendingUp, + Waypoints, + Wrench, +} from "lucide-react" +import type { LucideIcon } from "lucide-react" +import { useObservabilityData } from "../../hooks/useObservabilityData" +import { useIssues } from "../../hooks/useIssues" +import { useStatsAvailability } from "../../hooks/useStats" + +interface RailItem { + tab: string + label: string + Icon: LucideIcon + dotTone?: "critical" | "warn" + dotVisible?: boolean +} + +/** + * The 72px fixed icon rail: primary navigation for every screen. Icon-only + * with a real aria-label per control (spec: "72px icon rail, fixed. 46x46 + * targets, aria-label on every one"). A small status dot only appears when + * that view has something real to flag (open issues, error logs) - it is + * never decorative. + */ +export const IconRail: React.FC = () => { + const { activeTab, setActiveTab, logs } = useObservabilityData() + const { issues } = useIssues() + const statsAvailable = useStatsAvailability() + + const openIssuesCount = React.useMemo( + () => issues.filter((i) => !i.status || i.status === "open").length, + [issues], + ) + + const errorLogCount = React.useMemo(() => { + let errs = 0 + logs.forEach((log) => { + ;(log.scopeLogs ?? []).forEach((sl) => { + ;(sl.logRecords ?? []).forEach((r) => { + if ((r.severityNumber ?? 0) >= 17) errs += 1 + }) + }) + }) + return errs + }, [logs]) + + const items: RailItem[] = [ + { tab: "tab0", label: "Triage overview", Icon: AlertOctagon, dotTone: "critical", dotVisible: openIssuesCount > 0 }, + { tab: "tab8", label: "Similarity patterns", Icon: GitBranch }, + { tab: "tab9", label: "Cluster rollouts", Icon: CloudCog }, + { tab: "tab1", label: "Traces & spans", Icon: Activity }, + { tab: "tab3", label: "Live log stream", Icon: ScrollText, dotTone: "warn", dotVisible: errorLogCount > 0 }, + { tab: "tab2", label: "Metrics & APM", Icon: LineChart }, + { tab: "tab7", label: "RUM sessions", Icon: Globe }, + ...(statsAvailable ? [{ tab: "tab5", label: "Historical trends", Icon: TrendingUp }] : []), + { tab: "tab6", label: "Archive & trap", Icon: Radar }, + ] + + return ( + + ) +} + +export default IconRail diff --git a/otel-ui/src/components/layout/TopBar.tsx b/otel-ui/src/components/layout/TopBar.tsx new file mode 100644 index 0000000..4221ff2 --- /dev/null +++ b/otel-ui/src/components/layout/TopBar.tsx @@ -0,0 +1,163 @@ +import React, { useEffect, useRef, useState } from "react" +import { LogIn, Moon, Search, Sun } from "lucide-react" +import { useObservabilityData } from "../../hooks/useObservabilityData" +import { currentUser, login, logout } from "../../lib/auth" +import { getTheme, setTheme, type ThemeMode } from "../../lib/theme" +import type { TimeWindow } from "../../contexts/ObservabilityContextValue" + +const TIME_WINDOWS: { value: TimeWindow; label: string }[] = [ + { value: "15m", label: "15m" }, + { value: "1h", label: "1h" }, + { value: "6h", label: "6h" }, + { value: "24h", label: "24h" }, + { value: "all", label: "All" }, +] + +/** + * 56-60px top bar: connection context on the left, search in the middle, + * time range and identity on the right (design spec layout section). + */ +export const TopBar: React.FC = () => { + const user = currentUser() + const { searchQuery, setSearchQuery, timeWindow, setTimeWindow, isConnected } = + useObservabilityData() + const searchInputRef = useRef- {/* Global Search Bar */} -- - {/* Action Buttons & Streaming Controls */} -- - search - - setSearchQuery(e.target.value)} - placeholder="⌘K search attributes, services, traceId, spanId, or log payload..." - className="w-full h-8 pl-8 pr-16 rounded-lg bg-surface-container-low text-on-surface font-mono text-xs placeholder:text-outline focus:outline-none focus:bg-surface-container transition-colors border border-surface-container/40" - /> -- - {/* Real Time Window Selector */} -- - ⌘ - - - K - --- - schedule - - {(["15m", "1h", "6h", "24h", "all"] as const).map((w) => ( - - ))} --- {/* Real Streaming Pause/Resume Button */} - - - {/* All vs Errors Toggle */} --- - -- - {/* Slow Spans Toggle (>500ms) */} - - - - - - - {/* Active Issues / Incident Counter Button */} - - - {/* User Account / Auth */} - {user ? ( --- ) : ( - - )} -- {(user.name || user.email || user.sub).charAt(0).toUpperCase()} --- - {user.name || user.email?.split("@")[0] || user.sub} - - --(null) + const [theme, setThemeState] = useState (() => getTheme()) + + const toggleTheme = () => { + const next: ThemeMode = theme === "dark" ? "light" : "dark" + setTheme(next) + setThemeState(next) + } + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && e.key === "k") { + e.preventDefault() + searchInputRef.current?.focus() + } + } + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, []) + + return ( + + + ) +} + +export default TopBar diff --git a/otel-ui/src/index.css b/otel-ui/src/index.css index 559d937..fbb0a6c 100644 --- a/otel-ui/src/index.css +++ b/otel-ui/src/index.css @@ -55,9 +55,85 @@ --color-outline: #849495; --color-outline-variant: #3b494b; - --font-headline: "Geist", sans-serif; - --font-body: "Inter", sans-serif; - --font-mono: "JetBrains Mono", monospace; + --font-headline: "Bricolage Grotesque", "Geist", sans-serif; + --font-body: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif; + --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace; +} + +/* + * Design-spec tokens ("ds-*"): the neutral-chrome, colour-is-signal palette + * from the Stackship observability console spec. Namespaced separately from + * the legacy --color-* tokens above so screens can migrate one at a time + * without the old MD3 palette and the new spec palette fighting over the + * same variable names. New screens (icon rail, top bar, filter bar, triage + * overview) are built on --color-ds-*; unconverted tabs keep using the + * tokens above until they're redesigned too. + */ +:root { + --ds-bg: #0d1014; + --ds-chrome: #0b0e12; + --ds-surface: #14181e; + --ds-surface-2: #191e26; + --ds-fill: #1d232b; + --ds-line: #242b34; + --ds-line-strong: #2a313b; + --ds-text: #e8ecf2; + --ds-text-2: #98a3b2; + --ds-text-3: #8b96a6; + --ds-critical: #ff6f5e; + --ds-critical-bg: #2b1512; + --ds-warn: #f0b24a; + --ds-warn-bg: #2a2011; + --ds-ok: #4fcf9a; + --ds-accent: #7b8cff; + --ds-accent-bg: #161b33; + --ds-on-accent: var(--ds-chrome); +} + +:root[data-theme="light"] { + --ds-bg: #f4f2ed; + --ds-chrome: #ffffff; + --ds-surface: #ffffff; + --ds-surface-2: #f7f5f0; + --ds-fill: #edeae3; + --ds-line: #e3e0d8; + --ds-line-strong: #d6d2c8; + --ds-text: #161a1f; + --ds-text-2: #4f5964; + --ds-text-3: #6b7480; + --ds-critical: #c4402c; + --ds-critical-bg: #fbe9e5; + --ds-warn: #8a5d0e; + --ds-warn-bg: #f9efda; + --ds-ok: #1f7a56; + --ds-accent: #3b4fc4; + --ds-accent-bg: #e9ecfb; + --ds-on-accent: #ffffff; +} + +@theme { + --color-ds-bg: var(--ds-bg); + --color-ds-chrome: var(--ds-chrome); + --color-ds-surface: var(--ds-surface); + --color-ds-surface-2: var(--ds-surface-2); + --color-ds-fill: var(--ds-fill); + --color-ds-line: var(--ds-line); + --color-ds-line-strong: var(--ds-line-strong); + --color-ds-text: var(--ds-text); + --color-ds-text-2: var(--ds-text-2); + --color-ds-text-3: var(--ds-text-3); + --color-ds-critical: var(--ds-critical); + --color-ds-critical-bg: var(--ds-critical-bg); + --color-ds-warn: var(--ds-warn); + --color-ds-warn-bg: var(--ds-warn-bg); + --color-ds-ok: var(--ds-ok); + --color-ds-accent: var(--ds-accent); + --color-ds-accent-bg: var(--ds-accent-bg); + --color-ds-on-accent: var(--ds-on-accent); + + --font-display: "Bricolage Grotesque", "Geist", sans-serif; + --font-ui: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif; + --font-data: "IBM Plex Mono", "JetBrains Mono", monospace; } @layer base { diff --git a/otel-ui/src/lib/issue-utils.ts b/otel-ui/src/lib/issue-utils.ts index aed225f..3164097 100644 --- a/otel-ui/src/lib/issue-utils.ts +++ b/otel-ui/src/lib/issue-utils.ts @@ -93,3 +93,100 @@ export function sampleContext(sample: IssueSample): string[] { if (sample.httpStatus) parts.push(String(sample.httpStatus)) return parts } + +/** Severity presentation tone, derived from real triage state - never invented. */ +export type SeverityTone = "critical" | "warn" | "ok" | "muted" + +export function issueSeverityTone(issue: Issue): SeverityTone { + const status = issueStatusOf(issue) + if (status === "resolved") return "ok" + if (status === "ignored") return "muted" + // Open frontend/span errors block a user-facing request; open log errors + // are noteworthy but not necessarily user-visible, so they read as a + // warning rather than critical. + return issue.kind === "log_error" ? "warn" : "critical" +} + +export interface Correlate { + key: string + value: string + share: number + count: number + total: number +} + +/** + * The single attribute value that best separates this issue's occurrences - + * i.e. the most common (key, value) pair across its samples. Attributes that + * are present on every sample the same way (say, a route that never varies) + * are still a legitimate correlate; this only reports what's actually there. + */ +export function strongestCorrelate(issue: Issue): Correlate | null { + const tally = new Map+ + Stackship + + + + {isConnected ? "Live" : "Reconnecting"} + ++ ++ ++ ++ setSearchQuery(e.target.value)} + placeholder="Search trace id, service, route, user…" + className="h-9 w-full rounded-[9px] border border-ds-line bg-ds-surface-2 pl-9 pr-14 font-[family-name:var(--font-data)] text-[13px] text-ds-text placeholder:text-ds-text-3 focus:outline-none focus:ring-1 focus:ring-ds-accent" + /> + + + ⌘ + + + K + + + + {TIME_WINDOWS.map((w) => ( + + ))} ++ + + + {user ? ( ++ + {(user.name || user.email || user.sub).charAt(0).toUpperCase()} + ++ ) : ( + + )} ++ + {user.name || user.email?.split("@")[0] || user.sub} + + ++() + const vitals: Partial () + const inpValues: number[] = [] + + for (const s of sessions) { + if (s.errorCount > 0 || s.httpFailureCount > 0) sessionsWithErrors += 1 + totalJsErrors += s.errorCount + totalHttpFailures += s.httpFailureCount + for (const e of s.errors) { + if (e.kind === "js") distinctMessages.add(e.message) + } + if (s.vitals.INP !== undefined) inpValues.push(s.vitals.INP) + } + + inpValues.sort((a, b) => a - b) + const inpP75 = + inpValues.length > 0 ? inpValues[Math.min(Math.floor(inpValues.length * 0.75), inpValues.length - 1)] : null + + return { + totalSessions: sessions.length, + sessionsWithErrors, + totalJsErrors, + distinctJsErrorMessages: distinctMessages.size, + totalHttpFailures, + inpP75, + } +} diff --git a/otel-ui/src/lib/theme.ts b/otel-ui/src/lib/theme.ts new file mode 100644 index 0000000..85d106c --- /dev/null +++ b/otel-ui/src/lib/theme.ts @@ -0,0 +1,26 @@ +// Theme is a per-viewer convenience (which palette to render), not app +// state, so it lives in localStorage rather than the observability context. +// Only the redesigned screens (icon rail, top bar, filter bar, triage +// overview) read the ds-* tokens this switches between - see index.css. +const STORAGE_KEY = "otel.ui.theme" + +export type ThemeMode = "dark" | "light" + +export function getTheme(): ThemeMode { + if (typeof document === "undefined") return "dark" + return document.documentElement.dataset.theme === "light" ? "light" : "dark" +} + +export function setTheme(theme: ThemeMode): void { + if (typeof document === "undefined") return + if (theme === "light") { + document.documentElement.dataset.theme = "light" + } else { + delete document.documentElement.dataset.theme + } + try { + localStorage.setItem(STORAGE_KEY, theme) + } catch { + // Private browsing / blocked storage: the choice just won't persist. + } +}