setu-trafficmonitor 2.0.0__py3-none-any.whl

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

@@ -0,0 +1,339 @@
+/**
+ * Production-ready Analytics Dashboard JavaScript
+ * Features: Error handling, retry logic, performance optimization, accessibility
+ */
+
+class DashboardManager {
+    constructor() {
+        this.charts = new Map();
+        this.retryCount = 0;
+        this.maxRetries = 3;
+        this.csrfToken = this.getCSRFToken();
+        this.abortController = null;
+        
+        // Debounced filter function
+        this.applyFiltersDebounced = this.debounce(this.applyFilters.bind(this), 300);
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupEventListeners();
+        this.loadDashboard();
+        this.setupPerformanceMonitoring();
+    }
+    
+    setupEventListeners() {
+        // Filter change events
+        document.getElementById('rangeFilter')?.addEventListener('change', () => {
+            this.handleRangeChange();
+        });
+        
+        // Keyboard accessibility
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'r' && e.ctrlKey) {
+                e.preventDefault();
+                this.refreshDashboard();
+            }
+        });
+        
+        // Window resize handling
+        window.addEventListener('resize', this.debounce(() => {
+            this.resizeCharts();
+        }, 250));
+        
+        // Visibility change (pause updates when tab not visible)
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                this.pauseUpdates();
+            } else {
+                this.resumeUpdates();
+            }
+        });
+    }
+    
+    async loadDashboard() {
+        try {
+            this.showLoading();
+            const data = await this.fetchAnalyticsData();
+            this.renderDashboard(data);
+            this.hideLoading();
+        } catch (error) {
+            this.handleError(error);
+        }
+    }
+    
+    async fetchAnalyticsData(filters = {}) {
+        // Cancel previous request
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        
+        this.abortController = new AbortController();
+        
+        const params = new URLSearchParams(filters);
+        const url = `/api/analytics/overview/?${params}`;
+        
+        try {
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'X-CSRFToken': this.csrfToken,
+                    'Content-Type': 'application/json',
+                },
+                signal: this.abortController.signal,
+                timeout: 30000, // 30 second timeout
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            this.retryCount = 0; // Reset on success
+            return data;
+            
+        } catch (error) {
+            if (error.name === 'AbortError') {
+                throw new Error('Request was cancelled');
+            }
+            
+            // Retry logic
+            if (this.retryCount < this.maxRetries) {
+                this.retryCount++;
+                console.warn(`Request failed, retrying (${this.retryCount}/${this.maxRetries}):`, error);
+                await this.delay(1000 * this.retryCount); // Exponential backoff
+                return this.fetchAnalyticsData(filters);
+            }
+            
+            throw error;
+        }
+    }
+    
+    renderDashboard(data) {
+        try {
+            this.updateMetrics(data.metrics);
+            this.renderCharts(data.charts);
+            this.updateLastRefresh();
+        } catch (error) {
+            console.error('Error rendering dashboard:', error);
+            this.showError('Failed to render dashboard data');
+        }
+    }
+    
+    updateMetrics(metrics) {
+        const elements = {
+            'totalRequests': metrics.total_requests,
+            'readOps': metrics.read_operations,
+            'writeOps': metrics.write_operations,
+            'deleteOps': metrics.delete_operations,
+            'errorRate': `${metrics.error_rate}%`,
+            'avgResponseTime': `${metrics.avg_response_time}ms`,
+        };
+        
+        Object.entries(elements).forEach(([id, value]) => {
+            const element = document.getElementById(id);
+            if (element) {
+                this.animateValue(element, value);
+            }
+        });
+    }
+    
+    renderCharts(chartData) {
+        // Destroy existing charts to prevent memory leaks
+        this.destroyCharts();
+        
+        // Render new charts with error handling
+        this.renderChart('requestsOverTime', chartData.requests_over_time, 'line');
+        this.renderChart('statusCodes', chartData.status_codes, 'doughnut');
+        this.renderChart('methods', chartData.methods, 'bar');
+        this.renderChart('errorTrend', chartData.error_trend, 'line');
+        this.renderChart('slowestEndpoints', chartData.slowest_endpoints, 'horizontalBar');
+    }
+    
+    renderChart(canvasId, data, type) {
+        try {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) {
+                console.warn(`Canvas element ${canvasId} not found`);
+                return;
+            }
+            
+            const ctx = canvas.getContext('2d');
+            const config = this.getChartConfig(type, data);
+            
+            const chart = new Chart(ctx, config);
+            this.charts.set(canvasId, chart);
+            
+        } catch (error) {
+            console.error(`Error rendering chart ${canvasId}:`, error);
+            this.showChartError(canvasId);
+        }
+    }
+    
+    getChartConfig(type, data) {
+        const baseConfig = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top',
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                },
+            },
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false,
+            },
+        };
+        
+        // Chart-specific configurations
+        switch (type) {
+            case 'line':
+                return {
+                    type: 'line',
+                    data: data,
+                    options: {
+                        ...baseConfig,
+                        scales: {
+                            x: {
+                                type: 'time',
+                                time: {
+                                    displayFormats: {
+                                        hour: 'MMM dd, HH:mm',
+                                        day: 'MMM dd',
+                                    },
+                                },
+                            },
+                            y: {
+                                beginAtZero: true,
+                            },
+                        },
+                    },
+                };
+            
+            case 'doughnut':
+                return {
+                    type: 'doughnut',
+                    data: data,
+                    options: {
+                        ...baseConfig,
+                        cutout: '60%',
+                    },
+                };
+            
+            default:
+                return {
+                    type: type,
+                    data: data,
+                    options: baseConfig,
+                };
+        }
+    }
+    
+    // Utility methods
+    getCSRFToken() {
+        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+        if (!token) {
+            console.warn('CSRF token not found');
+        }
+        return token;
+    }
+    
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+    
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    
+    animateValue(element, newValue) {
+        element.style.opacity = '0.5';
+        setTimeout(() => {
+            element.textContent = newValue;
+            element.style.opacity = '1';
+        }, 150);
+    }
+    
+    showLoading() {
+        document.getElementById('loadingIndicator')?.classList.remove('hidden');
+        document.getElementById('dashboardContent')?.classList.add('hidden');
+    }
+    
+    hideLoading() {
+        document.getElementById('loadingIndicator')?.classList.add('hidden');
+        document.getElementById('dashboardContent')?.classList.remove('hidden');
+    }
+    
+    showError(message) {
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'error-state';
+        errorDiv.innerHTML = `
+            <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
+            <h3 class="text-xl font-semibold mb-2">Error Loading Dashboard</h3>
+            <p>${message}</p>
+            <button onclick="dashboard.refreshDashboard()" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
+                Retry
+            </button>
+        `;
+        
+        document.getElementById('dashboardContent').innerHTML = '';
+        document.getElementById('dashboardContent').appendChild(errorDiv);
+        this.hideLoading();
+    }
+    
+    destroyCharts() {
+        this.charts.forEach(chart => {
+            chart.destroy();
+        });
+        this.charts.clear();
+    }
+    
+    resizeCharts() {
+        this.charts.forEach(chart => {
+            chart.resize();
+        });
+    }
+    
+    refreshDashboard() {
+        this.loadDashboard();
+    }
+    
+    setupPerformanceMonitoring() {
+        // Monitor performance
+        if ('performance' in window) {
+            window.addEventListener('load', () => {
+                const loadTime = performance.now();
+                console.log(`Dashboard loaded in ${loadTime.toFixed(2)}ms`);
+            });
+        }
+    }
+}
+
+// Initialize dashboard when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.dashboard = new DashboardManager();
+});
+
+// Global functions for backward compatibility
+function applyFilters() {
+    window.dashboard?.applyFiltersDebounced();
+}
+
+function refreshDashboard() {
+    window.dashboard?.refreshDashboard();
+}