django-cfg 1.3.11__py3-none-any.whl → 1.4.0__py3-none-any.whl

django_cfg/modules/django_cfg_rpc_client/dashboard/static/django_cfg_rpc_dashboard/js/dashboard.js

@@ -0,0 +1,373 @@
+/**
+ * RPC Dashboard JavaScript
+ *
+ * Handles:
+ * - Tab switching
+ * - Auto-refresh
+ * - Live data updates
+ * - API communication
+ */
+
+class RPCDashboard {
+    constructor() {
+        this.autoRefresh = true;
+        this.refreshInterval = 5000; // 5 seconds
+        this.intervalId = null;
+        this.currentTab = 'overview';
+
+        // Get API base URL from data attribute (supports custom mounting)
+        this.apiBase = document.body.dataset.apiBase || '/admin/rpc/api';
+        // Clean up trailing slash if present
+        this.apiBase = this.apiBase.replace(/\/$/, '');
+
+        this.init();
+    }
+
+    init() {
+        console.log('🚀 RPC Dashboard initializing...');
+
+        // Setup tab switching
+        this.setupTabs();
+
+        // Setup auto-refresh toggle
+        this.setupAutoRefresh();
+
+        // Initial data load
+        this.loadAllData();
+
+        // Start auto-refresh
+        this.startAutoRefresh();
+
+        console.log('✅ RPC Dashboard initialized');
+    }
+
+    setupTabs() {
+        const tabButtons = document.querySelectorAll('.tab-button');
+
+        tabButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                const tabName = e.target.dataset.tab;
+                this.switchTab(tabName);
+            });
+        });
+    }
+
+    switchTab(tabName) {
+        // Update buttons
+        document.querySelectorAll('.tab-button').forEach(btn => {
+            if (btn.dataset.tab === tabName) {
+                btn.classList.add('active', 'text-blue-400', 'border-blue-400');
+                btn.classList.remove('text-gray-400', 'border-transparent');
+            } else {
+                btn.classList.remove('active', 'text-blue-400', 'border-blue-400');
+                btn.classList.add('text-gray-400', 'border-transparent');
+            }
+        });
+
+        // Update 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;
+
+        // Load tab-specific data
+        this.loadTabData(tabName);
+    }
+
+    setupAutoRefresh() {
+        const toggle = document.getElementById('auto-refresh-toggle');
+
+        if (toggle) {
+            toggle.checked = this.autoRefresh;
+
+            toggle.addEventListener('change', (e) => {
+                this.autoRefresh = e.target.checked;
+
+                if (this.autoRefresh) {
+                    this.startAutoRefresh();
+                } else {
+                    this.stopAutoRefresh();
+                }
+            });
+        }
+    }
+
+    startAutoRefresh() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+
+        this.intervalId = setInterval(() => {
+            if (this.autoRefresh) {
+                this.loadAllData();
+            }
+        }, this.refreshInterval);
+    }
+
+    stopAutoRefresh() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+
+    async loadAllData() {
+        try {
+            await this.loadOverviewStats();
+            await this.loadHealthStatus();
+            await this.loadTabData(this.currentTab);
+            this.updateLastUpdate();
+        } catch (error) {
+            console.error('Error loading data:', error);
+            this.showError('Failed to load data');
+        }
+    }
+
+    async loadTabData(tabName) {
+        switch (tabName) {
+            case 'overview':
+                // Already loaded in loadOverviewStats
+                break;
+            case 'requests':
+                await this.loadRecentRequests();
+                break;
+            case 'notifications':
+                await this.loadNotificationStats();
+                break;
+            case 'methods':
+                await this.loadMethodStats();
+                break;
+        }
+    }
+
+    async loadOverviewStats() {
+        try {
+            const response = await fetch(`${this.apiBase}/overview/`);
+            const data = await response.json();
+
+            if (data.success) {
+                const stats = data.data;
+
+                // 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-700 px-2 py-1 rounded text-blue-300';
+                        code.textContent = stats.top_method;  // Safe from XSS
+                        topMethodElement.innerHTML = '';
+                        topMethodElement.appendChild(code);
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('Error loading overview stats:', error);
+        }
+    }
+
+    async loadHealthStatus() {
+        try {
+            const response = await fetch(`${this.apiBase}/health/`);
+            const data = await response.json();
+
+            if (data.success) {
+                const health = data.data;
+
+                // 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-sm text-gray-300">${isHealthy ? 'Connected' : 'Disconnected'}</span>
+                    `;
+                }
+            }
+        } catch (error) {
+            console.error('Error loading health status:', error);
+        }
+    }
+
+    async loadRecentRequests() {
+        try {
+            const response = await fetch(`${this.apiBase}/requests/?count=50`);
+            const data = await response.json();
+
+            if (data.success) {
+                const requests = data.data.requests || [];
+                this.renderRequestsTable(requests);
+            }
+        } catch (error) {
+            console.error('Error loading recent requests:', error);
+        }
+    }
+
+    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-400">
+                        No recent requests found
+                    </td>
+                </tr>
+            `;
+            return;
+        }
+
+        tbody.innerHTML = requests.map(req => `
+            <tr class="hover:bg-gray-700">
+                <td class="px-4 py-3 text-sm text-gray-300">
+                    ${this.formatTimestamp(req.timestamp)}
+                </td>
+                <td class="px-4 py-3">
+                    <code class="text-sm bg-gray-700 px-2 py-1 rounded text-blue-300">${req.method || 'unknown'}</code>
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-400 font-mono">
+                    ${(req.correlation_id || '').substring(0, 8)}...
+                </td>
+                <td class="px-4 py-3 text-sm text-gray-400">
+                    <details class="cursor-pointer">
+                        <summary class="text-blue-400 hover:text-blue-300">View</summary>
+                        <pre class="mt-2 text-xs bg-gray-900 p-2 rounded overflow-auto max-h-40">${JSON.stringify(req.params || {}, null, 2)}</pre>
+                    </details>
+                </td>
+            </tr>
+        `).join('');
+    }
+
+    async loadNotificationStats() {
+        try {
+            const response = await fetch(`${this.apiBase}/notifications/`);
+            const data = await response.json();
+
+            if (data.success) {
+                const stats = data.data;
+                this.renderNotificationStats(stats);
+            }
+        } catch (error) {
+            console.error('Error loading notification stats:', error);
+        }
+    }
+
+    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-700 rounded">
+                    <span class="text-gray-300">Total Sent</span>
+                    <span class="text-2xl font-bold text-white">${total}</span>
+                </div>
+                <div class="flex items-center justify-between p-4 bg-gray-700 rounded">
+                    <span class="text-gray-300">Delivery Rate</span>
+                    <span class="text-2xl font-bold text-green-400">${stats.delivery_rate || 0}%</span>
+                </div>
+                <div>
+                    <h4 class="text-md font-semibold text-white 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-700 rounded">
+                                <span class="text-gray-300">${type}</span>
+                                <span class="text-white font-medium">${count}</span>
+                            </div>
+                        `).join('') || '<p class="text-gray-400">No data available</p>'}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    async loadMethodStats() {
+        try {
+            const response = await fetch(`${this.apiBase}/methods/`);
+            const data = await response.json();
+
+            if (data.success) {
+                const methods = data.data.methods || [];
+                this.renderMethodsTable(methods);
+            }
+        } catch (error) {
+            console.error('Error loading method stats:', error);
+        }
+    }
+
+    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-400">
+                        No method data available
+                    </td>
+                </tr>
+            `;
+            return;
+        }
+
+        tbody.innerHTML = methods.map(method => `
+            <tr class="hover:bg-gray-700">
+                <td class="px-4 py-3">
+                    <code class="text-sm bg-gray-700 px-2 py-1 rounded text-blue-300">${method.method}</code>
+                </td>
+                <td class="px-4 py-3 text-sm text-white font-medium">${method.count}</td>
+                <td class="px-4 py-3 text-sm text-gray-300">${method.percentage}%</td>
+                <td class="px-4 py-3 text-sm text-gray-300">${method.avg_time_ms}ms</td>
+            </tr>
+        `).join('');
+    }
+
+    updateElement(id, value) {
+        const element = document.getElementById(id);
+        if (element) {
+            element.textContent = value;
+        }
+    }
+
+    formatTimestamp(isoString) {
+        try {
+            const date = new Date(isoString);
+            return date.toLocaleTimeString();
+        } catch {
+            return 'N/A';
+        }
+    }
+
+    updateLastUpdate() {
+        const element = document.getElementById('last-update');
+        if (element) {
+            const now = new Date();
+            element.textContent = `Last updated: ${now.toLocaleTimeString()}`;
+        }
+    }
+
+    showError(message) {
+        console.error('Dashboard error:', message);
+        // TODO: Show error notification to user
+    }
+}
+
+// Initialize dashboard when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.rpcDashboard = new RPCDashboard();
+});

