-
-
-
-
-
- {/* ── Top bar ── */}
-
- navigate("/admin")}
- title="Back to device registry"
- className="p-2 rounded-xl border border-slate-700/60 bg-slate-900/60 text-slate-400 hover:text-white hover:border-slate-600 transition-all"
- >
-
-
-
-
-
-
- {lastFetched && (
-
-
- )}
- { fetchDevices(); fetchAll(); }}
- className="p-2 rounded-xl border border-slate-700/60 bg-slate-900/60 text-slate-400 hover:text-white hover:border-slate-600 transition-all"
- >
-
-
-
- {/* ── Stats ── */}
-
-
-
- {/* ── Main grid ── */}
-
-
- {/* Left: charts */}
-
-
- {/* CPU */}
-
-
-
CPU usage
- {filteredAnomalies.length > 0 && (
-
-
- )}
- %
-
- {loading ? (
-
- ) : chartData.length === 0 ? (
-
No data
- ) : (
-
-
- String(v).replace("__cpu", "")} />
- {selectedDevices.map((dev) => (
-
-
- )}
-
-
- {/* RAM */}
-
-
-
RAM usage
- %
-
- {loading ? (
-
- ) : chartData.length === 0 ? (
-
No data
- ) : (
-
-
- String(v).replace("__ram", "")} />
- {selectedDevices.map((dev) => (
-
-
- )}
-
-
- {/* Per-device mini cards */}
- {Object.keys(latestPerDevice).length > 1 && (
-
-
Latest per device
-
- {Object.entries(latestPerDevice).map(([name, m]) => {
- const color = deviceColorMap[name];
- return (
-
-
- {name}
- {formatTime(m.timestamp)}
-
- {(["cpu", "ram"] as const).map((field) => (
-
-
- {field}
- {m[field].toFixed(1)}%
-
-
-
(field === "cpu" ? 80 : 85) ? "#f87171"
- : m[field] > (field === "cpu" ? 60 : 70) ? "#fb923c" : color,
- }}
- />
-
-
- ))}
-
- );
- })}
-
-
- )}
-
-
- {/* Right sidebar */}
-
-
-
-
-
-
-
Anomaly log
- {filteredAnomalies.length > 0 && (
-
- {filteredAnomalies.length}
-
- )}
-
-
-
-
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/frontend/src/DeviceAdmin.tsx b/frontend/src/DeviceAdmin.tsx
deleted file mode 100644
index 0a6deb6..0000000
--- a/frontend/src/DeviceAdmin.tsx
+++ /dev/null
@@ -1,594 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
-import { apiFetch } from "./api";
-import {
- Server,
- Plus,
- Activity,
- X,
- RefreshCw,
- ChevronRight,
- Wifi,
- WifiOff,
- Trash2,
-} from "lucide-react";
-
-// ─── Types ──────────────────────────────────────────────────────────────────
-interface Device {
- id: number;
- ip: string;
- name: string;
- is_active: boolean;
-}
-
-// ─── Validation (mirrors backend rules — see note below for why) ───────────
-// Device name is injected into a PromQL label matcher on the backend
-// (job="{name}"), so only a safe allow-list is accepted: letters, digits,
-// underscore and hyphen. This mirrors the backend's Pydantic validator.
-const DEVICE_NAME_RE = /^[a-zA-Z0-9_-]{1,15}$/;
-
-function isValidIp(ip: string): boolean {
- const v = ip.trim();
-
- const v4parts = v.split(".");
- if (v4parts.length === 4) {
- return v4parts.every(
- (p) => /^\d{1,3}$/.test(p) && Number(p) <= 255 && p === String(Number(p))
- );
- }
-
- // Lightweight IPv6 sanity check — the backend does the authoritative
- // check with Python's `ipaddress` module, this is just for fast feedback.
- return /^[0-9a-fA-F:]+$/.test(v) && v.includes(":");
-}
-
-interface FieldErrors {
- ip?: string;
- name?: string;
-}
-
-// ─── Pulse dot ──────────────────────────────────────────────────────────────
-const PulseDot = ({ active }: { active: boolean }) => (
-
- {active && (
-
-);
-
-// ─── Confirm Delete Modal ───────────────────────────────────────────────────
-interface ConfirmDeleteModalProps {
- device: Device;
- onClose: () => void;
- onConfirm: () => void;
-}
-function ConfirmDeleteModal({ device, onClose, onConfirm }: ConfirmDeleteModalProps) {
- return (
-
-
-
- {/* Header glow bar */}
-
-
-
-
-
-
Delete {device.name}?
-
- Are you sure you want to remove {device.ip} ? This action cannot be undone.
-
-
-
-
- Cancel
-
-
- Delete
-
-
-
-
-
- );
-}
-
-// ─── Add Device Modal ────────────────────────────────────────────────────────
-interface AddDeviceModalProps {
- onClose: () => void;
- onAdded: () => void;
-}
-function AddDeviceModal({ onClose, onAdded }: AddDeviceModalProps) {
- const [form, setForm] = useState({ ip: "", name: "", is_active: true });
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState("");
- const [fieldErrors, setFieldErrors] = useState
({});
-
- const validate = (): boolean => {
- const errs: FieldErrors = {};
- const name = form.name.trim();
- const ip = form.ip.trim();
-
- if (!name) {
- errs.name = "Name is required.";
- } else if (!DEVICE_NAME_RE.test(name)) {
- errs.name = "Only letters, digits, '_' and '-' are allowed (max 15 chars).";
- }
-
- if (!ip) {
- errs.ip = "IP address is required.";
- } else if (!isValidIp(ip)) {
- errs.ip = "Enter a valid IPv4 or IPv6 address.";
- }
-
- setFieldErrors(errs);
- return Object.keys(errs).length === 0;
- };
-
- const handleSubmit = async () => {
- if (!validate()) return;
-
- setLoading(true);
- setError("");
- try {
- const res = await apiFetch("/devices", {
- method: "POST",
- body: JSON.stringify(form),
- });
- if (!res.ok) {
- const d = await res.json().catch(() => ({}));
-
- // If the backend rejected the payload on validation grounds
- // (FastAPI/Pydantic 422), map the errors back onto the fields
- // instead of showing a generic message.
- if (Array.isArray(d.detail)) {
- const errs: FieldErrors = {};
- for (const item of d.detail) {
- const field = item.loc?.[item.loc.length - 1];
- if (field === "name" || field === "ip") {
- errs[field as "name" | "ip"] = item.msg;
- }
- }
- if (Object.keys(errs).length) {
- setFieldErrors(errs);
- return;
- }
- }
-
- throw new Error(typeof d.detail === "string" ? d.detail : `HTTP ${res.status}`);
- }
- onAdded();
- onClose();
- } catch (e: any) {
- setError(e.message);
- } finally {
- setLoading(false);
- }
- };
-
- return (
-
-
-
-
-
-
-
-
Add device
-
-
-
-
-
-
-
- IP address
-
-
{
- setForm((f) => ({ ...f, ip: e.target.value }));
- if (fieldErrors.ip) setFieldErrors((fe) => ({ ...fe, ip: undefined }));
- }}
- className={`w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono ${
- fieldErrors.ip
- ? "border-red-500/70 focus:border-red-500 focus:ring-red-500/30"
- : "border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30"
- }`}
- />
- {fieldErrors.ip && (
-
{fieldErrors.ip}
- )}
-
-
-
- Device name
-
-
{
- setForm((f) => ({ ...f, name: e.target.value }));
- if (fieldErrors.name) setFieldErrors((fe) => ({ ...fe, name: undefined }));
- }}
- className={`w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono ${
- fieldErrors.name
- ? "border-red-500/70 focus:border-red-500 focus:ring-red-500/30"
- : "border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30"
- }`}
- />
- {fieldErrors.name && (
-
{fieldErrors.name}
- )}
-
-
- Active
- setForm((f) => ({ ...f, is_active: !f.is_active }))}
- className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${
- form.is_active ? "bg-cyan-500" : "bg-slate-700"
- }`}
- >
-
-
-
-
- {error && (
-
- {error}
-
- )}
-
-
-
- Cancel
-
-
- {loading ? "Adding…" : "Add device"}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {device.is_active ? "online" : "offline"}
-
-
-
-
-
- {device.name}
-
-
-
- {device.is_active ? (
-
- {device.ip}
-
-
-
-
-
-
-
-
-
{
- e.stopPropagation();
- onDelete(device);
- }}
- className="text-slate-600 hover:text-red-500 hover:bg-red-500/10 p-1.5 rounded-lg transition-all"
- title="Delete device"
- >
-
-
-
-
- {[
- { label: "Total", value: total, color: "text-white" },
- { label: "Online", value: online, color: "text-emerald-400" },
- { label: "Offline", value: offline, color: "text-slate-500" },
- ].map((s) => (
-
-
{s.value}
-
{s.label}
-
- ))}
-
([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState("");
- const [showModal, setShowModal] = useState(false);
- const [filter, setFilter] = useState<"all" | "online" | "offline">("all");
- const [lastFetched, setLastFetched] = useState(null);
- const [deviceToDelete, setDeviceToDelete] = useState(null);
-
- const fetchDevices = useCallback(async () => {
- try {
- const res = await apiFetch("/devices");
- if (!res.ok) throw new Error(`HTTP ${res.status}`);
- const data = await res.json();
- setDevices(data);
- setLastFetched(new Date());
- setError("");
- } catch (e: any) {
- setError(e.message);
- } finally {
- setLoading(false);
- }
- }, []);
-
- const handleDeleteConfirm = async () => {
- if (!deviceToDelete) return;
- try {
- const res = await apiFetch(`/devices/${deviceToDelete.id}`, {
- method: "DELETE",
- });
- if (!res.ok) throw new Error("Failed to delete device");
-
- setDeviceToDelete(null);
- fetchDevices();
- } catch (e: any) {
- setError(e.message);
- }
- };
-
- useEffect(() => {
- fetchDevices();
- const interval = setInterval(fetchDevices, 15000);
- return () => clearInterval(interval);
- }, [fetchDevices]);
-
- const filtered = devices.filter((d) => {
- if (filter === "online") return d.is_active;
- if (filter === "offline") return !d.is_active;
- return true;
- });
-
- return (
-
-
-
-
-
-
- {/* ── Header ── */}
-
-
-
-
-
-
-
- Infrastructure
-
-
-
- Device Registry
-
-
- Manage monitored endpoints
-
-
-
-
- {lastFetched && (
-
- synced {lastFetched.toLocaleTimeString()}
-
- )}
-
-
-
setShowModal(true)}
- className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-sm transition-all shadow-lg shadow-cyan-500/20 hover:shadow-cyan-400/30"
- >
-
-
-
-
- {/* ── Stats ── */}
- {!loading && !error &&
}
-
- {/* ── Filter tabs ── */}
-
- {(["all", "online", "offline"] as const).map((f) => (
- setFilter(f)}
- className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all capitalize ${
- filter === f
- ? "bg-slate-700 text-white shadow-sm"
- : "text-slate-500 hover:text-slate-300"
- }`}
- >
- {f}
-
- ))}
-
-
- {/* ── Content ── */}
- {loading ? (
-
- ) : error ? (
-
-
Failed to load devices
-
{error}
-
- Retry
-
-
- ) : filtered.length === 0 ? (
-
-
-
-
- {filter === "all" ? "No devices registered yet." : `No ${filter} devices.`}
-
- {filter === "all" && (
-
setShowModal(true)}
- className="mt-4 text-xs text-cyan-500 hover:text-cyan-400 underline underline-offset-2"
- >
- Add your first device →
-
- )}
-
- ) : (
-
- {filtered.map((d, i) => (
- setDeviceToDelete(device)}
- />
- ))}
-
- )}
-
-
- {/* ── Modal ── */}
- {showModal && (
-
setShowModal(false)}
- onAdded={fetchDevices}
- />
- )}
-
- {deviceToDelete && (
- setDeviceToDelete(null)}
- onConfirm={handleDeleteConfirm}
- />
- )}
- ({});
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
@@ -16,34 +22,38 @@ export default function LoginPage() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
+ const validate = (): boolean => {
+ const errs: FieldErrors = {};
+ if (!username) {
+ errs.username = "Username is required"
+ }
+
+ if (!password) {
+ errs.password = "Password is required"
+ }
+ setFieldErrors(errs);
+ return Object.keys(errs).length === 0;
+ }
+
async function login() {
+ if (!validate()) return;
+
setLoading(true);
setError("");
try {
- const res = await fetch(`${API_BASE}/api/auth/login`, {
+ await apiFetch("/auth/login", {
method: "POST",
- credentials: "include",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({
+ data: {
username,
password,
- }),
+ },
});
- const data = await res.json();
-
- if (!res.ok)
- throw new Error(data.detail);
-
navigate(from, { replace: true });
- }
- catch (e:any) {
+ } catch (e: any) {
setError(e.message);
- }
- finally {
+ } finally {
setLoading(false);
}
}
@@ -52,7 +62,6 @@ export default function LoginPage() {
{/* background grid */}
-
-
-
+
-
-
-
-
+
-
@@ -93,7 +93,6 @@ export default function LoginPage() {
-
-
Password
-
-
-
+ {fieldErrors.password && (
+
{fieldErrors.password}
+ )}
{error && (
@@ -156,15 +162,10 @@ export default function LoginPage() {
>
{loading ? "Signing in..." : "Sign In"}
-
-
-
-
): string {
+ const data = error.response?.data;
- try {
- const data = await response.json();
- message = data.detail ?? data.message ?? message;
- } catch {}
+ if (typeof data?.detail === "string") return data.detail;
+ if (typeof data?.detail?.message === "string") return data.detail.message;
+ if (typeof data?.message === "string") return data.message;
- throw new Error(message);
+ if (Array.isArray(data?.detail) && data.detail[0]?.msg) {
+ return data.detail[0].msg;
}
- return response;
+ return error.response
+ ? `HTTP ${error.response.status}`
+ : error.message ?? "Network error";
+}
+
+export async function apiFetch(
+ endpoint: string,
+ options: AxiosRequestConfig = {}
+): Promise {
+ try {
+ const response = await axios(API + API_VERSION + endpoint, {
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json",
+ ...(options.headers ?? {}),
+ },
+ ...options,
+ });
+
+ return response.data as T;
+ } catch (err) {
+ const error = err as AxiosError;
+
+ const isLoginRequest = endpoint.includes("/auth/login");
+
+ if (error.response?.status === 401 && !isLoginRequest) {
+ window.location.href = "/login";
+ throw new Error("Unauthorized");
+ }
+
+ // throw new Error(extractErrorMessage(error));
+
+ throw new ApiError(
+ extractErrorMessage(error),
+ error.response?.status
+ );
+ }
}
\ No newline at end of file
diff --git a/frontend/src/components/anomalyFeed.tsx b/frontend/src/components/anomalyFeed.tsx
new file mode 100644
index 0000000..733b404
--- /dev/null
+++ b/frontend/src/components/anomalyFeed.tsx
@@ -0,0 +1,67 @@
+import { Activity, AlertTriangle } from "lucide-react";
+import { formatDateTime } from "../helpers/helpers";
+import { useEffect, useRef } from "react";
+import type { Anomaly } from "../types/Types";
+
+export function AnomalyFeed({ anomalies, deviceColorMap }: {
+ anomalies: Anomaly[];
+ deviceColorMap: Record;
+}) {
+ const scrollRef = useRef(null);
+
+ // Auto-scroll to top whenever anomalies change (newest are prepended)
+ useEffect(() => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTop = 0;
+ }
+ }, [anomalies]);
+
+ if (anomalies.length === 0) {
+ return (
+
+
+
No anomalies detected
+
+ {sorted.map((a) => {
+ const color = deviceColorMap[a.device] ?? "#94a3b8";
+ const severity = a.score < -0.15 ? "high" : a.score < -0.05 ? "mid" : "low";
+ const sevColor = severity === "high" ? "#f87171" : severity === "mid" ? "#fb923c" : "#facc15";
+ return (
+
+
+
+
+
+ {a.device}
+ {formatDateTime(a.timestamp)}
+
+
{a.reason}
+
+ CPU {a.cpu.toFixed(1)}%
+ RAM {a.ram.toFixed(1)}%
+
+ score {a.score.toFixed(4)}
+
+
+
+
+
+ );
+ })}
+
+ {active && (
+
+);
+
+export function DeviceCard({ device, index, onDelete }: DeviceCardProps) {
+ const navigate = useNavigate();
+ const handleClick = () => {
+ navigate(`/dashboard?device=${encodeURIComponent(device.name)}`);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {device.is_active ? "online" : "offline"}
+
+
+
+
+
+ {device.name}
+
+
+
+ {device.is_active ? (
+
+ {device.ip}
+
+
+
+
+
+
+
+
+
{
+ e.stopPropagation();
+ onDelete(device);
+ }}
+ className="text-slate-600 hover:text-red-500 hover:bg-red-500/10 p-1.5 rounded-lg transition-all"
+ title="Delete device"
+ >
+
+
+
+
;
+}) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const h = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+ };
+ document.addEventListener("mousedown", h);
+ return () => document.removeEventListener("mousedown", h);
+ }, []);
+
+ const toggle = (name: string) => {
+ if (selected.includes(name)) {
+ if (selected.length === 1) return;
+ onChange(selected.filter((d) => d !== name));
+ } else {
+ onChange([...selected, name]);
+ }
+ };
+
+ const allSelected = devices.length > 0 && devices.every((d) => selected.includes(d.name));
+
+ const label = allSelected
+ ? "All devices"
+ : selected.length === 1
+ ? selected[0]
+ : `${selected.length} devices`;
+
+ return (
+
+
setOpen((o) => !o)}
+ className="flex items-center gap-2 px-3 py-2 rounded-xl border border-slate-700/60 bg-slate-900/80 text-sm text-slate-200 hover:border-slate-600 transition-all"
+ >
+ {label}
+
+
+ {open && (
+
+
+
+ {/* All toggle */}
+
+ allSelected
+ ? onChange(devices.length > 0 ? [devices[0].name] : [])
+ : onChange(devices.map((d) => d.name))
+ }
+ className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-xs text-slate-400 hover:text-white hover:bg-slate-800 transition-all mb-1"
+ >
+ {allSelected
+ ? All devices
+
+
+ {devices.map((device) => {
+ const checked = selected.includes(device.name);
+ const color = deviceColorMap[device.name];
+ return (
+
toggle(device.name)}
+ className="w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm hover:bg-slate-800 transition-all"
+ >
+ {checked
+ ?
+ {device.name}
+
+ {device.is_active
+ ?
+ );
+ })}
+
+
+ )}
+
({});
+
+ const validate = (): boolean => {
+ const errs: FieldErrors = {};
+ const name = form.name.trim();
+ const ip = form.ip.trim();
+
+ if (!name) {
+ errs.name = "Name is required.";
+ } else if (!DEVICE_NAME_RE.test(name)) {
+ errs.name = "Only letters, digits, '_' and '-' are allowed (max 15 chars).";
+ }
+
+ if (!ip) {
+ errs.ip = "IP address is required.";
+ } else if (!isValidIp(ip)) {
+ errs.ip = "Enter a valid IPv4 or IPv6 address.";
+ }
+
+ setFieldErrors(errs);
+ return Object.keys(errs).length === 0;
+ };
+
+ const handleSubmit = async () => {
+ if (!validate()) return;
+
+ setLoading(true);
+ setError("");
+ try {
+ await apiFetch("/devices", {
+ method: "POST",
+ data: form,
+ });
+ onAdded();
+ onClose();
+ } catch (e: any) {
+ const d = e.response?.data ?? {};
+
+ if (Array.isArray(d.detail)) {
+ const errs: FieldErrors = {};
+ for (const item of d.detail) {
+ const field = item.loc?.[item.loc.length - 1];
+ if (field === "name" || field === "ip") {
+ errs[field as "name" | "ip"] = item.msg;
+ }
+ }
+ if (Object.keys(errs).length) {
+ setFieldErrors(errs);
+ return;
+ }
+ }
+ setError(typeof d.detail === "string" ? d.detail : e.message ?? "Unknown error");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
Add device
+
+
+
+
+
+
+
+ IP address
+
+
{
+ setForm((f) => ({ ...f, ip: e.target.value }));
+ if (fieldErrors.ip) setFieldErrors((fe) => ({ ...fe, ip: undefined }));
+ }}
+ className={`w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono ${fieldErrors.ip
+ ? "border-red-500/70 focus:border-red-500 focus:ring-red-500/30"
+ : "border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30"
+ }`}
+ />
+ {fieldErrors.ip && (
+
{fieldErrors.ip}
+ )}
+
+
+
+ Device name
+
+
{
+ setForm((f) => ({ ...f, name: e.target.value }));
+ if (fieldErrors.name) setFieldErrors((fe) => ({ ...fe, name: undefined }));
+ }}
+ className={`w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono ${fieldErrors.name
+ ? "border-red-500/70 focus:border-red-500 focus:ring-red-500/30"
+ : "border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30"
+ }`}
+ />
+ {fieldErrors.name && (
+
{fieldErrors.name}
+ )}
+
+
+ Active
+ setForm((f) => ({ ...f, is_active: !f.is_active }))}
+ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer focus:outline-none ${form.is_active ? "bg-cyan-500" : "bg-slate-700"
+ }`}
+ >
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ Cancel
+
+
+ {loading ? "Adding…" : "Add device"}
+
+
+
+
+
({});
+
+ const validate = (): boolean => {
+ const errs: FieldErrors = {};
+ const username = form.username.trim();
+ const password = form.password.trim();
+
+ if (!username) {
+ errs.username = "Name is required.";
+ } else if (!USER_NAME_RE.test(username)) {
+ errs.username = "Only letters, digits, '_' and '-' are allowed (max 15 chars).";
+ }
+
+ if (!password) {
+ errs.password = "password is required.";
+ }
+
+ setFieldErrors(errs);
+ return Object.keys(errs).length === 0;
+ };
+
+ const handleSubmit = async () => {
+ if (!validate()) return;
+
+ setLoading(true);
+ setError("");
+ try {
+ const payload = {
+ username: form.username.trim(),
+ password: form.password.trim(),
+ role: form.admin_privileges ? "admin" : "user",
+ };
+ await apiFetch("/user", {
+ method: "POST",
+ data: payload,
+ });
+ fetchUsers();
+ onClose();
+ } catch (e: any) {
+ const d = e.response?.data ?? {};
+
+ if (Array.isArray(d.detail)) {
+ const errs: FieldErrors = {};
+ for (const item of d.detail) {
+ const field = item.loc?.[item.loc.length - 1];
+ if (field === "username" || field === "password") {
+ errs[field as "username" | "password"] = item.msg;
+ }
+ }
+ if (Object.keys(errs).length) {
+ setFieldErrors(errs);
+ return;
+ }
+ }
+ setError(typeof d.detail === "string" ? d.detail : e.message ?? "Unknown error");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
Add user
+
+
+
+
+
+
+
+ Username
+
+
{
+ setForm((f) => ({ ...f, username: e.target.value }));
+ if (fieldErrors.username) setFieldErrors((fe) => ({ ...fe, username: undefined }));
+ }}
+ className={`w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono ${fieldErrors.username
+ ? "border-red-500/70 focus:border-red-500 focus:ring-red-500/30"
+ : "border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30"
+ }`}
+ />
+ {fieldErrors.username && (
+
{fieldErrors.username}
+ )}
+
+
+
+ Password
+
+
{
+ setForm((f) => ({ ...f, password: e.target.value }));
+ if (fieldErrors.password) setFieldErrors((fe) => ({ ...fe, password: undefined }));
+ }}
+ className={`w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono ${fieldErrors.password
+ ? "border-red-500/70 focus:border-red-500 focus:ring-red-500/30"
+ : "border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30"
+ }`}
+ />
+ {fieldErrors.password && (
+
{fieldErrors.password}
+ )}
+
+
+ Admin Privileges
+ setForm((f) => ({ ...f, admin_privileges: !f.admin_privileges }))}
+ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${form.admin_privileges ? "bg-cyan-500" : "bg-slate-700"
+ }`}
+ >
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ Cancel
+
+
+ {loading ? "Adding…" : "Add user"}
+
+
+
+
+
+
+
+ {/* Header glow bar */}
+
+
+
+
+
+
Delete {device.name}?
+
+ Are you sure you want to remove {device.ip} ? This action cannot be undone.
+
+
+
+
+ Cancel
+
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Username: {user.username}
+
+
+ Role: {user.role}
+
+
+ Admin: {user.role === "admin" ?
+
+
+
+ {/* {roleError && (
+
+ {roleError}
+
+ )} */}
+
+
+
+ {/*
+ Change role
+ */}
+ {confirmingChangeRole ? (
+
+
+
Change role for this user?
+ {roleError && (
+
+ {roleError}
+
+ )}
+
+ setConfirmingChangeRole(false)}
+ className="flex-1 px-4 py-2.5 rounded-xl border border-cyan-600 text-cyan-600 text-sm hover:text-cyan-500 hover:border-cyan-500 transition-all"
+ >
+ Cancel
+
+
+ {loading ? "Changing role" : "Change role"}
+
+
+
+
+ ) : (
+
setConfirmingChangeRole(true)}
+ className="flex-1 px-4 py-2.5 rounded-xl border border-slate-700 text-slate-400 text-sm hover:text-white hover:border-slate-600 transition-all"
+ >
+ {loading ? "Changing role" : "Change role"}
+
+ )}
+ {/*
+ Change password
+ */}
+ {modalNewUserPassword ? (
+
+
+
Change password for this user
+
+ This action cannot be undone.
+
+ {passwordError && (
+
+ {passwordError}
+
+ )}
+
+ New password
+
+
{
+ setNewUserPassword((f) => ({ ...f, password: e.target.value }));
+ // if (fieldErrors.username) setFieldErrors((fe) => ({ ...fe, username: undefined }));
+ }}
+ className={"w-full bg-slate-800/60 border text-white placeholder-slate-500 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-1 transition-all font-mono border-slate-700/70 focus:border-cyan-500/70 focus:ring-cyan-500/30 mb-4"}
+ />
+
+ setModalNewUserPassword(false)}
+ className="flex-1 px-4 py-2.5 rounded-xl border border-cyan-600 text-cyan-600 text-sm hover:text-cyan-500 hover:border-cyan-500 transition-all gap-5"
+ >
+ Cancel
+
+
+ {loading ? "Changing" : "Change"}
+
+
+
+
+ ) : (
+
setModalNewUserPassword(true)}
+ className="flex-1 px-4 py-2.5 rounded-xl border border-slate-700 text-slate-400 text-sm hover:text-white hover:border-slate-600 transition-all"
+ >
+ {loading ? "Changing" : "Change password"}
+
+ )}
+
+
+
+ Cancel
+
+ {confirmingDelete ? (
+
+
+
Delete this user?
+
+ This action cannot be undone.
+
+ {deleteError && (
+
+ {deleteError}
+
+ )}
+
+ setConfirmingDelete(false)}
+ className="flex-1 px-4 py-2.5 rounded-xl border border-cyan-600 text-cyan-600 text-sm hover:text-cyan-500 hover:border-cyan-500 transition-all"
+ >
+ Cancel
+
+
+ {loading ? "Deleting…" : "Delete"}
+
+
+
+
+ ) : (
+
setConfirmingDelete(true)}
+ className="flex-1 px-4 py-2.5 rounded-xl bg-red-500/85 hover:bg-red-400/90 text-slate-950 font-semibold text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-cyan-500/20"
+ >
+ {loading ? "Deleting…" : "Delete user"}
+
+ )}
+
+
+
+
+
(null);
+ const [trainHours, setTrainHours] = useState("1");
+ const [trainNote, setTrainNote] = useState("");
+ const [phase, setPhase] = useState({ kind: "idle" });
+ const [deleting, setDeleting] = useState(false);
+ const [expanded, setExpanded] = useState(false);
+ const pollRef = useRef | null>(null);
+
+ const fetchModelInfo = useCallback(async () => {
+ try {
+ const res = await apiFetch("/api/v1/model-info");
+ setModelInfo(res);
+ } catch { }
+ }, []);
+
+ useEffect(() => { fetchModelInfo(); }, [fetchModelInfo]);
+ useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current); }, []);
+
+ const startPolling = useCallback((taskId: string, prevPoints: number) => {
+ let elapsed = 0;
+ const INTERVAL = 2000; // poll every 2s
+ const TIMEOUT = 120000;
+
+ const stop = () => {
+ if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+ };
+
+ pollRef.current = setInterval(async () => {
+ elapsed += INTERVAL;
+ setPhase({ kind: "polling", taskId, elapsed });
+
+ // ── 1. Check Celery task result via /task-status ──────────────────────
+ try {
+ const ts = await apiFetch(`/task-status/${taskId}`);
+ // state: PENDING | STARTED | SUCCESS | FAILURE | RETRY | REVOKED
+ if (ts.state === "SUCCESS") {
+ const res = typeof ts.result === "object" && ts.result !== null
+ ? (ts.result as TaskResultPayload)
+ : {};
+
+ if (res.status === "error") {
+ stop();
+ setPhase({
+ kind: "error",
+ text: res.message ?? "Training failed"
+ });
+ return;
+ }
+
+ stop();
+ await fetchModelInfo();
+
+ const infoRes = await apiFetch("/model-info");
+ const info: ModelInfo = infoRes ?? { status: "no_model" };
+
+ setModelInfo(info);
+
+ const pts = info.status === "ok" ? info.model!.points_count : prevPoints;
+ setPhase({ kind: "success", text: `Model trained on ${pts} points` });
+
+ onTrained();
+ return;
+ }
+
+ if (ts.state === "FAILURE") {
+ stop();
+ const msg = typeof ts.result === "string" ? ts.result : JSON.stringify(ts.result);
+ setPhase({ kind: "error", text: `Worker error: ${msg}` });
+ return;
+ }
+
+ } catch {
+ // /task-status not available yet — fall through to model-info fallback
+ }
+
+ // ── 2. Fallback: if task-status endpoint missing, detect via model-info ─
+ try {
+ const info = await apiFetch("/model-info");
+ if (info.status === "ok" && (info.model?.points_count ?? 0) !== prevPoints) {
+ stop();
+ setModelInfo(info);
+ setPhase({ kind: "success", text: `Model trained on ${info.model!.points_count} points` });
+ onTrained();
+ return;
+ }
+
+ } catch { }
+
+ if (elapsed >= TIMEOUT) {
+ stop();
+ setPhase({ kind: "error", text: "Training timed out. Check Celery worker logs." });
+ }
+ }, INTERVAL);
+ }, [fetchModelInfo, onTrained]);
+
+ const handleTrain = async () => {
+ if (pollRef.current) return;
+ const prevPoints = modelInfo?.model?.points_count ?? 0;
+ setPhase({ kind: "submitting" });
+ try {
+ const params = new URLSearchParams({ hours: trainHours, note: trainNote });
+ const d = await apiFetch(`/train?${params}`, {
+ method: "POST",
+ });
+
+ if (d.status === "accepted") {
+ setPhase({ kind: "polling", taskId: d.task_id ?? "?", elapsed: 0 });
+ startPolling(d.task_id ?? "?", prevPoints);
+ } else if (d.status === "ok" || d.status === "success") {
+ setPhase({ kind: "success", text: d.message ?? "Model trained successfully" });
+ await fetchModelInfo();
+ onTrained();
+ } else {
+ setPhase({ kind: "error", text: d.message ?? "Unknown error from server" });
+ }
+ } catch (e: any) {
+ if (e.status === 403) {
+ setPhase({ kind: "error", text: "Training the model requires admin privileges" });
+ } else {
+ setPhase({ kind: "error", text: `error: ${e.message}`})
+ }
+
+ }
+ };
+
+ const handleDelete = async () => {
+ if (!confirm("Reset model and return to auto-mode?")) return;
+ setDeleting(true);
+ try {
+ await apiFetch("/api/v1/model", {
+ method: "DELETE",
+ });
+ await fetchModelInfo();
+ setPhase({ kind: "success", text: "Model deleted. Switched to auto-mode." });
+ onTrained();
+ } catch (e: any) {
+ if (e.response?.status === 403) {
+ setPhase({ kind: "error", text: "Deleting the model requires admin privileges" });
+ } else {
+ const d = e.response?.data ?? {};
+ const detail = d.detail;
+ const message =
+ typeof detail === "string"
+ ? detail
+ : detail?.message ?? e.message ?? "Unknown error";
+ setPhase({ kind: "error", text: `Failed to delete: ${message}` });
+ }
+ } finally { setDeleting(false); }
+ };
+
+ const isTraining = phase.kind === "submitting" || phase.kind === "polling";
+ const hasModel = modelInfo?.status === "ok";
+
+ function StatusBanner() {
+ if (phase.kind === "idle") return null;
+
+ if (phase.kind === "submitting") return (
+
+
+ Submitting task to Celery…
+
+
+
+
Training in background…
+
{secs}s
+
+
+ task_id: {phase.taskId.slice(0, 18)}…
+
+
+
+ ✓
+ {phase.text}
+ setPhase({ kind: "idle" })} className="ml-auto text-emerald-600 hover:text-emerald-400 transition-colors">
+
+
+ );
+
+ if (phase.kind === "error") return (
+
+
+
+
Training failed
+
setPhase({ kind: "idle" })} className="text-red-700 hover:text-red-400 transition-colors">
+
+
+
{phase.text}
+
+
setExpanded((e) => !e)} className="w-full flex items-center gap-3 p-4 text-left">
+
+
+
+
+ {isTraining ? "Training…" : hasModel ? "Model active" : "Auto-mode"}
+
+
+ {isTraining
+ ? "Celery worker is processing the task"
+ : hasModel
+ ? `Trained on ${modelInfo!.model!.points_count} pts · ${new Date(modelInfo!.model!.trained_at).toLocaleDateString("ru-RU")}`
+ : "No manual model. Train on a clean period."}
+
+
+
+ {expanded && (
+
+ {hasModel && modelInfo?.model && (
+
+
Trained: {new Date(modelInfo.model.trained_at).toLocaleString("ru-RU")}
+
Period: {new Date(modelInfo.model.period_from).toLocaleString("ru-RU")} → {new Date(modelInfo.model.period_to).toLocaleString("ru-RU")}
+ {modelInfo.model.note &&
Note: {modelInfo.model.note}
}
+
+ )}
+
+
+
Train on a clean (normal load) period:
+
+
+
+ {isTraining
+ ?
+ :
+ {hasModel && !isTraining && (
+
+
+ )}
+
+
+
+
+
+ )}
+
+ {PERIODS.map((p) => (
+ onChange(p.value)}
+ className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+ value === p.value ? "bg-slate-700 text-white" : "text-slate-500 hover:text-slate-300"
+ }`}
+ >
+ {p.label}
+
+ ))}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/statCard.tsx b/frontend/src/components/statCard.tsx
new file mode 100644
index 0000000..356531b
--- /dev/null
+++ b/frontend/src/components/statCard.tsx
@@ -0,0 +1,14 @@
+export function StatCard({ label, value, sub, icon, accent = "text-white" }: {
+ label: string; value: string | number; sub?: string; icon: React.ReactNode; accent?: string;
+}) {
+ return (
+
+
+ {label}
+ {icon}
+
+
{value}
+ {sub &&
{sub}
}
+
+ {[
+ { label: "Total", value: total, color: "text-white" },
+ { label: "Online", value: online, color: "text-emerald-400" },
+ { label: "Offline", value: offline, color: "text-slate-500" },
+ ].map((s) => (
+
+
{s.value}
+
{s.label}
+
+ ))}
+
+
+
+
+
+
+ role: {user.role}
+
+
+
+
+
+ {user.username}
+
+
+
+
+
{label}
+ {payload.map((e: any) => (
+
+
+ {String(e.name).replace(/__cpu|__ram/, "")}
+
+
+ {typeof e.value === "number" ? e.value.toFixed(1) : e.value}%
+
+
+ ))}
+ {matching.length > 0 && (
+
+ {matching.map((a) => (
+
+
+
+ {a.device}:
+ {a.reason}
+
+
+ ))}
+
+ )}
+
+
{label}
+ {payload.map((e: any) => (
+
+
+ {String(e.name).replace(/__cpu|__ram/, "")}
+
+
+ {typeof e.value === "number" ? e.value.toFixed(1) : e.value}%
+
+
+ ))}
+ {matching.length > 0 && (
+
+ {matching.map((a) => (
+
+
+
+ {a.device}:
+ {a.reason}
+
+
+ ))}
+
+ )}
+
-
-
-
-
-
-
-
- ,
+
+
+
+
+
+
+
+
+
+ ,
)
\ No newline at end of file
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..f4f4db7
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,386 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { apiFetch } from "../api";
+import {
+ LineChart, Line, XAxis, YAxis, CartesianGrid,
+ Tooltip, ResponsiveContainer, ReferenceDot, Legend,
+} from "recharts";
+import {
+ Activity, AlertTriangle, ArrowLeft,
+ Clock, Cpu, MemoryStick, RefreshCw,
+ Server,
+} from "lucide-react";
+import { formatTime, getDeviceColor, getUrlDevices, setUrlDevices } from "../helpers/helpers";
+import type { DashboardData, MetricPoint } from "../types/Types";
+import type { Device } from "./DeviceAdmin";
+import { DeviceSelector } from "../components/deviceSelector";
+import { PeriodSelector } from "../components/periodSelector";
+import { StatCard } from "../components/statCard";
+import { ChartTooltip } from "../helpers/toolTip";
+import { ModelPanel } from "../components/modelPanel";
+import { AnomalyFeed } from "../components/anomalyFeed";
+
+// ─── Main Dashboard ───────────────────────────────────────────────────────────
+export default function Dashboard() {
+ const navigate = useNavigate();
+ const [devices, setDevices] = useState([]);
+ const [selectedDevices, setSelectedDevices] = useState([]);
+ const [hours, setHours] = useState(1);
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [lastFetched, setLastFetched] = useState(null);
+ // Track whether initial URL read happened
+ const initializedRef = useRef(false);
+
+ // Stable color map — order determined by devices array from /devices
+ const deviceColorMap: Record = {};
+ devices.forEach((d, i) => { deviceColorMap[d.name] = getDeviceColor(i); });
+
+ // ─── Selected devices → URL sync ─────────────────────────────────────────
+ const handleSetSelected = useCallback((next: string[]) => {
+ setSelectedDevices(next);
+ setUrlDevices(next);
+ }, []);
+
+ // ─── Fetch devices list ───────────────────────────────────────────────────
+ const fetchDevices = useCallback(async () => {
+ try {
+ const list: Device[] = await apiFetch("/devices");
+ setDevices(list);
+
+ if (!initializedRef.current) {
+ initializedRef.current = true;
+ const fromUrl = getUrlDevices();
+ // Filter URL devices to only those that exist
+ const valid = fromUrl.filter((n) => list.some((d) => d.name === n));
+ if (valid.length > 0) {
+ // URL had specific devices — use them and write back cleaned list
+ setSelectedDevices(valid);
+ setUrlDevices(valid);
+ } else {
+ // No URL param or none matched — select all, no URL param needed
+ const all = list.map((d) => d.name);
+ setSelectedDevices(all);
+ setUrlDevices([]);
+ }
+ } else {
+ // Subsequent refreshes: keep selection, just remove stale entries
+ setSelectedDevices((prev) => {
+ const kept = prev.filter((n) => list.some((d) => d.name === n));
+ return kept.length > 0 ? kept : list.map((d) => d.name);
+ });
+ }
+ } catch { }
+ }, []);
+
+ // ─── Fetch dashboard data (only from /api/dashboard) ─────────────────────
+ const fetchDashboard = useCallback(async () => {
+ try {
+ const params = new URLSearchParams({ hours: String(hours) });
+ const d = await apiFetch(`/dashboard?${params}`);
+ setData(d);
+ } catch { }
+ }, [hours]);
+
+ const fetchAll = useCallback(async () => {
+ await fetchDashboard();
+ setLastFetched(new Date());
+ setLoading(false);
+ }, [fetchDashboard]);
+
+ useEffect(() => { fetchDevices(); }, [fetchDevices]);
+
+ useEffect(() => {
+ setLoading(true);
+ fetchAll();
+ const id = setInterval(fetchAll, 20000);
+ return () => clearInterval(id);
+ }, [fetchAll]);
+
+ // ─── Derived data ─────────────────────────────────────────────────────────
+ const filteredMetrics = (data?.metrics ?? []).filter((m) =>
+ selectedDevices.includes(m.device)
+ );
+
+ const timelineMap: Record> = {};
+ filteredMetrics.forEach((m) => {
+ const t = formatTime(m.timestamp);
+ if (!timelineMap[t]) timelineMap[t] = {};
+ timelineMap[t][m.device] = { cpu: m.cpu, ram: m.ram };
+ });
+
+ const chartData = Object.entries(timelineMap)
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([time, devs]) => ({
+ time,
+ ...Object.fromEntries(
+ Object.entries(devs).flatMap(([dev, vals]) => [
+ [`${dev}__cpu`, vals.cpu],
+ [`${dev}__ram`, vals.ram],
+ ])
+ ),
+ }));
+
+ // Anomalies come from /api/dashboard — already have correct device field
+ // Filter to selected devices only
+ const filteredAnomalies = (data?.anomalies ?? []).filter((a) =>
+ selectedDevices.includes(a.device)
+ );
+
+ const latestPerDevice: Record = {};
+ filteredMetrics.forEach((m) => {
+ if (!latestPerDevice[m.device] || m.timestamp > latestPerDevice[m.device].timestamp)
+ latestPerDevice[m.device] = m;
+ });
+
+ const avgCpu = Object.values(latestPerDevice).length > 0
+ ? Object.values(latestPerDevice).reduce((s, m) => s + m.cpu, 0) / Object.values(latestPerDevice).length
+ : null;
+
+ const avgRam = Object.values(latestPerDevice).length > 0
+ ? Object.values(latestPerDevice).reduce((s, m) => s + m.ram, 0) / Object.values(latestPerDevice).length
+ : null;
+
+ const periodLabel = hours === 0 ? "all time" : hours < 24 ? `${hours}h` : `${hours / 24}d`;
+
+ function AnomalyDots({ field }: { field: "cpu" | "ram" }) {
+ return (
+ <>
+ {filteredAnomalies.map((a) => (
+
+
+
+
+
+
+ {/* ── Top bar ── */}
+
+ navigate("/")}
+ title="Back to device registry"
+ className="p-2 rounded-xl border border-slate-700/60 bg-slate-900/60 text-slate-400 hover:text-white hover:border-slate-600 transition-all"
+ >
+
+
+
+
+
+
+ {lastFetched && (
+
+
+ )}
+ { fetchDevices(); fetchAll(); }}
+ className="p-2 rounded-xl border border-slate-700/60 bg-slate-900/60 text-slate-400 hover:text-white hover:border-slate-600 transition-all"
+ >
+
+
+
+ {/* ── Stats ── */}
+
+
+
+ {/* ── Main grid ── */}
+
+
+ {/* Left: charts */}
+
+
+ {/* CPU */}
+
+
+
CPU usage
+ {filteredAnomalies.length > 0 && (
+
+
+ )}
+ %
+
+ {loading ? (
+
+ ) : chartData.length === 0 ? (
+
No data
+ ) : (
+
+
+ String(v).replace("__cpu", "")} />
+ {selectedDevices.map((dev) => (
+
+
+ )}
+
+
+ {/* RAM */}
+
+
+
RAM usage
+ %
+
+ {loading ? (
+
+ ) : chartData.length === 0 ? (
+
No data
+ ) : (
+
+
+ String(v).replace("__ram", "")} />
+ {selectedDevices.map((dev) => (
+
+
+ )}
+
+
+ {/* Per-device mini cards */}
+ {Object.keys(latestPerDevice).length > 1 && (
+
+
Latest per device
+
+ {Object.entries(latestPerDevice).map(([name, m]) => {
+ const color = deviceColorMap[name];
+ return (
+
+
+ {name}
+ {formatTime(m.timestamp)}
+
+ {(["cpu", "ram"] as const).map((field) => (
+
+
+ {field}
+ {m[field].toFixed(1)}%
+
+
+
(field === "cpu" ? 80 : 85) ? "#f87171"
+ : m[field] > (field === "cpu" ? 60 : 70) ? "#fb923c" : color,
+ }}
+ />
+
+
+ ))}
+
+ );
+ })}
+
+
+ )}
+
+
+ {/* Right sidebar */}
+
+
+
+
+
+
+
Anomaly log
+ {filteredAnomalies.length > 0 && (
+
+ {filteredAnomalies.length}
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/DeviceAdmin.tsx b/frontend/src/pages/DeviceAdmin.tsx
new file mode 100644
index 0000000..f017e68
--- /dev/null
+++ b/frontend/src/pages/DeviceAdmin.tsx
@@ -0,0 +1,245 @@
+import { useState, useEffect, useCallback } from "react";
+import { apiFetch } from "../api";
+import {
+ Server,
+ Plus,
+ RefreshCw,
+} from "lucide-react";
+import { AddDeviceModal } from "../components/modals/addDeviceModal";
+import { ConfirmDeleteModal } from "../components/modals/confirmDeleteModal";
+import { DeviceCard } from "../components/deviceCard";
+import { StatsBar } from "../components/statsBar";
+import { useNavigate } from "react-router-dom";
+// import { AddUserModal } from "../components/modals/addUserModal";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+export interface Device {
+ id: number;
+ ip: string;
+ name: string;
+ is_active: boolean;
+}
+
+// ─── Main App ────────────────────────────────────────────────────────────────
+export default function DeviceAdmin() {
+ const navigate = useNavigate();
+ const [devices, setDevices] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+ const [showAddDeviceModal, setAddDeviceShowModal] = useState(false);
+ const [filter, setFilter] = useState<"all" | "online" | "offline">("all");
+ const [lastFetched, setLastFetched] = useState(null);
+ const [deviceToDelete, setDeviceToDelete] = useState(null);
+
+ const fetchDevices = useCallback(async () => {
+ try {
+ const data = await apiFetch("/devices");
+ setDevices(data);
+ setLastFetched(new Date());
+ setError("");
+ } catch (e: any) {
+ setError(e.message);
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ // const fetchUsers = useCallback(async () => {
+ // try {
+ // const data = await apiFetch("/api/v1//users");
+ // setLastFetched(new Date());
+ // setError("");
+ // } catch (e: any) {
+ // setError(e.message);
+ // } finally {
+ // setLoading(false);
+ // }
+ // }, []);
+
+ const handleDeleteConfirm = async () => {
+ if (!deviceToDelete) return;
+ try {
+ await apiFetch(`/devices/${deviceToDelete.id}`, {
+ method: "DELETE",
+ });
+
+ setDeviceToDelete(null);
+ fetchDevices();
+ } catch (e: any) {
+ setError(e.message);
+ }
+ };
+
+ useEffect(() => {
+ fetchDevices();
+ const interval = setInterval(fetchDevices, 15000);
+ return () => clearInterval(interval);
+ }, [fetchDevices]);
+
+ const filtered = devices.filter((d) => {
+ if (filter === "online") return d.is_active;
+ if (filter === "offline") return !d.is_active;
+ return true;
+ });
+
+ return (
+
+
+
+
+
+
+ {/* ── Header ── */}
+
+
+
+
+
+
+
+ Infrastructure
+
+
+
+ Device Registry
+
+
+ Manage monitored endpoints
+
+
+
+
+ {lastFetched && (
+
+ synced {lastFetched.toLocaleTimeString()}
+
+ )}
+
+
+
setAddDeviceShowModal(true)}
+ className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-sm transition-all shadow-lg shadow-cyan-500/20 hover:shadow-cyan-400/30 cursor-pointer"
+ >
+
+
navigate("/userboard")}
+ className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-sm transition-all shadow-lg shadow-cyan-500/20 hover:shadow-cyan-400/30 cursor-pointer"
+ >
+ Userboard
+
+
navigate("/dashboard")}
+ className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-sm transition-all shadow-lg shadow-cyan-500/20 hover:shadow-cyan-400/30 cursor-pointer"
+ >
+ Dashboard
+
+
+
+
+ {/* ── Stats ── */}
+ {!loading && !error &&
}
+
+ {/* ── Filter tabs ── */}
+
+ {(["all", "online", "offline"] as const).map((f) => (
+ setFilter(f)}
+ className={`px-4 py-1.5 rounded-lg text-sm font-medium transition-all capitalize ${filter === f
+ ? "bg-slate-700 text-white shadow-sm"
+ : "text-slate-500 hover:text-slate-300"
+ }`}
+ >
+ {f}
+
+ ))}
+
+
+ {/* ── Content ── */}
+ {loading ? (
+
+ ) : error ? (
+
+
Failed to load devices
+
{error}
+
+ Retry
+
+
+ ) : filtered.length === 0 ? (
+
+
+
+
+ {filter === "all" ? "No devices registered yet." : `No ${filter} devices.`}
+
+ {filter === "all" && (
+
setAddDeviceShowModal(true)}
+ className="mt-4 text-xs text-cyan-500 hover:text-cyan-400 underline underline-offset-2"
+ >
+ Add your first device →
+
+ )}
+
+ ) : (
+
+ {filtered.map((d, i) => (
+ setDeviceToDelete(device)}
+ />
+ ))}
+
+ )}
+
+
+ {/* ── Modal ── */}
+ {showAddDeviceModal && (
+
setAddDeviceShowModal(false)}
+ onAdded={fetchDevices}
+ />
+ )}
+
+ {/* {showAddUserModal && (
+ setAddUserShowModal(false)}
+ // onAdded={fetchUsers}
+ />
+ )} */}
+
+ {deviceToDelete && (
+ setDeviceToDelete(null)}
+ onConfirm={handleDeleteConfirm}
+ />
+ )}
+ ([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState("");
+ const [selectedUser, setSelectedUser] = useState(null);
+
+ const fetchUsers = useCallback(async () => {
+ try {
+ const data = await apiFetch("/users");
+ setUsers(data);
+ setError("");
+ } catch (e: any) {
+ if (e.status === 403) {
+ setError("This page requires admin privileges");
+ } else {
+ setError(e.message);
+ }
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchUsers();
+ const interval = setInterval(fetchUsers, 15000);
+ return () => clearInterval(interval);
+ }, [fetchUsers]);
+
+ return (
+
+
+
+
+
+
+
+
navigate("/")}
+ title="Back to device registry"
+ className="self-start p-2 rounded-xl border border-slate-700/60 bg-slate-900/60 text-slate-400 hover:text-white hover:border-slate-600 transition-all cursor-pointer"
+ >
+
+
+
+
+
+
+ Users control
+
+
+
+ Users Registry
+
+
+ Manage Users
+
+
+
+
setAddUserShowModal(true)}
+ className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-sm transition-all shadow-lg shadow-cyan-500/20 hover:shadow-cyan-400/30 cursor-pointer"
+ >
+
+
+
+ {/* Content */}
+ {
+ loading ? (
+
+ ) : error ? (
+
+
Failed to load devices
+
{error}
+
+ Retry
+
+
+ ) : (
+
+ {users.map((d, i) => (
+ setSelectedUser(d)}
+ />
+ ))}
+
+ )
+ }
+
+
+ {showAddUserModal && (
+
setAddUserShowModal(false)}
+ fetchUsers={() => fetchUsers()}
+ />
+ )
+ }
+
+ {
+ selectedUser && (
+
+ setSelectedUser(null)}
+ fetchUsers={() => fetchUsers()}
+ />
+
+ )
+ }
+
+