Rework Dashboard, add toasts, container folders/icons/WebUI links, detail tabs
Dashboard: - Plain-count stat tiles (Running/Stopped/Pods/Images/Volumes/Networks) separated from a single "Resource Usage" card (CPU/Memory/Swap/Storage meter rows) instead of forcing both into one tile grid, which produced awkward spanning-tile/dead-cell layouts. - Fixed CPU usage never changing (libpod's own cpuUtilization is computed once and never resampled) by computing it from /proc/stat deltas instead. - Fixed memory usage reading far too high by using /proc/meminfo's MemAvailable instead of libpod's raw (non-reclaimable-aware) memFree. - Added an Autostart Queue table reusing podman-autostart.sh's own failure-counter files. - Dashboard and Containers now auto-refresh every ~2s (paused when the tab is hidden or a modal is open). Toasts: - Real success/warn/error/info toast notifications replacing every alert() used for one-way feedback, across every panel. Container detail modal: - 5 new tabs: Resources, Logs, Console, Events, Healthcheck. Containers panel: - Folders to group containers (name + icon), stored in the plugin's own folders.json — a folder's header always shows an icon+name+status chip per member, matching Unraid's own Docker page folders. "Move to Folder" becomes "Remove from Folder" once a container is already grouped. - Containers can carry an icon URL and a WebUI URL (small button next to the name), both stored as container labels and auto-filled from templates where applicable. - Settings: an "Add container" control for the Autostart order table. Fixes: - Context menus now measure their own rendered size and flip above the anchor when there isn't room below, instead of running off-screen. - Containers table now uses table-layout:fixed with explicit column widths — auto layout was shifting every column (and the header) on every folder expand/collapse, and briefly again when a flex wrapper was mistakenly placed directly on a <td>. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -87,11 +87,30 @@ function podman_asset_version(string $relPath): string
|
||||
<section class="podman-panel active" id="podman-panel-dashboard">
|
||||
<div class="podman-grid podman-stat-grid">
|
||||
<div class="podman-stat"><div class="label">Running</div><div class="value tnum"><span id="stat-running">—</span> <small id="stat-running-total"></small></div></div>
|
||||
<div class="podman-stat"><div class="label">Stopped</div><div class="value tnum" id="stat-stopped">—</div></div>
|
||||
<div class="podman-stat"><div class="label">Pods</div><div class="value tnum" id="stat-pods">—</div></div>
|
||||
<div class="podman-stat"><div class="label">Images</div><div class="value tnum" id="stat-images">—</div></div>
|
||||
<div class="podman-stat"><div class="label">Volumes</div><div class="value tnum" id="stat-volumes">—</div></div>
|
||||
<div class="podman-stat"><div class="label">Networks</div><div class="value tnum" id="stat-networks">—</div></div>
|
||||
<div class="podman-stat"><div class="label">Images on Disk</div><div class="value tnum" id="stat-images-size">—</div></div>
|
||||
</div>
|
||||
|
||||
<div class="podman-card" style="margin-top: 14px;">
|
||||
<div class="podman-card-head">
|
||||
<div><h2>Resource Usage</h2><div class="sub">Live CPU, memory, swap, and storage from the Podman host.</div></div>
|
||||
</div>
|
||||
<div class="podman-card-pad" id="dashboard-resource-rows">—</div>
|
||||
</div>
|
||||
|
||||
<div class="podman-card" style="margin-top: 14px;" id="dashboard-autostart-card">
|
||||
<div class="podman-card-head">
|
||||
<div><h2>Autostart Queue</h2><div class="sub">/boot/config/plugins/podman/autostart</div></div>
|
||||
</div>
|
||||
<div class="podman-table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>#</th><th>Container</th><th>Delay</th><th>Last Result</th></tr></thead>
|
||||
<tbody id="dashboard-autostart-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -106,12 +125,21 @@ function podman_asset_version(string $relPath): string
|
||||
<button data-filter="stopped" id="containers-count-stopped">Stopped</button>
|
||||
</div>
|
||||
<button class="podman-btn podman-btn-primary" id="containers-check-updates-btn" style="margin-left:auto;">Check for Updates</button>
|
||||
<button class="podman-btn podman-btn-primary" id="containers-update-all-btn">Update All</button>
|
||||
<button class="podman-btn podman-btn-primary" id="containers-update-all-btn" title="Also removes the old image versions this leaves unused">Update All</button>
|
||||
<button class="podman-btn" id="containers-new-folder-btn">+ New Folder</button>
|
||||
<button class="podman-btn podman-btn-primary" id="containers-create-btn">+ New Container</button>
|
||||
</div>
|
||||
<div class="podman-table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>Status</th><th>Name</th><th>Image</th><th>CPU/Mem</th><th>Ports</th><th>Uptime</th><th></th></tr></thead>
|
||||
<table id="containers-table">
|
||||
<thead><tr>
|
||||
<th style="width:10%;">Status</th>
|
||||
<th style="width:20%;">Name</th>
|
||||
<th style="width:26%;">Image</th>
|
||||
<th style="width:12%;">CPU/Mem</th>
|
||||
<th style="width:16%;">Ports</th>
|
||||
<th style="width:8%;">Uptime</th>
|
||||
<th style="width:8%;"></th>
|
||||
</tr></thead>
|
||||
<tbody id="containers-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -316,13 +344,17 @@ function podman_asset_version(string $relPath): string
|
||||
<div class="podman-field-row">
|
||||
<label>Autostart order</label>
|
||||
<div>
|
||||
<div class="podman-term-launcher">
|
||||
<label>Add container <select class="podman-term-select" id="autostart-add-select"><option value="">All containers already added</option></select></label>
|
||||
<button class="podman-btn podman-btn-primary" id="autostart-add-btn">+ Add to Autostart</button>
|
||||
</div>
|
||||
<div class="podman-table-wrap">
|
||||
<table>
|
||||
<thead><tr><th>#</th><th>Container</th><th></th></tr></thead>
|
||||
<tbody id="autostart-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="hint">Saved immediately on reorder/remove — no separate save step.</div>
|
||||
<div class="hint">Saved immediately on add/reorder/remove — no separate save step.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user