Add reproducible build system, native Unraid plugin, and WebUI
- versions.env pins podman, conmon, crun, netavark, aardvark-dns, passt, and fuse-overlayfs to verified upstream source checksums; SlackBuild recipes, scripts/build-packages.sh, checksums.sh, release.sh, and update-versions.sh implement the reproducible pipeline; GitHub Actions workflows build in a Slackware container and publish releases without committing any binaries. - plugin/podman.plg installs/updates/removes all eight packages (the seven components plus the plugin's own unraid-podman scaffolding package) via upgradepkg, using the official Unraid array-event hook mechanism (event/disks_mounted, event/stopping) instead of editing /boot/config/go. rc.podman and the sbin/ helper scripts implement storage creation, config seeding/sync, preflight checks, autostart with per-container Safe-Mode, and package verify/update/rollback. - webui/plugins/podman implements the Dashboard, Containers, Pods, Images, Volumes, Networks, Logs, Terminal, Compose, and Settings panels against the approved mockup (webui/mockups/prototype.html), talking to podman system service exclusively via PodmanClient.php (libpod REST API over the Unix socket), with two documented exceptions: Terminal's one-shot exec model and Compose's use of the podman compose CLI, since libpod has no REST equivalent for either. - docs/ARCHITECTURE.md and docs/ROADMAP.md record the design decisions and honest current status (syntax-checked, unit- and integration-tested against fake sockets/servers; not yet run against a real Unraid/Podman/Slackware system). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* javascript/containers.js
|
||||
*
|
||||
* Containers panel: table of all containers with lifecycle actions
|
||||
* (start/stop/restart/remove), backed entirely by ajax/containers.php.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
const P = window.Podman;
|
||||
let allContainers = [];
|
||||
let filter = 'all';
|
||||
let searchTerm = '';
|
||||
|
||||
function iconLabel(name) {
|
||||
return P.escapeHtml(name.slice(0, 2).toUpperCase());
|
||||
}
|
||||
|
||||
function rowHtml(c) {
|
||||
const cpuMem = c.state === 'running'
|
||||
? '<span class="podman-row-sub">running</span>'
|
||||
: '<span class="podman-row-sub">—</span>';
|
||||
|
||||
return '' +
|
||||
'<tr data-id="' + P.escapeHtml(c.id) + '">' +
|
||||
'<td><span class="podman-chip ' + P.stateChipClass(c.state) + '"><span class="d"></span>' + P.escapeHtml(c.health || c.state) + '</span></td>' +
|
||||
'<td><div class="podman-row-name"><span class="ico">' + iconLabel(c.name) + '</span>' + P.escapeHtml(c.name) + '</div></td>' +
|
||||
'<td class="mono podman-row-sub">' + P.escapeHtml(c.image) + '</td>' +
|
||||
'<td>' + cpuMem + '</td>' +
|
||||
'<td class="mono podman-row-sub">' + P.escapeHtml(c.ports.join(', ') || '—') + '</td>' +
|
||||
'<td class="tnum">' + P.formatDuration(c.uptimeSeconds) + '</td>' +
|
||||
'<td class="podman-actions">' + actionButtons(c) + '</td>' +
|
||||
'</tr>';
|
||||
}
|
||||
|
||||
function actionButtons(c) {
|
||||
if (c.state === 'running') {
|
||||
return '' +
|
||||
'<button class="podman-btn podman-btn-icon" data-action="restart" title="Restart">↻</button>' +
|
||||
'<button class="podman-btn podman-btn-icon" data-action="stop" title="Stop">■</button>' +
|
||||
'<button class="podman-btn podman-btn-icon" data-action="remove" title="Remove" disabled>🗑</button>';
|
||||
}
|
||||
return '' +
|
||||
'<button class="podman-btn podman-btn-icon" data-action="start" title="Start">▶</button>' +
|
||||
'<button class="podman-btn podman-btn-icon" data-action="remove" title="Remove">🗑</button>';
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
return allContainers.filter(function (c) {
|
||||
if (filter === 'running' && c.state !== 'running') return false;
|
||||
if (filter === 'stopped' && c.state === 'running') return false;
|
||||
if (searchTerm && c.name.toLowerCase().indexOf(searchTerm) === -1 && c.image.toLowerCase().indexOf(searchTerm) === -1) return false;
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const tbody = P.el('containers-tbody');
|
||||
const visible = applyFilters();
|
||||
tbody.innerHTML = visible.length
|
||||
? visible.map(rowHtml).join('')
|
||||
: '<tr><td colspan="7" class="podman-empty-note">No containers match.</td></tr>';
|
||||
}
|
||||
|
||||
function renderCounts() {
|
||||
const running = allContainers.filter(function (c) { return c.state === 'running'; }).length;
|
||||
P.el('containers-count-all').textContent = 'All ' + allContainers.length;
|
||||
P.el('containers-count-running').textContent = 'Running ' + running;
|
||||
P.el('containers-count-stopped').textContent = 'Stopped ' + (allContainers.length - running);
|
||||
}
|
||||
|
||||
function load() {
|
||||
const tbody = P.el('containers-tbody');
|
||||
tbody.innerHTML = P.loadingRow(7);
|
||||
return P.get('containers', 'list').then(function (data) {
|
||||
allContainers = data;
|
||||
renderCounts();
|
||||
renderTable();
|
||||
}).catch(function (err) {
|
||||
tbody.innerHTML = P.errorRow(7, err.message);
|
||||
});
|
||||
}
|
||||
|
||||
function handleAction(id, action, btn) {
|
||||
const doIt = function (extra) {
|
||||
btn.disabled = true;
|
||||
return P.post('containers', action, Object.assign({ id: id }, extra)).then(load).catch(function (err) {
|
||||
alert('Action failed: ' + err.message);
|
||||
btn.disabled = false;
|
||||
});
|
||||
};
|
||||
if (action === 'remove') {
|
||||
if (!confirm('Remove this container? This does not remove its volumes.')) return;
|
||||
doIt({ force: true });
|
||||
} else {
|
||||
doIt({});
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
P.el('containers-search').addEventListener('input', function (e) {
|
||||
searchTerm = e.target.value.trim().toLowerCase();
|
||||
renderTable();
|
||||
});
|
||||
|
||||
document.querySelectorAll('#containers-filterset button').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
document.querySelectorAll('#containers-filterset button').forEach(function (b) { b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
filter = btn.dataset.filter;
|
||||
renderTable();
|
||||
});
|
||||
});
|
||||
|
||||
P.el('containers-tbody').addEventListener('click', function (e) {
|
||||
const btn = e.target.closest('button[data-action]');
|
||||
if (!btn || btn.disabled) return;
|
||||
const row = btn.closest('tr');
|
||||
handleAction(row.dataset.id, btn.dataset.action, btn);
|
||||
});
|
||||
|
||||
return load();
|
||||
}
|
||||
|
||||
P.registerPanel('containers', { init: init, refresh: load });
|
||||
})();
|
||||
Reference in New Issue
Block a user