django-cfg 1.4.48__py3-none-any.whl → 1.5.7__py3-none-any.whl

django_cfg/apps/tasks/static/tasks/js/components/TaskRenderer.js

@@ -1,216 +0,0 @@
-/**
- * TaskRenderer - Renders tasks using HTML templates (no HTML in JS!)
- */
-export class TaskRenderer {
-    constructor() {
-        this.taskRowTemplate = document.getElementById('task-row-template');
-        this.statusConfig = {
-            pending: {
-                icon: 'schedule',
-                label: 'PENDING',
-                color: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
-                iconColor: 'text-yellow-500'
-            },
-            running: {
-                icon: 'play_circle',
-                label: 'RUNNING',
-                color: 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
-                iconColor: 'text-blue-500'
-            },
-            completed: {
-                icon: 'check_circle',
-                label: 'COMPLETED',
-                color: 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
-                iconColor: 'text-green-500'
-            },
-            failed: {
-                icon: 'error',
-                label: 'FAILED',
-                color: 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200',
-                iconColor: 'text-red-500'
-            }
-        };
-    }
-
-    /**
-     * Render tasks into the table
-     * @param {Array} tasks - Array of task objects
-     * @param {HTMLElement} container - Container element
-     */
-    renderTasks(tasks, container) {
-        const tableBody = container.querySelector('#task-table-body');
-        if (!tableBody) return;
-
-        // Clear existing rows
-        tableBody.innerHTML = '';
-
-        // Render each task
-        tasks.forEach(task => {
-            const row = this.createTaskRow(task);
-            if (row) {
-                tableBody.appendChild(row);
-            }
-        });
-    }
-
-    /**
-     * Create a task row element using template
-     * @param {Object} task - Task object
-     * @returns {HTMLElement} - Task row element
-     */
-    createTaskRow(task) {
-        if (!this.taskRowTemplate) {
-            console.error('Task row template not found');
-            return null;
-        }
-
-        // Clone template
-        const row = this.taskRowTemplate.content.cloneNode(true).querySelector('.task-row');
-        
-        // Set task ID
-        row.setAttribute('data-task-id', task.id);
-
-        // Map status
-        const displayStatus = this.mapStatus(task.status);
-        const statusConfig = this.statusConfig[displayStatus];
-
-        // Populate status
-        const statusIcon = row.querySelector('.task-status-icon');
-        const statusBadge = row.querySelector('.task-status-badge');
-        
-        if (statusIcon && statusBadge && statusConfig) {
-            statusIcon.textContent = statusConfig.icon;
-            statusIcon.className = `material-icons text-sm ${statusConfig.iconColor}`;
-            
-            statusBadge.textContent = statusConfig.label;
-            statusBadge.className = `px-2 py-1 text-xs font-medium rounded-full ${statusConfig.color}`;
-        }
-
-        // Show progress bar for running tasks
-        if (displayStatus === 'running' && task.progress) {
-            const progressContainer = row.querySelector('.task-progress');
-            const progressBar = progressContainer?.querySelector('div');
-            if (progressContainer && progressBar) {
-                progressContainer.classList.remove('hidden');
-                progressBar.style.width = `${task.progress}%`;
-            }
-        }
-
-        // Populate task info
-        const taskName = row.querySelector('.task-name');
-        const taskId = row.querySelector('.task-id');
-        if (taskName) taskName.textContent = task.actor_name || 'Unknown Task';
-        if (taskId) taskId.textContent = `${String(task.id).substring(0, 8)}...`;
-
-        // Populate queue
-        const taskQueue = row.querySelector('.task-queue');
-        if (taskQueue) taskQueue.textContent = task.queue_name || task.queue || 'unknown';
-
-        // Populate duration and time
-        const taskDuration = row.querySelector('.task-duration');
-        const taskUpdated = row.querySelector('.task-updated');
-        if (taskDuration) taskDuration.textContent = this.calculateDuration(task.created_at, task.updated_at);
-        if (taskUpdated) taskUpdated.textContent = new Date(task.updated_at).toLocaleTimeString();
-
-        // Populate actions
-        this.populateActions(row, task, displayStatus);
-
-        return row;
-    }
-
-    /**
-     * Map task status to display status
-     * @param {string} status - Original status
-     * @returns {string} - Mapped status
-     */
-    mapStatus(status) {
-        const statusMap = {
-            'enqueued': 'pending',
-            'delayed': 'pending', 
-            'pending': 'pending',
-            'running': 'running',
-            'done': 'completed',
-            'completed': 'completed',
-            'failed': 'failed',
-            'skipped': 'completed'
-        };
-        
-        return statusMap[status?.toLowerCase()] || 'pending';
-    }
-
-    /**
-     * Populate task actions (no HTML strings!)
-     * @param {HTMLElement} row - Task row element
-     * @param {Object} task - Task object
-     * @param {string} displayStatus - Display status
-     */
-    populateActions(row, task, displayStatus) {
-        const actionsContainer = row.querySelector('.task-actions');
-        if (!actionsContainer) return;
-        
-        actionsContainer.innerHTML = '';
-
-        // Add retry button for failed tasks
-        if (displayStatus === 'failed') {
-            const retryBtn = document.createElement('button');
-            retryBtn.className = 'px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors';
-            retryBtn.textContent = 'Retry';
-            retryBtn.addEventListener('click', () => this.retryTask(task.id));
-            actionsContainer.appendChild(retryBtn);
-        }
-
-        // Add details button if task has additional info
-        if (task.args || task.kwargs || task.result || task.traceback) {
-            const detailsBtn = document.createElement('button');
-            detailsBtn.className = 'p-1 text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded transition-colors';
-            detailsBtn.title = 'Show details';
-            
-            const icon = document.createElement('span');
-            icon.className = 'material-icons text-sm';
-            icon.textContent = 'info';
-            detailsBtn.appendChild(icon);
-            
-            detailsBtn.addEventListener('click', () => this.showTaskDetails(task));
-            actionsContainer.appendChild(detailsBtn);
-        }
-    }
-
-    /**
-     * Calculate duration between two dates
-     * @param {string} startTime - Start time ISO string
-     * @param {string} endTime - End time ISO string
-     * @returns {string} - Formatted duration
-     */
-    calculateDuration(startTime, endTime) {
-        if (!startTime || !endTime) return '--';
-        
-        const start = new Date(startTime);
-        const end = new Date(endTime);
-        const diff = end - start;
-        
-        if (diff < 1000) return `${diff}ms`;
-        if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
-        if (diff < 3600000) return `${Math.floor(diff / 60000)}m ${Math.floor((diff % 60000) / 1000)}s`;
-        return `${Math.floor(diff / 3600000)}h ${Math.floor((diff % 3600000) / 60000)}m`;
-    }
-
-    /**
-     * Retry a failed task
-     * @param {string} taskId - Task ID
-     */
-    retryTask(taskId) {
-        console.log('Retrying task:', taskId);
-        // TODO: Implement retry functionality
-        alert(`Retry functionality for task ${taskId} will be implemented`);
-    }
-
-    /**
-     * Show task details
-     * @param {Object} task - Task object
-     */
-    showTaskDetails(task) {
-        console.log('Showing task details:', task);
-        // TODO: Implement task details modal
-        alert(`Task Details:\nID: ${task.id}\nActor: ${task.actor_name}\nStatus: ${task.status}`);
-    }
-}

