351 lines
12 KiB
TypeScript
351 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Activity, Plus, RefreshCw, Trash2, ExternalLink } from "lucide-react";
|
|
|
|
interface App {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
url: string;
|
|
port: number;
|
|
path: string;
|
|
command: string;
|
|
category: string;
|
|
color: string;
|
|
enabled: boolean;
|
|
}
|
|
|
|
interface StatusEntry {
|
|
appId: string;
|
|
timestamp: string;
|
|
status: "up" | "down";
|
|
responseTime?: number;
|
|
}
|
|
|
|
export default function HeartbeatMonitor() {
|
|
const [apps, setApps] = useState<App[]>([]);
|
|
const [status, setStatus] = useState<StatusEntry[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [checking, setChecking] = useState<string | null>(null);
|
|
const [showAddApp, setShowAddApp] = useState(false);
|
|
const [newApp, setNewApp] = useState<Partial<App>>({
|
|
name: "",
|
|
description: "",
|
|
url: "http://localhost:",
|
|
port: 3000,
|
|
path: "",
|
|
command: "npm run dev",
|
|
category: "Other",
|
|
color: "#22C55E",
|
|
enabled: true,
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
const interval = setInterval(fetchData, 30000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
async function fetchData() {
|
|
try {
|
|
const res = await fetch("/api/monitor");
|
|
const data = await res.json();
|
|
setApps(data.apps || []);
|
|
setStatus(data.status || []);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function checkApp(app: App) {
|
|
setChecking(app.id);
|
|
try {
|
|
const start = Date.now();
|
|
await fetch(app.url, { method: "HEAD", mode: "no-cors" });
|
|
const responseTime = Date.now() - start;
|
|
|
|
const entry: StatusEntry = {
|
|
appId: app.id,
|
|
timestamp: new Date().toISOString(),
|
|
status: "up",
|
|
responseTime,
|
|
};
|
|
|
|
await fetch("/api/monitor", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ action: "recordStatus", entry }),
|
|
});
|
|
|
|
fetchData();
|
|
} catch {
|
|
const entry: StatusEntry = {
|
|
appId: app.id,
|
|
timestamp: new Date().toISOString(),
|
|
status: "down",
|
|
};
|
|
|
|
await fetch("/api/monitor", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ action: "recordStatus", entry }),
|
|
});
|
|
|
|
fetchData();
|
|
} finally {
|
|
setChecking(null);
|
|
}
|
|
}
|
|
|
|
async function addApp(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!newApp.name || !newApp.url) return;
|
|
|
|
await fetch("/api/monitor", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ action: "addApp", app: newApp }),
|
|
});
|
|
|
|
setNewApp({
|
|
name: "",
|
|
description: "",
|
|
url: "http://localhost:",
|
|
port: 3000,
|
|
path: "",
|
|
command: "npm run dev",
|
|
category: "Other",
|
|
color: "#22C55E",
|
|
enabled: true,
|
|
});
|
|
setShowAddApp(false);
|
|
fetchData();
|
|
}
|
|
|
|
async function deleteApp(id: string) {
|
|
if (!confirm("Delete this app from monitoring?")) return;
|
|
await fetch("/api/monitor", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ action: "deleteApp", id }),
|
|
});
|
|
fetchData();
|
|
}
|
|
|
|
function getAppStatus(appId: string) {
|
|
const appStatus = status.filter((s) => s.appId === appId);
|
|
const latest = appStatus[appStatus.length - 1];
|
|
const isUp = latest?.status === "up";
|
|
const uptime = appStatus.length > 0
|
|
? Math.round((appStatus.filter(s => s.status === "up").length / appStatus.length) * 100)
|
|
: 100;
|
|
|
|
return { latest, isUp, uptime };
|
|
}
|
|
|
|
const totalApps = apps.length;
|
|
const onlineApps = apps.filter((app) => getAppStatus(app.id).isUp).length;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 flex items-center justify-center">
|
|
<div className="text-slate-400">Loading...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-slate-100 p-6">
|
|
{/* Header */}
|
|
<div className="max-w-6xl mx-auto mb-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Activity className="w-8 h-8 text-emerald-500" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Heartbeat Monitor</h1>
|
|
<p className="text-slate-400">{onlineApps} of {totalApps} services online</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={fetchData}
|
|
className="p-2 bg-slate-800 rounded-lg text-slate-400 hover:text-white"
|
|
>
|
|
<RefreshCw className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => setShowAddApp(true)}
|
|
className="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Add App
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="bg-slate-900 rounded-lg border border-slate-800 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-slate-800 text-left">
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">Status</th>
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">Name</th>
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">URL</th>
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">Port</th>
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">Uptime</th>
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">Response</th>
|
|
<th className="px-4 py-3 text-sm font-medium text-slate-400">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{apps.map((app) => {
|
|
const { isUp, uptime, latest } = getAppStatus(app.id);
|
|
|
|
return (
|
|
<tr key={app.id} className="border-t border-slate-800 hover:bg-slate-800/50">
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${
|
|
isUp
|
|
? "bg-emerald-500/20 text-emerald-400"
|
|
: "bg-red-500/20 text-red-400"
|
|
}`}>
|
|
<span className={`w-1.5 h-1.5 rounded-full ${isUp ? "bg-emerald-400" : "bg-red-400"}`} />
|
|
{isUp ? "ONLINE" : "OFFLINE"}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div>
|
|
<p className="font-medium text-white">{app.name}</p>
|
|
<p className="text-sm text-slate-500">{app.description}</p>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<a
|
|
href={app.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-emerald-400 hover:text-emerald-300 text-sm"
|
|
>
|
|
{app.url}
|
|
</a>
|
|
</td>
|
|
<td className="px-4 py-3 text-slate-300 font-mono">{app.port}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`font-mono ${uptime >= 90 ? "text-emerald-400" : "text-yellow-400"}`}>
|
|
{uptime}%
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-slate-300 font-mono">
|
|
{latest?.responseTime ? `${latest.responseTime}ms` : "--"}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => checkApp(app)}
|
|
disabled={checking === app.id}
|
|
className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded"
|
|
title="Check now"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${checking === app.id ? "animate-spin" : ""}`} />
|
|
</button>
|
|
<a
|
|
href={app.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded"
|
|
title="Open app"
|
|
>
|
|
<ExternalLink className="w-4 h-4" />
|
|
</a>
|
|
<button
|
|
onClick={() => deleteApp(app.id)}
|
|
className="p-1.5 text-slate-400 hover:text-red-400 hover:bg-slate-700 rounded"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Add App Modal */}
|
|
{showAddApp && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-slate-900 rounded-lg p-6 w-full max-w-md border border-slate-800">
|
|
<h2 className="text-xl font-bold text-white mb-4">Add New App</h2>
|
|
<form onSubmit={addApp} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm text-slate-400 mb-1">Name</label>
|
|
<input
|
|
type="text"
|
|
value={newApp.name}
|
|
onChange={(e) => setNewApp({ ...newApp, name: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm text-slate-400 mb-1">Description</label>
|
|
<input
|
|
type="text"
|
|
value={newApp.description}
|
|
onChange={(e) => setNewApp({ ...newApp, description: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm text-slate-400 mb-1">URL</label>
|
|
<input
|
|
type="text"
|
|
value={newApp.url}
|
|
onChange={(e) => setNewApp({ ...newApp, url: e.target.value })}
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm text-slate-400 mb-1">Port</label>
|
|
<input
|
|
type="number"
|
|
value={newApp.port}
|
|
onChange={(e) => setNewApp({ ...newApp, port: parseInt(e.target.value) })}
|
|
className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAddApp(false)}
|
|
className="flex-1 bg-slate-800 hover:bg-slate-700 text-slate-300 py-2 rounded-lg"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 bg-emerald-500 hover:bg-emerald-600 text-white py-2 rounded-lg font-medium"
|
|
>
|
|
Add App
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|