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,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>
|
||||
|
||||
Reference in New Issue
Block a user