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

redesgin

Browse Source
This commit is contained in:
mats committed 2026-09-19 09:07:14 +02:00
1 parent 21f04d696b
commit 5792e9c037
16 files changed
+2101 -2109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

otel-ui/src/App.tsx
+31 -24
View File
@@ -1,7 +1,8 @@
import { useState, useEffect, useRef } from "react";
import { CloudCog } from "lucide-react";
import { useObservabilityData } from "./hooks/useObservabilityData";
import { Sidebar } from "./components/Sidebar";
import { TopHeader } from "./components/TopHeader";
import { IconRail } from "./components/layout/IconRail";
import { TopBar } from "./components/layout/TopBar";
import { CommandAndQueryBar } from "./components/CommandAndQueryBar";
import { WaveformHistogram } from "./components/WaveformHistogram";
import { EntryVisualization } from "./components/EntryVisualization";
@@ -62,53 +63,59 @@ function AuthCallbackView() {
}
function App() {
const { isConnected, traces, logs, metrics } = useObservabilityData();
const { isConnected, traces, logs, metrics, activeTab } = useObservabilityData();
const hasLoadedAnyData = traces.length > 0 || logs.length > 0 || metrics.length > 0;
const isCallback =
typeof window !== "undefined" &&
(window.location.pathname === "/auth_callback" ||
window.location.search.includes("code="));
// 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";
if (isCallback) {
return <AuthCallbackView />;
}
return (
<div className="bg-background font-body text-on-surface min-h-screen antialiased selection:bg-primary-container selection:text-on-primary-container">
{/* Fixed Left Navigation Sidebar (w-72) */}
<Sidebar />
<div className="bg-ds-bg font-body text-ds-text min-h-screen antialiased selection:bg-ds-accent-bg selection:text-ds-accent">
{/* Fixed 72px icon rail */}
<IconRail />
{/* Main Content Area offset by pl-72 */}
<div className="pl-72">
{/* Fixed Top Header Bar */}
<TopHeader />
{/* Main Content Area offset by the rail width */}
<div className="pl-[72px]">
{/* Fixed top bar */}
<TopBar />
{/* Main Telemetry Console View */}
<main className="relative pt-18 w-full px-6 bg-background min-h-screen pb-12">
<div className="flex flex-col w-full">
{/* Real Anomaly Radar & Filter Bar */}
<CommandAndQueryBar />
<main className="relative w-full bg-ds-bg pb-12 pt-[58px]">
<div className="flex w-full flex-col px-6">
{!isTriageOverview && (
<>
{/* Real Anomaly Radar & Filter Bar */}
<CommandAndQueryBar />
{/* Ingest & Incident Waveform Histogram */}
<WaveformHistogram />
{/* Ingest & Incident Waveform Histogram */}
<WaveformHistogram />
</>
)}
{/* Telemetry Visualizations & Views */}
<section className="relative flex-1 flex flex-col min-h-0">
<section className="relative flex min-h-0 flex-1 flex-col">
{isConnected || hasLoadedAnyData ? (
<EntryVisualization />
) : (
<div className="flex h-full min-h-[360px] flex-col items-center justify-center gap-4 text-center rounded-2xl border border-dashed border-surface-container-high p-12 bg-surface-container-lowest">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-surface-container-high text-primary-container shadow-lg animate-pulse">
<span className="material-symbols-outlined text-[32px]">
cloud_sync
</span>
<div className="flex h-full min-h-[360px] flex-col items-center justify-center gap-4 rounded-[14px] border border-dashed border-ds-line bg-ds-surface p-12 text-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-ds-accent-bg text-ds-accent">
<CloudCog className="h-8 w-8 animate-pulse" aria-hidden="true" />
</div>
<div>
<p className="text-base font-semibold text-on-surface">
<p className="text-base font-semibold text-ds-text">
Establishing telemetry pipeline
</p>
<p className="text-xs text-outline mt-1 max-w-sm mx-auto">
<p className="mx-auto mt-1 max-w-sm text-xs text-ds-text-3">
Connecting to OTLP collector. Listening for incoming traces, logs, and metrics.
</p>
</div>