Show date and time on separate lines in perf dashboard card

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-01-30 18:22:40 -08:00
parent d84805a6f4
commit 712ec3b635

View file

@ -30,7 +30,7 @@ if (remoteAddr != "127.0.0.1" && remoteAddr != "::1" && remoteAddr != "0:0:0:0:0
.card .label { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .card .label { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.card .value { font-size: 28px; font-weight: 700; color: #fff; } .card .value { font-size: 28px; font-weight: 700; color: #fff; }
.card .unit { font-size: 13px; color: #8b949e; font-weight: 400; } .card .unit { font-size: 13px; color: #8b949e; font-weight: 400; }
.card.card-wide { min-width: 200px; } .card .sub { font-size: 13px; color: #8b949e; font-weight: 400; }
.section { margin-bottom: 28px; } .section { margin-bottom: 28px; }
.section h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #c9d1d9; display: flex; align-items: center; gap: 8px; } .section h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #c9d1d9; display: flex; align-items: center; gap: 8px; }
@ -137,7 +137,7 @@ function fmtDate(s) {
var mo = d.getMonth() + 1, dy = d.getDate(), yr = String(d.getFullYear()).slice(-2); var mo = d.getMonth() + 1, dy = d.getDate(), yr = String(d.getFullYear()).slice(-2);
var h = d.getHours(), mi = String(d.getMinutes()).padStart(2, '0'), ap = h >= 12 ? 'p' : 'a'; var h = d.getHours(), mi = String(d.getMinutes()).padStart(2, '0'), ap = h >= 12 ? 'p' : 'a';
h = h % 12 || 12; h = h % 12 || 12;
return mo + '/' + dy + '/' + yr + ' ' + h + ':' + mi + ap; return { date: mo + '/' + dy + '/' + yr, time: h + ':' + mi + ap };
} }
function fmtMs(n) { function fmtMs(n) {
if (n == null) return '-'; if (n == null) return '-';
@ -201,7 +201,7 @@ async function loadAll() {
card('Avg DB Time', s.OverallAvgDbMs || 0, 'ms') + card('Avg DB Time', s.OverallAvgDbMs || 0, 'ms') +
card('Avg App Time', s.OverallAvgAppMs || 0, 'ms') + card('Avg App Time', s.OverallAvgAppMs || 0, 'ms') +
card('Avg Queries', s.OverallAvgQueries || 0, '/req') + card('Avg Queries', s.OverallAvgQueries || 0, '/req') +
cardWide('Data Since', fmtDate(s.FirstLog)); cardDate('Data Since', fmtDate(s.FirstLog));
qs('#summarySection').style.display = ''; qs('#summarySection').style.display = '';
// Count table // Count table
@ -225,8 +225,9 @@ async function loadAll() {
function card(label, value, unit) { function card(label, value, unit) {
return '<div class="card"><div class="label">' + label + '</div><div class="value">' + value + ' <span class="unit">' + unit + '</span></div></div>'; return '<div class="card"><div class="label">' + label + '</div><div class="value">' + value + ' <span class="unit">' + unit + '</span></div></div>';
} }
function cardWide(label, value) { function cardDate(label, dt) {
return '<div class="card card-wide"><div class="label">' + label + '</div><div class="value">' + value + '</div></div>'; if (!dt || !dt.date) return card(label, 'none', '');
return '<div class="card"><div class="label">' + label + '</div><div class="value">' + dt.date + '</div><div class="sub">' + dt.time + '</div></div>';
} }
function renderCountTable(data) { function renderCountTable(data) {