mirror of
https://github.com/Dvorinka/Dash.git
synced 2026-10-28 15:51:27 +00:00
feat: external importers + uptime monitors (merge plan M1)
Two tracks from the Beszel/Domain-Locker merge plan in ROADMAP.md: - Importers: POST /api/import/external sniffs Homepage services.yml, Homarr JSON, and Dashy conf.yml into sections/items; SettingsDialog import now accepts all four formats. - Monitors (M1): monitors + heartbeats schema, pure checkers for http/tcp/ping/dns/keyword/json-query/push, scheduler on app ctx, CRUD + check-now + push ingest API, /monitors + /monitors/:id pages (wouter), monitor board widget, ServiceDialog monitor opt-in. Authored By: TDvorak <[email protected]> Generated with Devin (https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Tomas DvorakandDevin committed
1 parent
f428e721fe
commit
1ff1b29ae7
29 files changed
+3050
-98
No files matched your search
@@ -28,8 +28,10 @@
|
||||
"lucide-react": "^0.545.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"recharts": "^3.10.1",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"wouter": "^3.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { LayoutGrid, Moon, Plus, Search, Settings, Sun } from "lucide-react";
|
||||
import { Link, Route, useLocation } from "wouter";
|
||||
import { Activity, LayoutGrid, Moon, Plus, Search, Settings, Sun } from "lucide-react";
|
||||
import { BoardProvider, useBoard } from "@/board/store";
|
||||
import { Board } from "@/board/Board";
|
||||
import { ServiceDialog } from "@/components/ServiceDialog";
|
||||
import { WidgetDialog } from "@/components/WidgetDialog";
|
||||
import { SettingsDialog } from "@/components/SettingsDialog";
|
||||
import { CommandPalette } from "@/components/CommandPalette";
|
||||
import { MonitorsPage } from "@/pages/MonitorsPage";
|
||||
import { MonitorDetailPage } from "@/pages/MonitorDetailPage";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Item } from "@/types";
|
||||
|
||||
export default function App() {
|
||||
@@ -17,8 +21,14 @@ export default function App() {
|
||||
);
|
||||
}
|
||||
|
||||
const NAV = [
|
||||
{ href: "/", label: "Board", icon: LayoutGrid },
|
||||
{ href: "/monitors", label: "Monitors", icon: Activity },
|
||||
];
|
||||
|
||||
function Shell() {
|
||||
const board = useBoard();
|
||||
const [loc] = useLocation();
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [paletteOpen, setPaletteOpen] = useState(false);
|
||||
const [svcOpen, setSvcOpen] = useState(false);
|
||||
@@ -60,6 +70,24 @@ function Shell() {
|
||||
</svg>
|
||||
Dash
|
||||
</div>
|
||||
<nav className="ml-6 flex items-center gap-1" aria-label="Primary">
|
||||
{NAV.map((n) => {
|
||||
const active = n.href === "/" ? loc === "/" : loc.startsWith(n.href);
|
||||
return (
|
||||
<Link
|
||||
key={n.href}
|
||||
href={n.href}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-[7px] px-2.5 py-1.5 text-[12.5px] transition-colors",
|
||||
active ? "bg-surface-hover text-text" : "text-text-faint hover:text-text",
|
||||
)}
|
||||
>
|
||||
<n.icon size={13} strokeWidth={1.8} />
|
||||
{n.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline" aria-label="Search (⌘K)"
|
||||
@@ -95,7 +123,15 @@ function Shell() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Board onEditItem={openEditor} />
|
||||
<Route path="/">
|
||||
<Board onEditItem={openEditor} />
|
||||
</Route>
|
||||
<Route path="/monitors">
|
||||
<MonitorsPage />
|
||||
</Route>
|
||||
<Route path="/monitors/:id">
|
||||
{(p) => <MonitorDetailPage id={p.id} />}
|
||||
</Route>
|
||||
|
||||
<ServiceDialog open={svcOpen} onOpenChange={setSvcOpen} item={editing?.kind === "service" ? editing : undefined} />
|
||||
<WidgetDialog open={wdgOpen} onOpenChange={setWdgOpen} item={editing?.kind === "widget" ? editing : undefined} />
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ArrowRight, Download, LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
|
||||
import { useLocation } from "wouter";
|
||||
import { Activity, ArrowRight, Download, LayoutGrid, Moon, Plus, Settings, Sun } from "lucide-react";
|
||||
import { useBoard } from "@/board/store";
|
||||
import { hostOf, IconImg } from "@/board/primitives";
|
||||
import { rendererLabels, rendererList } from "@/renderers";
|
||||
@@ -34,12 +35,15 @@ export function CommandPalette({
|
||||
onSettings(): void;
|
||||
}) {
|
||||
const board = useBoard();
|
||||
const [, navigate] = useLocation();
|
||||
const [query, setQuery] = useState("");
|
||||
const [active, setActive] = useState(0);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const commands = useMemo<Command[]>(() => {
|
||||
const cmds: Command[] = [
|
||||
{ id: "nav-board", group: "Actions", glyph: LayoutGrid, label: "Go to Board", run: () => navigate("/") },
|
||||
{ id: "nav-monitors", group: "Actions", glyph: Activity, label: "Go to Monitors", run: () => navigate("/monitors") },
|
||||
{ id: "add-service", group: "Actions", glyph: Plus, label: "Add service", hint: "new", run: onAddService },
|
||||
{ id: "add-widget", group: "Actions", glyph: Plus, label: "Add widget", hint: "new", run: onAddWidget },
|
||||
{ id: "settings", group: "Actions", glyph: Settings, label: "Open settings", run: onSettings },
|
||||
@@ -73,7 +77,7 @@ export function CommandPalette({
|
||||
}
|
||||
}
|
||||
return cmds;
|
||||
}, [board.sections, board.theme, board.renderer, board.setSetting, onAddService, onAddWidget, onSettings]);
|
||||
}, [board.sections, board.theme, board.renderer, board.setSetting, onAddService, onAddWidget, onSettings, navigate]);
|
||||
|
||||
const q = query.trim().toLowerCase();
|
||||
const filtered = q
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "@/api";
|
||||
import type { Monitor, MonitorInput } from "@/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const TYPES = ["http", "tcp", "ping", "dns", "keyword", "json", "push"] as const;
|
||||
type MonType = (typeof TYPES)[number];
|
||||
|
||||
// One dialog for add + edit. The type picker drives which fields matter —
|
||||
// same pattern as ServiceDialog.
|
||||
export function MonitorDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
monitor,
|
||||
onSaved,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (o: boolean) => void;
|
||||
monitor?: Monitor | undefined;
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const editing = Boolean(monitor);
|
||||
const [f, setF] = useState<Record<string, string>>({});
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setErr("");
|
||||
setF({
|
||||
name: monitor?.name ?? "",
|
||||
type: monitor?.type ?? "http",
|
||||
url: monitor?.url ?? "",
|
||||
hostname: monitor?.hostname ?? "",
|
||||
port: monitor?.port ? String(monitor.port) : "",
|
||||
method: monitor?.method ?? "GET",
|
||||
keyword: monitor?.keyword ?? "",
|
||||
keywordInvert: monitor?.keywordInvert ? "1" : "",
|
||||
jsonQuery: monitor?.jsonQuery ?? "",
|
||||
expected: monitor?.expected ?? "",
|
||||
dnsType: monitor?.dnsType ?? "A",
|
||||
intervalS: String(monitor?.intervalS ?? 60),
|
||||
timeoutS: String(monitor?.timeoutS ?? 10),
|
||||
retries: String(monitor?.retries ?? 0),
|
||||
notes: monitor?.notes ?? "",
|
||||
});
|
||||
}, [open, monitor]);
|
||||
|
||||
const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setF((s) => ({ ...s, [k]: e.target.value }));
|
||||
const type = (f.type || "http") as MonType;
|
||||
|
||||
async function submit() {
|
||||
if (!f.name?.trim()) return setErr("Name is required"), undefined;
|
||||
if (type !== "push" && type !== "tcp" && type !== "ping" && type !== "dns" && !f.url?.trim())
|
||||
return setErr("URL is required"), undefined;
|
||||
if ((type === "tcp" || type === "ping" || type === "dns") && !f.hostname?.trim() && !f.url?.trim())
|
||||
return setErr("Hostname is required"), undefined;
|
||||
setBusy(true);
|
||||
const body: MonitorInput = {
|
||||
name: f.name.trim(),
|
||||
type,
|
||||
url: f.url?.trim() ?? "",
|
||||
hostname: f.hostname?.trim() ?? "",
|
||||
port: parseInt(f.port ?? "0") || 0,
|
||||
method: f.method || "GET",
|
||||
keyword: f.keyword ?? "",
|
||||
keywordInvert: f.keywordInvert === "1",
|
||||
jsonQuery: f.jsonQuery ?? "",
|
||||
expected: f.expected ?? "",
|
||||
dnsType: f.dnsType || "A",
|
||||
intervalS: Math.max(10, parseInt(f.intervalS ?? "60") || 60),
|
||||
timeoutS: Math.max(1, parseInt(f.timeoutS ?? "10") || 10),
|
||||
retries: Math.max(0, parseInt(f.retries ?? "0") || 0),
|
||||
notes: f.notes ?? "",
|
||||
};
|
||||
try {
|
||||
if (editing && monitor) {
|
||||
await api.PATCH("/api/monitors/{id}", { params: { path: { id: monitor.id! } }, body });
|
||||
} else {
|
||||
await api.POST("/api/monitors", { body });
|
||||
}
|
||||
onSaved();
|
||||
onOpenChange(false);
|
||||
} catch {
|
||||
setErr("save failed");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editing ? "Edit monitor" : "New monitor"}</DialogTitle>
|
||||
<DialogDescription>Uptime check on a schedule.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex max-h-[60vh] flex-col gap-4 overflow-y-auto pr-1">
|
||||
<div className="grid grid-cols-[1fr_130px] gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-name">Name</Label>
|
||||
<Input id="mon-name" value={f.name ?? ""} onChange={set("name")} placeholder="Plex" autoFocus />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Type</Label>
|
||||
<Select value={type} onValueChange={(v) => setF((s) => ({ ...s, type: v }))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{TYPES.map((t) => <SelectItem key={t} value={t}>{t}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(type === "http" || type === "keyword" || type === "json") && (
|
||||
<>
|
||||
<div className="grid grid-cols-[1fr_110px] gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-url">URL</Label>
|
||||
<Input id="mon-url" value={f.url ?? ""} onChange={set("url")} placeholder="https://plex.local" className="font-mono text-[12px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Method</Label>
|
||||
<Select value={f.method || "GET"} onValueChange={(v) => setF((s) => ({ ...s, method: v }))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{["GET", "HEAD", "POST"].map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
{type === "keyword" && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-kw">Keyword</Label>
|
||||
<Input id="mon-kw" value={f.keyword ?? ""} onChange={set("keyword")} placeholder="text that must appear" className="font-mono text-[12px]" />
|
||||
<label className="flex items-center gap-2 text-[12px] text-text-dim">
|
||||
<input type="checkbox" checked={f.keywordInvert === "1"}
|
||||
onChange={(e) => setF((s) => ({ ...s, keywordInvert: e.target.checked ? "1" : "" }))} />
|
||||
Invert (down when found)
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{type === "json" && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-jq">JSON path</Label>
|
||||
<Input id="mon-jq" value={f.jsonQuery ?? ""} onChange={set("jsonQuery")} placeholder="data.status" className="font-mono text-[12px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-exp">Expected</Label>
|
||||
<Input id="mon-exp" value={f.expected ?? ""} onChange={set("expected")} placeholder="ok" className="font-mono text-[12px]" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{(type === "tcp" || type === "ping" || type === "dns") && (
|
||||
<div className="grid grid-cols-[1fr_110px] gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-host">Hostname</Label>
|
||||
<Input id="mon-host" value={f.hostname ?? ""} onChange={set("hostname")} placeholder="nas.local" className="font-mono text-[12px]" />
|
||||
</div>
|
||||
{type === "tcp" ? (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-port">Port</Label>
|
||||
<Input id="mon-port" value={f.port ?? ""} onChange={set("port")} placeholder="443" className="font-mono text-[12px]" />
|
||||
</div>
|
||||
) : type === "dns" ? (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Record</Label>
|
||||
<Select value={f.dnsType || "A"} onValueChange={(v) => setF((s) => ({ ...s, dnsType: v }))}>
|
||||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{["A", "AAAA", "CNAME", "MX", "NS", "TXT"].map((t) => <SelectItem key={t} value={t}>{t}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
) : <div />}
|
||||
</div>
|
||||
)}
|
||||
{type === "dns" && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-dnsexp">Expected record contains (optional)</Label>
|
||||
<Input id="mon-dnsexp" value={f.expected ?? ""} onChange={set("expected")} className="font-mono text-[12px]" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{type === "push" && (
|
||||
<p className="rounded-[8px] border border-border bg-surface px-3 py-2 text-[12px] text-text-dim">
|
||||
After saving, your jobs call the shown push URL on a schedule.
|
||||
If it goes quiet for 2× the interval, the monitor flips down.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-int">Interval (s)</Label>
|
||||
<Input id="mon-int" value={f.intervalS ?? "60"} onChange={set("intervalS")} className="font-mono text-[12px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-to">Timeout (s)</Label>
|
||||
<Input id="mon-to" value={f.timeoutS ?? "10"} onChange={set("timeoutS")} className="font-mono text-[12px]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="mon-re">Retries</Label>
|
||||
<Input id="mon-re" value={f.retries ?? "0"} onChange={set("retries")} className="font-mono text-[12px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{monitor?.pushToken ? (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label>Push URL</Label>
|
||||
<code className="rounded-[8px] border border-border bg-surface px-3 py-2 font-mono text-[11px] text-text-dim">
|
||||
{location.origin}/api/push/{monitor.pushToken}
|
||||
</code>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{err ? <p className="text-[12px] text-destructive">{err}</p> : null}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="items-center">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="button" onClick={() => void submit()} disabled={busy}>
|
||||
{busy ? "Saving…" : editing ? "Save" : "Add monitor"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Plus, Trash2, Upload, X } from "lucide-react";
|
||||
import { useBoard } from "@/board/store";
|
||||
import { api } from "@/api";
|
||||
import type { Item, UrlInput } from "@/types";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -33,6 +34,7 @@ export function ServiceDialog({
|
||||
const [icon, setIcon] = useState("");
|
||||
const [urls, setUrls] = useState<UrlInput[]>([{ url: "", label: "local" }]);
|
||||
const [sectionId, setSectionId] = useState("");
|
||||
const [alsoMonitor, setAlsoMonitor] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
@@ -48,6 +50,7 @@ export function ServiceDialog({
|
||||
: [{ url: "", label: "local" }],
|
||||
);
|
||||
setSectionId(item?.sectionId ?? board.sections[0]?.id ?? "");
|
||||
setAlsoMonitor(false);
|
||||
}, [open, item, board.sections]);
|
||||
|
||||
const setUrl = (i: number, patch: Partial<UrlInput>) =>
|
||||
@@ -81,6 +84,12 @@ export function ServiceDialog({
|
||||
urls: cleanUrls,
|
||||
});
|
||||
if (created && file) await board.uploadIcon(created.id, file);
|
||||
if (alsoMonitor && cleanUrls[0]) {
|
||||
// Uptime check on the primary URL — appears under /monitors.
|
||||
await api.POST("/api/monitors", {
|
||||
body: { name: name.trim(), type: "http", url: cleanUrls[0].url },
|
||||
});
|
||||
}
|
||||
}
|
||||
onOpenChange(false);
|
||||
} catch (e) {
|
||||
@@ -193,6 +202,17 @@ export function ServiceDialog({
|
||||
<p className="text-[11px] text-text-faint">URL or uploaded file; blank shows a letter tile.</p>
|
||||
</div>
|
||||
|
||||
{!editing && (
|
||||
<label className="flex items-center gap-2 text-[12.5px] text-text-dim">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={alsoMonitor}
|
||||
onChange={(e) => setAlsoMonitor(e.target.checked)}
|
||||
/>
|
||||
Also create an uptime monitor for the first URL
|
||||
</label>
|
||||
)}
|
||||
|
||||
{err ? <p className="text-[12px] text-destructive">{err}</p> : null}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -28,11 +28,22 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh
|
||||
|
||||
async function importJson(file: File) {
|
||||
setMsg("");
|
||||
const res = await fetch("/api/import", { method: "POST", body: file });
|
||||
// Dash exports are JSON with {version, sections}; anything else
|
||||
// (Homepage/Homarr/Dashy) goes to the external importer for sniffing.
|
||||
let target = "/api/import/external";
|
||||
try {
|
||||
const j: unknown = JSON.parse(await file.text());
|
||||
if (j !== null && typeof j === "object" && "version" in j && "sections" in j) {
|
||||
target = "/api/import";
|
||||
}
|
||||
} catch { /* not JSON — external importer handles YAML */ }
|
||||
const res = await fetch(target, { method: "POST", body: file });
|
||||
if (res.ok) {
|
||||
location.reload(); // import replaces state; a reload re-syncs everything
|
||||
} else {
|
||||
setMsg("Import failed — not a Dash export?");
|
||||
// SAFETY: error responses always carry {error: string} per openapi.yaml Error schema.
|
||||
const body = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||
setMsg(body?.error ?? "Import failed");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,7 +101,7 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh
|
||||
<Upload size={12} /> Import
|
||||
</Button>
|
||||
<input
|
||||
ref={fileRef} type="file" accept="application/json" className="hidden"
|
||||
ref={fileRef} type="file" accept=".json,.yml,.yaml" className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) void importJson(f);
|
||||
@@ -98,6 +109,7 @@ export function SettingsDialog({ open, onOpenChange }: { open: boolean; onOpenCh
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[11px] text-text-faint">Import accepts Dash exports plus Homepage, Homarr, and Dashy configs.</p>
|
||||
{msg ? <p className="text-[12px] text-destructive">{msg}</p> : null}
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
||||
@@ -31,6 +31,7 @@ export function WidgetDialog({
|
||||
const [name, setName] = useState("");
|
||||
const [sectionId, setSectionId] = useState("");
|
||||
const [values, setValues] = useState<Record<string, string>>({});
|
||||
const [monitors, setMonitors] = useState<{ id?: string; name?: string }[]>([]);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [err, setErr] = useState("");
|
||||
|
||||
@@ -42,6 +43,10 @@ export function WidgetDialog({
|
||||
.then((r) => r.json() as Promise<WidgetType[]>)
|
||||
.then(setTypes)
|
||||
.catch(() => setTypes([]));
|
||||
fetch("/api/monitors")
|
||||
.then((r) => r.json() as Promise<{ id?: string; name?: string }[]>)
|
||||
.then(setMonitors)
|
||||
.catch(() => setMonitors([]));
|
||||
|
||||
const cfg = item?.config ?? null;
|
||||
setType(cfg && typeof cfg.type === "string" ? cfg.type : "");
|
||||
@@ -141,14 +146,28 @@ export function WidgetDialog({
|
||||
<Label htmlFor={`wdg-${f.key}`}>
|
||||
{f.label}{f.required ? "" : " (optional)"}
|
||||
</Label>
|
||||
<Input
|
||||
id={`wdg-${f.key}`}
|
||||
type={f.secret ? "password" : "text"}
|
||||
value={values[f.key] ?? ""}
|
||||
placeholder={f.placeholder}
|
||||
onChange={(e) => setValues((v) => ({ ...v, [f.key]: e.target.value }))}
|
||||
className="font-mono text-[12px]"
|
||||
/>
|
||||
{f.key === "monitorId" ? (
|
||||
<Select
|
||||
value={values[f.key] ?? ""}
|
||||
onValueChange={(v) => setValues((s) => ({ ...s, [f.key]: v }))}
|
||||
>
|
||||
<SelectTrigger><SelectValue placeholder="Pick a monitor…" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{monitors.map((m) => (
|
||||
<SelectItem key={m.id} value={m.id ?? ""}>{m.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
id={`wdg-${f.key}`}
|
||||
type={f.secret ? "password" : "text"}
|
||||
value={values[f.key] ?? ""}
|
||||
placeholder={f.placeholder}
|
||||
onChange={(e) => setValues((v) => ({ ...v, [f.key]: e.target.value }))}
|
||||
className="font-mono text-[12px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link } from "wouter";
|
||||
import { ArrowLeft, Pause, Play, RefreshCw, Trash2 } from "lucide-react";
|
||||
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import { api } from "@/api";
|
||||
import type { Heartbeat, MonitorView } from "@/types";
|
||||
import { MonitorDialog } from "@/components/MonitorDialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function MonitorDetailPage({ id }: { id: string }) {
|
||||
const [m, setM] = useState<MonitorView | null>(null);
|
||||
const [hbs, setHbs] = useState<Heartbeat[]>([]);
|
||||
const [hours, setHours] = useState(24);
|
||||
const [dlgOpen, setDlgOpen] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const [{ data: mv }, { data: hb }] = await Promise.all([
|
||||
api.GET("/api/monitors/{id}", { params: { path: { id } } }),
|
||||
api.GET("/api/monitors/{id}/heartbeats", { params: { path: { id }, query: { hours } } }),
|
||||
]);
|
||||
if (mv) setM(mv);
|
||||
if (hb) setHbs(hb);
|
||||
}, [id, hours]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
const t = setInterval(() => void load(), 30_000);
|
||||
return () => clearInterval(t);
|
||||
}, [load]);
|
||||
|
||||
if (!m) return <main className="mx-auto max-w-5xl px-7 py-8 text-[13px] text-text-faint">Loading…</main>;
|
||||
|
||||
const chart = hbs.map((h) => ({
|
||||
t: new Date(h.checkedAt ?? "").toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||||
ping: h.pingMs,
|
||||
up: h.status === "up",
|
||||
}));
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-7 py-8">
|
||||
<Link href="/monitors" className="mb-4 inline-flex items-center gap-1.5 text-[12px] text-text-faint hover:text-text">
|
||||
<ArrowLeft size={12} /> Monitors
|
||||
</Link>
|
||||
|
||||
<div className="mb-6 flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className={cn("size-2 rounded-full", m.status === "up" ? "bg-up" : m.status === "down" ? "bg-down" : "bg-text-faint/40")} />
|
||||
<h1 className="text-[17px] font-semibold tracking-tight">{m.name}</h1>
|
||||
<span className="font-mono text-[10.5px] uppercase tracking-[0.08em] text-text-faint">{m.status}</span>
|
||||
</div>
|
||||
<p className="mt-1 font-mono text-[11.5px] text-text-faint">
|
||||
{m.type} · {m.url || m.hostname}{m.port ? `:${m.port}` : ""} · every {m.intervalS}s
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => void api.POST("/api/monitors/{id}/check", { params: { path: { id } } }).then(load)}>
|
||||
<RefreshCw size={12} /> Check now
|
||||
</Button>
|
||||
<Button variant="outline" size="sm"
|
||||
onClick={() => void api.PATCH("/api/monitors/{id}", { params: { path: { id } }, body: { active: !m.active } }).then(load)}>
|
||||
{m.active ? <Pause size={12} /> : <Play size={12} />} {m.active ? "Pause" : "Resume"}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setDlgOpen(true)}>Edit</Button>
|
||||
<Button variant="outline" size="sm" aria-label="Delete"
|
||||
onClick={() => {
|
||||
if (confirm(`Delete monitor "${m.name}"?`)) {
|
||||
void api.DELETE("/api/monitors/{id}", { params: { path: { id } } }).then(() => { location.href = "/monitors"; });
|
||||
}
|
||||
}}>
|
||||
<Trash2 size={12} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 grid grid-cols-4 gap-3 max-[720px]:grid-cols-2">
|
||||
{[
|
||||
["Uptime 24h", `${m.stats?.uptime24h?.toFixed(2)}%`],
|
||||
["Uptime 30d", `${m.stats?.uptime30d?.toFixed(2)}%`],
|
||||
["Avg ping 24h", m.stats?.avgPing24h ? `${m.stats.avgPing24h} ms` : "—"],
|
||||
["Checks", String((m.stats?.up ?? 0) + (m.stats?.down ?? 0))],
|
||||
].map(([k, v]) => (
|
||||
<div key={k} className="rounded-[10px] border border-border bg-surface px-4 py-3">
|
||||
<div className="font-mono text-[10px] uppercase tracking-[0.1em] text-text-faint">{k}</div>
|
||||
<div className="mt-1 font-mono text-[17px] font-medium">{v}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h2 className="font-mono text-[10.5px] uppercase tracking-[0.12em] text-text-faint">Response time</h2>
|
||||
<div className="flex gap-1">
|
||||
{[24, 168, 720].map((h) => (
|
||||
<button key={h} type="button" onClick={() => setHours(h)}
|
||||
className={cn("rounded-[6px] px-2 py-1 font-mono text-[10.5px]",
|
||||
hours === h ? "bg-surface-hover text-text" : "text-text-faint hover:text-text")}>
|
||||
{h === 24 ? "24h" : h === 168 ? "7d" : "30d"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-6 h-56 rounded-[10px] border border-border bg-surface p-3">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={chart} margin={{ top: 4, right: 4, bottom: 0, left: -18 }}>
|
||||
<CartesianGrid stroke="var(--border)" strokeDasharray="3 3" vertical={false} />
|
||||
<XAxis dataKey="t" tick={{ fontSize: 10, fill: "var(--text-faint)" }} tickLine={false} axisLine={false} minTickGap={40} />
|
||||
<YAxis tick={{ fontSize: 10, fill: "var(--text-faint)" }} tickLine={false} axisLine={false} unit=" ms" width={62} />
|
||||
<Tooltip
|
||||
contentStyle={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, fontSize: 11 }}
|
||||
labelStyle={{ color: "var(--text-faint)" }}
|
||||
/>
|
||||
<Area type="monotone" dataKey="ping" stroke="var(--up)" fill="var(--up)" fillOpacity={0.12} strokeWidth={1.5} dot={false} isAnimationActive={false} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<h2 className="mb-2 font-mono text-[10.5px] uppercase tracking-[0.12em] text-text-faint">Recent checks</h2>
|
||||
<div className="overflow-hidden rounded-[10px] border border-border">
|
||||
<table className="w-full text-[12px]">
|
||||
<tbody>
|
||||
{[...hbs].reverse().slice(0, 40).map((h) => (
|
||||
<tr key={h.id} className="border-b border-border/60 last:border-0">
|
||||
<td className="px-4 py-2 font-mono text-[10.5px] text-text-faint">
|
||||
{new Date(h.checkedAt ?? "").toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={cn("font-mono text-[10.5px] uppercase", h.status === "up" ? "text-up" : "text-down")}>
|
||||
{h.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 font-mono text-[11px] text-text-dim">{h.pingMs ? `${h.pingMs}ms` : "—"}</td>
|
||||
<td className="px-4 py-2 font-mono text-[11px] text-text-faint">{h.msg}</td>
|
||||
</tr>
|
||||
))}
|
||||
{hbs.length === 0 && (
|
||||
<tr><td className="px-4 py-6 text-center text-text-faint">No checks in range.</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<MonitorDialog open={dlgOpen} onOpenChange={setDlgOpen} monitor={m} onSaved={load} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link } from "wouter";
|
||||
import { Pause, Play, Plus, RefreshCw, Trash2 } from "lucide-react";
|
||||
import { api } from "@/api";
|
||||
import type { MonitorView } from "@/types";
|
||||
import { MonitorDialog } from "@/components/MonitorDialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function StatusDot({ status }: { status?: string }) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 shrink-0 rounded-full",
|
||||
status === "up" ? "bg-up" : status === "down" ? "bg-down" : "bg-text-faint/40",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function MonitorsPage() {
|
||||
const [monitors, setMonitors] = useState<MonitorView[]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [dlgOpen, setDlgOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<MonitorView | undefined>();
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const { data } = await api.GET("/api/monitors");
|
||||
if (data) setMonitors(data);
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
const t = setInterval(() => void load(), 30_000);
|
||||
return () => clearInterval(t);
|
||||
}, [load]);
|
||||
|
||||
async function act(id: string | undefined, fn: () => Promise<unknown>) {
|
||||
if (!id) return;
|
||||
await fn();
|
||||
await load();
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-5xl px-7 py-8">
|
||||
<div className="mb-5 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-[15px] font-semibold tracking-tight">Monitors</h1>
|
||||
<p className="text-[12px] text-text-faint">Uptime checks on a schedule.</p>
|
||||
</div>
|
||||
<Button onClick={() => { setEditing(undefined); setDlgOpen(true); }}>
|
||||
<Plus size={13} strokeWidth={2.2} /> New monitor
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loaded && monitors.length === 0 ? (
|
||||
<div className="rounded-[10px] border border-dashed border-border px-6 py-14 text-center">
|
||||
<p className="text-[13px] text-text-dim">No monitors yet.</p>
|
||||
<p className="mt-1 text-[11.5px] text-text-faint">
|
||||
HTTP, TCP, ping, DNS, keyword, JSON path, or push — checks run server-side on your interval.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-[10px] border border-border">
|
||||
<table className="w-full text-[13px]">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-surface text-left font-mono text-[10px] uppercase tracking-[0.1em] text-text-faint">
|
||||
<th className="px-4 py-2.5 font-medium">Status</th>
|
||||
<th className="px-4 py-2.5 font-medium">Name</th>
|
||||
<th className="px-4 py-2.5 font-medium">Type</th>
|
||||
<th className="px-4 py-2.5 font-medium">Uptime 24h</th>
|
||||
<th className="px-4 py-2.5 font-medium">Uptime 30d</th>
|
||||
<th className="px-4 py-2.5 font-medium">Ping</th>
|
||||
<th className="px-4 py-2.5 font-medium">Every</th>
|
||||
<th className="px-4 py-2.5" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{monitors.map((m) => (
|
||||
<tr key={m.id} className="border-b border-border/60 last:border-0 hover:bg-surface-hover/60">
|
||||
<td className="px-4 py-3">
|
||||
<span className="flex items-center gap-2 font-mono text-[10.5px] uppercase tracking-[0.06em] text-text-faint">
|
||||
<StatusDot status={m.status} />
|
||||
{m.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-medium">
|
||||
<Link href={`/monitors/${m.id}`} className="hover:underline">{m.name}</Link>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-text-dim">{m.type}</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-text-dim">
|
||||
{m.stats?.uptime24h?.toFixed(1)}%
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-text-dim">
|
||||
{m.stats?.uptime30d?.toFixed(1)}%
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-text-dim">
|
||||
{m.stats?.avgPing24h ? `${m.stats.avgPing24h}ms` : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-text-dim">{m.intervalS}s</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="outline" size="icon" aria-label="Check now"
|
||||
onClick={() => void act(m.id, () => api.POST("/api/monitors/{id}/check", { params: { path: { id: m.id! } } }))}>
|
||||
<RefreshCw size={12} />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" aria-label={m.active ? "Pause" : "Resume"}
|
||||
onClick={() => void act(m.id, () => api.PATCH("/api/monitors/{id}", { params: { path: { id: m.id! } }, body: { active: !m.active } }))}>
|
||||
{m.active ? <Pause size={12} /> : <Play size={12} />}
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" aria-label="Delete"
|
||||
onClick={() => {
|
||||
if (confirm(`Delete monitor "${m.name}"?`)) {
|
||||
void act(m.id, () => api.DELETE("/api/monitors/{id}", { params: { path: { id: m.id! } } }));
|
||||
}
|
||||
}}>
|
||||
<Trash2 size={12} />
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => { setEditing(m); setDlgOpen(true); }}>
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<MonitorDialog open={dlgOpen} onOpenChange={setDlgOpen} monitor={editing} onSaved={load} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,12 @@ export type Status = components["schemas"]["Status"];
|
||||
export type StatusMap = Record<string, Status>;
|
||||
export type ExportPayload = components["schemas"]["Export"];
|
||||
|
||||
// Monitoring (merge program) — same generated-schema rule applies.
|
||||
export type Monitor = components["schemas"]["Monitor"];
|
||||
export type MonitorInput = components["schemas"]["MonitorInput"];
|
||||
export type MonitorView = components["schemas"]["MonitorView"];
|
||||
export type Heartbeat = components["schemas"]["Heartbeat"];
|
||||
|
||||
export type Theme = "dark" | "light";
|
||||
export type RendererName = "bento" | "cards" | "index" | "console";
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import type { Item } from "@/types";
|
||||
import { ClockWidget } from "@/widgets/clock";
|
||||
import { PiholeWidget, AdguardWidget } from "@/widgets/blocker";
|
||||
import { ImmichWidget } from "@/widgets/immich";
|
||||
import { MonitorWidget } from "@/widgets/monitor";
|
||||
|
||||
// WidgetHost seam: renderers own the tile chrome; this maps config.type to
|
||||
// the component that fills it. Adding a widget = one fetcher in Go + one
|
||||
@@ -28,6 +29,7 @@ const registry: WidgetRegistry = {
|
||||
pihole: { view: PiholeWidget },
|
||||
adguard: { view: AdguardWidget },
|
||||
immich: { view: ImmichWidget },
|
||||
monitor: { view: MonitorWidget },
|
||||
};
|
||||
|
||||
export function cfgStr(item: Item, key: string): string {
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { WidgetData } from "@/widgets";
|
||||
import type { Item } from "@/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Board tile for an uptime monitor: status dot, uptime %, avg ping.
|
||||
// config.monitorId binds it; data comes from the monitor fetcher.
|
||||
export function MonitorWidget({ item, data, error }: {
|
||||
item: Item;
|
||||
data: WidgetData | undefined;
|
||||
error: string | undefined;
|
||||
}) {
|
||||
const status = typeof data?.status === "string" ? data.status : undefined;
|
||||
const uptime = typeof data?.uptime24 === "number" ? data.uptime24 : undefined;
|
||||
const ping = typeof data?.ping === "number" ? data.ping : undefined;
|
||||
const monId = typeof item.config?.monitorId === "string" ? item.config.monitorId : "";
|
||||
|
||||
return (
|
||||
<a
|
||||
href={monId ? `/monitors/${monId}` : "/monitors"}
|
||||
className="flex w-full items-center gap-2.5 text-left"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 shrink-0 rounded-full",
|
||||
error ? "bg-down" : status === "up" ? "bg-up" : status === "down" ? "bg-down" : "bg-text-faint/40",
|
||||
)}
|
||||
/>
|
||||
<span className="min-w-0 flex-1 truncate text-[12.5px] font-medium">
|
||||
{typeof data?.name === "string" ? data.name : item.name}
|
||||
</span>
|
||||
<span className="shrink-0 font-mono text-[10.5px] text-text-faint">
|
||||
{error ? "err" : uptime !== undefined ? `${uptime.toFixed(1)}%` : "…"}
|
||||
{ping ? ` · ${Math.round(ping)}ms` : ""}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user