setu-trafficmonitor 2.0.0__py3-none-any.whl

trafficmonitor/static/analytics/js/dashboard.js

@@ -0,0 +1,693 @@
+/**
+ * Analytics Dashboard JavaScript
+ * Handles data fetching, chart rendering, and interactions
+ */
+
+/**
+ * Get CSRF token from cookie
+ */
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+// Chart instances (global)
+let requestsOverTimeChart = null;
+let statusCodesChart = null;
+let methodsChart = null;
+let errorTrendChart = null;
+let slowestEndpointsChart = null;
+let hourlyHeatmapChart = null;
+
+// 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
+};
+
+const METHOD_COLORS = {
+    'GET': COLORS.success,
+    'POST': COLORS.primary,
+    'PUT': COLORS.warning,
+    'PATCH': 'rgb(249, 115, 22)',      // Orange
+    'DELETE': COLORS.danger,
+};
+
+const STATUS_COLORS = {
+    '2xx': COLORS.success,
+    '3xx': COLORS.info,
+    '4xx': COLORS.warning,
+    '5xx': COLORS.danger,
+};
+
+/**
+ * Initialize the dashboard
+ */
+function initializeDashboard() {
+    loadAnalyticsData();
+}
+
+/**
+ * Refresh dashboard with current filters
+ */
+function refreshDashboard() {
+    loadAnalyticsData();
+}
+
+/**
+ * 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 method = document.getElementById('methodFilter').value;
+    if (method) params.append('method', method);
+
+    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;
+}
+
+/**
+ * Load analytics data from API
+ */
+async function loadAnalyticsData() {
+    try {
+        // Show loading indicator
+        document.getElementById('loadingIndicator').classList.remove('hidden');
+        document.getElementById('dashboardContent').classList.add('hidden');
+
+        // Fetch analytics data
+        const params = getFilterParams();
+        const csrftoken = getCookie('csrftoken');
+        const response = await fetch(`/api/analytics/overview/?${params.toString()}`, {
+            credentials: 'same-origin',  // Include cookies for session auth
+            headers: {
+                'Accept': 'application/json',
+                'X-CSRFToken': csrftoken,  // Include CSRF token for Django
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        // Update dashboard with data
+        updateStats(data);
+        updateCharts(data);
+        updateTables(data);
+
+        // Update last updated time
+        document.getElementById('lastUpdated').textContent = new Date().toLocaleString();
+
+        // Hide loading, show content
+        document.getElementById('loadingIndicator').classList.add('hidden');
+        document.getElementById('dashboardContent').classList.remove('hidden');
+
+    } catch (error) {
+        console.error('Error loading analytics data:', error);
+        alert('Failed to load analytics data. Please try again.');
+        document.getElementById('loadingIndicator').classList.add('hidden');
+    }
+}
+
+/**
+ * Update stats cards
+ */
+function updateStats(data) {
+    // Total requests
+    document.getElementById('totalToday').textContent =
+        formatNumber(data.totals.today);
+    document.getElementById('totalLast7Days').textContent =
+        formatNumber(data.totals.last_7_days);
+    document.getElementById('totalLast30Days').textContent =
+        formatNumber(data.totals.last_30_days);
+
+    // Average response time
+    const avgTime = data.performance.avg_response_time;
+    document.getElementById('avgResponseTime').textContent =
+        avgTime ? `${avgTime.toFixed(1)} ms` : 'N/A';
+
+    // Status code summary
+    document.getElementById('statusSuccess').textContent =
+        formatNumber(data.status_summary.success);
+    document.getElementById('statusRedirect').textContent =
+        formatNumber(data.status_summary.redirect);
+    document.getElementById('statusClientError').textContent =
+        formatNumber(data.status_summary.client_error);
+    document.getElementById('statusServerError').textContent =
+        formatNumber(data.status_summary.server_error);
+    document.getElementById('statusTotal').textContent =
+        formatNumber(data.status_summary.total);
+}
+
+/**
+ * Update all charts
+ */
+function updateCharts(data) {
+    renderRequestsOverTimeChart(data.requests_over_time);
+    renderStatusCodesChart(data.status_codes);
+    renderMethodsChart(data.methods);
+    renderErrorTrendChart(data.error_trend);
+    renderSlowestEndpointsChart(data.slowest_endpoints);
+    renderHourlyHeatmapChart(data.hourly_heatmap);
+}
+
+/**
+ * Update tables
+ */
+function updateTables(data) {
+    updateTopEndpointsTable(data.top_endpoints);
+    updateTopIPsTable(data.top_ips);
+}
+
+/**
+ * Render requests over time chart (Line chart)
+ */
+function renderRequestsOverTimeChart(data) {
+    const ctx = document.getElementById('requestsOverTimeChart');
+
+    // Destroy existing chart
+    if (requestsOverTimeChart) {
+        requestsOverTimeChart.destroy();
+    }
+
+    requestsOverTimeChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: data.map(item => new Date(item.period)),
+            datasets: [{
+                label: 'Requests',
+                data: data.map(item => item.count),
+                borderColor: COLORS.primary,
+                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                borderWidth: 2,
+                fill: true,
+                tension: 0.4,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                }
+            },
+            scales: {
+                x: {
+                    type: 'time',
+                    time: {
+                        unit: 'day',
+                        displayFormats: {
+                            day: 'MMM dd'
+                        }
+                    },
+                    grid: {
+                        display: false
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: 0
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)'
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Render status codes chart (Bar chart)
+ */
+function renderStatusCodesChart(data) {
+    const ctx = document.getElementById('statusCodesChart');
+
+    if (statusCodesChart) {
+        statusCodesChart.destroy();
+    }
+
+    // Sort by status code
+    data.sort((a, b) => a.status_code - b.status_code);
+
+    // Assign colors based on status code range
+    const colors = data.map(item => {
+        if (item.status_code < 300) return COLORS.success;
+        if (item.status_code < 400) return COLORS.info;
+        if (item.status_code < 500) return COLORS.warning;
+        return COLORS.danger;
+    });
+
+    statusCodesChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: data.map(item => item.status_code.toString()),
+            datasets: [{
+                label: 'Requests',
+                data: data.map(item => item.count),
+                backgroundColor: colors,
+                borderWidth: 0,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `Requests: ${formatNumber(context.parsed.y)}`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: 0
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Render HTTP methods chart (Pie chart)
+ */
+function renderMethodsChart(data) {
+    const ctx = document.getElementById('methodsChart');
+
+    if (methodsChart) {
+        methodsChart.destroy();
+    }
+
+    const colors = data.map(item => METHOD_COLORS[item.method] || COLORS.secondary);
+
+    methodsChart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: data.map(item => item.method),
+            datasets: [{
+                data: data.map(item => item.count),
+                backgroundColor: colors,
+                borderWidth: 2,
+                borderColor: '#fff',
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.label || '';
+                            const value = formatNumber(context.parsed);
+                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                            const percentage = ((context.parsed / total) * 100).toFixed(1);
+                            return `${label}: ${value} (${percentage}%)`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Render error trend chart (Line chart)
+ */
+function renderErrorTrendChart(data) {
+    const ctx = document.getElementById('errorTrendChart');
+
+    if (errorTrendChart) {
+        errorTrendChart.destroy();
+    }
+
+    errorTrendChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: data.map(item => new Date(item.period)),
+            datasets: [
+                {
+                    label: '4xx Client Errors',
+                    data: data.map(item => item.client_errors),
+                    borderColor: COLORS.warning,
+                    backgroundColor: 'rgba(251, 191, 36, 0.1)',
+                    borderWidth: 2,
+                    tension: 0.4,
+                },
+                {
+                    label: '5xx Server Errors',
+                    data: data.map(item => item.server_errors),
+                    borderColor: COLORS.danger,
+                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                    borderWidth: 2,
+                    tension: 0.4,
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                }
+            },
+            scales: {
+                x: {
+                    type: 'time',
+                    time: {
+                        unit: 'day',
+                        displayFormats: {
+                            day: 'MMM dd'
+                        }
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: 0
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Render slowest endpoints chart (Horizontal bar chart)
+ */
+function renderSlowestEndpointsChart(data) {
+    const ctx = document.getElementById('slowestEndpointsChart');
+
+    if (slowestEndpointsChart) {
+        slowestEndpointsChart.destroy();
+    }
+
+    // Truncate long paths for display
+    const labels = data.map(item => {
+        const path = item.path;
+        return path.length > 50 ? path.substring(0, 47) + '...' : path;
+    });
+
+    slowestEndpointsChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Avg Response Time (ms)',
+                data: data.map(item => item.avg_response_time),
+                backgroundColor: COLORS.orange,
+                borderWidth: 0,
+            }]
+        },
+        options: {
+            indexAxis: 'y',
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `Avg: ${context.parsed.x.toFixed(2)} ms`;
+                        },
+                        afterLabel: function(context) {
+                            const item = data[context.dataIndex];
+                            return `Requests: ${formatNumber(item.count)}`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Response Time (ms)'
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Render hourly heatmap chart (Bar chart)
+ */
+function renderHourlyHeatmapChart(data) {
+    const ctx = document.getElementById('hourlyHeatmapChart');
+
+    if (hourlyHeatmapChart) {
+        hourlyHeatmapChart.destroy();
+    }
+
+    // Create array for all 24 hours
+    const hourlyData = Array(24).fill(0);
+    data.forEach(item => {
+        hourlyData[item.hour] = item.count;
+    });
+
+    // Generate gradient colors based on intensity
+    const maxCount = Math.max(...hourlyData);
+    const colors = hourlyData.map(count => {
+        const intensity = maxCount > 0 ? count / maxCount : 0;
+        return `rgba(59, 130, 246, ${0.3 + intensity * 0.7})`;
+    });
+
+    hourlyHeatmapChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: Array.from({length: 24}, (_, i) => `${i}:00`),
+            datasets: [{
+                label: 'Requests',
+                data: hourlyData,
+                backgroundColor: colors,
+                borderWidth: 0,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `Requests: ${formatNumber(context.parsed.y)}`;
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Hour of Day'
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: 0
+                    },
+                    title: {
+                        display: true,
+                        text: 'Request Count'
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Update top endpoints table
+ */
+function updateTopEndpointsTable(data) {
+    const tbody = document.getElementById('topEndpointsTable');
+    tbody.innerHTML = '';
+
+    if (data.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="3" class="px-4 py-3 text-center text-gray-500">No data available</td></tr>';
+        return;
+    }
+
+    data.forEach((item, index) => {
+        const row = document.createElement('tr');
+        row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+
+        const pathCell = document.createElement('td');
+        pathCell.className = 'px-4 py-3 text-sm text-gray-900';
+        pathCell.textContent = item.path.length > 40 ?
+            item.path.substring(0, 37) + '...' : item.path;
+        pathCell.title = item.path;
+
+        const countCell = document.createElement('td');
+        countCell.className = 'px-4 py-3 text-sm text-gray-900 text-right font-semibold';
+        countCell.textContent = formatNumber(item.count);
+
+        const timeCell = document.createElement('td');
+        timeCell.className = 'px-4 py-3 text-sm text-right';
+        if (item.avg_response_time) {
+            const time = item.avg_response_time;
+            timeCell.innerHTML = getColoredResponseTime(time);
+        } else {
+            timeCell.textContent = '-';
+        }
+
+        row.appendChild(pathCell);
+        row.appendChild(countCell);
+        row.appendChild(timeCell);
+        tbody.appendChild(row);
+    });
+}
+
+/**
+ * Update top IPs table
+ */
+function updateTopIPsTable(data) {
+    const tbody = document.getElementById('topIPsTable');
+    tbody.innerHTML = '';
+
+    if (data.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="2" class="px-4 py-3 text-center text-gray-500">No data available</td></tr>';
+        return;
+    }
+
+    data.forEach((item, index) => {
+        const row = document.createElement('tr');
+        row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+
+        const ipCell = document.createElement('td');
+        ipCell.className = 'px-4 py-3 text-sm text-gray-900 font-mono';
+        ipCell.textContent = item.ip_address;
+
+        const countCell = document.createElement('td');
+        countCell.className = 'px-4 py-3 text-sm text-gray-900 text-right font-semibold';
+        countCell.textContent = formatNumber(item.count);
+
+        row.appendChild(ipCell);
+        row.appendChild(countCell);
+        tbody.appendChild(row);
+    });
+}
+
+/**
+ * Helper: Format numbers with commas
+ */
+function formatNumber(num) {
+    if (num === null || num === undefined) return '0';
+    return num.toLocaleString();
+}
+
+/**
+ * Helper: Get colored response time HTML
+ */
+function getColoredResponseTime(time) {
+    let color;
+    if (time < 100) {
+        color = 'text-green-600';
+    } else if (time < 500) {
+        color = 'text-yellow-600';
+    } else if (time < 1000) {
+        color = 'text-orange-600';
+    } else {
+        color = 'text-red-600';
+    }
+
+    return `<span class="${color} font-semibold">${time.toFixed(1)} ms</span>`;
+}
+
+/**
+ * Helper: Get common chart options
+ */
+function getCommonChartOptions() {
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'bottom',
+            }
+        }
+    };
+}
+
+/**
+ * Export analytics data as CSV
+ */
+function exportAsCSV() {
+    // This would require server-side implementation
+    alert('CSV export functionality - to be implemented');
+}
+
+/**
+ * Print dashboard
+ */
+function printDashboard() {
+    window.print();
+}