infrastructure/caddy-opnsense-blocker
2
Fork 0
Code Issues Activity

Relax requests log status styling

Browse Source
This commit is contained in:
Codex, agent ChatGPT
2026-03-12 21:26:22 +01:00
parent 2c0995beea
commit 1818c28ffc
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
internal/web/handler.go
View File

@@ -978,9 +978,9 @@ const queryLogHTML = `<!doctype html>
.method-pill.post { background: #78350f; color: #fef3c7; } .method-pill.post { background: #78350f; color: #fef3c7; }
.method-pill.head { background: #0c4a6e; color: #e0f2fe; } .method-pill.head { background: #0c4a6e; color: #e0f2fe; }
.method-pill.other { background: #334155; color: #e2e8f0; } .method-pill.other { background: #334155; color: #e2e8f0; }
.status-pill { 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 { display: inline-block; font-size: .84rem; font-weight: 700; color: #e2e8f0; }
.status-pill.client-error { background: #713f12; color: #fde68a; } .status-code.client-error { color: #facc15; }
.status-pill.server-error { background: #9a3412; color: #fdba74; } .status-code.server-error { color: #fb923c; }
.state-pill { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; background: #1e293b; } .state-pill { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; background: #1e293b; }
.state-pill.blocked { background: #7f1d1d; } .state-pill.blocked { background: #7f1d1d; }
.state-pill.review { background: #78350f; } .state-pill.review { background: #78350f; }
@@ -1593,7 +1593,7 @@ const queryLogHTML = `<!doctype html>
function statusFormatter(cell) { function statusFormatter(cell) {
const value = Number(cell.getRow().getData().status || 0); const value = Number(cell.getRow().getData().status || 0);
return '<span class="status-pill ' + escapeHtml(statusCodeClass(value)) + '">' + escapeHtml(String(value || 0)) + '</span>'; return '<span class="status-code ' + escapeHtml(statusCodeClass(value)) + '">' + escapeHtml(String(value || 0)) + '</span>';
} }
function stateFormatter(cell) { function stateFormatter(cell) {
@@ -1637,11 +1637,11 @@ const queryLogHTML = `<!doctype html>
}], }],
columns: [ columns: [
{ title: 'Time', field: 'time', headerSort: true, formatter: timeFormatter, width: 184, minWidth: 164, responsive: 0 }, { title: 'Time', field: 'time', headerSort: true, formatter: timeFormatter, width: 184, minWidth: 164, responsive: 0 },
{ title: 'IP', field: 'ip', headerSort: true, formatter: ipFormatter, width: 220, minWidth: 190, responsive: 0 }, { title: 'IP', field: 'ip', headerSort: true, formatter: ipFormatter, width: 320, minWidth: 280, responsive: 0 },
{ title: 'Method', field: 'method', headerSort: true, formatter: methodFormatter, width: 96, minWidth: 88, responsive: 4 }, { title: 'Method', field: 'method', headerSort: true, formatter: methodFormatter, width: 96, minWidth: 88, responsive: 4 },
{ title: 'Source', field: 'source', headerSort: true, formatter: function(cell) { return escapeHtml(cell.getRow().getData().source_name || '—'); }, width: 120, minWidth: 104, responsive: 5 }, { title: 'Source', field: 'source', headerSort: true, formatter: function(cell) { return escapeHtml(cell.getRow().getData().source_name || '—'); }, width: 120, minWidth: 104, responsive: 5 },
{ title: 'Request', field: 'request', headerSort: true, formatter: requestFormatter, minWidth: 220, widthGrow: 4, responsive: 0 }, { title: 'Request', field: 'request', headerSort: true, formatter: requestFormatter, minWidth: 220, widthGrow: 4, responsive: 0 },
{ title: 'Status', field: 'status', headerSort: true, formatter: statusFormatter, hozAlign: 'center', width: 92, minWidth: 88, responsive: 2 }, { title: 'Status', field: 'status', headerSort: true, formatter: statusFormatter, hozAlign: 'center', width: 76, minWidth: 72, responsive: 2 },
{ title: 'State', field: 'state', headerSort: true, formatter: stateFormatter, width: 112, minWidth: 104, responsive: 6 }, { title: 'State', field: 'state', headerSort: true, formatter: stateFormatter, width: 112, minWidth: 104, responsive: 6 },
{ title: 'Reason', field: 'reason', headerSort: true, formatter: reasonFormatter, minWidth: 180, widthGrow: 2, responsive: 7 }, { title: 'Reason', field: 'reason', headerSort: true, formatter: reasonFormatter, minWidth: 180, widthGrow: 2, responsive: 7 },
{ title: '', field: 'actions', headerSort: false, formatter: actionFormatter, hozAlign: 'center', width: 62, minWidth: 58, responsive: 1 }, { title: '', field: 'actions', headerSort: false, formatter: actionFormatter, hozAlign: 'center', width: 62, minWidth: 58, responsive: 1 },

3
internal/web/handler_test.go
View File

@@ -199,6 +199,9 @@ func TestHandlerServesOverviewAndManualActions(t *testing.T) {
if !strings.Contains(queryLogBody, `/assets/tabulator/tabulator.min.js`) || !strings.Contains(queryLogBody, `/assets/tabulator/tabulator_midnight.min.css`) { if !strings.Contains(queryLogBody, `/assets/tabulator/tabulator.min.js`) || !strings.Contains(queryLogBody, `/assets/tabulator/tabulator_midnight.min.css`) {
t.Fatalf("requests log page should load local tabulator assets") t.Fatalf("requests log page should load local tabulator assets")
} }
if !strings.Contains(queryLogBody, `.status-code`) || strings.Contains(queryLogBody, `.status-pill`) {
t.Fatalf("requests log page should use the simplified status styling")
}
if !strings.Contains(queryLogBody, `.tabulator .tabulator-tableholder .tabulator-table { min-width: 100% !important; width: 100% !important; }`) { if !strings.Contains(queryLogBody, `.tabulator .tabulator-tableholder .tabulator-table { min-width: 100% !important; width: 100% !important; }`) {
t.Fatalf("requests log page should keep the tabulator body at full width") t.Fatalf("requests log page should keep the tabulator body at full width")
} }