Files
unraid-podman/webui/plugins/podman/javascript/networks.js
T
maggesandClaude Sonnet 5 5b47b4cc0a Add catatonit/nftables/docker-compose packages, fix CSRF/streaming/storage bugs found by live testing
- 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>
2026-07-12 11:51:17 +00:00

78 lines
2.7 KiB
JavaScript

/**
* javascript/networks.js
*
* Networks panel: table + create/remove, backed by ajax/networks.php.
*/
(function () {
'use strict';
const P = window.Podman;
let networks = [];
function rowHtml(n) {
const nameCell = n.isDefault
? '<strong>' + P.escapeHtml(n.name) + '</strong> <span class="podman-row-sub">(default)</span>'
: P.escapeHtml(n.name);
const removeDisabled = n.isDefault || n.containers > 0;
return '' +
'<tr data-name="' + P.escapeHtml(n.name) + '">' +
'<td>' + nameCell + '</td>' +
'<td><span class="podman-chip podman-chip-neutral">' + P.escapeHtml(n.driver) + '</span></td>' +
'<td class="mono">' + P.escapeHtml(n.subnet || '&mdash;') + '</td>' +
'<td class="mono">' + P.escapeHtml(n.gateway || '&mdash;') + '</td>' +
'<td class="tnum">' + n.containers + '</td>' +
'<td class="podman-actions"><button class="podman-btn podman-btn-icon" data-action="remove"' +
(removeDisabled ? ' disabled' : '') + ' title="Remove">&#128465;</button></td>' +
'</tr>';
}
function render() {
const tbody = P.el('networks-tbody');
tbody.innerHTML = networks.length
? networks.map(rowHtml).join('')
: '<tr><td colspan="6" class="podman-empty-note">No networks.</td></tr>';
}
function load() {
const tbody = P.el('networks-tbody');
tbody.innerHTML = P.loadingRow(6);
return P.get('networks', 'list').then(function (data) {
networks = data;
render();
}).catch(function (err) {
tbody.innerHTML = P.errorRow(6, err.message);
});
}
function init() {
P.el('networks-create-btn').addEventListener('click', function () {
P.openFormModal({
title: 'New Network',
submitLabel: 'Create',
fields: [
{ name: 'name', label: 'Network name', required: true, placeholder: 'my-network' },
{ name: 'subnet', label: 'Subnet (optional)', placeholder: '10.89.2.0/24' },
],
onSubmit: function (values) {
return P.post('networks', 'create', { name: values.name, driver: 'bridge', subnet: values.subnet || undefined }).then(load);
},
});
});
P.el('networks-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 network "' + name + '"?')) return;
btn.disabled = true;
P.post('networks', 'remove', { name: name }).then(load).catch(function (err) {
alert('Remove failed: ' + err.message);
btn.disabled = false;
});
});
return load();
}
P.registerPanel('networks', { init: init, refresh: load });
})();