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

django_cfg/apps/tasks/static/tasks/css/dashboard.css

@@ -1,269 +1,120 @@
-/**
- * Dashboard Custom Styles
- * Additional styles for the Dramatiq Tasks Dashboard
- */
+/* Tasks Dashboard CSS */
 
-/* Custom scrollbar for dark mode */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+/* Tab styling */
+.tab-button.active {
+    border-color: rgb(59 130 246) !important;
+    color: rgb(59 130 246) !important;
 }
 
-::-webkit-scrollbar-track {
-    background: transparent;
+.tab-panel {
+    display: none;
 }
 
-::-webkit-scrollbar-thumb {
-    background: rgba(156, 163, 175, 0.5);
-    border-radius: 4px;
+.tab-panel.active {
+    display: block;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(156, 163, 175, 0.7);
+/* Custom scrollbar */
+.task-table-widget::-webkit-scrollbar {
+    height: 8px;
 }
 
-.dark ::-webkit-scrollbar-thumb {
-    background: rgba(75, 85, 99, 0.5);
+.task-table-widget::-webkit-scrollbar-track {
+    background: #f1f5f9;
 }
 
-.dark ::-webkit-scrollbar-thumb:hover {
-    background: rgba(75, 85, 99, 0.7);
+.task-table-widget::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
 }
 
-/* Tab transitions */
-.tab-button {
-    transition: all 0.2s ease-in-out;
+.task-table-widget::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
 }
 
-.tab-panel {
-    transition: opacity 0.2s ease-in-out;
+/* Dark mode scrollbar */
+.dark .task-table-widget::-webkit-scrollbar-track {
+    background: #374151;
 }
 
-.tab-panel.hidden {
-    opacity: 0;
+.dark .task-table-widget::-webkit-scrollbar-thumb {
+    background: #6b7280;
 }
 
-.tab-panel.active {
-    opacity: 1;
+.dark .task-table-widget::-webkit-scrollbar-thumb:hover {
+    background: #9ca3af;
 }
 
-/* Loading animations */
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
+/* Loading animation */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
     }
 }
 
-.animate-pulse {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.animate-spin {
+    animation: spin 1s linear infinite;
 }
 
 /* Status indicators */
 .status-indicator {
-    position: relative;
-    display: inline-block;
-}
-
-.status-indicator::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    border: 2px solid white;
-}
-
-.status-indicator.online::before {
-    background-color: #10b981;
-}
-
-.status-indicator.offline::before {
-    background-color: #ef4444;
+    display: inline-block;
+    margin-right: 8px;
 }
 
-.status-indicator.warning::before {
+.status-pending {
     background-color: #f59e0b;
 }
 
-/* Card hover effects */
-.card-hover {
-    transition: all 0.2s ease-in-out;
-}
-
-.card-hover:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.dark .card-hover:hover {
-    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-}
-
-/* Button loading state */
-.btn-loading {
-    position: relative;
-    pointer-events: none;
-}
-
-.btn-loading::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 16px;
-    height: 16px;
-    margin: -8px 0 0 -8px;
-    border: 2px solid transparent;
-    border-top: 2px solid currentColor;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-/* Modal backdrop blur */
-.modal-backdrop {
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-}
-
-/* Custom focus styles */
-.focus-ring:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
-}
-
-.dark .focus-ring:focus {
-    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
-}
-
-/* Progress bars */
-.progress-bar {
-    position: relative;
-    overflow: hidden;
-    background-color: #e5e7eb;
-    border-radius: 0.25rem;
-    height: 0.5rem;
-}
-
-.dark .progress-bar {
-    background-color: #374151;
-}
-
-.progress-bar-fill {
-    height: 100%;
+.status-running {
     background-color: #3b82f6;
-    transition: width 0.3s ease-in-out;
 }
 
-.progress-bar-fill.success {
+.status-completed {
     background-color: #10b981;
 }
 
-.progress-bar-fill.warning {
-    background-color: #f59e0b;
-}
-
-.progress-bar-fill.error {
+.status-failed {
     background-color: #ef4444;
 }
 
-/* Tooltip styles */
-.tooltip {
-    position: relative;
-}
-
-.tooltip::before {
-    content: attr(data-tooltip);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0.5rem;
-    background-color: #1f2937;
-    color: white;
-    font-size: 0.75rem;
-    border-radius: 0.25rem;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease-in-out;
-    z-index: 1000;
-}
-
-.tooltip:hover::before {
-    opacity: 1;
+/* Progress bar */
+.progress-bar {
+    transition: width 0.3s ease-in-out;
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .tab-button {
-        padding: 0.5rem 0.25rem;
-        font-size: 0.75rem;
-    }
-    
-    .tab-button .material-icons {
-        display: none;
-    }
-    
-    .status-cards {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 1rem;
-    }
-    
-    .info-cards {
-        grid-template-columns: 1fr;
-    }
+/* Hover effects */
+.hover-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease-in-out;
 }
 
-@media (max-width: 640px) {
-    .status-cards {
-        grid-template-columns: 1fr;
-    }
-    
-    .tab-navigation {
-        overflow-x: auto;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-    }
-    
-    .tab-navigation::-webkit-scrollbar {
-        display: none;
-    }
+/* Button focus states */
+.btn-focus:focus {
+    outline: 2px solid rgb(59 130 246);
+    outline-offset: 2px;
 }
 
-/* Print styles */
-@media print {
-    .tab-navigation,
-    .modal-container,
-    button {
-        display: none !important;
-    }
-    
-    .tab-panel {
-        display: block !important;
-    }
-    
-    .bg-gray-50,
-    .dark\:bg-gray-900 {
-        background: white !important;
-    }
-    
-    .text-gray-900,
-    .dark\:text-white {
-        color: black !important;
-    }
+/* Material icons alignment */
+.material-icons {
+    vertical-align: middle;
+    line-height: 1;
+}
+
+/* Custom primary color */
+:root {
+    --primary-50: #eff6ff;
+    --primary-100: #dbeafe;
+    --primary-200: #bfdbfe;
+    --primary-300: #93c5fd;
+    --primary-400: #60a5fa;
+    --primary-500: #3b82f6;
+    --primary-600: #2563eb;
+    --primary-700: #1d4ed8;
+    --primary-800: #1e40af;
+    --primary-900: #1e3a8a;
 }

django_cfg/apps/tasks/static/tasks/js/api.js

@@ -1,51 +1,32 @@
 /**
- * API Client for Dramatiq Tasks Dashboard
- * Handles all API communication with the backend
+ * Tasks API Client
+ * Handles all API communication for the Tasks Dashboard
  */
-
 class TasksAPI {
-    constructor(baseUrl = '/cfg/tasks/api') {
+    constructor(baseUrl = '/api/tasks/api') {
         this.baseUrl = baseUrl;
     }
 
     /**
-     * Make an API request
+     * Make API request
      * @param {string} endpoint - API endpoint
-     * @param {Object} options - Fetch options
-     * @returns {Promise<Object>} API response
+     * @param {Object} options - Request options
+     * @returns {Promise<Object>} - API response
      */
     async request(endpoint, options = {}) {
         const url = `${this.baseUrl}${endpoint}`;
         const defaultOptions = {
+            method: 'GET',
             headers: {
                 'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRFToken': this.getCSRFToken(),
             },
-            credentials: 'same-origin', // Include cookies for session authentication
         };
 
-        // Add CSRF token if available
-        let csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
-        if (!csrfToken) {
-            // Try alternative selectors
-            csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]');
-        }
-        if (!csrfToken) {
-            // Try getting from cookie
-            const cookies = document.cookie.split(';');
-            for (let cookie of cookies) {
-                const [name, value] = cookie.trim().split('=');
-                if (name === 'csrftoken') {
-                    defaultOptions.headers['X-CSRFToken'] = value;
-                    break;
-                }
-            }
-        } else {
-            defaultOptions.headers['X-CSRFToken'] = csrfToken.value;
-        }
+        const config = { ...defaultOptions, ...options };
 
         try {
-            const response = await fetch(url, { ...defaultOptions, ...options });
+            const response = await fetch(url, config);
             
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
@@ -59,86 +40,61 @@ class TasksAPI {
     }
 
     /**
-     * Get queue status
-     * @returns {Promise<Object>} Queue status data
+     * Get CSRF token from DOM
+     * @returns {string} - CSRF token
      */
+    getCSRFToken() {
+        const token = document.querySelector('[name=csrfmiddlewaretoken]');
+        return token ? token.value : '';
+    }
+
+    // Queue endpoints
     async getQueueStatus() {
         return this.request('/queues/status/');
     }
 
-    /**
-     * Get task statistics
-     * @returns {Promise<Object>} Task statistics data
-     */
+    // Task endpoints
     async getTaskStatistics() {
         return this.request('/tasks/stats/');
     }
 
-    /**
-     * Get detailed task list
-     * @param {Object} params - Query parameters (status, queue, search, limit, offset)
-     * @returns {Promise<Object>} Task list
-     */
     async getTaskList(params = {}) {
         const queryString = new URLSearchParams(params).toString();
-        const url = `/tasks/list/${queryString ? '?' + queryString : ''}`;
-        return this.request(url);
+        const endpoint = queryString ? `/tasks/list/?${queryString}` : '/tasks/list/';
+        return this.request(endpoint);
     }
 
-    /**
-     * Start workers
-     * @param {Object} config - Worker configuration
-     * @returns {Promise<Object>} Operation result
-     */
-    async startWorkers(config = {}) {
-        return this.request('/workers/manage/', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'start',
-                ...config
-            })
+    // Worker endpoints
+    async getWorkersList() {
+        return this.request('/workers/list/');
+    }
+
+    // Management endpoints
+    async simulateData() {
+        return this.request('/simulate/', {
+            method: 'POST'
         });
     }
 
-    /**
-     * Stop workers
-     * @returns {Promise<Object>} Operation result
-     */
-    async stopWorkers() {
-        return this.request('/workers/manage/', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'stop'
-            })
+    async clearData() {
+        return this.request('/clear/', {
+            method: 'POST'
         });
     }
 
-    /**
-     * Clear all queues
-     * @returns {Promise<Object>} Operation result
-     */
     async clearQueues() {
-        return this.request('/queues/manage/', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'clear_all'
-            })
+        return this.request('/clear-queues/', {
+            method: 'POST'
         });
     }
 
-    /**
-     * Purge failed tasks
-     * @returns {Promise<Object>} Operation result
-     */
-    async purgeFailedTasks() {
-        return this.request('/queues/manage/', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'purge_failed'
-            })
+    async purgeFailed() {
+        return this.request('/purge-failed/', {
+            method: 'POST'
         });
     }
 }
 
-// Create global API instance
+// Export for use in modules
+window.TasksAPI = TasksAPI;
 window.tasksAPI = new TasksAPI();

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

@@ -0,0 +1,24 @@
+/**
+ * Data Manager - Handles data fetching and caching
+ */
+export class DataManager {
+    constructor(api) {
+        this.api = api;
+        this.cache = new Map();
+    }
+
+    async getData(key, fetcher, ttl = 30000) {
+        const cached = this.cache.get(key);
+        if (cached && Date.now() - cached.timestamp < ttl) {
+            return cached.data;
+        }
+
+        const data = await fetcher();
+        this.cache.set(key, { data, timestamp: Date.now() });
+        return data;
+    }
+
+    clearCache() {
+        this.cache.clear();
+    }
+}

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

@@ -0,0 +1,85 @@
+/**
+ * TabManager - Handles tab switching and navigation
+ */
+export class TabManager {
+    constructor() {
+        this.currentTab = 'overview';
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        // Tab buttons
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const tabId = e.currentTarget.dataset.tab;
+                this.switchTab(tabId);
+            });
+        });
+    }
+
+    /**
+     * Switch to a specific tab
+     * @param {string} tabId - Tab identifier
+     */
+    switchTab(tabId) {
+        // Update active tab styling
+        document.querySelectorAll('.tab-button').forEach(tab => {
+            tab.classList.remove('active', 'border-primary-500', 'text-primary-600', 'dark:text-primary-400');
+            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', 'border-primary-500', 'text-primary-600', 'dark:text-primary-400');
+        }
+
+        // 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;
+        
+        // Trigger tab change event
+        this.onTabChange(tabId);
+    }
+
+    /**
+     * Get current active tab
+     * @returns {string} - Current tab ID
+     */
+    getCurrentTab() {
+        return this.currentTab;
+    }
+
+    /**
+     * Tab change callback - override in dashboard
+     * @param {string} tabId - New tab ID
+     */
+    onTabChange(tabId) {
+        // Override this method in the main dashboard
+        console.log('Tab changed to:', tabId);
+    }
+
+    /**
+     * Update tab badge count
+     * @param {string} tabId - Tab identifier
+     * @param {number} count - Badge count
+     */
+    updateTabBadge(tabId, count) {
+        const badge = document.querySelector(`#${tabId}-count-badge`);
+        if (badge) {
+            badge.textContent = count;
+        }
+    }
+}