Terminal panel now opens a genuinely interactive shell (ttyd bound to a unix socket, proxied through Unraid's own /logterminal/ nginx location — the same mechanism Unraid's own Docker "Console" button uses) instead of one-shot exec calls, shown inline with a Disconnect action; bash is the default shell. Container/shell selectors and action buttons are now correctly bottom-aligned (root cause: Unraid's theme puts a 10px margin on every <button>, never reset before). Destructive actions (Disconnect, Compose/Template Delete, Volumes/Images/ Networks Remove) get a consistent, solid red treatment at rest instead of only tinting on hover, via new --bad-strong/--bad-contrast tokens. Settings panel restructured: a real save toolbar instead of a button buried in an empty-label row, card subtitles, a toggle switch instead of a bare checkbox, and installed-package versions shown as chips. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
86 lines
3.3 KiB
JavaScript
86 lines
3.3 KiB
JavaScript
/**
|
|
* javascript/volumes.js
|
|
*
|
|
* Volumes panel: named-volume table + create/remove, backed by
|
|
* ajax/volumes.php. Container-level bind mounts (e.g. appdata under
|
|
* /mnt/user/appdata/...) are deliberately not shown here, since they
|
|
* aren't a libpod-managed resource at all — see that file's header
|
|
* comment. A named volume created here WITH a host path (v.hostPath) IS
|
|
* still a real, listed podman volume, just backed by that path instead
|
|
* of podman's own internal storage — see PodmanClient::createVolume().
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
const P = window.Podman;
|
|
let volumes = [];
|
|
|
|
function rowHtml(v) {
|
|
const pathCell = v.hostPath
|
|
? P.escapeHtml(v.hostPath) + ' <span class="podman-chip podman-chip-neutral" title="Bind-mounted to this host path">bind</span>'
|
|
: P.escapeHtml(v.mountpoint);
|
|
return '' +
|
|
'<tr data-name="' + P.escapeHtml(v.name) + '">' +
|
|
'<td>' + P.escapeHtml(v.name) + '</td>' +
|
|
'<td><span class="podman-chip podman-chip-neutral">' + P.escapeHtml(v.driver) + '</span></td>' +
|
|
'<td class="mono podman-row-sub">' + pathCell + '</td>' +
|
|
'<td class="tnum">' + v.usedBy + '</td>' +
|
|
'<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon podman-btn-danger" data-action="remove"' +
|
|
(v.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>🗑</button></div></td>' +
|
|
'</tr>';
|
|
}
|
|
|
|
function render() {
|
|
const tbody = P.el('volumes-tbody');
|
|
tbody.innerHTML = volumes.length
|
|
? volumes.map(rowHtml).join('')
|
|
: '<tr><td colspan="5" class="podman-empty-note">No named volumes.</td></tr>';
|
|
}
|
|
|
|
function load() {
|
|
const tbody = P.el('volumes-tbody');
|
|
tbody.innerHTML = P.loadingRow(5);
|
|
return P.get('volumes', 'list').then(function (data) {
|
|
volumes = data;
|
|
render();
|
|
}).catch(function (err) {
|
|
tbody.innerHTML = P.errorRow(5, err.message);
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
P.el('volumes-create-btn').addEventListener('click', function () {
|
|
P.openFormModal({
|
|
title: 'New Volume',
|
|
submitLabel: 'Create',
|
|
fields: [
|
|
{ name: 'name', label: 'Volume name', required: true, placeholder: 'my-volume' },
|
|
{
|
|
name: 'path', label: 'Host path (optional)', placeholder: '/mnt/cache/appdata/my-volume',
|
|
hint: 'Leave empty for a podman-managed volume. Set this to bind the volume ' +
|
|
'directly to an existing directory on disk (e.g. a cache pool path) instead.',
|
|
},
|
|
],
|
|
onSubmit: function (values) {
|
|
return P.post('volumes', 'create', { name: values.name, path: values.path || undefined }).then(load);
|
|
},
|
|
});
|
|
});
|
|
|
|
P.el('volumes-tbody').addEventListener('click', function (e) {
|
|
const btn = e.target.closest('button[data-action="remove"]');
|
|
if (!btn || btn.disabled) return;
|
|
const name = btn.closest('tr').dataset.name;
|
|
if (!confirm('Remove volume "' + name + '"? This deletes its data.')) return;
|
|
btn.disabled = true;
|
|
P.post('volumes', 'remove', { name: name }).then(load).catch(function (err) {
|
|
alert('Remove failed: ' + err.message);
|
|
btn.disabled = false;
|
|
});
|
|
});
|
|
|
|
return load();
|
|
}
|
|
|
|
P.registerPanel('volumes', { init: init, refresh: load });
|
|
})();
|