maggesandClaude Sonnet 5
8ac9cde621
Pods panel could previously only list pods - there was no way to create
one, start/stop/restart it, or attach a container to it from the UI.
Adds a "New Pod" modal (name + port mappings), a per-pod lifecycle menu
(start/stop/restart/remove), and an optional "Pod" field on the Create
Container modal to join an existing pod's network namespace. Backend
verified live against the real podman socket (/pods/create, /pods/{name}/
restart, container "pod" field).
Also fixes three real bugs found via live testing:
- Podman.page used Menu="Podman" instead of Menu="Tasks:<rank>", so the
plugin never actually appeared in Unraid's top navigation (traced through
PageBuilder.php/DefaultPageLayout.php/Navigation/Main.php - only pages
registered under "Tasks" become top-level tabs).
- app.js's shared context-menu component mis-mapped every item positioned
after a 'separator' entry to the wrong DOM element (an off-by-one against
menu.children, which includes the separator <div>s) - so "Remove", which
always sits after a separator, silently did nothing when clicked. Fixed
by indexing into querySelectorAll('button') instead.
- That same menu was positioned via "position: absolute" math that assumed
a viewport-relative containing block, but Unraid's own page wrapper
(webGui/styles/default-base.css's ".content") sets position:relative,
so the menu rendered far from its anchor button. Switched to
"position: fixed" with viewport-relative coordinates.
Incidentally, pods add a hidden "infra" container that was leaking into
the plain Containers list with no working lifecycle of its own (always
"running", so its own Remove was permanently disabled) - now filtered out
via libpod's IsInfra flag. And every action-buttons table cell used
"display: flex" directly on the <td>, which browsers can size
inconsistently row to row - moved onto an inner wrapper div instead, and
bumped .podman-btn-icon's touch target size.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
78 lines
2.7 KiB
JavaScript
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 || '—') + '</td>' +
|
|
'<td class="mono">' + P.escapeHtml(n.gateway || '—') + '</td>' +
|
|
'<td class="tnum">' + n.containers + '</td>' +
|
|
'<td class="podman-actions"><div class="podman-actions-row"><button class="podman-btn podman-btn-icon" data-action="remove"' +
|
|
(removeDisabled ? ' disabled' : '') + ' title="Remove">🗑</button></div></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 });
|
|
})();
|