django_cfg/apps/tasks/static/tasks/js/dashboard/main.mjs

@@ -1,269 +0,0 @@
-/**
- * Main Tasks Dashboard Controller
- * Orchestrates all dashboard modules
- */
-import { OverviewModule } from './overview.mjs';
-import { QueuesModule } from './queues.mjs';
-import { WorkersModule } from './workers.mjs';
-import { TasksModule } from './tasks.mjs';
-
-class TasksDashboard {
-    constructor() {
-        this.api = window.tasksAPI;
-        this.currentTab = 'overview';
-        this.refreshInterval = null;
-        this.refreshRate = 30000; // 30 seconds
-        
-        // Initialize modules (pass reference to this dashboard for badge updates)
-        this.overviewModule = new OverviewModule(this.api, this);
-        this.queuesModule = new QueuesModule(this.api, this);
-        this.workersModule = new WorkersModule(this.api, this);
-        this.tasksModule = new TasksModule(this.api, this);
-    }
-
-    /**
-     * Initialize dashboard
-     */
-    init() {
-        console.log('Initializing Tasks Dashboard...');
-        this.setupEventListeners();
-        this.loadInitialData();
-        this.startAutoRefresh();
-    }
-
-    /**
-     * Setup event listeners
-     */
-    setupEventListeners() {
-        // Tab buttons
-        document.querySelectorAll('.tab-button').forEach(button => {
-            button.addEventListener('click', (e) => {
-                const tabId = e.currentTarget.dataset.tab;
-                this.switchTab(tabId);
-            });
-        });
-
-        // Management actions
-        document.getElementById('simulate-data-btn')?.addEventListener('click', () => this.simulateData());
-        document.getElementById('clear-test-data-btn')?.addEventListener('click', () => this.clearData());
-        document.getElementById('clear-all-queues-btn')?.addEventListener('click', () => this.clearQueues());
-        document.getElementById('purge-failed-tasks-btn')?.addEventListener('click', () => this.purgeFailed());
-    }
-
-    /**
-     * Switch tabs
-     */
-    switchTab(tabId) {
-        console.log('Switching to tab:', tabId);
-        
-        // Update active tab styling
-        document.querySelectorAll('.tab-button').forEach(tab => {
-            tab.classList.remove('active');
-            tab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300', 'dark:text-gray-400', 'dark:hover:text-gray-300');
-        });
-
-        // Add active to selected tab
-        const activeTab = document.querySelector(`[data-tab="${tabId}"]`);
-        if (activeTab) {
-            activeTab.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300', 'dark:text-gray-400', 'dark:hover:text-gray-300');
-            activeTab.classList.add('active');
-        }
-
-        // Hide all tab panels
-        document.querySelectorAll('.tab-panel').forEach(panel => {
-            panel.classList.add('hidden');
-            panel.classList.remove('active');
-        });
-
-        // Show selected tab panel
-        const activePanel = document.querySelector(`#${tabId}-tab`);
-        if (activePanel) {
-            activePanel.classList.remove('hidden');
-            activePanel.classList.add('active');
-        }
-
-        this.currentTab = tabId;
-        this.loadTabData(tabId);
-    }
-
-    /**
-     * Load initial data
-     */
-    async loadInitialData() {
-        console.log('Loading initial data...');
-        await this.loadTabData(this.currentTab);
-    }
-
-    /**
-     * Load data for specific tab using modules
-     */
-    async loadTabData(tabId) {
-        console.log('Loading data for tab:', tabId);
-        
-        switch (tabId) {
-            case 'overview':
-                await this.overviewModule.loadData();
-                break;
-            case 'queues':
-                await this.queuesModule.loadData();
-                break;
-            case 'workers':
-                await this.workersModule.loadData();
-                break;
-            case 'tasks':
-                await this.tasksModule.loadData();
-                break;
-        }
-    }
-
-    /**
-     * Management actions
-     * Using new MJS API with correct method names
-     */
-    async simulateData() {
-        try {
-            this.showManagementActionStatus('Simulating test data...', 'info');
-            // Using the new API method name from MJS client
-            const response = await this.api.tasksApiSimulateCreate({});
-
-            if (response && response.success) {
-                this.showManagementActionStatus('Test data simulation completed successfully', 'success');
-                await this.loadTabData(this.currentTab);
-            } else {
-                this.showManagementActionStatus(`Simulation failed: ${response?.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            this.showManagementActionStatus(`Simulation error: ${error.message}`, 'error');
-        }
-    }
-
-    async clearData() {
-        try {
-            this.showManagementActionStatus('Clearing test data...', 'info');
-            // Using the new API method name from MJS client
-            const response = await this.api.tasksApiClearCreate({});
-
-            if (response && response.success) {
-                this.showManagementActionStatus('Test data cleared successfully', 'success');
-                await this.loadTabData(this.currentTab);
-            } else {
-                this.showManagementActionStatus(`Clear failed: ${response?.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            this.showManagementActionStatus(`Clear error: ${error.message}`, 'error');
-        }
-    }
-
-    async clearQueues() {
-        console.log('Clearing queues...');
-        this.showManagementActionStatus('Clearing all queues...', 'info');
-        try {
-            // Using the new API method name from MJS client
-            const response = await this.api.tasksApiClearQueuesCreate({});
-            if (response && response.success) {
-                this.showManagementActionStatus(response.message || 'Queues cleared successfully', 'success');
-                this.loadTabData(this.currentTab);
-            } else {
-                this.showManagementActionStatus(`Failed to clear queues: ${response?.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            this.showManagementActionStatus(`Failed to clear queues: ${error.message}`, 'error');
-        }
-    }
-
-    async purgeFailed() {
-        console.log('Purging failed tasks...');
-        this.showManagementActionStatus('Purging failed tasks...', 'info');
-        try {
-            // Using the new API method name from MJS client
-            const response = await this.api.tasksApiPurgeFailedCreate({});
-            if (response && response.success) {
-                this.showManagementActionStatus(response.message || 'Failed tasks purged successfully', 'success');
-                this.loadTabData(this.currentTab);
-            } else {
-                this.showManagementActionStatus(`Failed to purge failed tasks: ${response?.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            this.showManagementActionStatus(`Failed to purge failed tasks: ${error.message}`, 'error');
-        }
-    }
-
-    /**
-     * Show management action status
-     */
-    showManagementActionStatus(message, type = 'info') {
-        const statusDiv = document.getElementById('management-action-status');
-        const messageSpan = document.getElementById('management-action-message');
-        
-        if (statusDiv && messageSpan) {
-            messageSpan.textContent = message;
-            statusDiv.classList.remove('hidden');
-            
-            setTimeout(() => {
-                statusDiv.classList.add('hidden');
-            }, 5000);
-        }
-    }
-
-    /**
-     * Update tab badges with counts
-     */
-    updateTabBadges(data) {
-        // Update queues badge
-        const queuesBadge = document.querySelector('#queues-count-badge');
-        if (queuesBadge && data.active_queues !== undefined) {
-            queuesBadge.textContent = data.active_queues;
-        }
-
-        // Update workers badge
-        const workersBadge = document.querySelector('#workers-count-badge');
-        if (workersBadge && data.workers !== undefined) {
-            workersBadge.textContent = data.workers;
-        }
-
-        // Update tasks badge - will be updated by tasks module
-        const tasksBadge = document.querySelector('#tasks-count-badge');
-        if (tasksBadge && data.total_tasks !== undefined) {
-            tasksBadge.textContent = data.total_tasks;
-        }
-    }
-
-    /**
-     * Start auto-refresh
-     */
-    startAutoRefresh() {
-        if (this.refreshInterval) {
-            clearInterval(this.refreshInterval);
-        }
-        
-        this.refreshInterval = setInterval(() => {
-            this.loadTabData(this.currentTab);
-        }, this.refreshRate);
-    }
-}
-
-// Wait for both DOM and API to be ready
-async function initializeDashboard() {
-    console.log('DOM loaded, waiting for TasksAPI...');
-
-    // Wait for API to be available (max 5 seconds)
-    let attempts = 0;
-    const maxAttempts = 100; // 100 * 50ms = 5 seconds
-
-    while (!window.tasksAPI && attempts < maxAttempts) {
-        await new Promise(resolve => setTimeout(resolve, 50));
-        attempts++;
-    }
-
-    if (!window.tasksAPI) {
-        console.error('❌ TasksAPI failed to load after 5 seconds');
-        return;
-    }
-
-    console.log('✅ TasksAPI ready, initializing dashboard...');
-    window.dashboard = new TasksDashboard();
-    window.dashboard.init();
-}
-
-// Initialize dashboard when DOM is ready
-document.addEventListener('DOMContentLoaded', initializeDashboard);

django_cfg/apps/tasks/static/tasks/js/dashboard/overview.mjs

@@ -1,125 +0,0 @@
-/**
- * Overview Dashboard Module
- * Handles overview tab functionality
- */
-export class OverviewModule {
-    constructor(api, dashboard) {
-        this.api = api;
-        this.dashboard = dashboard; // Reference to main dashboard for badge updates
-    }
-
-    /**
-     * Load overview data
-     * Using new MJS API methods with JSDoc types
-     */
-    async loadData() {
-        try {
-            console.log('Loading overview data...');
-
-            // Using the new API method names from MJS client
-            const [queueData, taskStats] = await Promise.all([
-                this.api.tasksApiQueuesStatusRetrieve(),
-                this.api.tasksApiTasksStatsRetrieve()
-            ]);
-
-            const queueInfo = queueData?.data || queueData;
-            const taskInfo = taskStats?.data || taskStats;
-
-            this.updateStatusCards(queueInfo, taskInfo);
-            this.updateSystemStatus(queueInfo);
-            
-            // Update tab badges
-            if (this.dashboard && this.dashboard.updateTabBadges) {
-                this.dashboard.updateTabBadges(queueInfo);
-            }
-            
-        } catch (error) {
-            console.error('Failed to load overview data:', error);
-            this.showError('Failed to load overview data');
-        }
-    }
-
-    /**
-     * Update status cards
-     */
-    updateStatusCards(queueData, taskData) {
-        this.updateElement('active-queues-count', queueData.active_queues || 0);
-        this.updateElement('workers-count', queueData.workers || 0);
-        this.updateElement('pending-tasks-count', queueData.total_pending || 0);
-        this.updateElement('failed-tasks-count', queueData.total_failed || 0);
-    }
-
-    /**
-     * Update system status
-     */
-    updateSystemStatus(data) {
-        const statusContainer = document.getElementById('system-status');
-        if (!statusContainer) return;
-
-        const isHealthy = data.redis_connected && !data.error;
-        const timestamp = new Date().toLocaleTimeString();
-
-        statusContainer.innerHTML = `
-            <div class="flex items-center justify-between mb-4">
-                <div class="flex items-center">
-                    <span class="material-icons text-2xl mr-3 ${isHealthy ? 'text-green-600' : 'text-red-600'}">
-                        ${isHealthy ? 'check_circle' : 'error'}
-                    </span>
-                    <div>
-                        <h3 class="text-lg font-semibold ${isHealthy ? 'text-green-800' : 'text-red-800'} dark:${isHealthy ? 'text-green-200' : 'text-red-200'}">
-                            ${isHealthy ? 'System Healthy' : 'System Issues Detected'}
-                        </h3>
-                        <p class="text-sm text-gray-600 dark:text-gray-400">
-                            ${isHealthy ? 'All systems operational' : 'Some components need attention'}
-                        </p>
-                    </div>
-                </div>
-                <span class="text-xs text-gray-500 dark:text-gray-400">Last updated: ${timestamp}</span>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-                <div class="flex items-center">
-                    <span class="material-icons text-base mr-2 ${data.redis_connected ? 'text-green-500' : 'text-red-500'}">
-                        ${data.redis_connected ? 'check' : 'close'}
-                    </span>
-                    <span class="text-gray-700 dark:text-gray-300">Redis: ${data.redis_connected ? 'Connected' : 'Disconnected'}</span>
-                </div>
-                <div class="flex items-center">
-                    <span class="material-icons text-base mr-2 ${data.workers > 0 ? 'text-green-500' : 'text-red-500'}">
-                        ${data.workers > 0 ? 'check' : 'close'}
-                    </span>
-                    <span class="text-gray-700 dark:text-gray-300">Workers: ${data.workers} active</span>
-                </div>
-                <div class="flex items-center">
-                    <span class="material-icons text-base mr-2 ${data.active_queues > 0 ? 'text-blue-500' : 'text-gray-500'}">queue</span>
-                    <span class="text-gray-700 dark:text-gray-300">Queues: ${data.active_queues || 0} configured</span>
-                </div>
-            </div>
-        `;
-    }
-
-    /**
-     * Helper method to update element text
-     */
-    updateElement(id, value) {
-        const element = document.getElementById(id);
-        if (element) {
-            element.textContent = value;
-        }
-    }
-
-    /**
-     * Show error message
-     */
-    showError(message) {
-        console.error(message);
-        const statusContainer = document.getElementById('system-status');
-        if (statusContainer) {
-            statusContainer.innerHTML = `
-                <div class="text-center py-8">
-                    <span class="material-icons text-4xl text-red-400 mb-4">error</span>
-                    <p class="text-red-600 dark:text-red-400">${message}</p>
-                </div>
-            `;
-        }
-    }
-}