django-cfg 1.4.87__py3-none-any.whl → 1.4.89__py3-none-any.whl

django_cfg/apps/centrifugo/static/django_cfg_centrifugo/css/dashboard.css

@@ -1,260 +0,0 @@
-/**
- * Centrifugo Dashboard Styles
- * Purple/Magenta theme for Centrifugo monitoring
- */
-
-/* Stat Cards */
-.stat-card {
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.15);
-}
-
-/* Pulse Animation */
-.pulse-dot {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-}
-
-/* Tab Navigation */
-.tab-button {
-    transition: all 0.2s ease;
-}
-
-.tab-button:hover {
-    border-bottom-color: rgb(168 85 247 / 0.5);
-}
-
-.tab-button.active {
-    color: rgb(168 85 247);
-    border-bottom-color: rgb(168 85 247);
-}
-
-/* Dark mode adjustments */
-@media (prefers-color-scheme: dark) {
-    .stat-card:hover {
-        box-shadow: 0 10px 25px rgba(168, 85, 247, 0.25);
-    }
-    
-    .tab-button.active {
-        color: rgb(192 132 252);
-        border-bottom-color: rgb(192 132 252);
-    }
-}
-
-/* Tab Panels */
-.tab-panel {
-    animation: fadeIn 0.3s ease-in;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Charts */
-canvas {
-    max-height: 300px;
-}
-
-/* Status Indicators */
-.status-badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-
-.status-badge.success {
-    background-color: rgb(220 252 231);
-    color: rgb(22 101 52);
-}
-
-.status-badge.failed {
-    background-color: rgb(254 226 226);
-    color: rgb(153 27 27);
-}
-
-.status-badge.timeout {
-    background-color: rgb(254 243 199);
-    color: rgb(146 64 14);
-}
-
-/* Dark mode status badges */
-@media (prefers-color-scheme: dark) {
-    .status-badge.success {
-        background-color: rgb(22 101 52 / 0.2);
-        color: rgb(134 239 172);
-    }
-    
-    .status-badge.failed {
-        background-color: rgb(153 27 27 / 0.2);
-        color: rgb(252 165 165);
-    }
-    
-    .status-badge.timeout {
-        background-color: rgb(146 64 14 / 0.2);
-        color: rgb(253 224 71);
-    }
-}
-
-/* Table Styles */
-table tbody tr {
-    transition: background-color 0.15s ease;
-}
-
-table tbody tr:hover {
-    background-color: rgb(250 245 255);
-}
-
-@media (prefers-color-scheme: dark) {
-    table tbody tr:hover {
-        background-color: rgb(88 28 135 / 0.1);
-    }
-}
-
-/* Quick Test Buttons */
-.quick-test-btn {
-    transition: all 0.2s ease;
-    cursor: pointer;
-}
-
-.quick-test-btn:active {
-    transform: scale(0.98);
-}
-
-/* Loading Spinner */
-.spinner {
-    border: 2px solid rgba(168, 85, 247, 0.2);
-    border-top-color: rgb(168, 85, 247);
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Progress Bar */
-.progress-bar {
-    transition: width 0.3s ease;
-}
-
-/* Notification Styles */
-.notification {
-    animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-/* Success Rate Color Coding */
-.success-rate-high {
-    color: rgb(22 163 74);
-}
-
-.success-rate-medium {
-    color: rgb(234 179 8);
-}
-
-.success-rate-low {
-    color: rgb(220 38 38);
-}
-
-@media (prefers-color-scheme: dark) {
-    .success-rate-high {
-        color: rgb(134 239 172);
-    }
-    
-    .success-rate-medium {
-        color: rgb(253 224 71);
-    }
-    
-    .success-rate-low {
-        color: rgb(252 165 165);
-    }
-}
-
-/* ACK Badge */
-.ack-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.125rem 0.5rem;
-    border-radius: 0.375rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    background-color: rgb(243 232 255);
-    color: rgb(107 33 168);
-}
-
-@media (prefers-color-scheme: dark) {
-    .ack-badge {
-        background-color: rgb(107 33 168 / 0.2);
-        color: rgb(216 180 254);
-    }
-}
-
-/* Message ID Badge */
-.message-id-badge {
-    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-    font-size: 0.75rem;
-    color: rgb(88 28 135);
-    background-color: rgb(250 245 255);
-    padding: 0.125rem 0.5rem;
-    border-radius: 0.25rem;
-}
-
-@media (prefers-color-scheme: dark) {
-    .message-id-badge {
-        color: rgb(216 180 254);
-        background-color: rgb(88 28 135 / 0.2);
-    }
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .stat-card {
-        padding: 1rem;
-    }
-    
-    .tab-button {
-        font-size: 0.875rem;
-        padding: 0.5rem 0.75rem;
-    }
-    
-    .tab-button .material-icons {
-        display: none;
-    }
-}

django_cfg/apps/centrifugo/static/django_cfg_centrifugo/js/dashboard/live_channels.mjs

@@ -1,313 +0,0 @@
-/**
- * Live Channels Module
- * Handles real-time channel monitoring from Centrifugo server
- */
-export class LiveChannelsModule {
-    constructor(api, dashboard) {
-        this.api = api;
-        this.dashboard = dashboard;
-        this.currentChannel = null;
-    }
-
-    async loadLiveChannels() {
-        try {
-            console.log('Loading live channels from Centrifugo server...');
-
-            const patternInput = document.getElementById('live-channel-pattern');
-            const pattern = patternInput ? patternInput.value.trim() : '';
-
-            // Call Centrifugo channels API
-            const data = { pattern: pattern || '' };
-            const response = await this.api.centrifugoAdminApiServerChannelsCreate(data);
-
-            if (response && response.result) {
-                const channels = response.result.channels || {};
-                this.renderChannelsGrid(channels);
-                this.updateLiveChannelsBadge(Object.keys(channels).length);
-            } else if (response && response.error) {
-                console.error('Centrifugo API error:', response.error);
-                this.showError('Failed to load channels: ' + response.error.message);
-            }
-        } catch (error) {
-            console.error('Error loading live channels:', error);
-            this.showError('Failed to connect to Centrifugo server');
-        }
-    }
-
-    renderChannelsGrid(channels) {
-        const grid = document.getElementById('live-channels-grid');
-        const emptyState = document.getElementById('live-channels-empty');
-
-        if (!grid) return;
-
-        const channelEntries = Object.entries(channels);
-
-        if (channelEntries.length === 0) {
-            grid.innerHTML = '';
-            if (emptyState) emptyState.classList.remove('hidden');
-            return;
-        }
-
-        if (emptyState) emptyState.classList.add('hidden');
-
-        let html = '';
-        channelEntries.forEach(([channelName, info]) => {
-            const numClients = info.num_clients || 0;
-            const statusColor = numClients > 0 ? 'text-green-500' : 'text-gray-400';
-            const statusIcon = numClients > 0 ? 'radio_button_checked' : 'radio_button_unchecked';
-
-            html += `
-                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:border-purple-500 dark:hover:border-purple-400 transition-colors">
-                    <!-- Channel Header -->
-                    <div class="flex items-start justify-between mb-3">
-                        <div class="flex items-center gap-2 min-w-0 flex-1">
-                            <span class="material-icons ${statusColor}">${statusIcon}</span>
-                            <code class="text-sm font-mono text-gray-900 dark:text-white truncate">${this.escapeHtml(channelName)}</code>
-                        </div>
-                    </div>
-
-                    <!-- Stats -->
-                    <div class="grid grid-cols-2 gap-3 mb-3">
-                        <div>
-                            <p class="text-xs text-gray-600 dark:text-gray-400">Clients</p>
-                            <p class="text-xl font-bold text-purple-600 dark:text-purple-400">${numClients}</p>
-                        </div>
-                        <div>
-                            <p class="text-xs text-gray-600 dark:text-gray-400">Status</p>
-                            <p class="text-sm font-medium ${numClients > 0 ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}">
-                                ${numClients > 0 ? 'Active' : 'Idle'}
-                            </p>
-                        </div>
-                    </div>
-
-                    <!-- Actions -->
-                    <div class="flex gap-2">
-                        <button onclick="window.centrifugoDashboard.liveChannelsModule.viewChannelDetails('${this.escapeHtml(channelName)}')"
-                                class="flex-1 px-3 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded text-sm font-medium flex items-center justify-center gap-1">
-                            <span class="material-icons text-base">visibility</span>
-                            View Details
-                        </button>
-                    </div>
-                </div>
-            `;
-        });
-
-        grid.innerHTML = html;
-    }
-
-    async viewChannelDetails(channel) {
-        this.currentChannel = channel;
-        const modal = document.getElementById('channel-details-modal');
-        if (!modal) return;
-
-        // Show modal
-        modal.classList.remove('hidden');
-
-        // Set channel name
-        const modalTitle = document.getElementById('modal-channel-name');
-        if (modalTitle) {
-            modalTitle.textContent = channel;
-        }
-
-        // Load presence and history
-        await this.loadChannelPresence(channel);
-        await this.loadChannelHistory(channel);
-        await this.loadPresenceStats(channel);
-    }
-
-    async loadPresenceStats(channel) {
-        try {
-            const data = { channel };
-            const response = await this.api.centrifugoAdminApiServerPresenceStatsCreate(data);
-
-            if (response && response.error) {
-                // Feature not available (e.g., code 108)
-                console.warn('Presence stats not available:', response.error.message);
-                this.updateElement('modal-clients-count', 'N/A');
-                this.updateElement('modal-users-count', 'N/A');
-            } else if (response && response.result) {
-                const stats = response.result;
-                this.updateElement('modal-clients-count', stats.num_clients || 0);
-                this.updateElement('modal-users-count', stats.num_users || 0);
-            }
-        } catch (error) {
-            console.error('Error loading presence stats:', error);
-            this.updateElement('modal-clients-count', 'Error');
-            this.updateElement('modal-users-count', 'Error');
-        }
-    }
-
-    async loadChannelPresence(channel) {
-        try {
-            const data = { channel };
-            const response = await this.api.centrifugoAdminApiServerPresenceCreate(data);
-
-            if (response && response.error) {
-                // Feature not available (e.g., code 108)
-                console.warn('Presence not available:', response.error.message);
-                this.renderPresenceList({}, 'Presence tracking not enabled for this channel');
-            } else if (response && response.result) {
-                const presence = response.result.presence || {};
-                this.renderPresenceList(presence);
-            }
-        } catch (error) {
-            console.error('Error loading channel presence:', error);
-            this.renderPresenceList({}, 'Error loading presence data');
-        }
-    }
-
-    renderPresenceList(presence, errorMessage = null) {
-        const tbody = document.getElementById('modal-presence-list');
-        if (!tbody) return;
-
-        if (errorMessage) {
-            tbody.innerHTML = `
-                <tr>
-                    <td colspan="3" class="px-4 py-8 text-center text-yellow-600 dark:text-yellow-400">
-                        <span class="material-icons text-2xl mb-2">info</span>
-                        <p>${errorMessage}</p>
-                    </td>
-                </tr>
-            `;
-            return;
-        }
-
-        const clients = Object.values(presence);
-
-        if (clients.length === 0) {
-            tbody.innerHTML = `
-                <tr>
-                    <td colspan="3" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
-                        No clients connected to this channel
-                    </td>
-                </tr>
-            `;
-            return;
-        }
-
-        let html = '';
-        clients.forEach(client => {
-            const userId = client.user || 'anonymous';
-            const clientId = (client.client || '').substring(0, 12) + '...';
-            const connInfo = client.conn_info ? JSON.stringify(client.conn_info) : '-';
-
-            html += `
-                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">${this.escapeHtml(userId)}</td>
-                    <td class="px-4 py-3 text-xs font-mono text-gray-600 dark:text-gray-400">${this.escapeHtml(clientId)}</td>
-                    <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400">${this.escapeHtml(connInfo)}</td>
-                </tr>
-            `;
-        });
-
-        tbody.innerHTML = html;
-    }
-
-    async loadChannelHistory(channel) {
-        try {
-            const data = { channel, limit: 10 };
-            const response = await this.api.centrifugoAdminApiServerHistoryCreate(data);
-
-            if (response && response.error) {
-                // Feature not available (e.g., code 108)
-                console.warn('History not available:', response.error.message);
-                this.renderHistoryList([], 'History not enabled for this channel');
-                this.updateElement('modal-history-count', 'N/A');
-            } else if (response && response.result) {
-                const publications = response.result.publications || [];
-                this.renderHistoryList(publications);
-                this.updateElement('modal-history-count', publications.length);
-            }
-        } catch (error) {
-            console.error('Error loading channel history:', error);
-            this.renderHistoryList([], 'Error loading history');
-            this.updateElement('modal-history-count', 'Error');
-        }
-    }
-
-    renderHistoryList(publications, errorMessage = null) {
-        const container = document.getElementById('modal-history-list');
-        if (!container) return;
-
-        if (errorMessage) {
-            container.innerHTML = `
-                <p class="text-sm text-yellow-600 dark:text-yellow-400 text-center py-4">
-                    <span class="material-icons text-xl">info</span><br>
-                    ${errorMessage}
-                </p>
-            `;
-            return;
-        }
-
-        if (publications.length === 0) {
-            container.innerHTML = `
-                <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
-                    No recent messages in this channel
-                </p>
-            `;
-            return;
-        }
-
-        let html = '';
-        publications.forEach((pub, index) => {
-            const data = pub.data || {};
-            const offset = pub.offset || '-';
-            const dataStr = JSON.stringify(data, null, 2);
-
-            html += `
-                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Message #${index + 1}</span>
-                        <span class="text-xs text-gray-500 dark:text-gray-400">Offset: ${offset}</span>
-                    </div>
-                    <pre class="text-xs text-gray-900 dark:text-white overflow-x-auto"><code>${this.escapeHtml(dataStr)}</code></pre>
-                </div>
-            `;
-        });
-
-        container.innerHTML = html;
-    }
-
-    closeModal() {
-        const modal = document.getElementById('channel-details-modal');
-        if (modal) {
-            modal.classList.add('hidden');
-        }
-        this.currentChannel = null;
-    }
-
-    updateLiveChannelsBadge(count) {
-        const badge = document.getElementById('live-channels-count-badge');
-        if (badge) {
-            badge.textContent = count;
-        }
-    }
-
-    showError(message) {
-        const grid = document.getElementById('live-channels-grid');
-        if (grid) {
-            grid.innerHTML = `
-                <div class="col-span-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
-                    <div class="flex items-center gap-3">
-                        <span class="material-icons text-red-500">error</span>
-                        <p class="text-sm text-red-700 dark:text-red-400">${this.escapeHtml(message)}</p>
-                    </div>
-                </div>
-            `;
-        }
-    }
-
-    updateElement(id, value) {
-        const element = document.getElementById(id);
-        if (element) {
-            element.textContent = value;
-        }
-    }
-
-    escapeHtml(unsafe) {
-        if (typeof unsafe !== 'string') return unsafe;
-        const div = document.createElement('div');
-        div.textContent = unsafe;
-        return div.innerHTML;
-    }
-}