CyberMind-FR
d1788a12ff
Enhanced dashboard UX when CrowdSec service is not running: API module (api.js): - Modified getDashboardData() to handle error responses gracefully - Returns empty arrays/objects for stats when service is stopped - Includes error flag in response data Overview module (overview.js): - Added 'fs' module import for service control - Added startCrowdSec() function to start service from UI - Display warning banner when service is stopped - Provide actionable message with start service link Dashboard CSS (dashboard.css): - Added .cs-warning-banner styles for error messages - Professional warning styling with icon and content layout This resolves XHR timeout errors by showing friendly error messages instead of hanging requests. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
567 lines
16 KiB
JavaScript
567 lines
16 KiB
JavaScript
'use strict';
|
||
'require view';
|
||
'require secubox-theme/theme as Theme';
|
||
'require dom';
|
||
'require poll';
|
||
'require ui';
|
||
'require fs';
|
||
'require crowdsec-dashboard/api as api';
|
||
|
||
/**
|
||
* CrowdSec Dashboard - Overview View
|
||
* Main dashboard with stats, charts, and recent activity
|
||
* Copyright (C) 2024 CyberMind.fr - Gandalf
|
||
*/
|
||
|
||
return view.extend({
|
||
title: _('CrowdSec Dashboard'),
|
||
|
||
css: null,
|
||
data: null,
|
||
csApi: null,
|
||
|
||
load: function() {
|
||
// Load CSS
|
||
var cssLink = document.createElement('link');
|
||
cssLink.rel = 'stylesheet';
|
||
cssLink.href = L.resource('crowdsec-dashboard/dashboard.css');
|
||
document.head.appendChild(cssLink);
|
||
|
||
// Load API
|
||
this.csApi = api;
|
||
|
||
return Promise.all([
|
||
this.csApi.getDashboardData(),
|
||
this.csApi.getSecuboxLogs()
|
||
]);
|
||
},
|
||
|
||
renderHeader: function(status) {
|
||
var header = E('div', { 'class': 'cs-header' }, [
|
||
E('div', { 'class': 'cs-logo' }, [
|
||
E('div', { 'class': 'cs-logo-icon' }, '🛡️'),
|
||
E('div', { 'class': 'cs-logo-text' }, [
|
||
'Crowd',
|
||
E('span', {}, 'Sec'),
|
||
' Dashboard'
|
||
])
|
||
]),
|
||
E('div', { 'class': 'cs-status-badges' }, [
|
||
E('div', { 'class': 'cs-badge' }, [
|
||
E('span', {
|
||
'class': 'cs-badge-dot ' + (status.crowdsec === 'running' ? 'running' : 'stopped')
|
||
}),
|
||
'Engine: ' + (status.crowdsec || 'unknown')
|
||
]),
|
||
E('div', { 'class': 'cs-badge' }, [
|
||
E('span', {
|
||
'class': 'cs-badge-dot ' + (status.bouncer === 'running' ? 'running' : 'stopped')
|
||
}),
|
||
'Bouncer: ' + (status.bouncer || 'unknown')
|
||
]),
|
||
E('div', { 'class': 'cs-badge' }, [
|
||
'v' + (status.version || 'N/A')
|
||
])
|
||
])
|
||
]);
|
||
|
||
return header;
|
||
},
|
||
|
||
renderStatsGrid: function(stats, decisions) {
|
||
var self = this;
|
||
|
||
// Count by action type
|
||
var banCount = 0;
|
||
var captchaCount = 0;
|
||
|
||
if (Array.isArray(decisions)) {
|
||
decisions.forEach(function(d) {
|
||
if (d.type === 'ban') banCount++;
|
||
else if (d.type === 'captcha') captchaCount++;
|
||
});
|
||
}
|
||
|
||
var grid = E('div', { 'class': 'cs-stats-grid' }, [
|
||
E('div', { 'class': 'cs-stat-card' }, [
|
||
E('div', { 'class': 'cs-stat-label' }, 'Active Bans'),
|
||
E('div', { 'class': 'cs-stat-value danger' }, String(stats.total_decisions || 0)),
|
||
E('div', { 'class': 'cs-stat-trend' }, 'Currently blocked IPs'),
|
||
E('div', { 'class': 'cs-stat-icon' }, '🚫')
|
||
]),
|
||
E('div', { 'class': 'cs-stat-card' }, [
|
||
E('div', { 'class': 'cs-stat-label' }, 'Alerts (24h)'),
|
||
E('div', { 'class': 'cs-stat-value warning' }, String(stats.alerts_24h || 0)),
|
||
E('div', { 'class': 'cs-stat-trend' }, 'Detected threats'),
|
||
E('div', { 'class': 'cs-stat-icon' }, '⚠️')
|
||
]),
|
||
E('div', { 'class': 'cs-stat-card' }, [
|
||
E('div', { 'class': 'cs-stat-label' }, 'Bouncers'),
|
||
E('div', { 'class': 'cs-stat-value success' }, String(stats.bouncers || 0)),
|
||
E('div', { 'class': 'cs-stat-trend' }, 'Active remediation'),
|
||
E('div', { 'class': 'cs-stat-icon' }, '🔒')
|
||
]),
|
||
E('div', { 'class': 'cs-stat-card' }, [
|
||
E('div', { 'class': 'cs-stat-label' }, 'Ban Rate'),
|
||
E('div', { 'class': 'cs-stat-value' }, banCount > 0 ? '100%' : '0%'),
|
||
E('div', { 'class': 'cs-stat-trend' }, banCount + ' bans / ' + captchaCount + ' captchas'),
|
||
E('div', { 'class': 'cs-stat-icon' }, '📊')
|
||
])
|
||
]);
|
||
|
||
return grid;
|
||
},
|
||
|
||
renderDecisionsTable: function(decisions) {
|
||
var self = this;
|
||
|
||
if (!Array.isArray(decisions) || decisions.length === 0) {
|
||
return E('div', { 'class': 'cs-empty' }, [
|
||
E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
|
||
E('div', { 'class': 'cs-empty-icon' }, '✅'),
|
||
E('p', {}, 'No active decisions - All clear!')
|
||
]);
|
||
}
|
||
|
||
var rows = decisions.slice(0, 10).map(function(d) {
|
||
return E('tr', {}, [
|
||
E('td', {}, E('span', { 'class': 'cs-ip' }, d.value || 'N/A')),
|
||
E('td', {}, E('span', { 'class': 'cs-scenario' }, self.csApi.parseScenario(d.scenario))),
|
||
E('td', {}, E('span', { 'class': 'cs-country' }, [
|
||
E('span', { 'class': 'cs-country-flag' }, self.csApi.getCountryFlag(d.country)),
|
||
d.country || 'N/A'
|
||
])),
|
||
E('td', {}, E('span', { 'class': 'cs-action ' + (d.type || 'ban') }, d.type || 'ban')),
|
||
E('td', {}, E('span', { 'class': 'cs-time' }, self.csApi.formatDuration(d.duration))),
|
||
E('td', {}, E('button', {
|
||
'class': 'cs-btn cs-btn-danger cs-btn-sm',
|
||
'data-ip': d.value,
|
||
'click': ui.createHandlerFn(this, 'handleUnban', d.value)
|
||
}, 'Unban'))
|
||
]);
|
||
});
|
||
|
||
return E('table', { 'class': 'cs-table' }, [
|
||
E('thead', {}, E('tr', {}, [
|
||
E('th', {}, 'IP Address'),
|
||
E('th', {}, 'Scenario'),
|
||
E('th', {}, 'Country'),
|
||
E('th', {}, 'Action'),
|
||
E('th', {}, 'Expires'),
|
||
E('th', {}, 'Actions')
|
||
])),
|
||
E('tbody', {}, rows)
|
||
]);
|
||
},
|
||
|
||
renderAlertsTimeline: function(alerts) {
|
||
var self = this;
|
||
|
||
if (!Array.isArray(alerts) || alerts.length === 0) {
|
||
return E('div', { 'class': 'cs-empty' }, [
|
||
E('div', { 'class': 'cs-empty-icon' }, '📭'),
|
||
E('p', {}, 'No recent alerts')
|
||
]);
|
||
}
|
||
|
||
var items = alerts.slice(0, 8).map(function(a) {
|
||
return E('div', { 'class': 'cs-timeline-item alert' }, [
|
||
E('div', { 'class': 'cs-timeline-time' }, self.csApi.formatRelativeTime(a.created_at)),
|
||
E('div', { 'class': 'cs-timeline-content' }, [
|
||
E('strong', {}, self.csApi.parseScenario(a.scenario)),
|
||
E('br', {}),
|
||
E('span', { 'class': 'cs-ip' }, a.source?.ip || 'N/A'),
|
||
' → ',
|
||
E('span', {}, (a.events_count || 0) + ' events')
|
||
])
|
||
]);
|
||
});
|
||
|
||
return E('div', { 'class': 'cs-timeline' }, items);
|
||
},
|
||
|
||
renderTopScenarios: function(stats) {
|
||
var scenarios = [];
|
||
|
||
try {
|
||
if (stats.top_scenarios_raw) {
|
||
scenarios = JSON.parse(stats.top_scenarios_raw);
|
||
}
|
||
} catch(e) {
|
||
scenarios = [];
|
||
}
|
||
|
||
if (scenarios.length === 0) {
|
||
return E('div', { 'class': 'cs-empty' }, [
|
||
E('p', {}, 'No scenario data available')
|
||
]);
|
||
}
|
||
|
||
var maxCount = Math.max.apply(null, scenarios.map(function(s) { return s.count; }));
|
||
|
||
var bars = scenarios.map(function(s) {
|
||
var pct = maxCount > 0 ? (s.count / maxCount * 100) : 0;
|
||
return E('div', { 'class': 'cs-bar-item' }, [
|
||
E('div', { 'class': 'cs-bar-label', 'title': s.scenario }, s.scenario.split('/').pop()),
|
||
E('div', { 'class': 'cs-bar-track' }, [
|
||
E('div', { 'class': 'cs-bar-fill', 'style': 'width: ' + pct + '%' })
|
||
]),
|
||
E('div', { 'class': 'cs-bar-value' }, String(s.count))
|
||
]);
|
||
});
|
||
|
||
return E('div', { 'class': 'cs-bar-chart' }, bars);
|
||
},
|
||
|
||
renderTopCountries: function(stats) {
|
||
var self = this;
|
||
var countries = [];
|
||
|
||
try {
|
||
if (stats.top_countries_raw) {
|
||
countries = JSON.parse(stats.top_countries_raw);
|
||
}
|
||
} catch(e) {
|
||
countries = [];
|
||
}
|
||
|
||
if (countries.length === 0) {
|
||
return E('div', { 'class': 'cs-empty' }, [
|
||
E('p', {}, 'No country data available')
|
||
]);
|
||
}
|
||
|
||
var maxCount = Math.max.apply(null, countries.map(function(c) { return c.count; }));
|
||
|
||
var bars = countries.map(function(c) {
|
||
var pct = maxCount > 0 ? (c.count / maxCount * 100) : 0;
|
||
return E('div', { 'class': 'cs-bar-item' }, [
|
||
E('div', { 'class': 'cs-bar-label' }, [
|
||
self.csApi.getCountryFlag(c.country),
|
||
' ',
|
||
c.country || 'N/A'
|
||
]),
|
||
E('div', { 'class': 'cs-bar-track' }, [
|
||
E('div', { 'class': 'cs-bar-fill', 'style': 'width: ' + pct + '%' })
|
||
]),
|
||
E('div', { 'class': 'cs-bar-value' }, String(c.count))
|
||
]);
|
||
});
|
||
|
||
return E('div', { 'class': 'cs-bar-chart' }, bars);
|
||
},
|
||
|
||
renderBanModal: function() {
|
||
return E('div', { 'class': 'cs-modal-overlay', 'id': 'ban-modal', 'style': 'display: none' }, [
|
||
E('div', { 'class': 'cs-modal' }, [
|
||
E('div', { 'class': 'cs-modal-header' }, [
|
||
E('div', { 'class': 'cs-modal-title' }, 'Add IP Ban'),
|
||
E('button', {
|
||
'class': 'cs-modal-close',
|
||
'click': ui.createHandlerFn(this, 'closeBanModal')
|
||
}, '×')
|
||
]),
|
||
E('div', { 'class': 'cs-modal-body' }, [
|
||
E('div', { 'class': 'cs-form-group' }, [
|
||
E('label', { 'class': 'cs-form-label' }, 'IP Address'),
|
||
E('input', {
|
||
'class': 'cs-input',
|
||
'id': 'ban-ip',
|
||
'type': 'text',
|
||
'placeholder': '192.168.1.100 or 10.0.0.0/24'
|
||
})
|
||
]),
|
||
E('div', { 'class': 'cs-form-group' }, [
|
||
E('label', { 'class': 'cs-form-label' }, 'Duration'),
|
||
E('input', {
|
||
'class': 'cs-input',
|
||
'id': 'ban-duration',
|
||
'type': 'text',
|
||
'placeholder': '4h',
|
||
'value': '4h'
|
||
})
|
||
]),
|
||
E('div', { 'class': 'cs-form-group' }, [
|
||
E('label', { 'class': 'cs-form-label' }, 'Reason'),
|
||
E('input', {
|
||
'class': 'cs-input',
|
||
'id': 'ban-reason',
|
||
'type': 'text',
|
||
'placeholder': 'Manual ban from dashboard'
|
||
})
|
||
])
|
||
]),
|
||
E('div', { 'class': 'cs-modal-footer' }, [
|
||
E('button', {
|
||
'class': 'cs-btn',
|
||
'click': ui.createHandlerFn(this, 'closeBanModal')
|
||
}, 'Cancel'),
|
||
E('button', {
|
||
'class': 'cs-btn cs-btn-primary',
|
||
'click': ui.createHandlerFn(this, 'submitBan')
|
||
}, 'Add Ban')
|
||
])
|
||
])
|
||
]);
|
||
},
|
||
|
||
handleUnban: function(ip, ev) {
|
||
var self = this;
|
||
|
||
if (!confirm('Remove ban for ' + ip + '?')) {
|
||
return;
|
||
}
|
||
|
||
this.csApi.unbanIP(ip).then(function(result) {
|
||
if (result.success) {
|
||
self.showToast('IP ' + ip + ' unbanned successfully', 'success');
|
||
// Refresh data
|
||
return self.refreshDashboard();
|
||
} else {
|
||
self.showToast('Failed to unban: ' + (result.error || 'Unknown error'), 'error');
|
||
}
|
||
}).then(function(data) {
|
||
if (data) {
|
||
self.data = data;
|
||
self.updateView();
|
||
}
|
||
}).catch(function(err) {
|
||
self.showToast('Error: ' + err.message, 'error');
|
||
});
|
||
},
|
||
|
||
openBanModal: function(ev) {
|
||
document.getElementById('ban-modal').style.display = 'flex';
|
||
},
|
||
|
||
closeBanModal: function(ev) {
|
||
document.getElementById('ban-modal').style.display = 'none';
|
||
document.getElementById('ban-ip').value = '';
|
||
document.getElementById('ban-duration').value = '4h';
|
||
document.getElementById('ban-reason').value = '';
|
||
},
|
||
|
||
submitBan: function(ev) {
|
||
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 from dashboard';
|
||
|
||
if (!ip) {
|
||
self.showToast('Please enter an IP address', 'error');
|
||
return;
|
||
}
|
||
|
||
if (!self.csApi.isValidIP(ip)) {
|
||
self.showToast('Invalid IP address format', 'error');
|
||
return;
|
||
}
|
||
|
||
self.csApi.banIP(ip, duration, reason).then(function(result) {
|
||
if (result.success) {
|
||
self.showToast('IP ' + ip + ' banned for ' + duration, 'success');
|
||
self.closeBanModal();
|
||
return self.refreshDashboard();
|
||
} else {
|
||
self.showToast('Failed to ban: ' + (result.error || 'Unknown error'), 'error');
|
||
}
|
||
}).then(function(data) {
|
||
if (data) {
|
||
self.data = data;
|
||
self.updateView();
|
||
}
|
||
}).catch(function(err) {
|
||
self.showToast('Error: ' + err.message, 'error');
|
||
});
|
||
},
|
||
|
||
showToast: function(message, type) {
|
||
var existing = document.querySelector('.cs-toast');
|
||
if (existing) existing.remove();
|
||
|
||
var toast = E('div', { 'class': 'cs-toast ' + (type || '') }, message);
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(function() {
|
||
toast.remove();
|
||
}, 4000);
|
||
},
|
||
|
||
updateView: function() {
|
||
var container = document.getElementById('cs-dashboard-content');
|
||
if (!container || !this.data) return;
|
||
|
||
dom.content(container, this.renderContent(this.data));
|
||
},
|
||
|
||
renderContent: function(data) {
|
||
var status = data.status || {};
|
||
var stats = data.stats || {};
|
||
var decisions = data.decisions || [];
|
||
var alerts = data.alerts || [];
|
||
var logs = this.logs || [];
|
||
|
||
// Check if service is not running
|
||
var serviceWarning = null;
|
||
if (data.error && status.crowdsec !== 'running') {
|
||
serviceWarning = E('div', { 'class': 'cs-warning-banner' }, [
|
||
E('div', { 'class': 'cs-warning-icon' }, '⚠️'),
|
||
E('div', { 'class': 'cs-warning-content' }, [
|
||
E('div', { 'class': 'cs-warning-title' }, 'CrowdSec Service Not Running'),
|
||
E('div', { 'class': 'cs-warning-message' }, [
|
||
'The CrowdSec engine is currently stopped. ',
|
||
E('a', {
|
||
'href': '#',
|
||
'click': ui.createHandlerFn(this, 'startCrowdSec')
|
||
}, 'Click here to start the service'),
|
||
' or use the command: ',
|
||
E('code', {}, '/etc/init.d/crowdsec start')
|
||
])
|
||
])
|
||
]);
|
||
}
|
||
|
||
return E('div', {}, [
|
||
this.renderHeader(status),
|
||
serviceWarning,
|
||
this.renderStatsGrid(stats, decisions),
|
||
|
||
E('div', { 'class': 'cs-charts-row' }, [
|
||
E('div', { 'class': 'cs-card' }, [
|
||
E('div', { 'class': 'cs-card-header' }, [
|
||
E('div', { 'class': 'cs-card-title' }, 'Top Scenarios'),
|
||
]),
|
||
E('div', { 'class': 'cs-card-body' }, this.renderTopScenarios(stats))
|
||
]),
|
||
E('div', { 'class': 'cs-card' }, [
|
||
E('div', { 'class': 'cs-card-header' }, [
|
||
E('div', { 'class': 'cs-card-title' }, 'Top Countries'),
|
||
]),
|
||
E('div', { 'class': 'cs-card-body' }, this.renderTopCountries(stats))
|
||
])
|
||
]),
|
||
|
||
E('div', { 'class': 'cs-charts-row' }, [
|
||
E('div', { 'class': 'cs-card', 'style': 'flex: 2' }, [
|
||
E('div', { 'class': 'cs-card-header' }, [
|
||
E('div', { 'class': 'cs-card-title' }, 'Active Decisions'),
|
||
E('button', {
|
||
'class': 'cs-btn cs-btn-primary cs-btn-sm',
|
||
'click': ui.createHandlerFn(this, 'openBanModal')
|
||
}, '+ Add Ban')
|
||
]),
|
||
E('div', { 'class': 'cs-card-body no-padding' }, this.renderDecisionsTable(decisions))
|
||
]),
|
||
E('div', { 'class': 'cs-card', 'style': 'flex: 1' }, [
|
||
E('div', { 'class': 'cs-card-header' }, [
|
||
E('div', { 'class': 'cs-card-title' }, 'Recent Alerts'),
|
||
]),
|
||
E('div', { 'class': 'cs-card-body' }, this.renderAlertsTimeline(alerts))
|
||
]),
|
||
this.renderLogCard(logs)
|
||
]),
|
||
|
||
this.renderBanModal()
|
||
]);
|
||
},
|
||
|
||
startCrowdSec: function(ev) {
|
||
var self = this;
|
||
ev.preventDefault();
|
||
|
||
ui.showModal(_('Start CrowdSec'), [
|
||
E('p', {}, _('Do you want to start the CrowdSec service?')),
|
||
E('div', { 'class': 'right' }, [
|
||
E('button', {
|
||
'class': 'btn',
|
||
'click': ui.hideModal
|
||
}, _('Cancel')),
|
||
' ',
|
||
E('button', {
|
||
'class': 'btn cbi-button-positive',
|
||
'click': function() {
|
||
return fs.exec('/etc/init.d/crowdsec', ['start']).then(function() {
|
||
ui.hideModal();
|
||
self.showToast('CrowdSec service started', 'success');
|
||
setTimeout(function() {
|
||
return self.refreshDashboard();
|
||
}, 2000);
|
||
}).catch(function(err) {
|
||
ui.hideModal();
|
||
self.showToast('Failed to start service: ' + err, 'error');
|
||
});
|
||
}
|
||
}, _('Start Service'))
|
||
])
|
||
]);
|
||
},
|
||
|
||
render: function(payload) {
|
||
var self = this;
|
||
this.data = payload[0] || {};
|
||
this.logs = (payload[1] && payload[1].entries) || [];
|
||
|
||
var view = E('div', { 'class': 'crowdsec-dashboard' }, [
|
||
E('div', { 'id': 'cs-dashboard-content' }, this.renderContent(this.data))
|
||
]);
|
||
|
||
// Setup polling for auto-refresh (every 30 seconds)
|
||
poll.add(function() {
|
||
return self.refreshDashboard();
|
||
}, 30);
|
||
|
||
return view;
|
||
},
|
||
|
||
refreshDashboard: function() {
|
||
var self = this;
|
||
return Promise.all([
|
||
self.csApi.getDashboardData(),
|
||
self.csApi.getSecuboxLogs()
|
||
]).then(function(results) {
|
||
self.data = results[0];
|
||
self.logs = (results[1] && results[1].entries) || [];
|
||
self.updateView();
|
||
});
|
||
},
|
||
|
||
renderLogCard: function(entries) {
|
||
return E('div', { 'class': 'cs-card cs-log-card' }, [
|
||
E('div', { 'class': 'cs-card-header' }, [
|
||
E('div', { 'class': 'cs-card-title' }, _('SecuBox Log Tail')),
|
||
E('button', {
|
||
'class': 'cs-btn cs-btn-secondary cs-btn-sm',
|
||
'click': ui.createHandlerFn(this, 'handleSnapshot')
|
||
}, _('Snapshot'))
|
||
]),
|
||
entries && entries.length ?
|
||
E('pre', { 'class': 'cs-log-output' }, entries.join('\n')) :
|
||
E('p', { 'class': 'cs-empty' }, _('Log file empty'))
|
||
]);
|
||
},
|
||
|
||
handleSnapshot: function() {
|
||
var self = this;
|
||
ui.showModal(_('Collecting snapshot'), [
|
||
E('p', {}, _('Aggregating dmesg/logread into SecuBox log…')),
|
||
E('div', { 'class': 'spinning' })
|
||
]);
|
||
this.csApi.collectDebugSnapshot().then(function(result) {
|
||
ui.hideModal();
|
||
if (result && result.success) {
|
||
self.refreshDashboard();
|
||
self.showToast(_('Snapshot appended to /var/log/seccubox.log'), 'success');
|
||
} else {
|
||
self.showToast((result && result.error) || _('Snapshot failed'), 'error');
|
||
}
|
||
}).catch(function(err) {
|
||
ui.hideModal();
|
||
self.showToast(err.message || _('Snapshot failed'), 'error');
|
||
});
|
||
},
|
||
|
||
handleSaveApply: null,
|
||
handleSave: null,
|
||
handleReset: null
|
||
});
|