Dashboard UI overhaul: modern design with system stats, SVG icons, Inter font, theme toggle, loading states, and log modal
This commit is contained in:
Gan, Jimmy
@@ -1,10 +1,11 @@
|
||||
from fastapi import FastAPI
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from routers import docker_router, gitea, files, terminal
|
||||
from routers import docker_router, gitea, files, terminal, system
|
||||
|
||||
app = FastAPI(title="NAS Dashboard")
|
||||
app.include_router(docker_router.router, prefix="/api/docker")
|
||||
app.include_router(gitea.router, prefix="/api/gitea")
|
||||
app.include_router(files.router, prefix="/api/files")
|
||||
app.include_router(system.router, prefix="/api/system")
|
||||
app.add_api_websocket_route("/ws/terminal", terminal.ws_endpoint)
|
||||
app.mount("/", StaticFiles(directory="/app/static", html=True), name="static")
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
fastapi==0.115.0
|
||||
uvicorn==0.30.6
|
||||
uvicorn[standard]==0.30.0
|
||||
docker==7.1.0
|
||||
httpx==0.27.2
|
||||
httpx==0.27.0
|
||||
python-multipart==0.0.9
|
||||
psutil==6.1.0
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import shutil
|
||||
import psutil
|
||||
import platform
|
||||
import time
|
||||
from fastapi import APIRouter
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
||||
@router.get("/stats")
|
||||
def system_stats():
|
||||
disk = shutil.disk_usage("/volume1")
|
||||
mem = psutil.virtual_memory()
|
||||
cpu_pct = psutil.cpu_percent(interval=0.5)
|
||||
load_1, load_5, load_15 = psutil.getloadavg()
|
||||
uptime_s = time.time() - psutil.boot_time()
|
||||
|
||||
days = int(uptime_s // 86400)
|
||||
hours = int((uptime_s % 86400) // 3600)
|
||||
|
||||
return {
|
||||
"cpu_percent": cpu_pct,
|
||||
"cpu_count": psutil.cpu_count(),
|
||||
"load_avg": [round(load_1, 2), round(load_5, 2), round(load_15, 2)],
|
||||
"memory": {
|
||||
"total": mem.total,
|
||||
"used": mem.used,
|
||||
"percent": mem.percent,
|
||||
},
|
||||
"disk": {
|
||||
"total": disk.total,
|
||||
"used": disk.used,
|
||||
"free": disk.free,
|
||||
"percent": round(disk.used / disk.total * 100, 1),
|
||||
},
|
||||
"uptime": f"{days}d {hours}h",
|
||||
"platform": platform.platform(),
|
||||
}
|
||||
@@ -1,9 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Personal NAS Dashboard — manage Docker, Git repos, files, and media from one place">
|
||||
<title>NAS Dashboard</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -7,21 +7,29 @@
|
||||
import Terminal from "./routes/Terminal.svelte";
|
||||
|
||||
let page = $state("dashboard");
|
||||
let dark = $state(false);
|
||||
|
||||
function toggleTheme() {
|
||||
dark = !dark;
|
||||
document.documentElement.classList.toggle("dark", dark);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen bg-white text-gray-900">
|
||||
<Sidebar bind:page />
|
||||
<main class="flex-1 overflow-auto p-6">
|
||||
{#if page === "dashboard"}
|
||||
<Dashboard />
|
||||
{:else if page === "docker"}
|
||||
<Docker />
|
||||
{:else if page === "gitea"}
|
||||
<Gitea />
|
||||
{:else if page === "files"}
|
||||
<Files />
|
||||
{:else if page === "terminal"}
|
||||
<Terminal />
|
||||
{/if}
|
||||
<div class="flex h-screen overflow-hidden bg-surface-50 {dark ? 'dark bg-surface-900' : ''}">
|
||||
<Sidebar bind:page {dark} {toggleTheme} />
|
||||
<main class="flex-1 overflow-auto">
|
||||
<div class="max-w-[1400px] mx-auto p-6 lg:p-8">
|
||||
{#if page === "dashboard"}
|
||||
<Dashboard />
|
||||
{:else if page === "docker"}
|
||||
<Docker />
|
||||
{:else if page === "gitea"}
|
||||
<Gitea />
|
||||
{:else if page === "files"}
|
||||
<Files />
|
||||
{:else if page === "terminal"}
|
||||
<Terminal />
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1 +1,64 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
|
||||
|
||||
--color-primary-50: #eef2ff;
|
||||
--color-primary-100: #e0e7ff;
|
||||
--color-primary-200: #c7d2fe;
|
||||
--color-primary-300: #a5b4fc;
|
||||
--color-primary-400: #818cf8;
|
||||
--color-primary-500: #6366f1;
|
||||
--color-primary-600: #4f46e5;
|
||||
--color-primary-700: #4338ca;
|
||||
|
||||
--color-surface-50: #f8fafc;
|
||||
--color-surface-100: #f1f5f9;
|
||||
--color-surface-200: #e2e8f0;
|
||||
--color-surface-300: #cbd5e1;
|
||||
--color-surface-400: #94a3b8;
|
||||
--color-surface-500: #64748b;
|
||||
--color-surface-600: #475569;
|
||||
--color-surface-700: #334155;
|
||||
--color-surface-800: #1e293b;
|
||||
--color-surface-900: #0f172a;
|
||||
|
||||
--color-emerald-400: #34d399;
|
||||
--color-emerald-500: #10b981;
|
||||
--color-emerald-600: #059669;
|
||||
--color-amber-400: #fbbf24;
|
||||
--color-amber-500: #f59e0b;
|
||||
--color-rose-400: #fb7185;
|
||||
--color-rose-500: #f43f5e;
|
||||
--color-sky-400: #38bdf8;
|
||||
--color-sky-500: #0ea5e9;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-surface-50);
|
||||
color: var(--color-surface-800);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--color-surface-300); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--color-surface-400); }
|
||||
|
||||
/* Dark mode overrides */
|
||||
.dark body,
|
||||
.dark {
|
||||
background: var(--color-surface-900);
|
||||
color: var(--color-surface-200);
|
||||
}
|
||||
|
||||
@@ -1,42 +1,106 @@
|
||||
<script>
|
||||
let { page = $bindable("dashboard") } = $props();
|
||||
let { page = $bindable("dashboard"), dark = false, toggleTheme = () => {} } = $props();
|
||||
|
||||
const links = [
|
||||
{ id: "dashboard", label: "Dashboard", icon: "■" },
|
||||
{ id: "docker", label: "Docker", icon: "▶" },
|
||||
{ id: "gitea", label: "Gitea", icon: "📁" },
|
||||
{ id: "files", label: "Files", icon: "📄" },
|
||||
{ id: "terminal", label: "Terminal", icon: ">" },
|
||||
{ id: "dashboard", label: "Overview", icon: "grid" },
|
||||
{ id: "docker", label: "Docker", icon: "box" },
|
||||
{ id: "gitea", label: "Repos", icon: "git" },
|
||||
{ id: "files", label: "Files", icon: "folder" },
|
||||
{ id: "terminal", label: "Terminal", icon: "terminal" },
|
||||
];
|
||||
|
||||
const external = [
|
||||
{ label: "Navidrome", href: "//:4533", port: 4533 },
|
||||
{ label: "Immich", href: "//:2283", port: 2283 },
|
||||
{ label: "Emby", href: "//:8096", port: 8096 },
|
||||
{ label: "Gitea Web", href: "//:3300", port: 3300 },
|
||||
{ label: "Navidrome", port: 4533, icon: "music" },
|
||||
{ label: "Immich", port: 2283, icon: "image" },
|
||||
{ label: "Emby", port: 8096, icon: "play" },
|
||||
{ label: "Gitea Web", port: 3300, icon: "git" },
|
||||
];
|
||||
|
||||
function extHref(port) {
|
||||
return `${location.protocol}//${location.hostname}:${port}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside class="w-56 bg-gray-50 border-r border-gray-200 h-screen flex flex-col p-4 shrink-0">
|
||||
<h1 class="text-lg font-bold mb-6">NAS Dashboard</h1>
|
||||
<nav class="flex flex-col gap-1">
|
||||
<aside class="w-[240px] h-screen flex flex-col shrink-0 border-r border-surface-200 bg-white transition-colors duration-200 {dark ? 'bg-surface-800 border-surface-700' : ''}">
|
||||
<!-- Logo -->
|
||||
<div class="px-5 py-5 flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-md">
|
||||
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-sm font-bold tracking-tight {dark ? 'text-white' : 'text-surface-900'}">NAS Dashboard</h1>
|
||||
<p class="text-[10px] text-surface-400 font-medium">DS224+ · Synology</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nav Links -->
|
||||
<nav class="flex-1 px-3 mt-2">
|
||||
<p class="text-[10px] font-semibold uppercase tracking-wider text-surface-400 px-3 mb-2">Main</p>
|
||||
{#each links as link}
|
||||
<button
|
||||
class="text-left px-3 py-2 rounded text-sm {page === link.id ? 'bg-blue-100 text-blue-700 font-medium' : 'hover:bg-gray-100 text-gray-700'}"
|
||||
class="w-full text-left px-3 py-2.5 rounded-lg text-[13px] font-medium flex items-center gap-2.5 mb-0.5 transition-all duration-150
|
||||
{page === link.id
|
||||
? 'bg-primary-50 text-primary-700 shadow-sm ' + (dark ? 'bg-primary-900/30 text-primary-300' : '')
|
||||
: 'text-surface-500 hover:bg-surface-100 hover:text-surface-700 ' + (dark ? 'hover:bg-surface-700 hover:text-surface-200 text-surface-400' : '')
|
||||
}"
|
||||
onclick={() => page = link.id}
|
||||
>
|
||||
<span class="mr-2">{@html link.icon}</span>{link.label}
|
||||
<span class="w-5 h-5 flex items-center justify-center">
|
||||
{#if link.icon === "grid"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
|
||||
{:else if link.icon === "box"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||||
{:else if link.icon === "git"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||||
{:else if link.icon === "folder"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
|
||||
{:else if link.icon === "terminal"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||||
{/if}
|
||||
</span>
|
||||
{link.label}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
<hr class="my-4 border-gray-200" />
|
||||
<p class="text-xs text-gray-400 mb-2 px-3">External Services</p>
|
||||
<nav class="flex flex-col gap-1">
|
||||
|
||||
<div class="my-4 border-t border-surface-200 {dark ? 'border-surface-700' : ''}"></div>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-wider text-surface-400 px-3 mb-2">Services</p>
|
||||
{#each external as svc}
|
||||
<a href={extHref(svc.port)} target="_blank" class="text-left px-3 py-2 rounded text-sm hover:bg-gray-100 text-gray-700">
|
||||
{svc.label} ↗
|
||||
<a
|
||||
href={extHref(svc.port)}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="w-full text-left px-3 py-2 rounded-lg text-[13px] font-medium flex items-center gap-2.5 mb-0.5 text-surface-500 hover:bg-surface-100 hover:text-surface-700 transition-all duration-150 {dark ? 'hover:bg-surface-700 hover:text-surface-200 text-surface-400' : ''}"
|
||||
>
|
||||
<span class="w-5 h-5 flex items-center justify-center">
|
||||
{#if svc.icon === "music"}
|
||||
<svg class="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z" /></svg>
|
||||
{:else if svc.icon === "image"}
|
||||
<svg class="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||||
{:else if svc.icon === "play"}
|
||||
<svg class="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" 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 stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
{:else if svc.icon === "git"}
|
||||
<svg class="w-[16px] h-[16px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
|
||||
{/if}
|
||||
</span>
|
||||
{svc.label}
|
||||
<svg class="w-3 h-3 ml-auto opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<div class="px-4 pb-4 pt-2 border-t border-surface-200 {dark ? 'border-surface-700' : ''}">
|
||||
<button
|
||||
onclick={toggleTheme}
|
||||
class="w-full px-3 py-2 rounded-lg text-[13px] font-medium flex items-center gap-2.5 text-surface-500 hover:bg-surface-100 transition-all duration-150 {dark ? 'hover:bg-surface-700 text-surface-400' : ''}"
|
||||
>
|
||||
{#if dark}
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
|
||||
Light Mode
|
||||
{:else}
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
|
||||
Dark Mode
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1,13 +1,33 @@
|
||||
const BASE = "/api";
|
||||
export async function get(path) {
|
||||
const r = await fetch(BASE + path);
|
||||
return r.json();
|
||||
|
||||
async function request(path, opts = {}) {
|
||||
try {
|
||||
const r = await fetch(BASE + path, opts);
|
||||
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
||||
return r.json();
|
||||
} catch (e) {
|
||||
console.error(`API ${opts.method || "GET"} ${path}:`, e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
export async function post(path) {
|
||||
const r = await fetch(BASE + path, { method: "POST" });
|
||||
return r.json();
|
||||
|
||||
export function get(path) {
|
||||
return request(path);
|
||||
}
|
||||
export async function del(path) {
|
||||
const r = await fetch(BASE + path, { method: "DELETE" });
|
||||
return r.json();
|
||||
|
||||
export function post(path) {
|
||||
return request(path, { method: "POST" });
|
||||
}
|
||||
|
||||
export function del(path) {
|
||||
return request(path, { method: "DELETE" });
|
||||
}
|
||||
|
||||
export async function upload(path, file) {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
return request(`/files/upload?path=${encodeURIComponent(path)}`, {
|
||||
method: "POST",
|
||||
body: form,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,24 +1,167 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get } from "../lib/api.js";
|
||||
|
||||
let containers = $state([]);
|
||||
let repos = $state([]);
|
||||
let stats = $state(null);
|
||||
let loading = $state(true);
|
||||
|
||||
async function load() {
|
||||
containers = await get("/docker/containers").catch(() => []);
|
||||
const data = await get("/gitea/repos").catch(() => ({ data: [] }));
|
||||
repos = data?.data || [];
|
||||
loading = true;
|
||||
const [c, g, s] = await Promise.all([
|
||||
get("/docker/containers"),
|
||||
get("/gitea/repos"),
|
||||
get("/system/stats"),
|
||||
]);
|
||||
containers = c || [];
|
||||
repos = Array.isArray(g) ? g : g?.data || [];
|
||||
stats = s;
|
||||
loading = false;
|
||||
}
|
||||
load();
|
||||
|
||||
function fmtBytes(b) {
|
||||
if (!b) return "0 B";
|
||||
const u = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(b) / Math.log(1024));
|
||||
return (b / Math.pow(1024, i)).toFixed(1) + " " + u[i];
|
||||
}
|
||||
|
||||
function pctColor(pct) {
|
||||
if (pct > 90) return "text-rose-500";
|
||||
if (pct > 70) return "text-amber-500";
|
||||
return "text-emerald-500";
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">Dashboard</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="font-semibold mb-3">Docker Containers</h3>
|
||||
<p class="text-3xl font-bold">{containers.length}</p>
|
||||
<p class="text-sm text-gray-500">{containers.filter(c => c.status === "running").length} running</p>
|
||||
</div>
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="font-semibold mb-3">Gitea Repos</h3>
|
||||
<p class="text-3xl font-bold">{repos.length}</p>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Overview</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">System status at a glance</p>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-[120px] rounded-xl bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<!-- CPU -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">CPU</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-sky-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold {pctColor(stats?.cpu_percent || 0)}">{stats?.cpu_percent || 0}%</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{stats?.cpu_count || 0} cores · Load {stats?.load_avg?.[0] || 0}</p>
|
||||
</div>
|
||||
|
||||
<!-- Memory -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Memory</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold {pctColor(stats?.memory?.percent || 0)}">{stats?.memory?.percent || 0}%</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.memory?.used)} / {fmtBytes(stats?.memory?.total)}</p>
|
||||
</div>
|
||||
|
||||
<!-- Disk -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Disk</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold {pctColor(stats?.disk?.percent || 0)}">{stats?.disk?.percent || 0}%</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.disk?.free)} free of {fmtBytes(stats?.disk?.total)}</p>
|
||||
</div>
|
||||
|
||||
<!-- Uptime -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Uptime</p>
|
||||
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-bold text-surface-800">{stats?.uptime || "—"}</p>
|
||||
<p class="text-xs text-surface-400 mt-1 truncate" title={stats?.platform}>{stats?.platform || "—"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- Docker Summary -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-surface-700">Docker Containers</h3>
|
||||
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{containers.filter(c => c.status === "running").length} running</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{#each containers.slice(0, 5) as c}
|
||||
<div class="flex items-center justify-between py-1.5 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full {c.status === 'running' ? 'bg-emerald-400' : 'bg-surface-300'}"></span>
|
||||
<span class="font-medium text-surface-700">{c.name}</span>
|
||||
</div>
|
||||
<span class="text-xs text-surface-400 truncate max-w-[180px]">{c.image}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{#if containers.length > 5}
|
||||
<p class="text-xs text-primary-500 font-medium pt-1">+{containers.length - 5} more</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Repos Summary -->
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-surface-700">Git Repositories</h3>
|
||||
<span class="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{repos.length} repos</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{#each repos.slice(0, 5) as r}
|
||||
<div class="flex items-center justify-between py-1.5 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
|
||||
<span class="font-medium text-surface-700">{r.name}</span>
|
||||
</div>
|
||||
<span class="text-xs text-surface-400">{r.language || "—"}</span>
|
||||
</div>
|
||||
{/each}
|
||||
{#if repos.length > 5}
|
||||
<p class="text-xs text-primary-500 font-medium pt-1">+{repos.length - 5} more</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disk Usage Bar -->
|
||||
{#if stats?.disk}
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<h3 class="text-sm font-semibold text-surface-700 mb-3">Storage Usage</h3>
|
||||
<div class="w-full h-3 bg-surface-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-700 ease-out {stats.disk.percent > 90 ? 'bg-gradient-to-r from-rose-400 to-rose-500' : stats.disk.percent > 70 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-emerald-400 to-emerald-500'}"
|
||||
style="width: {stats.disk.percent}%"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2 text-xs text-surface-400">
|
||||
<span>{fmtBytes(stats.disk.used)} used</span>
|
||||
<span>{fmtBytes(stats.disk.free)} free</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,42 +1,133 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get, post } from "../lib/api.js";
|
||||
|
||||
let containers = $state([]);
|
||||
let logs = $state("");
|
||||
let loading = $state(true);
|
||||
let logTarget = $state("");
|
||||
async function load() { containers = await get("/docker/containers"); }
|
||||
async function action(id, act) { await post(`/docker/containers/${id}/${act}`); await load(); }
|
||||
async function showLogs(id, name) { logTarget = name; const r = await get(`/docker/containers/${id}/logs?tail=100`); logs = r.logs; }
|
||||
load();
|
||||
let logContent = $state("");
|
||||
let loadingLogs = $state(false);
|
||||
let actionLoading = $state("");
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
containers = (await get("/docker/containers")) || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function action(id, act) {
|
||||
actionLoading = id + act;
|
||||
await post(`/docker/containers/${id}/${act}`);
|
||||
await load();
|
||||
actionLoading = "";
|
||||
}
|
||||
|
||||
async function showLogs(id, name) {
|
||||
logTarget = name;
|
||||
loadingLogs = true;
|
||||
const r = await get(`/docker/containers/${id}/logs?tail=200`);
|
||||
logContent = r?.logs || "No logs available";
|
||||
loadingLogs = false;
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">Docker Containers</h2>
|
||||
<div class="space-y-3">
|
||||
{#each containers as c}
|
||||
<div class="border rounded-lg p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<span class="font-medium">{c.name}</span>
|
||||
<span class="ml-2 text-xs px-2 py-0.5 rounded {c.status === 'running' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}">{c.status}</span>
|
||||
<p class="text-xs text-gray-400 mt-1">{c.image}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
{#if c.status === "running"}
|
||||
<button class="text-xs px-3 py-1 bg-red-50 text-red-600 rounded hover:bg-red-100" onclick={() => action(c.id, "stop")}>Stop</button>
|
||||
<button class="text-xs px-3 py-1 bg-yellow-50 text-yellow-600 rounded hover:bg-yellow-100" onclick={() => action(c.id, "restart")}>Restart</button>
|
||||
{:else}
|
||||
<button class="text-xs px-3 py-1 bg-green-50 text-green-600 rounded hover:bg-green-100" onclick={() => action(c.id, "start")}>Start</button>
|
||||
{/if}
|
||||
<button class="text-xs px-3 py-1 bg-gray-50 text-gray-600 rounded hover:bg-gray-100" onclick={() => showLogs(c.id, c.name)}>Logs</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Docker</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">{containers.length} containers · {containers.filter(c => c.status === "running").length} running</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if logTarget}
|
||||
<div class="mt-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h3 class="font-semibold">Logs: {logTarget}</h3>
|
||||
<button class="text-xs text-gray-400 hover:text-gray-600" onclick={() => { logTarget = ""; logs = ""; }}>Close</button>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-auto max-h-96 whitespace-pre-wrap">{logs}</pre>
|
||||
<button onclick={load} class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
<div class="h-[72px] rounded-xl bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each containers as c}
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-all duration-200 group">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="relative flex h-2.5 w-2.5 shrink-0">
|
||||
{#if c.status === "running"}
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
|
||||
{:else}
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-surface-300"></span>
|
||||
{/if}
|
||||
</span>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-surface-800 truncate">{c.name}</p>
|
||||
<p class="text-xs text-surface-400 truncate mt-0.5">{c.image}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
{#if c.status === "running"}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-rose-600 bg-rose-50 hover:bg-rose-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "stop")}
|
||||
disabled={actionLoading === c.id + "stop"}
|
||||
>
|
||||
{actionLoading === c.id + "stop" ? "..." : "Stop"}
|
||||
</button>
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-amber-600 bg-amber-50 hover:bg-amber-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "restart")}
|
||||
disabled={actionLoading === c.id + "restart"}
|
||||
>
|
||||
{actionLoading === c.id + "restart" ? "..." : "Restart"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-emerald-600 bg-emerald-50 hover:bg-emerald-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "start")}
|
||||
disabled={actionLoading === c.id + "start"}
|
||||
>
|
||||
{actionLoading === c.id + "start" ? "..." : "Start"}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-surface-600 bg-surface-100 hover:bg-surface-200 transition-colors"
|
||||
onclick={() => showLogs(c.id, c.name)}
|
||||
>
|
||||
Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Log Modal -->
|
||||
{#if logTarget}
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" role="dialog" aria-modal="true" onclick={() => { logTarget = ""; logContent = ""; }} onkeydown={(e) => e.key === "Escape" && (logTarget = "", logContent = "")}>
|
||||
<div class="bg-white rounded-2xl shadow-2xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" role="document" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
|
||||
<div class="flex items-center justify-between px-5 py-4 border-b border-surface-200">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-surface-800">Container Logs</h3>
|
||||
<p class="text-xs text-surface-400 mt-0.5">{logTarget}</p>
|
||||
</div>
|
||||
<button aria-label="Close logs" class="text-surface-400 hover:text-surface-600 transition-colors" onclick={() => { logTarget = ""; logContent = ""; }}>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto p-1">
|
||||
{#if loadingLogs}
|
||||
<div class="flex items-center justify-center h-40">
|
||||
<div class="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<pre class="bg-surface-900 text-emerald-400 text-xs p-4 rounded-xl whitespace-pre-wrap leading-relaxed font-mono min-h-[200px]">{logContent}</pre>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,63 +1,151 @@
|
||||
<script>
|
||||
import { get, del } from "../lib/api.js";
|
||||
import { onMount } from "svelte";
|
||||
import { get, del, upload } from "../lib/api.js";
|
||||
|
||||
let entries = $state([]);
|
||||
let currentPath = $state("");
|
||||
let loading = $state(true);
|
||||
let uploading = $state(false);
|
||||
let fileInput;
|
||||
|
||||
async function browse(path) {
|
||||
loading = true;
|
||||
currentPath = path;
|
||||
const data = await get(`/files/browse?path=${encodeURIComponent(path)}`);
|
||||
entries = data.entries || [];
|
||||
entries = data?.entries || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function goUp() {
|
||||
const parts = currentPath.split("/").filter(Boolean);
|
||||
parts.pop();
|
||||
browse(parts.join("/"));
|
||||
}
|
||||
|
||||
async function remove(name) {
|
||||
if (!confirm(`Delete ${name}?`)) return;
|
||||
if (!confirm(`Delete "${name}"? This cannot be undone.`)) return;
|
||||
const path = currentPath ? `${currentPath}/${name}` : name;
|
||||
await del(`/files/delete?path=${encodeURIComponent(path)}`);
|
||||
browse(currentPath);
|
||||
}
|
||||
|
||||
function downloadUrl(name) {
|
||||
const path = currentPath ? `${currentPath}/${name}` : name;
|
||||
return `/api/files/download?path=${encodeURIComponent(path)}`;
|
||||
}
|
||||
function formatSize(bytes) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
|
||||
return `${(bytes / 1073741824).toFixed(1)} GB`;
|
||||
|
||||
async function handleUpload() {
|
||||
const file = fileInput?.files?.[0];
|
||||
if (!file) return;
|
||||
uploading = true;
|
||||
await upload(currentPath, file);
|
||||
fileInput.value = "";
|
||||
uploading = false;
|
||||
browse(currentPath);
|
||||
}
|
||||
browse("");
|
||||
|
||||
function formatSize(bytes) {
|
||||
if (!bytes) return "—";
|
||||
const u = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return (bytes / Math.pow(1024, i)).toFixed(1) + " " + u[i];
|
||||
}
|
||||
|
||||
function fileIcon(name) {
|
||||
const ext = name.split(".").pop().toLowerCase();
|
||||
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) return "image";
|
||||
if (["mp4", "mkv", "avi", "mov"].includes(ext)) return "video";
|
||||
if (["mp3", "flac", "wav", "m4a", "ogg"].includes(ext)) return "audio";
|
||||
if (["zip", "tar", "gz", "7z", "rar"].includes(ext)) return "archive";
|
||||
if (["py", "js", "ts", "go", "rs", "sh", "yml", "yaml", "json", "md"].includes(ext)) return "code";
|
||||
return "file";
|
||||
}
|
||||
|
||||
const crumbs = $derived(currentPath.split("/").filter(Boolean));
|
||||
|
||||
onMount(() => browse(""));
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">Files</h2>
|
||||
<div class="flex items-center gap-2 mb-4 text-sm text-gray-500">
|
||||
<button class="hover:text-blue-600" onclick={() => browse("")}>/volume1</button>
|
||||
{#each currentPath.split("/").filter(Boolean) as part, i}
|
||||
<span>/</span>
|
||||
<button class="hover:text-blue-600" onclick={() => browse(currentPath.split("/").slice(0, i + 1).join("/"))}>{part}</button>
|
||||
{/each}
|
||||
{#if currentPath}
|
||||
<button class="ml-4 text-xs px-2 py-1 bg-gray-100 rounded hover:bg-gray-200" onclick={goUp}>Up</button>
|
||||
<div class="space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Files</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">/volume1{currentPath ? "/" + currentPath : ""}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="file" bind:this={fileInput} onchange={handleUpload} class="hidden" />
|
||||
<button
|
||||
onclick={() => fileInput.click()}
|
||||
class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors disabled:opacity-50"
|
||||
disabled={uploading}
|
||||
>
|
||||
{uploading ? "Uploading..." : "Upload"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex items-center gap-1 text-sm flex-wrap">
|
||||
<button class="text-primary-600 hover:text-primary-700 font-medium transition-colors" onclick={() => browse("")}>volume1</button>
|
||||
{#each crumbs as part, i}
|
||||
<svg class="w-3.5 h-3.5 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
|
||||
<button
|
||||
class="text-primary-600 hover:text-primary-700 font-medium transition-colors"
|
||||
onclick={() => browse(crumbs.slice(0, i + 1).join("/"))}
|
||||
>{part}</button>
|
||||
{/each}
|
||||
{#if currentPath}
|
||||
<button
|
||||
class="ml-auto text-xs font-medium text-surface-500 bg-surface-100 hover:bg-surface-200 px-2.5 py-1 rounded-lg transition-colors flex items-center gap-1"
|
||||
onclick={goUp}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
|
||||
Up
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- File List -->
|
||||
{#if loading}
|
||||
<div class="space-y-1">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-11 rounded-lg bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl border border-surface-200 shadow-sm overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="grid grid-cols-[1fr_100px_100px] px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-surface-400 border-b border-surface-100">
|
||||
<span>Name</span>
|
||||
<span class="text-right">Size</span>
|
||||
<span class="text-right">Actions</span>
|
||||
</div>
|
||||
<!-- Entries -->
|
||||
{#each entries as e}
|
||||
<div class="grid grid-cols-[1fr_100px_100px] items-center px-4 py-2.5 hover:bg-surface-50 border-b border-surface-100 last:border-0 transition-colors group">
|
||||
{#if e.is_dir}
|
||||
<button class="flex items-center gap-2.5 text-sm font-medium text-surface-700 hover:text-primary-600 transition-colors text-left truncate" onclick={() => browse(currentPath ? `${currentPath}/${e.name}` : e.name)}>
|
||||
<svg class="w-4 h-4 text-amber-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /></svg>
|
||||
{e.name}
|
||||
</button>
|
||||
{:else}
|
||||
<span class="flex items-center gap-2.5 text-sm text-surface-600 truncate">
|
||||
<svg class="w-4 h-4 text-surface-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
|
||||
{e.name}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="text-xs text-surface-400 text-right">{e.is_dir ? "—" : formatSize(e.size)}</span>
|
||||
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{#if !e.is_dir}
|
||||
<a href={downloadUrl(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors">DL</a>
|
||||
{/if}
|
||||
<button class="text-[11px] text-rose-400 hover:text-rose-600 font-medium transition-colors" onclick={() => remove(e.name)}>Del</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if entries.length === 0}
|
||||
<div class="px-4 py-8 text-center text-sm text-surface-400">Empty directory</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg divide-y">
|
||||
{#each entries as e}
|
||||
<div class="flex items-center justify-between px-4 py-2 hover:bg-gray-50">
|
||||
{#if e.is_dir}
|
||||
<button class="text-blue-600 hover:underline text-sm" onclick={() => browse(currentPath ? `${currentPath}/${e.name}` : e.name)}>{e.name}/</button>
|
||||
{:else}
|
||||
<span class="text-sm">{e.name}</span>
|
||||
{/if}
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-400">{e.is_dir ? "" : formatSize(e.size)}</span>
|
||||
{#if !e.is_dir}
|
||||
<a href={downloadUrl(e.name)} class="text-xs text-blue-500 hover:underline">Download</a>
|
||||
{/if}
|
||||
<button class="text-xs text-red-400 hover:text-red-600" onclick={() => remove(e.name)}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,124 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get } from "../lib/api.js";
|
||||
|
||||
let repos = $state([]);
|
||||
let commits = $state([]);
|
||||
let selectedRepo = $state("");
|
||||
async function load() { const data = await get("/gitea/repos"); repos = data?.data || []; }
|
||||
let loading = $state(true);
|
||||
let loadingCommits = $state(false);
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
const data = await get("/gitea/repos");
|
||||
repos = Array.isArray(data) ? data : data?.data || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function showCommits(owner, repo) {
|
||||
selectedRepo = `${owner}/${repo}`;
|
||||
loadingCommits = true;
|
||||
const data = await get(`/gitea/repos/${owner}/${repo}/commits`);
|
||||
commits = Array.isArray(data) ? data : [];
|
||||
loadingCommits = false;
|
||||
}
|
||||
load();
|
||||
|
||||
function timeAgo(d) {
|
||||
const s = Math.floor((Date.now() - new Date(d)) / 1000);
|
||||
if (s < 60) return "just now";
|
||||
if (s < 3600) return Math.floor(s / 60) + "m ago";
|
||||
if (s < 86400) return Math.floor(s / 3600) + "h ago";
|
||||
return Math.floor(s / 86400) + "d ago";
|
||||
}
|
||||
|
||||
const langColors = {
|
||||
Python: "#3572A5", JavaScript: "#f1e05a", Shell: "#89e051", Go: "#00ADD8",
|
||||
TypeScript: "#3178c6", Markdown: "#083fa1", CSS: "#563d7c", HTML: "#e34c26",
|
||||
};
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-6">Gitea Repos</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{#each repos as r}
|
||||
<button class="border rounded-lg p-4 text-left hover:bg-gray-50" onclick={() => showCommits(r.owner?.login, r.name)}>
|
||||
<span class="font-medium">{r.full_name}</span>
|
||||
<p class="text-xs text-gray-400 mt-1">{r.description || "No description"}</p>
|
||||
<p class="text-xs text-gray-400">Updated {new Date(r.updated_at).toLocaleDateString()}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Repositories</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">{repos.length} repositories on Gitea</p>
|
||||
</div>
|
||||
|
||||
{#if selectedRepo}
|
||||
<div class="mt-6">
|
||||
<h3 class="font-semibold mb-3">Commits: {selectedRepo}</h3>
|
||||
<div class="space-y-2">
|
||||
{#each commits.slice(0, 20) as c}
|
||||
<div class="border-b pb-2">
|
||||
<p class="text-sm">{c.commit?.message?.split("\n")[0]}</p>
|
||||
<p class="text-xs text-gray-400">{c.commit?.author?.name} - {new Date(c.commit?.author?.date).toLocaleString()}</p>
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-[100px] rounded-xl bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{#each repos as r}
|
||||
<button
|
||||
class="bg-white rounded-xl border border-surface-200 p-4 text-left shadow-sm hover:shadow-md hover:border-primary-200 transition-all duration-200 group {selectedRepo === `${r.owner?.login}/${r.name}` ? 'ring-2 ring-primary-500 border-primary-300' : ''}"
|
||||
onclick={() => showCommits(r.owner?.login, r.name)}
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-surface-800 group-hover:text-primary-600 transition-colors truncate">{r.name}</p>
|
||||
<p class="text-xs text-surface-400 mt-1 line-clamp-1">{r.description || "No description"}</p>
|
||||
</div>
|
||||
{#if r.language}
|
||||
<span class="flex items-center gap-1 text-[11px] text-surface-500 shrink-0 ml-2">
|
||||
<span class="w-2 h-2 rounded-full" style="background: {langColors[r.language] || '#888'}"></span>
|
||||
{r.language}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-[11px] text-surface-400 mt-2.5">Updated {timeAgo(r.updated_at)}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Commits Panel -->
|
||||
{#if selectedRepo}
|
||||
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-surface-800">Recent Commits</h3>
|
||||
<p class="text-xs text-surface-400 mt-0.5">{selectedRepo}</p>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Close commits"
|
||||
class="text-xs text-surface-400 hover:text-surface-600 transition-colors"
|
||||
onclick={() => { selectedRepo = ""; commits = []; }}
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
{#if loadingCommits}
|
||||
<div class="space-y-3">
|
||||
{#each Array(3) as _}
|
||||
<div class="h-12 rounded-lg bg-surface-100 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-0">
|
||||
{#each commits.slice(0, 15) as c, i}
|
||||
<div class="flex gap-3 py-2.5 {i < commits.length - 1 ? 'border-b border-surface-100' : ''}">
|
||||
<div class="flex flex-col items-center pt-1">
|
||||
<div class="w-2 h-2 rounded-full bg-primary-400 shrink-0"></div>
|
||||
{#if i < commits.length - 1}
|
||||
<div class="w-px flex-1 bg-surface-200 mt-1"></div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm text-surface-700 truncate">{c.commit?.message?.split("\n")[0]}</p>
|
||||
<p class="text-[11px] text-surface-400 mt-0.5">
|
||||
<span class="font-medium">{c.commit?.author?.name}</span> · {timeAgo(c.commit?.author?.date)}
|
||||
</p>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono text-surface-400 bg-surface-50 px-1.5 py-0.5 rounded h-fit shrink-0">{c.sha?.slice(0, 7)}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -2,46 +2,105 @@
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let termEl;
|
||||
let connected = $state(false);
|
||||
let error = $state("");
|
||||
|
||||
onMount(async () => {
|
||||
const { Terminal } = await import("@xterm/xterm");
|
||||
const { FitAddon } = await import("@xterm/addon-fit");
|
||||
await import("@xterm/xterm/css/xterm.css");
|
||||
try {
|
||||
const { Terminal } = await import("@xterm/xterm");
|
||||
const { FitAddon } = await import("@xterm/addon-fit");
|
||||
await import("@xterm/xterm/css/xterm.css");
|
||||
|
||||
const term = new Terminal({ cursorBlink: true, fontSize: 14, theme: { background: "#1a1a2e" } });
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
term.open(termEl);
|
||||
fit.fit();
|
||||
|
||||
const proto = location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const ws = new WebSocket(`${proto}//${location.host}/ws/terminal`);
|
||||
ws.binaryType = "arraybuffer";
|
||||
|
||||
ws.onopen = () => {
|
||||
const buf = new Uint8Array(5);
|
||||
buf[0] = 0x01;
|
||||
new DataView(buf.buffer).setUint16(1, term.cols);
|
||||
new DataView(buf.buffer).setUint16(3, term.rows);
|
||||
ws.send(buf);
|
||||
};
|
||||
ws.onmessage = (e) => term.write(new Uint8Array(e.data));
|
||||
ws.onclose = () => term.write("\r\n[Connection closed]");
|
||||
term.onData((data) => ws.readyState === 1 && ws.send(new TextEncoder().encode(data)));
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
const term = new Terminal({
|
||||
cursorBlink: true,
|
||||
fontSize: 13,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace",
|
||||
lineHeight: 1.4,
|
||||
theme: {
|
||||
background: "#0f172a",
|
||||
foreground: "#e2e8f0",
|
||||
cursor: "#6366f1",
|
||||
cursorAccent: "#0f172a",
|
||||
selectionBackground: "#334155",
|
||||
black: "#0f172a",
|
||||
red: "#f43f5e",
|
||||
green: "#10b981",
|
||||
yellow: "#f59e0b",
|
||||
blue: "#3b82f6",
|
||||
magenta: "#a855f7",
|
||||
cyan: "#06b6d4",
|
||||
white: "#e2e8f0",
|
||||
},
|
||||
});
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
term.open(termEl);
|
||||
fit.fit();
|
||||
if (ws.readyState === 1) {
|
||||
|
||||
const proto = location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const ws = new WebSocket(`${proto}//${location.host}/ws/terminal`);
|
||||
ws.binaryType = "arraybuffer";
|
||||
|
||||
ws.onopen = () => {
|
||||
connected = true;
|
||||
const buf = new Uint8Array(5);
|
||||
buf[0] = 0x01;
|
||||
new DataView(buf.buffer).setUint16(1, term.cols);
|
||||
new DataView(buf.buffer).setUint16(3, term.rows);
|
||||
ws.send(buf);
|
||||
}
|
||||
});
|
||||
ro.observe(termEl);
|
||||
};
|
||||
ws.onmessage = (e) => term.write(new Uint8Array(e.data));
|
||||
ws.onclose = () => {
|
||||
connected = false;
|
||||
term.write("\r\n\x1b[90m[Connection closed]\x1b[0m");
|
||||
};
|
||||
ws.onerror = () => {
|
||||
error = "WebSocket connection failed. Terminal requires Tailscale access.";
|
||||
};
|
||||
term.onData((data) => ws.readyState === 1 && ws.send(new TextEncoder().encode(data)));
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
fit.fit();
|
||||
if (ws.readyState === 1) {
|
||||
const buf = new Uint8Array(5);
|
||||
buf[0] = 0x01;
|
||||
new DataView(buf.buffer).setUint16(1, term.cols);
|
||||
new DataView(buf.buffer).setUint16(3, term.rows);
|
||||
ws.send(buf);
|
||||
}
|
||||
});
|
||||
ro.observe(termEl);
|
||||
} catch (e) {
|
||||
error = "Failed to initialize terminal: " + e.message;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-4">Terminal</h2>
|
||||
<div bind:this={termEl} class="h-[calc(100vh-8rem)] rounded-lg overflow-hidden"></div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">
|
||||
{#if connected}
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
Connected
|
||||
</span>
|
||||
{:else if error}
|
||||
<span class="text-rose-500">{error}</span>
|
||||
{:else}
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
|
||||
Connecting...
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
bind:this={termEl}
|
||||
class="h-[calc(100vh-10rem)] rounded-xl overflow-hidden shadow-lg border border-surface-700"
|
||||
style="background: #0f172a;"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user