maggesandClaude Sonnet 5
5b47b4cc0a
- Package #9-11: catatonit (pod infra init), nftables (netavark firewall backend), docker-compose (external compose provider for `podman compose`) — all vendored prebuilt binaries, versions.env pinned, propagated through build-packages.sh/release.sh/podman.plg/verify+update-packages.sh. - Fix WebUI: every POST action was silently failing (empty response body) because Unraid's own CSRF protection was never satisfied — app.js now sends the page's csrf_token as X-CSRF-Token. - Fix WebUI: PodmanClient::pullImage() assumed a single JSON response, but /images/pull actually streams newline-delimited JSON — every successful pull was throwing "Expected a JSON object/array response". - Fix WebUI: compose.php's up/down status detection had the same single-JSON-vs-NDJSON bug for `podman compose ps`, plus stderr was corrupting the parse. - Add cache-busting (?v=<mtime>) to Podman.page's script/style tags so a redeployed JS/CSS fix isn't served stale from browser cache. - Add a reusable modal dialog (app.js openFormModal) replacing prompt()/alert() for New Volume/Network/Pull Image. - Add host-path (bind-mount) support when creating a named volume. - Add Create Container (image, name, network mode incl. custom networks, ports, volumes, env, restart policy, privileged, start-after-create), auto-pulling the image on first use since /containers/create doesn't. All fixes verified live against a real podman system service and, where reachable, via the actual WebUI over the real socket — not just unit-level. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
/**
|
|
* javascript/images.js
|
|
*
|
|
* Images panel: table + a "Pull Image" action, backed by ajax/images.php.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
const P = window.Podman;
|
|
let images = [];
|
|
|
|
function rowHtml(img) {
|
|
const created = img.createdAt ? P.formatRelativeTime(img.createdAt) : '—';
|
|
return '' +
|
|
'<tr data-id="' + P.escapeHtml(img.id) + '">' +
|
|
'<td>' + P.escapeHtml(img.repository) + '</td>' +
|
|
'<td class="mono">' + P.escapeHtml(img.tag) + '</td>' +
|
|
'<td class="mono podman-row-sub">' + P.escapeHtml(img.shortId) + '</td>' +
|
|
'<td class="tnum">' + P.escapeHtml(img.sizeFormatted) + '</td>' +
|
|
'<td class="tnum">' + created + '</td>' +
|
|
'<td class="tnum">' + img.usedBy + '</td>' +
|
|
'<td class="podman-actions"><button class="podman-btn podman-btn-icon" data-action="remove"' +
|
|
(img.usedBy > 0 ? ' disabled title="In use by a container"' : ' title="Remove"') + '>🗑</button></td>' +
|
|
'</tr>';
|
|
}
|
|
|
|
function render() {
|
|
const tbody = P.el('images-tbody');
|
|
tbody.innerHTML = images.length
|
|
? images.map(rowHtml).join('')
|
|
: '<tr><td colspan="7" class="podman-empty-note">No images.</td></tr>';
|
|
}
|
|
|
|
function load() {
|
|
const tbody = P.el('images-tbody');
|
|
tbody.innerHTML = P.loadingRow(7);
|
|
return P.get('images', 'list').then(function (data) {
|
|
images = data;
|
|
render();
|
|
}).catch(function (err) {
|
|
tbody.innerHTML = P.errorRow(7, err.message);
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
P.el('images-pull-btn').addEventListener('click', function () {
|
|
P.openFormModal({
|
|
title: 'Pull Image',
|
|
submitLabel: 'Pull',
|
|
fields: [
|
|
{ name: 'reference', label: 'Image reference', required: true, placeholder: 'docker.io/library/postgres:16' },
|
|
],
|
|
onSubmit: function (values) {
|
|
return P.post('images', 'pull', { reference: values.reference }).then(load);
|
|
},
|
|
});
|
|
});
|
|
|
|
P.el('images-tbody').addEventListener('click', function (e) {
|
|
const btn = e.target.closest('button[data-action="remove"]');
|
|
if (!btn || btn.disabled) return;
|
|
const id = btn.closest('tr').dataset.id;
|
|
if (!confirm('Remove this image?')) return;
|
|
btn.disabled = true;
|
|
P.post('images', 'remove', { id: id }).then(load).catch(function (err) {
|
|
alert('Remove failed: ' + err.message);
|
|
btn.disabled = false;
|
|
});
|
|
});
|
|
|
|
return load();
|
|
}
|
|
|
|
P.registerPanel('images', { init: init, refresh: load });
|
|
})();
|