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

feat: add auto update

Browse Source
This commit is contained in:
Blomios
2026-05-19 15:53:30 +02:00
parent bd3121d688
commit ba4de62a34
22 changed files with 3323 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,11 +13,15 @@
fetchNetworks,
containerAction,
connectEvents,
getAutoUpdatePolicy,
setAutoUpdatePolicy,
updateNow,
type ContainerEntry,
type ContainerPort,
type ImageEntry,
type VolumeEntry,
type NetworkEntry,
type AutoUpdatePolicy,
} from "$lib/api";
import { clearToken } from "$lib/auth";
import LogModal from "$lib/LogModal.svelte";
@ -144,6 +148,19 @@
loadError = null;
try {
entries = await fetchContainers() ?? [];
// Pré-chargement en arrière-plan des policies pour colorer les boutons auto-update
const toLoad = entries;
Promise.allSettled(
toLoad.map(e => getAutoUpdatePolicy(e.agent_id, e.container.id).then(policy => ({ key: autoUpdateKey(e.agent_id, e.container.id), policy })))
).then(results => {
const updates: Record<string, AutoUpdateState> = {};
for (const r of results) {
if (r.status === "fulfilled") {
updates[r.value.key] = { policy: r.value.policy, loading: false, saving: false };
}
}
autoUpdateStates = { ...autoUpdateStates, ...updates };
});
} catch (e: unknown) {
loadError = e instanceof Error ? e.message : String(e);
entries = [];
@ -213,11 +230,170 @@
setTimeout(() => (toast = null), 3000);
}
// ── Auto-update panel ────────────────────────────────────────────────────
interface AutoUpdateState {
policy: AutoUpdatePolicy | null;
loading: boolean;
saving: boolean;
}
let autoUpdateOpen = $state<string | null>(null); // containerKey = `${agentId}/${containerId}`
let updateNowPending = $state<string | null>(null); // containerKey en cours d'update
let autoUpdateStates = $state<Record<string, AutoUpdateState>>({});
let autoUpdateDebounce = $state<ReturnType<typeof setTimeout> | null>(null);
let autoUpdatePanelPos = $state<{ top: number; right: number } | null>(null);
const INTERVAL_OPTIONS = [
{ label: "1 heure", value: 60 },
{ label: "6 heures", value: 360 },
{ label: "12 heures", value: 720 },
{ label: "24 heures", value: 1440 },
{ label: "7 jours", value: 10080 },
];
function autoUpdateKey(agentId: string, containerId: string) {
return `${agentId}/${containerId}`;
}
async function openAutoUpdate(agentId: string, containerId: string, panelPos?: { top: number; right: number }) {
const key = autoUpdateKey(agentId, containerId);
if (autoUpdateOpen === key) {
autoUpdateOpen = null;
autoUpdatePanelPos = null;
return;
}
autoUpdateOpen = key;
if (panelPos) autoUpdatePanelPos = panelPos;
// Si la policy a déjà été pré-chargée, on ne la réinitialise pas
const existing = autoUpdateStates[key];
if (!existing?.policy) {
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy: existing?.policy ?? null, loading: true, saving: false },
};
try {
const policy = await getAutoUpdatePolicy(agentId, containerId);
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy, loading: false, saving: false },
};
} catch {
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy: null, loading: false, saving: false },
};
}
}
}
function scheduleAutoUpdateSave(agentId: string, containerId: string) {
const key = autoUpdateKey(agentId, containerId);
if (autoUpdateDebounce) clearTimeout(autoUpdateDebounce);
autoUpdateDebounce = setTimeout(async () => {
const state = autoUpdateStates[key];
if (!state?.policy) return;
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, saving: true },
};
try {
const updated = await setAutoUpdatePolicy(agentId, containerId, {
enabled: state.policy.enabled,
interval_minutes: state.policy.interval_minutes,
});
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy: updated, loading: false, saving: false },
};
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, saving: false },
};
}
}, 300);
}
function toggleAutoUpdateEnabled(agentId: string, containerId: string) {
const key = autoUpdateKey(agentId, containerId);
const state = autoUpdateStates[key];
if (!state?.policy) return;
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, policy: { ...state.policy, enabled: !state.policy.enabled } },
};
scheduleAutoUpdateSave(agentId, containerId);
}
function changeAutoUpdateInterval(agentId: string, containerId: string, minutes: number) {
const key = autoUpdateKey(agentId, containerId);
const state = autoUpdateStates[key];
if (!state?.policy) return;
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, policy: { ...state.policy, interval_minutes: minutes } },
};
scheduleAutoUpdateSave(agentId, containerId);
}
async function doUpdateNow(agentId: string, containerId: string) {
const key = autoUpdateKey(agentId, containerId);
updateNowPending = key;
try {
await updateNow(agentId, containerId);
showToast("Mise à jour lancée", true);
// Refresh panel après un délai pour montrer last_checked_at mis à jour
if (autoUpdateOpen !== null) {
const currentKey = autoUpdateOpen;
const parts = currentKey.split('/');
const panelAgentId = parts[0];
const panelContainerId = parts.slice(1).join('/');
setTimeout(async () => {
if (autoUpdateOpen !== currentKey) return; // panel fermé entretemps
try {
const policy = await getAutoUpdatePolicy(panelAgentId, panelContainerId);
autoUpdateStates = {
...autoUpdateStates,
[currentKey]: { policy, loading: false, saving: false },
};
} catch {}
}, 3000);
}
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
} finally {
updateNowPending = null;
}
}
function closeAutoUpdateOnClickOutside(e: MouseEvent) {
if (autoUpdateOpen === null) return;
const target = e.target as HTMLElement;
if (!target.closest("[data-autoupdate-panel]") && !target.closest("[data-autoupdate-btn]")) {
autoUpdateOpen = null;
autoUpdatePanelPos = null;
}
}
function formatRelativeTime(iso: string | null): string {
if (!iso) return "Jamais";
const diff = Date.now() - new Date(iso).getTime();
const s = Math.floor(diff / 1000);
if (s < 60) return "Il y a quelques secondes";
const m = Math.floor(s / 60);
if (m < 60) return `Il y a ${m} min`;
const h = Math.floor(m / 60);
if (h < 24) return `Il y a ${h}h`;
const d = Math.floor(h / 24);
return `Il y a ${d}j`;
}
// ── Toggle helpers ────────────────────────────────────────────────────────
function toggleSection(agentId: string) { collapsed[agentId] = !(collapsed[agentId] ?? true); }
function toggleImages(agentId: string) { collapsedImages[agentId] = !(collapsedImages[agentId] ?? true); }
function toggleVolumes(agentId: string) { collapsedVolumes[agentId] = !(collapsedVolumes[agentId] ?? true); }
function toggleNetworks(agentId: string) { collapsedNetworks[agentId] = !(collapsedNetworks[agentId] ?? true); }
function toggleSection(agentId: string) { collapsed = { ...collapsed, [agentId]: !(collapsed[agentId] ?? true) }; }
function toggleImages(agentId: string) { collapsedImages = { ...collapsedImages, [agentId]: !(collapsedImages[agentId] ?? true) }; }
function toggleVolumes(agentId: string) { collapsedVolumes = { ...collapsedVolumes, [agentId]: !(collapsedVolumes[agentId] ?? true) }; }
function toggleNetworks(agentId: string) { collapsedNetworks = { ...collapsedNetworks, [agentId]: !(collapsedNetworks[agentId] ?? true) }; }
// ── Lifecycle ─────────────────────────────────────────────────────────────
onMount(() => {
@ -225,6 +401,18 @@
disconnect = connectEvents((evt) => {
if (evt.type === "containers.updated" || evt.type === "agent.connected" || evt.type === "agent.disconnected") {
if (activeTab === "containers") load();
// Refresh open auto-update panel
if (autoUpdateOpen !== null) {
const parts = autoUpdateOpen.split('/');
const panelAgentId = parts[0];
const panelContainerId = parts.slice(1).join('/');
getAutoUpdatePolicy(panelAgentId, panelContainerId).then(policy => {
autoUpdateStates = {
...autoUpdateStates,
[autoUpdateOpen!]: { policy, loading: false, saving: false },
};
}).catch(() => {});
}
}
if (evt.type === "resources.updated") {
if (activeTab === "images") loadImages();
@ -255,7 +443,7 @@
if (seen.has(key)) return false;
seen.add(key);
return true;
});
}).sort((a, b) => a.host_port - b.host_port);
}
function stateDotClass(state: string) {
@ -320,7 +508,7 @@
</div>
{/if}
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200">
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200" role="presentation" onclick={closeAutoUpdateOnClickOutside}>
<!-- Header -->
<header class="glass sticky top-0 z-40 px-5 py-3 flex items-center gap-3">
@ -334,18 +522,24 @@
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{entries.length} containers · {Object.keys(byAgent).length} hosts
</span>
{:else if activeTab === "images" && images !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{images.length} images · {Object.keys(byAgentImages).length} hosts
</span>
{:else if activeTab === "volumes" && volumes !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{volumes.length} volumes · {Object.keys(byAgentVolumes).length} hosts
</span>
{:else if activeTab === "networks" && networks !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{networks.length} networks · {Object.keys(byAgentNetworks).length} hosts
</span>
{:else if activeTab === "images"}
{#if images !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{images.length} images · {Object.keys(byAgentImages).length} hosts
</span>
{/if}
{:else if activeTab === "volumes"}
{#if volumes !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{volumes.length} volumes · {Object.keys(byAgentVolumes).length} hosts
</span>
{/if}
{:else if activeTab === "networks"}
{#if networks !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{networks.length} networks · {Object.keys(byAgentNetworks).length} hosts
</span>
{/if}
{/if}
{#if installPrompt}
@ -357,6 +551,13 @@
</button>
{/if}
<a href="/compose" class="nav-btn" title="Éditeur Compose">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</a>
<a href="/admin" class="nav-btn" title="Administration">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
@ -405,7 +606,6 @@
<main class="p-4 md:p-6 max-w-7xl mx-auto">
{#key activeTab}
<!-- ═══════════════════════════════════════════════════
CONTAINERS TAB
════════════════════════════════════════════════════ -->
@ -434,7 +634,6 @@
{#each sortedAgents as [agentId, containers]}
{#if containers.length > 0}
{@const first = containers[0]}
{@const isCollapsed = collapsed[agentId] ?? true}
<section class="mb-8">
<button
@ -444,7 +643,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsed[agentId] !== false ? '-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" />
@ -465,7 +664,7 @@
</span>
</button>
{#if !isCollapsed}
{#if collapsed[agentId] === false}
<!-- Desktop table -->
<div class="hidden md:block card overflow-hidden">
<table class="w-full text-sm">
@ -480,7 +679,7 @@
</tr>
</thead>
<tbody>
{#each containers as { agent_id, container } (container.id)}
{#each containers.slice().sort((a, b) => a.container.name.localeCompare(b.container.name)) as { agent_id, container } (container.id)}
<tr class="border-b border-white/[0.04] last:border-0
hover:bg-white/[0.025] transition-colors group">
<td class="px-4 py-3">
@ -508,7 +707,7 @@
{container.compose_project || "—"}
</td>
<td class="px-4 py-3">
<div class="flex justify-end gap-1.5">
<div class="flex justify-end gap-1.5 relative">
{@render ActionBtn({ label: "Logs", variant: "cyan",
loading: false,
onclick: () => openLogs(agent_id, container.id, container.name) })}
@ -524,6 +723,7 @@
loading: actionPending === container.id,
onclick: () => doAction(agent_id, container.id, "restart") })}
{/if}
{@render AutoUpdateBtn(agent_id, container.id)}
</div>
</td>
</tr>
@ -534,7 +734,7 @@
<!-- Mobile cards -->
<div class="md:hidden space-y-2">
{#each containers as { agent_id, container } (container.id)}
{#each containers.slice().sort((a, b) => a.container.name.localeCompare(b.container.name)) as { agent_id, container } (container.id)}
<div class="card p-4">
<div class="flex items-start justify-between gap-2 mb-2">
<div class="flex items-center gap-2 min-w-0">
@ -554,7 +754,7 @@
{/each}
</div>
{/if}
<div class="flex gap-2 flex-wrap">
<div class="flex gap-2 flex-wrap relative">
{@render ActionBtn({ label: "Logs", variant: "cyan",
loading: false,
onclick: () => openLogs(agent_id, container.id, container.name) })}
@ -570,6 +770,7 @@
loading: actionPending === container.id,
onclick: () => doAction(agent_id, container.id, "restart") })}
{/if}
{@render AutoUpdateBtn(agent_id, container.id)}
</div>
</div>
{/each}
@ -609,7 +810,6 @@
{:else}
{#each sortedAgentImages as [agentId, agentImages]}
{@const first = agentImages[0]}
{@const isCollapsed = collapsedImages[agentId] ?? true}
<section class="mb-8">
<button
@ -619,7 +819,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsedImages[agentId] !== false ? '-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" />
@ -631,12 +831,16 @@
{#if first.alias}
<span class="font-mono text-xs text-slate-600">{first.hostname}</span>
{/if}
{#if first.ip_address}
<span class="font-mono text-xs text-slate-500 bg-abyss-700 px-2 py-0.5 rounded-full
border border-white/[0.06]">{first.ip_address}</span>
{/if}
<span class="text-xs text-slate-600 ml-auto">
{agentImages.length} image{agentImages.length !== 1 ? "s" : ""}
</span>
</button>
{#if !isCollapsed}
{#if collapsedImages[agentId] === false}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
@ -648,10 +852,10 @@
</tr>
</thead>
<tbody>
{#each agentImages as img (img.id)}
{#each agentImages.slice().sort((a, b) => (a.tags[0] ?? a.id).localeCompare(b.tags[0] ?? b.id)) as img (img.id)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3">
{#if img.tags.length > 0}
{#if img.tags?.length > 0}
<div class="flex flex-wrap gap-1">
{#each img.tags as tag}
<span class="font-mono text-xs px-1.5 py-0.5 rounded
@ -706,7 +910,6 @@
{:else}
{#each sortedAgentVolumes as [agentId, agentVolumes]}
{@const first = agentVolumes[0]}
{@const isCollapsed = collapsedVolumes[agentId] ?? true}
<section class="mb-8">
<button
@ -716,7 +919,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsedVolumes[agentId] !== false ? '-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" />
@ -728,12 +931,16 @@
{#if first.alias}
<span class="font-mono text-xs text-slate-600">{first.hostname}</span>
{/if}
{#if first.ip_address}
<span class="font-mono text-xs text-slate-500 bg-abyss-700 px-2 py-0.5 rounded-full
border border-white/[0.06]">{first.ip_address}</span>
{/if}
<span class="text-xs text-slate-600 ml-auto">
{agentVolumes.length} volume{agentVolumes.length !== 1 ? "s" : ""}
</span>
</button>
{#if !isCollapsed}
{#if collapsedVolumes[agentId] === false}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
@ -744,7 +951,7 @@
</tr>
</thead>
<tbody>
{#each agentVolumes as vol (vol.name)}
{#each agentVolumes.slice().sort((a, b) => a.name.localeCompare(b.name)) as vol (vol.name)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3 font-mono text-xs text-slate-200 font-medium">{vol.name}</td>
<td class="px-4 py-3 text-xs text-slate-400">{vol.driver}</td>
@ -789,7 +996,6 @@
{:else}
{#each sortedAgentNetworks as [agentId, agentNetworks]}
{@const first = agentNetworks[0]}
{@const isCollapsed = collapsedNetworks[agentId] ?? true}
<section class="mb-8">
<button
@ -799,7 +1005,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsedNetworks[agentId] !== false ? '-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" />
@ -811,12 +1017,16 @@
{#if first.alias}
<span class="font-mono text-xs text-slate-600">{first.hostname}</span>
{/if}
{#if first.ip_address}
<span class="font-mono text-xs text-slate-500 bg-abyss-700 px-2 py-0.5 rounded-full
border border-white/[0.06]">{first.ip_address}</span>
{/if}
<span class="text-xs text-slate-600 ml-auto">
{agentNetworks.length} réseau{agentNetworks.length !== 1 ? "x" : ""}
</span>
</button>
{#if !isCollapsed}
{#if collapsedNetworks[agentId] === false}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
@ -828,7 +1038,7 @@
</tr>
</thead>
<tbody>
{#each agentNetworks as net (net.id)}
{#each agentNetworks.slice().sort((a, b) => a.name.localeCompare(b.name)) as net (net.id)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3 font-mono text-xs text-slate-200 font-medium">{net.name}</td>
<td class="px-4 py-3 text-xs text-slate-400">{net.driver}</td>
@ -852,9 +1062,100 @@
{/each}
{/if}
{/if}
{/key}
</main>
<!-- Auto-update panel (position: fixed, hors du flux des tableaux) -->
{#if autoUpdateOpen !== null && autoUpdatePanelPos !== null}
{@const state = autoUpdateStates[autoUpdateOpen]}
{@const parts = autoUpdateOpen.split('/')}
{@const panelAgentId = parts[0]}
{@const panelContainerId = parts.slice(1).join('/')}
<div
data-autoupdate-panel
role="presentation"
onclick={(e) => e.stopPropagation()}
style="position: fixed; top: {autoUpdatePanelPos.top}px; right: {autoUpdatePanelPos.right}px;"
class="z-50 w-64 bg-gray-800 border border-gray-700 rounded-lg shadow-xl p-3"
>
{#if state?.loading}
<div class="flex items-center justify-center py-4 text-slate-500 text-xs gap-2">
<div class="w-4 h-4 border border-slate-600 border-t-violet-400 rounded-full animate-spin"></div>
Chargement…
</div>
{:else if !state?.policy}
<p class="text-xs text-signal-red text-center py-2">Erreur de chargement</p>
{:else}
<!-- Toggle -->
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-medium text-slate-300">Auto-update</span>
<button
type="button"
aria-pressed={state.policy.enabled}
aria-label="Activer/désactiver l'auto-update"
onclick={() => toggleAutoUpdateEnabled(panelAgentId, panelContainerId)}
class="relative w-9 h-5 rounded-full cursor-pointer transition-colors focus:outline-none
{state.policy.enabled ? 'bg-violet-500' : 'bg-gray-600'}
{state.saving ? 'opacity-60' : ''}"
>
<span
class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow
transition-transform duration-200
{state.policy.enabled ? 'translate-x-4' : 'translate-x-0'}"
></span>
</button>
</div>
<!-- Interval -->
<div class="mb-3">
<label for="au-interval-{autoUpdateOpen}" class="text-xs text-slate-500 block mb-1">Intervalle</label>
<select
id="au-interval-{autoUpdateOpen}"
disabled={!state.policy.enabled || state.saving}
value={state.policy.interval_minutes}
onchange={(e) => changeAutoUpdateInterval(panelAgentId, panelContainerId, Number((e.target as HTMLSelectElement).value))}
class="w-full bg-gray-900 border border-gray-600 text-gray-300 text-xs
rounded-md px-2 py-1.5 focus:outline-none focus:border-violet-500
disabled:opacity-40 disabled:cursor-not-allowed"
>
{#each INTERVAL_OPTIONS as opt}
<option value={opt.value}>{opt.label}</option>
{/each}
</select>
</div>
<!-- Bouton update now -->
<div class="mb-3">
<button
type="button"
disabled={updateNowPending === autoUpdateOpen || state.saving}
onclick={() => doUpdateNow(panelAgentId, panelContainerId)}
class="w-full px-3 py-1.5 rounded-md text-xs font-medium transition-all border
bg-violet-500/15 hover:bg-violet-500/25 text-violet-300 border-violet-500/30
disabled:opacity-40 disabled:cursor-not-allowed"
>
{updateNowPending === autoUpdateOpen ? "Mise à jour en cours…" : "Mettre à jour maintenant"}
</button>
</div>
<!-- Info lines -->
<div class="space-y-1 border-t border-gray-700 pt-2">
<p class="text-gray-500 text-xs">
Vérification : <span class="text-slate-400">{formatRelativeTime(state.policy.last_checked_at)}</span>
</p>
<p class="text-gray-500 text-xs">
Mise à jour : <span class="text-slate-400">{formatRelativeTime(state.policy.last_updated_at)}</span>
</p>
</div>
{#if state.saving}
<p class="text-xs text-violet-400 mt-2 text-center">Enregistrement…</p>
{/if}
{/if}
</div>
{/if}
</div>
{#snippet ActionBtn({ label, variant, loading, onclick }: {
@ -876,3 +1177,33 @@
{loading ? "…" : label}
</button>
{/snippet}
{#snippet AutoUpdateBtn(agentId: string, containerId: string)}
{@const key = autoUpdateKey(agentId, containerId)}
{@const isOpen = autoUpdateOpen === key}
{@const state = autoUpdateStates[key]}
<div class="relative">
<button
data-autoupdate-btn
onclick={(e) => {
e.stopPropagation();
if (autoUpdateOpen !== key) {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
openAutoUpdate(agentId, containerId, { top: rect.bottom + 6, right: window.innerWidth - rect.right });
} else {
openAutoUpdate(agentId, containerId);
}
}}
title="Auto-update"
class="px-2 py-1 rounded-lg text-xs font-medium transition-all border
{isOpen || state?.policy?.enabled
? 'bg-violet-500/20 text-violet-300 border-violet-500/40'
: 'bg-white/[0.05] hover:bg-white/[0.09] text-slate-500 hover:text-slate-300 border-white/[0.08]'}"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</div>
{/snippet}