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:
parent
f0ed112626
commit
359d69c3e9
1 changed files with 17 additions and 1 deletions
|
@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue