Recent: place Cache Status and HTTP Statuses side-by-side in a single row\n\n- Add a Bulma columns row in Recent section\n- Route the two key distribution charts into two half-width columns\n- Leave other global reports stacked below as before

This commit is contained in:
ngxstat-bot 2025-08-19 00:48:32 -05:00
commit 359d69c3e9

View file

@ -91,6 +91,8 @@
<p>Last generated: <span id="stat-generated">-</span></p> <p>Last generated: <span id="stat-generated">-</span></p>
<p>Generation time: <span id="stat-elapsed">-</span> seconds</p> <p>Generation time: <span id="stat-elapsed">-</span> seconds</p>
</div> </div>
<!-- Two key distributions side-by-side on Recent -->
<div id="recent-row" class="columns"></div>
<div id="overview-reports"></div> <div id="overview-reports"></div>
</div> </div>
@ -157,6 +159,7 @@
trends: document.getElementById('reports-trends'), trends: document.getElementById('reports-trends'),
breakdown: document.getElementById('reports-breakdown') breakdown: document.getElementById('reports-breakdown')
}; };
const recentRow = document.getElementById('recent-row');
const analysisElems = { const analysisElems = {
missing: document.getElementById('analysis-missing'), missing: document.getElementById('analysis-missing'),
cache: document.getElementById('analysis-cache'), cache: document.getElementById('analysis-cache'),
@ -453,6 +456,11 @@
path = currentDomain ? ('domains/' + encodeURIComponent(currentDomain) + '/' + currentInterval) : currentInterval; path = currentDomain ? ('domains/' + encodeURIComponent(currentDomain) + '/' + currentInterval) : currentInterval;
} }
// Clear the top row on each load of Recent
if (currentTab === 'recent' && recentRow) {
recentRow.innerHTML = '';
}
const token = newLoad(container); const token = newLoad(container);
fetch(path + '/reports.json', { signal: token.controller.signal }) fetch(path + '/reports.json', { signal: token.controller.signal })
@ -480,7 +488,15 @@
.then(r => r.text()) .then(r => r.text())
.then(html => { .then(html => {
if (token !== currentLoad) return; if (token !== currentLoad) return;
container.insertAdjacentHTML('beforeend', html); // On Recent tab, render Cache Status and HTTP Statuses side-by-side
const inTopRow = currentTab === 'recent' &&
(rep.name === 'cache_status_breakdown' || rep.name === 'status_distribution');
if (inTopRow && recentRow) {
const wrapped = `<div class="column is-half">${html}</div>`;
recentRow.insertAdjacentHTML('beforeend', wrapped);
} else {
container.insertAdjacentHTML('beforeend', html);
}
initReport(token, rep, path); initReport(token, rep, path);
}); });
}); });