mirror of
https://github.com/LittleQuartZ/addmon.git
synced 2026-02-07 02:45:28 +07:00
refactor: move monitor page to index route and configure Tauri window
- Move monitor page content from /monitor to / (index route) - Create placeholder monitor_.tsx route - Remove Header component from root layout - Configure Tauri window with transparent titlebar and dark background - Enable macOS private API for window styling
This commit is contained in:
parent
c145d3fb07
commit
5929358754
7 changed files with 357 additions and 355 deletions
|
|
@ -21,7 +21,7 @@ tauri-build = { version = "2.5.3", features = [] }
|
|||
serde_json = "1.0"
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
log = "0.4"
|
||||
tauri = { version = "2.9.5", features = [] }
|
||||
tauri = { version = "2.9.5", features = ["macos-private-api"] }
|
||||
tauri-plugin-log = "2"
|
||||
tauri-plugin-fs = "2"
|
||||
tauri-plugin-dialog = "2"
|
||||
|
|
|
|||
|
|
@ -16,9 +16,12 @@
|
|||
"width": 800,
|
||||
"height": 600,
|
||||
"resizable": true,
|
||||
"fullscreen": false
|
||||
"fullscreen": false,
|
||||
"titleBarStyle": "Transparent",
|
||||
"backgroundColor": "#0a0a0a"
|
||||
}
|
||||
],
|
||||
"macOSPrivateApi": true,
|
||||
"security": {
|
||||
"csp": null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as MonitorRouteImport } from './routes/monitor'
|
||||
import { Route as MonitorRouteImport } from './routes/monitor_'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
|
||||
const MonitorRoute = MonitorRouteImport.update({
|
||||
id: '/monitor',
|
||||
id: '/monitor_',
|
||||
path: '/monitor',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
|
|
@ -34,14 +34,14 @@ export interface FileRoutesByTo {
|
|||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/monitor': typeof MonitorRoute
|
||||
'/monitor_': typeof MonitorRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/monitor'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/' | '/monitor'
|
||||
id: '__root__' | '/' | '/monitor'
|
||||
id: '__root__' | '/' | '/monitor_'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
|
|
@ -51,8 +51,8 @@ export interface RootRouteChildren {
|
|||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/monitor': {
|
||||
id: '/monitor'
|
||||
'/monitor_': {
|
||||
id: '/monitor_'
|
||||
path: '/monitor'
|
||||
fullPath: '/monitor'
|
||||
preLoaderRoute: typeof MonitorRouteImport
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { HeadContent, Outlet, createRootRouteWithContext } from "@tanstack/react-router";
|
||||
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
||||
|
||||
import Header from "@/components/header";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
|
||||
import "../index.css";
|
||||
|
||||
export interface RouterAppContext {}
|
||||
export interface RouterAppContext { }
|
||||
|
||||
export const Route = createRootRouteWithContext<RouterAppContext>()({
|
||||
component: RootComponent,
|
||||
|
|
@ -41,7 +40,7 @@ function RootComponent() {
|
|||
storageKey="vite-ui-theme"
|
||||
>
|
||||
<div className="grid grid-rows-[auto_1fr] h-svh">
|
||||
<Header />
|
||||
{/*<Header />*/}
|
||||
<Outlet />
|
||||
</div>
|
||||
<Toaster richColors />
|
||||
|
|
|
|||
|
|
@ -1,33 +1,321 @@
|
|||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { readTextFile } from "@tauri-apps/plugin-fs";
|
||||
import { FileUp, Filter, Search } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { AlertList } from "@/components/monitor/alert-list";
|
||||
import { IncidentManager } from "@/components/monitor/incident-manager";
|
||||
import { KpiDashboard } from "@/components/monitor/kpi-dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { Incident, KpiMetrics, ProcessedAlert } from "@/lib/types/alerts";
|
||||
|
||||
type StatusFilter = "all" | "resolved" | "unresolved";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: HomeComponent,
|
||||
component: MonitorPage,
|
||||
});
|
||||
|
||||
const TITLE_TEXT = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
||||
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
||||
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
||||
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
||||
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
||||
function MonitorPage() {
|
||||
const [alerts, setAlerts] = React.useState<ProcessedAlert[]>([]);
|
||||
const [incidents, setIncidents] = React.useState<Incident[]>([]);
|
||||
const [kpis, setKpis] = React.useState<KpiMetrics | null>(null);
|
||||
const [selectedAlert, setSelectedAlert] =
|
||||
React.useState<ProcessedAlert | null>(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = React.useState("");
|
||||
const [statusFilter, setStatusFilter] = React.useState<StatusFilter>("all");
|
||||
|
||||
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
||||
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
||||
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
||||
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
||||
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
||||
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
||||
`;
|
||||
const filteredAlerts = React.useMemo(() => {
|
||||
return alerts.filter((alert) => {
|
||||
if (statusFilter === "resolved" && !alert.isResolved) return false;
|
||||
if (statusFilter === "unresolved" && alert.isResolved) return false;
|
||||
|
||||
if (!searchQuery.trim()) return true;
|
||||
|
||||
const query = searchQuery.toLowerCase();
|
||||
if (alert.alertName?.toLowerCase().includes(query)) return true;
|
||||
|
||||
for (const value of Object.values(alert.labels)) {
|
||||
if (value.toLowerCase().includes(query)) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}, [alerts, searchQuery, statusFilter]);
|
||||
|
||||
const selectAllState = React.useMemo(() => {
|
||||
if (filteredAlerts.length === 0) return "none" as const;
|
||||
const invalidCount = filteredAlerts.filter((a) => a.isInvalid).length;
|
||||
if (invalidCount === 0) return "none" as const;
|
||||
if (invalidCount === filteredAlerts.length) return "all" as const;
|
||||
return "some" as const;
|
||||
}, [filteredAlerts]);
|
||||
|
||||
const recalculateKpis = React.useCallback(
|
||||
async (currentAlerts: ProcessedAlert[], currentIncidents: Incident[]) => {
|
||||
try {
|
||||
const newKpis = await invoke<KpiMetrics>("calculate_kpis_command", {
|
||||
alerts: currentAlerts,
|
||||
incidents: currentIncidents,
|
||||
});
|
||||
setKpis(newKpis);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleLoadFile = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const filePath = await open({
|
||||
multiple: false,
|
||||
filters: [{ name: "JSON", extensions: ["json"] }],
|
||||
});
|
||||
|
||||
if (!filePath) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const content = await readTextFile(filePath);
|
||||
|
||||
const processedAlerts = await invoke<ProcessedAlert[]>(
|
||||
"process_alerts_json",
|
||||
{ jsonContent: content },
|
||||
);
|
||||
|
||||
setAlerts(processedAlerts);
|
||||
setSelectedAlert(null);
|
||||
await recalculateKpis(processedAlerts, incidents);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleInvalid = (alertId: number, isInvalid: boolean) => {
|
||||
setAlerts((prev) => {
|
||||
const updated = prev.map((a) =>
|
||||
a.id === alertId ? { ...a, isInvalid } : a,
|
||||
);
|
||||
recalculateKpis(updated, incidents);
|
||||
return updated;
|
||||
});
|
||||
|
||||
if (selectedAlert?.id === alertId) {
|
||||
setSelectedAlert((prev) => (prev ? { ...prev, isInvalid } : null));
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleAllInvalid = (isInvalid: boolean) => {
|
||||
const filteredIds = new Set(filteredAlerts.map((a) => a.id));
|
||||
setAlerts((prev) => {
|
||||
const updated = prev.map((a) =>
|
||||
filteredIds.has(a.id) ? { ...a, isInvalid } : a,
|
||||
);
|
||||
recalculateKpis(updated, incidents);
|
||||
return updated;
|
||||
});
|
||||
|
||||
if (selectedAlert && filteredIds.has(selectedAlert.id)) {
|
||||
setSelectedAlert((prev) => (prev ? { ...prev, isInvalid } : null));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAlert = (alert: ProcessedAlert) => {
|
||||
setSelectedAlert(alert);
|
||||
};
|
||||
|
||||
const handleAddIncident = (incident: Omit<Incident, "attachedAlertIds">) => {
|
||||
const newIncident: Incident = {
|
||||
...incident,
|
||||
attachedAlertIds: [],
|
||||
};
|
||||
const newIncidents = [...incidents, newIncident];
|
||||
setIncidents(newIncidents);
|
||||
recalculateKpis(alerts, newIncidents);
|
||||
};
|
||||
|
||||
const handleAttachAlert = (alertId: number, incidentId: string) => {
|
||||
const updatedAlerts = alerts.map((a) =>
|
||||
a.id === alertId ? { ...a, attachedIncidentId: incidentId } : a,
|
||||
);
|
||||
const updatedIncidents = incidents.map((i) =>
|
||||
i.id === incidentId && !i.attachedAlertIds.includes(alertId)
|
||||
? { ...i, attachedAlertIds: [...i.attachedAlertIds, alertId] }
|
||||
: i,
|
||||
);
|
||||
|
||||
setAlerts(updatedAlerts);
|
||||
setIncidents(updatedIncidents);
|
||||
recalculateKpis(updatedAlerts, updatedIncidents);
|
||||
|
||||
if (selectedAlert?.id === alertId) {
|
||||
setSelectedAlert((prev) =>
|
||||
prev ? { ...prev, attachedIncidentId: incidentId } : null,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDetachAlert = (alertId: number) => {
|
||||
const alert = alerts.find((a) => a.id === alertId);
|
||||
const incidentId = alert?.attachedIncidentId;
|
||||
|
||||
const updatedAlerts = alerts.map((a) =>
|
||||
a.id === alertId ? { ...a, attachedIncidentId: null } : a,
|
||||
);
|
||||
const updatedIncidents = incidentId
|
||||
? incidents.map((i) =>
|
||||
i.id === incidentId
|
||||
? {
|
||||
...i,
|
||||
attachedAlertIds: i.attachedAlertIds.filter(
|
||||
(aid) => aid !== alertId,
|
||||
),
|
||||
}
|
||||
: i,
|
||||
)
|
||||
: incidents;
|
||||
|
||||
setAlerts(updatedAlerts);
|
||||
setIncidents(updatedIncidents);
|
||||
recalculateKpis(updatedAlerts, updatedIncidents);
|
||||
|
||||
if (selectedAlert?.id === alertId) {
|
||||
setSelectedAlert((prev) =>
|
||||
prev ? { ...prev, attachedIncidentId: null } : null,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function HomeComponent() {
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-4 py-2">
|
||||
<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
||||
<div className="grid gap-6">
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
</section>
|
||||
<div className="flex h-screen flex-col overflow-hidden">
|
||||
<header className="flex shrink-0 items-center justify-between border-b px-4 py-3">
|
||||
<h1 className="text-sm font-semibold">Alert Monitor</h1>
|
||||
<Button onClick={handleLoadFile} disabled={isLoading} size="sm">
|
||||
<FileUp className="mr-2 size-4" />
|
||||
{isLoading ? "Loading..." : "Load Alerts JSON"}
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{error && (
|
||||
<div className="shrink-0 border-b border-destructive/50 bg-destructive/10 px-4 py-2 text-xs text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="shrink-0 border-b p-4">
|
||||
<KpiDashboard kpis={kpis} isLoading={isLoading} />
|
||||
</div>
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
|
||||
<div className="flex min-h-0 flex-col border-r">
|
||||
<div className="flex shrink-0 items-center gap-2 border-b px-4 py-2">
|
||||
<Checkbox
|
||||
checked={selectAllState === "all"}
|
||||
indeterminate={selectAllState === "some"}
|
||||
onCheckedChange={(checked) =>
|
||||
handleToggleAllInvalid(checked === true)
|
||||
}
|
||||
disabled={filteredAlerts.length === 0}
|
||||
aria-label="Mark all filtered as invalid"
|
||||
/>
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{filteredAlerts.length}
|
||||
{(searchQuery || statusFilter !== "all") && ` / ${alerts.length}`}
|
||||
</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button variant="ghost" size="sm" className="h-7 gap-1 px-2">
|
||||
<Filter className="size-3" />
|
||||
<span className="text-xs">
|
||||
{statusFilter === "all"
|
||||
? "All"
|
||||
: statusFilter === "resolved"
|
||||
? "Resolved"
|
||||
: "Unresolved"}
|
||||
</span>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuRadioGroup
|
||||
value={statusFilter}
|
||||
onValueChange={(v) => setStatusFilter(v as StatusFilter)}
|
||||
>
|
||||
<DropdownMenuRadioItem value="all">All</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="resolved">
|
||||
Resolved
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="unresolved">
|
||||
Unresolved
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="relative ml-auto flex-1 max-w-xs">
|
||||
<Search className="absolute left-2 top-1/2 size-3 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search alerts..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="h-7 pl-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{alerts.length === 0 ? (
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>No Alerts Loaded</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-xs text-muted-foreground">
|
||||
Click "Load Alerts JSON" to import alert data from a Grafana
|
||||
Alerts API export.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<AlertList
|
||||
alerts={filteredAlerts}
|
||||
incidents={incidents}
|
||||
onToggleInvalid={handleToggleInvalid}
|
||||
onSelectAlert={handleSelectAlert}
|
||||
selectedAlertId={selectedAlert?.id}
|
||||
className="flex-1"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 overflow-hidden">
|
||||
<IncidentManager
|
||||
incidents={incidents}
|
||||
selectedAlert={selectedAlert}
|
||||
onAddIncident={handleAddIncident}
|
||||
onAttachAlert={handleAttachAlert}
|
||||
onDetachAlert={handleDetachAlert}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,322 +0,0 @@
|
|||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { readTextFile } from "@tauri-apps/plugin-fs";
|
||||
import { FileUp, Filter, Search } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { AlertList } from "@/components/monitor/alert-list";
|
||||
import { IncidentManager } from "@/components/monitor/incident-manager";
|
||||
import { KpiDashboard } from "@/components/monitor/kpi-dashboard";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { Incident, KpiMetrics, ProcessedAlert } from "@/lib/types/alerts";
|
||||
|
||||
type StatusFilter = "all" | "resolved" | "unresolved";
|
||||
|
||||
export const Route = createFileRoute("/monitor")({
|
||||
component: MonitorPage,
|
||||
});
|
||||
|
||||
function MonitorPage() {
|
||||
const [alerts, setAlerts] = React.useState<ProcessedAlert[]>([]);
|
||||
const [incidents, setIncidents] = React.useState<Incident[]>([]);
|
||||
const [kpis, setKpis] = React.useState<KpiMetrics | null>(null);
|
||||
const [selectedAlert, setSelectedAlert] =
|
||||
React.useState<ProcessedAlert | null>(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = React.useState("");
|
||||
const [statusFilter, setStatusFilter] = React.useState<StatusFilter>("all");
|
||||
|
||||
const filteredAlerts = React.useMemo(() => {
|
||||
return alerts.filter((alert) => {
|
||||
if (statusFilter === "resolved" && !alert.isResolved) return false;
|
||||
if (statusFilter === "unresolved" && alert.isResolved) return false;
|
||||
|
||||
if (!searchQuery.trim()) return true;
|
||||
|
||||
const query = searchQuery.toLowerCase();
|
||||
if (alert.alertName?.toLowerCase().includes(query)) return true;
|
||||
|
||||
for (const value of Object.values(alert.labels)) {
|
||||
if (value.toLowerCase().includes(query)) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}, [alerts, searchQuery, statusFilter]);
|
||||
|
||||
const selectAllState = React.useMemo(() => {
|
||||
if (filteredAlerts.length === 0) return "none" as const;
|
||||
const invalidCount = filteredAlerts.filter((a) => a.isInvalid).length;
|
||||
if (invalidCount === 0) return "none" as const;
|
||||
if (invalidCount === filteredAlerts.length) return "all" as const;
|
||||
return "some" as const;
|
||||
}, [filteredAlerts]);
|
||||
|
||||
const recalculateKpis = React.useCallback(
|
||||
async (currentAlerts: ProcessedAlert[], currentIncidents: Incident[]) => {
|
||||
try {
|
||||
const newKpis = await invoke<KpiMetrics>("calculate_kpis_command", {
|
||||
alerts: currentAlerts,
|
||||
incidents: currentIncidents,
|
||||
});
|
||||
setKpis(newKpis);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleLoadFile = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const filePath = await open({
|
||||
multiple: false,
|
||||
filters: [{ name: "JSON", extensions: ["json"] }],
|
||||
});
|
||||
|
||||
if (!filePath) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const content = await readTextFile(filePath);
|
||||
|
||||
const processedAlerts = await invoke<ProcessedAlert[]>(
|
||||
"process_alerts_json",
|
||||
{ jsonContent: content },
|
||||
);
|
||||
|
||||
setAlerts(processedAlerts);
|
||||
setSelectedAlert(null);
|
||||
await recalculateKpis(processedAlerts, incidents);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleInvalid = (alertId: number, isInvalid: boolean) => {
|
||||
setAlerts((prev) => {
|
||||
const updated = prev.map((a) =>
|
||||
a.id === alertId ? { ...a, isInvalid } : a,
|
||||
);
|
||||
recalculateKpis(updated, incidents);
|
||||
return updated;
|
||||
});
|
||||
|
||||
if (selectedAlert?.id === alertId) {
|
||||
setSelectedAlert((prev) => (prev ? { ...prev, isInvalid } : null));
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleAllInvalid = (isInvalid: boolean) => {
|
||||
const filteredIds = new Set(filteredAlerts.map((a) => a.id));
|
||||
setAlerts((prev) => {
|
||||
const updated = prev.map((a) =>
|
||||
filteredIds.has(a.id) ? { ...a, isInvalid } : a,
|
||||
);
|
||||
recalculateKpis(updated, incidents);
|
||||
return updated;
|
||||
});
|
||||
|
||||
if (selectedAlert && filteredIds.has(selectedAlert.id)) {
|
||||
setSelectedAlert((prev) => (prev ? { ...prev, isInvalid } : null));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectAlert = (alert: ProcessedAlert) => {
|
||||
setSelectedAlert(alert);
|
||||
};
|
||||
|
||||
const handleAddIncident = (incident: Omit<Incident, "attachedAlertIds">) => {
|
||||
const newIncident: Incident = {
|
||||
...incident,
|
||||
attachedAlertIds: [],
|
||||
};
|
||||
const newIncidents = [...incidents, newIncident];
|
||||
setIncidents(newIncidents);
|
||||
recalculateKpis(alerts, newIncidents);
|
||||
};
|
||||
|
||||
const handleAttachAlert = (alertId: number, incidentId: string) => {
|
||||
const updatedAlerts = alerts.map((a) =>
|
||||
a.id === alertId ? { ...a, attachedIncidentId: incidentId } : a,
|
||||
);
|
||||
const updatedIncidents = incidents.map((i) =>
|
||||
i.id === incidentId && !i.attachedAlertIds.includes(alertId)
|
||||
? { ...i, attachedAlertIds: [...i.attachedAlertIds, alertId] }
|
||||
: i,
|
||||
);
|
||||
|
||||
setAlerts(updatedAlerts);
|
||||
setIncidents(updatedIncidents);
|
||||
recalculateKpis(updatedAlerts, updatedIncidents);
|
||||
|
||||
if (selectedAlert?.id === alertId) {
|
||||
setSelectedAlert((prev) =>
|
||||
prev ? { ...prev, attachedIncidentId: incidentId } : null,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDetachAlert = (alertId: number) => {
|
||||
const alert = alerts.find((a) => a.id === alertId);
|
||||
const incidentId = alert?.attachedIncidentId;
|
||||
|
||||
const updatedAlerts = alerts.map((a) =>
|
||||
a.id === alertId ? { ...a, attachedIncidentId: null } : a,
|
||||
);
|
||||
const updatedIncidents = incidentId
|
||||
? incidents.map((i) =>
|
||||
i.id === incidentId
|
||||
? {
|
||||
...i,
|
||||
attachedAlertIds: i.attachedAlertIds.filter(
|
||||
(aid) => aid !== alertId,
|
||||
),
|
||||
}
|
||||
: i,
|
||||
)
|
||||
: incidents;
|
||||
|
||||
setAlerts(updatedAlerts);
|
||||
setIncidents(updatedIncidents);
|
||||
recalculateKpis(updatedAlerts, updatedIncidents);
|
||||
|
||||
if (selectedAlert?.id === alertId) {
|
||||
setSelectedAlert((prev) =>
|
||||
prev ? { ...prev, attachedIncidentId: null } : null,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col overflow-hidden">
|
||||
<header className="flex shrink-0 items-center justify-between border-b px-4 py-3">
|
||||
<h1 className="text-sm font-semibold">Alert Monitor</h1>
|
||||
<Button onClick={handleLoadFile} disabled={isLoading} size="sm">
|
||||
<FileUp className="mr-2 size-4" />
|
||||
{isLoading ? "Loading..." : "Load Alerts JSON"}
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{error && (
|
||||
<div className="shrink-0 border-b border-destructive/50 bg-destructive/10 px-4 py-2 text-xs text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="shrink-0 border-b p-4">
|
||||
<KpiDashboard kpis={kpis} isLoading={isLoading} />
|
||||
</div>
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
|
||||
<div className="flex min-h-0 flex-col border-r">
|
||||
<div className="flex shrink-0 items-center gap-2 border-b px-4 py-2">
|
||||
<Checkbox
|
||||
checked={selectAllState === "all"}
|
||||
indeterminate={selectAllState === "some"}
|
||||
onCheckedChange={(checked) =>
|
||||
handleToggleAllInvalid(checked === true)
|
||||
}
|
||||
disabled={filteredAlerts.length === 0}
|
||||
aria-label="Mark all filtered as invalid"
|
||||
/>
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
{filteredAlerts.length}
|
||||
{(searchQuery || statusFilter !== "all") && ` / ${alerts.length}`}
|
||||
</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button variant="ghost" size="sm" className="h-7 gap-1 px-2">
|
||||
<Filter className="size-3" />
|
||||
<span className="text-xs">
|
||||
{statusFilter === "all"
|
||||
? "All"
|
||||
: statusFilter === "resolved"
|
||||
? "Resolved"
|
||||
: "Unresolved"}
|
||||
</span>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuRadioGroup
|
||||
value={statusFilter}
|
||||
onValueChange={(v) => setStatusFilter(v as StatusFilter)}
|
||||
>
|
||||
<DropdownMenuRadioItem value="all">All</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="resolved">
|
||||
Resolved
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="unresolved">
|
||||
Unresolved
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="relative ml-auto flex-1 max-w-xs">
|
||||
<Search className="absolute left-2 top-1/2 size-3 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search alerts..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="h-7 pl-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{alerts.length === 0 ? (
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>No Alerts Loaded</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-xs text-muted-foreground">
|
||||
Click "Load Alerts JSON" to import alert data from a Grafana
|
||||
Alerts API export.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<AlertList
|
||||
alerts={filteredAlerts}
|
||||
incidents={incidents}
|
||||
onToggleInvalid={handleToggleInvalid}
|
||||
onSelectAlert={handleSelectAlert}
|
||||
selectedAlertId={selectedAlert?.id}
|
||||
className="flex-1"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 overflow-hidden">
|
||||
<IncidentManager
|
||||
incidents={incidents}
|
||||
selectedAlert={selectedAlert}
|
||||
onAddIncident={handleAddIncident}
|
||||
onAttachAlert={handleAttachAlert}
|
||||
onDetachAlert={handleDetachAlert}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
apps/web/src/routes/monitor_.tsx
Normal file
34
apps/web/src/routes/monitor_.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/monitor_")({
|
||||
component: HomeComponent,
|
||||
});
|
||||
|
||||
const TITLE_TEXT = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
||||
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
||||
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
||||
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
||||
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
||||
|
||||
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
||||
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
||||
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
||||
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
||||
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
||||
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
||||
`;
|
||||
|
||||
function HomeComponent() {
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-4 py-2">
|
||||
<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
||||
<div className="grid gap-6">
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue