Security Operations Dashboard

A comprehensive real-time security monitoring dashboard designed for Security Operations Centers (SOCs) and security teams.

Repository: GitHub - Security Dashboard

Live Demo

🔗 View Live Dashboard (Demo Version)

Overview

This dashboard provides centralized visibility into an organization’s security posture by aggregating data from multiple security tools and presenting it in an intuitive, actionable format.

Key Features

📊 Real-time Monitoring

  • Live Threat Feed: Real-time security event streaming
  • Alert Correlation: Intelligent correlation of security alerts
  • Incident Tracking: End-to-end incident lifecycle management
  • Performance Metrics: Security tool performance monitoring

🎯 Multi-Source Integration

  • SIEM Integration: Splunk, ELK Stack, QRadar compatibility
  • Vulnerability Scanners: Nessus, OpenVAS, Qualys integration
  • Network Monitoring: Integration with network security tools
  • Cloud Security: AWS, Azure, GCP security monitoring

Technical Implementation

Backend Architecture (Flask)

from flask import Flask, render_template, jsonify, request
from flask_socketio import SocketIO, emit
import json
import sqlite3
from datetime import datetime, timedelta
import threading

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'
socketio = SocketIO(app, cors_allowed_origins="*")

class SecurityDashboard:
    def __init__(self):
        self.incidents = []
        self.alerts = []
        self.metrics = {
            'total_alerts': 0,
            'critical_incidents': 0,
            'blocked_attacks': 0,
            'system_health': 95
        }
        self.init_database()
        
    def init_database(self):
        """Initialize SQLite database for storing security events"""
        conn = sqlite3.connect('security_data.db')
        cursor = conn.cursor()
        
        cursor.execute('''
            CREATE TABLE IF NOT EXISTS security_events (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                timestamp TEXT,
                event_type TEXT,
                severity TEXT,
                source_ip TEXT,
                description TEXT,
                status TEXT
            )
        ''')
        
        cursor.execute('''
            CREATE TABLE IF NOT EXISTS threat_intel (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                ioc TEXT,
                ioc_type TEXT,
                threat_level TEXT,
                first_seen TEXT,
                last_seen TEXT,
                source TEXT
            )
        ''')
        
        conn.commit()
        conn.close()
    
    def add_security_event(self, event_type, severity, source_ip, description):
        """Add new security event to database and real-time feed"""
        conn = sqlite3.connect('security_data.db')
        cursor = conn.cursor()
        
        cursor.execute('''
            INSERT INTO security_events 
            (timestamp, event_type, severity, source_ip, description, status)
            VALUES (?, ?, ?, ?, ?, ?)
        ''', (datetime.now().isoformat(), event_type, severity, 
              source_ip, description, 'Active'))
        
        conn.commit()
        conn.close()
        
        # Emit real-time update to connected clients
        socketio.emit('new_alert', {
            'timestamp': datetime.now().strftime('%H:%M:%S'),
            'type': event_type,
            'severity': severity,
            'source': source_ip,
            'description': description
        })

@app.route('/')
def dashboard():
    """Main dashboard page"""
    return render_template('dashboard.html')

@app.route('/api/alerts')
def get_alerts():
    """API endpoint for recent alerts"""
    conn = sqlite3.connect('security_data.db')
    cursor = conn.cursor()
    
    cursor.execute('''
        SELECT * FROM security_events 
        WHERE timestamp > ? 
        ORDER BY timestamp DESC LIMIT 100
    ''', (datetime.now() - timedelta(hours=24)).isoformat())
    
    alerts = cursor.fetchall()
    conn.close()
    
    return jsonify([{
        'id': alert[0],
        'timestamp': alert[1],
        'type': alert[2],
        'severity': alert[3],
        'source': alert[4],
        'description': alert[5],
        'status': alert[6]
    } for alert in alerts])

@app.route('/api/metrics')
def get_metrics():
    """API endpoint for dashboard metrics"""
    conn = sqlite3.connect('security_data.db')
    cursor = conn.cursor()
    
    # Get alert counts by severity
    cursor.execute('''
        SELECT severity, COUNT(*) FROM security_events 
        WHERE timestamp > ? 
        GROUP BY severity
    ''', ((datetime.now() - timedelta(hours=24)).isoformat(),))
    
    severity_counts = dict(cursor.fetchall())
    
    # Calculate metrics
    metrics = {
        'total_alerts': sum(severity_counts.values()),
        'critical_alerts': severity_counts.get('Critical', 0),
        'high_alerts': severity_counts.get('High', 0),
        'medium_alerts': severity_counts.get('Medium', 0),
        'low_alerts': severity_counts.get('Low', 0),
        'blocked_attacks': severity_counts.get('Critical', 0) * 2,
        'system_health': 98.5 - (severity_counts.get('Critical', 0) * 0.5)
    }
    
    conn.close()
    return jsonify(metrics)

if __name__ == '__main__':
    security_dashboard = SecurityDashboard()
    socketio.run(app, debug=True, host='0.0.0.0', port=5000)

Frontend Implementation (HTML/CSS/JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Security Operations Dashboard</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white; min-height: 100vh; padding: 20px;
        }
        
        .dashboard-header {
            text-align: center; margin-bottom: 30px;
        }
        
        .metrics-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px; margin-bottom: 30px;
        }
        
        .metric-card {
            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
            border-radius: 15px; padding: 25px; text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .metric-value { font-size: 2.5rem; font-weight: bold; margin-bottom: 10px; }
        .metric-label { font-size: 1rem; opacity: 0.8; }
        
        .alerts-section {
            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
            border-radius: 15px; padding: 25px; margin-bottom: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .alert-item {
            background: rgba(255, 255, 255, 0.05); border-radius: 8px;
            padding: 15px; margin-bottom: 10px; display: flex;
            justify-content: space-between; align-items: center;
        }
        
        .alert-critical { border-left: 4px solid #ff4757; }
        .alert-high { border-left: 4px solid #ffa502; }
        .alert-medium { border-left: 4px solid #fffa65; }
        .alert-low { border-left: 4px solid #7bed9f; }
        
        .chart-container { height: 400px; margin-top: 20px; }
    </style>
</head>
<body>
    <div class="dashboard-header">
        <h1>🛡️ Security Operations Dashboard</h1>
        <p>Real-time Security Monitoring & Threat Intelligence</p>
    </div>
    
    <div class="metrics-grid">
        <div class="metric-card">
            <div class="metric-value" id="total-alerts">0</div>
            <div class="metric-label">Total Alerts (24h)</div>
        </div>
        <div class="metric-card">
            <div class="metric-value" id="critical-alerts">0</div>
            <div class="metric-label">Critical Incidents</div>
        </div>
        <div class="metric-card">
            <div class="metric-value" id="blocked-attacks">0</div>
            <div class="metric-label">Blocked Attacks</div>
        </div>
        <div class="metric-card">
            <div class="metric-value" id="system-health">98.5%</div>
            <div class="metric-label">System Health</div>
        </div>
    </div>
    
    <div class="alerts-section">
        <h2>🚨 Live Alert Feed</h2>
        <div id="alerts-container"></div>
    </div>
    
    <div class="alerts-section">
        <h2>📊 Threat Analysis</h2>
        <div class="chart-container">
            <canvas id="threat-chart"></canvas>
        </div>
    </div>

    <script>
        // Initialize Socket.IO connection
        const socket = io();
        
        // Initialize Chart.js
        const ctx = document.getElementById('threat-chart').getContext('2d');
        const threatChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Critical', 'High', 'Medium', 'Low'],
                datasets: [{
                    data: [0, 0, 0, 0],
                    backgroundColor: ['#ff4757', '#ffa502', '#fffa65', '#7bed9f'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { color: 'white' } }
                }
            }
        });
        
        // Load initial data
        function loadDashboardData() {
            fetch('/api/metrics')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('total-alerts').textContent = data.total_alerts;
                    document.getElementById('critical-alerts').textContent = data.critical_alerts;
                    document.getElementById('blocked-attacks').textContent = data.blocked_attacks;
                    document.getElementById('system-health').textContent = data.system_health + '%';
                    
                    // Update chart
                    threatChart.data.datasets[0].data = [
                        data.critical_alerts, data.high_alerts, 
                        data.medium_alerts, data.low_alerts
                    ];
                    threatChart.update();
                });
                
            fetch('/api/alerts')
                .then(response => response.json())
                .then(alerts => {
                    const container = document.getElementById('alerts-container');
                    container.innerHTML = '';
                    
                    alerts.slice(0, 10).forEach(alert => {
                        const alertDiv = document.createElement('div');
                        alertDiv.className = `alert-item alert-${alert.severity.toLowerCase()}`;
                        alertDiv.innerHTML = `
                            <div>
                                <strong>${alert.type}</strong> - ${alert.description}
                                <br><small>Source: ${alert.source} | ${new Date(alert.timestamp).toLocaleString()}</small>
                            </div>
                            <span class="alert-severity">${alert.severity}</span>
                        `;
                        container.appendChild(alertDiv);
                    });
                });
        }
        
        // Handle real-time alerts
        socket.on('new_alert', function(alert) {
            const container = document.getElementById('alerts-container');
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert-item alert-${alert.severity.toLowerCase()}`;
            alertDiv.innerHTML = `
                <div>
                    <strong>${alert.type}</strong> - ${alert.description}
                    <br><small>Source: ${alert.source} | ${alert.timestamp}</small>
                </div>
                <span class="alert-severity">${alert.severity}</span>
            `;
            container.insertBefore(alertDiv, container.firstChild);
            
            // Remove old alerts (keep only latest 10)
            while (container.children.length > 10) {
                container.removeChild(container.lastChild);
            }
            
            // Refresh metrics
            loadDashboardData();
        });
        
        // Load data initially and refresh every 30 seconds
        loadDashboardData();
        setInterval(loadDashboardData, 30000);
    </script>
</body>
</html>

Installation & Setup

# Clone the repository
git clone https://github.com/GauravSingh-CyberSecurity/security-dashboard.git
cd security-dashboard

# Install Python dependencies
pip install -r requirements.txt

# Initialize database
python init_db.py

# Start the dashboard
python app.py

Key Features Implementation

Real-time Data Processing

def simulate_security_events():
    """Simulate incoming security events for demo purposes"""
    import random
    import time
    
    event_types = ['Intrusion Attempt', 'Malware Detection', 'DDoS Attack', 'Data Exfiltration']
    severities = ['Critical', 'High', 'Medium', 'Low']
    source_ips = ['192.168.1.100', '10.0.0.50', '172.16.0.25', '203.0.113.10']
    
    while True:
        event = {
            'type': random.choice(event_types),
            'severity': random.choice(severities),
            'source_ip': random.choice(source_ips),
            'description': f"Suspicious activity detected from {random.choice(source_ips)}"
        }
        
        security_dashboard.add_security_event(
            event['type'], event['severity'], 
            event['source_ip'], event['description']
        )
        
        time.sleep(random.randint(5, 30))  # Random intervals

# Start background thread for event simulation
import threading
event_thread = threading.Thread(target=simulate_security_events, daemon=True)
event_thread.start()

Dashboard Components

Executive Overview

  • Security posture summary
  • Key risk indicators
  • Compliance status
  • Monthly security trends

Threat Intelligence

  • Live threat feeds
  • IOC tracking
  • Attribution analysis
  • Threat landscape overview

Incident Response

  • Active incident queue
  • Response timelines
  • Team assignments
  • Escalation procedures

Vulnerability Management

  • Vulnerability metrics
  • Patch status tracking
  • Risk scoring
  • Remediation priorities

Integration Examples

SIEM Integration

def integrate_with_splunk():
    """Example Splunk integration"""
    import requests
    
    def send_to_splunk(event_data):
        splunk_url = "https://your-splunk-instance:8088/services/collector"
        headers = {"Authorization": "Splunk your-token"}
        
        payload = {
            "event": event_data,
            "sourcetype": "security_dashboard",
            "index": "security"
        }
        
        response = requests.post(splunk_url, json=payload, headers=headers)
        return response.status_code == 200

def integrate_with_elk():
    """Example ELK Stack integration"""
    from elasticsearch import Elasticsearch
    
    es = Elasticsearch(['your-elasticsearch-cluster'])
    
    def send_to_elk(event_data):
        doc = {
            'timestamp': datetime.now(),
            'event': event_data,
            '@timestamp': datetime.now().isoformat()
        }
        
        es.index(index="security-events", body=doc)

Threat Intelligence Feed

def update_threat_intel():
    """Update threat intelligence from external feeds"""
    # Example: Fetch from AlienVault OTX, VirusTotal, etc.
    threat_feeds = [
        'https://reputation.alienvault.com/reputation.data',
        'https://rules.emergingthreats.net/blockrules/compromised-ips.txt'
    ]
    
    for feed_url in threat_feeds:
        response = requests.get(feed_url)
        if response.status_code == 200:
            process_threat_feed(response.text)

def process_threat_feed(feed_data):
    """Process and store threat intelligence data"""
    conn = sqlite3.connect('security_data.db')
    cursor = conn.cursor()
    
    for line in feed_data.split('\n'):
        if line.strip() and not line.startswith('#'):
            ip = line.strip().split()[0]
            cursor.execute('''
                INSERT OR REPLACE INTO threat_intel 
                (ioc, ioc_type, threat_level, last_seen, source)
                VALUES (?, ?, ?, ?, ?)
            ''', (ip, 'IP', 'High', datetime.now().isoformat(), 'External Feed'))
    
    conn.commit()
    conn.close()

Advanced Features

Machine Learning Anomaly Detection

from sklearn.ensemble import IsolationForest
import pandas as pd

class AnomalyDetector:
    def __init__(self):
        self.model = IsolationForest(contamination=0.1, random_state=42)
        self.is_trained = False
    
    def train_model(self, historical_data):
        """Train anomaly detection model on historical security events"""
        df = pd.DataFrame(historical_data)
        features = self.extract_features(df)
        self.model.fit(features)
        self.is_trained = True
    
    def detect_anomaly(self, event_data):
        """Detect if new event is anomalous"""
        if not self.is_trained:
            return False
            
        features = self.extract_features(pd.DataFrame([event_data]))
        prediction = self.model.predict(features)
        return prediction[0] == -1  # -1 indicates anomaly
    
    def extract_features(self, df):
        """Extract numerical features from event data"""
        # Convert categorical data to numerical
        features = pd.get_dummies(df[['event_type', 'severity']])
        features['hour'] = pd.to_datetime(df['timestamp']).dt.hour
        features['day_of_week'] = pd.to_datetime(df['timestamp']).dt.dayofweek
        return features

Deployment Options

Docker Deployment

FROM python:3.9-slim

WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .

EXPOSE 5000
CMD ["python", "app.py"]

Kubernetes Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: security-dashboard
spec:
  replicas: 3
  selector:
    matchLabels:
      app: security-dashboard
  template:
    metadata:
      labels:
        app: security-dashboard
    spec:
      containers:
      - name: dashboard
        image: security-dashboard:latest
        ports:
        - containerPort: 5000
        env:
        - name: DATABASE_URL
          valueFrom:
            secretKeyRef:
              name: db-secret
              key: url

This comprehensive security dashboard provides real-time monitoring capabilities with professional visualization and integration options for enterprise security operations.