Files
unraid-podman/webui/plugins/podman/javascript/settings.js
T
maggesandClaude Sonnet 5 8ac9cde621 Add Pod lifecycle management, fix nav registration and context-menu bugs
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>
2026-07-12 16:26:49 +00:00

96 lines
3.8 KiB
JavaScript

/**
* javascript/settings.js
*
* Settings panel: reads/writes unraid-podman's own configuration via
* ajax/settings.php (podman.cfg + the autostart list) — not a
* PodmanClient/libpod concern, see that file's header comment.
*/
(function () {
'use strict';
const P = window.Podman;
let autostartNames = [];
function renderAutostart() {
const tbody = P.el('autostart-tbody');
tbody.innerHTML = autostartNames.length
? autostartNames.map(function (name, i) {
return '<tr data-index="' + i + '">' +
'<td class="tnum">' + (i + 1) + '</td>' +
'<td>' + P.escapeHtml(name) + '</td>' +
'<td class="podman-actions"><div class="podman-actions-row">' +
'<button class="podman-btn podman-btn-icon" data-action="up"' + (i === 0 ? ' disabled' : '') + ' title="Move up">&#8593;</button>' +
'<button class="podman-btn podman-btn-icon" data-action="down"' + (i === autostartNames.length - 1 ? ' disabled' : '') + ' title="Move down">&#8595;</button>' +
'<button class="podman-btn podman-btn-icon" data-action="remove" title="Remove from autostart">&#128465;</button>' +
'</div></td></tr>';
}).join('')
: '<tr><td colspan="3" class="podman-empty-note">No containers in the autostart chain.</td></tr>';
}
function saveAutostart() {
return P.post('settings', 'autostart_save', { names: autostartNames }).catch(function (err) {
alert('Could not save autostart order: ' + err.message);
});
}
function fillForm(settings) {
P.el('settings-storage-path').value = settings.storagePath;
P.el('settings-storage-size').value = settings.storageImageSizeGb;
P.el('settings-enabled').checked = settings.enabled;
P.el('settings-stop-timeout').value = settings.stopTimeoutSeconds;
autostartNames = settings.autostart.slice();
renderAutostart();
const versions = settings.packageVersions || {};
const order = ['PODMAN', 'CONMON', 'CRUN', 'NETAVARK', 'AARDVARK_DNS', 'PASST', 'FUSE_OVERLAYFS'];
P.el('settings-package-versions').textContent = order
.map(function (k) { return k.toLowerCase().replace('_', '-') + ' ' + (versions[k + '_INSTALLED_VERSION'] || '?'); })
.join(' · ');
}
function load() {
return P.get('settings', 'get').then(fillForm).catch(function (err) {
alert('Could not load settings: ' + err.message);
});
}
function save() {
const body = {
storagePath: P.el('settings-storage-path').value.trim(),
storageImageSizeGb: parseInt(P.el('settings-storage-size').value, 10) || 20,
enabled: P.el('settings-enabled').checked,
stopTimeoutSeconds: parseInt(P.el('settings-stop-timeout').value, 10) || 10,
};
return P.post('settings', 'save', body).then(function () {
alert('Saved. Restart podman (rc.podman restart) to apply storage/enabled changes.');
}).catch(function (err) {
alert('Save failed: ' + err.message);
});
}
function init() {
P.el('settings-save-btn').addEventListener('click', save);
P.el('autostart-tbody').addEventListener('click', function (e) {
const btn = e.target.closest('button[data-action]');
if (!btn) return;
const i = parseInt(btn.closest('tr').dataset.index, 10);
const action = btn.dataset.action;
if (action === 'remove') {
autostartNames.splice(i, 1);
} else if (action === 'up' && i > 0) {
[autostartNames[i - 1], autostartNames[i]] = [autostartNames[i], autostartNames[i - 1]];
} else if (action === 'down' && i < autostartNames.length - 1) {
[autostartNames[i + 1], autostartNames[i]] = [autostartNames[i], autostartNames[i + 1]];
}
renderAutostart();
saveAutostart();
});
return load();
}
P.registerPanel('settings', { init: init, refresh: load });
})();