setu-trafficmonitor 2.0.0__py3-none-any.whl

trafficmonitor/static/analytics/js/dashboard-v2.js

@@ -0,0 +1,697 @@
+/**
+ * TrafficMonitor v2.0 - Enterprise Analytics Dashboard JavaScript
+ * Handles data fetching, chart rendering, and interactions with new Read/Write metrics
+ */
+
+// Chart instances (global)
+let requestsOverTimeChart = null;
+let readWriteChart = null;
+let methodsChart = null;
+let endpointCategoriesChart = null;
+let slowestEndpointsChart = null;
+let hourlyHeatmapChart = null;
+
+// Auto-refresh interval ID (prevent duplicates)
+let refreshIntervalId = null;
+
+// Auto-refresh state
+window.autoRefreshEnabled = true;
+
+// Chart color schemes
+const COLORS = {
+    primary: 'rgb(59, 130, 246)',      // Blue
+    success: 'rgb(34, 197, 94)',       // Green
+    warning: 'rgb(251, 191, 36)',      // Yellow
+    danger: 'rgb(239, 68, 68)',        // Red
+    info: 'rgb(139, 92, 246)',         // Purple
+    secondary: 'rgb(107, 114, 128)',   // Gray
+    read: 'rgb(34, 197, 94)',          // Green for READ
+    write: 'rgb(139, 92, 246)',        // Purple for WRITE
+    delete: 'rgb(239, 68, 68)',        // Red for DELETE
+};
+
+/**
+ * Initialize the dashboard
+ */
+function initializeDashboard() {
+    loadAnalyticsData();
+}
+
+/**
+ * Refresh dashboard with current filters (component-wise)
+ */
+async function refreshDashboard() {
+    console.log('Starting component-wise refresh...');
+    
+    try {
+        const params = getFilterParams();
+        const response = await fetch(`/api/analytics/overview/?${params}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: Failed to fetch analytics data`);
+        }
+
+        const data = await response.json();
+
+        // Refresh components independently with smooth transitions
+        await Promise.all([
+            refreshStatsCards(data),
+            refreshCharts(data),
+            refreshTables(data)
+        ]);
+
+        // Update last updated time
+        const lastUpdatedEl = document.getElementById('lastUpdated');
+        if (lastUpdatedEl) {
+            lastUpdatedEl.textContent = new Date().toLocaleString();
+            // Flash effect to show update
+            lastUpdatedEl.classList.add('text-green-600', 'font-bold');
+            setTimeout(() => {
+                lastUpdatedEl.classList.remove('text-green-600', 'font-bold');
+            }, 2000);
+        }
+        
+        console.log('Component-wise refresh completed successfully');
+
+    } catch (error) {
+        console.error('Error refreshing dashboard:', error);
+    }
+}
+
+/**
+ * Apply filters and reload dashboard
+ */
+function applyFilters() {
+    loadAnalyticsData();
+}
+
+/**
+ * Get current filter parameters
+ */
+function getFilterParams() {
+    const params = new URLSearchParams();
+
+    const range = document.getElementById('rangeSelect').value;
+    params.append('range', range);
+
+    if (range === 'custom') {
+        const startDate = document.getElementById('startDate').value;
+        const endDate = document.getElementById('endDate').value;
+        if (startDate) params.append('start_date', startDate);
+        if (endDate) params.append('end_date', endDate);
+    }
+
+    const operationType = document.getElementById('operationFilter')?.value;
+    if (operationType) params.append('operation_type', operationType);
+
+    const status = document.getElementById('statusFilter')?.value;
+    if (status) params.append('status', status);
+
+    const path = document.getElementById('pathFilter')?.value;
+    if (path) params.append('path', path);
+
+    return params.toString();
+}
+
+/**
+ * Load analytics data from API
+ */
+async function loadAnalyticsData() {
+    try {
+        // Show loading (only on first load)
+        const loadingEl = document.getElementById('loadingIndicator');
+        const dashboardEl = document.getElementById('dashboardContent');
+        
+        if (dashboardEl && dashboardEl.classList.contains('hidden')) {
+            loadingEl?.classList.remove('hidden');
+        }
+
+        const params = getFilterParams();
+        const response = await fetch(`/api/analytics/overview/?${params}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: Failed to fetch analytics data`);
+        }
+
+        const data = await response.json();
+
+        // Update stats cards
+        updateStatsCards(data);
+
+        // Update charts
+        updateCharts(data);
+
+        // Update tables
+        updateTables(data);
+
+        // Update last updated time
+        const lastUpdatedEl = document.getElementById('lastUpdated');
+        if (lastUpdatedEl) {
+            lastUpdatedEl.textContent = new Date().toLocaleString();
+        }
+
+        // Show dashboard
+        loadingEl?.classList.add('hidden');
+        dashboardEl?.classList.remove('hidden');
+
+    } catch (error) {
+        console.error('Error loading analytics:', error);
+        
+        // Show error message in dashboard instead of alert
+        const dashboardEl = document.getElementById('dashboardContent');
+        if (dashboardEl) {
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
+            errorDiv.innerHTML = `
+                <strong>Error:</strong> Failed to load analytics data. ${error.message}
+                <button onclick="location.reload()" class="ml-4 px-3 py-1 bg-red-500 text-white rounded">
+                    Reload Page
+                </button>
+            `;
+            dashboardEl.insertBefore(errorDiv, dashboardEl.firstChild);
+        }
+        
+        // Hide loading
+        document.getElementById('loadingIndicator')?.classList.add('hidden');
+        dashboardEl?.classList.remove('hidden');
+    }
+}
+
+/**
+ * Refresh stats cards with animation
+ */
+async function refreshStatsCards(data) {
+    return new Promise((resolve) => {
+        // Add fade effect
+        const cards = document.querySelectorAll('.stat-card');
+        cards.forEach(card => card.style.opacity = '0.5');
+        
+        setTimeout(() => {
+            updateStatsCards(data);
+            cards.forEach(card => {
+                card.style.opacity = '1';
+                card.style.transition = 'opacity 0.5s ease';
+            });
+            resolve();
+        }, 100);
+    });
+}
+
+/**
+ * Update stats cards
+ */
+function updateStatsCards(data) {
+    // Total Requests
+    document.getElementById('totalRequests').textContent = 
+        (data.totals?.selected_range || 0).toLocaleString();
+
+    // Read/Write Operations
+    const readWriteSummary = data.read_write_summary || {};
+    document.getElementById('readOps').textContent = 
+        (readWriteSummary.read_count || 0).toLocaleString();
+    document.getElementById('readPercent').textContent = 
+        `${(readWriteSummary.read_percentage || 0).toFixed(1)}% of total`;
+    
+    document.getElementById('writeOps').textContent = 
+        (readWriteSummary.write_count || 0).toLocaleString();
+    document.getElementById('writePercent').textContent = 
+        `${(readWriteSummary.write_percentage || 0).toFixed(1)}% of total`;
+
+    // API Health
+    const apiHealth = data.api_health || {};
+    document.getElementById('successRate').textContent = 
+        `${(apiHealth.success_rate || 0).toFixed(1)}%`;
+    document.getElementById('p95ResponseTime').textContent = 
+        `${(apiHealth.p95_response_time || 0).toFixed(0)} ms`;
+
+    // API Health Metrics Cards
+    document.getElementById('statusSuccess').textContent = 
+        (data.status_summary?.success || 0).toLocaleString();
+    document.getElementById('statusErrors').textContent = 
+        ((data.status_summary?.client_error || 0) + (data.status_summary?.server_error || 0)).toLocaleString();
+    
+    document.getElementById('p50Response').textContent = 
+        `${(apiHealth.p50_response_time || 0).toFixed(0)} ms`;
+    document.getElementById('p99Response').textContent = 
+        `${(apiHealth.p99_response_time || 0).toFixed(0)} ms`;
+    
+    // Throughput
+    const throughput = data.throughput || {};
+    document.getElementById('throughputRPS').textContent = 
+        `${(throughput.avg_rps || 0).toFixed(1)} rps`;
+    
+    // Average Queries
+    document.getElementById('avgQueries').textContent = 
+        (data.performance?.avg_query_count || 0).toFixed(1);
+}
+
+/**
+ * Refresh all charts with staggered animation
+ */
+async function refreshCharts(data) {
+    const charts = [
+        { fn: () => updateRequestsOverTimeChart(data.requests_over_time || []), delay: 0 },
+        { fn: () => updateReadWriteChart(data.read_write_over_time || []), delay: 100 },
+        { fn: () => updateMethodsChart(data.methods || []), delay: 200 },
+        { fn: () => updateEndpointCategoriesChart(data.endpoint_categories || []), delay: 300 },
+        { fn: () => updateSlowestEndpointsChart(data.slowest_endpoints || []), delay: 400 },
+        { fn: () => updateHourlyHeatmapChart(data.hourly_heatmap || []), delay: 500 }
+    ];
+
+    return Promise.all(
+        charts.map(({ fn, delay }) => 
+            new Promise(resolve => {
+                setTimeout(() => {
+                    fn();
+                    resolve();
+                }, delay);
+            })
+        )
+    );
+}
+
+/**
+ * Update all charts
+ */
+function updateCharts(data) {
+    updateRequestsOverTimeChart(data.requests_over_time || []);
+    updateReadWriteChart(data.read_write_over_time || []);
+    updateMethodsChart(data.methods || []);
+    updateEndpointCategoriesChart(data.endpoint_categories || []);
+    updateSlowestEndpointsChart(data.slowest_endpoints || []);
+    updateHourlyHeatmapChart(data.hourly_heatmap || []);
+}
+
+/**
+ * Update Requests Over Time Chart
+ */
+function updateRequestsOverTimeChart(data) {
+    const ctx = document.getElementById('requestsOverTimeChart');
+    if (!ctx) return;
+
+    // Smooth transition: update existing chart if possible
+    if (requestsOverTimeChart && requestsOverTimeChart.data) {
+        requestsOverTimeChart.data.labels = data.map(d => new Date(d.period));
+        requestsOverTimeChart.data.datasets[0].data = data.map(d => d.count);
+        requestsOverTimeChart.update('none'); // Update without animation for smoother feel
+        return;
+    }
+
+    // Create new chart if it doesn't exist
+    if (requestsOverTimeChart) {
+        requestsOverTimeChart.destroy();
+    }
+
+    requestsOverTimeChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: data.map(d => new Date(d.period)),
+            datasets: [{
+                label: 'Total Requests',
+                data: data.map(d => d.count),
+                borderColor: COLORS.primary,
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                tension: 0.4,
+                fill: true
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                x: {
+                    type: 'time',
+                    time: {
+                        unit: 'day'
+                    }
+                },
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Update Read vs Write Chart
+ */
+function updateReadWriteChart(data) {
+    const ctx = document.getElementById('readWriteChart');
+    if (!ctx) return;
+
+    // Smooth transition: update existing chart
+    if (readWriteChart && readWriteChart.data) {
+        readWriteChart.data.labels = data.map(d => new Date(d.period));
+        readWriteChart.data.datasets[0].data = data.map(d => d.read_count);
+        readWriteChart.data.datasets[1].data = data.map(d => d.write_count);
+        readWriteChart.data.datasets[2].data = data.map(d => d.delete_count);
+        readWriteChart.update('none');
+        return;
+    }
+
+    // Create new chart
+    if (readWriteChart) {
+        readWriteChart.destroy();
+    }
+
+    readWriteChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: data.map(d => new Date(d.period)),
+            datasets: [
+                {
+                    label: '📖 READ Operations',
+                    data: data.map(d => d.read_count),
+                    borderColor: COLORS.read,
+                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                },
+                {
+                    label: '✏️ WRITE Operations',
+                    data: data.map(d => d.write_count),
+                    borderColor: COLORS.write,
+                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                },
+                {
+                    label: '🗑️ DELETE Operations',
+                    data: data.map(d => d.delete_count),
+                    borderColor: COLORS.delete,
+                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top'
+                }
+            },
+            scales: {
+                x: {
+                    type: 'time',
+                    time: {
+                        unit: 'day'
+                    }
+                },
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Update HTTP Methods Chart
+ */
+function updateMethodsChart(data) {
+    const ctx = document.getElementById('methodsChart');
+    if (!ctx) return;
+
+    if (methodsChart) {
+        methodsChart.destroy();
+    }
+
+    methodsChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: data.map(d => d.method),
+            datasets: [{
+                data: data.map(d => d.count),
+                backgroundColor: [
+                    COLORS.success,
+                    COLORS.primary,
+                    COLORS.warning,
+                    'rgb(249, 115, 22)',
+                    COLORS.danger,
+                ],
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'right'
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Update Endpoint Categories Chart
+ */
+function updateEndpointCategoriesChart(data) {
+    const ctx = document.getElementById('endpointCategoriesChart');
+    if (!ctx) return;
+
+    if (endpointCategoriesChart) {
+        endpointCategoriesChart.destroy();
+    }
+
+    endpointCategoriesChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: data.map(d => d.endpoint_category),
+            datasets: [{
+                label: 'Requests',
+                data: data.map(d => d.total_count),
+                backgroundColor: COLORS.info,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: 'y',
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Update Slowest Endpoints Chart
+ */
+function updateSlowestEndpointsChart(data) {
+    const ctx = document.getElementById('slowestEndpointsChart');
+    if (!ctx) return;
+
+    if (slowestEndpointsChart) {
+        slowestEndpointsChart.destroy();
+    }
+
+    slowestEndpointsChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: data.map(d => d.path.length > 40 ? d.path.substring(0, 40) + '...' : d.path),
+            datasets: [{
+                label: 'Avg Response Time (ms)',
+                data: data.map(d => d.avg_response_time),
+                backgroundColor: COLORS.warning,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: 'y',
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Update Hourly Heatmap Chart
+ */
+function updateHourlyHeatmapChart(data) {
+    const ctx = document.getElementById('hourlyHeatmapChart');
+    if (!ctx) return;
+
+    if (hourlyHeatmapChart) {
+        hourlyHeatmapChart.destroy();
+    }
+
+    hourlyHeatmapChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: data.map(d => `${d.hour}:00`),
+            datasets: [{
+                label: 'Requests',
+                data: data.map(d => d.count),
+                backgroundColor: COLORS.danger,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Refresh tables with fade animation
+ */
+async function refreshTables(data) {
+    return new Promise((resolve) => {
+        const tbody = document.getElementById('topEndpointsTable');
+        if (tbody) {
+            tbody.style.opacity = '0.3';
+            setTimeout(() => {
+                updateTables(data);
+                tbody.style.opacity = '1';
+                tbody.style.transition = 'opacity 0.5s ease';
+                resolve();
+            }, 200);
+        } else {
+            resolve();
+        }
+    });
+}
+
+/**
+ * Update tables
+ */
+function updateTables(data) {
+    updateTopEndpointsTable(data.top_endpoints || []);
+}
+
+/**
+ * Update Top Endpoints Table
+ */
+function updateTopEndpointsTable(data) {
+    const tbody = document.getElementById('topEndpointsTable');
+    if (!tbody) return;
+
+    tbody.innerHTML = '';
+
+    data.forEach((endpoint, index) => {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-gray-50';
+        
+        // Health badge
+        let healthBadge = '';
+        const avgTime = endpoint.avg_response_time || 0;
+        if (avgTime < 100) {
+            healthBadge = '<span class="metric-badge badge-success">Excellent</span>';
+        } else if (avgTime < 500) {
+            healthBadge = '<span class="metric-badge badge-info">Good</span>';
+        } else if (avgTime < 1000) {
+            healthBadge = '<span class="metric-badge badge-warning">Slow</span>';
+        } else {
+            healthBadge = '<span class="metric-badge badge-danger">Critical</span>';
+        }
+
+        row.innerHTML = `
+            <td class="px-4 py-3 text-sm text-gray-900">${index + 1}</td>
+            <td class="px-4 py-3 text-sm text-gray-900 font-mono">${endpoint.path}</td>
+            <td class="px-4 py-3 text-sm text-gray-600 text-center">
+                <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium">
+                    ${endpoint.path.split('/').filter(p => p && p !== 'api')[0] || 'N/A'}
+                </span>
+            </td>
+            <td class="px-4 py-3 text-sm text-gray-900 text-right font-semibold">${endpoint.count.toLocaleString()}</td>
+            <td class="px-4 py-3 text-sm text-gray-900 text-right">${avgTime.toFixed(0)} ms</td>
+            <td class="px-4 py-3 text-sm text-gray-900 text-right">${(endpoint.max_response_time || 0).toFixed(0)} ms</td>
+            <td class="px-4 py-3 text-center">${healthBadge}</td>
+        `;
+        tbody.appendChild(row);
+    });
+}
+
+// Initialize on page load (ensure it runs only once)
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializePage);
+} else {
+    initializePage();
+}
+
+function initializePage() {
+    // Prevent duplicate initialization
+    if (window.dashboardInitialized) {
+        console.log('Dashboard already initialized, skipping...');
+        return;
+    }
+    window.dashboardInitialized = true;
+    
+    console.log('Initializing dashboard...');
+    initializeDashboard();
+    
+    // Handle custom range toggle
+    const rangeSelect = document.getElementById('rangeSelect');
+    if (rangeSelect) {
+        rangeSelect.addEventListener('change', function() {
+            const customContainer = document.getElementById('customRangeContainer');
+            if (customContainer) {
+                if (this.value === 'custom') {
+                    customContainer.classList.remove('hidden');
+                } else {
+                    customContainer.classList.add('hidden');
+                }
+            }
+        });
+    }
+    
+    // Auto-refresh every 30 seconds (clear any existing interval first)
+    if (refreshIntervalId) {
+        clearInterval(refreshIntervalId);
+    }
+    
+    if (window.autoRefreshEnabled) {
+        refreshIntervalId = setInterval(function() {
+            console.log('Auto-refreshing dashboard data...');
+            refreshDashboard();
+        }, 30000); // 30 seconds
+        window.refreshIntervalId = refreshIntervalId; // Make it globally accessible
+        
+        // Add visual indicator for next refresh
+        let countdown = 30;
+        const countdownInterval = setInterval(() => {
+            countdown--;
+            const refreshStatus = document.getElementById('refreshStatus');
+            if (refreshStatus && window.autoRefreshEnabled) {
+                refreshStatus.textContent = `ON (${countdown}s)`;
+            }
+            if (countdown <= 0) {
+                countdown = 30;
+            }
+        }, 1000);
+        
+        window.countdownIntervalId = countdownInterval;
+    }
+    
+    console.log('Dashboard initialized successfully. Auto-refresh: ' + (window.autoRefreshEnabled ? '30s' : 'OFF'));
+}