From 200fc838314f8e6cb7cea72654978257df539b87 Mon Sep 17 00:00:00 2001 From: "Codex, agent ChatGPT" Date: Thu, 12 Mar 2026 18:22:54 +0100 Subject: [PATCH] Polish the requests log table layout --- internal/web/handler.go | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/internal/web/handler.go b/internal/web/handler.go index 37636ab..fc2776c 100644 --- a/internal/web/handler.go +++ b/internal/web/handler.go @@ -930,15 +930,17 @@ const queryLogHTML = ` .status.review { background: #78350f; } .status.allowed { background: #14532d; } .status.observed { background: #1e293b; } + .status-code { display: inline-flex; align-items: center; justify-content: center; min-width: 3.5rem; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #1e293b; color: #e2e8f0; } + .status-code.client-error { background: #713f12; color: #fde68a; } + .status-code.server-error { background: #9a3412; color: #fdba74; } .method { display: inline-block; padding: .2rem .45rem; border-radius: 999px; font-size: .78rem; font-weight: 700; } .method.get { background: #14532d; color: #dcfce7; } .method.post { background: #78350f; color: #fef3c7; } .method.head { background: #0c4a6e; color: #e0f2fe; } .method.other { background: #334155; color: #e2e8f0; } - .actions { display: flex; gap: .35rem; flex-wrap: nowrap; white-space: nowrap; } - .action-link, button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: .45rem; padding: .3rem .6rem; font-size: .9rem; } - .action-link, button { white-space: nowrap; } - .action-link { background: #1e293b; color: #e2e8f0; text-decoration: none; } + .actions { display: block; } + .actions .muted { display: block; text-align: center; } + button { display: block; width: 100%; min-width: 7rem; align-items: center; justify-content: center; gap: .35rem; border-radius: .45rem; padding: .3rem .6rem; font-size: .9rem; white-space: nowrap; } button { background: #2563eb; color: white; border: 0; cursor: pointer; } button.secondary { background: #475569; } button.danger { background: #dc2626; } @@ -1014,9 +1016,9 @@ const queryLogHTML = ` Time - Source IP Method + Source Request Status State @@ -1119,13 +1121,24 @@ const queryLogHTML = ` function renderActions(item) { const actions = item.actions || {}; - const buttons = ['Open']; if (actions.can_unblock) { - buttons.push(''); - } else if (actions.can_block) { - buttons.push(''); + return '
'; } - return '
' + buttons.join('') + '
'; + if (actions.can_block) { + return '
'; + } + return '
—
'; + } + + function statusCodeClass(status) { + const code = Number(status || 0); + if (code >= 500) { + return 'server-error'; + } + if (code >= 400) { + return 'client-error'; + } + return ''; } function applyToggles() { @@ -1217,15 +1230,15 @@ const queryLogHTML = ` function renderEvents(payload) { const items = Array.isArray(payload.items) ? payload.items : []; const rows = items.map(item => { - const requestLabel = ((item.host || '') ? (item.host + item.uri) : (item.uri || '—')); + const requestLabel = item.uri || '—'; return [ '', ' ' + escapeHtml(formatDate(item.occurred_at)) + '', - ' ' + escapeHtml(item.source_name || '—') + '', '
' + renderBotChip(item.bot) + '' + escapeHtml(item.client_ip || '—') + '
', ' ' + escapeHtml(item.method || 'OTHER') + '', + ' ' + escapeHtml(item.source_name || '—') + '', ' ' + escapeHtml(requestLabel) + '', - ' ' + escapeHtml(String(item.status || 0)) + '', + ' ' + escapeHtml(String(item.status || 0)) + '', ' ' + escapeHtml(item.current_state || 'observed') + '', ' ' + escapeHtml(item.decision_reason || '—') + '', ' ' + renderActions(item) + '',