blomios/Containarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: change display of agents

Browse Source
This commit is contained in:
Blomios
2026-05-18 11:46:42 +02:00
parent 204801a1d6
commit 12c87d6a74
1 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/routes/+page.svelte
View File

@ -34,6 +34,31 @@
}, {})
);
// Tri alphabétique des agents : alias (si défini) sinon hostname, insensible à la casse
const sortedAgents = $derived(
Object.entries(byAgent).sort(([, a], [, b]) => {
const labelA = (a[0]?.alias || a[0]?.hostname || "").toLowerCase();
const labelB = (b[0]?.alias || b[0]?.hostname || "").toLowerCase();
return labelA.localeCompare(labelB);
})
);
// État replié/déplié par agent (déplié par défaut)
let collapsed = $state<Record<string, boolean>>({});
function toggleSection(agentId: string) {
collapsed[agentId] = !collapsed[agentId];
}
// Pastille de statut pour un agent selon l'état de ses containers
function agentDotClass(containers: ContainerEntry[]): string {
if (containers.length === 0) return "dot-offline";
const running = containers.filter(c => c.container.state === "running").length;
if (running === containers.length) return "dot-running";
if (running === 0) return "dot-exited";
return "dot-other";
}
let disconnect: (() => void) | null = null;
async function load() {
@ -191,15 +216,29 @@
</div>
{:else}
{#each Object.entries(byAgent) as [_agentId, containers]}
{#each sortedAgents as [agentId, containers]}
{#if containers.length > 0}
{@const first = containers[0]}
{@const isCollapsed = collapsed[agentId] ?? false}
<section class="mb-8">
<!-- Host header -->
<div class="flex items-center gap-2.5 mb-3 px-1">
<span class="dot-online"></span>
<h2 class="font-semibold text-slate-200 text-sm">
<!-- Host header (cliquable pour replier/déplier) -->
<button
class="flex items-center gap-2.5 mb-3 px-1 w-full text-left cursor-pointer group"
onclick={() => toggleSection(agentId)}
type="button"
>
<!-- Chevron -->
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
</svg>
<!-- Pastille de statut dynamique -->
<span class={agentDotClass(containers)}></span>
<h2 class="font-semibold text-slate-200 text-sm group-hover:text-slate-100 transition-colors">
{first.alias || first.hostname}
</h2>
{#if first.alias}
@ -212,8 +251,9 @@
<span class="text-xs text-slate-600 ml-auto">
{containers.length} container{containers.length !== 1 ? "s" : ""}
</span>
</div>
</button>
{#if !isCollapsed}
<!-- Desktop table -->
<div class="hidden md:block card overflow-hidden">
<table class="w-full text-sm">
@ -322,6 +362,7 @@
</div>
{/each}
</div>
{/if}
</section>
{/if}