django-cfg 1.4.61__py3-none-any.whl → 1.4.63__py3-none-any.whl

django_cfg/apps/ipc/static/django_cfg_ipc/js/dashboard/main.mjs

@@ -1,269 +0,0 @@
-/**
- * Main RPC Dashboard Controller
- * Orchestrates all dashboard modules and handles tab navigation
- */
-import { OverviewModule } from './overview.mjs';
-import { TestingModule } from './testing.mjs';
-
-class RPCDashboard {
-    constructor() {
-        this.api = window.ipcAPI;
-        this.currentTab = 'overview';
-        this.autoRefresh = true;
-        this.refreshInterval = null;
-        this.refreshRate = 5000; // 5 seconds
-
-        // Initialize modules
-        this.overviewModule = new OverviewModule(this.api, this);
-        this.testingModule = new TestingModule(this.api, this);
-    }
-
-    /**
-     * Initialize dashboard
-     */
-    init() {
-        console.log('🚀 RPC Dashboard initializing...');
-        this.setupEventListeners();
-        this.testingModule.init();
-        this.loadInitialData();
-        this.startAutoRefresh();
-        console.log('✅ RPC Dashboard initialized');
-    }
-
-    /**
-     * Setup event listeners
-     */
-    setupEventListeners() {
-        // Tab buttons
-        const tabButtons = document.querySelectorAll('.tab-button');
-        tabButtons.forEach(button => {
-            button.addEventListener('click', (e) => {
-                // Use currentTarget to get the button element, not the clicked child element
-                const tabName = e.currentTarget.dataset.tab;
-                this.switchTab(tabName);
-            });
-        });
-
-        // Auto-refresh toggle
-        const autoRefreshToggle = document.getElementById('auto-refresh-toggle');
-        if (autoRefreshToggle) {
-            autoRefreshToggle.checked = this.autoRefresh;
-            autoRefreshToggle.addEventListener('change', (e) => {
-                this.autoRefresh = e.target.checked;
-                if (this.autoRefresh) {
-                    this.startAutoRefresh();
-                } else {
-                    this.stopAutoRefresh();
-                }
-            });
-        }
-    }
-
-    /**
-     * Switch tabs
-     */
-    switchTab(tabName) {
-        console.log('Switching to tab:', tabName);
-
-        // Update tab buttons styling
-        document.querySelectorAll('.tab-button').forEach(btn => {
-            if (btn.dataset.tab === tabName) {
-                btn.classList.add('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400');
-                btn.classList.remove('text-gray-600', 'dark:text-gray-400', 'border-transparent');
-            } else {
-                btn.classList.remove('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400');
-                btn.classList.add('text-gray-600', 'dark:text-gray-400', 'border-transparent');
-            }
-        });
-
-        // Update tab panels
-        document.querySelectorAll('.tab-panel').forEach(panel => {
-            panel.classList.add('hidden');
-        });
-
-        const activePanel = document.getElementById(`${tabName}-tab`);
-        if (activePanel) {
-            activePanel.classList.remove('hidden');
-        }
-
-        this.currentTab = tabName;
-        this.loadTabData(tabName);
-    }
-
-    /**
-     * Load initial data
-     */
-    async loadInitialData() {
-        console.log('Loading initial data...');
-        await this.loadHealthStatus();
-        await this.loadTabData(this.currentTab);
-    }
-
-    /**
-     * Load data for specific tab
-     */
-    async loadTabData(tabName) {
-        console.log('Loading data for tab:', tabName);
-
-        try {
-            // Load overview stats for stat cards (always visible)
-            await this.overviewModule.loadOverviewStats();
-
-            // Load tab-specific data
-            if (tabName === 'testing') {
-                // Testing tab doesn't need data loading, it's interactive
-            } else {
-                // Overview, requests, notifications, methods tabs
-                await this.overviewModule.loadData(tabName);
-            }
-
-            this.updateLastUpdate();
-
-        } catch (error) {
-            console.error('Error loading tab data:', error);
-        }
-    }
-
-    /**
-     * Load health status
-     */
-    async loadHealthStatus() {
-        try {
-            const health = await this.api.ipcAdminApiMonitorHealthRetrieve();
-
-            if (health) {
-                // Update health indicator
-                const indicator = document.getElementById('health-indicator');
-                if (indicator) {
-                    const isHealthy = health.redis_connected && health.stream_exists;
-                    indicator.innerHTML = `
-                        <span class="pulse-dot w-2 h-2 ${isHealthy ? 'bg-green-500' : 'bg-red-500'} rounded-full"></span>
-                        <span class="text-gray-700 dark:text-gray-300">${isHealthy ? 'Connected' : 'Disconnected'}</span>
-                    `;
-                }
-
-                // Update system status section
-                this.updateSystemStatus(health);
-            }
-        } catch (error) {
-            console.error('Error loading health status:', error);
-        }
-    }
-
-    /**
-     * Update system status section
-     */
-    updateSystemStatus(health) {
-        const statusContainer = document.getElementById('system-status');
-        if (!statusContainer) return;
-
-        statusContainer.innerHTML = `
-            <!-- Redis Status -->
-            <div class="flex items-start gap-3">
-                <span class="material-icons flex-shrink-0 text-2xl ${health.redis_connected ? 'text-green-500' : 'text-red-500'}">
-                    ${health.redis_connected ? 'check_circle' : 'cancel'}
-                </span>
-                <div class="min-w-0">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">Redis</p>
-                    <p class="text-xs text-gray-600 dark:text-gray-400">
-                        ${health.redis_connected ? 'Connected (DB 2)' : 'Disconnected'}
-                    </p>
-                </div>
-            </div>
-
-            <!-- Stream Status -->
-            <div class="flex items-start gap-3">
-                <span class="material-icons flex-shrink-0 text-2xl ${health.stream_exists ? 'text-green-500' : 'text-gray-500'}">
-                    ${health.stream_exists ? 'stream' : 'stream_off'}
-                </span>
-                <div class="min-w-0">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">Request Stream</p>
-                    <p class="text-xs text-gray-600 dark:text-gray-400">
-                        ${health.stream_exists ? `${health.stream_length} entries` : 'Not initialized'}
-                    </p>
-                </div>
-            </div>
-
-            <!-- Activity Status -->
-            <div class="flex items-start gap-3">
-                <span class="material-icons flex-shrink-0 text-2xl ${health.recent_activity ? 'text-green-500' : 'text-yellow-500'}">
-                    ${health.recent_activity ? 'notifications_active' : 'notifications_paused'}
-                </span>
-                <div class="min-w-0">
-                    <p class="text-sm font-medium text-gray-900 dark:text-white">Recent Activity</p>
-                    <p class="text-xs text-gray-600 dark:text-gray-400">
-                        ${health.recent_activity ? 'Active (last 5 min)' : 'No recent activity'}
-                    </p>
-                </div>
-            </div>
-        `;
-    }
-
-    /**
-     * Update last update timestamp
-     */
-    updateLastUpdate() {
-        const element = document.getElementById('last-update');
-        if (element) {
-            const now = new Date();
-            element.textContent = `Last updated: ${now.toLocaleTimeString()}`;
-        }
-    }
-
-    /**
-     * Start auto-refresh
-     */
-    startAutoRefresh() {
-        if (this.refreshInterval) {
-            clearInterval(this.refreshInterval);
-        }
-
-        this.refreshInterval = setInterval(() => {
-            if (this.autoRefresh) {
-                this.loadHealthStatus();
-                this.loadTabData(this.currentTab);
-            }
-        }, this.refreshRate);
-    }
-
-    /**
-     * Stop auto-refresh
-     */
-    stopAutoRefresh() {
-        if (this.refreshInterval) {
-            clearInterval(this.refreshInterval);
-            this.refreshInterval = null;
-        }
-    }
-}
-
-/**
- * Wait for both DOM and API to be ready
- */
-async function initializeDashboard() {
-    console.log('DOM loaded, waiting for IpcAPI...');
-
-    // Wait for API to be available (max 5 seconds)
-    let attempts = 0;
-    const maxAttempts = 100; // 100 * 50ms = 5 seconds
-
-    while (!window.ipcAPI && attempts < maxAttempts) {
-        await new Promise(resolve => setTimeout(resolve, 50));
-        attempts++;
-    }
-
-    if (!window.ipcAPI) {
-        console.error('❌ IpcAPI failed to load after 5 seconds');
-        return;
-    }
-
-    console.log('✅ IpcAPI ready, initializing dashboard...');
-    window.rpcDashboard = new RPCDashboard();
-    window.rpcDashboard.init();
-}
-
-// Initialize dashboard when DOM is ready
-document.addEventListener('DOMContentLoaded', initializeDashboard);
-
-// Export for debugging
-export default RPCDashboard;

