reudy-net/panel
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance volume management with support for multiple volumes and improved API endpoints

Browse source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Jakub Dorfman 2026-04-28 23:43:17 +02:00
parent 9b0c3aa190
commit e7c0b56473
3 changed files with 133 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

76
frontend/index.html
View file

@ -366,10 +366,11 @@ const api = {
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)}`, {
getVolumes: (n) => api.request(`/apps/${n}/volumes`),
getVolumeFiles: (n, p, v) => api.request(`/apps/${n}/volume/files?vol=${encodeURIComponent(v || "default")}&path=${encodeURIComponent(p)}`),
deleteFile: (n, p, v) => api.request(`/apps/${n}/volume/files?vol=${encodeURIComponent(v || "default")}&path=${encodeURIComponent(p)}`, "DELETE"),
uploadFile: async (n, p, v, f) => {
const res = await fetch(`/apps/${n}/volume/files?vol=${encodeURIComponent(v || "default")}&path=${encodeURIComponent(p)}`, {
method: "PUT",
body: f,
headers: { "Content-Length": f.size.toString() }
@ -385,6 +386,7 @@ let apps = [];
let expandedApp = null;
let activeTab = {}; // { appName: tabName }
let volumeLocations = {}; // { appName: currentPathString }
let selectedVolumes = {}; // { appName: currentVolumeString }
// ─── Status bar ───
const statusEl = document.getElementById("status");
@ -513,10 +515,11 @@ function renderAppCard(app) {
<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;">
<div class="btn-group" style="margin-bottom:10px; align-items:center;">
<select id="volume-select-${app.name}" style="width:140px;padding:4px 8px;font-size:0.8rem;"></select>
<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>
<button class="btn-sm btn-danger" data-action="volume-clear" data-app="${app.name}" id="btn-vol-clear-${app.name}">Clear Bind</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>
@ -601,7 +604,7 @@ function attachCardListeners() {
if (tabName === "logs") loadLogs(app);
if (tabName === "backups") loadBackups(app);
if (tabName === "volumes") loadVolume(app, "");
if (tabName === "volumes") initVolumesTab(app);
};
});
@ -686,14 +689,18 @@ async function handleAction(action, name, btnElement) {
break;
case "volume-refresh":
const curPath = volumeLocations[name] || "";
await loadVolume(name, curPath);
await loadVolume(name, curPath, selectedVolumes[name]);
break;
case "volume-clear":
if (confirm("Are you sure? This deletes ALL data inside the volume right now!")) {
if (selectedVolumes[name] && selectedVolumes[name] !== "default") {
setStatus("Clear is only supported for the 'default' managed local bind right now.", true);
break;
}
if (confirm("Are you sure? This deletes ALL data inside the default volume right now!")) {
setStatus(`Clearing volume for ${name}...`);
await api.clearVolume(name);
setStatus(`Volume cleared for ${name}.`);
await loadVolume(name, "");
await loadVolume(name, "", selectedVolumes[name]);
}
break;
case "volume-upload":
@ -704,9 +711,9 @@ async function handleAction(action, name, btnElement) {
const uploadPath = (volumeLocations[name] ? volumeLocations[name] + "/" : "") + file.name;
try {
setStatus(`Uploading ${file.name} to ${name}...`);
await api.uploadFile(name, uploadPath, file);
await api.uploadFile(name, uploadPath, selectedVolumes[name], file);
setStatus(`Uploaded ${file.name} successfully.`);
await loadVolume(name, volumeLocations[name] || "");
await loadVolume(name, volumeLocations[name] || "", selectedVolumes[name]);
} catch(uploadErr) {
setStatus(`Upload failed: ${uploadErr.message}`, true);
}
@ -821,7 +828,38 @@ async function loadLogs(name) {
window.api = api; // Expose for inline html onclicks
async function loadVolume(name, currentPath) {
async function initVolumesTab(name) {
if (!selectedVolumes[name]) {
try {
const vdata = await api.getVolumes(name);
const sel = document.getElementById(`volume-select-${name}`);
sel.innerHTML = "";
Object.keys(vdata.volumes).forEach(vKey => {
const opt = document.createElement("option");
opt.value = vKey;
opt.textContent = vKey;
sel.appendChild(opt);
});
selectedVolumes[name] = sel.value || "default";
sel.onchange = () => {
selectedVolumes[name] = sel.value;
const btnClear = document.getElementById(`btn-vol-clear-${name}`);
if(btnClear) btnClear.style.display = sel.value === "default" ? "inline-block" : "none";
loadVolume(name, "", sel.value);
};
const btnClear = document.getElementById(`btn-vol-clear-${name}`);
if(btnClear) btnClear.style.display = selectedVolumes[name] === "default" ? "inline-block" : "none";
} catch(err) {
console.error(err);
selectedVolumes[name] = "default";
}
}
loadVolume(name, "", selectedVolumes[name]);
}
async function loadVolume(name, currentPath, volName) {
volumeLocations[name] = currentPath;
const pathLabel = currentPath ? currentPath : "/";
document.getElementById(`volume-path-${name}`).innerHTML = `
@ -829,7 +867,7 @@ async function loadVolume(name, currentPath) {
`;
try {
const data = await api.getVolumeFiles(name, currentPath);
const data = await api.getVolumeFiles(name, currentPath, volName);
const container = document.getElementById(`volumes-${name}`);
container.innerHTML = "";
@ -838,7 +876,7 @@ async function loadVolume(name, currentPath) {
const item = document.createElement("div");
item.className = "backup-item";
item.style.cursor = "pointer";
item.onclick = () => loadVolume(name, upPath);
item.onclick = () => loadVolume(name, upPath, volName);
item.innerHTML = `
<div style="flex:1;color:var(--accent);font-weight:bold;">
📁 ..
@ -886,7 +924,7 @@ async function loadVolume(name, currentPath) {
if (f.is_dir) {
spanName.style.cursor = "pointer";
spanName.style.color = "var(--accent)";
spanName.onclick = () => loadVolume(name, fullPath);
spanName.onclick = () => loadVolume(name, fullPath, volName);
}
titleDiv.appendChild(spanIcon);
@ -910,7 +948,7 @@ async function loadVolume(name, currentPath) {
downloadBtn.style.padding = "2px 6px";
downloadBtn.style.fontSize = "0.75rem";
downloadBtn.textContent = "⬇️";
downloadBtn.onclick = () => window.open(`/apps/${name}/volume/download?path=${encodeURIComponent(fullPath)}`);
downloadBtn.onclick = () => window.open(`/apps/${name}/volume/download?vol=${encodeURIComponent(volName)}&path=${encodeURIComponent(fullPath)}`);
actionsDiv.appendChild(downloadBtn);
}
@ -921,8 +959,8 @@ async function loadVolume(name, currentPath) {
delBtn.textContent = "🗑️";
delBtn.onclick = async () => {
if (confirm(`Delete ${f.name}?`)) {
await window.api.deleteFile(name, fullPath);
loadVolume(name, currentPath);
await window.api.deleteFile(name, fullPath, volName);
loadVolume(name, currentPath, volName);
}
};
actionsDiv.appendChild(delBtn);