Sanitized mirror from private repository - 2026-04-05 12:40:35 UTC
This commit is contained in:
Gitea Mirror Bot
383
dashboard/ui/app/automations/page.tsx
Normal file
383
dashboard/ui/app/automations/page.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { EmailStats, AutomationTimelineEntry } from "@/lib/types";
|
||||
import { StatCard } from "@/components/stat-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { StatusBadge } from "@/components/status-badge";
|
||||
|
||||
interface BackupResult {
|
||||
host: string;
|
||||
status: string;
|
||||
last_run: string;
|
||||
size?: string;
|
||||
}
|
||||
|
||||
interface DriftResult {
|
||||
stack: string;
|
||||
drifted: boolean;
|
||||
details?: string;
|
||||
}
|
||||
|
||||
interface StackRestart {
|
||||
stack: string;
|
||||
status: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
const categoryColors: Record<string, string> = {
|
||||
receipts: "bg-amber-500/20 border-amber-500/30 text-amber-400",
|
||||
newsletters: "bg-blue-500/20 border-blue-500/30 text-blue-400",
|
||||
accounts: "bg-violet-500/20 border-violet-500/30 text-violet-400",
|
||||
spam: "bg-red-500/20 border-red-500/30 text-red-400",
|
||||
personal: "bg-green-500/20 border-green-500/30 text-green-400",
|
||||
finance: "bg-emerald-500/20 border-emerald-500/30 text-emerald-400",
|
||||
work: "bg-cyan-500/20 border-cyan-500/30 text-cyan-400",
|
||||
promotions: "bg-amber-500/15 border-amber-500/25 text-amber-300",
|
||||
social: "bg-purple-500/20 border-purple-500/30 text-purple-400",
|
||||
travel: "bg-cyan-500/15 border-cyan-500/25 text-cyan-300",
|
||||
orders: "bg-orange-500/20 border-orange-500/30 text-orange-400",
|
||||
updates: "bg-teal-500/20 border-teal-500/30 text-teal-400",
|
||||
};
|
||||
|
||||
function getAccountColor(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
if (lower.includes("gmail") || lower.includes("lzbellina")) return "text-blue-400";
|
||||
if (lower.includes("dvish")) return "text-amber-400";
|
||||
if (lower.includes("proton") || lower.includes("admin")) return "text-violet-400";
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function getAccountGradient(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
if (lower.includes("gmail") || lower.includes("lzbellina")) return "bg-gradient-to-b from-blue-300 to-blue-500 bg-clip-text text-transparent";
|
||||
if (lower.includes("dvish")) return "bg-gradient-to-b from-amber-300 to-amber-500 bg-clip-text text-transparent";
|
||||
if (lower.includes("proton") || lower.includes("admin")) return "bg-gradient-to-b from-violet-300 to-violet-500 bg-clip-text text-transparent";
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function getCategoryClass(cat: string): string {
|
||||
const lower = cat.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(categoryColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "bg-white/[0.06] border-white/[0.08] text-muted-foreground";
|
||||
}
|
||||
|
||||
// Expected schedule intervals in ms for determining dot color
|
||||
const expectedIntervals: Record<string, number> = {
|
||||
email: 30 * 60 * 1000, // 30 min
|
||||
organizer: 30 * 60 * 1000, // 30 min
|
||||
restart: 5 * 60 * 1000, // 5 min
|
||||
stack: 5 * 60 * 1000, // 5 min
|
||||
backup: 24 * 60 * 60 * 1000, // 24 hours
|
||||
drift: 24 * 60 * 60 * 1000, // 24 hours
|
||||
validator: 24 * 60 * 60 * 1000, // 24 hours
|
||||
};
|
||||
|
||||
function getExpectedInterval(name: string): number {
|
||||
const lower = name.toLowerCase();
|
||||
for (const [key, interval] of Object.entries(expectedIntervals)) {
|
||||
if (lower.includes(key)) return interval;
|
||||
}
|
||||
return 60 * 60 * 1000; // default 1 hour
|
||||
}
|
||||
|
||||
function isOnSchedule(entry: AutomationTimelineEntry): boolean {
|
||||
if (!entry.last_run || !entry.exists) return false;
|
||||
const lastRun = new Date(entry.last_run).getTime();
|
||||
const now = Date.now();
|
||||
const expected = getExpectedInterval(entry.name);
|
||||
// Allow 2x the expected interval as grace
|
||||
return (now - lastRun) < expected * 2;
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
try {
|
||||
const d = new Date(dateStr);
|
||||
const now = Date.now();
|
||||
const diff = now - d.getTime();
|
||||
if (diff < 60000) return "just now";
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return `${Math.floor(diff / 86400000)}d ago`;
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeOnly(dateStr: string): string {
|
||||
try {
|
||||
return new Date(dateStr).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
export default function AutomationsPage() {
|
||||
const { data: emails } = usePoll<EmailStats>("/api/automations/email", 60000);
|
||||
const { data: backups } = usePoll<Record<string, unknown>>("/api/automations/backup", 120000);
|
||||
const { data: drift } = usePoll<Record<string, unknown>>("/api/automations/drift", 120000);
|
||||
const { data: restartsData } = usePoll<{ entries: StackRestart[] }>("/api/automations/restarts", 60000);
|
||||
const { data: timeline } = usePoll<AutomationTimelineEntry[]>("/api/automation-timeline", 60000);
|
||||
const restarts = restartsData?.entries ?? [];
|
||||
|
||||
// Compute stats for top row
|
||||
const totalEmailsToday = emails?.accounts
|
||||
? emails.accounts.reduce((sum, acct) => {
|
||||
const today = Number((acct as Record<string, unknown>).today ?? (acct as Record<string, unknown>).today_total ?? 0);
|
||||
return sum + today;
|
||||
}, 0)
|
||||
: 0;
|
||||
|
||||
const backupOk = String(backups?.status ?? "unknown") === "ok";
|
||||
const driftStatus = String(drift?.status ?? "unknown");
|
||||
const driftClean = driftStatus === "clean" || driftStatus === "no_log";
|
||||
const restartCount = restarts.length;
|
||||
|
||||
// Sort timeline by most recent first
|
||||
const sortedTimeline = timeline
|
||||
? [...timeline].sort((a, b) => {
|
||||
if (!a.last_run) return 1;
|
||||
if (!b.last_run) return -1;
|
||||
return new Date(b.last_run).getTime() - new Date(a.last_run).getTime();
|
||||
})
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Automations</h1>
|
||||
|
||||
{/* Top: Big stats row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
label="Emails Today"
|
||||
value={emails ? totalEmailsToday : "\u2014"}
|
||||
color="blue"
|
||||
sub="classified"
|
||||
/>
|
||||
<StatCard
|
||||
label="Backup Status"
|
||||
value={backups ? (backupOk ? "OK" : "FAIL") : "\u2014"}
|
||||
color={backupOk || !backups ? "green" : "amber"}
|
||||
sub={backups?.has_errors ? "errors detected" : "all good"}
|
||||
/>
|
||||
<StatCard
|
||||
label="Config Drift"
|
||||
value={drift ? (driftClean ? "0" : driftStatus) : "\u2014"}
|
||||
color={driftClean || !drift ? "emerald" : "amber"}
|
||||
sub={drift ? String(drift.last_result ?? "no scan yet") : "loading"}
|
||||
/>
|
||||
<StatCard
|
||||
label="Restarts"
|
||||
value={restartsData ? restartCount : "\u2014"}
|
||||
color={restartCount === 0 || !restartsData ? "violet" : "amber"}
|
||||
sub="container restarts"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Automation Timeline */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base font-semibold">Automation Timeline</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!timeline ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : sortedTimeline.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No automation data</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sortedTimeline.map((entry, i) => {
|
||||
const onSchedule = isOnSchedule(entry);
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between text-sm rounded-lg px-3 py-2 hover:bg-white/[0.03] transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full shrink-0 ${
|
||||
!entry.exists
|
||||
? "bg-gray-500"
|
||||
: onSchedule
|
||||
? "bg-green-500"
|
||||
: "bg-amber-500"
|
||||
}`}
|
||||
style={{
|
||||
boxShadow: !entry.exists
|
||||
? "none"
|
||||
: onSchedule
|
||||
? "0 0 8px rgba(34, 197, 94, 0.5)"
|
||||
: "0 0 8px rgba(245, 158, 11, 0.5)",
|
||||
}}
|
||||
/>
|
||||
<span className="text-foreground font-medium truncate">{entry.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 shrink-0 ml-3">
|
||||
{entry.last_run ? (
|
||||
<>
|
||||
<span className="text-xs text-muted-foreground/60">
|
||||
{formatTimeOnly(entry.last_run)}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/40 min-w-[60px] text-right">
|
||||
{formatRelativeTime(entry.last_run)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground/40">never</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Middle: Email Organizers */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base font-semibold">Email Organizers</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!emails ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{emails.accounts.map((acct: Record<string, unknown>) => {
|
||||
const name = String(acct.account ?? acct.name ?? "?");
|
||||
const today = Number(acct.today ?? acct.today_total ?? 0);
|
||||
const cats = (acct.categories ?? acct.today_categories ?? {}) as Record<string, number>;
|
||||
return (
|
||||
<div key={name} className="flex items-center gap-6 rounded-xl px-4 py-3 bg-white/[0.02] border border-white/[0.04] hover:bg-white/[0.04] transition-colors">
|
||||
<div className="shrink-0 min-w-[140px]">
|
||||
<p className={`text-base font-medium ${getAccountColor(name)}`}>{name}</p>
|
||||
<p className="text-xs text-muted-foreground/60 mt-0.5">today</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<p className={`text-3xl font-bold ${getAccountGradient(name)}`}>{today}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 flex-1">
|
||||
{Object.entries(cats).map(([cat, count]) => (
|
||||
<Badge
|
||||
key={cat}
|
||||
variant="secondary"
|
||||
className={`text-xs px-2.5 py-0.5 border ${getCategoryClass(cat)}`}
|
||||
>
|
||||
{cat}: {count}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bottom: System Health -- 2 columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{/* Backup Details */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Backup Details</CardTitle>
|
||||
{backups && (
|
||||
<StatusBadge
|
||||
color={backupOk ? "green" : "red"}
|
||||
label={String(backups.status ?? "unknown")}
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!backups ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{backups.has_errors ? (
|
||||
<p className="text-sm text-red-400 font-medium">Errors detected in backup</p>
|
||||
) : null}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Log entries today</span>
|
||||
<span className="text-foreground font-medium">{String(backups.entries ?? 0)}</span>
|
||||
</div>
|
||||
{backups.last_run ? (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Last run</span>
|
||||
<span className="text-foreground">{String(backups.last_run)}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{backups.email_count != null ? (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Emails backed up</span>
|
||||
<span className="text-foreground font-medium">{String(backups.email_count)}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Config Drift + Restarts */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Config Drift & Restarts</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Drift */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">Config Drift</p>
|
||||
{drift && (
|
||||
<StatusBadge
|
||||
color={driftClean ? "green" : "amber"}
|
||||
label={driftStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{drift && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{String(drift.last_result ?? "No scan results yet")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Restarts */}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Restarts</p>
|
||||
{restarts.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent restarts</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{restarts.map((r, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground font-medium">{r.stack}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge
|
||||
color={r.status === "success" ? "green" : "red"}
|
||||
label={r.status}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground/70">
|
||||
{new Date(r.timestamp).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
161
dashboard/ui/app/expenses/page.tsx
Normal file
161
dashboard/ui/app/expenses/page.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { ExpenseSummary } from "@/lib/types";
|
||||
import { StatCard } from "@/components/stat-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { DataTable, Column } from "@/components/data-table";
|
||||
|
||||
interface Transaction {
|
||||
date: string;
|
||||
vendor: string;
|
||||
amount: string | number;
|
||||
currency?: string;
|
||||
order_number?: string;
|
||||
email_account?: string;
|
||||
message_id?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
function getExpenseAccountColor(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
if (lower.includes("gmail") || lower.includes("lzbellina")) return "text-blue-400";
|
||||
if (lower.includes("dvish")) return "text-amber-400";
|
||||
if (lower.includes("proton") || lower.includes("admin")) return "text-violet-400";
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
|
||||
export default function ExpensesPage() {
|
||||
const { data: summary } = usePoll<ExpenseSummary>(
|
||||
"/api/expenses/summary",
|
||||
120000
|
||||
);
|
||||
const { data: expenseData } = usePoll<Transaction[] | { count: number; expenses: Transaction[] }>(
|
||||
"/api/expenses",
|
||||
120000
|
||||
);
|
||||
const transactions = Array.isArray(expenseData) ? expenseData : (expenseData?.expenses ?? []);
|
||||
|
||||
const maxVendor =
|
||||
summary?.top_vendors.reduce(
|
||||
(max, v) => Math.max(max, v.amount),
|
||||
0
|
||||
) ?? 1;
|
||||
|
||||
const txColumns: Column<Transaction>[] = [
|
||||
{ key: "date", label: "Date" },
|
||||
{
|
||||
key: "vendor",
|
||||
label: "Vendor",
|
||||
render: (row) => (
|
||||
<span className="font-medium text-foreground">{row.vendor}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Amount",
|
||||
render: (row) => {
|
||||
const amt = Number(row.amount || 0);
|
||||
return (
|
||||
<span className={amt >= 0 ? "text-green-400" : "text-red-400"}>
|
||||
${amt.toFixed(2)} {row.currency ?? ""}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ key: "order_number", label: "Order #" },
|
||||
{
|
||||
key: "email_account",
|
||||
label: "Account",
|
||||
render: (row) => (
|
||||
<span className={`truncate max-w-[120px] block text-xs ${getExpenseAccountColor(String(row.email_account ?? ""))}`}>
|
||||
{String(row.email_account ?? "")}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const accounts = transactions
|
||||
? [...new Set(transactions.map((t) => String(t.email_account ?? "")).filter(Boolean))]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Expenses</h1>
|
||||
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<StatCard
|
||||
label="Total Spend"
|
||||
value={summary ? `$${summary.total.toFixed(2)}` : "\u2014"}
|
||||
sub={summary?.month}
|
||||
/>
|
||||
<StatCard
|
||||
label="Transactions"
|
||||
value={summary?.count ?? "\u2014"}
|
||||
sub="this month"
|
||||
/>
|
||||
<StatCard
|
||||
label="Top Vendor"
|
||||
value={
|
||||
summary?.top_vendors?.[0]?.vendor ?? "\u2014"
|
||||
}
|
||||
sub={
|
||||
summary?.top_vendors?.[0]
|
||||
? `$${summary.top_vendors[0].amount.toFixed(2)}`
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Top Vendors Bar Chart */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Top Vendors</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!summary ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{summary.top_vendors.map((v) => (
|
||||
<div key={v.vendor} className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground">{v.vendor}</span>
|
||||
<span className="text-green-400">
|
||||
${v.amount.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
|
||||
style={{
|
||||
width: `${(v.amount / maxVendor) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Transactions Table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Transactions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataTable<Transaction>
|
||||
data={transactions ?? []}
|
||||
columns={txColumns}
|
||||
searchKey="vendor"
|
||||
filterKey="email_account"
|
||||
filterOptions={accounts}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
dashboard/ui/app/favicon.ico
Normal file
BIN
dashboard/ui/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
519
dashboard/ui/app/globals.css
Normal file
519
dashboard/ui/app/globals.css
Normal file
@@ -0,0 +1,519 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
/* Exo 2 Font */
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
}
|
||||
|
||||
/* Midnight theme defaults — used before ThemeProvider hydrates on client.
|
||||
ThemeProvider overrides these inline on :root once JS loads. */
|
||||
.dark {
|
||||
--background: 230 25% 4%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 220 30% 8%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 220 30% 8%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 217 33% 17%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217 33% 17%;
|
||||
--muted-foreground: 215 20% 68%;
|
||||
--accent: 217 33% 17%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 84% 60%;
|
||||
--border: 217 33% 20%;
|
||||
--input: 217 33% 20%;
|
||||
--ring: 217 91% 60%;
|
||||
--chart-1: 217 91% 60%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar: 220 30% 6%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 217 91% 60%;
|
||||
--sidebar-primary-foreground: 210 40% 98%;
|
||||
--sidebar-accent: 217 33% 17%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217 33% 20%;
|
||||
--sidebar-ring: 217 91% 60%;
|
||||
--card-bg: rgba(15, 20, 40, 0.35);
|
||||
--card-border: rgba(255, 255, 255, 0.12);
|
||||
--card-hover-bg: rgba(15, 20, 40, 0.45);
|
||||
--card-hover-border: rgba(255, 255, 255, 0.2);
|
||||
--glass-bg: rgba(15, 20, 40, 0.30);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-hover: rgba(255, 255, 255, 0.03);
|
||||
--glass-input-bg: rgba(255, 255, 255, 0.06);
|
||||
--glass-input-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-input-focus: rgba(59, 130, 246, 0.3);
|
||||
--glass-input-focus-bg: rgba(255, 255, 255, 0.08);
|
||||
--glass-table-header: rgba(255, 255, 255, 0.08);
|
||||
--glass-bar-track: rgba(255, 255, 255, 0.10);
|
||||
--nav-bg: rgba(6, 6, 17, 0.65);
|
||||
--nav-border: rgba(255, 255, 255, 0.08);
|
||||
--nav-active: rgba(255, 255, 255, 0.08);
|
||||
--nav-hover: rgba(255, 255, 255, 0.05);
|
||||
--accent-color: #3b82f6;
|
||||
--accent-glow: rgba(59, 130, 246, 0.3);
|
||||
--card-lift-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
--stat-glow: 0 0 20px rgba(59, 130, 246, 0.15);
|
||||
--nav-active-glow: 0 2px 10px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Light theme base values (overridden by ThemeProvider inline styles) */
|
||||
:root:not(.dark) {
|
||||
--background: 210 20% 98%;
|
||||
--foreground: 215 25% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 215 25% 15%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 215 25% 15%;
|
||||
--primary: 217 91% 53%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 214 32% 91%;
|
||||
--secondary-foreground: 215 25% 15%;
|
||||
--muted: 214 32% 91%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
--accent: 214 32% 91%;
|
||||
--accent-foreground: 215 25% 15%;
|
||||
--destructive: 0 84% 60%;
|
||||
--border: 214 32% 88%;
|
||||
--input: 214 32% 88%;
|
||||
--ring: 217 91% 53%;
|
||||
--chart-1: 217 91% 53%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar: 210 20% 97%;
|
||||
--sidebar-foreground: 215 25% 15%;
|
||||
--sidebar-primary: 217 91% 53%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 214 32% 91%;
|
||||
--sidebar-accent-foreground: 215 25% 15%;
|
||||
--sidebar-border: 214 32% 88%;
|
||||
--sidebar-ring: 217 91% 53%;
|
||||
|
||||
--card-bg: rgba(255, 255, 255, 0.9);
|
||||
--card-border: rgba(0, 0, 0, 0.08);
|
||||
--card-hover-bg: rgba(255, 255, 255, 1);
|
||||
--card-hover-border: rgba(0, 0, 0, 0.12);
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-border: rgba(0, 0, 0, 0.06);
|
||||
--glass-hover: rgba(0, 0, 0, 0.02);
|
||||
--glass-input-bg: rgba(255, 255, 255, 0.8);
|
||||
--glass-input-border: rgba(0, 0, 0, 0.1);
|
||||
--glass-input-focus: rgba(37, 99, 235, 0.3);
|
||||
--glass-input-focus-bg: rgba(255, 255, 255, 0.95);
|
||||
--glass-table-header: rgba(0, 0, 0, 0.03);
|
||||
--glass-bar-track: rgba(0, 0, 0, 0.06);
|
||||
--nav-bg: rgba(255, 255, 255, 0.8);
|
||||
--nav-border: rgba(0, 0, 0, 0.06);
|
||||
--nav-active: rgba(0, 0, 0, 0.05);
|
||||
--nav-hover: rgba(0, 0, 0, 0.03);
|
||||
--accent-color: #2563eb;
|
||||
--accent-glow: rgba(37, 99, 235, 0.2);
|
||||
--card-lift-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 40px rgba(37, 99, 235, 0.02);
|
||||
--stat-glow: 0 0 20px rgba(37, 99, 235, 0.08);
|
||||
--nav-active-glow: 0 2px 10px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Force readable text in dark mode --- */
|
||||
.dark body,
|
||||
.dark [data-slot="card"],
|
||||
.dark [data-slot="card-content"],
|
||||
.dark [data-slot="card-header"],
|
||||
.dark [data-slot="card-title"],
|
||||
.dark p,
|
||||
.dark span,
|
||||
.dark div {
|
||||
color: inherit;
|
||||
}
|
||||
.dark {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
.dark [data-slot="card-title"] {
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
.dark .text-muted-foreground {
|
||||
color: hsl(var(--muted-foreground, 215 20% 68%)) !important;
|
||||
}
|
||||
|
||||
/* --- Glassmorphism Background --- */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: #080818;
|
||||
}
|
||||
|
||||
/* Animated gradient background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 140% 70% at 5% 5%, rgba(59, 130, 246, 0.35), transparent 50%),
|
||||
radial-gradient(ellipse 100% 90% at 95% 15%, rgba(139, 92, 246, 0.28), transparent 50%),
|
||||
radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%),
|
||||
radial-gradient(ellipse 80% 50% at 75% 55%, rgba(236, 72, 153, 0.15), transparent 50%);
|
||||
}
|
||||
|
||||
/* --- Glass Utility --- */
|
||||
.glass {
|
||||
background: rgba(15, 20, 35, 0.45);
|
||||
backdrop-filter: blur(16px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* --- Override shadcn Card for glassmorphism --- */
|
||||
[data-slot="card"] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(15, 20, 35, 0.35) !important;
|
||||
backdrop-filter: blur(24px) saturate(160%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
|
||||
--tw-ring-shadow: none !important;
|
||||
--tw-ring-color: transparent !important;
|
||||
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
|
||||
animation: fade-up 0.5s ease-out both;
|
||||
}
|
||||
[data-slot="card"]:hover {
|
||||
background: rgba(20, 25, 45, 0.45) !important;
|
||||
border-color: var(--accent-color, rgba(59, 130, 246, 0.3)) !important;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 20px var(--accent-glow, rgba(59, 130, 246, 0.08)) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Card inner glow removed — was too visible/distracting */
|
||||
|
||||
/* Stagger card animations */
|
||||
[data-slot="card"]:nth-child(1) { animation-delay: 0ms; }
|
||||
[data-slot="card"]:nth-child(2) { animation-delay: 60ms; }
|
||||
[data-slot="card"]:nth-child(3) { animation-delay: 120ms; }
|
||||
[data-slot="card"]:nth-child(4) { animation-delay: 180ms; }
|
||||
[data-slot="card"]:nth-child(5) { animation-delay: 240ms; }
|
||||
[data-slot="card"]:nth-child(6) { animation-delay: 300ms; }
|
||||
|
||||
/* --- Animations --- */
|
||||
|
||||
/* Card entrance */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-up {
|
||||
animation: fade-up 0.5s ease-out both;
|
||||
}
|
||||
|
||||
/* Status dot glow */
|
||||
.glow-green { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.4); }
|
||||
.glow-red { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4); }
|
||||
.glow-amber { box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.4); }
|
||||
.glow-blue { box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.4); }
|
||||
.glow-purple { box-shadow: 0 0 8px 2px rgba(168, 85, 247, 0.4); }
|
||||
|
||||
/* LIVE badge pulse */
|
||||
@keyframes live-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.animate-live-pulse {
|
||||
animation: live-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Slide-in for feed items */
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.animate-slide-in {
|
||||
animation: slide-in 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Logo float animation */
|
||||
@keyframes logo-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-2px); }
|
||||
}
|
||||
.animate-logo-float {
|
||||
animation: logo-float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Logo shimmer */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% center; }
|
||||
100% { background-position: 200% center; }
|
||||
}
|
||||
.animate-shimmer {
|
||||
background-size: 200% auto;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
|
||||
/* Number transition */
|
||||
.tabular-nums-transition {
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* VRAM/progress bar glow */
|
||||
@keyframes bar-glow {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.2); }
|
||||
}
|
||||
.animate-bar-glow {
|
||||
animation: bar-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Card hover lift - softer for glass */
|
||||
.card-hover-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
.card-hover-lift:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--card-lift-shadow);
|
||||
}
|
||||
|
||||
/* Active nav glow */
|
||||
.nav-active-glow {
|
||||
box-shadow: var(--nav-active-glow);
|
||||
}
|
||||
|
||||
/* --- Gauge Ring (SVG-based circular progress) --- */
|
||||
.gauge-track {
|
||||
fill: none;
|
||||
stroke: var(--glass-bar-track);
|
||||
}
|
||||
.gauge-fill {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 1s ease-out;
|
||||
}
|
||||
|
||||
/* Number glow for big stat values */
|
||||
.stat-glow {
|
||||
text-shadow: var(--stat-glow);
|
||||
}
|
||||
|
||||
/* Glass input fields */
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #f1f5f9;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.glass-input:focus {
|
||||
border-color: var(--glass-input-focus);
|
||||
background: var(--glass-input-focus-bg);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Frosted nav bar */
|
||||
nav, .dark nav {
|
||||
background: rgba(8, 8, 24, 0.7) !important;
|
||||
backdrop-filter: blur(24px) saturate(150%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
|
||||
}
|
||||
|
||||
/* Glass table rows */
|
||||
.glass-table-header {
|
||||
background: var(--glass-table-header);
|
||||
}
|
||||
.glass-table-row {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.glass-table-row:hover {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
|
||||
/* Glass progress bar track */
|
||||
.glass-bar-track {
|
||||
background: var(--glass-bar-track);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Glass bar fill glow */
|
||||
.glass-bar-fill {
|
||||
border-radius: 999px;
|
||||
position: relative;
|
||||
}
|
||||
.glass-bar-fill::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
|
||||
animation: bar-shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes bar-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* --- Visual Flair Effects --- */
|
||||
|
||||
/* Particle/sparkle dots — CSS-only floating dots in background */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.15), transparent),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.1), transparent),
|
||||
radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.12), transparent),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.08), transparent),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.15), transparent),
|
||||
radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.1), transparent),
|
||||
radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.12), transparent),
|
||||
radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.08), transparent),
|
||||
radial-gradient(1.5px 1.5px at 25% 35%, rgba(255,255,255,0.18), transparent),
|
||||
radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.14), transparent),
|
||||
radial-gradient(1.5px 1.5px at 75% 25%, rgba(255,255,255,0.16), transparent),
|
||||
radial-gradient(1.5px 1.5px at 40% 90%, rgba(255,255,255,0.1), transparent);
|
||||
animation: sparkle-drift 30s linear infinite;
|
||||
}
|
||||
@keyframes sparkle-drift {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Gradient text for headings */
|
||||
.dark h1 {
|
||||
background: linear-gradient(135deg, #f1f5f9, var(--accent-color, #3b82f6));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Smooth number counter animation on stat values */
|
||||
.stat-value {
|
||||
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* Active nav tab underline glow */
|
||||
.nav-active-glow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-color, #3b82f6), transparent);
|
||||
border-radius: 2px;
|
||||
filter: blur(1px);
|
||||
}
|
||||
389
dashboard/ui/app/infrastructure/page.tsx
Normal file
389
dashboard/ui/app/infrastructure/page.tsx
Normal file
@@ -0,0 +1,389 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { Container, OverviewStats, KumaStats, DiskUsageEntry } from "@/lib/types";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { DataTable, Column } from "@/components/data-table";
|
||||
import { ContainerLogsModal } from "@/components/container-logs-modal";
|
||||
import { StatusBadge } from "@/components/status-badge";
|
||||
import { postAPI } from "@/lib/api";
|
||||
|
||||
interface OlaresPod {
|
||||
name: string;
|
||||
namespace: string;
|
||||
status: string;
|
||||
restarts: number;
|
||||
age: string;
|
||||
}
|
||||
|
||||
const endpointColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
homelab: "text-green-400",
|
||||
};
|
||||
|
||||
function getContainerStateColor(state: string): string {
|
||||
const lower = state.toLowerCase();
|
||||
if (lower === "running") return "text-green-400";
|
||||
if (lower === "exited" || lower === "dead") return "text-red-400";
|
||||
if (lower === "created" || lower === "restarting" || lower === "paused") return "text-amber-400";
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
const hostColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
homelab: "text-green-400",
|
||||
guava: "text-orange-400",
|
||||
seattle: "text-teal-400",
|
||||
jellyfish: "text-indigo-400",
|
||||
"matrix-ubuntu": "text-pink-400",
|
||||
};
|
||||
|
||||
export default function InfrastructurePage() {
|
||||
const { data: containers } = usePoll<Container[]>(
|
||||
"/api/containers",
|
||||
30000
|
||||
);
|
||||
const { data: overview } = usePoll<OverviewStats>(
|
||||
"/api/stats/overview",
|
||||
60000
|
||||
);
|
||||
const { data: pods } = usePoll<OlaresPod[]>("/api/olares/pods", 30000);
|
||||
const { data: kuma } = usePoll<KumaStats>("/api/kuma/monitors", 60000);
|
||||
const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);
|
||||
|
||||
const [logsTarget, setLogsTarget] = useState<{
|
||||
id: string;
|
||||
name: string;
|
||||
endpoint: string;
|
||||
} | null>(null);
|
||||
|
||||
const [hoveredMonitor, setHoveredMonitor] = useState<number | null>(null);
|
||||
|
||||
const endpoints = useMemo(() => {
|
||||
if (!containers) return [];
|
||||
return [...new Set(containers.map((c) => c.endpoint))];
|
||||
}, [containers]);
|
||||
|
||||
const containerColumns: Column<Container>[] = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
render: (row) => (
|
||||
<span className="font-medium text-foreground">{row.name}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "state",
|
||||
label: "State",
|
||||
render: (row) => (
|
||||
<StatusBadge
|
||||
color={row.state === "running" ? "green" : "red"}
|
||||
label={row.state}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: "status", label: "Status" },
|
||||
{
|
||||
key: "endpoint",
|
||||
label: "Endpoint",
|
||||
render: (row) => (
|
||||
<span className={`font-medium ${endpointColors[row.endpoint.toLowerCase()] ?? "text-foreground"}`}>
|
||||
{row.endpoint}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "image",
|
||||
label: "Image",
|
||||
render: (row) => (
|
||||
<span className="truncate max-w-[200px] block">{row.image}</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const podColumns: Column<OlaresPod>[] = [
|
||||
{ key: "name", label: "Pod" },
|
||||
{ key: "namespace", label: "Namespace" },
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
render: (row) => (
|
||||
<StatusBadge
|
||||
color={row.status === "Running" ? "green" : "amber"}
|
||||
label={row.status}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: "restarts", label: "Restarts" },
|
||||
{ key: "age", label: "Age" },
|
||||
];
|
||||
|
||||
const gpu = overview?.gpu;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Infrastructure</h1>
|
||||
|
||||
{/* Kuma Monitors */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Uptime Kuma</CardTitle>
|
||||
{kuma && (
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
|
||||
{kuma.up} up
|
||||
</Badge>
|
||||
{kuma.down > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-red-500/10 border border-red-500/20 text-red-400">
|
||||
{kuma.down} down
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">{kuma.total} total</span>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!kuma ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{kuma.monitors.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="relative"
|
||||
onMouseEnter={() => setHoveredMonitor(m.id)}
|
||||
onMouseLeave={() => setHoveredMonitor(null)}
|
||||
>
|
||||
<span
|
||||
className={`inline-block w-3 h-3 rounded-sm cursor-pointer transition-all ${
|
||||
!m.active
|
||||
? "bg-gray-500/50"
|
||||
: m.status
|
||||
? "bg-green-500 hover:bg-green-400"
|
||||
: "bg-red-500 hover:bg-red-400"
|
||||
}`}
|
||||
style={{
|
||||
boxShadow: !m.active
|
||||
? "none"
|
||||
: m.status
|
||||
? "0 0 4px rgba(34, 197, 94, 0.4)"
|
||||
: "0 0 4px rgba(239, 68, 68, 0.5)",
|
||||
}}
|
||||
/>
|
||||
{hoveredMonitor === m.id && (
|
||||
<div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 rounded-lg bg-gray-900/95 border border-white/[0.12] text-xs whitespace-nowrap shadow-lg pointer-events-none">
|
||||
<p className="text-foreground font-medium">{m.name}</p>
|
||||
{m.url && <p className="text-muted-foreground/60 mt-0.5">{m.url}</p>}
|
||||
<p className={`mt-0.5 ${m.active ? (m.status ? "text-green-400" : "text-red-400") : "text-gray-400"}`}>
|
||||
{!m.active ? "Inactive" : m.status ? "Up" : "Down"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Container Table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Containers</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataTable<Container>
|
||||
data={containers ?? []}
|
||||
columns={containerColumns}
|
||||
searchKey="name"
|
||||
filterKey="endpoint"
|
||||
filterOptions={endpoints}
|
||||
actions={(row) => (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-6 text-[10px] px-2 border-white/[0.08] hover:bg-white/[0.06]"
|
||||
onClick={() =>
|
||||
setLogsTarget({
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
endpoint: row.endpoint,
|
||||
})
|
||||
}
|
||||
>
|
||||
Logs
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-6 text-[10px] px-2 border-white/[0.08] hover:bg-white/[0.06]"
|
||||
onClick={() =>
|
||||
postAPI(
|
||||
`/api/containers/${row.endpoint}/${row.id}/restart`
|
||||
)
|
||||
}
|
||||
>
|
||||
Restart
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Row 2: Olares Pods + GPU */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Olares Pods</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataTable<OlaresPod>
|
||||
data={pods ?? []}
|
||||
columns={podColumns}
|
||||
searchKey="name"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">GPU Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!gpu ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : gpu.available ? (
|
||||
<>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{gpu.name}
|
||||
</p>
|
||||
{gpu.vram_used_mb != null && gpu.vram_total_mb != null && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mb-1.5">
|
||||
<span>VRAM</span>
|
||||
<span>
|
||||
{(gpu.vram_used_mb / 1024).toFixed(1)} /{" "}
|
||||
{(gpu.vram_total_mb / 1024).toFixed(1)} GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="glass-bar-track h-3">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
|
||||
style={{
|
||||
width: `${(gpu.vram_used_mb / gpu.vram_total_mb) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-3 gap-4 text-xs">
|
||||
<div>
|
||||
<p className="text-muted-foreground/70">Temperature</p>
|
||||
<p className="text-foreground text-lg font-semibold stat-glow">
|
||||
{gpu.temp_c ?? "\u2014"}°C
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground/70">Power</p>
|
||||
<p className="text-foreground text-lg font-semibold stat-glow">
|
||||
{gpu.power_w ?? "\u2014"}W
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground/70">Utilization</p>
|
||||
<p className="text-foreground text-lg font-semibold stat-glow">
|
||||
{gpu.utilization_pct ?? "\u2014"}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">GPU not available</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Disk Usage - Full */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Disk Usage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!disks ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : disks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No disk data</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{[...disks]
|
||||
.sort((a, b) => b.used_pct - a.used_pct)
|
||||
.map((d, i) => {
|
||||
const color =
|
||||
d.used_pct >= 85
|
||||
? "from-red-500 to-red-400"
|
||||
: d.used_pct >= 70
|
||||
? "from-amber-500 to-amber-400"
|
||||
: "from-green-500 to-emerald-400";
|
||||
const hostCls =
|
||||
hostColors[d.host.toLowerCase()] ?? "text-foreground";
|
||||
|
||||
return (
|
||||
<div key={`${d.host}-${d.mount}-${i}`} className="space-y-1">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`font-medium ${hostCls}`}>{d.host}</span>
|
||||
<span className="text-muted-foreground/60 font-mono text-xs truncate">
|
||||
{d.mount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{d.total_gb >= 1000
|
||||
? `${(d.total_gb / 1000).toFixed(1)} TB`
|
||||
: `${Math.round(d.total_gb)} GB`}
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums-transition min-w-[36px] text-right">
|
||||
{d.used_pct}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
|
||||
style={{ width: `${d.used_pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Logs Modal */}
|
||||
<ContainerLogsModal
|
||||
containerId={logsTarget?.id ?? null}
|
||||
containerName={logsTarget?.name ?? ""}
|
||||
endpoint={logsTarget?.endpoint ?? ""}
|
||||
onClose={() => setLogsTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
dashboard/ui/app/layout.tsx
Normal file
46
dashboard/ui/app/layout.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Nav } from "@/components/nav";
|
||||
import { ToastProvider } from "@/components/toast-provider";
|
||||
import { OllamaChat } from "@/components/ollama-chat";
|
||||
import { KeyboardShortcuts } from "@/components/keyboard-shortcuts";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Homelab Dashboard",
|
||||
description: "Infrastructure monitoring and management",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col" style={{ fontFamily: "'Exo 2', var(--font-geist-sans), system-ui, sans-serif" }}>
|
||||
<ThemeProvider>
|
||||
<Nav />
|
||||
<main className="flex-1 p-6">{children}</main>
|
||||
<ToastProvider />
|
||||
<OllamaChat />
|
||||
<KeyboardShortcuts />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
137
dashboard/ui/app/logs/page.tsx
Normal file
137
dashboard/ui/app/logs/page.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { fetchAPI } from "@/lib/api";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface LogFile {
|
||||
name: string;
|
||||
filename?: string;
|
||||
size?: string;
|
||||
size_bytes?: number;
|
||||
modified?: number;
|
||||
}
|
||||
|
||||
export default function LogsPage() {
|
||||
const { data: logsRaw } = usePoll<LogFile[] | { files: LogFile[] }>("/api/logs", 60000);
|
||||
const logFiles = Array.isArray(logsRaw) ? logsRaw : (logsRaw?.files ?? []);
|
||||
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [content, setContent] = useState<string>("");
|
||||
const [loadingContent, setLoadingContent] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!selected) {
|
||||
setContent("");
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
setLoadingContent(true);
|
||||
fetchAPI<{ lines?: string[]; content?: string } | string>(`/api/logs/${encodeURIComponent(selected)}?tail=200`)
|
||||
.then((data) => {
|
||||
if (cancelled) return;
|
||||
if (typeof data === "string") setContent(data);
|
||||
else if (Array.isArray((data as Record<string,unknown>).lines)) setContent(((data as Record<string,unknown>).lines as string[]).join("\n"));
|
||||
else if ((data as Record<string,unknown>).content) setContent(String((data as Record<string,unknown>).content));
|
||||
else setContent(JSON.stringify(data, null, 2));
|
||||
})
|
||||
.catch((err) => {
|
||||
if (cancelled) return;
|
||||
setContent(`Error loading log: ${err}`);
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoadingContent(false);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [selected]);
|
||||
|
||||
const filteredLines = useMemo(() => {
|
||||
if (!content) return [];
|
||||
const lines = content.split("\n");
|
||||
if (!search.trim()) return lines;
|
||||
const lower = search.toLowerCase();
|
||||
return lines.filter(line => line.toLowerCase().includes(lower));
|
||||
}, [content, search]);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Logs</h1>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-5" style={{ minHeight: "500px" }}>
|
||||
{/* Left sidebar: log file list */}
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Log Files</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[460px]">
|
||||
{logFiles.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{logFiles.map((file) => (
|
||||
<button
|
||||
key={file.name}
|
||||
onClick={() => setSelected(file.name)}
|
||||
className={cn(
|
||||
"w-full text-left rounded-lg px-3 py-2 text-sm transition-all duration-200",
|
||||
selected === file.name
|
||||
? "bg-white/[0.06] text-foreground"
|
||||
: "text-muted-foreground hover:bg-white/[0.03] hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<p className="font-medium truncate">{file.name}</p>
|
||||
{(file.size || file.size_bytes != null) && (
|
||||
<p className="text-[10px] text-muted-foreground/60">
|
||||
{file.size ?? (file.size_bytes != null ? `${(file.size_bytes / 1024).toFixed(0)} KB` : "")}
|
||||
</p>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Right: log content viewer */}
|
||||
<Card className="lg:col-span-3">
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between gap-4">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
{selected ?? "Select a log file"}
|
||||
</CardTitle>
|
||||
{selected && (
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Filter lines..."
|
||||
className="rounded-lg glass-input px-3 py-1.5 text-xs w-48"
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[460px]">
|
||||
{!selected ? (
|
||||
<p className="text-xs text-muted-foreground/60 py-4 text-center">
|
||||
Select a log file from the sidebar
|
||||
</p>
|
||||
) : loadingContent ? (
|
||||
<p className="text-xs text-muted-foreground py-4 text-center">
|
||||
Loading...
|
||||
</p>
|
||||
) : (
|
||||
<pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap break-all leading-relaxed">
|
||||
{filteredLines.join("\n") || "No matching lines"}
|
||||
</pre>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
694
dashboard/ui/app/media/page.tsx
Normal file
694
dashboard/ui/app/media/page.tsx
Normal file
@@ -0,0 +1,694 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { StatusBadge } from "@/components/status-badge";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { JellyfinLatestItem, ArrHistoryItem } from "@/lib/types";
|
||||
|
||||
interface QueueItem {
|
||||
title: string;
|
||||
status: string;
|
||||
size?: string;
|
||||
timeleft?: string;
|
||||
progress?: number;
|
||||
}
|
||||
|
||||
interface SonarrQueueItem {
|
||||
title: string;
|
||||
status: string;
|
||||
sizeleft?: string;
|
||||
timeleft?: string;
|
||||
}
|
||||
|
||||
interface RadarrQueueItem {
|
||||
title: string;
|
||||
status: string;
|
||||
sizeleft?: string;
|
||||
timeleft?: string;
|
||||
}
|
||||
|
||||
interface SabQueue {
|
||||
slots: QueueItem[];
|
||||
speed: string;
|
||||
paused: boolean;
|
||||
}
|
||||
|
||||
interface ProwlarrStats {
|
||||
total: number;
|
||||
enabled: number;
|
||||
indexers: { name: string; protocol: string }[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface BazarrStatus {
|
||||
version?: string;
|
||||
sonarr_signalr?: string;
|
||||
radarr_signalr?: string;
|
||||
wanted_episodes?: number;
|
||||
wanted_movies?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface ABSLibrary {
|
||||
name: string;
|
||||
type: string;
|
||||
items: number;
|
||||
}
|
||||
|
||||
interface ABSStats {
|
||||
libraries: ABSLibrary[];
|
||||
total: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface DelugeStatus {
|
||||
available: boolean;
|
||||
total?: number;
|
||||
active?: number;
|
||||
downloading?: number;
|
||||
seeding?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface JellyfinStatus {
|
||||
version: string;
|
||||
server_name: string;
|
||||
libraries: { name: string; type: string }[];
|
||||
active_sessions: {
|
||||
user: string;
|
||||
client: string;
|
||||
device: string;
|
||||
now_playing: string;
|
||||
type: string;
|
||||
}[];
|
||||
idle_sessions: number;
|
||||
}
|
||||
|
||||
interface PlexSession {
|
||||
title: string;
|
||||
type: string;
|
||||
year?: string;
|
||||
player?: string;
|
||||
device?: string;
|
||||
state?: string;
|
||||
local?: boolean;
|
||||
bandwidth?: string;
|
||||
location?: string;
|
||||
transcode?: boolean;
|
||||
video_decision?: string;
|
||||
}
|
||||
|
||||
interface PlexServer {
|
||||
name: string;
|
||||
url: string;
|
||||
online: boolean;
|
||||
sessions: PlexSession[];
|
||||
libraries: { title: string; type: string }[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface PlexStatus {
|
||||
servers: PlexServer[];
|
||||
}
|
||||
|
||||
const serverColors: Record<string, string> = {
|
||||
calypso: "text-violet-400",
|
||||
atlantis: "text-blue-400",
|
||||
jellyfin: "text-cyan-400",
|
||||
};
|
||||
|
||||
function colorizeServerName(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(serverColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
const libraryTypeColors: Record<string, string> = {
|
||||
movies: "text-blue-400",
|
||||
movie: "text-blue-400",
|
||||
tvshows: "text-violet-400",
|
||||
tvshow: "text-violet-400",
|
||||
series: "text-violet-400",
|
||||
music: "text-green-400",
|
||||
anime: "text-pink-400",
|
||||
};
|
||||
|
||||
function getLibraryTypeColor(type: string): string {
|
||||
return libraryTypeColors[type.toLowerCase()] ?? "text-foreground";
|
||||
}
|
||||
|
||||
const serviceNameColors: Record<string, string> = {
|
||||
sonarr: "text-blue-400",
|
||||
radarr: "text-amber-400",
|
||||
prowlarr: "text-violet-400",
|
||||
bazarr: "text-green-400",
|
||||
};
|
||||
|
||||
function formatShortDate(dateStr: string): string {
|
||||
try {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString("en-US", { month: "short", day: "2-digit" });
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
const eventColors: Record<string, string> = {
|
||||
grabbed: "text-blue-400",
|
||||
imported: "text-green-400",
|
||||
downloadfolderimported: "text-green-400",
|
||||
downloadfailed: "text-red-400",
|
||||
deleted: "text-red-400",
|
||||
renamed: "text-amber-400",
|
||||
upgraded: "text-violet-400",
|
||||
};
|
||||
|
||||
function getEventColor(event: string): string {
|
||||
return eventColors[event.toLowerCase()] ?? "text-muted-foreground";
|
||||
}
|
||||
|
||||
const mediaTypeColors: Record<string, string> = {
|
||||
movie: "text-blue-400",
|
||||
episode: "text-violet-400",
|
||||
series: "text-violet-400",
|
||||
season: "text-violet-400",
|
||||
audio: "text-green-400",
|
||||
musicalbum: "text-green-400",
|
||||
};
|
||||
|
||||
export default function MediaPage() {
|
||||
const { data: jellyfin } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
|
||||
const { data: plex } = usePoll<PlexStatus>("/api/plex/status", 30000);
|
||||
const { data: sonarrRaw } = usePoll<Record<string, unknown>>("/api/sonarr/queue", 30000);
|
||||
const { data: radarrRaw } = usePoll<Record<string, unknown>>("/api/radarr/queue", 30000);
|
||||
const { data: sabRaw } = usePoll<Record<string, unknown>>("/api/sabnzbd/queue", 30000);
|
||||
const { data: prowlarr } = usePoll<ProwlarrStats>("/api/prowlarr/stats", 60000);
|
||||
const { data: bazarr } = usePoll<BazarrStatus>("/api/bazarr/status", 60000);
|
||||
const { data: abs } = usePoll<ABSStats>("/api/audiobookshelf/stats", 60000);
|
||||
const { data: deluge } = usePoll<DelugeStatus>("/api/deluge/status", 30000);
|
||||
const { data: jellyfinLatest } = usePoll<JellyfinLatestItem[]>("/api/jellyfin/latest", 60000);
|
||||
const { data: sonarrHistory } = usePoll<ArrHistoryItem[]>("/api/sonarr/history", 60000);
|
||||
const { data: radarrHistory } = usePoll<ArrHistoryItem[]>("/api/radarr/history", 60000);
|
||||
|
||||
const sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
|
||||
const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
|
||||
const sab = sabRaw?.queue as SabQueue | undefined;
|
||||
|
||||
// Collect all active streams from both Jellyfin and Plex
|
||||
const allStreams: { title: string; player: string; device: string; source: string; transcode?: boolean; bandwidth?: string; state?: string }[] = [];
|
||||
|
||||
if (jellyfin?.active_sessions) {
|
||||
for (const s of jellyfin.active_sessions) {
|
||||
allStreams.push({
|
||||
title: s.now_playing,
|
||||
player: s.client,
|
||||
device: s.device,
|
||||
source: `Jellyfin (${jellyfin.server_name})`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (plex?.servers) {
|
||||
for (const server of plex.servers) {
|
||||
for (const s of server.sessions) {
|
||||
allStreams.push({
|
||||
title: s.title,
|
||||
player: s.player ?? "?",
|
||||
device: s.device ?? "?",
|
||||
source: `Plex (${server.name})`,
|
||||
transcode: s.transcode,
|
||||
bandwidth: s.bandwidth,
|
||||
state: s.state,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Media</h1>
|
||||
|
||||
{/* Now Playing Hero */}
|
||||
<Card className="overflow-hidden relative">
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Now Playing</CardTitle>
|
||||
{allStreams.length > 0 && (
|
||||
<Badge variant="outline" className="text-xs border-green-500/30 text-green-400 bg-green-500/5">
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5 glow-green" />
|
||||
{allStreams.length} stream{allStreams.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{allStreams.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
||||
<svg className="w-6 h-6 mr-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span className="text-sm">Nothing playing right now</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{allStreams.map((stream, i) => (
|
||||
<div key={i} className="rounded-xl bg-white/[0.03] border border-white/[0.06] px-4 py-3 space-y-2">
|
||||
<p className="text-base font-semibold text-foreground truncate">{stream.title}</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
|
||||
{stream.source}
|
||||
</Badge>
|
||||
{stream.transcode && (
|
||||
<Badge variant="secondary" className="text-xs bg-amber-500/10 border border-amber-500/20 text-amber-400">
|
||||
Transcoding
|
||||
</Badge>
|
||||
)}
|
||||
{stream.state && (
|
||||
<StatusBadge
|
||||
color={stream.state === "playing" ? "green" : "amber"}
|
||||
label={stream.state}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span>{stream.player}</span>
|
||||
<span>·</span>
|
||||
<span>{stream.device}</span>
|
||||
{stream.bandwidth && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{(Number(stream.bandwidth) / 1000).toFixed(1)} Mbps</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recently Added + Download History */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
{/* Recently Added to Jellyfin */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold text-cyan-400">Recently Added</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!jellyfinLatest ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : jellyfinLatest.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent additions</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{jellyfinLatest.slice(0, 8).map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground font-medium truncate">
|
||||
{item.series ? `${item.series}: ${item.name}` : item.name}
|
||||
{item.year ? ` (${item.year})` : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0 ml-3">
|
||||
<span className={`text-xs ${mediaTypeColors[item.type.toLowerCase()] ?? "text-muted-foreground"}`}>
|
||||
{item.type}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/60">
|
||||
{formatShortDate(item.date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Sonarr History */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.sonarr}`}>Sonarr History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!sonarrHistory ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : sonarrHistory.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent activity</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sonarrHistory.slice(0, 8).map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground font-medium truncate">{item.title}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0 ml-3">
|
||||
<span className={`text-xs ${getEventColor(item.event)}`}>{item.event}</span>
|
||||
<span className="text-xs text-muted-foreground/60 font-mono">{item.quality}</span>
|
||||
<span className="text-xs text-muted-foreground/50">{formatShortDate(item.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Radarr History */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.radarr}`}>Radarr History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!radarrHistory ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : radarrHistory.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent activity</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{radarrHistory.slice(0, 8).map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground font-medium truncate">{item.title}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0 ml-3">
|
||||
<span className={`text-xs ${getEventColor(item.event)}`}>{item.event}</span>
|
||||
<span className="text-xs text-muted-foreground/60 font-mono">{item.quality}</span>
|
||||
<span className="text-xs text-muted-foreground/50">{formatShortDate(item.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Media Servers -- 2 columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{/* Jellyfin */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className={`text-base font-semibold ${serverColors.jellyfin}`}>Jellyfin</CardTitle>
|
||||
{jellyfin && (
|
||||
<StatusBadge color="green" label={`v${jellyfin.version}`} />
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!jellyfin ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<>
|
||||
<p className={`text-sm ${colorizeServerName(jellyfin.server_name)}`}>{jellyfin.server_name}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">Libraries</p>
|
||||
{jellyfin.libraries.map((lib) => (
|
||||
<div key={lib.name} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground">{lib.name}</span>
|
||||
<span className={`text-xs font-medium ${getLibraryTypeColor(lib.type)}`}>{lib.type || "library"}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{jellyfin.idle_sessions > 0 && (
|
||||
<p className="text-xs text-muted-foreground/60">
|
||||
{jellyfin.idle_sessions} idle session{jellyfin.idle_sessions > 1 ? "s" : ""}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Plex */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Plex</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!plex ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
plex.servers.map((server) => (
|
||||
<div key={server.name} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-sm font-medium ${colorizeServerName(server.name)}`}>{server.name}</span>
|
||||
<StatusBadge
|
||||
color={server.online ? "green" : "red"}
|
||||
label={server.online ? "Online" : "Offline"}
|
||||
/>
|
||||
</div>
|
||||
{server.online && server.libraries.length > 0 && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{server.libraries.map((lib, j) => (
|
||||
<div key={j} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground/80">{lib.title}</span>
|
||||
<span className={`text-xs ${getLibraryTypeColor(lib.type)}`}>{lib.type}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{server.error && (
|
||||
<p className="text-xs text-red-400 pl-2">{server.error}</p>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Downloads & Services */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{/* Sonarr Queue */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.sonarr}`}>Sonarr Queue</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!sonarr ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : sonarr.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">Queue empty</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sonarr.map((item, i) => (
|
||||
<div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<p className="text-sm text-foreground font-medium truncate">{item.title}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge
|
||||
color={item.status === "completed" ? "green" : item.status === "downloading" ? "blue" : "amber"}
|
||||
label={item.status}
|
||||
/>
|
||||
{item.timeleft && (
|
||||
<span className="text-xs text-muted-foreground/70">{item.timeleft}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Radarr Queue */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.radarr}`}>Radarr Queue</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!radarr ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : radarr.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">Queue empty</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{radarr.map((item, i) => (
|
||||
<div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<p className="text-sm text-foreground font-medium truncate">{item.title}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge
|
||||
color={item.status === "completed" ? "green" : item.status === "downloading" ? "blue" : "amber"}
|
||||
label={item.status}
|
||||
/>
|
||||
{item.timeleft && (
|
||||
<span className="text-xs text-muted-foreground/70">{item.timeleft}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* SABnzbd + Deluge combined Downloads card */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Downloads</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{sab && (
|
||||
<StatusBadge color={sab.paused ? "amber" : "green"} label={sab.paused ? "SAB Paused" : `SAB ${sab.speed}`} />
|
||||
)}
|
||||
{deluge && (
|
||||
<StatusBadge color={deluge.available ? "green" : "red"} label={deluge.available ? "Deluge" : "Deluge Off"} />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* SABnzbd */}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">SABnzbd</p>
|
||||
{!sab ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : sab.slots.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">Queue empty</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sab.slots.map((item, i) => (
|
||||
<div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<p className="text-sm text-foreground font-medium truncate">{item.title}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge color={item.status === "Downloading" ? "blue" : "amber"} label={item.status} />
|
||||
{item.timeleft && <span className="text-xs text-muted-foreground/70">{item.timeleft}</span>}
|
||||
</div>
|
||||
{item.progress != null && (
|
||||
<div className="glass-bar-track h-1.5">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-cyan-400"
|
||||
style={{ width: `${item.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Deluge */}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Deluge</p>
|
||||
{!deluge ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : !deluge.available ? (
|
||||
<p className="text-sm text-red-400">{deluge.error ?? "Unreachable"}</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-3 text-center">
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-foreground">{deluge.total}</p>
|
||||
<p className="text-xs text-muted-foreground">Total</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-blue-400">{deluge.downloading}</p>
|
||||
<p className="text-xs text-muted-foreground">Downloading</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-purple-400">{deluge.seeding}</p>
|
||||
<p className="text-xs text-muted-foreground">Seeding</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Prowlarr + Bazarr combined */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Indexers & Subtitles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Prowlarr */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className={`text-xs uppercase tracking-wider font-medium ${serviceNameColors.prowlarr}`}>Prowlarr</p>
|
||||
{prowlarr && !prowlarr.error && (
|
||||
<StatusBadge color="green" label={`${prowlarr.enabled} active`} />
|
||||
)}
|
||||
</div>
|
||||
{!prowlarr ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : prowlarr.error ? (
|
||||
<p className="text-sm text-red-400">{prowlarr.error}</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground/70">
|
||||
{prowlarr.enabled}/{prowlarr.total} indexers enabled
|
||||
</p>
|
||||
{prowlarr.indexers.slice(0, 5).map((idx, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground truncate">{idx.name}</span>
|
||||
<span className="text-xs text-muted-foreground/60 ml-2 shrink-0">{idx.protocol}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Bazarr */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className={`text-xs uppercase tracking-wider font-medium ${serviceNameColors.bazarr}`}>Bazarr</p>
|
||||
{bazarr && !bazarr.error && (
|
||||
<StatusBadge color="green" label={bazarr.version} />
|
||||
)}
|
||||
</div>
|
||||
{!bazarr ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : bazarr.error ? (
|
||||
<p className="text-sm text-red-400">{bazarr.error}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Wanted episodes</span>
|
||||
<span className="text-foreground font-medium">{bazarr.wanted_episodes}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Wanted movies</span>
|
||||
<span className="text-foreground font-medium">{bazarr.wanted_movies}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<span className="text-muted-foreground/70">SignalR</span>
|
||||
<StatusBadge color={bazarr.sonarr_signalr === "LIVE" ? "green" : "red"} label={`Sonarr ${bazarr.sonarr_signalr}`} />
|
||||
<StatusBadge color={bazarr.radarr_signalr === "LIVE" ? "green" : "red"} label={`Radarr ${bazarr.radarr_signalr ?? ""}`} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Audiobookshelf */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Audiobookshelf</CardTitle>
|
||||
{abs && !abs.error && (
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
|
||||
{abs.total} items
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!abs ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : abs.error ? (
|
||||
<p className="text-sm text-red-400">{abs.error}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{abs.libraries.map((lib, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground font-medium">{lib.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl font-bold text-foreground">{lib.items}</span>
|
||||
<span className="text-xs text-muted-foreground">{lib.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
345
dashboard/ui/app/network/page.tsx
Normal file
345
dashboard/ui/app/network/page.tsx
Normal file
@@ -0,0 +1,345 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { StatCard } from "@/components/stat-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { StatusBadge } from "@/components/status-badge";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { DataTable, Column } from "@/components/data-table";
|
||||
import type { CloudflareStats, AuthentikStats, GiteaActivity } from "@/lib/types";
|
||||
|
||||
interface AdGuardStats {
|
||||
total_queries?: number;
|
||||
num_dns_queries?: number;
|
||||
blocked?: number;
|
||||
num_blocked_filtering?: number;
|
||||
avg_time?: number;
|
||||
avg_processing_time?: number;
|
||||
}
|
||||
|
||||
interface HeadscaleNode {
|
||||
id: string;
|
||||
name: string;
|
||||
ip_addresses?: string[];
|
||||
ip?: string;
|
||||
online: boolean;
|
||||
last_seen?: string;
|
||||
}
|
||||
|
||||
interface DnsRewrite {
|
||||
domain: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
const nodeColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
"homelab-vm": "text-green-400",
|
||||
"matrix-ubuntu": "text-pink-400",
|
||||
guava: "text-orange-400",
|
||||
seattle: "text-teal-400",
|
||||
jellyfish: "text-indigo-400",
|
||||
};
|
||||
|
||||
function getNodeColor(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(nodeColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function formatTime(ts: string): string {
|
||||
try {
|
||||
return new Date(ts).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
const dnsTypeColors: Record<string, string> = {
|
||||
A: "text-blue-400",
|
||||
AAAA: "text-violet-400",
|
||||
CNAME: "text-cyan-400",
|
||||
MX: "text-amber-400",
|
||||
TXT: "text-green-400",
|
||||
SRV: "text-pink-400",
|
||||
NS: "text-teal-400",
|
||||
};
|
||||
|
||||
export default function NetworkPage() {
|
||||
const { data: adguard } = usePoll<AdGuardStats>("/api/network/adguard", 60000);
|
||||
const { data: nodesRaw } = usePoll<HeadscaleNode[] | { nodes: HeadscaleNode[] }>("/api/network/headscale", 30000);
|
||||
const { data: rewritesRaw } = usePoll<DnsRewrite[] | { rewrites: DnsRewrite[] }>("/api/network/adguard/rewrites", 120000);
|
||||
const { data: cloudflare } = usePoll<CloudflareStats>("/api/network/cloudflare", 120000);
|
||||
const { data: authentik } = usePoll<AuthentikStats & { users?: Array<{ username: string; last_login: string; active: boolean }> }>("/api/network/authentik", 60000);
|
||||
const { data: gitea } = usePoll<GiteaActivity>("/api/network/gitea", 60000);
|
||||
|
||||
const nodes = Array.isArray(nodesRaw) ? nodesRaw : (nodesRaw?.nodes ?? []);
|
||||
const rewrites = Array.isArray(rewritesRaw) ? rewritesRaw : (rewritesRaw?.rewrites ?? []);
|
||||
|
||||
const rewriteColumns: Column<DnsRewrite>[] = [
|
||||
{
|
||||
key: "domain",
|
||||
label: "Domain",
|
||||
render: (row) => <span className="font-medium text-cyan-400">{row.domain}</span>,
|
||||
},
|
||||
{
|
||||
key: "answer",
|
||||
label: "Answer",
|
||||
render: (row) => <span className="text-amber-400 font-mono">{row.answer}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Network</h1>
|
||||
|
||||
{/* Top row: AdGuard stats */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-5">
|
||||
<StatCard
|
||||
label="Total Queries"
|
||||
value={(() => { const v = adguard?.total_queries ?? adguard?.num_dns_queries; return v != null ? v.toLocaleString() : "\u2014"; })()}
|
||||
sub="DNS queries"
|
||||
/>
|
||||
<StatCard
|
||||
label="Blocked"
|
||||
value={(() => { const v = adguard?.blocked ?? adguard?.num_blocked_filtering; return v != null ? v.toLocaleString() : "\u2014"; })()}
|
||||
sub="blocked by filters"
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg Response"
|
||||
value={(() => { const v = adguard?.avg_time ?? adguard?.avg_processing_time; return v != null ? `${(v * 1000).toFixed(1)}ms` : "\u2014"; })()}
|
||||
sub="processing time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Middle: Headscale nodes grid */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-cyan-400">Headscale Nodes</CardTitle>
|
||||
{nodes.length > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">
|
||||
{nodes.filter(n => n.online).length}/{nodes.length} online
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{nodes.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">{(nodesRaw as Record<string,unknown>)?.error ? String((nodesRaw as Record<string,unknown>).error) : "Loading..."}</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||||
{nodes.map((node) => (
|
||||
<Card key={node.id} className="overflow-hidden">
|
||||
<CardContent className="pt-3 pb-3 px-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${node.online ? "bg-green-500 glow-green" : "bg-red-500 glow-red"}`} />
|
||||
<span className={`text-sm font-medium truncate ${getNodeColor(node.name)}`}>{node.name}</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground/70 font-mono">
|
||||
{node.ip_addresses?.[0] ?? node.ip ?? "\u2014"}
|
||||
</p>
|
||||
{node.last_seen && (
|
||||
<p className="text-xs text-muted-foreground/60 mt-0.5">
|
||||
{new Date(node.last_seen).toLocaleString("en-US", {
|
||||
month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Cloudflare, Authentik, Gitea -- 3 columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
{/* Cloudflare DNS */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-orange-400">Cloudflare DNS</CardTitle>
|
||||
{cloudflare && (
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
|
||||
{cloudflare.total} records
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!cloudflare ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-lg bg-white/[0.03] border border-white/[0.06] px-3 py-2 text-center">
|
||||
<p className="text-2xl font-bold text-orange-400">{cloudflare.proxied}</p>
|
||||
<p className="text-xs text-muted-foreground">Proxied</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-white/[0.03] border border-white/[0.06] px-3 py-2 text-center">
|
||||
<p className="text-2xl font-bold text-muted-foreground">{cloudflare.dns_only}</p>
|
||||
<p className="text-xs text-muted-foreground">DNS Only</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Record Types</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(cloudflare.types).map(([type, count]) => (
|
||||
<Badge
|
||||
key={type}
|
||||
variant="secondary"
|
||||
className={`text-xs bg-white/[0.04] border border-white/[0.08] ${dnsTypeColors[type] ?? "text-foreground"}`}
|
||||
>
|
||||
{type}: {count}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Authentik SSO */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-violet-400">Authentik SSO</CardTitle>
|
||||
{authentik && (
|
||||
<Badge variant="secondary" className="text-xs bg-violet-500/10 border border-violet-500/20 text-violet-400">
|
||||
{authentik.active_sessions} sessions
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!authentik ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Users */}
|
||||
{authentik.users && authentik.users.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Users</p>
|
||||
<div className="space-y-2">
|
||||
{authentik.users.map((u, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge color={u.active ? "green" : "red"} />
|
||||
<span className="text-violet-400 font-medium">{u.username}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground/60">
|
||||
{u.last_login === "never" ? "never" : u.last_login.slice(0, 10)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(authentik.recent_events ?? []).length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Events</p>
|
||||
<div className="space-y-2">
|
||||
{(authentik.recent_events ?? []).slice(0, 6).map((evt, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<StatusBadge
|
||||
color={String(evt.action).includes("login") ? "green" : String(evt.action).includes("fail") ? "red" : "blue"}
|
||||
label={String(evt.action)}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground/60 truncate">{String(evt.user ?? "")}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground/50 shrink-0 ml-2">
|
||||
{String(evt.created ?? "").slice(11, 16)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(authentik.recent_events ?? []).length === 0 && !(authentik.users?.length) && (
|
||||
<p className="text-sm text-muted-foreground/60">No recent activity</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Gitea Activity */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-green-400">Gitea</CardTitle>
|
||||
{gitea && gitea.open_prs.length > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
|
||||
{gitea.open_prs.length} open PR{gitea.open_prs.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!gitea ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{gitea.commits.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Commits</p>
|
||||
<div className="space-y-2">
|
||||
{gitea.commits.slice(0, 6).map((c, i) => (
|
||||
<div key={i} className="text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-400 font-mono text-xs shrink-0">{c.sha.slice(0, 7)}</span>
|
||||
<span className="text-foreground truncate">{c.message.split("\n")[0]}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-muted-foreground/60">{c.author}</span>
|
||||
<span className="text-xs text-muted-foreground/40">{formatTime(c.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{gitea.open_prs.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Open PRs</p>
|
||||
<div className="space-y-1.5">
|
||||
{gitea.open_prs.map((pr, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-green-400 font-mono text-xs shrink-0">#{pr.number}</span>
|
||||
<span className="text-foreground truncate">{pr.title}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground/60 shrink-0 ml-2">{pr.author}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Bottom: DNS rewrites table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">DNS Rewrites</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataTable<DnsRewrite>
|
||||
data={rewrites}
|
||||
columns={rewriteColumns}
|
||||
searchKey="domain"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
300
dashboard/ui/app/page.tsx
Normal file
300
dashboard/ui/app/page.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { postAPI } from "@/lib/api";
|
||||
import type { OverviewStats, HealthScore, DiskUsageEntry } from "@/lib/types";
|
||||
import { StatCard } from "@/components/stat-card";
|
||||
import { ActivityFeed } from "@/components/activity-feed";
|
||||
import { JellyfinCard } from "@/components/jellyfin-card";
|
||||
import { OllamaCard } from "@/components/ollama-card";
|
||||
import { CalendarCard } from "@/components/calendar-card";
|
||||
import { HostRow } from "@/components/host-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
/* --- Quick Action Button --- */
|
||||
interface ActionButtonProps {
|
||||
label: string;
|
||||
endpoint: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
function ActionButton({ label, endpoint, icon }: ActionButtonProps) {
|
||||
const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");
|
||||
|
||||
const run = useCallback(async () => {
|
||||
setState("loading");
|
||||
try {
|
||||
await postAPI(endpoint);
|
||||
setState("success");
|
||||
} catch {
|
||||
setState("error");
|
||||
}
|
||||
setTimeout(() => setState("idle"), 2000);
|
||||
}, [endpoint]);
|
||||
|
||||
const bg =
|
||||
state === "loading"
|
||||
? "bg-white/[0.08] cursor-wait"
|
||||
: state === "success"
|
||||
? "bg-green-500/15 border-green-500/30"
|
||||
: state === "error"
|
||||
? "bg-red-500/15 border-red-500/30"
|
||||
: "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]";
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={run}
|
||||
disabled={state === "loading"}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${bg}`}
|
||||
>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white/[0.08] text-muted-foreground">{icon}</span>
|
||||
<span>
|
||||
{state === "loading"
|
||||
? "Running..."
|
||||
: state === "success"
|
||||
? "Done!"
|
||||
: state === "error"
|
||||
? "Failed"
|
||||
: label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Organizer Toggle --- */
|
||||
function OrganizerToggle() {
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [state, setState] = useState<"idle" | "loading">("idle");
|
||||
|
||||
const toggle = useCallback(async () => {
|
||||
setState("loading");
|
||||
try {
|
||||
if (paused) {
|
||||
await postAPI("/api/actions/resume-organizers");
|
||||
setPaused(false);
|
||||
} else {
|
||||
await postAPI("/api/actions/pause-organizers");
|
||||
setPaused(true);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setState("idle");
|
||||
}, [paused]);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggle}
|
||||
disabled={state === "loading"}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${
|
||||
paused
|
||||
? "bg-amber-500/15 border-amber-500/30 hover:bg-amber-500/25"
|
||||
: "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]"
|
||||
}`}
|
||||
>
|
||||
<span>{paused ? "\u25B6" : "\u23F8"}</span>
|
||||
<span>
|
||||
{state === "loading" ? "..." : paused ? "Resume Organizers" : "Pause Organizers"}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Disk Usage Bar --- */
|
||||
function DiskBar({ entry }: { entry: DiskUsageEntry }) {
|
||||
const color =
|
||||
entry.used_pct >= 85
|
||||
? "from-red-500 to-red-400"
|
||||
: entry.used_pct >= 70
|
||||
? "from-amber-500 to-amber-400"
|
||||
: "from-green-500 to-emerald-400";
|
||||
|
||||
const hostColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
homelab: "text-green-400",
|
||||
guava: "text-orange-400",
|
||||
seattle: "text-teal-400",
|
||||
};
|
||||
const hostCls =
|
||||
hostColors[entry.host.toLowerCase()] ?? "text-foreground";
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`font-medium ${hostCls}`}>{entry.host}</span>
|
||||
<span className="text-muted-foreground/60 font-mono text-xs truncate">
|
||||
{entry.mount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{entry.total_gb >= 1000
|
||||
? `${(entry.total_gb / 1000).toFixed(1)} TB`
|
||||
: `${Math.round(entry.total_gb)} GB`}
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums-transition">
|
||||
{entry.used_pct}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
|
||||
style={{ width: `${entry.used_pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
|
||||
const { data: health } = usePoll<HealthScore>("/api/health-score", 60000);
|
||||
const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);
|
||||
|
||||
// Handle both API field name variants
|
||||
const endpoints = data?.containers?.endpoints || data?.containers?.by_endpoint || {};
|
||||
const rawEmail = data?.emails_today ?? data?.email_today ?? 0;
|
||||
const emailCount = typeof rawEmail === "object" && rawEmail !== null ? (rawEmail as Record<string, number>).total ?? 0 : rawEmail;
|
||||
const alertCount = data?.alerts ?? data?.unhealthy_count ?? 0;
|
||||
const running = data?.containers?.running ?? Object.values(endpoints).reduce((s, e) => s + (e.running || 0), 0);
|
||||
const hostsOnline = data?.hosts_online ?? Object.values(endpoints).filter(e => !e.error).length;
|
||||
const gpuPct = data?.gpu?.utilization_pct;
|
||||
const totalHosts = Object.keys(endpoints).length;
|
||||
|
||||
// Top 5 most-used disks
|
||||
const topDisks = disks
|
||||
? [...disks].sort((a, b) => b.used_pct - a.used_pct).slice(0, 5)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Row 1: Stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<StatCard
|
||||
label="Health"
|
||||
value={health ? `${health.score}` : "\u2014"}
|
||||
color={
|
||||
health
|
||||
? health.score >= 80
|
||||
? "green"
|
||||
: health.score >= 60
|
||||
? "amber"
|
||||
: "amber"
|
||||
: "blue"
|
||||
}
|
||||
gauge={health ? health.score : undefined}
|
||||
sub={health ? `Grade: ${health.grade}` : undefined}
|
||||
/>
|
||||
<StatCard
|
||||
label="Containers"
|
||||
value={data ? `${running}/${data.containers.total}` : "\u2014"}
|
||||
color="blue"
|
||||
sub={data ? "running / total" : undefined}
|
||||
/>
|
||||
<StatCard
|
||||
label="Hosts Online"
|
||||
value={data ? hostsOnline : "\u2014"}
|
||||
color="green"
|
||||
sub="endpoints"
|
||||
/>
|
||||
<StatCard
|
||||
label="GPU \u2014 RTX 5090"
|
||||
value={
|
||||
data?.gpu?.available
|
||||
? `${gpuPct ?? 0}%`
|
||||
: "\u2014"
|
||||
}
|
||||
color="violet"
|
||||
gauge={data?.gpu?.available ? gpuPct : undefined}
|
||||
sub={data?.gpu?.available ? `${data.gpu.temp_c ?? "\u2014"}\u00b0C \u00b7 ${data.gpu.power_w ?? data.gpu.power_draw_w ?? "\u2014"}W` : "unavailable"}
|
||||
/>
|
||||
<StatCard
|
||||
label="Emails Today"
|
||||
value={data ? emailCount : "\u2014"}
|
||||
color="amber"
|
||||
sub="processed"
|
||||
/>
|
||||
<StatCard
|
||||
label="Alerts"
|
||||
value={data ? alertCount : "\u2014"}
|
||||
color="emerald"
|
||||
sub="active"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Row 1.5: Quick Actions */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mr-1">
|
||||
Quick Actions
|
||||
</span>
|
||||
<ActionButton label="Restart Jellyfin" endpoint="/api/actions/restart-jellyfin" icon="JF" />
|
||||
<ActionButton label="Restart Ollama" endpoint="/api/actions/restart-ollama" icon="AI" />
|
||||
<OrganizerToggle />
|
||||
<ActionButton label="Run Backup" endpoint="/api/actions/run-backup" icon="BK" />
|
||||
</div>
|
||||
|
||||
{/* Row 2: Calendar + Activity Feed */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<CalendarCard />
|
||||
<ActivityFeed />
|
||||
</div>
|
||||
|
||||
{/* Row 3: Jellyfin + GPU + Hosts */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<JellyfinCard />
|
||||
<OllamaCard />
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
Hosts {data ? `(${hostsOnline}/${totalHosts} online)` : ""}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data ? (
|
||||
<div className="divide-y divide-white/[0.06]">
|
||||
{Object.entries(endpoints).map(([name, info]) => (
|
||||
<HostRow
|
||||
key={name}
|
||||
name={name}
|
||||
running={info.running}
|
||||
total={info.total}
|
||||
error={info.error}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Row 4: Storage / Disk Usage */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Storage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!disks ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : topDisks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No disk data</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{topDisks.map((d, i) => (
|
||||
<DiskBar key={`${d.host}-${d.mount}-${i}`} entry={d} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user