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

Keep only the request column fluid

Browse Source
This commit is contained in:
Codex, agent ChatGPT
2026-03-12 18:13:46 +01:00
parent 5173701ab2
commit 2db01f6f51
1 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
internal/web/handler.go
View File

@@ -909,15 +909,22 @@ const queryLogHTML = `<!doctype html>
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.toolbar-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; } .toolbar-actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.page-status { color: #cbd5e1; font-size: .92rem; } .page-status { color: #cbd5e1; font-size: .92rem; }
.table-shell { overflow-x: auto; overflow-y: hidden; } .table-shell { overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: auto; } table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: .6rem .65rem; border-bottom: 1px solid #1e293b; text-align: left; vertical-align: top; } th, td { padding: .6rem .65rem; border-bottom: 1px solid #1e293b; text-align: left; vertical-align: top; min-width: 0; }
thead th { color: #93c5fd; } thead th { color: #93c5fd; }
tbody tr:nth-child(even) { background: rgba(15, 23, 42, .55); } tbody tr:nth-child(even) { background: rgba(15, 23, 42, .55); }
th.tight, td.tight { white-space: nowrap; width: 1%; } .col-time, .col-source, .col-ip, .col-method, .col-status, .col-state, .col-reason, .col-actions { white-space: nowrap; }
th.request-col, td.request-cell { width: 100%; min-width: 18rem; } .col-time { width: 11rem; }
td.request-cell { overflow: hidden; } .col-source { width: 7rem; }
.request-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-ip { width: 12rem; }
.col-method { width: 5.5rem; }
.col-status { width: 4.5rem; }
.col-state { width: 6.5rem; }
.col-reason { width: 12rem; overflow: hidden; }
.col-actions { width: 11rem; }
.col-request { width: auto; overflow: hidden; }
.request-text, .reason-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; background: #1e293b; } .status { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; background: #1e293b; }
.status.blocked { background: #7f1d1d; } .status.blocked { background: #7f1d1d; }
.status.review { background: #78350f; } .status.review { background: #78350f; }
@@ -961,6 +968,7 @@ const queryLogHTML = `<!doctype html>
header { padding: .9rem 1rem; } header { padding: .9rem 1rem; }
main { padding: 1rem; } main { padding: 1rem; }
.panel { padding: .85rem; } .panel { padding: .85rem; }
.table-shell { overflow-x: auto; }
table { min-width: 900px; } table { min-width: 900px; }
} }
</style> </style>
@@ -1005,15 +1013,15 @@ const queryLogHTML = `<!doctype html>
<table> <table>
<thead> <thead>
<tr> <tr>
<th class="tight">Time</th> <th class="col-time">Time</th>
<th class="tight">Source</th> <th class="col-source">Source</th>
<th class="tight">IP</th> <th class="col-ip">IP</th>
<th class="tight">Method</th> <th class="col-method">Method</th>
<th class="request-col">Request</th> <th class="col-request">Request</th>
<th class="tight">Status</th> <th class="col-status">Status</th>
<th class="tight">State</th> <th class="col-state">State</th>
<th class="tight">Reason</th> <th class="col-reason">Reason</th>
<th class="tight">Actions</th> <th class="col-actions">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody id="events-body"> <tbody id="events-body">
@@ -1212,15 +1220,15 @@ const queryLogHTML = `<!doctype html>
const requestLabel = ((item.host || '') ? (item.host + item.uri) : (item.uri || '—')); const requestLabel = ((item.host || '') ? (item.host + item.uri) : (item.uri || '—'));
return [ return [
'<tr>', '<tr>',
' <td class="tight">' + escapeHtml(formatDate(item.occurred_at)) + '</td>', ' <td class="col-time">' + escapeHtml(formatDate(item.occurred_at)) + '</td>',
' <td class="tight">' + escapeHtml(item.source_name || '—') + '</td>', ' <td class="col-source">' + escapeHtml(item.source_name || '—') + '</td>',
' <td class="tight mono"><div class="ip-cell">' + renderBotChip(item.bot) + '<a href="/ips/' + encodeURIComponent(item.client_ip) + '">' + escapeHtml(item.client_ip || '—') + '</a></div></td>', ' <td class="col-ip mono"><div class="ip-cell">' + renderBotChip(item.bot) + '<a href="/ips/' + encodeURIComponent(item.client_ip) + '">' + escapeHtml(item.client_ip || '—') + '</a></div></td>',
' <td class="tight"><span class="method ' + escapeHtml(methodClass(item.method)) + '">' + escapeHtml(item.method || 'OTHER') + '</span></td>', ' <td class="col-method"><span class="method ' + escapeHtml(methodClass(item.method)) + '">' + escapeHtml(item.method || 'OTHER') + '</span></td>',
' <td class="request-cell mono"><span class="request-text" title="' + escapeHtml(requestLabel) + '">' + escapeHtml(requestLabel) + '</span></td>', ' <td class="col-request mono"><span class="request-text" title="' + escapeHtml(requestLabel) + '">' + escapeHtml(requestLabel) + '</span></td>',
' <td class="tight">' + escapeHtml(String(item.status || 0)) + '</td>', ' <td class="col-status">' + escapeHtml(String(item.status || 0)) + '</td>',
' <td class="tight"><span class="status ' + escapeHtml(item.current_state || 'observed') + '">' + escapeHtml(item.current_state || 'observed') + '</span></td>', ' <td class="col-state"><span class="status ' + escapeHtml(item.current_state || 'observed') + '">' + escapeHtml(item.current_state || 'observed') + '</span></td>',
' <td class="tight">' + escapeHtml(item.decision_reason || '—') + '</td>', ' <td class="col-reason"><span class="reason-text" title="' + escapeHtml(item.decision_reason || '—') + '">' + escapeHtml(item.decision_reason || '—') + '</span></td>',
' <td class="tight">' + renderActions(item) + '</td>', ' <td class="col-actions">' + renderActions(item) + '</td>',
'</tr>' '</tr>'
].join(''); ].join('');
}); });