From 32e744a8086ae748373df3ba2fbb19085207ca50 Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Tue, 10 Feb 2026 04:59:36 +0100 Subject: [PATCH] fix(luci-mitmproxy): Add Recent Alerts section to status page Alerts data was loaded but not displayed. Added new section showing: - Time, IP, country, type, severity, details - Limited to 25 most recent alerts - Clear alerts button - Proper severity colors and icons Co-Authored-By: Claude Opus 4.5 --- .../resources/view/mitmproxy/status.js | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/package/secubox/luci-app-mitmproxy/htdocs/luci-static/resources/view/mitmproxy/status.js b/package/secubox/luci-app-mitmproxy/htdocs/luci-static/resources/view/mitmproxy/status.js index e9ea3870..66c7e706 100644 --- a/package/secubox/luci-app-mitmproxy/htdocs/luci-static/resources/view/mitmproxy/status.js +++ b/package/secubox/luci-app-mitmproxy/htdocs/luci-static/resources/view/mitmproxy/status.js @@ -232,6 +232,70 @@ return view.extend({ ]) ]), + // Recent Alerts Card + E('div', { 'class': 'cbi-section' }, [ + E('h3', {}, [ + _('Recent Alerts'), + ' ', + E('span', { 'style': 'font-size: 14px; font-weight: normal; color: #666;' }, + '(' + alerts.length + ' alerts)') + ]), + alerts.length > 0 ? + E('div', {}, [ + E('table', { 'class': 'table', 'style': 'font-size: 13px;' }, [ + E('tr', { 'class': 'tr cbi-section-table-titles' }, [ + E('th', { 'class': 'th' }, _('Time')), + E('th', { 'class': 'th' }, _('IP')), + E('th', { 'class': 'th' }, _('Country')), + E('th', { 'class': 'th' }, _('Type')), + E('th', { 'class': 'th' }, _('Severity')), + E('th', { 'class': 'th' }, _('Details')) + ]) + ].concat(alerts.slice(0, 25).map(function(alert) { + var time = alert.time ? alert.time.split('T')[1]?.split('.')[0] || alert.time : '-'; + var ip = alert.ip || '-'; + var country = alert.country || '-'; + var type = alert.type || alert.pattern || '-'; + var severity = alert.severity || 'medium'; + var details = alert.pattern || alert.category || alert.cve || alert.path || '-'; + + return E('tr', { 'class': 'tr' }, [ + E('td', { 'class': 'td', 'style': 'font-family: monospace; font-size: 11px; color: #666;' }, time), + E('td', { 'class': 'td', 'style': 'font-family: monospace; font-weight: 500;' }, ip), + E('td', { 'class': 'td', 'style': 'font-size: 11px;' }, country), + E('td', { 'class': 'td' }, [ + E('span', { + 'style': 'background: #3498db; color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; text-transform: uppercase;' + }, type) + ]), + E('td', { 'class': 'td' }, [ + E('span', { + 'style': 'color: ' + severityColor(severity) + '; font-weight: 500;' + }, severityIcon(severity) + ' ' + severity) + ]), + E('td', { 'class': 'td', 'style': 'max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #666;', 'title': details }, details) + ]); + }))), + alerts.length > 25 ? E('p', { 'style': 'text-align: center; color: #666; font-size: 12px; margin-top: 8px;' }, + _('Showing 25 of ') + alerts.length + _(' alerts')) : null, + E('div', { 'style': 'margin-top: 12px;' }, [ + E('button', { + 'class': 'btn cbi-button cbi-button-reset', + 'click': function() { + if (!confirm(_('Clear all alerts?'))) return; + ui.showModal(_('Clearing...'), [E('p', { 'class': 'spinning' }, _('Clearing alerts...'))]); + callClearAlerts().then(function() { ui.hideModal(); location.reload(); }); + } + }, _('Clear Alerts')) + ]) + ]) : + E('div', { 'class': 'cbi-section-node', 'style': 'text-align: center; padding: 40px; color: #27ae60;' }, [ + E('div', { 'style': 'font-size: 48px; margin-bottom: 16px;' }, '✅'), + E('p', {}, _('No recent alerts')), + E('p', { 'style': 'font-size: 12px; color: #666;' }, _('All traffic appears normal.')) + ]) + ]), + // Active Bans Card E('div', { 'class': 'cbi-section' }, [ E('h3', {}, [