snxraven/peardock
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Improve container details UX, dashboard shortcuts, and RPC rate limits.
Release rolling / release (push) Successful in 8m38s
Details

Browse Source 
Tighten container detail tabs into a fit-to-viewport layout with a richer
overview, debounced process filters, and a readable process table. Make
dashboard KPI cards navigate to resource views (with status filters that
reset on leave), and raise per-peer RPC limits so normal UI polling no
longer trips rate limiting.
This commit is contained in:
Raven Scott
2026-07-13 17:25:14 -04:00
parent f943ea92c2
commit 9680437fab
6 changed files with 2303 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+116 -38
View File
@@ -350,40 +350,40 @@
</div>
</header>
<!-- KPI strip -->
<!-- KPI strip — clickable shortcuts into resource views -->
<section class="dash-kpis" aria-label="Workload summary">
<article class="dash-kpi dash-kpi--ok">
<button type="button" class="dash-kpi dash-kpi--ok dash-kpi--link" data-dash-nav="containers" data-container-status="running" title="View running containers" aria-label="View running containers">
<div class="dash-kpi-icon"><i class="fas fa-play"></i></div>
<div class="dash-kpi-meta">
<span class="dash-kpi-label">Running</span>
<span class="dash-kpi-value" id="stat-running-containers">0</span>
</div>
<div class="dash-kpi-glow" aria-hidden="true"></div>
</article>
<article class="dash-kpi dash-kpi--stop">
</button>
<button type="button" class="dash-kpi dash-kpi--stop dash-kpi--link" data-dash-nav="containers" data-container-status="exited" title="View stopped containers" aria-label="View stopped containers">
<div class="dash-kpi-icon"><i class="fas fa-stop"></i></div>
<div class="dash-kpi-meta">
<span class="dash-kpi-label">Stopped</span>
<span class="dash-kpi-value" id="stat-stopped-containers">0</span>
</div>
<div class="dash-kpi-glow" aria-hidden="true"></div>
</article>
<article class="dash-kpi dash-kpi--info">
</button>
<button type="button" class="dash-kpi dash-kpi--info dash-kpi--link" data-dash-nav="images" title="View images" aria-label="View images">
<div class="dash-kpi-icon"><i class="fas fa-layer-group"></i></div>
<div class="dash-kpi-meta">
<span class="dash-kpi-label">Images</span>
<span class="dash-kpi-value" id="stat-total-images">0</span>
</div>
<div class="dash-kpi-glow" aria-hidden="true"></div>
</article>
<article class="dash-kpi dash-kpi--teal">
</button>
<button type="button" class="dash-kpi dash-kpi--teal dash-kpi--link" data-dash-nav="networks" title="View networks" aria-label="View networks">
<div class="dash-kpi-icon"><i class="fas fa-diagram-project"></i></div>
<div class="dash-kpi-meta">
<span class="dash-kpi-label">Networks</span>
<span class="dash-kpi-value" id="stat-total-networks">0</span>
</div>
<div class="dash-kpi-glow" aria-hidden="true"></div>
</article>
</button>
</section>
<!-- Main panels -->
@@ -1170,10 +1170,10 @@
<!-- Container Details View -->
<div id="container-details-view" class="view hidden">
<div class="container-fluid">
<div class="d-flex align-items-center mb-4">
<button class="btn btn-outline-secondary me-3" onclick="navigateToView('containers')">
<i class="fas fa-arrow-left me-2"></i>Back to Containers
<div class="container-fluid container-details-layout">
<div class="container-details-header">
<button class="btn btn-outline-secondary btn-sm" onclick="navigateToView('containers')">
<i class="fas fa-arrow-left me-2"></i>Back
</button>
<h2 class="mb-0" id="container-details-title">
<i class="fas fa-box me-2"></i>Container Details
@@ -1181,49 +1181,49 @@
</div>
<!-- Container Details Tabs -->
<ul class="nav nav-tabs mb-4" id="container-details-tabs" role="tablist">
<ul class="nav nav-tabs container-details-tabs" id="container-details-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview-pane" type="button" role="tab">
<i class="fas fa-info-circle me-2"></i>Overview
<i class="fas fa-info-circle me-1"></i>Overview
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-pane" type="button" role="tab">
<i class="fas fa-list-alt me-2"></i>Logs
<i class="fas fa-list-alt me-1"></i>Logs
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="terminal-tab" data-bs-toggle="tab" data-bs-target="#terminal-pane" type="button" role="tab">
<i class="fas fa-terminal me-2"></i>Terminal
<i class="fas fa-terminal me-1"></i>Terminal
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="stats-tab" data-bs-toggle="tab" data-bs-target="#stats-pane" type="button" role="tab">
<i class="fas fa-chart-line me-2"></i>Stats
<i class="fas fa-chart-line me-1"></i>Stats
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="processes-tab" data-bs-toggle="tab" data-bs-target="#processes-pane" type="button" role="tab">
<i class="fas fa-microchip me-2"></i>Processes
<i class="fas fa-microchip me-1"></i>Processes
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="config-tab" data-bs-toggle="tab" data-bs-target="#config-pane" type="button" role="tab">
<i class="fas fa-cog me-2"></i>Configuration
<i class="fas fa-cog me-1"></i>Configuration
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="networking-tab" data-bs-toggle="tab" data-bs-target="#networking-pane" type="button" role="tab">
<i class="fas fa-network-wired me-2"></i>Networking
<i class="fas fa-network-wired me-1"></i>Networking
</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="container-details-tab-content">
<div class="tab-content container-details-tab-content" id="container-details-tab-content">
<!-- Overview Pane -->
<div class="tab-pane fade show active" id="overview-pane" role="tabpanel">
<div id="container-overview-content" class="info-card">
<div id="container-overview-content" class="detail-tab-body">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text mt-2"></div>
</div>
@@ -1231,7 +1231,7 @@
<!-- Logs Pane -->
<div class="tab-pane fade" id="logs-pane" role="tabpanel">
<div class="detail-section-card" style="padding: 0;">
<div class="detail-fill-panel">
<!-- Logs Toolbar -->
<div class="logs-toolbar">
<div class="logs-toolbar-left">
@@ -1287,7 +1287,7 @@
<!-- Terminal Pane -->
<div class="tab-pane fade" id="terminal-pane" role="tabpanel">
<div class="detail-section-card" style="padding: 0;">
<div class="detail-fill-panel">
<!-- Terminal Toolbar -->
<div class="terminal-toolbar">
<div class="terminal-toolbar-left">
@@ -1337,8 +1337,8 @@
<!-- Stats Pane -->
<div class="tab-pane fade" id="stats-pane" role="tabpanel">
<div id="container-stats-content" class="info-card">
<div class="row g-3">
<div id="container-stats-content" class="detail-tab-body">
<div class="row g-2">
<div class="col-md-6">
<div class="stat-card">
<div class="stat-card-icon" style="background: rgba(16, 185, 129, 0.2); color: var(--accent-success);">
@@ -1362,22 +1362,100 @@
</div>
</div>
</div>
<div id="stats-charts-container" class="mt-4">
<p class="text-muted">Stats charts will be displayed here</p>
<div id="stats-charts-container" class="mt-3">
<p class="text-muted small mb-0">Stats charts will be displayed here</p>
</div>
</div>
</div>
<!-- Processes Pane (docker top) -->
<div class="tab-pane fade" id="processes-pane" role="tabpanel">
<div class="info-card">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0"><i class="fas fa-microchip me-2"></i>Running Processes</h5>
<button class="btn btn-sm btn-outline-primary" type="button" id="refresh-container-top-btn" title="Refresh process list">
<i class="fas fa-sync-alt me-1"></i>Refresh
</button>
<div class="detail-tab-body detail-fill-panel">
<div class="detail-panel-toolbar">
<h5 class="mb-0 detail-panel-title"><i class="fas fa-microchip me-2"></i>Running Processes</h5>
<div class="procs-toolbar-actions">
<span class="procs-result-count" id="procs-result-count" aria-live="polite"></span>
<button class="btn btn-sm btn-outline-secondary" type="button" id="procs-filter-reset-btn" title="Clear all filters" disabled>
<i class="fas fa-times me-1"></i>Clear
</button>
<button class="btn btn-sm btn-outline-primary" type="button" id="refresh-container-top-btn" title="Refresh process list">
<i class="fas fa-sync-alt me-1"></i>Refresh
</button>
</div>
</div>
<div id="container-top-content" class="table-responsive">
<form class="procs-filter-form" id="procs-filter-form" autocomplete="off" spellcheck="false" onsubmit="return false;">
<div class="procs-filter-row procs-filter-row--primary">
<div class="procs-search-field">
<i class="fas fa-search procs-search-icon" aria-hidden="true"></i>
<input
type="search"
id="procs-filter-query"
class="procs-filter-input procs-filter-input--search"
placeholder="Search processes (PID, user, command, …)"
aria-label="Search all process fields"
>
<button type="button" class="procs-search-clear" id="procs-filter-query-clear" title="Clear search" hidden>
<i class="fas fa-times"></i>
</button>
<span class="procs-debounce-hint" id="procs-debounce-hint" hidden>
<i class="fas fa-circle-notch fa-spin"></i>
</span>
</div>
<button type="button" class="procs-filter-toggle" id="procs-filter-advanced-toggle" aria-expanded="false" aria-controls="procs-filter-advanced">
<i class="fas fa-sliders-h"></i>
<span>Filters</span>
<i class="fas fa-chevron-down procs-filter-chevron"></i>
</button>
</div>
<div class="procs-filter-advanced" id="procs-filter-advanced" hidden>
<div class="procs-filter-grid">
<label class="procs-field">
<span class="procs-field-label"><i class="fas fa-user"></i> User / UID</span>
<input type="text" id="procs-filter-user" class="procs-filter-input" placeholder="root, 1000…" aria-label="Filter by user or UID">
</label>
<label class="procs-field">
<span class="procs-field-label"><i class="fas fa-hashtag"></i> PID</span>
<input type="text" id="procs-filter-pid" class="procs-filter-input" placeholder="Exact or partial" inputmode="numeric" aria-label="Filter by PID">
</label>
<label class="procs-field">
<span class="procs-field-label"><i class="fas fa-sitemap"></i> PPID</span>
<input type="text" id="procs-filter-ppid" class="procs-filter-input" placeholder="Parent PID" inputmode="numeric" aria-label="Filter by PPID">
</label>
<label class="procs-field procs-field--wide">
<span class="procs-field-label"><i class="fas fa-terminal"></i> Command</span>
<input type="text" id="procs-filter-cmd" class="procs-filter-input" placeholder="Matches command / args" aria-label="Filter by command">
</label>
<label class="procs-field">
<span class="procs-field-label"><i class="fas fa-sort"></i> Sort by</span>
<select id="procs-filter-sort" class="procs-filter-input procs-filter-select" aria-label="Sort column">
<option value="">Default order</option>
</select>
</label>
<label class="procs-field">
<span class="procs-field-label"><i class="fas fa-exchange-alt"></i> Direction</span>
<select id="procs-filter-dir" class="procs-filter-input procs-filter-select" aria-label="Sort direction">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
</label>
<label class="procs-field procs-field--check">
<span class="procs-field-label"><i class="fas fa-filter"></i> Match</span>
<label class="procs-check">
<input type="checkbox" id="procs-filter-case" checked>
<span>Case-insensitive</span>
</label>
</label>
</div>
<p class="procs-filter-hint">
<i class="fas fa-info-circle"></i>
Filters apply client-side and are debounced. Refresh reloads processes from the container.
</p>
</div>
</form>
<div id="container-top-content" class="table-responsive detail-scroll-body">
<div class="text-muted small">Open this tab on a running container to list processes.</div>
</div>
</div>
@@ -1385,7 +1463,7 @@
<!-- Configuration Pane -->
<div class="tab-pane fade" id="config-pane" role="tabpanel">
<div id="container-config-content" class="info-card">
<div id="container-config-content" class="detail-tab-body detail-scroll-body">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text mt-2"></div>
</div>
@@ -1393,7 +1471,7 @@
<!-- Networking Pane -->
<div class="tab-pane fade" id="networking-pane" role="tabpanel">
<div id="container-networking-content" class="info-card">
<div id="container-networking-content" class="detail-tab-body detail-scroll-body">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text mt-2"></div>
</div>