refactor(crowdsec-dashboard): KISS rewrite and move to Services menu
- Rewrite all views with KISS CSS (1200+ lines removed) - Use unified cs-* CSS prefix with SecuBox theme variables - Move CrowdSec from Security to Services menu - Update navigation paths in all views and nav.js - Add CSS loading in each view's load() function - Fix Services menu as proper firstchild submenu - Simplify dashboard.css from 950+ to 112 lines Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
357f16bf93
commit
31f4db881e
File diff suppressed because it is too large
Load Diff
@ -17,14 +17,14 @@
|
||||
})();
|
||||
|
||||
var tabs = [
|
||||
{ id: 'overview', icon: '📊', label: _('Overview'), path: ['admin', 'secubox', 'security', 'crowdsec', 'overview'] },
|
||||
{ id: 'wizard', icon: '🚀', label: _('Wizard'), path: ['admin', 'secubox', 'security', 'crowdsec', 'wizard'] },
|
||||
{ id: 'decisions', icon: '⛔', label: _('Decisions'), path: ['admin', 'secubox', 'security', 'crowdsec', 'decisions'] },
|
||||
{ id: 'alerts', icon: '⚠️', label: _('Alerts'), path: ['admin', 'secubox', 'security', 'crowdsec', 'alerts'] },
|
||||
{ id: 'bouncers', icon: '🛡️', label: _('Bouncers'), path: ['admin', 'secubox', 'security', 'crowdsec', 'bouncers'] },
|
||||
{ id: 'waf', icon: '🔥', label: _('WAF/AppSec'), path: ['admin', 'secubox', 'security', 'crowdsec', 'waf'] },
|
||||
{ id: 'metrics', icon: '📈', label: _('Metrics'), path: ['admin', 'secubox', 'security', 'crowdsec', 'metrics'] },
|
||||
{ id: 'settings', icon: '⚙️', label: _('Settings'), path: ['admin', 'secubox', 'security', 'crowdsec', 'settings'] }
|
||||
{ id: 'overview', icon: '📊', label: _('Overview'), path: ['admin', 'secubox', 'services', 'crowdsec', 'overview'] },
|
||||
{ id: 'wizard', icon: '🚀', label: _('Wizard'), path: ['admin', 'secubox', 'services', 'crowdsec', 'wizard'] },
|
||||
{ id: 'decisions', icon: '⛔', label: _('Decisions'), path: ['admin', 'secubox', 'services', 'crowdsec', 'decisions'] },
|
||||
{ id: 'alerts', icon: '⚠️', label: _('Alerts'), path: ['admin', 'secubox', 'services', 'crowdsec', 'alerts'] },
|
||||
{ id: 'bouncers', icon: '🛡️', label: _('Bouncers'), path: ['admin', 'secubox', 'services', 'crowdsec', 'bouncers'] },
|
||||
{ id: 'waf', icon: '🔥', label: _('WAF/AppSec'), path: ['admin', 'secubox', 'services', 'crowdsec', 'waf'] },
|
||||
{ id: 'metrics', icon: '📈', label: _('Metrics'), path: ['admin', 'secubox', 'services', 'crowdsec', 'metrics'] },
|
||||
{ id: 'settings', icon: '⚙️', label: _('Settings'), path: ['admin', 'secubox', 'services', 'crowdsec', 'settings'] }
|
||||
];
|
||||
|
||||
return baseclass.extend({
|
||||
@ -68,11 +68,11 @@ body:not([data-page*="crowdsec"]) ul.tabs {
|
||||
}
|
||||
|
||||
/* All possible LuCI tab selectors */
|
||||
body[data-page^="admin-secubox-security-crowdsec"] .tabs,
|
||||
body[data-page^="admin-secubox-security-crowdsec"] #tabmenu,
|
||||
body[data-page^="admin-secubox-security-crowdsec"] .cbi-tabmenu,
|
||||
body[data-page^="admin-secubox-security-crowdsec"] .nav-tabs,
|
||||
body[data-page^="admin-secubox-security-crowdsec"] ul.cbi-tabmenu,
|
||||
body[data-page^="admin-secubox-services-crowdsec"] .tabs,
|
||||
body[data-page^="admin-secubox-services-crowdsec"] #tabmenu,
|
||||
body[data-page^="admin-secubox-services-crowdsec"] .cbi-tabmenu,
|
||||
body[data-page^="admin-secubox-services-crowdsec"] .nav-tabs,
|
||||
body[data-page^="admin-secubox-services-crowdsec"] ul.cbi-tabmenu,
|
||||
body[data-page*="crowdsec"] ul.tabs,
|
||||
body[data-page*="crowdsec"] .tabs,
|
||||
/* Fallback: hide any tabs that appear before our custom nav */
|
||||
|
||||
@ -4,148 +4,146 @@
|
||||
'require poll';
|
||||
'require crowdsec-dashboard.api as api';
|
||||
|
||||
/**
|
||||
* CrowdSec SOC - Alerts View
|
||||
* Security alerts timeline with GeoIP
|
||||
*/
|
||||
|
||||
return view.extend({
|
||||
title: _('Alerts'),
|
||||
alerts: [],
|
||||
|
||||
load: function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = L.resource('crowdsec-dashboard/soc.css');
|
||||
link.href = L.resource('crowdsec-dashboard/dashboard.css');
|
||||
document.head.appendChild(link);
|
||||
document.body.classList.add('cs-soc-fullwidth');
|
||||
return api.getAlerts(100);
|
||||
return api.getAlerts(100).catch(function() { return []; });
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
var self = this;
|
||||
this.alerts = (data && data.alerts) || data || [];
|
||||
this.alerts = Array.isArray(data) ? data : (data.alerts || []);
|
||||
|
||||
return E('div', { 'class': 'soc-dashboard' }, [
|
||||
this.renderHeader(),
|
||||
var view = E('div', { 'class': 'cs-view' }, [
|
||||
E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, 'CrowdSec Alerts'),
|
||||
E('div', { 'class': 'cs-status' }, [
|
||||
E('span', { 'class': 'cs-badge ' + (this.alerts.length > 0 ? 'warning' : 'success') },
|
||||
this.alerts.length + ' alerts')
|
||||
])
|
||||
]),
|
||||
this.renderNav('alerts'),
|
||||
E('div', { 'class': 'soc-stats', 'style': 'margin-bottom: 20px;' }, this.renderAlertStats()),
|
||||
E('div', { 'class': 'soc-card' }, [
|
||||
E('div', { 'class': 'soc-card-header' }, [
|
||||
'Security Alerts (' + this.alerts.length + ')',
|
||||
E('div', { 'class': 'cs-stats' }, this.renderStats()),
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Security Alerts',
|
||||
E('input', {
|
||||
'type': 'text',
|
||||
'class': 'soc-btn',
|
||||
'placeholder': 'Search...',
|
||||
'id': 'alert-search',
|
||||
'style': 'width: 200px;',
|
||||
'type': 'text', 'class': 'cs-input', 'id': 'alert-search',
|
||||
'placeholder': 'Search...', 'style': 'width: 150px;',
|
||||
'keyup': function() { self.filterAlerts(); }
|
||||
})
|
||||
]),
|
||||
E('div', { 'class': 'soc-card-body', 'id': 'alerts-list' }, this.renderAlerts(this.alerts))
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'alerts-list' }, this.renderAlerts(this.alerts))
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderHeader: function() {
|
||||
return E('div', { 'class': 'soc-header' }, [
|
||||
E('div', { 'class': 'soc-title' }, [
|
||||
E('svg', { 'viewBox': '0 0 24 24' }, [E('path', { 'd': 'M12 2L2 7v10l10 5 10-5V7L12 2z' })]),
|
||||
'CrowdSec Security Operations'
|
||||
]),
|
||||
E('div', { 'class': 'soc-status' }, [E('span', { 'class': 'soc-status-dot online' }), 'ALERTS'])
|
||||
]);
|
||||
poll.add(L.bind(this.pollData, this), 30);
|
||||
return view;
|
||||
},
|
||||
|
||||
renderNav: function(active) {
|
||||
var tabs = ['overview', 'alerts', 'decisions', 'bouncers', 'settings'];
|
||||
return E('div', { 'class': 'soc-nav' }, tabs.map(function(t) {
|
||||
var tabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'alerts', label: 'Alerts' },
|
||||
{ id: 'decisions', label: 'Decisions' },
|
||||
{ id: 'bouncers', label: 'Bouncers' },
|
||||
{ id: 'settings', label: 'Settings' }
|
||||
];
|
||||
return E('div', { 'class': 'cs-nav' }, tabs.map(function(t) {
|
||||
return E('a', {
|
||||
'href': L.url('admin/secubox/security/crowdsec/' + t),
|
||||
'class': active === t ? 'active' : ''
|
||||
}, t.charAt(0).toUpperCase() + t.slice(1));
|
||||
'href': L.url('admin/secubox/services/crowdsec/' + t.id),
|
||||
'class': active === t.id ? 'active' : ''
|
||||
}, t.label);
|
||||
}));
|
||||
},
|
||||
|
||||
renderAlertStats: function() {
|
||||
renderStats: function() {
|
||||
var scenarios = {}, countries = {};
|
||||
this.alerts.forEach(function(a) {
|
||||
var s = a.scenario || 'unknown';
|
||||
scenarios[s] = (scenarios[s] || 0) + 1;
|
||||
var c = a.source?.cn || a.source?.country || 'Unknown';
|
||||
var c = (a.source && (a.source.cn || a.source.country)) || 'Unknown';
|
||||
countries[c] = (countries[c] || 0) + 1;
|
||||
});
|
||||
|
||||
var topScenario = Object.entries(scenarios).sort(function(a, b) { return b[1] - a[1]; })[0];
|
||||
var topCountry = Object.entries(countries).sort(function(a, b) { return b[1] - a[1]; })[0];
|
||||
|
||||
return [
|
||||
E('div', { 'class': 'soc-stat' }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, String(this.alerts.length)),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Total Alerts')
|
||||
E('div', { 'class': 'cs-stat warning' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(this.alerts.length)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Total Alerts')
|
||||
]),
|
||||
E('div', { 'class': 'soc-stat' }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, String(Object.keys(scenarios).length)),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Scenarios')
|
||||
E('div', { 'class': 'cs-stat' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(Object.keys(scenarios).length)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Scenarios')
|
||||
]),
|
||||
E('div', { 'class': 'soc-stat' }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, String(Object.keys(countries).length)),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Countries')
|
||||
E('div', { 'class': 'cs-stat' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(Object.keys(countries).length)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Countries')
|
||||
]),
|
||||
E('div', { 'class': 'soc-stat danger' }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, topScenario ? api.parseScenario(topScenario[0]).split(' ')[0] : '-'),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Top Threat')
|
||||
E('div', { 'class': 'cs-stat danger' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, topScenario ? api.parseScenario(topScenario[0]).split(' ')[0] : '-'),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Top Threat')
|
||||
])
|
||||
];
|
||||
},
|
||||
|
||||
renderAlerts: function(alerts) {
|
||||
if (!alerts.length) {
|
||||
return E('div', { 'class': 'soc-empty' }, [
|
||||
E('div', { 'class': 'soc-empty-icon' }, '\u2713'),
|
||||
'No alerts'
|
||||
]);
|
||||
return E('div', { 'class': 'cs-empty' }, 'No alerts');
|
||||
}
|
||||
|
||||
return E('table', { 'class': 'soc-table' }, [
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Time'),
|
||||
E('th', {}, 'Source IP'),
|
||||
E('th', {}, 'Source'),
|
||||
E('th', {}, 'Country'),
|
||||
E('th', {}, 'Scenario'),
|
||||
E('th', {}, 'Events'),
|
||||
E('th', {}, 'Severity')
|
||||
E('th', {}, 'Events')
|
||||
])),
|
||||
E('tbody', {}, alerts.slice(0, 50).map(function(a) {
|
||||
var src = a.source || {};
|
||||
var country = src.cn || src.country || '';
|
||||
var severity = a.scenario?.includes('bf') ? 'high' :
|
||||
a.scenario?.includes('cve') ? 'critical' : 'medium';
|
||||
return E('tr', {}, [
|
||||
E('td', { 'class': 'soc-time' }, api.formatRelativeTime(a.created_at)),
|
||||
E('td', {}, E('span', { 'class': 'soc-ip' }, src.ip || 'N/A')),
|
||||
E('td', { 'class': 'soc-geo' }, [
|
||||
E('span', { 'class': 'soc-flag' }, api.getCountryFlag(country)),
|
||||
E('span', { 'class': 'soc-country' }, country)
|
||||
E('td', { 'class': 'cs-time' }, api.formatRelativeTime(a.created_at)),
|
||||
E('td', {}, E('span', { 'class': 'cs-ip' }, src.ip || '-')),
|
||||
E('td', {}, [
|
||||
E('span', { 'class': 'cs-flag' }, api.getCountryFlag(country)),
|
||||
' ', country
|
||||
]),
|
||||
E('td', {}, E('span', { 'class': 'soc-scenario' }, api.parseScenario(a.scenario))),
|
||||
E('td', {}, String(a.events_count || 0)),
|
||||
E('td', {}, E('span', { 'class': 'soc-severity ' + severity }, severity.toUpperCase()))
|
||||
E('td', {}, E('span', { 'class': 'cs-scenario' }, api.parseScenario(a.scenario))),
|
||||
E('td', {}, String(a.events_count || 0))
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
filterAlerts: function() {
|
||||
var query = (document.getElementById('alert-search')?.value || '').toLowerCase();
|
||||
var query = (document.getElementById('alert-search').value || '').toLowerCase();
|
||||
var filtered = this.alerts.filter(function(a) {
|
||||
if (!query) return true;
|
||||
var fields = [a.source?.ip, a.scenario, a.source?.country, a.source?.cn].join(' ').toLowerCase();
|
||||
var src = a.source || {};
|
||||
var fields = [src.ip, a.scenario, src.country, src.cn].join(' ').toLowerCase();
|
||||
return fields.includes(query);
|
||||
});
|
||||
var el = document.getElementById('alerts-list');
|
||||
if (el) dom.content(el, this.renderAlerts(filtered));
|
||||
},
|
||||
|
||||
handleSaveApply: null, handleSave: null, handleReset: null
|
||||
pollData: function() {
|
||||
var self = this;
|
||||
return api.getAlerts(100).then(function(data) {
|
||||
self.alerts = Array.isArray(data) ? data : (data.alerts || []);
|
||||
var el = document.getElementById('alerts-list');
|
||||
if (el) dom.content(el, self.renderAlerts(self.alerts));
|
||||
});
|
||||
},
|
||||
|
||||
handleSaveApply: null,
|
||||
handleSave: null,
|
||||
handleReset: null
|
||||
});
|
||||
|
||||
@ -5,137 +5,138 @@
|
||||
'require ui';
|
||||
'require crowdsec-dashboard.api as api';
|
||||
|
||||
/**
|
||||
* CrowdSec SOC - Bouncers View
|
||||
* Bouncer management with firewall integration
|
||||
*/
|
||||
|
||||
return view.extend({
|
||||
title: _('Bouncers'),
|
||||
bouncers: [],
|
||||
fwStatus: {},
|
||||
|
||||
load: function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = L.resource('crowdsec-dashboard/soc.css');
|
||||
link.href = L.resource('crowdsec-dashboard/dashboard.css');
|
||||
document.head.appendChild(link);
|
||||
document.body.classList.add('cs-soc-fullwidth');
|
||||
|
||||
return Promise.all([
|
||||
api.getBouncers(),
|
||||
api.getFirewallBouncerStatus(),
|
||||
api.getNftablesStats()
|
||||
]);
|
||||
api.getFirewallBouncerStatus()
|
||||
]).catch(function() { return [{}, {}]; });
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
var self = this;
|
||||
this.bouncers = (data[0] && data[0].bouncers) || data[0] || [];
|
||||
this.bouncers = Array.isArray(data[0]) ? data[0] : (data[0].bouncers || []);
|
||||
this.fwStatus = data[1] || {};
|
||||
this.nftStats = data[2] || {};
|
||||
|
||||
var view = E('div', { 'class': 'soc-dashboard' }, [
|
||||
this.renderHeader(),
|
||||
var view = E('div', { 'class': 'cs-view' }, [
|
||||
E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, 'CrowdSec Bouncers'),
|
||||
E('div', { 'class': 'cs-status' }, [
|
||||
E('span', { 'class': 'cs-dot ' + (this.fwStatus.running ? 'online' : 'offline') }),
|
||||
this.fwStatus.running ? 'Active' : 'Stopped'
|
||||
])
|
||||
]),
|
||||
this.renderNav('bouncers'),
|
||||
E('div', { 'class': 'soc-stats' }, this.renderBouncerStats()),
|
||||
E('div', { 'class': 'soc-grid-2' }, [
|
||||
E('div', { 'class': 'soc-card' }, [
|
||||
E('div', { 'class': 'soc-card-header' }, [
|
||||
E('div', { 'class': 'cs-stats' }, this.renderStats()),
|
||||
E('div', { 'class': 'cs-grid-2' }, [
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Firewall Bouncer',
|
||||
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
||||
E('button', {
|
||||
'class': 'soc-btn soc-btn-sm ' + (this.fwStatus.running ? 'danger' : 'primary'),
|
||||
'click': L.bind(this.handleFwControl, this, this.fwStatus.running ? 'stop' : 'start')
|
||||
'class': 'cs-btn cs-btn-sm ' + (this.fwStatus.running ? 'danger' : 'primary'),
|
||||
'click': function() { self.fwControl(self.fwStatus.running ? 'stop' : 'start'); }
|
||||
}, this.fwStatus.running ? 'Stop' : 'Start'),
|
||||
E('button', {
|
||||
'class': 'soc-btn soc-btn-sm',
|
||||
'click': L.bind(this.handleFwControl, this, 'restart')
|
||||
'class': 'cs-btn cs-btn-sm',
|
||||
'click': function() { self.fwControl('restart'); }
|
||||
}, 'Restart')
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'soc-card-body' }, this.renderFirewallStatus())
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderFwStatus())
|
||||
]),
|
||||
E('div', { 'class': 'soc-card' }, [
|
||||
E('div', { 'class': 'soc-card-header' }, [
|
||||
'Blocked IPs',
|
||||
E('button', { 'class': 'soc-btn soc-btn-sm', 'click': L.bind(this.showBlockedIPs, this) }, 'View All')
|
||||
]),
|
||||
E('div', { 'class': 'soc-card-body' }, this.renderBlockedStats())
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Blocked IPs'),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderBlockedStats())
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'soc-card' }, [
|
||||
E('div', { 'class': 'soc-card-header' }, [
|
||||
'Registered Bouncers (' + this.bouncers.length + ')',
|
||||
E('button', { 'class': 'soc-btn soc-btn-sm primary', 'click': L.bind(this.showRegisterModal, this) }, '+ Register')
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Registered Bouncers',
|
||||
E('button', { 'class': 'cs-btn cs-btn-sm primary', 'click': function() { self.showRegister(); } }, '+ Register')
|
||||
]),
|
||||
E('div', { 'class': 'soc-card-body', 'id': 'bouncers-list' }, this.renderBouncers(this.bouncers))
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'bouncers-list' }, this.renderBouncers())
|
||||
]),
|
||||
this.renderRegisterModal()
|
||||
E('div', { 'class': 'cs-card', 'id': 'register-form', 'style': 'display: none;' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Register Bouncer'),
|
||||
E('div', { 'class': 'cs-card-body' }, [
|
||||
E('div', { 'class': 'cs-field' }, [
|
||||
E('label', { 'class': 'cs-label' }, 'Bouncer Name'),
|
||||
E('input', { 'type': 'text', 'id': 'bouncer-name', 'class': 'cs-input', 'placeholder': 'firewall-bouncer' })
|
||||
]),
|
||||
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
||||
E('button', { 'class': 'cs-btn primary', 'click': function() { self.submitRegister(); } }, 'Register'),
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { self.hideRegister(); } }, 'Cancel')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
|
||||
poll.add(L.bind(this.pollData, this), 15);
|
||||
return view;
|
||||
},
|
||||
|
||||
renderHeader: function() {
|
||||
return E('div', { 'class': 'soc-header' }, [
|
||||
E('div', { 'class': 'soc-title' }, [
|
||||
E('svg', { 'viewBox': '0 0 24 24' }, [E('path', { 'd': 'M12 2L2 7v10l10 5 10-5V7L12 2z' })]),
|
||||
'CrowdSec Security Operations'
|
||||
]),
|
||||
E('div', { 'class': 'soc-status' }, [E('span', { 'class': 'soc-status-dot online' }), 'BOUNCERS'])
|
||||
]);
|
||||
},
|
||||
|
||||
renderNav: function(active) {
|
||||
var tabs = ['overview', 'alerts', 'decisions', 'bouncers', 'settings'];
|
||||
return E('div', { 'class': 'soc-nav' }, tabs.map(function(t) {
|
||||
var tabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'alerts', label: 'Alerts' },
|
||||
{ id: 'decisions', label: 'Decisions' },
|
||||
{ id: 'bouncers', label: 'Bouncers' },
|
||||
{ id: 'settings', label: 'Settings' }
|
||||
];
|
||||
return E('div', { 'class': 'cs-nav' }, tabs.map(function(t) {
|
||||
return E('a', {
|
||||
'href': L.url('admin/secubox/security/crowdsec/' + t),
|
||||
'class': active === t ? 'active' : ''
|
||||
}, t.charAt(0).toUpperCase() + t.slice(1));
|
||||
'href': L.url('admin/secubox/services/crowdsec/' + t.id),
|
||||
'class': active === t.id ? 'active' : ''
|
||||
}, t.label);
|
||||
}));
|
||||
},
|
||||
|
||||
renderBouncerStats: function() {
|
||||
renderStats: function() {
|
||||
var active = this.bouncers.filter(function(b) { return !b.revoked; }).length;
|
||||
var fw = this.fwStatus;
|
||||
return [
|
||||
E('div', { 'class': 'soc-stat ' + (active > 0 ? 'success' : 'warning') }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, String(active)),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Active Bouncers')
|
||||
E('div', { 'class': 'cs-stat ' + (active > 0 ? 'success' : 'warning') }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(active)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Active Bouncers')
|
||||
]),
|
||||
E('div', { 'class': 'soc-stat ' + (fw.running ? 'success' : 'danger') }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, fw.running ? 'ON' : 'OFF'),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Firewall Bouncer')
|
||||
E('div', { 'class': 'cs-stat ' + (fw.running ? 'success' : 'danger') }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, fw.running ? 'ON' : 'OFF'),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Firewall')
|
||||
]),
|
||||
E('div', { 'class': 'soc-stat danger' }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, String(fw.blocked_ipv4 || 0)),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Blocked IPv4')
|
||||
E('div', { 'class': 'cs-stat danger' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(fw.blocked_ipv4 || 0)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'IPv4 Blocked')
|
||||
]),
|
||||
E('div', { 'class': 'soc-stat danger' }, [
|
||||
E('div', { 'class': 'soc-stat-value' }, String(fw.blocked_ipv6 || 0)),
|
||||
E('div', { 'class': 'soc-stat-label' }, 'Blocked IPv6')
|
||||
E('div', { 'class': 'cs-stat danger' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(fw.blocked_ipv6 || 0)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'IPv6 Blocked')
|
||||
])
|
||||
];
|
||||
},
|
||||
|
||||
renderFirewallStatus: function() {
|
||||
renderFwStatus: function() {
|
||||
var fw = this.fwStatus;
|
||||
var checks = [
|
||||
{ label: 'Service', value: fw.running ? 'Running' : 'Stopped', ok: fw.running },
|
||||
{ label: 'Boot Start', value: fw.enabled ? 'Enabled' : 'Disabled', ok: fw.enabled },
|
||||
{ label: 'Configured', value: fw.configured ? 'Yes' : 'No', ok: fw.configured },
|
||||
{ label: 'IPv4 Table', value: fw.nftables_ipv4 ? 'Active' : 'Inactive', ok: fw.nftables_ipv4 },
|
||||
{ label: 'IPv6 Table', value: fw.nftables_ipv6 ? 'Active' : 'Inactive', ok: fw.nftables_ipv6 }
|
||||
{ label: 'Service', ok: fw.running },
|
||||
{ label: 'Boot Start', ok: fw.enabled },
|
||||
{ label: 'Configured', ok: fw.configured },
|
||||
{ label: 'IPv4 Table', ok: fw.nftables_ipv4 },
|
||||
{ label: 'IPv6 Table', ok: fw.nftables_ipv6 }
|
||||
];
|
||||
return E('div', { 'class': 'soc-health' }, checks.map(function(c) {
|
||||
return E('div', { 'class': 'soc-health-item' }, [
|
||||
E('div', { 'class': 'soc-health-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'),
|
||||
return E('div', { 'class': 'cs-health' }, checks.map(function(c) {
|
||||
return E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'soc-health-label' }, c.label),
|
||||
E('div', { 'class': 'soc-health-value' }, c.value)
|
||||
E('div', { 'class': 'cs-health-label' }, c.label),
|
||||
E('div', { 'class': 'cs-health-value' }, c.ok ? 'OK' : 'Error')
|
||||
])
|
||||
]);
|
||||
}));
|
||||
@ -145,153 +146,111 @@ return view.extend({
|
||||
var fw = this.fwStatus;
|
||||
var total = (fw.blocked_ipv4 || 0) + (fw.blocked_ipv6 || 0);
|
||||
if (total === 0) {
|
||||
return E('div', { 'class': 'soc-empty' }, [
|
||||
E('div', { 'class': 'soc-empty-icon' }, '\u2713'),
|
||||
'No IPs currently blocked'
|
||||
]);
|
||||
return E('div', { 'class': 'cs-empty' }, 'No IPs blocked');
|
||||
}
|
||||
return E('div', { 'style': 'text-align: center; padding: 20px;' }, [
|
||||
E('div', { 'style': 'font-size: 48px; font-weight: 700; color: var(--soc-danger);' }, String(total)),
|
||||
E('div', { 'style': 'color: var(--soc-text-muted); margin-top: 8px;' }, 'Total Blocked IPs'),
|
||||
E('div', { 'style': 'margin-top: 16px; display: flex; justify-content: center; gap: 24px;' }, [
|
||||
return E('div', { 'style': 'text-align: center; padding: 1rem;' }, [
|
||||
E('div', { 'style': 'font-size: 2rem; font-weight: 700; color: var(--cs-danger);' }, String(total)),
|
||||
E('div', { 'style': 'color: var(--cs-muted);' }, 'Total Blocked'),
|
||||
E('div', { 'style': 'margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem;' }, [
|
||||
E('div', {}, [
|
||||
E('div', { 'style': 'font-size: 20px; font-weight: 600;' }, String(fw.blocked_ipv4 || 0)),
|
||||
E('div', { 'style': 'font-size: 11px; color: var(--soc-text-muted);' }, 'IPv4')
|
||||
E('div', { 'style': 'font-weight: 600;' }, String(fw.blocked_ipv4 || 0)),
|
||||
E('div', { 'style': 'font-size: 0.75rem; color: var(--cs-muted);' }, 'IPv4')
|
||||
]),
|
||||
E('div', {}, [
|
||||
E('div', { 'style': 'font-size: 20px; font-weight: 600;' }, String(fw.blocked_ipv6 || 0)),
|
||||
E('div', { 'style': 'font-size: 11px; color: var(--soc-text-muted);' }, 'IPv6')
|
||||
E('div', { 'style': 'font-weight: 600;' }, String(fw.blocked_ipv6 || 0)),
|
||||
E('div', { 'style': 'font-size: 0.75rem; color: var(--cs-muted);' }, 'IPv6')
|
||||
])
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderBouncers: function(bouncers) {
|
||||
if (!bouncers || !bouncers.length) {
|
||||
return E('div', { 'class': 'soc-empty' }, [
|
||||
E('div', { 'class': 'soc-empty-icon' }, '\u26A0'),
|
||||
'No bouncers registered'
|
||||
]);
|
||||
renderBouncers: function() {
|
||||
var self = this;
|
||||
if (!this.bouncers.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, 'No bouncers registered');
|
||||
}
|
||||
|
||||
return E('table', { 'class': 'soc-table' }, [
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Name'),
|
||||
E('th', {}, 'IP Address'),
|
||||
E('th', {}, 'IP'),
|
||||
E('th', {}, 'Type'),
|
||||
E('th', {}, 'Last Pull'),
|
||||
E('th', {}, 'Status'),
|
||||
E('th', {}, 'Actions')
|
||||
E('th', {}, 'Action')
|
||||
])),
|
||||
E('tbody', {}, bouncers.map(L.bind(function(b) {
|
||||
E('tbody', {}, this.bouncers.map(function(b) {
|
||||
var lastPull = b.last_pull || b.lastPull;
|
||||
var isActive = this.isRecentPull(lastPull);
|
||||
var isActive = self.isRecent(lastPull);
|
||||
return E('tr', {}, [
|
||||
E('td', {}, E('strong', {}, b.name || 'Unknown')),
|
||||
E('td', {}, E('span', { 'class': 'soc-ip' }, b.ip_address || b.ipAddress || 'N/A')),
|
||||
E('td', {}, E('span', { 'class': 'soc-scenario' }, b.type || 'Unknown')),
|
||||
E('td', { 'class': 'soc-time' }, api.formatRelativeTime(lastPull) || 'Never'),
|
||||
E('td', {}, E('span', { 'class': 'soc-severity ' + (isActive ? 'low' : b.revoked ? 'critical' : 'medium') },
|
||||
b.revoked ? 'REVOKED' : isActive ? 'ACTIVE' : 'IDLE')),
|
||||
E('td', {}, E('span', { 'class': 'cs-ip' }, b.ip_address || b.ipAddress || '-')),
|
||||
E('td', {}, b.type || 'Unknown'),
|
||||
E('td', { 'class': 'cs-time' }, api.formatRelativeTime(lastPull) || 'Never'),
|
||||
E('td', {}, E('span', { 'class': 'cs-badge ' + (isActive ? 'success' : b.revoked ? 'danger' : 'warning') },
|
||||
b.revoked ? 'Revoked' : isActive ? 'Active' : 'Idle')),
|
||||
E('td', {}, E('button', {
|
||||
'class': 'soc-btn soc-btn-sm danger',
|
||||
'click': L.bind(this.handleDelete, this, b.name)
|
||||
'class': 'cs-btn cs-btn-sm danger',
|
||||
'click': function() { self.deleteBouncer(b.name); }
|
||||
}, 'Delete'))
|
||||
]);
|
||||
}, this)))
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
isRecentPull: function(lastPull) {
|
||||
isRecent: function(lastPull) {
|
||||
if (!lastPull) return false;
|
||||
try {
|
||||
var diff = (new Date() - new Date(lastPull)) / 60000;
|
||||
return diff < 5;
|
||||
return (new Date() - new Date(lastPull)) / 60000 < 5;
|
||||
} catch(e) { return false; }
|
||||
},
|
||||
|
||||
handleFwControl: function(action) {
|
||||
fwControl: function(action) {
|
||||
var self = this;
|
||||
api.controlFirewallBouncer(action).then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Firewall bouncer ' + action + ' successful', 'success');
|
||||
self.pollData();
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
self.toast(r.success ? action + ' successful' : 'Failed: ' + (r.error || 'Unknown'),
|
||||
r.success ? 'success' : 'error');
|
||||
if (r.success) self.pollData();
|
||||
});
|
||||
},
|
||||
|
||||
handleDelete: function(name) {
|
||||
deleteBouncer: function(name) {
|
||||
var self = this;
|
||||
if (!confirm('Delete bouncer "' + name + '"?')) return;
|
||||
api.deleteBouncer(name).then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Bouncer deleted', 'success');
|
||||
self.pollData();
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
self.toast(r.success ? 'Deleted' : 'Failed', r.success ? 'success' : 'error');
|
||||
if (r.success) self.pollData();
|
||||
});
|
||||
},
|
||||
|
||||
showBlockedIPs: function() {
|
||||
var nft = this.nftStats || {};
|
||||
var ipv4 = nft.ipv4_blocked || [];
|
||||
var ipv6 = nft.ipv6_blocked || [];
|
||||
var content = E('div', { 'style': 'max-height: 400px; overflow-y: auto;' }, [
|
||||
E('h4', { 'style': 'margin-bottom: 8px;' }, 'IPv4 (' + ipv4.length + ')'),
|
||||
ipv4.length ? E('div', { 'style': 'background: var(--soc-bg); padding: 8px; border-radius: 4px; margin-bottom: 16px;' },
|
||||
ipv4.map(function(ip) { return E('div', { 'class': 'soc-ip', 'style': 'margin: 4px 0;' }, ip); })
|
||||
) : E('p', { 'style': 'color: var(--soc-text-muted);' }, 'None'),
|
||||
E('h4', { 'style': 'margin-bottom: 8px;' }, 'IPv6 (' + ipv6.length + ')'),
|
||||
ipv6.length ? E('div', { 'style': 'background: var(--soc-bg); padding: 8px; border-radius: 4px;' },
|
||||
ipv6.map(function(ip) { return E('div', { 'class': 'soc-ip', 'style': 'margin: 4px 0;' }, ip); })
|
||||
) : E('p', { 'style': 'color: var(--soc-text-muted);' }, 'None')
|
||||
]);
|
||||
ui.showModal('Blocked IP Addresses', [content, E('div', { 'class': 'right' }, [
|
||||
E('button', { 'class': 'soc-btn', 'click': ui.hideModal }, 'Close')
|
||||
])]);
|
||||
showRegister: function() {
|
||||
document.getElementById('register-form').style.display = 'block';
|
||||
},
|
||||
|
||||
renderRegisterModal: function() {
|
||||
var self = this;
|
||||
return E('div', { 'id': 'register-modal', 'class': 'soc-modal', 'style': 'display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:9999; align-items:center; justify-content:center;' }, [
|
||||
E('div', { 'style': 'background:var(--soc-surface); padding:24px; border-radius:8px; min-width:320px;' }, [
|
||||
E('h3', { 'style': 'margin:0 0 16px 0;' }, 'Register New Bouncer'),
|
||||
E('input', { 'id': 'bouncer-name', 'class': 'soc-btn', 'style': 'width:100%; margin-bottom:16px;', 'placeholder': 'Bouncer name (e.g. firewall-bouncer)' }),
|
||||
E('div', { 'style': 'display:flex; gap:8px; justify-content:flex-end;' }, [
|
||||
E('button', { 'class': 'soc-btn', 'click': function() { self.closeRegisterModal(); } }, 'Cancel'),
|
||||
E('button', { 'class': 'soc-btn primary', 'click': function() { self.submitRegister(); } }, 'Register')
|
||||
])
|
||||
])
|
||||
]);
|
||||
hideRegister: function() {
|
||||
document.getElementById('register-form').style.display = 'none';
|
||||
},
|
||||
|
||||
showRegisterModal: function() { document.getElementById('register-modal').style.display = 'flex'; },
|
||||
closeRegisterModal: function() { document.getElementById('register-modal').style.display = 'none'; },
|
||||
|
||||
submitRegister: function() {
|
||||
var self = this;
|
||||
var name = document.getElementById('bouncer-name').value.trim();
|
||||
if (!name || !/^[a-z0-9_-]+$/i.test(name)) {
|
||||
self.showToast('Invalid bouncer name', 'error');
|
||||
self.toast('Invalid name', 'error');
|
||||
return;
|
||||
}
|
||||
api.registerBouncer(name).then(function(r) {
|
||||
self.closeRegisterModal();
|
||||
self.hideRegister();
|
||||
if (r.success && r.api_key) {
|
||||
ui.showModal('Bouncer Registered', [
|
||||
E('p', { 'style': 'color: var(--soc-success);' }, 'Bouncer "' + name + '" registered!'),
|
||||
E('p', { 'style': 'margin-top: 12px;' }, 'API Key:'),
|
||||
E('code', { 'style': 'display: block; background: var(--soc-bg); padding: 12px; border-radius: 4px; word-break: break-all; margin: 8px 0;' }, r.api_key),
|
||||
E('p', { 'style': 'color: var(--soc-warning); font-size: 12px;' }, 'Save this key now - it will not be shown again!'),
|
||||
E('div', { 'class': 'right', 'style': 'margin-top: 16px;' }, [
|
||||
E('button', { 'class': 'soc-btn', 'click': function() { ui.hideModal(); self.pollData(); } }, 'Close')
|
||||
E('p', {}, 'Bouncer "' + name + '" registered!'),
|
||||
E('p', { 'style': 'margin-top: 0.5rem;' }, 'API Key:'),
|
||||
E('code', { 'style': 'display: block; background: var(--cs-bg); padding: 0.75rem; border-radius: 0.25rem; word-break: break-all;' }, r.api_key),
|
||||
E('p', { 'style': 'color: var(--cs-warning); font-size: 0.75rem; margin-top: 0.5rem;' }, 'Save this key - it will not be shown again!'),
|
||||
E('div', { 'class': 'right', 'style': 'margin-top: 1rem;' }, [
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { ui.hideModal(); self.pollData(); } }, 'Close')
|
||||
])
|
||||
]);
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
self.toast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -300,24 +259,24 @@ return view.extend({
|
||||
var self = this;
|
||||
return Promise.all([
|
||||
api.getBouncers(),
|
||||
api.getFirewallBouncerStatus(),
|
||||
api.getNftablesStats()
|
||||
api.getFirewallBouncerStatus()
|
||||
]).then(function(data) {
|
||||
self.bouncers = (data[0] && data[0].bouncers) || data[0] || [];
|
||||
self.bouncers = Array.isArray(data[0]) ? data[0] : (data[0].bouncers || []);
|
||||
self.fwStatus = data[1] || {};
|
||||
self.nftStats = data[2] || {};
|
||||
var el = document.getElementById('bouncers-list');
|
||||
if (el) dom.content(el, self.renderBouncers(self.bouncers));
|
||||
if (el) dom.content(el, self.renderBouncers());
|
||||
});
|
||||
},
|
||||
|
||||
showToast: function(msg, type) {
|
||||
var t = document.querySelector('.soc-toast');
|
||||
toast: function(msg, type) {
|
||||
var t = document.querySelector('.cs-toast');
|
||||
if (t) t.remove();
|
||||
t = E('div', { 'class': 'soc-toast ' + type }, msg);
|
||||
t = E('div', { 'class': 'cs-toast ' + type }, msg);
|
||||
document.body.appendChild(t);
|
||||
setTimeout(function() { t.remove(); }, 4000);
|
||||
},
|
||||
|
||||
handleSaveApply: null, handleSave: null, handleReset: null
|
||||
handleSaveApply: null,
|
||||
handleSave: null,
|
||||
handleReset: null
|
||||
});
|
||||
|
||||
@ -1,73 +1,83 @@
|
||||
'use strict';
|
||||
'require view';
|
||||
'require dom';
|
||||
'require poll';
|
||||
'require ui';
|
||||
'require crowdsec-dashboard.api as api';
|
||||
|
||||
/**
|
||||
* CrowdSec SOC - Decisions View
|
||||
* Active bans and blocks with GeoIP
|
||||
*/
|
||||
|
||||
return view.extend({
|
||||
title: _('Decisions'),
|
||||
decisions: [],
|
||||
|
||||
load: function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = L.resource('crowdsec-dashboard/soc.css');
|
||||
link.href = L.resource('crowdsec-dashboard/dashboard.css');
|
||||
document.head.appendChild(link);
|
||||
document.body.classList.add('cs-soc-fullwidth');
|
||||
return api.getDecisions();
|
||||
return api.getDecisions().catch(function() { return []; });
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
var self = this;
|
||||
this.decisions = this.parseDecisions(data);
|
||||
|
||||
return E('div', { 'class': 'soc-dashboard' }, [
|
||||
this.renderHeader(),
|
||||
return E('div', { 'class': 'cs-view' }, [
|
||||
E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, 'CrowdSec Decisions'),
|
||||
E('div', { 'class': 'cs-status' }, [
|
||||
E('span', { 'class': 'cs-badge ' + (this.decisions.length > 0 ? 'danger' : 'success') },
|
||||
this.decisions.length + ' active')
|
||||
])
|
||||
]),
|
||||
this.renderNav('decisions'),
|
||||
E('div', { 'class': 'soc-card' }, [
|
||||
E('div', { 'class': 'soc-card-header' }, [
|
||||
'Active Decisions (' + this.decisions.length + ')',
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Active Decisions',
|
||||
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
||||
E('input', {
|
||||
'type': 'text',
|
||||
'class': 'soc-btn',
|
||||
'placeholder': 'Search IP...',
|
||||
'id': 'search-input',
|
||||
'style': 'width: 150px;',
|
||||
'type': 'text', 'class': 'cs-input', 'id': 'search-input',
|
||||
'placeholder': 'Search IP...', 'style': 'width: 120px;',
|
||||
'keyup': function() { self.filterDecisions(); }
|
||||
}),
|
||||
E('button', { 'class': 'soc-btn primary', 'click': function() { self.showBanModal(); } }, '+ Ban IP')
|
||||
E('button', { 'class': 'cs-btn primary', 'click': function() { self.showBanForm(); } }, '+ Ban')
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'soc-card-body', 'id': 'decisions-list' }, this.renderDecisions(this.decisions))
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'decisions-list' }, this.renderDecisions(this.decisions))
|
||||
]),
|
||||
this.renderBanModal()
|
||||
]);
|
||||
},
|
||||
|
||||
renderHeader: function() {
|
||||
return E('div', { 'class': 'soc-header' }, [
|
||||
E('div', { 'class': 'soc-title' }, [
|
||||
E('svg', { 'viewBox': '0 0 24 24' }, [E('path', { 'd': 'M12 2L2 7v10l10 5 10-5V7L12 2z' })]),
|
||||
'CrowdSec Security Operations'
|
||||
]),
|
||||
E('div', { 'class': 'soc-status' }, [E('span', { 'class': 'soc-status-dot online' }), 'DECISIONS'])
|
||||
E('div', { 'class': 'cs-card', 'id': 'ban-form', 'style': 'display: none;' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Ban IP Address'),
|
||||
E('div', { 'class': 'cs-card-body' }, [
|
||||
E('div', { 'class': 'cs-field' }, [
|
||||
E('label', { 'class': 'cs-label' }, 'IP Address'),
|
||||
E('input', { 'type': 'text', 'id': 'ban-ip', 'class': 'cs-input', 'placeholder': '192.168.1.100' })
|
||||
]),
|
||||
E('div', { 'class': 'cs-field' }, [
|
||||
E('label', { 'class': 'cs-label' }, 'Duration'),
|
||||
E('input', { 'type': 'text', 'id': 'ban-duration', 'class': 'cs-input', 'value': '4h', 'placeholder': '4h' })
|
||||
]),
|
||||
E('div', { 'class': 'cs-field' }, [
|
||||
E('label', { 'class': 'cs-label' }, 'Reason'),
|
||||
E('input', { 'type': 'text', 'id': 'ban-reason', 'class': 'cs-input', 'placeholder': 'Manual ban' })
|
||||
]),
|
||||
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
||||
E('button', { 'class': 'cs-btn primary', 'click': function() { self.submitBan(); } }, 'Ban'),
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { self.hideBanForm(); } }, 'Cancel')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderNav: function(active) {
|
||||
var tabs = ['overview', 'alerts', 'decisions', 'bouncers', 'settings'];
|
||||
return E('div', { 'class': 'soc-nav' }, tabs.map(function(t) {
|
||||
var tabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'alerts', label: 'Alerts' },
|
||||
{ id: 'decisions', label: 'Decisions' },
|
||||
{ id: 'bouncers', label: 'Bouncers' },
|
||||
{ id: 'settings', label: 'Settings' }
|
||||
];
|
||||
return E('div', { 'class': 'cs-nav' }, tabs.map(function(t) {
|
||||
return E('a', {
|
||||
'href': L.url('admin/secubox/security/crowdsec/' + t),
|
||||
'class': active === t ? 'active' : ''
|
||||
}, t.charAt(0).toUpperCase() + t.slice(1));
|
||||
'href': L.url('admin/secubox/services/crowdsec/' + t.id),
|
||||
'class': active === t.id ? 'active' : ''
|
||||
}, t.label);
|
||||
}));
|
||||
},
|
||||
|
||||
@ -88,43 +98,40 @@ return view.extend({
|
||||
|
||||
renderDecisions: function(decisions) {
|
||||
if (!decisions.length) {
|
||||
return E('div', { 'class': 'soc-empty' }, [
|
||||
E('div', { 'class': 'soc-empty-icon' }, '\u2713'),
|
||||
'No active decisions'
|
||||
]);
|
||||
return E('div', { 'class': 'cs-empty' }, 'No active decisions');
|
||||
}
|
||||
|
||||
return E('table', { 'class': 'soc-table' }, [
|
||||
var self = this;
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'IP Address'),
|
||||
E('th', {}, 'Country'),
|
||||
E('th', {}, 'Scenario'),
|
||||
E('th', {}, 'Type'),
|
||||
E('th', {}, 'Duration'),
|
||||
E('th', {}, 'Actions')
|
||||
E('th', {}, 'Action')
|
||||
])),
|
||||
E('tbody', {}, decisions.map(L.bind(function(d) {
|
||||
var country = d.source?.cn || d.source?.country || '';
|
||||
E('tbody', {}, decisions.map(function(d) {
|
||||
var country = (d.source && (d.source.cn || d.source.country)) || '';
|
||||
return E('tr', {}, [
|
||||
E('td', {}, E('span', { 'class': 'soc-ip' }, d.value || 'N/A')),
|
||||
E('td', { 'class': 'soc-geo' }, [
|
||||
E('span', { 'class': 'soc-flag' }, api.getCountryFlag(country)),
|
||||
E('span', { 'class': 'soc-country' }, country)
|
||||
E('td', {}, E('span', { 'class': 'cs-ip' }, d.value || '-')),
|
||||
E('td', {}, [
|
||||
E('span', { 'class': 'cs-flag' }, api.getCountryFlag(country)),
|
||||
' ', country
|
||||
]),
|
||||
E('td', {}, E('span', { 'class': 'soc-scenario' }, api.parseScenario(d.scenario))),
|
||||
E('td', {}, E('span', { 'class': 'soc-severity ' + (d.type === 'ban' ? 'critical' : 'medium') }, d.type || 'ban')),
|
||||
E('td', { 'class': 'soc-time' }, api.formatDuration(d.duration)),
|
||||
E('td', {}, E('span', { 'class': 'cs-scenario' }, api.parseScenario(d.scenario))),
|
||||
E('td', {}, E('span', { 'class': 'cs-badge danger' }, d.type || 'ban')),
|
||||
E('td', { 'class': 'cs-time' }, api.formatDuration(d.duration)),
|
||||
E('td', {}, E('button', {
|
||||
'class': 'soc-btn soc-btn-sm danger',
|
||||
'click': L.bind(this.handleUnban, this, d.value)
|
||||
'class': 'cs-btn cs-btn-sm danger',
|
||||
'click': function() { self.handleUnban(d.value); }
|
||||
}, 'Unban'))
|
||||
]);
|
||||
}, this)))
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
filterDecisions: function() {
|
||||
var query = (document.getElementById('search-input')?.value || '').toLowerCase();
|
||||
var query = (document.getElementById('search-input').value || '').toLowerCase();
|
||||
var filtered = this.decisions.filter(function(d) {
|
||||
return !query || (d.value || '').toLowerCase().includes(query);
|
||||
});
|
||||
@ -136,64 +143,59 @@ return view.extend({
|
||||
var self = this;
|
||||
if (!confirm('Unban ' + ip + '?')) return;
|
||||
api.removeBan(ip).then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Unbanned ' + ip, 'success');
|
||||
return api.getDecisions().then(function(data) {
|
||||
self.decisions = self.parseDecisions(data);
|
||||
self.filterDecisions();
|
||||
});
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
self.toast(r.success ? 'Unbanned ' + ip : 'Failed: ' + (r.error || 'Unknown'),
|
||||
r.success ? 'success' : 'error');
|
||||
if (r.success) self.refreshDecisions();
|
||||
});
|
||||
},
|
||||
|
||||
renderBanModal: function() {
|
||||
var self = this;
|
||||
return E('div', { 'id': 'ban-modal', 'class': 'soc-modal', 'style': 'display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); z-index:9999; align-items:center; justify-content:center;' }, [
|
||||
E('div', { 'style': 'background:var(--soc-surface); padding:24px; border-radius:8px; min-width:300px;' }, [
|
||||
E('h3', { 'style': 'margin:0 0 16px 0;' }, 'Ban IP Address'),
|
||||
E('input', { 'id': 'ban-ip', 'class': 'soc-btn', 'style': 'width:100%; margin-bottom:12px;', 'placeholder': 'IP Address' }),
|
||||
E('input', { 'id': 'ban-duration', 'class': 'soc-btn', 'style': 'width:100%; margin-bottom:12px;', 'placeholder': 'Duration (e.g. 4h)', 'value': '4h' }),
|
||||
E('input', { 'id': 'ban-reason', 'class': 'soc-btn', 'style': 'width:100%; margin-bottom:16px;', 'placeholder': 'Reason' }),
|
||||
E('div', { 'style': 'display:flex; gap:8px; justify-content:flex-end;' }, [
|
||||
E('button', { 'class': 'soc-btn', 'click': function() { self.closeBanModal(); } }, 'Cancel'),
|
||||
E('button', { 'class': 'soc-btn primary', 'click': function() { self.submitBan(); } }, 'Ban')
|
||||
])
|
||||
])
|
||||
]);
|
||||
showBanForm: function() {
|
||||
document.getElementById('ban-form').style.display = 'block';
|
||||
},
|
||||
|
||||
showBanModal: function() { document.getElementById('ban-modal').style.display = 'flex'; },
|
||||
closeBanModal: function() { document.getElementById('ban-modal').style.display = 'none'; },
|
||||
hideBanForm: function() {
|
||||
document.getElementById('ban-form').style.display = 'none';
|
||||
},
|
||||
|
||||
submitBan: function() {
|
||||
var self = this;
|
||||
var ip = document.getElementById('ban-ip').value.trim();
|
||||
var duration = document.getElementById('ban-duration').value.trim() || '4h';
|
||||
var reason = document.getElementById('ban-reason').value.trim() || 'Manual ban';
|
||||
if (!ip || !api.isValidIP(ip)) { self.showToast('Invalid IP', 'error'); return; }
|
||||
|
||||
if (!ip || !api.isValidIP(ip)) {
|
||||
self.toast('Invalid IP address', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
api.addBan(ip, duration, reason).then(function(r) {
|
||||
self.toast(r.success ? 'Banned ' + ip : 'Failed: ' + (r.error || 'Unknown'),
|
||||
r.success ? 'success' : 'error');
|
||||
if (r.success) {
|
||||
self.showToast('Banned ' + ip, 'success');
|
||||
self.closeBanModal();
|
||||
return api.getDecisions().then(function(data) {
|
||||
self.decisions = self.parseDecisions(data);
|
||||
self.filterDecisions();
|
||||
});
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
self.hideBanForm();
|
||||
self.refreshDecisions();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
showToast: function(msg, type) {
|
||||
var t = document.querySelector('.soc-toast');
|
||||
refreshDecisions: function() {
|
||||
var self = this;
|
||||
api.getDecisions().then(function(data) {
|
||||
self.decisions = self.parseDecisions(data);
|
||||
var el = document.getElementById('decisions-list');
|
||||
if (el) dom.content(el, self.renderDecisions(self.decisions));
|
||||
});
|
||||
},
|
||||
|
||||
toast: function(msg, type) {
|
||||
var t = document.querySelector('.cs-toast');
|
||||
if (t) t.remove();
|
||||
t = E('div', { 'class': 'soc-toast ' + type }, msg);
|
||||
t = E('div', { 'class': 'cs-toast ' + type }, msg);
|
||||
document.body.appendChild(t);
|
||||
setTimeout(function() { t.remove(); }, 4000);
|
||||
},
|
||||
|
||||
handleSaveApply: null, handleSave: null, handleReset: null
|
||||
handleSaveApply: null,
|
||||
handleSave: null,
|
||||
handleReset: null
|
||||
});
|
||||
|
||||
@ -2,56 +2,55 @@
|
||||
'require view';
|
||||
'require dom';
|
||||
'require poll';
|
||||
'require ui';
|
||||
'require uci';
|
||||
'require crowdsec-dashboard.api as api';
|
||||
|
||||
/**
|
||||
* CrowdSec SOC Dashboard - Overview
|
||||
* SOC-compliant design with GeoIP
|
||||
* Version 1.2.0
|
||||
*/
|
||||
|
||||
return view.extend({
|
||||
title: _('CrowdSec SOC'),
|
||||
|
||||
load: function() {
|
||||
return Promise.all([
|
||||
api.getOverview().catch(function() { return {}; })
|
||||
]);
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = L.resource('crowdsec-dashboard/dashboard.css');
|
||||
document.head.appendChild(link);
|
||||
return api.getOverview().catch(function() { return {}; });
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
var self = this;
|
||||
var status = data[0] || {};
|
||||
var s = data || {};
|
||||
|
||||
// Apply dashboard class
|
||||
document.body.classList.add('cs-fullwidth');
|
||||
|
||||
var view = E('div', { 'class': 'cs-dashboard cs-theme-classic' }, [
|
||||
this.renderHeader(status),
|
||||
this.renderNav('overview'),
|
||||
E('div', { 'id': 'cs-stats' }, this.renderStats(status)),
|
||||
E('div', { 'class': 'cs-grid-2' }, [
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, ['Recent Alerts', E('span', { 'class': 'cs-time' }, 'Last 24h')]),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'recent-alerts' }, this.renderAlerts(status.alerts || []))
|
||||
]),
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Threat Origins'),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'geo-dist' }, this.renderGeo(status.countries || {}))
|
||||
var view = E('div', { 'class': 'cs-view' }, [
|
||||
// Header
|
||||
E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, 'CrowdSec Dashboard'),
|
||||
E('div', { 'class': 'cs-status' }, [
|
||||
E('span', { 'class': 'cs-dot ' + (s.crowdsec === 'running' ? 'online' : 'offline') }),
|
||||
s.crowdsec === 'running' ? 'Running' : 'Stopped'
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'System Health',
|
||||
E('button', { 'class': 'cs-btn cs-btn-sm', 'click': function() { self.runHealthCheck(); } }, 'Test')
|
||||
|
||||
// Navigation
|
||||
this.renderNav('overview'),
|
||||
|
||||
// Stats
|
||||
E('div', { 'class': 'cs-stats', 'id': 'cs-stats' }, this.renderStats(s)),
|
||||
|
||||
// Two column layout
|
||||
E('div', { 'class': 'cs-grid-2' }, [
|
||||
// Alerts card
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Recent Alerts'),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'cs-alerts' }, this.renderAlerts(s.alerts))
|
||||
]),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'health-check' }, this.renderHealth(status))
|
||||
// Health card
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'System Health'),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderHealth(s))
|
||||
])
|
||||
]),
|
||||
|
||||
// Geo card
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Threat Types Blocked'),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderThreatTypes(status.top_scenarios_raw))
|
||||
E('div', { 'class': 'cs-card-header' }, 'Threat Origins'),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'cs-geo' }, this.renderGeo(s.countries))
|
||||
])
|
||||
]);
|
||||
|
||||
@ -59,21 +58,6 @@ return view.extend({
|
||||
return view;
|
||||
},
|
||||
|
||||
renderHeader: function(s) {
|
||||
return E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, [
|
||||
E('svg', { 'viewBox': '0 0 24 24' }, [
|
||||
E('path', { 'd': 'M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l6.9 3.45L12 11.09 5.1 7.63 12 4.18zM4 8.82l7 3.5v7.36l-7-3.5V8.82zm9 10.86v-7.36l7-3.5v7.36l-7 3.5z' })
|
||||
]),
|
||||
'CrowdSec Security Operations'
|
||||
]),
|
||||
E('div', { 'class': 'cs-status' }, [
|
||||
E('span', { 'class': 'cs-status-dot ' + (s.crowdsec === 'running' ? 'online' : 'offline') }),
|
||||
s.crowdsec === 'running' ? 'OPERATIONAL' : 'OFFLINE'
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderNav: function(active) {
|
||||
var tabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
@ -84,83 +68,72 @@ return view.extend({
|
||||
];
|
||||
return E('div', { 'class': 'cs-nav' }, tabs.map(function(t) {
|
||||
return E('a', {
|
||||
'href': L.url('admin/secubox/security/crowdsec/' + t.id),
|
||||
'href': L.url('admin/secubox/services/crowdsec/' + t.id),
|
||||
'class': active === t.id ? 'active' : ''
|
||||
}, t.label);
|
||||
}));
|
||||
},
|
||||
|
||||
renderStats: function(d) {
|
||||
var totalBans = d.active_bans || d.total_decisions || 0;
|
||||
var droppedPkts = parseInt(d.dropped_packets || 0);
|
||||
var droppedBytes = parseInt(d.dropped_bytes || 0);
|
||||
renderStats: function(s) {
|
||||
var stats = [
|
||||
{ label: 'Active Bans', value: this.formatNumber(totalBans), type: totalBans > 0 ? 'success' : '' },
|
||||
{ label: 'Blocked Packets', value: this.formatNumber(droppedPkts), type: droppedPkts > 0 ? 'danger' : '' },
|
||||
{ label: 'Blocked Traffic', value: this.formatBytes(droppedBytes), type: droppedBytes > 0 ? 'danger' : '' },
|
||||
{ label: 'Alerts (24h)', value: d.alerts_24h || 0, type: (d.alerts_24h || 0) > 10 ? 'warning' : '' },
|
||||
{ label: 'Local Bans', value: d.local_decisions || 0, type: (d.local_decisions || 0) > 0 ? 'warning' : '' },
|
||||
{ label: 'Bouncers', value: d.bouncer_count || 0, type: (d.bouncer_count || 0) > 0 ? 'success' : 'warning' }
|
||||
{ label: 'Active Bans', value: s.active_bans || 0, type: (s.active_bans || 0) > 0 ? 'success' : '' },
|
||||
{ label: 'Alerts (24h)', value: s.alerts_24h || 0, type: (s.alerts_24h || 0) > 10 ? 'warning' : '' },
|
||||
{ label: 'Blocked Packets', value: this.fmt(s.dropped_packets || 0), type: (s.dropped_packets || 0) > 0 ? 'danger' : '' },
|
||||
{ label: 'Bouncers', value: s.bouncer_count || 0, type: (s.bouncer_count || 0) > 0 ? 'success' : 'warning' }
|
||||
];
|
||||
return E('div', { 'class': 'cs-stats' }, stats.map(function(s) {
|
||||
return E('div', { 'class': 'cs-stat ' + s.type }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(s.value)),
|
||||
E('div', { 'class': 'cs-stat-label' }, s.label)
|
||||
return stats.map(function(st) {
|
||||
return E('div', { 'class': 'cs-stat ' + st.type }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(st.value)),
|
||||
E('div', { 'class': 'cs-stat-label' }, st.label)
|
||||
]);
|
||||
}));
|
||||
},
|
||||
|
||||
formatNumber: function(n) {
|
||||
if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
|
||||
if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
|
||||
return String(n);
|
||||
},
|
||||
|
||||
formatBytes: function(bytes) {
|
||||
if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + 'GB';
|
||||
if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + 'MB';
|
||||
if (bytes >= 1024) return (bytes / 1024).toFixed(1) + 'KB';
|
||||
return bytes + 'B';
|
||||
});
|
||||
},
|
||||
|
||||
renderAlerts: function(alerts) {
|
||||
if (!alerts || !alerts.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, [
|
||||
E('div', { 'class': 'cs-empty-icon' }, '\u2713'),
|
||||
'No recent alerts'
|
||||
]);
|
||||
alerts = Array.isArray(alerts) ? alerts : [];
|
||||
if (!alerts.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, 'No recent alerts');
|
||||
}
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Time'),
|
||||
E('th', {}, 'Source'),
|
||||
E('th', {}, 'Scenario'),
|
||||
E('th', {}, 'Country')
|
||||
E('th', {}, 'Scenario')
|
||||
])),
|
||||
E('tbody', {}, alerts.slice(0, 10).map(function(a) {
|
||||
E('tbody', {}, alerts.slice(0, 8).map(function(a) {
|
||||
var src = a.source || {};
|
||||
var ip = src.ip || a.source_ip || 'N/A';
|
||||
var country = src.cn || src.country || '';
|
||||
return E('tr', {}, [
|
||||
E('td', { 'class': 'cs-time' }, api.formatRelativeTime(a.created_at)),
|
||||
E('td', {}, E('span', { 'class': 'cs-ip' }, ip)),
|
||||
E('td', {}, E('span', { 'class': 'cs-scenario' }, api.parseScenario(a.scenario))),
|
||||
E('td', { 'class': 'cs-geo' }, [
|
||||
E('span', { 'class': 'cs-flag' }, api.getCountryFlag(country)),
|
||||
E('span', { 'class': 'cs-country' }, country)
|
||||
])
|
||||
E('td', {}, E('span', { 'class': 'cs-ip' }, src.ip || a.source_ip || '-')),
|
||||
E('td', {}, E('span', { 'class': 'cs-scenario' }, api.parseScenario(a.scenario)))
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
renderHealth: function(s) {
|
||||
var checks = [
|
||||
{ label: 'CrowdSec', ok: s.crowdsec === 'running' },
|
||||
{ label: 'LAPI', ok: s.lapi_status === 'available' },
|
||||
{ label: 'CAPI', ok: s.capi_enrolled },
|
||||
{ label: 'Bouncer', ok: (s.bouncer_count || 0) > 0 },
|
||||
{ label: 'GeoIP', ok: s.geoip_enabled }
|
||||
];
|
||||
return E('div', { 'class': 'cs-health' }, checks.map(function(c) {
|
||||
return E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, c.label),
|
||||
E('div', { 'class': 'cs-health-value' }, c.ok ? 'OK' : 'Error')
|
||||
])
|
||||
]);
|
||||
}));
|
||||
},
|
||||
|
||||
renderGeo: function(countries) {
|
||||
var entries = Object.entries(countries || {});
|
||||
if (!entries.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, [
|
||||
E('div', { 'class': 'cs-empty-icon' }, '\u{1F30D}'),
|
||||
'No geographic data'
|
||||
]);
|
||||
return E('div', { 'class': 'cs-empty' }, 'No geographic data');
|
||||
}
|
||||
entries.sort(function(a, b) { return b[1] - a[1]; });
|
||||
return E('div', { 'class': 'cs-geo-grid' }, entries.slice(0, 12).map(function(e) {
|
||||
@ -172,131 +145,24 @@ return view.extend({
|
||||
}));
|
||||
},
|
||||
|
||||
renderHealth: function(d) {
|
||||
var checks = [
|
||||
{ label: 'CrowdSec', value: d.crowdsec === 'running' ? 'Running' : 'Stopped', ok: d.crowdsec === 'running' },
|
||||
{ label: 'LAPI', value: d.lapi_status === 'available' ? 'OK' : 'Down', ok: d.lapi_status === 'available' },
|
||||
{ label: 'CAPI', value: d.capi_enrolled || d.lapi_status === 'available' ? 'Connected' : 'Disconnected', ok: d.capi_enrolled || d.lapi_status === 'available' },
|
||||
{ label: 'Bouncer', value: (d.bouncer_count || 0) > 0 ? 'Active' : 'None', ok: (d.bouncer_count || 0) > 0 },
|
||||
{ label: 'GeoIP', value: d.geoip_enabled ? 'Enabled' : 'Disabled', ok: d.geoip_enabled },
|
||||
{ label: 'Acquisition', value: (d.acquisition_count || 0) + ' sources', ok: (d.acquisition_count || 0) > 0 }
|
||||
];
|
||||
return E('div', { 'class': 'cs-health' }, checks.map(function(c) {
|
||||
return E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, c.label),
|
||||
E('div', { 'class': 'cs-health-value' }, c.value)
|
||||
])
|
||||
]);
|
||||
}));
|
||||
},
|
||||
|
||||
renderScenarios: function(scenarios) {
|
||||
if (!scenarios || !scenarios.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, 'No scenarios loaded');
|
||||
}
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Scenario'),
|
||||
E('th', {}, 'Status'),
|
||||
E('th', {}, 'Type')
|
||||
])),
|
||||
E('tbody', {}, scenarios.slice(0, 12).map(function(s) {
|
||||
var name = s.name || s;
|
||||
var enabled = !s.status || s.status.includes('enabled');
|
||||
var isLocal = s.status && s.status.includes('local');
|
||||
return E('tr', {}, [
|
||||
E('td', {}, E('span', { 'class': 'cs-scenario' }, api.parseScenario(name))),
|
||||
E('td', {}, E('span', { 'class': 'cs-severity ' + (enabled ? 'low' : 'medium') }, enabled ? 'ENABLED' : 'DISABLED')),
|
||||
E('td', { 'class': 'cs-time' }, isLocal ? 'Local' : 'Hub')
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
renderThreatTypes: function(rawJson) {
|
||||
var self = this;
|
||||
var threats = [];
|
||||
if (rawJson) {
|
||||
try { threats = JSON.parse(rawJson); } catch(e) {}
|
||||
}
|
||||
if (!threats || !threats.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, [
|
||||
E('div', { 'class': 'cs-empty-icon' }, '\u{1F6E1}'),
|
||||
'No threats blocked yet'
|
||||
]);
|
||||
}
|
||||
var total = threats.reduce(function(sum, t) { return sum + (t.count || 0); }, 0);
|
||||
return E('div', { 'class': 'cs-threat-types' }, [
|
||||
E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Threat Type'),
|
||||
E('th', {}, 'Blocked'),
|
||||
E('th', { 'style': 'width:40%' }, 'Distribution')
|
||||
])),
|
||||
E('tbody', {}, threats.map(function(t) {
|
||||
var pct = total > 0 ? Math.round((t.count / total) * 100) : 0;
|
||||
var severity = t.scenario.includes('bruteforce') ? 'high' :
|
||||
t.scenario.includes('exploit') ? 'critical' :
|
||||
t.scenario.includes('scan') ? 'medium' : 'low';
|
||||
return E('tr', {}, [
|
||||
E('td', {}, [
|
||||
E('span', { 'class': 'cs-threat-icon ' + severity }, self.getThreatIcon(t.scenario)),
|
||||
E('span', { 'class': 'cs-scenario' }, t.scenario)
|
||||
]),
|
||||
E('td', { 'class': 'cs-threat-count' }, self.formatNumber(t.count)),
|
||||
E('td', {}, E('div', { 'class': 'cs-bar-wrap' }, [
|
||||
E('div', { 'class': 'cs-bar ' + severity, 'style': 'width:' + pct + '%' }),
|
||||
E('span', { 'class': 'cs-bar-pct' }, pct + '%')
|
||||
]))
|
||||
]);
|
||||
}))
|
||||
]),
|
||||
E('div', { 'class': 'cs-threat-total' }, 'Total blocked: ' + self.formatNumber(total))
|
||||
]);
|
||||
},
|
||||
|
||||
getThreatIcon: function(scenario) {
|
||||
if (scenario.includes('bruteforce')) return '\u{1F510}';
|
||||
if (scenario.includes('exploit')) return '\u{1F4A3}';
|
||||
if (scenario.includes('scan')) return '\u{1F50D}';
|
||||
if (scenario.includes('http')) return '\u{1F310}';
|
||||
return '\u26A0';
|
||||
fmt: function(n) {
|
||||
if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
|
||||
if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
|
||||
return String(n);
|
||||
},
|
||||
|
||||
pollData: function() {
|
||||
var self = this;
|
||||
return api.getOverview().then(function(data) {
|
||||
return api.getOverview().then(function(s) {
|
||||
var el = document.getElementById('cs-stats');
|
||||
if (el) dom.content(el, self.renderStats(data));
|
||||
el = document.getElementById('recent-alerts');
|
||||
if (el) dom.content(el, self.renderAlerts(data.alerts || []));
|
||||
el = document.getElementById('geo-dist');
|
||||
if (el) dom.content(el, self.renderGeo(data.countries || {}));
|
||||
if (el) dom.content(el, self.renderStats(s));
|
||||
el = document.getElementById('cs-alerts');
|
||||
if (el) dom.content(el, self.renderAlerts(s.alerts));
|
||||
el = document.getElementById('cs-geo');
|
||||
if (el) dom.content(el, self.renderGeo(s.countries));
|
||||
});
|
||||
},
|
||||
|
||||
runHealthCheck: function() {
|
||||
var self = this;
|
||||
var el = document.getElementById('health-check');
|
||||
if (el) dom.content(el, E('div', { 'class': 'cs-loading' }, [E('div', { 'class': 'cs-spinner' }), 'Testing...']));
|
||||
return api.getHealthCheck().then(function(r) {
|
||||
if (el) dom.content(el, self.renderHealth(r));
|
||||
self.showToast('Health check completed', 'success');
|
||||
}).catch(function(e) {
|
||||
self.showToast('Health check failed', 'error');
|
||||
});
|
||||
},
|
||||
|
||||
showToast: function(msg, type) {
|
||||
var t = document.querySelector('.cs-toast');
|
||||
if (t) t.remove();
|
||||
t = E('div', { 'class': 'cs-toast ' + type }, msg);
|
||||
document.body.appendChild(t);
|
||||
setTimeout(function() { t.remove(); }, 4000);
|
||||
},
|
||||
|
||||
handleSaveApply: null,
|
||||
handleSave: null,
|
||||
handleReset: null
|
||||
|
||||
@ -2,441 +2,260 @@
|
||||
'require view';
|
||||
'require dom';
|
||||
'require ui';
|
||||
'require uci';
|
||||
'require fs';
|
||||
'require crowdsec-dashboard.api as api';
|
||||
|
||||
/**
|
||||
* CrowdSec SOC - Settings View
|
||||
* System configuration and management
|
||||
*/
|
||||
|
||||
return view.extend({
|
||||
title: _('Settings'),
|
||||
status: {},
|
||||
machines: [],
|
||||
collections: [],
|
||||
settings: {},
|
||||
|
||||
load: function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = L.resource('crowdsec-dashboard/dashboard.css');
|
||||
document.head.appendChild(link);
|
||||
return Promise.all([
|
||||
api.getStatus(),
|
||||
api.getMachines(),
|
||||
api.getCollections(),
|
||||
api.getAcquisitionConfig(),
|
||||
api.getSettings(),
|
||||
uci.load('crowdsec-dashboard')
|
||||
api.getMachines(),
|
||||
api.getCollections()
|
||||
]);
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
var self = this;
|
||||
this.status = data[0] || {};
|
||||
var machinesData = data[1] || {};
|
||||
this.machines = Array.isArray(machinesData) ? machinesData : (machinesData.machines || []);
|
||||
var collectionsData = data[2] || {};
|
||||
this.collections = collectionsData.collections || [];
|
||||
if (this.collections.collections) this.collections = this.collections.collections;
|
||||
this.acquisition = data[3] || {};
|
||||
this.settings = data[4] || {};
|
||||
this.settings = data[1] || {};
|
||||
var machines = Array.isArray(data[2]) ? data[2] : (data[2].machines || []);
|
||||
var colData = data[3] || {};
|
||||
var collections = colData.collections || [];
|
||||
|
||||
document.body.classList.add('cs-fullwidth');
|
||||
|
||||
return E('div', { 'class': 'cs-dashboard cs-theme-classic' }, [
|
||||
this.renderHeader(),
|
||||
this.renderNav('settings'),
|
||||
E('div', { 'class': 'cs-stats' }, this.renderServiceStats()),
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Service Control',
|
||||
E('span', { 'class': 'cs-severity ' + (this.status.crowdsec === 'running' ? 'low' : 'critical') },
|
||||
this.status.crowdsec === 'running' ? 'RUNNING' : 'STOPPED')
|
||||
]),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderServiceControl())
|
||||
return E('div', { 'class': 'cs-view' }, [
|
||||
// Header
|
||||
E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, 'CrowdSec Settings'),
|
||||
E('div', { 'class': 'cs-status' }, [
|
||||
E('span', { 'class': 'cs-dot ' + (this.status.crowdsec === 'running' ? 'online' : 'offline') }),
|
||||
this.status.crowdsec === 'running' ? 'Running' : 'Stopped'
|
||||
])
|
||||
]),
|
||||
|
||||
// Navigation
|
||||
this.renderNav('settings'),
|
||||
|
||||
// Service Control
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Service Control'),
|
||||
E('div', { 'class': 'cs-card-body' }, [
|
||||
E('div', { 'style': 'display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem;' }, [
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('start'); } }, 'Start'),
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('stop'); } }, 'Stop'),
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { self.svcAction('restart'); } }, 'Restart')
|
||||
]),
|
||||
this.renderHealth()
|
||||
])
|
||||
]),
|
||||
|
||||
// Console Enrollment
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Console Enrollment',
|
||||
E('span', { 'class': 'cs-severity ' + (this.status.capi_enrolled ? 'low' : 'medium') },
|
||||
this.status.capi_enrolled ? 'ENROLLED' : 'NOT ENROLLED')
|
||||
E('span', { 'class': 'cs-badge ' + (this.status.capi_enrolled ? 'success' : 'warning') },
|
||||
this.status.capi_enrolled ? 'Enrolled' : 'Not Enrolled')
|
||||
]),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'console-enrollment' }, this.renderConsoleEnrollment())
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'enrollment-section' }, this.renderEnrollment())
|
||||
]),
|
||||
|
||||
// Two column
|
||||
E('div', { 'class': 'cs-grid-2' }, [
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Acquisition Sources'),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderAcquisition())
|
||||
]),
|
||||
// Machines
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Registered Machines'),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderMachines())
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Installed Collections (' + this.collections.filter(function(c) { return c.status === 'enabled' || c.installed; }).length + ')',
|
||||
E('button', { 'class': 'cs-btn cs-btn-sm', 'click': L.bind(this.updateHub, this) }, 'Update Hub')
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderMachines(machines))
|
||||
]),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'collections-list' }, this.renderCollections())
|
||||
]),
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, 'Configuration Files'),
|
||||
E('div', { 'class': 'cs-card-body' }, this.renderConfigFiles())
|
||||
// Collections
|
||||
E('div', { 'class': 'cs-card' }, [
|
||||
E('div', { 'class': 'cs-card-header' }, [
|
||||
'Collections',
|
||||
E('button', { 'class': 'cs-btn cs-btn-sm', 'click': function() { self.updateHub(); } }, 'Update')
|
||||
]),
|
||||
E('div', { 'class': 'cs-card-body', 'id': 'collections-list' }, this.renderCollections(collections))
|
||||
])
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderHeader: function() {
|
||||
return E('div', { 'class': 'cs-header' }, [
|
||||
E('div', { 'class': 'cs-title' }, [
|
||||
E('svg', { 'viewBox': '0 0 24 24' }, [E('path', { 'd': 'M12 2L2 7v10l10 5 10-5V7L12 2z' })]),
|
||||
'CrowdSec Security Operations'
|
||||
]),
|
||||
E('div', { 'class': 'cs-status' }, [E('span', { 'class': 'cs-status-dot online' }), 'SETTINGS'])
|
||||
]);
|
||||
},
|
||||
|
||||
renderNav: function(active) {
|
||||
var tabs = ['overview', 'alerts', 'decisions', 'bouncers', 'settings'];
|
||||
var tabs = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'alerts', label: 'Alerts' },
|
||||
{ id: 'decisions', label: 'Decisions' },
|
||||
{ id: 'bouncers', label: 'Bouncers' },
|
||||
{ id: 'settings', label: 'Settings' }
|
||||
];
|
||||
return E('div', { 'class': 'cs-nav' }, tabs.map(function(t) {
|
||||
return E('a', {
|
||||
'href': L.url('admin/secubox/security/crowdsec/' + t),
|
||||
'class': active === t ? 'active' : ''
|
||||
}, t.charAt(0).toUpperCase() + t.slice(1));
|
||||
'href': L.url('admin/secubox/services/crowdsec/' + t.id),
|
||||
'class': active === t.id ? 'active' : ''
|
||||
}, t.label);
|
||||
}));
|
||||
},
|
||||
|
||||
renderServiceStats: function() {
|
||||
renderHealth: function() {
|
||||
var s = this.status;
|
||||
return [
|
||||
E('div', { 'class': 'cs-stat ' + (s.crowdsec === 'running' ? 'success' : 'danger') }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, s.crowdsec === 'running' ? 'ON' : 'OFF'),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'CrowdSec Agent')
|
||||
]),
|
||||
E('div', { 'class': 'cs-stat ' + (s.lapi_status === 'available' ? 'success' : 'danger') }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, s.lapi_status === 'available' ? 'OK' : 'DOWN'),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Local API')
|
||||
]),
|
||||
E('div', { 'class': 'cs-stat' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, s.version || 'N/A'),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Version')
|
||||
]),
|
||||
E('div', { 'class': 'cs-stat' }, [
|
||||
E('div', { 'class': 'cs-stat-value' }, String(this.machines.length)),
|
||||
E('div', { 'class': 'cs-stat-label' }, 'Machines')
|
||||
])
|
||||
var checks = [
|
||||
{ label: 'Agent', ok: s.crowdsec === 'running' },
|
||||
{ label: 'LAPI', ok: s.lapi_status === 'available' },
|
||||
{ label: 'CAPI', ok: s.capi_enrolled }
|
||||
];
|
||||
return E('div', { 'class': 'cs-health' }, checks.map(function(c) {
|
||||
return E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (c.ok ? 'ok' : 'error') }, c.ok ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, c.label),
|
||||
E('div', { 'class': 'cs-health-value' }, c.ok ? 'OK' : 'Error')
|
||||
])
|
||||
]);
|
||||
}));
|
||||
},
|
||||
|
||||
renderServiceControl: function() {
|
||||
renderEnrollment: function() {
|
||||
var self = this;
|
||||
var running = this.status.crowdsec === 'running';
|
||||
var enrolled = this.status.capi_enrolled;
|
||||
var key = this.settings.enrollment_key || '';
|
||||
var name = this.settings.machine_name || '';
|
||||
|
||||
return E('div', {}, [
|
||||
E('div', { 'style': 'display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;' }, [
|
||||
E('button', {
|
||||
'class': 'cs-btn ' + (running ? '' : 'primary'),
|
||||
'click': function() { self.serviceAction('start'); }
|
||||
}, 'Start'),
|
||||
E('button', {
|
||||
'class': 'cs-btn ' + (running ? 'danger' : ''),
|
||||
'click': function() { self.serviceAction('stop'); }
|
||||
}, 'Stop'),
|
||||
E('button', {
|
||||
'class': 'cs-btn',
|
||||
'click': function() { self.serviceAction('restart'); }
|
||||
}, 'Restart'),
|
||||
E('button', {
|
||||
'class': 'cs-btn',
|
||||
'click': function() { self.serviceAction('reload'); }
|
||||
}, 'Reload')
|
||||
E('p', { 'style': 'color: var(--cs-muted); margin-bottom: 1rem;' },
|
||||
'Enroll to receive community blocklists from CrowdSec Console.'),
|
||||
E('div', { 'class': 'cs-field' }, [
|
||||
E('label', { 'class': 'cs-label' }, 'Enrollment Key'),
|
||||
E('input', { 'type': 'text', 'id': 'enroll-key', 'class': 'cs-input', 'value': key,
|
||||
'placeholder': 'Get key from app.crowdsec.net' })
|
||||
]),
|
||||
E('div', { 'class': 'cs-health' }, [
|
||||
E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (running ? 'ok' : 'error') }, running ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, 'Agent'),
|
||||
E('div', { 'class': 'cs-health-value' }, running ? 'Running' : 'Stopped')
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (this.status.lapi_status === 'available' ? 'ok' : 'error') },
|
||||
this.status.lapi_status === 'available' ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, 'LAPI'),
|
||||
E('div', { 'class': 'cs-health-value' }, this.status.lapi_status === 'available' ? 'Available' : 'Unavailable')
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (this.status.capi_enrolled ? 'ok' : 'warn') },
|
||||
this.status.capi_enrolled ? '\u2713' : '!'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, 'CAPI'),
|
||||
E('div', { 'class': 'cs-health-value' }, this.status.capi_enrolled ? 'Enrolled' : 'Not enrolled')
|
||||
])
|
||||
])
|
||||
])
|
||||
E('div', { 'class': 'cs-field' }, [
|
||||
E('label', { 'class': 'cs-label' }, 'Machine Name (optional)'),
|
||||
E('input', { 'type': 'text', 'id': 'machine-name', 'class': 'cs-input', 'value': name,
|
||||
'placeholder': 'Custom name for this machine' })
|
||||
]),
|
||||
E('div', { 'style': 'display: flex; gap: 8px;' }, [
|
||||
E('button', { 'class': 'cs-btn primary', 'click': function() { self.saveAndEnroll(); } },
|
||||
enrolled ? 'Re-enroll' : 'Save & Enroll'),
|
||||
E('button', { 'class': 'cs-btn', 'click': function() { self.saveSettings(); } }, 'Save Only'),
|
||||
enrolled ? E('button', { 'class': 'cs-btn danger', 'click': function() { self.disableConsole(); } }, 'Disable') : null
|
||||
].filter(Boolean))
|
||||
]);
|
||||
},
|
||||
|
||||
renderAcquisition: function() {
|
||||
var acq = this.acquisition;
|
||||
var sources = [
|
||||
{ name: 'Syslog', enabled: acq.syslog_enabled, path: acq.syslog_path },
|
||||
{ name: 'SSH', enabled: acq.ssh_enabled },
|
||||
{ name: 'Firewall', enabled: acq.firewall_enabled },
|
||||
{ name: 'HTTP', enabled: acq.http_enabled }
|
||||
];
|
||||
return E('div', { 'class': 'cs-health' }, sources.map(function(src) {
|
||||
return E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (src.enabled ? 'ok' : 'error') }, src.enabled ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, src.name),
|
||||
E('div', { 'class': 'cs-health-value' }, src.enabled ? (src.path || 'Enabled') : 'Disabled')
|
||||
])
|
||||
]);
|
||||
}));
|
||||
renderMachines: function(machines) {
|
||||
if (!machines.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, 'No machines registered');
|
||||
}
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Machine'),
|
||||
E('th', {}, 'Status')
|
||||
])),
|
||||
E('tbody', {}, machines.map(function(m) {
|
||||
var active = m.isValidated || m.is_validated;
|
||||
return E('tr', {}, [
|
||||
E('td', {}, m.machineId || m.machine_id || '-'),
|
||||
E('td', {}, E('span', { 'class': 'cs-badge ' + (active ? 'success' : 'warning') },
|
||||
active ? 'Active' : 'Pending'))
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
renderCollections: function() {
|
||||
renderCollections: function(collections) {
|
||||
var self = this;
|
||||
var installed = this.collections.filter(function(c) {
|
||||
return c.status === 'enabled' || c.installed === 'ok';
|
||||
var installed = collections.filter(function(c) {
|
||||
return c.status === 'enabled' || c.installed;
|
||||
});
|
||||
|
||||
if (!installed.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, [
|
||||
E('div', { 'class': 'cs-empty-icon' }, '\u26A0'),
|
||||
'No collections installed. Click "Update Hub" to fetch available collections.'
|
||||
]);
|
||||
return E('div', { 'class': 'cs-empty' }, 'No collections installed');
|
||||
}
|
||||
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Collection'),
|
||||
E('th', {}, 'Version'),
|
||||
E('th', {}, 'Status'),
|
||||
E('th', {}, 'Actions')
|
||||
E('th', {}, 'Action')
|
||||
])),
|
||||
E('tbody', {}, installed.map(function(c) {
|
||||
return E('tr', {}, [
|
||||
E('td', {}, E('span', { 'class': 'cs-scenario' }, c.name || 'Unknown')),
|
||||
E('td', { 'class': 'cs-time' }, c.version || c.local_version || 'N/A'),
|
||||
E('td', {}, E('span', { 'class': 'cs-severity low' }, 'INSTALLED')),
|
||||
E('td', {}, E('button', {
|
||||
'class': 'cs-btn cs-btn-sm danger',
|
||||
'click': function() { self.removeCollection(c.name); }
|
||||
}, 'Remove'))
|
||||
E('td', {}, c.name || '-'),
|
||||
E('td', {}, E('button', { 'class': 'cs-btn cs-btn-sm danger',
|
||||
'click': function() { self.removeCollection(c.name); } }, 'Remove'))
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
renderMachines: function() {
|
||||
if (!this.machines.length) {
|
||||
return E('div', { 'class': 'cs-empty' }, 'No machines registered');
|
||||
}
|
||||
|
||||
return E('table', { 'class': 'cs-table' }, [
|
||||
E('thead', {}, E('tr', {}, [
|
||||
E('th', {}, 'Machine ID'),
|
||||
E('th', {}, 'IP Address'),
|
||||
E('th', {}, 'Last Update'),
|
||||
E('th', {}, 'Status')
|
||||
])),
|
||||
E('tbody', {}, this.machines.map(function(m) {
|
||||
var isActive = m.isValidated || m.is_validated;
|
||||
return E('tr', {}, [
|
||||
E('td', {}, E('strong', {}, m.machineId || m.machine_id || 'Unknown')),
|
||||
E('td', {}, E('span', { 'class': 'cs-ip' }, m.ipAddress || m.ip_address || 'N/A')),
|
||||
E('td', { 'class': 'cs-time' }, api.formatRelativeTime(m.updated_at || m.updatedAt)),
|
||||
E('td', {}, E('span', { 'class': 'cs-severity ' + (isActive ? 'low' : 'medium') },
|
||||
isActive ? 'ACTIVE' : 'PENDING'))
|
||||
]);
|
||||
}))
|
||||
]);
|
||||
},
|
||||
|
||||
renderConfigFiles: function() {
|
||||
var configs = [
|
||||
{ label: 'Main Config', path: '/etc/crowdsec/config.yaml' },
|
||||
{ label: 'Acquisition', path: '/etc/crowdsec/acquis.yaml' },
|
||||
{ label: 'Profiles', path: '/etc/crowdsec/profiles.yaml' },
|
||||
{ label: 'Local API', path: '/etc/crowdsec/local_api_credentials.yaml' },
|
||||
{ label: 'Firewall Bouncer', path: '/etc/crowdsec/bouncers/crowdsec-firewall-bouncer.yaml' }
|
||||
];
|
||||
|
||||
return E('div', { 'style': 'display: grid; gap: 8px;' }, configs.map(function(cfg) {
|
||||
return E('div', { 'style': 'display: flex; justify-content: space-between; align-items: center; padding: 8px; background: var(--cs-bg); border-radius: 4px;' }, [
|
||||
E('span', { 'style': 'color: var(--cs-text-muted);' }, cfg.label),
|
||||
E('code', { 'class': 'cs-ip' }, cfg.path)
|
||||
]);
|
||||
}));
|
||||
},
|
||||
|
||||
renderConsoleEnrollment: function() {
|
||||
svcAction: function(action) {
|
||||
var self = this;
|
||||
var enrolled = this.status.capi_enrolled;
|
||||
var savedKey = this.settings.enrollment_key || '';
|
||||
var machineName = this.settings.machine_name || '';
|
||||
|
||||
return E('div', {}, [
|
||||
E('p', { 'style': 'color: var(--cs-text-muted); margin-bottom: 16px;' },
|
||||
'Enroll in CrowdSec Console to receive community blocklists and share threat intelligence.'),
|
||||
E('div', { 'style': 'display: grid; gap: 12px; margin-bottom: 16px;' }, [
|
||||
E('div', {}, [
|
||||
E('label', { 'style': 'display: block; margin-bottom: 4px; color: var(--cs-text-muted);' }, 'Enrollment Key'),
|
||||
E('input', {
|
||||
'type': 'text',
|
||||
'id': 'enrollment-key',
|
||||
'class': 'cs-input',
|
||||
'value': savedKey,
|
||||
'placeholder': 'Enter your enrollment key from app.crowdsec.net',
|
||||
'style': 'width: 100%; padding: 8px 12px; border: 1px solid var(--cs-border); border-radius: 4px; background: var(--cs-bg); color: var(--cs-text);'
|
||||
})
|
||||
]),
|
||||
E('div', {}, [
|
||||
E('label', { 'style': 'display: block; margin-bottom: 4px; color: var(--cs-text-muted);' }, 'Machine Name (optional)'),
|
||||
E('input', {
|
||||
'type': 'text',
|
||||
'id': 'machine-name',
|
||||
'class': 'cs-input',
|
||||
'value': machineName,
|
||||
'placeholder': 'Custom name for this machine',
|
||||
'style': 'width: 100%; padding: 8px 12px; border: 1px solid var(--cs-border); border-radius: 4px; background: var(--cs-bg); color: var(--cs-text);'
|
||||
})
|
||||
])
|
||||
]),
|
||||
E('div', { 'style': 'display: flex; gap: 8px; flex-wrap: wrap;' }, [
|
||||
E('button', {
|
||||
'class': 'cs-btn primary',
|
||||
'click': function() { self.saveAndEnroll(); }
|
||||
}, enrolled ? 'Re-enroll' : 'Save & Enroll'),
|
||||
E('button', {
|
||||
'class': 'cs-btn',
|
||||
'click': function() { self.saveSettings(); }
|
||||
}, 'Save Only'),
|
||||
enrolled ? E('button', {
|
||||
'class': 'cs-btn danger',
|
||||
'click': function() { self.disableConsole(); }
|
||||
}, 'Disable') : E('span')
|
||||
]),
|
||||
E('div', { 'class': 'cs-health', 'style': 'margin-top: 16px;' }, [
|
||||
E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (enrolled ? 'ok' : 'error') }, enrolled ? '\u2713' : '\u2717'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, 'Console Status'),
|
||||
E('div', { 'class': 'cs-health-value' }, enrolled ? 'Enrolled and active' : 'Not enrolled')
|
||||
])
|
||||
]),
|
||||
E('div', { 'class': 'cs-health-item' }, [
|
||||
E('div', { 'class': 'cs-health-icon ' + (savedKey ? 'ok' : 'warn') }, savedKey ? '\u2713' : '!'),
|
||||
E('div', {}, [
|
||||
E('div', { 'class': 'cs-health-label' }, 'Key Saved'),
|
||||
E('div', { 'class': 'cs-health-value' }, savedKey ? 'Key stored in config' : 'No key saved')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
api.serviceControl(action).then(function(r) {
|
||||
if (r.success) {
|
||||
self.toast('Service ' + action + ' OK', 'success');
|
||||
setTimeout(function() { location.reload(); }, 1500);
|
||||
} else {
|
||||
self.toast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
saveSettings: function() {
|
||||
var self = this;
|
||||
var key = document.getElementById('enrollment-key').value.trim();
|
||||
var key = document.getElementById('enroll-key').value.trim();
|
||||
var name = document.getElementById('machine-name').value.trim();
|
||||
|
||||
api.saveSettings(key, name, '0').then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Settings saved', 'success');
|
||||
} else {
|
||||
self.showToast('Failed to save: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
}).catch(function(e) {
|
||||
self.showToast('Error: ' + e.message, 'error');
|
||||
self.toast(r.success ? 'Settings saved' : 'Failed', r.success ? 'success' : 'error');
|
||||
});
|
||||
},
|
||||
|
||||
saveAndEnroll: function() {
|
||||
var self = this;
|
||||
var key = document.getElementById('enrollment-key').value.trim();
|
||||
var key = document.getElementById('enroll-key').value.trim();
|
||||
var name = document.getElementById('machine-name').value.trim();
|
||||
if (!key) { self.toast('Enter enrollment key', 'error'); return; }
|
||||
|
||||
if (!key) {
|
||||
self.showToast('Please enter an enrollment key', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// First save the settings
|
||||
api.saveSettings(key, name, '1').then(function(r) {
|
||||
if (!r.success) {
|
||||
self.showToast('Failed to save settings', 'error');
|
||||
return;
|
||||
}
|
||||
// Then enroll
|
||||
if (!r.success) { self.toast('Save failed', 'error'); return; }
|
||||
return api.consoleEnroll(key, name);
|
||||
}).then(function(r) {
|
||||
if (r && r.success) {
|
||||
self.showToast('Enrolled successfully!', 'success');
|
||||
self.toast('Enrolled!', 'success');
|
||||
setTimeout(function() { location.reload(); }, 2000);
|
||||
} else if (r) {
|
||||
self.showToast('Enrollment failed: ' + (r.error || 'Unknown'), 'error');
|
||||
self.toast('Enroll failed: ' + (r.error || ''), 'error');
|
||||
}
|
||||
}).catch(function(e) {
|
||||
self.showToast('Error: ' + e.message, 'error');
|
||||
});
|
||||
},
|
||||
|
||||
disableConsole: function() {
|
||||
var self = this;
|
||||
if (!confirm('Disable CrowdSec Console enrollment?')) return;
|
||||
|
||||
if (!confirm('Disable console enrollment?')) return;
|
||||
api.consoleDisable().then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Console disabled', 'success');
|
||||
setTimeout(function() { location.reload(); }, 1500);
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
serviceAction: function(action) {
|
||||
var self = this;
|
||||
api.serviceControl(action).then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Service ' + action + ' successful', 'success');
|
||||
setTimeout(function() { location.reload(); }, 1500);
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
self.toast(r.success ? 'Disabled' : 'Failed', r.success ? 'success' : 'error');
|
||||
if (r.success) setTimeout(function() { location.reload(); }, 1500);
|
||||
});
|
||||
},
|
||||
|
||||
updateHub: function() {
|
||||
var self = this;
|
||||
api.updateHub().then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Hub updated', 'success');
|
||||
setTimeout(function() { location.reload(); }, 1500);
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
self.toast(r.success ? 'Hub updated' : 'Failed', r.success ? 'success' : 'error');
|
||||
if (r.success) setTimeout(function() { location.reload(); }, 1500);
|
||||
});
|
||||
},
|
||||
|
||||
removeCollection: function(name) {
|
||||
var self = this;
|
||||
if (!confirm('Remove collection "' + name + '"?')) return;
|
||||
if (!confirm('Remove ' + name + '?')) return;
|
||||
api.removeCollection(name).then(function(r) {
|
||||
if (r.success) {
|
||||
self.showToast('Collection removed', 'success');
|
||||
setTimeout(function() { location.reload(); }, 1500);
|
||||
} else {
|
||||
self.showToast('Failed: ' + (r.error || 'Unknown'), 'error');
|
||||
}
|
||||
self.toast(r.success ? 'Removed' : 'Failed', r.success ? 'success' : 'error');
|
||||
if (r.success) setTimeout(function() { location.reload(); }, 1500);
|
||||
});
|
||||
},
|
||||
|
||||
showToast: function(msg, type) {
|
||||
toast: function(msg, type) {
|
||||
var t = document.querySelector('.cs-toast');
|
||||
if (t) t.remove();
|
||||
t = E('div', { 'class': 'cs-toast ' + type }, msg);
|
||||
@ -444,5 +263,7 @@ return view.extend({
|
||||
setTimeout(function() { t.remove(); }, 4000);
|
||||
},
|
||||
|
||||
handleSaveApply: null, handleSave: null, handleReset: null
|
||||
handleSaveApply: null,
|
||||
handleSave: null,
|
||||
handleReset: null
|
||||
});
|
||||
|
||||
@ -208,7 +208,7 @@ return view.extend({
|
||||
E('button', {
|
||||
'class': 'cbi-button',
|
||||
'click': function() {
|
||||
window.location.href = L.url('admin', 'secubox', 'security', 'crowdsec', 'overview');
|
||||
window.location.href = L.url('admin', 'secubox', 'services', 'crowdsec', 'overview');
|
||||
}
|
||||
}, _('Cancel')),
|
||||
E('button', {
|
||||
@ -610,7 +610,7 @@ return view.extend({
|
||||
'class': 'cbi-button cbi-button-positive',
|
||||
'style': 'font-size: 1.1em; padding: 12px 32px;',
|
||||
'click': function() {
|
||||
window.location.href = L.url('admin', 'secubox', 'security', 'crowdsec', 'overview');
|
||||
window.location.href = L.url('admin', 'secubox', 'services', 'crowdsec', 'overview');
|
||||
}
|
||||
}, _('Go to Dashboard'))
|
||||
])
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"admin/secubox/security/crowdsec": {
|
||||
"admin/secubox/services/crowdsec": {
|
||||
"title": "CrowdSec",
|
||||
"order": 10,
|
||||
"action": {
|
||||
@ -9,7 +9,7 @@
|
||||
"acl": ["luci-app-crowdsec-dashboard"]
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/overview": {
|
||||
"admin/secubox/services/crowdsec/overview": {
|
||||
"title": "Overview",
|
||||
"order": 5,
|
||||
"action": {
|
||||
@ -17,7 +17,7 @@
|
||||
"path": "crowdsec-dashboard/overview"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/wizard": {
|
||||
"admin/secubox/services/crowdsec/wizard": {
|
||||
"title": "Setup Wizard",
|
||||
"order": 10,
|
||||
"action": {
|
||||
@ -25,7 +25,7 @@
|
||||
"path": "crowdsec-dashboard/wizard"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/decisions": {
|
||||
"admin/secubox/services/crowdsec/decisions": {
|
||||
"title": "Decisions",
|
||||
"order": 20,
|
||||
"action": {
|
||||
@ -33,7 +33,7 @@
|
||||
"path": "crowdsec-dashboard/decisions"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/alerts": {
|
||||
"admin/secubox/services/crowdsec/alerts": {
|
||||
"title": "Alerts",
|
||||
"order": 30,
|
||||
"action": {
|
||||
@ -41,7 +41,7 @@
|
||||
"path": "crowdsec-dashboard/alerts"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/bouncers": {
|
||||
"admin/secubox/services/crowdsec/bouncers": {
|
||||
"title": "Bouncers",
|
||||
"order": 40,
|
||||
"action": {
|
||||
@ -49,7 +49,7 @@
|
||||
"path": "crowdsec-dashboard/bouncers"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/waf": {
|
||||
"admin/secubox/services/crowdsec/waf": {
|
||||
"title": "WAF/AppSec",
|
||||
"order": 45,
|
||||
"action": {
|
||||
@ -57,7 +57,7 @@
|
||||
"path": "crowdsec-dashboard/waf"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/metrics": {
|
||||
"admin/secubox/services/crowdsec/metrics": {
|
||||
"title": "Metrics",
|
||||
"order": 50,
|
||||
"action": {
|
||||
@ -65,7 +65,7 @@
|
||||
"path": "crowdsec-dashboard/metrics"
|
||||
}
|
||||
},
|
||||
"admin/secubox/security/crowdsec/settings": {
|
||||
"admin/secubox/services/crowdsec/settings": {
|
||||
"title": "Settings",
|
||||
"order": 90,
|
||||
"action": {
|
||||
|
||||
@ -175,8 +175,18 @@
|
||||
}
|
||||
},
|
||||
"admin/secubox/services": {
|
||||
"title": "Services Registry",
|
||||
"title": "Services",
|
||||
"order": 60,
|
||||
"action": {
|
||||
"type": "firstchild"
|
||||
},
|
||||
"depends": {
|
||||
"acl": ["luci-app-secubox"]
|
||||
}
|
||||
},
|
||||
"admin/secubox/services/registry": {
|
||||
"title": "Registry",
|
||||
"order": 90,
|
||||
"action": {
|
||||
"type": "view",
|
||||
"path": "secubox/services"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user