feat(observability): add Prometheus/Grafana/Loki/Alertmanager/Alloy stack and remove legacy Monitoring UI

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import {
 	NavLink,
 	useLocation,
 	Outlet,
+	Navigate,
 } from "react-router-dom";
 import {
 	QueryClient,
@@ -14,13 +15,13 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { AuthProvider, useAuth } from "react-oidc-context";
 import { Dashboard } from "./pages/Dashboard";
-import { Monitoring } from "./pages/Monitoring";
 import { Applications } from "./pages/Applications";
 import { Settings } from "./pages/Settings";
 import { UsersPage } from "./pages/Users";
 import { FileBrowser } from "./pages/FileBrowser";
 import { Actions } from "./pages/Actions";
 import BackupsPage from "./components/BackupsPage";
+import { ObservabilityPage } from "./components/ObservabilityPage";
 import { getOidcConfig, isOidcConfigured, setAccessToken } from "./auth";
 import { fetchAppVersion } from "./api/client";
 import { FRONTEND_VERSION_LABEL } from "./version";
@@ -80,7 +81,7 @@ function useDarkMode() {
 // Navigation items for sidebar
 const navItems = [
 	{ path: "/", label: "Dashboard", icon: LayoutDashboard },
-	{ path: "/monitoring", label: "Monitoring", icon: Activity },
+	{ path: "/observability", label: "Observability", icon: Activity },
 	{ path: "/applications", label: "Media", icon: Monitor },
 	{ path: "/files", label: "Files", icon: FolderOpen },
 	{ path: "/users", label: "Users", icon: Users },
@@ -114,9 +115,7 @@ function Sidebar({
 						<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary font-bold text-primary-foreground">
 							M
 						</div>
-						{!collapsed && (
-							<span className="font-semibold">Manage</span>
-						)}
+						{!collapsed && <span className="font-semibold">Manage</span>}
 					</div>
 					<Button
 						variant="ghost"
@@ -155,9 +154,7 @@ function Sidebar({
 											<Icon className="h-5 w-5" />
 										</NavLink>
 									</TooltipTrigger>
-									<TooltipContent side="right">
-										{item.label}
-									</TooltipContent>
+									<TooltipContent side="right">{item.label}</TooltipContent>
 								</Tooltip>
 							) : (
 								<NavLink
@@ -313,8 +310,8 @@ function ShellLayout({
 	onToggleDarkMode: () => void;
 }) {
 	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-	const [isMobile, setIsMobile] = useState(() =>
-		window.matchMedia("(max-width: 768px)").matches,
+	const [isMobile, setIsMobile] = useState(
+		() => window.matchMedia("(max-width: 768px)").matches,
 	);
 
 	useEffect(() => {
@@ -435,13 +432,14 @@ function AppInner() {
 						<Routes>
 							<Route element={<AuthenticatedApp />}>
 								<Route path="/" element={<Dashboard />} />
-								<Route path="/monitoring" element={<Monitoring />} />
+								<Route path="/monitoring" element={<Navigate to="/observability" replace />} />
 								<Route path="/applications" element={<Applications />} />
 								<Route path="/media" element={<Applications />} />
 								<Route path="/users" element={<UsersPage />} />
 								<Route path="/actions" element={<Actions />} />
 								<Route path="/files" element={<FileBrowser />} />
 								<Route path="/backups" element={<BackupsPage />} />
+								<Route path="/observability" element={<ObservabilityPage />} />
 								<Route path="/settings" element={<Settings />} />
 							</Route>
 						</Routes>
@@ -459,13 +457,14 @@ function AppInner() {
 							}
 						>
 							<Route path="/" element={<Dashboard />} />
-							<Route path="/monitoring" element={<Monitoring />} />
+							<Route path="/monitoring" element={<Navigate to="/observability" replace />} />
 							<Route path="/applications" element={<Applications />} />
 							<Route path="/media" element={<Applications />} />
 							<Route path="/users" element={<UsersPage />} />
 							<Route path="/actions" element={<Actions />} />
 							<Route path="/files" element={<FileBrowser />} />
 							<Route path="/backups" element={<BackupsPage />} />
+							<Route path="/observability" element={<ObservabilityPage />} />
 							<Route path="/settings" element={<Settings />} />
 						</Route>
 					</Routes>