more otel

2026-09-18 20:51:37 +00:00
1 parent 9620e3bfa6
commit 21f04d696b
@@ -0,0 +1,126 @@
+import { useState, useEffect, useRef } from "react";
+import { useObservabilityData } from "./hooks/useObservabilityData";
+import { Sidebar } from "./components/Sidebar";
+import { TopHeader } from "./components/TopHeader";
+import { CommandAndQueryBar } from "./components/CommandAndQueryBar";
+import { WaveformHistogram } from "./components/WaveformHistogram";
+import { EntryVisualization } from "./components/EntryVisualization";
+import { handleCallback, login } from "./lib/auth";
+
+function AuthCallbackView() {
+  const [error, setError] = useState<string | null>(null);
+  const handledRef = useRef(false);
+
+  useEffect(() => {
+    if (handledRef.current) return;
+    handledRef.current = true;
+
+    handleCallback()
+      .then(() => {
+        window.location.href = "/";
+      })
+      .catch((err) => {
+        console.error("Authentication callback error:", err);
+        setError(err instanceof Error ? err.message : String(err));
+      });
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-background text-on-surface flex items-center justify-center p-6">
+      <div className="max-w-md w-full rounded-2xl border border-surface-container bg-surface-container-low p-8 text-center shadow-xl">
+        {error ? (
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-14 h-14 rounded-full bg-error-container text-on-error-container flex items-center justify-center">
+              <span className="material-symbols-outlined text-[32px]">error</span>
+            </div>
+            <div>
+              <h2 className="text-lg font-bold text-error">Authentication Failed</h2>
+              <p className="text-xs text-outline mt-1">{error}</p>
+            </div>
+            <button
+              type="button"
+              onClick={() => login()}
+              className="mt-2 px-4 py-2 rounded bg-primary text-on-primary font-mono text-xs hover:bg-primary/90 transition-colors"
+            >
+              Try again
+            </button>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-14 h-14 rounded-full bg-primary/10 text-primary flex items-center justify-center animate-pulse">
+              <span className="material-symbols-outlined text-[32px]">lock</span>
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-on-surface">Completing sign in</h2>
+              <p className="text-xs text-outline mt-1">Exchanging authorization code with OIDC provider…</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  const { isConnected, traces, logs, metrics } = 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="));
+
+  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 />
+
+      {/* Main Content Area offset by pl-72 */}
+      <div className="pl-72">
+        {/* Fixed Top Header Bar */}
+        <TopHeader />
+
+        {/* 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 />
+
+            {/* Ingest & Incident Waveform Histogram */}
+            <WaveformHistogram />
+
+            {/* Telemetry Visualizations & Views */}
+            <section className="relative flex-1 flex flex-col min-h-0">
+              {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>
+                  <div>
+                    <p className="text-base font-semibold text-on-surface">
+                      Establishing telemetry pipeline
+                    </p>
+                    <p className="text-xs text-outline mt-1 max-w-sm mx-auto">
+                      Connecting to OTLP collector. Listening for incoming traces, logs, and metrics.
+                    </p>
+                  </div>
+                </div>
+              )}
+            </section>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+
+}
+
+export default App;