Fold the stats pages to fit a phone
The stats pages were laid out for a desktop width and did not fit a phone. Below 600px the top-alerts rows now take three lines (name, count and sparkline, last seen and mean fix) instead of six columns, the heatmap shrinks to the screen with fewer hour labels, and the drilldown's time-to-resolve bars and occurrences table fold into stacked lines and cards rather than scrolling sideways. Grid children on the stats pages may now shrink below their content width, which is what let the heatmap push the page wider than the screen. CSS and one data-label attribute only: no API, schema or behaviour change at wider widths. Claude-Session: https://claude.ai/code/session_016mBLURvJoMuUEr9cB2RpUN
This commit is contained in:
@@ -103,17 +103,20 @@ function fixBars(d) {
|
||||
}));
|
||||
}
|
||||
|
||||
// On a phone each row folds into a card; the labels come from data-label.
|
||||
const OCC_COLS = ['Fired (UTC)', 'Time to ack', 'Duration', 'Acknowledged by', 'Status'];
|
||||
|
||||
function table(d) {
|
||||
return h('div', { class: 'occ-wrap' },
|
||||
h('table', { class: 'occ' },
|
||||
h('thead', {}, h('tr', {}, ['Fired (UTC)', 'Time to ack', 'Duration', 'Acknowledged by', 'Status'].map((t) => h('th', { text: t })))),
|
||||
h('thead', {}, h('tr', {}, OCC_COLS.map((t) => h('th', { text: t })))),
|
||||
h('tbody', {}, d.occurrences.map((o) => h('tr', {},
|
||||
h('td', {}, h('a', { href: `/incidents/${o.incident_id}`, text: fmtTime(o.triggered_at) }),
|
||||
` ${WEEKDAYS[new Date(o.triggered_at * 1000).getUTCDay()]}`),
|
||||
h('td', { text: sec(o.ack_seconds) }),
|
||||
h('td', { text: sec(o.resolve_seconds) }),
|
||||
h('td', { text: o.acknowledged_by || '—' }),
|
||||
h('td', { text: o.status }))))));
|
||||
h('td', { 'data-label': OCC_COLS[1], text: sec(o.ack_seconds) }),
|
||||
h('td', { 'data-label': OCC_COLS[2], text: sec(o.resolve_seconds) }),
|
||||
h('td', { 'data-label': OCC_COLS[3], text: o.acknowledged_by || '—' }),
|
||||
h('td', { 'data-label': OCC_COLS[4], text: o.status }))))));
|
||||
}
|
||||
|
||||
export function body(name, d, error, onRange) {
|
||||
|
||||
Reference in New Issue
Block a user