diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/dashboard.css b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/dashboard.css index 2f755a2c..8067b45a 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/dashboard.css +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/dashboard.css @@ -1,951 +1,112 @@ -/* CrowdSec Dashboard - Industrial Cybersecurity Theme * Version: 0.3.0 - */ -/* Copyright (C) 2024 CyberMind.fr - Gandalf * Version: 0.3.0 - */ - -/* === Hide LuCI Left Menu === */ -#mainmenu, -.main-left, -.luci-mainmenu, -#maincontent > .container > .main-left, -header.main ~ .main .main-left, -body > .main > .main-left, -.cbi-map + .main-left, -[data-page] .main-left, -.node-crowdsec-dashboard .main-left, -.node-crowdsec-dashboard-overview .main-left, -.node-crowdsec-dashboard-decisions .main-left, -.node-crowdsec-dashboard-alerts .main-left, -.node-crowdsec-dashboard-bouncers .main-left, -.node-crowdsec-dashboard-metrics .main-left, -.node-crowdsec-dashboard-settings .main-left, -.node-crowdsec-dashboard-waf .main-left, -.node-crowdsec-dashboard-wizard .main-left { - display: none !important; - width: 0 !important; - min-width: 0 !important; - max-width: 0 !important; - overflow: hidden !important; - visibility: hidden !important; -} - -/* Make main content full width when menu is hidden */ -.main-right, -#maincontent > .container > .main-right, -header.main ~ .main .main-right, -body > .main > .main-right, -.node-crowdsec-dashboard .main-right, -.node-crowdsec-dashboard-overview .main-right, -.node-crowdsec-dashboard-decisions .main-right, -.node-crowdsec-dashboard-alerts .main-right, -.node-crowdsec-dashboard-bouncers .main-right, -.node-crowdsec-dashboard-metrics .main-right, -.node-crowdsec-dashboard-settings .main-right, -.node-crowdsec-dashboard-waf .main-right, -.node-crowdsec-dashboard-wizard .main-right { - width: 100% !important; - max-width: 100% !important; - margin-left: 0 !important; - padding-left: 0 !important; - flex: 1 !important; -} - -#maincontent > .container, -.node-crowdsec-dashboard #maincontent > .container { - display: block !important; - max-width: 100% !important; -} - -/* CrowdSec uses SecuBox global theme variables */ +/* CrowdSec Dashboard - KISS CSS */ :root { - /* Map CrowdSec variables to SecuBox theme */ - --cs-bg-primary: var(--cyber-bg-primary, #0a0e27); - --cs-bg-secondary: var(--cyber-bg-secondary, #151932); - --cs-bg-tertiary: var(--cyber-bg-tertiary, #1e2139); - --cs-bg-card: var(--cyber-surface, #252b4a); - --cs-border: var(--cyber-glass-border, rgba(255, 255, 255, 0.1)); - --cs-border-glow: var(--cyber-accent-primary, #667eea); - - --cs-text-primary: var(--cyber-text-primary, #e2e8f0); - --cs-text-secondary: var(--cyber-text-secondary, #94a3b8); - --cs-text-muted: var(--cyber-text-muted, #64748b); - - --cs-accent-green: var(--cyber-success, #10b981); - --cs-accent-green-glow: var(--cyber-success-soft, rgba(16, 185, 129, 0.12)); - --cs-accent-red: var(--cyber-danger, #ef4444); - --cs-accent-red-glow: var(--cyber-danger-soft, rgba(239, 68, 68, 0.15)); - --cs-accent-orange: var(--cyber-warning, #f59e0b); - --cs-accent-blue: var(--cyber-info, #06b6d4); - --cs-accent-purple: var(--cyber-accent-tertiary, #8b5cf6); - - --cs-font-mono: var(--cyber-font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace); - --cs-font-sans: var(--cyber-font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif); - - --cs-radius: var(--cyber-radius-sm, 10px); - --cs-radius-lg: var(--cyber-radius-md, 16px); - --cs-shadow: var(--cyber-shadow-soft, 0 8px 24px rgba(2, 6, 23, 0.35)); - --cs-shadow-glow: var(--cyber-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.37)); + --cs-bg: var(--cyber-bg-primary, #1a1a2e); + --cs-surface: var(--cyber-bg-secondary, #16213e); + --cs-border: var(--cyber-border, #2d3748); + --cs-text: var(--cyber-text-primary, #e2e8f0); + --cs-muted: var(--cyber-text-muted, #718096); + --cs-accent: var(--cyber-accent-primary, #667eea); + --cs-success: var(--cyber-success, #10b981); + --cs-warning: var(--cyber-warning, #f59e0b); + --cs-danger: var(--cyber-danger, #ef4444); } -/* Base styles */ -.crowdsec-dashboard { - font-family: var(--cs-font-sans); - background: var(--cs-bg-primary); - color: var(--cs-text-primary); - min-height: 100vh; - padding: 20px; -} - -.crowdsec-dashboard * { - box-sizing: border-box; -} +.cs-view { max-width: 1200px; margin: 0 auto; padding: 1rem; } /* Header */ -.cs-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 24px; - padding-bottom: 20px; - border-bottom: 1px solid var(--cs-border); -} +.cs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cs-border); } +.cs-title { font-size: 1.25rem; font-weight: 600; color: var(--cs-text); } +.cs-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } +.cs-dot { width: 8px; height: 8px; border-radius: 50%; } +.cs-dot.online { background: var(--cs-success); } +.cs-dot.offline { background: var(--cs-danger); } -.cs-logo { - display: flex; - align-items: center; - gap: 12px; -} +/* Nav */ +.cs-nav { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--cs-border); } +.cs-nav a { padding: 0.75rem 1rem; color: var(--cs-muted); text-decoration: none; border-bottom: 2px solid transparent; } +.cs-nav a:hover { color: var(--cs-text); } +.cs-nav a.active { color: var(--cs-accent); border-bottom-color: var(--cs-accent); } -.cs-logo-icon { - width: 48px; - height: 48px; - background: linear-gradient(135deg, var(--cs-accent-green), var(--cs-accent-blue)); - border-radius: var(--cs-radius); - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - box-shadow: var(--cs-shadow-glow); -} +/* Cards */ +.cs-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 0.5rem; margin-bottom: 1rem; } +.cs-card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--cs-border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; } +.cs-card-body { padding: 1rem; } -.cs-logo-text { - font-size: 24px; - font-weight: 700; - letter-spacing: -0.5px; -} +/* Grid */ +.cs-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } -.cs-logo-text span { - color: var(--cs-accent-green); -} - -.cs-status-badges { - display: flex; - gap: 12px; -} - -.cs-badge { - display: flex; - align-items: center; - gap: 8px; - padding: 8px 16px; - background: var(--cs-bg-secondary); - border: 1px solid var(--cs-border); - border-radius: 50px; - font-size: 13px; - font-weight: 500; -} - -.cs-badge-dot { - width: 8px; - height: 8px; - border-radius: 50%; - animation: pulse 2s ease-in-out infinite; -} - -.cs-badge-dot.running { - background: var(--cs-accent-green); - box-shadow: 0 0 8px var(--cs-accent-green-glow); -} - -.cs-badge-dot.stopped { - background: var(--cs-accent-red); - box-shadow: 0 0 8px var(--cs-accent-red-glow); -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -/* Stats Grid */ -.cs-stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 20px; - margin-bottom: 24px; -} - -.cs-stat-card { - background: var(--cs-bg-card); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius-lg); - padding: 24px; - position: relative; - overflow: hidden; - transition: all 0.3s ease; -} - -.cs-stat-card:hover { - border-color: var(--cs-border-glow); - transform: translateY(-2px); - box-shadow: var(--cs-shadow); -} - -.cs-stat-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--cs-accent-green), transparent); -} - -.cs-stat-label { - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; - color: var(--cs-text-muted); - margin-bottom: 8px; -} - -.cs-stat-value { - font-family: var(--cs-font-mono); - font-size: 36px; - font-weight: 700; - color: var(--cs-text-primary); - line-height: 1; -} - -.cs-stat-value.danger { - color: var(--cs-accent-red); -} - -.cs-stat-value.warning { - color: var(--cs-accent-orange); -} - -.cs-stat-value.success { - color: var(--cs-accent-green); -} - -.cs-stat-trend { - display: flex; - align-items: center; - gap: 4px; - margin-top: 8px; - font-size: 12px; - color: var(--cs-text-secondary); -} - -.cs-stat-icon { - position: absolute; - right: 20px; - top: 50%; - transform: translateY(-50%); - font-size: 48px; - opacity: 0.1; -} - -/* Card containers */ -.cs-card { - background: var(--cs-bg-card); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius-lg); - overflow: hidden; - margin-bottom: 24px; -} - -.cs-card-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 20px; - border-bottom: 1px solid var(--cs-border); - background: rgba(0, 0, 0, 0.2); -} - -.cs-card-title { - font-size: 14px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - display: flex; - align-items: center; - gap: 8px; -} - -.cs-card-title::before { - content: ''; - width: 4px; - height: 16px; - background: var(--cs-accent-green); - border-radius: 2px; -} - -.cs-card-body { - padding: 20px; -} - -.cs-card-body.no-padding { - padding: 0; -} - -.cs-log-card pre.cs-log-output { - background: #0b1120; - color: #9efc6a; - padding: 14px; - border-radius: 12px; - font-family: 'JetBrains Mono', monospace; - font-size: 12px; - max-height: 220px; - overflow-y: auto; -} +/* Stats */ +.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } +.cs-stat { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 0.5rem; padding: 1rem; text-align: center; } +.cs-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--cs-text); } +.cs-stat-label { font-size: 0.75rem; color: var(--cs-muted); margin-top: 0.25rem; } +.cs-stat.success .cs-stat-value { color: var(--cs-success); } +.cs-stat.warning .cs-stat-value { color: var(--cs-warning); } +.cs-stat.danger .cs-stat-value { color: var(--cs-danger); } /* Tables */ -.cs-table { - width: 100%; - border-collapse: collapse; - font-size: 13px; -} +.cs-table { width: 100%; border-collapse: collapse; } +.cs-table th, .cs-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--cs-border); } +.cs-table th { color: var(--cs-muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; } +.cs-table tr:hover { background: rgba(255,255,255,0.02); } -.cs-table th { - text-align: left; - padding: 12px 16px; - background: rgba(0, 0, 0, 0.3); - font-size: 11px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--cs-text-muted); - border-bottom: 1px solid var(--cs-border); -} - -.cs-table td { - padding: 12px 16px; - border-bottom: 1px solid var(--cs-border); - vertical-align: middle; -} - -.cs-table tr:last-child td { - border-bottom: none; -} - -.cs-table tr:hover td { - background: rgba(0, 212, 170, 0.05); -} - -.cs-table .cs-ip { - font-family: var(--cs-font-mono); - color: var(--cs-accent-blue); - font-weight: 500; -} - -.cs-table .cs-scenario { - display: inline-block; - padding: 4px 8px; - background: rgba(177, 151, 252, 0.15); - color: var(--cs-accent-purple); - border-radius: 4px; - font-family: var(--cs-font-mono); - font-size: 11px; -} - -.cs-table .cs-country { - display: inline-flex; - align-items: center; - gap: 6px; -} - -.cs-table .cs-country-flag { - font-size: 16px; -} - -.cs-table .cs-action { - display: inline-block; - padding: 4px 10px; - border-radius: 4px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; -} - -.cs-action.ban { - background: rgba(255, 107, 107, 0.15); - color: var(--cs-accent-red); -} - -.cs-action.captcha { - background: rgba(255, 169, 77, 0.15); - color: var(--cs-accent-orange); -} - -.cs-table .cs-time { - font-family: var(--cs-font-mono); - font-size: 11px; - color: var(--cs-text-muted); -} - -/* Charts container */ -.cs-charts-row { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 24px; - margin-bottom: 24px; -} - -.cs-chart-container { - background: var(--cs-bg-card); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius-lg); - padding: 20px; -} - -.cs-chart-title { - font-size: 14px; - font-weight: 600; - margin-bottom: 16px; - color: var(--cs-text-secondary); -} - -/* Mini bar chart */ -.cs-bar-chart { - display: flex; - flex-direction: column; - gap: 12px; -} - -.cs-bar-item { - display: flex; - align-items: center; - gap: 12px; -} - -.cs-bar-label { - width: 120px; - font-size: 12px; - color: var(--cs-text-secondary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.cs-bar-track { - flex: 1; - height: 24px; - background: var(--cs-bg-tertiary); - border-radius: 4px; - overflow: hidden; - position: relative; -} - -.cs-bar-fill { - height: 100%; - background: linear-gradient(90deg, var(--cs-accent-green), var(--cs-accent-blue)); - border-radius: 4px; - transition: width 0.5s ease; - position: relative; -} - -.cs-bar-fill::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); - animation: shimmer 2s infinite; -} - -@keyframes shimmer { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(100%); } -} - -.cs-bar-value { - width: 60px; - text-align: right; - font-family: var(--cs-font-mono); - font-size: 13px; - font-weight: 600; - color: var(--cs-text-primary); -} +/* Badges */ +.cs-badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } +.cs-badge.success { background: rgba(16,185,129,0.2); color: var(--cs-success); } +.cs-badge.warning { background: rgba(245,158,11,0.2); color: var(--cs-warning); } +.cs-badge.danger { background: rgba(239,68,68,0.2); color: var(--cs-danger); } /* Buttons */ -.cs-btn { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 8px 16px; - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius); - background: var(--cs-bg-secondary); - color: var(--cs-text-primary); - font-size: 13px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} +.cs-btn { padding: 0.5rem 1rem; border: 1px solid var(--cs-border); border-radius: 0.375rem; background: var(--cs-surface); color: var(--cs-text); cursor: pointer; font-size: 0.875rem; } +.cs-btn:hover { background: var(--cs-border); } +.cs-btn.primary { background: var(--cs-accent); border-color: var(--cs-accent); } +.cs-btn.danger { background: var(--cs-danger); border-color: var(--cs-danger); } +.cs-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } -.cs-btn:hover { - background: var(--cs-bg-tertiary); - border-color: var(--cs-accent-green); -} +/* Forms */ +.cs-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--cs-border); border-radius: 0.375rem; background: var(--cs-bg); color: var(--cs-text); } +.cs-input:focus { outline: none; border-color: var(--cs-accent); } +.cs-label { display: block; margin-bottom: 0.25rem; color: var(--cs-muted); font-size: 0.875rem; } +.cs-field { margin-bottom: 1rem; } -.cs-btn-primary { - background: var(--cs-accent-green); - border-color: var(--cs-accent-green); - color: var(--cs-bg-primary); -} +/* Health checks */ +.cs-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; } +.cs-health-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; } +.cs-health-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } +.cs-health-icon.ok { background: rgba(16,185,129,0.2); color: var(--cs-success); } +.cs-health-icon.error { background: rgba(239,68,68,0.2); color: var(--cs-danger); } +.cs-health-icon.warn { background: rgba(245,158,11,0.2); color: var(--cs-warning); } +.cs-health-label { font-size: 0.75rem; color: var(--cs-muted); } +.cs-health-value { font-size: 0.875rem; color: var(--cs-text); } -.cs-btn-primary:hover { - background: #00e6b8; - box-shadow: var(--cs-shadow-glow); -} +/* Empty/Loading */ +.cs-empty { text-align: center; padding: 2rem; color: var(--cs-muted); } +.cs-loading { text-align: center; padding: 2rem; } +.cs-spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--cs-border); border-top-color: var(--cs-accent); border-radius: 50%; animation: spin 1s linear infinite; } +@keyframes spin { to { transform: rotate(360deg); } } -.cs-btn-danger { - border-color: var(--cs-accent-red); - color: var(--cs-accent-red); -} +/* Toast */ +.cs-toast { position: fixed; bottom: 1rem; right: 1rem; padding: 0.75rem 1rem; border-radius: 0.375rem; background: var(--cs-surface); border: 1px solid var(--cs-border); z-index: 9999; } +.cs-toast.success { border-color: var(--cs-success); } +.cs-toast.error { border-color: var(--cs-danger); } -.cs-btn-danger:hover { - background: rgba(255, 107, 107, 0.15); -} +/* Misc */ +.cs-ip { font-family: monospace; background: var(--cs-bg); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } +.cs-scenario { font-family: monospace; font-size: 0.75rem; } +.cs-time { font-size: 0.75rem; color: var(--cs-muted); } +.cs-severity { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; } +.cs-severity.low { background: rgba(16,185,129,0.2); color: var(--cs-success); } +.cs-severity.medium { background: rgba(245,158,11,0.2); color: var(--cs-warning); } +.cs-severity.high, .cs-severity.critical { background: rgba(239,68,68,0.2); color: var(--cs-danger); } -.cs-btn-sm { - padding: 4px 10px; - font-size: 11px; -} +/* Geo */ +.cs-geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.5rem; } +.cs-geo-item { display: flex; flex-direction: column; align-items: center; padding: 0.5rem; } +.cs-flag { font-size: 1.25rem; } +.cs-geo-count { font-weight: 600; } +.cs-country { font-size: 0.625rem; color: var(--cs-muted); } -/* Input */ -.cs-input { - padding: 10px 14px; - background: var(--cs-bg-tertiary); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius); - color: var(--cs-text-primary); - font-family: var(--cs-font-mono); - font-size: 13px; - transition: all 0.2s ease; -} - -.cs-input:focus { - outline: none; - border-color: var(--cs-accent-green); - box-shadow: 0 0 0 3px var(--cs-accent-green-glow); -} - -.cs-input::placeholder { - color: var(--cs-text-muted); -} - -/* Actions bar */ -.cs-actions-bar { - display: flex; - gap: 12px; - align-items: center; - flex-wrap: wrap; -} - -.cs-search-box { - position: relative; - flex: 1; - min-width: 200px; - max-width: 400px; -} - -.cs-search-box input { - width: 100%; - padding-left: 40px; -} - -.cs-search-box::before { - content: '🔍'; - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - font-size: 14px; - opacity: 0.5; -} - -/* Loading state */ -.cs-loading { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 60px 20px; - color: var(--cs-text-muted); -} - -.cs-spinner { - width: 40px; - height: 40px; - border: 3px solid var(--cs-border); - border-top-color: var(--cs-accent-green); - border-radius: 50%; - animation: spin 1s linear infinite; - margin-bottom: 16px; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -/* Empty state */ -.cs-empty { - text-align: center; - padding: 60px 20px; - color: var(--cs-text-muted); -} - -.cs-empty-icon { - font-size: 48px; - margin-bottom: 16px; - opacity: 0.5; -} - -/* Toast notifications */ -.cs-toast { - position: fixed; - bottom: 20px; - right: 20px; - padding: 14px 20px; - background: var(--cs-bg-secondary); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius); - box-shadow: var(--cs-shadow); - z-index: 1000; - animation: slideIn 0.3s ease; -} - -.cs-toast.success { - border-color: var(--cs-accent-green); -} - -.cs-toast.error { - border-color: var(--cs-accent-red); -} - -@keyframes slideIn { - from { - transform: translateX(100%); - opacity: 0; - } - to { - transform: translateX(0); - opacity: 1; - } -} - -/* Modal */ -.cs-modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; -} - -.cs-modal { - background: var(--cs-bg-secondary); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius-lg); - width: 90%; - max-width: 500px; - max-height: 90vh; - overflow: auto; -} - -.cs-modal-header { - padding: 20px; - border-bottom: 1px solid var(--cs-border); - display: flex; - align-items: center; - justify-content: space-between; -} - -.cs-modal-title { - font-size: 18px; - font-weight: 600; -} - -.cs-modal-close { - background: none; - border: none; - color: var(--cs-text-muted); - font-size: 24px; - cursor: pointer; - padding: 0; - line-height: 1; -} - -.cs-modal-close:hover { - color: var(--cs-text-primary); -} - -.cs-modal-body { - padding: 20px; -} - -.cs-modal-footer { - padding: 16px 20px; - border-top: 1px solid var(--cs-border); - display: flex; - gap: 12px; - justify-content: flex-end; -} - -/* Form groups */ -.cs-form-group { - margin-bottom: 16px; -} - -.cs-form-label { - display: block; - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--cs-text-muted); - margin-bottom: 8px; -} - -.cs-form-group .cs-input { - width: 100%; -} - -/* Responsive */ @media (max-width: 768px) { - .cs-header { - flex-direction: column; - gap: 16px; - align-items: flex-start; - } - - .cs-status-badges { - width: 100%; - justify-content: flex-start; - } - - .cs-stats-grid { - grid-template-columns: 1fr; - } - - .cs-charts-row { - grid-template-columns: 1fr; - } - - .cs-table { - font-size: 11px; - } - - .cs-table th, - .cs-table td { - padding: 8px 10px; - } - - .cs-actions-bar { - flex-direction: column; - align-items: stretch; - } - - .cs-search-box { - max-width: none; - } -} - -/* Scrollbar styling */ -.crowdsec-dashboard ::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -.crowdsec-dashboard ::-webkit-scrollbar-track { - background: var(--cs-bg-tertiary); -} - -.crowdsec-dashboard ::-webkit-scrollbar-thumb { - background: var(--cs-border); - border-radius: 4px; -} - -.crowdsec-dashboard ::-webkit-scrollbar-thumb:hover { - background: var(--cs-text-muted); -} - -/* Metrics specific */ -.cs-metrics-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; -} - -.cs-metric-section { - background: var(--cs-bg-card); - border: 1px solid var(--cs-border); - border-radius: var(--cs-radius-lg); - overflow: hidden; -} - -.cs-metric-section-title { - padding: 12px 16px; - background: rgba(0, 0, 0, 0.3); - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--cs-text-muted); - border-bottom: 1px solid var(--cs-border); -} - -.cs-metric-list { - padding: 12px 0; -} - -.cs-metric-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 16px; -} - -.cs-metric-item:hover { - background: rgba(0, 212, 170, 0.05); -} - -.cs-metric-name { - font-size: 13px; - color: var(--cs-text-secondary); -} - -.cs-metric-value { - font-family: var(--cs-font-mono); - font-size: 13px; - font-weight: 600; - color: var(--cs-accent-green); -} - -/* Geo map placeholder */ -.cs-geo-map { - height: 300px; - background: var(--cs-bg-tertiary); - border-radius: var(--cs-radius); - display: flex; - align-items: center; - justify-content: center; - color: var(--cs-text-muted); - font-size: 14px; -} - -/* Timeline for alerts */ -.cs-timeline { - position: relative; - padding-left: 24px; -} - -.cs-timeline::before { - content: ''; - position: absolute; - left: 7px; - top: 0; - bottom: 0; - width: 2px; - background: var(--cs-border); -} - -.cs-timeline-item { - position: relative; - padding-bottom: 20px; -} - -.cs-timeline-item::before { - content: ''; - position: absolute; - left: -20px; - top: 4px; - width: 12px; - height: 12px; - background: var(--cs-accent-green); - border-radius: 50%; - border: 2px solid var(--cs-bg-secondary); -} - -.cs-timeline-item.alert::before { - background: var(--cs-accent-red); -} - -.cs-timeline-time { - font-family: var(--cs-font-mono); - font-size: 11px; - color: var(--cs-text-muted); - margin-bottom: 4px; -} - -.cs-timeline-content { - background: var(--cs-bg-tertiary); - padding: 12px 16px; - border-radius: var(--cs-radius); - border: 1px solid var(--cs-border); -} - -/* Warning banner */ -.cs-warning-banner { - display: flex; - align-items: flex-start; - gap: 1rem; - padding: 1rem; - margin: 1rem 0; - background: #fff3cd; - border: 1px solid #ffc107; - border-radius: 0.5rem; -} - -.cs-warning-icon { - font-size: 1.5rem; - line-height: 1; -} - -.cs-warning-content { - flex: 1; -} - -.cs-warning-title { - font-weight: 600; - color: #856404; - margin-bottom: 0.5rem; -} - -.cs-warning-message { - color: #856404; - line-height: 1.5; -} - -.cs-warning-message a { - color: #0056b3; - text-decoration: underline; -} - -.cs-warning-message code { - background: #f8f9fa; - padding: 0.2rem 0.4rem; - border-radius: 0.25rem; - font-family: monospace; - color: #d63384; + .cs-stats { grid-template-columns: repeat(2, 1fr); } + .cs-grid-2 { grid-template-columns: 1fr; } } diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/nav.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/nav.js index d902ea20..2e68c1ac 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/nav.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/crowdsec-dashboard/nav.js @@ -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 */ diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/alerts.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/alerts.js index 7ebaf078..98d3b946 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/alerts.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/alerts.js @@ -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 }); diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/bouncers.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/bouncers.js index b76a79ed..60a5892d 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/bouncers.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/bouncers.js @@ -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 }); diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/decisions.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/decisions.js index 569f219b..eb61038d 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/decisions.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/decisions.js @@ -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 }); diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/overview.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/overview.js index cecd54ff..c9bd993d 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/overview.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/overview.js @@ -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 diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/settings.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/settings.js index 52fd1c5a..00609d3f 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/settings.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/settings.js @@ -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 }); diff --git a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js index 703b4fd5..41e16762 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js +++ b/package/secubox/luci-app-crowdsec-dashboard/htdocs/luci-static/resources/view/crowdsec-dashboard/wizard.js @@ -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')) ]) diff --git a/package/secubox/luci-app-crowdsec-dashboard/root/usr/share/luci/menu.d/luci-app-crowdsec-dashboard.json b/package/secubox/luci-app-crowdsec-dashboard/root/usr/share/luci/menu.d/luci-app-crowdsec-dashboard.json index 01d548d1..a87249ab 100644 --- a/package/secubox/luci-app-crowdsec-dashboard/root/usr/share/luci/menu.d/luci-app-crowdsec-dashboard.json +++ b/package/secubox/luci-app-crowdsec-dashboard/root/usr/share/luci/menu.d/luci-app-crowdsec-dashboard.json @@ -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": { diff --git a/package/secubox/luci-app-secubox/root/usr/share/luci/menu.d/luci-app-secubox.json b/package/secubox/luci-app-secubox/root/usr/share/luci/menu.d/luci-app-secubox.json index be4c136c..b48d487f 100644 --- a/package/secubox/luci-app-secubox/root/usr/share/luci/menu.d/luci-app-secubox.json +++ b/package/secubox/luci-app-secubox/root/usr/share/luci/menu.d/luci-app-secubox.json @@ -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"