django_cfg/modules/django_cfg_rpc_client/dashboard/templates/django_cfg_rpc_dashboard/base.html

@@ -0,0 +1,76 @@
+{% extends 'django_tailwind/app.html' %}
+{% load static %}
+
+{% block title %}{% block page_title_text %}RPC Monitor{% endblock %} - Django-CFG{% endblock %}
+
+{# Navbar configuration #}
+{% block header %}
+{% with navbar_items=rpc_nav_items %}
+{% include 'django_tailwind/components/navbar.html' with title="RPC Monitor" icon='<span class="material-icons text-3xl text-blue-400">insights</span>' nav_items=navbar_items full_width=True %}
+{% endwith %}
+
+{# RPC-specific header info #}
+<div class="bg-gray-800 dark:bg-gray-900 border-b border-gray-700 dark:border-gray-800">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
+        <div class="flex items-center justify-between text-sm">
+            <p class="text-gray-400 dark:text-gray-500">Real-time WebSocket & RPC Activity</p>
+
+            <div class="flex items-center space-x-4">
+                <!-- Health indicator -->
+                <div id="health-indicator" class="flex items-center space-x-2">
+                    <span class="pulse-dot w-2 h-2 bg-green-500 rounded-full"></span>
+                    <span class="text-gray-300 dark:text-gray-400">Connected</span>
+                </div>
+
+                <!-- Auto-refresh toggle -->
+                <label class="flex items-center space-x-2 cursor-pointer">
+                    <span class="text-gray-300 dark:text-gray-400">Auto-refresh</span>
+                    <input type="checkbox" id="auto-refresh-toggle" checked
+                           class="toggle-checkbox rounded border-gray-600 text-blue-600 focus:ring-blue-500">
+                </label>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_head %}
+{{ block.super }}
+<!-- Material Icons -->
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+<style>
+    .stat-card {
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .stat-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    }
+
+    .pulse-dot {
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+</style>
+
+{% block extra_css %}{% endblock %}
+{% endblock %}
+
+{% block body %}
+{{ block.super }}
+<script>
+    // Set API base URL for dashboard.js
+    // Must run before dashboard.js initializes
+    document.body.setAttribute('data-api-base', "{% url 'django_cfg_rpc_dashboard:api_overview' %}/..");
+</script>
+{% endblock %}

django_cfg/modules/django_cfg_rpc_client/dashboard/templates/django_cfg_rpc_dashboard/dashboard.html

@@ -0,0 +1,200 @@
+{% extends 'django_cfg_rpc_dashboard/base.html' %}
+{% load static %}
+
+{% block title %}Dashboard{% endblock %}
+
+{% block content %}
+<!-- Overview Stats Cards -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+    <!-- Total Requests -->
+    <div class="stat-card bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-blue-400">bar_chart</span>
+            <span class="text-xs text-gray-400">Today</span>
+        </div>
+        <h3 class="text-2xl font-bold text-white mb-1" id="total-requests">
+            {{ overview_stats.total_requests_today|default:"0" }}
+        </h3>
+        <p class="text-sm text-gray-400">Total Requests</p>
+    </div>
+
+    <!-- Active Methods -->
+    <div class="stat-card bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-green-400">functions</span>
+            <span class="text-xs text-gray-400">Active</span>
+        </div>
+        <h3 class="text-2xl font-bold text-white mb-1" id="active-methods-count">
+            {{ overview_stats.active_methods|length|default:"0" }}
+        </h3>
+        <p class="text-sm text-gray-400">Active Methods</p>
+    </div>
+
+    <!-- Avg Response Time -->
+    <div class="stat-card bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-yellow-400">timer</span>
+            <span class="text-xs text-gray-400">Average</span>
+        </div>
+        <h3 class="text-2xl font-bold text-white mb-1" id="avg-response-time">
+            {{ overview_stats.avg_response_time_ms|default:"0" }}<span class="text-lg text-gray-400">ms</span>
+        </h3>
+        <p class="text-sm text-gray-400">Response Time</p>
+    </div>
+
+    <!-- Success Rate -->
+    <div class="stat-card bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-purple-400">check_circle</span>
+            <span class="text-xs text-gray-400">Rate</span>
+        </div>
+        <h3 class="text-2xl font-bold text-white mb-1" id="success-rate">
+            {{ overview_stats.success_rate|default:"0" }}<span class="text-lg text-gray-400">%</span>
+        </h3>
+        <p class="text-sm text-gray-400">Success Rate</p>
+    </div>
+</div>
+
+<!-- System Status -->
+<div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
+    <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+        <span class="material-icons mr-2">health_and_safety</span>
+        System Status
+    </h2>
+    <div id="system-status" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <!-- Redis Status -->
+        <div class="flex items-center space-x-3">
+            <span class="material-icons {% if health.redis_connected %}text-green-500{% else %}text-red-500{% endif %}">
+                {% if health.redis_connected %}check_circle{% else %}cancel{% endif %}
+            </span>
+            <div>
+                <p class="text-sm font-medium text-white">Redis</p>
+                <p class="text-xs text-gray-400">
+                    {% if health.redis_connected %}Connected (DB 2){% else %}Disconnected{% endif %}
+                </p>
+            </div>
+        </div>
+
+        <!-- Stream Status -->
+        <div class="flex items-center space-x-3">
+            <span class="material-icons {% if health.stream_exists %}text-green-500{% else %}text-gray-500{% endif %}">
+                {% if health.stream_exists %}stream{% else %}stream_off{% endif %}
+            </span>
+            <div>
+                <p class="text-sm font-medium text-white">Request Stream</p>
+                <p class="text-xs text-gray-400">
+                    {% if health.stream_exists %}{{ health.stream_length }} entries{% else %}Not initialized{% endif %}
+                </p>
+            </div>
+        </div>
+
+        <!-- Activity Status -->
+        <div class="flex items-center space-x-3">
+            <span class="material-icons {% if health.recent_activity %}text-green-500{% else %}text-yellow-500{% endif %}">
+                {% if health.recent_activity %}notifications_active{% else %}notifications_paused{% endif %}
+            </span>
+            <div>
+                <p class="text-sm font-medium text-white">Recent Activity</p>
+                <p class="text-xs text-gray-400">
+                    {% if health.recent_activity %}Active (last 5 min){% else %}No recent activity{% endif %}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Tabs Navigation -->
+<div class="border-b border-gray-700 mb-6">
+    <nav class="flex space-x-4">
+        <button class="tab-button active px-4 py-2 text-blue-400 border-b-2 border-blue-400 font-medium" data-tab="overview">
+            Overview
+        </button>
+        <button class="tab-button px-4 py-2 text-gray-400 hover:text-gray-300 border-b-2 border-transparent font-medium" data-tab="requests">
+            Recent Requests
+        </button>
+        <button class="tab-button px-4 py-2 text-gray-400 hover:text-gray-300 border-b-2 border-transparent font-medium" data-tab="notifications">
+            Notifications
+        </button>
+        <button class="tab-button px-4 py-2 text-gray-400 hover:text-gray-300 border-b-2 border-transparent font-medium" data-tab="methods">
+            Methods
+        </button>
+    </nav>
+</div>
+
+<!-- Tab Content -->
+<div class="tab-content">
+    <!-- Overview Tab (Active by default) -->
+    <div id="overview-tab" class="tab-panel">
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+            <h3 class="text-lg font-bold text-white mb-4">Top Method</h3>
+            <p class="text-gray-300" id="top-method">
+                {% if overview_stats.top_method %}
+                    <code class="bg-gray-700 px-2 py-1 rounded text-blue-300">{{ overview_stats.top_method }}</code>
+                {% else %}
+                    No data available
+                {% endif %}
+            </p>
+        </div>
+    </div>
+
+    <!-- Recent Requests Tab -->
+    <div id="requests-tab" class="tab-panel hidden">
+        <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
+            <table class="w-full">
+                <thead class="bg-gray-900">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Time</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Method</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Correlation ID</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Params</th>
+                    </tr>
+                </thead>
+                <tbody id="requests-table-body" class="divide-y divide-gray-700">
+                    <tr>
+                        <td colspan="4" class="px-4 py-8 text-center text-gray-400">
+                            Loading...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Notifications Tab -->
+    <div id="notifications-tab" class="tab-panel hidden">
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+            <h3 class="text-lg font-bold text-white mb-4">Notification Statistics</h3>
+            <div id="notification-stats-content">
+                <p class="text-gray-400">Loading...</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Methods Tab -->
+    <div id="methods-tab" class="tab-panel hidden">
+        <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
+            <table class="w-full">
+                <thead class="bg-gray-900">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Method</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Count</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Percentage</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Avg Time</th>
+                    </tr>
+                </thead>
+                <tbody id="methods-table-body" class="divide-y divide-gray-700">
+                    <tr>
+                        <td colspan="4" class="px-4 py-8 text-center text-gray-400">
+                            Loading...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{% static 'django_cfg_rpc_dashboard/js/dashboard.js' %}"></script>
+{% endblock %}

django_cfg/modules/django_cfg_rpc_client/dashboard/urls.py

@@ -0,0 +1,22 @@
+"""
+URL patterns for RPC Dashboard.
+
+Mount at: /admin/rpc/ or custom path
+"""
+
+from django.urls import path
+from . import views
+
+app_name = 'django_cfg_rpc_dashboard'
+
+urlpatterns = [
+    # Main dashboard page
+    path('', views.dashboard_view, name='dashboard'),
+
+    # API endpoints
+    path('api/overview/', views.api_overview_stats, name='api_overview'),
+    path('api/requests/', views.api_recent_requests, name='api_requests'),
+    path('api/notifications/', views.api_notification_stats, name='api_notifications'),
+    path('api/methods/', views.api_method_stats, name='api_methods'),
+    path('api/health/', views.api_health_check, name='api_health'),
+]

django_cfg/modules/django_cfg_rpc_client/dashboard/urls_admin.py

@@ -0,0 +1,9 @@
+"""
+URLs for Django CFG RPC Dashboard admin integration.
+
+Automatically included when django_cfg_rpc is enabled.
+"""
+
+from .urls import urlpatterns, app_name
+
+__all__ = ['urlpatterns', 'app_name']