django_cfg/apps/ipc/static/django_cfg_ipc/js/dashboard/overview.mjs

@@ -1,259 +0,0 @@
-/**
- * RPC Overview Dashboard Module
- * Handles overview, requests, notifications, and methods tabs
- */
-export class OverviewModule {
-    constructor(api, dashboard) {
-        this.api = api;
-        this.dashboard = dashboard;
-    }
-
-    /**
-     * Load data based on current tab
-     */
-    async loadData(tabName) {
-        switch (tabName) {
-            case 'overview':
-                await this.loadOverviewStats();
-                break;
-            case 'requests':
-                await this.loadRecentRequests();
-                break;
-            case 'notifications':
-                await this.loadNotificationStats();
-                break;
-            case 'methods':
-                await this.loadMethodStats();
-                break;
-        }
-    }
-
-    /**
-     * Load overview statistics
-     */
-    async loadOverviewStats() {
-        try {
-            const stats = await this.api.ipcAdminApiMonitorOverviewRetrieve();
-
-            if (stats) {
-                // Update stats cards
-                this.updateElement('total-requests', stats.total_requests_today || 0);
-                this.updateElement('active-methods-count', stats.active_methods?.length || 0);
-                this.updateElement('avg-response-time', (stats.avg_response_time_ms || 0).toFixed(0));
-                this.updateElement('success-rate', (stats.success_rate || 0).toFixed(1));
-
-                // Update top method (XSS-safe)
-                if (stats.top_method) {
-                    const topMethodElement = document.getElementById('top-method');
-                    if (topMethodElement) {
-                        const code = document.createElement('code');
-                        code.className = 'bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-blue-600 dark:text-blue-300';
-                        code.textContent = stats.top_method;
-                        topMethodElement.innerHTML = '';
-                        topMethodElement.appendChild(code);
-                    }
-                }
-            }
-        } catch (error) {
-            console.error('Error loading overview stats:', error);
-        }
-    }
-
-    /**
-     * Load recent RPC requests
-     */
-    async loadRecentRequests() {
-        try {
-            const data = await this.api.ipcAdminApiMonitorRequestsRetrieve({ count: 50 });
-
-            if (data) {
-                const requests = data.requests || [];
-                this.renderRequestsTable(requests);
-            }
-        } catch (error) {
-            console.error('Error loading recent requests:', error);
-        }
-    }
-
-    /**
-     * Render requests table
-     */
-    renderRequestsTable(requests) {
-        const tbody = document.getElementById('requests-table-body');
-        if (!tbody) return;
-
-        if (requests.length === 0) {
-            tbody.innerHTML = `
-                <tr>
-                    <td colspan="4" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-                        No recent requests found
-                    </td>
-                </tr>
-            `;
-            return;
-        }
-
-        tbody.innerHTML = requests.map(req => `
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                <td class="px-4 py-3 text-sm">
-                    ${this.formatTimestamp(req.timestamp)}
-                </td>
-                <td class="px-4 py-3">
-                    <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">${this.escapeHtml(req.method || 'unknown')}</code>
-                </td>
-                <td class="px-4 py-3 text-sm font-mono">
-                    ${this.escapeHtml((req.correlation_id || '').substring(0, 8))}...
-                </td>
-                <td class="px-4 py-3 text-sm">
-                    <details class="cursor-pointer">
-                        <summary class="text-blue-600 dark:text-blue-400 hover:underline">View</summary>
-                        <pre class="mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded overflow-auto max-h-40">${this.escapeHtml(JSON.stringify(req.params || {}, null, 2))}</pre>
-                    </details>
-                </td>
-            </tr>
-        `).join('');
-    }
-
-    /**
-     * Load notification statistics
-     */
-    async loadNotificationStats() {
-        try {
-            const stats = await this.api.ipcAdminApiMonitorNotificationsRetrieve();
-
-            if (stats) {
-                this.renderNotificationStats(stats);
-            }
-        } catch (error) {
-            console.error('Error loading notification stats:', error);
-        }
-    }
-
-    /**
-     * Render notification statistics
-     */
-    renderNotificationStats(stats) {
-        const container = document.getElementById('notification-stats-content');
-        if (!container) return;
-
-        const byType = stats.by_type || {};
-        const total = stats.total_sent || 0;
-
-        container.innerHTML = `
-            <div class="space-y-4">
-                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded">
-                    <span>Total Sent</span>
-                    <span class="text-2xl font-bold">${total}</span>
-                </div>
-                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded">
-                    <span>Delivery Rate</span>
-                    <span class="text-2xl font-bold text-green-600 dark:text-green-400">${stats.delivery_rate || 0}%</span>
-                </div>
-                <div>
-                    <h4 class="text-md font-semibold mb-3">By Type</h4>
-                    <div class="space-y-2">
-                        ${Object.entries(byType).map(([type, count]) => `
-                            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded">
-                                <span>${this.escapeHtml(type)}</span>
-                                <span class="font-medium">${count}</span>
-                            </div>
-                        `).join('') || '<p class="text-gray-500 dark:text-gray-400">No data available</p>'}
-                    </div>
-                </div>
-                ${stats.recent && stats.recent.length > 0 ? `
-                    <div>
-                        <h4 class="text-md font-semibold mb-3">Recent Notifications</h4>
-                        <div class="space-y-2">
-                            ${stats.recent.slice(0, 5).map(notif => `
-                                <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded">
-                                    <div class="flex justify-between items-start">
-                                        <span class="text-sm">${this.escapeHtml(notif.type || 'unknown')}</span>
-                                        <span class="text-xs text-gray-500 dark:text-gray-400">${this.formatTimestamp(notif.timestamp)}</span>
-                                    </div>
-                                    ${notif.message ? `<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">${this.escapeHtml(notif.message)}</p>` : ''}
-                                </div>
-                            `).join('')}
-                        </div>
-                    </div>
-                ` : ''}
-            </div>
-        `;
-    }
-
-    /**
-     * Load method statistics
-     */
-    async loadMethodStats() {
-        try {
-            const data = await this.api.ipcAdminApiMonitorMethodsRetrieve();
-
-            if (data) {
-                const methods = data.methods || [];
-                this.renderMethodsTable(methods);
-            }
-        } catch (error) {
-            console.error('Error loading method stats:', error);
-        }
-    }
-
-    /**
-     * Render methods table
-     */
-    renderMethodsTable(methods) {
-        const tbody = document.getElementById('methods-table-body');
-        if (!tbody) return;
-
-        if (methods.length === 0) {
-            tbody.innerHTML = `
-                <tr>
-                    <td colspan="4" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-                        No method data available
-                    </td>
-                </tr>
-            `;
-            return;
-        }
-
-        tbody.innerHTML = methods.map(method => `
-            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                <td class="px-4 py-3">
-                    <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">${this.escapeHtml(method.method)}</code>
-                </td>
-                <td class="px-4 py-3 text-sm font-medium">${method.count}</td>
-                <td class="px-4 py-3 text-sm">${method.percentage}%</td>
-                <td class="px-4 py-3 text-sm">${method.avg_time_ms || method.avg_time || 0}ms</td>
-            </tr>
-        `).join('');
-    }
-
-    /**
-     * Helper: Update element text content
-     */
-    updateElement(id, value) {
-        const element = document.getElementById(id);
-        if (element) {
-            element.textContent = value;
-        }
-    }
-
-    /**
-     * Helper: Format ISO timestamp to local time
-     */
-    formatTimestamp(isoString) {
-        try {
-            const date = new Date(isoString);
-            return date.toLocaleTimeString();
-        } catch {
-            return 'N/A';
-        }
-    }
-
-    /**
-     * Helper: Escape HTML to prevent XSS
-     */
-    escapeHtml(unsafe) {
-        const div = document.createElement('div');
-        div.textContent = unsafe;
-        return div.innerHTML;
-    }
-}