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

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

@@ -0,0 +1,216 @@
+/**
+ * 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

@@ -0,0 +1,245 @@
+/**
+ * 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
+     */
+    async simulateData() {
+        try {
+            this.showManagementActionStatus('Simulating test data...', 'info');
+            const response = await this.api.simulateData();
+            
+            if (response.success) {
+                this.showManagementActionStatus('Test data simulation completed successfully', 'success');
+                await this.loadTabData(this.currentTab);
+            } else {
+                this.showManagementActionStatus(`Simulation failed: ${response.error}`, 'error');
+            }
+        } catch (error) {
+            this.showManagementActionStatus(`Simulation error: ${error.message}`, 'error');
+        }
+    }
+
+    async clearData() {
+        try {
+            this.showManagementActionStatus('Clearing test data...', 'info');
+            const response = await this.api.clearData();
+            
+            if (response.success) {
+                this.showManagementActionStatus('Test data cleared successfully', 'success');
+                await this.loadTabData(this.currentTab);
+            } else {
+                this.showManagementActionStatus(`Clear failed: ${response.error}`, 'error');
+            }
+        } catch (error) {
+            this.showManagementActionStatus(`Clear error: ${error.message}`, 'error');
+        }
+    }
+
+    async clearQueues() {
+        console.log('Clearing queues...');
+        this.showManagementActionStatus('Clearing all queues...', 'info');
+        try {
+            const response = await this.api.clearQueues();
+            if (response.success) {
+                this.showManagementActionStatus(response.message, 'success');
+                this.loadTabData(this.currentTab);
+            } else {
+                this.showManagementActionStatus(`Failed to clear queues: ${response.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 {
+            const response = await this.api.purgeFailed();
+            if (response.success) {
+                this.showManagementActionStatus(response.message, 'success');
+                this.loadTabData(this.currentTab);
+            } else {
+                this.showManagementActionStatus(`Failed to purge failed tasks: ${response.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);
+    }
+}
+
+// Initialize dashboard when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('DOM loaded, initializing dashboard...');
+    window.dashboard = new TasksDashboard();
+    window.dashboard.init();
+});

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

@@ -0,0 +1,123 @@
+/**
+ * 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
+     */
+    async loadData() {
+        try {
+            console.log('Loading overview data...');
+            
+            const [queueData, taskStats] = await Promise.all([
+                this.api.getQueueStatus(),
+                this.api.getTaskStatistics()
+            ]);
+
+            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>
+            `;
+        }
+    }
+}