feat: add volume management features including file upload, download, and clear actions
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Jakub Dorfman
parent
e3e910c9cd
commit
9b0c3aa190
3 changed files with 379 additions and 1 deletions
|
|
@ -365,12 +365,26 @@ const api = {
|
|||
backup: (n) => api.request(`/apps/${n}/backup`, "POST"),
|
||||
restore: (n, f) => api.request(`/apps/${n}/restore`, "POST", { file: f }),
|
||||
renderRoute: (n) => api.request(`/apps/${n}/render-route`, "POST"),
|
||||
clearVolume: (n) => api.request(`/apps/${n}/volume-clear`, "POST"),
|
||||
getVolumeFiles: (n, p) => api.request(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`),
|
||||
deleteFile: (n, p) => api.request(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`, "DELETE"),
|
||||
uploadFile: async (n, p, f) => {
|
||||
const res = await fetch(`/apps/${n}/volume/files?path=${encodeURIComponent(p)}`, {
|
||||
method: "PUT",
|
||||
body: f,
|
||||
headers: { "Content-Length": f.size.toString() }
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || "upload failed");
|
||||
return data;
|
||||
},
|
||||
};
|
||||
|
||||
// ─── State ───
|
||||
let apps = [];
|
||||
let expandedApp = null;
|
||||
let activeTab = {}; // { appName: tabName }
|
||||
let volumeLocations = {}; // { appName: currentPathString }
|
||||
|
||||
// ─── Status bar ───
|
||||
const statusEl = document.getElementById("status");
|
||||
|
|
@ -474,6 +488,7 @@ function renderAppCard(app) {
|
|||
<div class="tabs">
|
||||
<button class="tab active" data-tab="compose" data-app="${app.name}">Compose</button>
|
||||
<button class="tab" data-tab="logs" data-app="${app.name}">Logs</button>
|
||||
<button class="tab" data-tab="volumes" data-app="${app.name}">Volumes</button>
|
||||
<button class="tab" data-tab="backups" data-app="${app.name}">Backups</button>
|
||||
<button class="tab" data-tab="routing" data-app="${app.name}">Routing</button>
|
||||
</div>
|
||||
|
|
@ -497,6 +512,18 @@ function renderAppCard(app) {
|
|||
</div>
|
||||
<div class="log-output" id="logs-${app.name}">Click "Refresh Logs" to load.</div>
|
||||
</div>
|
||||
<div class="tab-panel" id="tab-volumes-${app.name}">
|
||||
<div class="btn-group" style="margin-bottom:10px;">
|
||||
<button class="btn-sm btn-primary" data-action="volume-refresh" data-app="${app.name}">Refresh Files</button>
|
||||
<button class="btn-sm" data-action="volume-upload" data-app="${app.name}">Upload</button>
|
||||
<button class="btn-sm btn-danger" data-action="volume-clear" data-app="${app.name}">Clear Volume</button>
|
||||
</div>
|
||||
<input type="file" id="volume-upload-input-${app.name}" style="display:none;" />
|
||||
<div style="margin-bottom:8px;font-size:0.85rem;" id="volume-path-${app.name}">/</div>
|
||||
<div class="backup-list" id="volumes-${app.name}">
|
||||
<div style="color:var(--muted);font-size:.85rem;">Click "Refresh Files" to load volume browser.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-panel" id="tab-backups-${app.name}">
|
||||
<div class="btn-group" style="margin-bottom:10px;">
|
||||
<button class="btn-sm btn-primary" data-action="create-backup" data-app="${app.name}">Create Backup</button>
|
||||
|
|
@ -568,11 +595,13 @@ function attachCardListeners() {
|
|||
// Update panels
|
||||
document.getElementById(`tab-compose-${app}`).classList.toggle("active", tabName === "compose");
|
||||
document.getElementById(`tab-logs-${app}`).classList.toggle("active", tabName === "logs");
|
||||
document.getElementById(`tab-volumes-${app}`).classList.toggle("active", tabName === "volumes");
|
||||
document.getElementById(`tab-backups-${app}`).classList.toggle("active", tabName === "backups");
|
||||
document.getElementById(`tab-routing-${app}`).classList.toggle("active", tabName === "routing");
|
||||
|
||||
if (tabName === "logs") loadLogs(app);
|
||||
if (tabName === "backups") loadBackups(app);
|
||||
if (tabName === "volumes") loadVolume(app, "");
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -655,6 +684,36 @@ async function handleAction(action, name, btnElement) {
|
|||
await api.renderRoute(name);
|
||||
setStatus(`Route rendered for ${name}.`);
|
||||
break;
|
||||
case "volume-refresh":
|
||||
const curPath = volumeLocations[name] || "";
|
||||
await loadVolume(name, curPath);
|
||||
break;
|
||||
case "volume-clear":
|
||||
if (confirm("Are you sure? This deletes ALL data inside the volume right now!")) {
|
||||
setStatus(`Clearing volume for ${name}...`);
|
||||
await api.clearVolume(name);
|
||||
setStatus(`Volume cleared for ${name}.`);
|
||||
await loadVolume(name, "");
|
||||
}
|
||||
break;
|
||||
case "volume-upload":
|
||||
const uploadInput = document.getElementById(`volume-upload-input-${name}`);
|
||||
uploadInput.onchange = async (e) => {
|
||||
if (!e.target.files.length) return;
|
||||
const file = e.target.files[0];
|
||||
const uploadPath = (volumeLocations[name] ? volumeLocations[name] + "/" : "") + file.name;
|
||||
try {
|
||||
setStatus(`Uploading ${file.name} to ${name}...`);
|
||||
await api.uploadFile(name, uploadPath, file);
|
||||
setStatus(`Uploaded ${file.name} successfully.`);
|
||||
await loadVolume(name, volumeLocations[name] || "");
|
||||
} catch(uploadErr) {
|
||||
setStatus(`Upload failed: ${uploadErr.message}`, true);
|
||||
}
|
||||
uploadInput.value = "";
|
||||
};
|
||||
uploadInput.click();
|
||||
break;
|
||||
case "fetch-routing":
|
||||
setStatus(`Fetching routing details for ${name}...`);
|
||||
const appRes = await api.getApp(name);
|
||||
|
|
@ -760,6 +819,125 @@ async function loadLogs(name) {
|
|||
}
|
||||
}
|
||||
|
||||
window.api = api; // Expose for inline html onclicks
|
||||
|
||||
async function loadVolume(name, currentPath) {
|
||||
volumeLocations[name] = currentPath;
|
||||
const pathLabel = currentPath ? currentPath : "/";
|
||||
document.getElementById(`volume-path-${name}`).innerHTML = `
|
||||
<span>${escHtml(pathLabel)}</span>
|
||||
`;
|
||||
|
||||
try {
|
||||
const data = await api.getVolumeFiles(name, currentPath);
|
||||
const container = document.getElementById(`volumes-${name}`);
|
||||
container.innerHTML = "";
|
||||
|
||||
if (currentPath) {
|
||||
const upPath = currentPath.split("/").slice(0, -1).join("/");
|
||||
const item = document.createElement("div");
|
||||
item.className = "backup-item";
|
||||
item.style.cursor = "pointer";
|
||||
item.onclick = () => loadVolume(name, upPath);
|
||||
item.innerHTML = `
|
||||
<div style="flex:1;color:var(--accent);font-weight:bold;">
|
||||
📁 ..
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(item);
|
||||
}
|
||||
|
||||
if (!data.files || data.files.length === 0) {
|
||||
const msg = document.createElement("div");
|
||||
msg.style.color = "var(--muted)";
|
||||
msg.style.padding = "10px";
|
||||
msg.textContent = "Directory is empty.";
|
||||
container.appendChild(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
data.files.forEach(f => {
|
||||
const fullPath = currentPath ? currentPath + "/" + f.name : f.name;
|
||||
const item = document.createElement("div");
|
||||
item.className = "backup-item";
|
||||
item.style.gap = "8px";
|
||||
|
||||
const icon = f.is_dir ? "📁" : "📄";
|
||||
const sizeStr = f.is_dir ? "" : (f.size > 1024 * 1024 ? (f.size / 1024 / 1024).toFixed(1) + "MB" : (f.size / 1024).toFixed(1) + "KB");
|
||||
|
||||
const titleDiv = document.createElement("div");
|
||||
titleDiv.style.flex = "1";
|
||||
titleDiv.style.display = "flex";
|
||||
titleDiv.style.alignItems = "center";
|
||||
titleDiv.style.minWidth = "0";
|
||||
|
||||
const spanIcon = document.createElement("span");
|
||||
spanIcon.style.marginRight = "8px";
|
||||
spanIcon.style.fontSize = "1.2rem";
|
||||
spanIcon.textContent = icon;
|
||||
|
||||
const spanName = document.createElement("span");
|
||||
spanName.style.fontFamily = "monospace";
|
||||
spanName.style.fontSize = "0.85rem";
|
||||
spanName.style.whiteSpace = "nowrap";
|
||||
spanName.style.overflow = "hidden";
|
||||
spanName.style.textOverflow = "ellipsis";
|
||||
spanName.textContent = f.name;
|
||||
if (f.is_dir) {
|
||||
spanName.style.cursor = "pointer";
|
||||
spanName.style.color = "var(--accent)";
|
||||
spanName.onclick = () => loadVolume(name, fullPath);
|
||||
}
|
||||
|
||||
titleDiv.appendChild(spanIcon);
|
||||
titleDiv.appendChild(spanName);
|
||||
|
||||
const sizeDiv = document.createElement("div");
|
||||
sizeDiv.style.color = "var(--muted)";
|
||||
sizeDiv.style.fontSize = "0.8rem";
|
||||
sizeDiv.style.whiteSpace = "nowrap";
|
||||
sizeDiv.style.width = "60px";
|
||||
sizeDiv.style.textAlign = "right";
|
||||
sizeDiv.textContent = sizeStr;
|
||||
|
||||
const actionsDiv = document.createElement("div");
|
||||
actionsDiv.style.display = "flex";
|
||||
actionsDiv.style.gap = "4px";
|
||||
|
||||
if (!f.is_dir) {
|
||||
const downloadBtn = document.createElement("button");
|
||||
downloadBtn.className = "btn-sm";
|
||||
downloadBtn.style.padding = "2px 6px";
|
||||
downloadBtn.style.fontSize = "0.75rem";
|
||||
downloadBtn.textContent = "⬇️";
|
||||
downloadBtn.onclick = () => window.open(`/apps/${name}/volume/download?path=${encodeURIComponent(fullPath)}`);
|
||||
actionsDiv.appendChild(downloadBtn);
|
||||
}
|
||||
|
||||
const delBtn = document.createElement("button");
|
||||
delBtn.className = "btn-sm btn-danger";
|
||||
delBtn.style.padding = "2px 6px";
|
||||
delBtn.style.fontSize = "0.75rem";
|
||||
delBtn.textContent = "🗑️";
|
||||
delBtn.onclick = async () => {
|
||||
if (confirm(`Delete ${f.name}?`)) {
|
||||
await window.api.deleteFile(name, fullPath);
|
||||
loadVolume(name, currentPath);
|
||||
}
|
||||
};
|
||||
actionsDiv.appendChild(delBtn);
|
||||
|
||||
item.appendChild(titleDiv);
|
||||
item.appendChild(sizeDiv);
|
||||
item.appendChild(actionsDiv);
|
||||
|
||||
container.appendChild(item);
|
||||
});
|
||||
} catch (err) {
|
||||
document.getElementById(`volumes-${name}`).textContent = "Failed to load files: " + err.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBackups(name) {
|
||||
const el = document.getElementById(`backups-${name}`);
|
||||
if (!el) return;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue