Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(system): link the Disk metric page to the storage breakdown

Browse Source 
Add a "View storage breakdown →" button on the Disk metric page (disk
only) that opens /admin/config/system/storage — keeps the trend page and
the breakdown page focused but a click apart, instead of merging them.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-28 23:16:21 +01:00
parent 4e49a3bd42
commit 66f5cb4af4
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
containers/libreportal/frontend/js/components/admin/system-metric-page.js
View File

@ -112,6 +112,11 @@ class SystemMetricPage {
const back = e.target.closest('[data-back]'); const back = e.target.closest('[data-back]');
if (back && window.navigateToRoute) { if (back && window.navigateToRoute) {
window.navigateToRoute('/admin/config/system'); window.navigateToRoute('/admin/config/system');
return;
}
const go = e.target.closest('[data-go-storage]');
if (go && window.navigateToRoute) {
window.navigateToRoute('/admin/config/system/storage');
} }
} }
@ -170,6 +175,7 @@ class SystemMetricPage {
<p class="sys-metric-sub">${fmt.escape(this._subline())}</p> <p class="sys-metric-sub">${fmt.escape(this._subline())}</p>
</div> </div>
<div class="sys-metric-actions"> <div class="sys-metric-actions">
${this.metricKey === 'disk' ? `<button type="button" class="sys-storage-more" data-go-storage>View storage breakdown →</button>` : ''}
<div class="sys-detail-range" role="tablist" aria-label="Time range"> <div class="sys-detail-range" role="tablist" aria-label="Time range">
${[[60,'1h'],[360,'6h'],[1440,'24h'],[10080,'7d']] ${[[60,'1h'],[360,'6h'],[1440,'24h'],[10080,'7d']]
.map(([m,l]) => `<button type="button" role="tab" class="sys-detail-range-btn ${this.rangeMin===m?'active':''}" data-rng="${m}">${l}</button>`).join('')} .map(([m,l]) => `<button type="button" role="tab" class="sys-detail-range-btn ${this.rangeMin===m?'active':''}" data-rng="${m}">${l}</button>`).join('')}