Vish/homelab-optimized
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sanitized mirror from private repository - 2026-04-05 10:05:14 UTC
Some checks failed
Documentation / Deploy to GitHub Pages (push) Has been cancelled
Details
Documentation / Build Docusaurus (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Gitea Mirror Bot
2026-04-05 10:05:14 +00:00
commit 3ecb830131
1394 changed files with 355699 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
dashboard/ui/app/infrastructure/page.tsx Normal file
View File

@@ -0,0 +1,224 @@
"use client";
import { useState, useMemo } from "react";
import { usePoll } from "@/lib/use-poll";
import type { Container, OverviewStats } from "@/lib/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
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;
}
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 [logsTarget, setLogsTarget] = useState<{
id: string;
name: string;
endpoint: string;
} | 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" },
{
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>
{/* Container Table */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">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-sm font-medium">Olares Pods</CardTitle>
</CardHeader>
<CardContent>
<DataTable<OlaresPod>
data={pods ?? []}
columns={podColumns}
searchKey="name"
/>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">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"}&deg;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>
{/* Logs Modal */}
<ContainerLogsModal
containerId={logsTarget?.id ?? null}
containerName={logsTarget?.name ?? ""}
endpoint={logsTarget?.endpoint ?? ""}
onClose={() => setLogsTarget(null)}
/>
</div>
);
}