mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-09 15:52:40 +02:00
feat: added improved llm model selector
This commit is contained in:
DESKTOP-RTLN3BA\$punk
parent
dc19b43967
commit
a3cd598e01
23 changed files with 14733 additions and 126 deletions
262
surfsense_web/app/(home)/uptime/page.tsx
Normal file
262
surfsense_web/app/(home)/uptime/page.tsx
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
import Link from "next/link";
|
||||
import { UPTIME_REPORT_URL } from "@/lib/env-config";
|
||||
|
||||
type UptimeStatus = "up" | "down";
|
||||
|
||||
interface LocationStat {
|
||||
uptime_status: UptimeStatus;
|
||||
response_time: number | null;
|
||||
last_check: number;
|
||||
}
|
||||
|
||||
interface UptimeMonitor {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
target: string;
|
||||
last_check: number;
|
||||
uptime_status: UptimeStatus;
|
||||
monitor_status: string;
|
||||
uptime: number;
|
||||
locations?: Record<string, LocationStat>;
|
||||
}
|
||||
|
||||
interface UptimeMonitorsApiResponse {
|
||||
monitors?: unknown[];
|
||||
}
|
||||
|
||||
const HETRIXTOOLS_API_BASE = "https://api.hetrixtools.com/v3";
|
||||
|
||||
function formatTimestamp(timestamp: number) {
|
||||
if (!Number.isFinite(timestamp) || timestamp <= 0) return "n/a";
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
function formatLocationName(location: string) {
|
||||
return location
|
||||
.replaceAll("_", " ")
|
||||
.split(" ")
|
||||
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function toNumber(value: unknown, fallback = 0) {
|
||||
if (typeof value === "number" && Number.isFinite(value)) return value;
|
||||
if (typeof value === "string") {
|
||||
const parsed = Number.parseFloat(value);
|
||||
if (Number.isFinite(parsed)) return parsed;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function normalizeUptimeStatus(value: unknown): UptimeStatus {
|
||||
return value === "down" ? "down" : "up";
|
||||
}
|
||||
|
||||
function normalizeMonitor(rawMonitor: unknown): UptimeMonitor | null {
|
||||
if (!rawMonitor || typeof rawMonitor !== "object") return null;
|
||||
|
||||
const monitor = rawMonitor as Record<string, unknown>;
|
||||
const rawLocations =
|
||||
monitor.locations && typeof monitor.locations === "object"
|
||||
? (monitor.locations as Record<string, unknown>)
|
||||
: {};
|
||||
|
||||
const locations: Record<string, LocationStat> = {};
|
||||
for (const [locationName, rawLocation] of Object.entries(rawLocations)) {
|
||||
if (!rawLocation || typeof rawLocation !== "object") continue;
|
||||
const location = rawLocation as Record<string, unknown>;
|
||||
locations[locationName] = {
|
||||
uptime_status: normalizeUptimeStatus(location.uptime_status),
|
||||
response_time:
|
||||
location.response_time === null ? null : toNumber(location.response_time, 0),
|
||||
last_check: toNumber(location.last_check, 0),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
id: String(monitor.id ?? ""),
|
||||
name: String(monitor.name ?? "Unnamed monitor"),
|
||||
type: String(monitor.type ?? ""),
|
||||
target: String(monitor.target ?? ""),
|
||||
last_check: toNumber(monitor.last_check, 0),
|
||||
uptime_status: normalizeUptimeStatus(monitor.uptime_status),
|
||||
monitor_status: String(monitor.monitor_status ?? "unknown"),
|
||||
uptime: toNumber(monitor.uptime, 0),
|
||||
locations,
|
||||
};
|
||||
}
|
||||
|
||||
async function fetchUptimeMonitors(): Promise<{
|
||||
monitors: UptimeMonitor[];
|
||||
error?: string;
|
||||
}> {
|
||||
const apiKey = process.env.HETRIXTOOLS_API_KEY;
|
||||
const monitorId = process.env.HETRIXTOOLS_MONITOR_ID;
|
||||
|
||||
if (!apiKey) {
|
||||
return {
|
||||
monitors: [],
|
||||
error:
|
||||
"Missing HETRIXTOOLS_API_KEY. Add it to your server environment to enable custom uptime UI.",
|
||||
};
|
||||
}
|
||||
|
||||
const query = monitorId
|
||||
? `id=${encodeURIComponent(monitorId)}`
|
||||
: "per_page=20&page=1&order_by=last_check&order=desc";
|
||||
|
||||
try {
|
||||
const response = await fetch(`${HETRIXTOOLS_API_BASE}/uptime-monitors?${query}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiKey}`,
|
||||
},
|
||||
next: { revalidate: 60 },
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return {
|
||||
monitors: [],
|
||||
error: `HetrixTools API request failed (${response.status}).`,
|
||||
};
|
||||
}
|
||||
|
||||
const data = (await response.json()) as UptimeMonitorsApiResponse;
|
||||
const monitors = (data.monitors ?? [])
|
||||
.map((monitor) => normalizeMonitor(monitor))
|
||||
.filter((monitor): monitor is UptimeMonitor => monitor !== null);
|
||||
return { monitors };
|
||||
} catch {
|
||||
return {
|
||||
monitors: [],
|
||||
error: "Could not reach HetrixTools API from the server.",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default async function UptimePage() {
|
||||
const { monitors, error } = await fetchUptimeMonitors();
|
||||
|
||||
return (
|
||||
<section className="min-h-screen pt-24 pb-16">
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 sm:px-6 lg:px-8">
|
||||
<div className="rounded-2xl border border-neutral-200/70 bg-white/80 p-6 shadow-sm backdrop-blur-sm dark:border-neutral-800 dark:bg-neutral-950/70">
|
||||
<p className="text-sm font-medium uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
|
||||
System Status
|
||||
</p>
|
||||
<h1 className="mt-2 text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
|
||||
SurfSense uptime dashboard
|
||||
</h1>
|
||||
<div className="mt-4 flex flex-wrap items-center gap-3 text-sm">
|
||||
<Link
|
||||
href={UPTIME_REPORT_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center rounded-full border border-neutral-300 px-4 py-2 font-medium text-neutral-700 transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-900"
|
||||
>
|
||||
Open original report
|
||||
</Link>
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Source: HetrixTools v3 API (`/uptime-monitors`).
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-2xl border border-amber-300 bg-amber-50 p-5 text-amber-900 dark:border-amber-700/70 dark:bg-amber-950/30 dark:text-amber-200">
|
||||
<p className="font-semibold">Unable to load custom uptime data</p>
|
||||
<p className="mt-1 text-sm">{error}</p>
|
||||
</div>
|
||||
) : monitors.length === 0 ? (
|
||||
<div className="rounded-2xl border border-neutral-200/70 bg-white p-5 text-neutral-700 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-300">
|
||||
No uptime monitors returned by HetrixTools API.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{monitors.map((monitor) => {
|
||||
const locations = Object.entries(monitor.locations ?? {});
|
||||
const isUp = monitor.uptime_status === "up";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={monitor.id}
|
||||
className="rounded-2xl border border-neutral-200/70 bg-white p-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950"
|
||||
>
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{monitor.name}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{monitor.target || "No target shown"}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-full px-3 py-1 text-xs font-semibold ${
|
||||
isUp
|
||||
? "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300"
|
||||
: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300"
|
||||
}`}
|
||||
>
|
||||
{isUp ? "Operational" : "Outage"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-neutral-200/70 p-3 dark:border-neutral-800">
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">Uptime</p>
|
||||
<p className="mt-1 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{monitor.uptime.toFixed(4)}%
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-neutral-200/70 p-3 dark:border-neutral-800">
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Last check
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
{formatTimestamp(monitor.last_check)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-neutral-200/70 p-3 dark:border-neutral-800">
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Monitor status
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium capitalize text-neutral-900 dark:text-neutral-100">
|
||||
{monitor.monitor_status.replaceAll("_", " ")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{locations.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
|
||||
Locations
|
||||
</p>
|
||||
<div className="mt-2 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{locations.map(([locationName, locationData]) => (
|
||||
<div
|
||||
key={`${monitor.id}-${locationName}`}
|
||||
className="rounded-xl border border-neutral-200/70 p-3 dark:border-neutral-800"
|
||||
>
|
||||
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
{formatLocationName(locationName)}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-neutral-600 dark:text-neutral-400">
|
||||
{locationData.uptime_status === "up" ? "Up" : "Down"} ·{" "}
|
||||
{locationData.response_time ?? "n/a"} ms
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue