feat: add auto update
This commit is contained in:
153
web/package-lock.json
generated
153
web/package-lock.json
generated
@ -7,6 +7,14 @@
|
||||
"": {
|
||||
"name": "containarr-web",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.10.3",
|
||||
"@codemirror/lang-yaml": "^6.1.3",
|
||||
"@codemirror/language": "^6.12.3",
|
||||
"@codemirror/state": "^6.6.0",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.43.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^3.0.6",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
@ -1680,6 +1688,92 @@
|
||||
"specificity": "bin/cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/autocomplete": {
|
||||
"version": "6.20.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.2.tgz",
|
||||
"integrity": "sha512-G5FPkgIiLjOgZMjqVjvuKQ1rGPtHogLldJr33eFJdVLtmwY+giGrlv/ewljLz6b9BSQLkjxuwBc6g6omDM+YxQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/commands": {
|
||||
"version": "6.10.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
|
||||
"integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.6.0",
|
||||
"@codemirror/view": "^6.27.0",
|
||||
"@lezer/common": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-yaml": {
|
||||
"version": "6.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-yaml/-/lang-yaml-6.1.3.tgz",
|
||||
"integrity": "sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.2.0",
|
||||
"@lezer/lr": "^1.0.0",
|
||||
"@lezer/yaml": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.12.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.3.tgz",
|
||||
"integrity": "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.23.0",
|
||||
"@lezer/common": "^1.5.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0",
|
||||
"style-mod": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/state": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
|
||||
"integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@marijn/find-cluster-break": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/theme-one-dark": {
|
||||
"version": "6.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
|
||||
"integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/highlight": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/view": {
|
||||
"version": "6.43.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.0.tgz",
|
||||
"integrity": "sha512-V7ZCLQO3Jus9hzh2jVCCPW3mO4IBMr43O37PqSUYautJSnnJF41YlgLw21x0fLJTYvJ+Vkm6Gp+qKGH9pltgXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.6.0",
|
||||
"crelt": "^1.0.6",
|
||||
"style-mod": "^4.1.0",
|
||||
"w3c-keyname": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@csstools/color-helpers": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
|
||||
@ -2351,6 +2445,47 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/common": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.2.tgz",
|
||||
"integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@lezer/highlight": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
|
||||
"integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "1.4.10",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.10.tgz",
|
||||
"integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/yaml": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/yaml/-/yaml-1.0.4.tgz",
|
||||
"integrity": "sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@marijn/find-cluster-break": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
|
||||
"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -3956,6 +4091,12 @@
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/crelt": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
|
||||
"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@ -7323,6 +7464,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/style-mod": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
|
||||
"integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sucrase": {
|
||||
"version": "3.35.1",
|
||||
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
|
||||
@ -8194,6 +8341,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-keyname": {
|
||||
"version": "2.2.8",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
|
||||
|
||||
@ -29,5 +29,13 @@
|
||||
"vite": "^6.0.7",
|
||||
"vitest": "^4.1.6",
|
||||
"workbox-window": "^7.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.10.3",
|
||||
"@codemirror/lang-yaml": "^6.1.3",
|
||||
"@codemirror/language": "^6.12.3",
|
||||
"@codemirror/state": "^6.6.0",
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.43.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,6 +122,7 @@ export interface ImageEntry {
|
||||
agent_id: string;
|
||||
hostname: string;
|
||||
alias: string;
|
||||
ip_address: string;
|
||||
id: string;
|
||||
tags: string[];
|
||||
size: number;
|
||||
@ -132,6 +133,7 @@ export interface VolumeEntry {
|
||||
agent_id: string;
|
||||
hostname: string;
|
||||
alias: string;
|
||||
ip_address: string;
|
||||
name: string;
|
||||
driver: string;
|
||||
mountpoint: string;
|
||||
@ -141,6 +143,7 @@ export interface NetworkEntry {
|
||||
agent_id: string;
|
||||
hostname: string;
|
||||
alias: string;
|
||||
ip_address: string;
|
||||
id: string;
|
||||
name: string;
|
||||
driver: string;
|
||||
@ -201,6 +204,92 @@ export function connectLogs(
|
||||
return () => ws.close();
|
||||
}
|
||||
|
||||
export async function fsList(
|
||||
agentId: string,
|
||||
path: string
|
||||
): Promise<{ name: string; is_dir: boolean; has_compose: boolean }[]> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/fs/list?path=${encodeURIComponent(path)}`);
|
||||
if (!r.ok) throw new Error(`fsList: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export async function fsRead(agentId: string, path: string): Promise<string> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/fs/read?path=${encodeURIComponent(path)}`);
|
||||
if (!r.ok) throw new Error(`fsRead: ${r.status}`);
|
||||
const json = await r.json();
|
||||
return json.content as string;
|
||||
}
|
||||
|
||||
export async function fsWrite(agentId: string, path: string, content: string): Promise<void> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/fs/write`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ path, content }),
|
||||
});
|
||||
if (!r.ok) throw new Error(`fsWrite: ${r.status}`);
|
||||
}
|
||||
|
||||
export async function fsMkdir(agentId: string, path: string): Promise<void> {
|
||||
const r = await apiFetch(`/api/v1/agents/${agentId}/fs/mkdir`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ path }),
|
||||
});
|
||||
if (!r.ok) throw new Error(`mkdir: ${r.status}`);
|
||||
}
|
||||
|
||||
export async function composeAction(
|
||||
agentId: string,
|
||||
path: string,
|
||||
action: "up" | "down" | "pull"
|
||||
): Promise<{ ok: boolean; output: string }> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/compose`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ path, action }),
|
||||
});
|
||||
if (!r.ok) throw new Error(`composeAction: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export interface AutoUpdatePolicy {
|
||||
enabled: boolean;
|
||||
interval_minutes: number;
|
||||
last_checked_at: string | null;
|
||||
last_updated_at: string | null;
|
||||
}
|
||||
|
||||
export async function getAutoUpdatePolicy(agentId: string, containerId: string): Promise<AutoUpdatePolicy> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/containers/${containerId}/auto-update`);
|
||||
if (!r.ok) throw new Error(`getAutoUpdatePolicy: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export async function setAutoUpdatePolicy(
|
||||
agentId: string,
|
||||
containerId: string,
|
||||
policy: Pick<AutoUpdatePolicy, "enabled" | "interval_minutes">
|
||||
): Promise<AutoUpdatePolicy> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/containers/${containerId}/auto-update`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(policy),
|
||||
});
|
||||
if (!r.ok) throw new Error(`setAutoUpdatePolicy: ${r.status}`);
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export async function updateNow(agentId: string, containerId: string): Promise<{ command_id: string }> {
|
||||
const r = await apiFetch(`${BASE}/agents/${agentId}/containers/${containerId}/update-now`, {
|
||||
method: "POST",
|
||||
});
|
||||
if (!r.ok) {
|
||||
const text = await r.text().catch(() => "");
|
||||
throw new Error(text || `updateNow: ${r.status}`);
|
||||
}
|
||||
return r.json();
|
||||
}
|
||||
|
||||
export function connectEvents(
|
||||
onEvent: (evt: { type: string; agent_id?: string; payload: unknown }) => void
|
||||
): () => void {
|
||||
|
||||
@ -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}
|
||||
|
||||
649
web/src/routes/compose/+page.svelte
Normal file
649
web/src/routes/compose/+page.svelte
Normal file
@ -0,0 +1,649 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { EditorState } from '@codemirror/state';
|
||||
import { EditorView, keymap, lineNumbers } from '@codemirror/view';
|
||||
import { defaultKeymap, indentWithTab } from '@codemirror/commands';
|
||||
import { yaml } from '@codemirror/lang-yaml';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
import { indentUnit } from '@codemirror/language';
|
||||
import { bracketMatching } from '@codemirror/language';
|
||||
import { fetchAgents, fsList, fsRead, fsWrite, composeAction, fsMkdir, type Agent } from '$lib/api';
|
||||
import { clearToken } from '$lib/auth';
|
||||
|
||||
// ── Auth ──────────────────────────────────────────────────────────────────
|
||||
function logout() {
|
||||
clearToken();
|
||||
goto('/login');
|
||||
}
|
||||
|
||||
// ── Toast ─────────────────────────────────────────────────────────────────
|
||||
let toast = $state<{ msg: string; ok: boolean } | null>(null);
|
||||
function showToast(msg: string, ok: boolean) {
|
||||
toast = { msg, ok };
|
||||
setTimeout(() => (toast = null), 3500);
|
||||
}
|
||||
|
||||
// ── Agents ────────────────────────────────────────────────────────────────
|
||||
let agents = $state<Agent[]>([]);
|
||||
let selectedAgentId = $state<string>('');
|
||||
const selectedAgent = $derived(agents.find(a => a.id === selectedAgentId) ?? null);
|
||||
|
||||
// ── File browser ──────────────────────────────────────────────────────────
|
||||
let currentPath = $state('/opt');
|
||||
let dirEntries = $state<{ name: string; is_dir: boolean; has_compose: boolean }[]>([]);
|
||||
let filePath = $state('');
|
||||
let browseError = $state<string | null>(null);
|
||||
let browseLoading = $state(false);
|
||||
|
||||
const breadcrumbs = $derived(() => {
|
||||
const parts = currentPath.split('/').filter(Boolean);
|
||||
const crumbs: { label: string; path: string }[] = [{ label: '/', path: '/' }];
|
||||
let built = '';
|
||||
for (const p of parts) {
|
||||
built += '/' + p;
|
||||
crumbs.push({ label: p, path: built });
|
||||
}
|
||||
return crumbs;
|
||||
});
|
||||
|
||||
function entryFullPath(name: string): string {
|
||||
return currentPath === '/' ? '/' + name : currentPath + '/' + name;
|
||||
}
|
||||
|
||||
function isComposeName(name: string): boolean {
|
||||
return name === 'docker-compose.yaml' || name === 'docker-compose.yml'
|
||||
|| name === 'compose.yaml' || name === 'compose.yml';
|
||||
}
|
||||
|
||||
async function browse(path: string) {
|
||||
if (!selectedAgentId) return;
|
||||
browseLoading = true;
|
||||
browseError = null;
|
||||
try {
|
||||
const entries = await fsList(selectedAgentId, path);
|
||||
// dirs first (α), then files (α)
|
||||
dirEntries = entries.sort((a, b) => {
|
||||
if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
currentPath = path;
|
||||
// auto-suggest compose file if present in this directory
|
||||
const compose = entries.find(e => !e.is_dir && isComposeName(e.name));
|
||||
if (compose) {
|
||||
filePath = (path === '/' ? '' : path) + '/' + compose.name;
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
browseError = e instanceof Error ? e.message : String(e);
|
||||
dirEntries = [];
|
||||
} finally {
|
||||
browseLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function selectFile(name: string) {
|
||||
filePath = entryFullPath(name);
|
||||
await openFile();
|
||||
}
|
||||
|
||||
function navigateUp() {
|
||||
if (currentPath === '/') return;
|
||||
const parent = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
|
||||
browse(parent);
|
||||
}
|
||||
|
||||
// ── Nouveau dossier ───────────────────────────────────────────────────────
|
||||
let mkdirInputVisible = $state(false);
|
||||
let mkdirName = $state('');
|
||||
let mkdirPending = $state(false);
|
||||
|
||||
function showMkdirInput() {
|
||||
mkdirName = '';
|
||||
mkdirInputVisible = true;
|
||||
}
|
||||
|
||||
function cancelMkdir() {
|
||||
mkdirInputVisible = false;
|
||||
mkdirName = '';
|
||||
}
|
||||
|
||||
async function confirmMkdir() {
|
||||
const name = mkdirName.trim();
|
||||
if (!name || !selectedAgentId) return;
|
||||
const fullPath = currentPath === '/' ? '/' + name : currentPath + '/' + name;
|
||||
mkdirPending = true;
|
||||
try {
|
||||
await fsMkdir(selectedAgentId, fullPath);
|
||||
mkdirInputVisible = false;
|
||||
mkdirName = '';
|
||||
await browse(currentPath);
|
||||
showToast('Dossier créé', true);
|
||||
} catch (e: unknown) {
|
||||
showToast(e instanceof Error ? e.message : String(e), false);
|
||||
} finally {
|
||||
mkdirPending = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onMkdirKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter') confirmMkdir();
|
||||
if (e.key === 'Escape') cancelMkdir();
|
||||
}
|
||||
|
||||
async function openFile() {
|
||||
if (!selectedAgentId || !filePath) return;
|
||||
isLoading = true;
|
||||
try {
|
||||
// Try exact path first, then fallback alternatives
|
||||
let content: string;
|
||||
try {
|
||||
content = await fsRead(selectedAgentId, filePath);
|
||||
} catch {
|
||||
// Try yml variant
|
||||
const altPath = filePath.replace(/\.yaml$/, '.yml').replace(/\.yml$/, '.yaml');
|
||||
try {
|
||||
content = await fsRead(selectedAgentId, altPath);
|
||||
filePath = altPath;
|
||||
} catch {
|
||||
throw new Error(`Fichier non trouvé : ${filePath}`);
|
||||
}
|
||||
}
|
||||
setContent(content);
|
||||
composeOutput = '';
|
||||
showToast('Fichier chargé', true);
|
||||
} catch (e: unknown) {
|
||||
showToast(e instanceof Error ? e.message : String(e), false);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── CodeMirror ────────────────────────────────────────────────────────────
|
||||
let editorEl = $state<HTMLDivElement | null>(null);
|
||||
let view: EditorView | null = null;
|
||||
let isLoading = $state(false);
|
||||
let actionPending = $state<string | null>(null);
|
||||
let composeOutput = $state('');
|
||||
|
||||
onMount(async () => {
|
||||
// Load agents
|
||||
try {
|
||||
const all = await fetchAgents();
|
||||
agents = all.filter(a => a.online);
|
||||
if (agents.length > 0) {
|
||||
selectedAgentId = agents[0].id;
|
||||
browse(currentPath);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
showToast(e instanceof Error ? e.message : String(e), false);
|
||||
}
|
||||
|
||||
// Init CodeMirror
|
||||
view = new EditorView({
|
||||
state: EditorState.create({
|
||||
doc: '',
|
||||
extensions: [
|
||||
lineNumbers(),
|
||||
yaml(),
|
||||
oneDark,
|
||||
indentUnit.of(' '),
|
||||
bracketMatching(),
|
||||
keymap.of([...defaultKeymap, indentWithTab]),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.theme({
|
||||
'&': { height: '100%', minHeight: '500px' },
|
||||
'.cm-scroller': { overflow: 'auto', fontFamily: '"JetBrains Mono", "Fira Code", ui-monospace, monospace', fontSize: '13px' },
|
||||
}),
|
||||
],
|
||||
}),
|
||||
parent: editorEl!,
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => view?.destroy());
|
||||
|
||||
function getContent(): string {
|
||||
return view?.state.doc.toString() ?? '';
|
||||
}
|
||||
|
||||
function setContent(text: string) {
|
||||
if (!view) return;
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: text },
|
||||
});
|
||||
}
|
||||
|
||||
// ── Agent change ──────────────────────────────────────────────────────────
|
||||
function onAgentChange() {
|
||||
dirEntries = [];
|
||||
currentPath = '/opt';
|
||||
filePath = '';
|
||||
composeOutput = '';
|
||||
if (selectedAgentId) browse('/opt');
|
||||
}
|
||||
|
||||
// ── Actions ───────────────────────────────────────────────────────────────
|
||||
async function save() {
|
||||
if (!selectedAgentId || !filePath) {
|
||||
showToast('Sélectionnez un agent et un chemin de fichier', false);
|
||||
return;
|
||||
}
|
||||
actionPending = 'save';
|
||||
try {
|
||||
await fsWrite(selectedAgentId, filePath, getContent());
|
||||
showToast('Fichier sauvegardé', true);
|
||||
} catch (e: unknown) {
|
||||
showToast(e instanceof Error ? e.message : String(e), false);
|
||||
} finally {
|
||||
actionPending = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function runCompose(action: 'up' | 'down' | 'pull') {
|
||||
if (!selectedAgentId || !filePath) {
|
||||
showToast('Sélectionnez un agent et un chemin de fichier', false);
|
||||
return;
|
||||
}
|
||||
const dir = filePath.substring(0, filePath.lastIndexOf('/')) || '/';
|
||||
actionPending = action;
|
||||
composeOutput = '';
|
||||
try {
|
||||
const result = await composeAction(selectedAgentId, dir, action);
|
||||
composeOutput = result.output;
|
||||
showToast(result.ok ? `compose ${action} terminé` : `compose ${action} a échoué`, result.ok);
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
composeOutput = msg;
|
||||
showToast(msg, false);
|
||||
} finally {
|
||||
actionPending = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Compose — Containarr</title>
|
||||
</svelte:head>
|
||||
|
||||
<!-- Toast -->
|
||||
{#if toast}
|
||||
<div class="fixed top-4 right-4 z-50 flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm
|
||||
font-medium shadow-2xl border transition-all
|
||||
{toast.ok
|
||||
? 'bg-abyss-800 border-signal-green/30 text-signal-green'
|
||||
: 'bg-abyss-800 border-signal-red/30 text-signal-red'}">
|
||||
<span class="w-1.5 h-1.5 rounded-full {toast.ok ? 'bg-signal-green' : 'bg-signal-red'}"></span>
|
||||
{toast.msg}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200 flex flex-col">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="glass sticky top-0 z-40 px-5 py-3 flex items-center gap-3 shrink-0">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<img src="/icon-192.png" alt="Containarr" class="w-6 h-6 rounded-md" />
|
||||
<span class="font-semibold text-slate-100 tracking-tight">Containarr</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center gap-1">
|
||||
<a href="/" class="nav-btn" title="Dashboard">
|
||||
<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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</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"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button onclick={logout} class="nav-btn" title="Déconnexion">
|
||||
<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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page title bar -->
|
||||
<div class="border-b border-white/[0.06] bg-abyss-900/80 px-4 md:px-6 py-3 shrink-0">
|
||||
<div class="max-w-screen-2xl mx-auto flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-cyan-400 shrink-0" 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>
|
||||
<span class="text-sm font-medium text-slate-300">Éditeur Compose</span>
|
||||
{#if selectedAgent}
|
||||
<span class="text-xs text-slate-600 ml-1">— {selectedAgent.alias || selectedAgent.hostname}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content: sidebar + editor -->
|
||||
<div class="flex-1 flex flex-col md:flex-row overflow-hidden max-w-screen-2xl w-full mx-auto p-4 md:p-6 gap-4">
|
||||
|
||||
<!-- ── Sidebar ─────────────────────────────────────────────────────────── -->
|
||||
<aside class="w-full md:w-72 shrink-0 flex flex-col gap-3">
|
||||
|
||||
<!-- Agent selector -->
|
||||
<div class="card p-3 flex flex-col gap-2">
|
||||
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider" for="agent-select">Agent</label>
|
||||
{#if agents.length === 0}
|
||||
<p class="text-xs text-slate-600 italic">Aucun agent en ligne</p>
|
||||
{:else}
|
||||
<select
|
||||
id="agent-select"
|
||||
bind:value={selectedAgentId}
|
||||
onchange={onAgentChange}
|
||||
class="w-full bg-abyss-800 border border-white/[0.08] rounded-lg px-3 py-2
|
||||
text-sm text-slate-200 focus:outline-none focus:border-cyan-400/40
|
||||
focus:ring-1 focus:ring-cyan-400/20 transition-colors"
|
||||
>
|
||||
{#each agents as agent (agent.id)}
|
||||
<option value={agent.id}>{agent.alias || agent.hostname}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Directory browser -->
|
||||
<div class="card p-3 flex flex-col gap-2 flex-1 min-h-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Navigateur</span>
|
||||
{#if browseLoading}
|
||||
<div class="w-3.5 h-3.5 border border-cyan-400/40 border-t-cyan-400 rounded-full animate-spin"></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="flex flex-wrap items-center gap-0.5 text-xs font-mono">
|
||||
{#each breadcrumbs() as crumb, i}
|
||||
{#if i > 1}
|
||||
<span class="text-slate-700">/</span>
|
||||
{/if}
|
||||
<button
|
||||
onclick={() => browse(crumb.path)}
|
||||
class="text-cyan-400/70 hover:text-cyan-400 transition-colors px-0.5 rounded
|
||||
{i === breadcrumbs().length - 1 ? 'text-cyan-400 font-semibold' : ''}"
|
||||
>
|
||||
{crumb.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Up button -->
|
||||
<button
|
||||
onclick={navigateUp}
|
||||
disabled={currentPath === '/'}
|
||||
class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium
|
||||
bg-white/[0.04] hover:bg-white/[0.08] text-slate-400 border border-white/[0.06]
|
||||
disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<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="M5 10l7-7m0 0l7 7m-7-7v18" />
|
||||
</svg>
|
||||
Remonter
|
||||
</button>
|
||||
|
||||
<!-- Nouveau dossier -->
|
||||
{#if mkdirInputVisible}
|
||||
<div class="flex items-center gap-1.5">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={mkdirName}
|
||||
onkeydown={onMkdirKeydown}
|
||||
placeholder="nom-du-dossier"
|
||||
disabled={mkdirPending}
|
||||
class="flex-1 min-w-0 bg-abyss-800 border border-cyan-400/30 rounded-md px-2 py-1
|
||||
text-xs font-mono text-slate-200 placeholder-slate-600
|
||||
focus:outline-none focus:border-cyan-400/60 focus:ring-1 focus:ring-cyan-400/20
|
||||
disabled:opacity-50 transition-colors"
|
||||
/>
|
||||
<button
|
||||
onclick={confirmMkdir}
|
||||
disabled={mkdirPending || !mkdirName.trim()}
|
||||
title="Valider"
|
||||
class="flex items-center justify-center w-6 h-6 rounded text-signal-green
|
||||
hover:bg-signal-green/10 disabled:opacity-40 disabled:cursor-not-allowed
|
||||
transition-colors shrink-0"
|
||||
>
|
||||
{#if mkdirPending}
|
||||
<div class="w-3 h-3 border border-signal-green/40 border-t-signal-green rounded-full animate-spin"></div>
|
||||
{:else}
|
||||
✓
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
onclick={cancelMkdir}
|
||||
title="Annuler"
|
||||
class="flex items-center justify-center w-6 h-6 rounded text-slate-500
|
||||
hover:text-slate-300 hover:bg-white/[0.06] transition-colors shrink-0"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
onclick={showMkdirInput}
|
||||
disabled={!selectedAgentId}
|
||||
title="Nouveau dossier"
|
||||
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs
|
||||
text-slate-400 hover:text-slate-200 hover:bg-white/[0.05]
|
||||
disabled:opacity-30 disabled:cursor-not-allowed transition-colors self-start"
|
||||
>
|
||||
<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="1.75"
|
||||
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
Nouveau dossier
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Error -->
|
||||
{#if browseError}
|
||||
<p class="text-xs text-signal-red/80 font-mono break-all">{browseError}</p>
|
||||
{/if}
|
||||
|
||||
<!-- File browser list -->
|
||||
<div class="flex-1 overflow-y-auto min-h-[120px] max-h-72 space-y-0.5">
|
||||
{#if dirEntries.length === 0 && !browseLoading && !browseError}
|
||||
<p class="text-xs text-slate-600 italic py-2 px-1">Dossier vide</p>
|
||||
{/if}
|
||||
{#each dirEntries as entry (entry.name)}
|
||||
{#if entry.is_dir}
|
||||
<!-- Directory: navigate into -->
|
||||
<button
|
||||
onclick={() => browse(entryFullPath(entry.name))}
|
||||
class="flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-xs
|
||||
text-slate-300 hover:text-slate-100 hover:bg-white/[0.06] transition-colors font-mono"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5 shrink-0 {entry.has_compose ? 'text-cyan-400' : 'text-cyan-400/50'}"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
|
||||
d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
|
||||
</svg>
|
||||
<span class="truncate flex-1">{entry.name}</span>
|
||||
{#if entry.has_compose}
|
||||
<span class="shrink-0 text-[10px] px-1 py-0.5 rounded bg-cyan-400/15
|
||||
text-cyan-400 border border-cyan-400/25 leading-none">compose</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<!-- File: select and open -->
|
||||
<button
|
||||
onclick={() => selectFile(entry.name)}
|
||||
disabled={isLoading}
|
||||
class="flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-xs
|
||||
transition-colors font-mono disabled:opacity-40
|
||||
{isComposeName(entry.name)
|
||||
? 'text-cyan-300 hover:text-cyan-100 hover:bg-cyan-400/[0.06]'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'}"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5 shrink-0 {isComposeName(entry.name) ? 'text-cyan-400' : 'text-slate-600'}"
|
||||
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>
|
||||
<span class="truncate flex-1">{entry.name}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Open button -->
|
||||
<button
|
||||
onclick={openFile}
|
||||
disabled={!selectedAgentId || !filePath || isLoading}
|
||||
class="flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium
|
||||
bg-cyan-400/10 hover:bg-cyan-400/20 text-cyan-400 border border-cyan-400/25
|
||||
disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{#if isLoading}
|
||||
<div class="w-3 h-3 border border-cyan-400/40 border-t-cyan-400 rounded-full animate-spin"></div>
|
||||
Chargement…
|
||||
{:else}
|
||||
<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="1.75"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
Ouvrir
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- File path input -->
|
||||
<div class="card p-3 flex flex-col gap-2">
|
||||
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider" for="file-path">Chemin du fichier</label>
|
||||
<input
|
||||
id="file-path"
|
||||
type="text"
|
||||
bind:value={filePath}
|
||||
placeholder="/opt/stacks/nginx/docker-compose.yaml"
|
||||
class="w-full bg-abyss-800 border border-white/[0.08] rounded-lg px-3 py-2
|
||||
text-xs font-mono text-slate-200 placeholder-slate-700
|
||||
focus:outline-none focus:border-cyan-400/40 focus:ring-1 focus:ring-cyan-400/20
|
||||
transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- ── Editor area ─────────────────────────────────────────────────────── -->
|
||||
<div class="flex-1 flex flex-col gap-3 min-w-0">
|
||||
|
||||
<!-- CodeMirror editor -->
|
||||
<div class="card flex-1 overflow-hidden flex flex-col min-h-[500px]">
|
||||
<div
|
||||
bind:this={editorEl}
|
||||
class="flex-1 overflow-hidden [&_.cm-editor]:h-full [&_.cm-editor]:outline-none
|
||||
[&_.cm-focused]:outline-none"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Action bar -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<!-- Save -->
|
||||
<button
|
||||
onclick={save}
|
||||
disabled={actionPending !== null}
|
||||
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
|
||||
bg-signal-cyan/10 hover:bg-signal-cyan/20 text-signal-cyan border border-signal-cyan/25
|
||||
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{#if actionPending === 'save'}
|
||||
<div class="w-3.5 h-3.5 border border-signal-cyan/40 border-t-signal-cyan rounded-full animate-spin"></div>
|
||||
{:else}
|
||||
<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="1.75"
|
||||
d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
|
||||
</svg>
|
||||
{/if}
|
||||
Sauvegarder
|
||||
</button>
|
||||
|
||||
<!-- Up -->
|
||||
<button
|
||||
onclick={() => runCompose('up')}
|
||||
disabled={actionPending !== null}
|
||||
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
|
||||
bg-signal-green/10 hover:bg-signal-green/20 text-signal-green border border-signal-green/25
|
||||
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{#if actionPending === 'up'}
|
||||
<div class="w-3.5 h-3.5 border border-signal-green/40 border-t-signal-green rounded-full animate-spin"></div>
|
||||
{:else}
|
||||
<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="1.75" d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
||||
</svg>
|
||||
{/if}
|
||||
Up
|
||||
</button>
|
||||
|
||||
<!-- Down -->
|
||||
<button
|
||||
onclick={() => runCompose('down')}
|
||||
disabled={actionPending !== null}
|
||||
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
|
||||
bg-white/[0.05] hover:bg-signal-red/10 text-signal-red border border-signal-red/20
|
||||
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{#if actionPending === 'down'}
|
||||
<div class="w-3.5 h-3.5 border border-signal-red/40 border-t-signal-red rounded-full animate-spin"></div>
|
||||
{:else}
|
||||
<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="1.75" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
{/if}
|
||||
Down
|
||||
</button>
|
||||
|
||||
<!-- Pull -->
|
||||
<button
|
||||
onclick={() => runCompose('pull')}
|
||||
disabled={actionPending !== null}
|
||||
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
|
||||
bg-white/[0.05] hover:bg-white/[0.09] text-slate-400 border border-white/[0.08]
|
||||
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{#if actionPending === 'pull'}
|
||||
<div class="w-3.5 h-3.5 border border-slate-500/40 border-t-slate-400 rounded-full animate-spin"></div>
|
||||
{:else}
|
||||
<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="1.75"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
{/if}
|
||||
Pull
|
||||
</button>
|
||||
|
||||
{#if actionPending && actionPending !== 'save'}
|
||||
<span class="text-xs text-slate-500 ml-1">Exécution de compose {actionPending}…</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Output area -->
|
||||
{#if composeOutput}
|
||||
<div class="card p-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Sortie</span>
|
||||
<button
|
||||
onclick={() => (composeOutput = '')}
|
||||
class="text-xs text-slate-600 hover:text-slate-400 transition-colors"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
<pre class="text-xs font-mono text-slate-300 overflow-y-auto max-h-48 leading-relaxed
|
||||
bg-abyss-950 rounded-lg p-3 border border-white/[0.04] whitespace-pre-wrap break-all">{composeOutput}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user