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:
parent
d84805a6f4
commit
712ec3b635
1 changed files with 6 additions and 5 deletions
|
|
@ -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) {
|
||||||
|
|
|
||||||
Reference in a new issue