supervaizer 0.9.6__py3-none-any.whl

supervaizer/admin/templates/console.html

@@ -0,0 +1,389 @@
+{% extends "base.html" %}
+
+{% block title %}Console - Supervaizer Admin{% endblock %}
+
+{% block content %}
+<div class="px-4 py-6 sm:px-0">
+    <!-- Header -->
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+                Console
+            </h2>
+            <p class="mt-1 text-sm text-gray-500">Interactive command interface and system logs</p>
+        </div>
+        <div class="mt-4 flex md:mt-0 space-x-3">
+            <button
+                onclick="clearConsole()"
+                class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+            >
+                Clear
+            </button>
+            <button
+                onclick="toggleAutoScroll()"
+                id="autoscroll-btn"
+                class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
+            >
+                Auto-scroll: ON
+            </button>
+        </div>
+    </div>
+
+    <!-- Console Interface -->
+    <div class="mt-6 space-y-6">
+        <!-- Command Input -->
+        <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+                <h3 class="text-lg leading-6 font-medium text-gray-900">Command Interface</h3>
+            </div>
+            <div class="px-6 py-4">
+                <div class="flex space-x-4">
+                    <input
+                        type="text"
+                        id="command-input"
+                        placeholder="Enter command..."
+                        class="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono"
+                        onkeypress="handleCommandKeypress(event)"
+                    >
+                    <button
+                        onclick="executeCommand()"
+                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"
+                    >
+                        Execute
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Live Log Stream -->
+        <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+                <h3 class="text-lg leading-6 font-medium text-gray-900">Live Server Logs</h3>
+                <div class="mt-1 flex items-center space-x-4 text-sm text-gray-500">
+                    <span id="connection-status" class="flex items-center">
+                        <span class="w-2 h-2 bg-gray-400 rounded-full mr-2"></span>
+                        Connecting...
+                    </span>
+                    <span>Auto-scroll: <span id="autoscroll-status">ON</span></span>
+                </div>
+            </div>
+            <div class="px-6 py-4">
+                <div
+                    id="console-output"
+                    class="bg-gray-900 rounded-lg p-4 font-mono text-sm text-green-300 h-96 overflow-y-auto"
+                >
+                    <div id="console-lines" class="space-y-1">
+                        <div class="flex space-x-2">
+                            <span class="text-gray-500">[--:--:--]</span>
+                            <span class="text-blue-400 font-semibold">SYSTEM</span>
+                            <span>Connecting to live log stream...</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    let autoScroll = true;
+    let eventSource = null;
+    let reconnectTimeout = null;
+    let lineCount = 0;
+    let maxLines = 1000; // Limit console lines for performance
+
+    // Initialize console on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        connectToLogStream();
+    });
+
+    function connectToLogStream() {
+        if (eventSource) {
+            eventSource.close();
+        }
+
+        updateConnectionStatus('connecting');
+
+        // Connect to the log stream endpoint with console token
+        const consoleToken = '{{ console_token }}';
+        const cacheBuster = Date.now();
+
+        // Better validation and error handling
+        if (!consoleToken || consoleToken === 'undefined' || consoleToken === '') {
+            addLogMessage('ERROR', 'No console token available. Please refresh the page.', 'red');
+            updateConnectionStatus('error');
+            return;
+        }
+
+        const streamUrl = `/admin/log-stream?token=${encodeURIComponent(consoleToken)}&_t=${cacheBuster}`;
+
+        try {
+            eventSource = new EventSource(streamUrl);
+
+            eventSource.onopen = function(event) {
+                updateConnectionStatus('connected');
+                addLogMessage('SYSTEM', 'Connected to live log stream', 'blue');
+            };
+
+            eventSource.onmessage = function(event) {
+                try {
+                    // Handle different event data formats
+                    let logData;
+                    if (event.data.startsWith('data: ')) {
+                        // Remove "data: " prefix if present
+                        logData = JSON.parse(event.data.substring(6));
+                    } else {
+                        logData = JSON.parse(event.data);
+                    }
+
+                    if (logData && logData.level && logData.message) {
+                        addLogMessage(logData.level, logData.message, getLevelColor(logData.level), logData.timestamp);
+                    } else {
+                        addLogMessage('WARNING', 'Received invalid log data format', 'yellow');
+                    }
+                } catch (e) {
+                    addLogMessage('ERROR', `Parse error: ${e.message}`, 'red');
+                }
+            };
+
+            eventSource.onerror = function(event) {
+                updateConnectionStatus('error');
+
+                // More specific error handling
+                if (eventSource.readyState === EventSource.CLOSED) {
+                    addLogMessage('ERROR', 'Connection to log stream closed by server', 'red');
+                } else if (eventSource.readyState === EventSource.CONNECTING) {
+                    addLogMessage('WARNING', 'Attempting to reconnect to log stream...', 'yellow');
+                } else {
+                    addLogMessage('ERROR', 'Unknown log stream error occurred', 'red');
+                }
+
+                // Reconnect after 5 seconds
+                clearTimeout(reconnectTimeout);
+                reconnectTimeout = setTimeout(() => {
+                    addLogMessage('INFO', 'Attempting to reconnect...', 'blue');
+                    connectToLogStream();
+                }, 5000);
+            };
+        } catch (e) {
+            addLogMessage('ERROR', `Failed to create connection: ${e.message}`, 'red');
+            updateConnectionStatus('error');
+        }
+    }
+
+    function updateConnectionStatus(status) {
+        const statusElement = document.getElementById('connection-status');
+        if (!statusElement) return;
+
+        const statusIndicator = statusElement.querySelector('.w-2.h-2');
+        const statusText = statusElement.querySelector('span:last-child');
+
+        if (!statusIndicator || !statusText) return;
+
+        switch (status) {
+            case 'connecting':
+                statusIndicator.className = 'w-2 h-2 bg-yellow-400 rounded-full mr-2 animate-pulse';
+                statusText.textContent = 'Connecting...';
+                break;
+            case 'connected':
+                statusIndicator.className = 'w-2 h-2 bg-green-400 rounded-full mr-2';
+                statusText.textContent = 'Connected';
+                break;
+            case 'error':
+                statusIndicator.className = 'w-2 h-2 bg-red-400 rounded-full mr-2 animate-pulse';
+                statusText.textContent = 'Disconnected';
+                break;
+        }
+    }
+
+    function getLevelColor(level) {
+        const levelColors = {
+            'TRACE': 'purple',
+            'DEBUG': 'gray',
+            'INFO': 'blue',
+            'SUCCESS': 'green',
+            'WARNING': 'yellow',
+            'ERROR': 'red',
+            'CRITICAL': 'red'
+        };
+        return levelColors[level] || 'green';
+    }
+
+    function addLogMessage(level, message, color = 'green', timestamp = null) {
+        const lines = document.getElementById('console-lines');
+        if (!lines) return;
+
+        // Parse timestamp or use current time
+        let timeStr;
+        if (timestamp) {
+            try {
+                const date = new Date(timestamp);
+                timeStr = date.toLocaleTimeString();
+            } catch (e) {
+                timeStr = new Date().toLocaleTimeString();
+            }
+        } else {
+            timeStr = new Date().toLocaleTimeString();
+        }
+
+        const colorMap = {
+            'red': 'text-red-400',
+            'green': 'text-green-300',
+            'blue': 'text-blue-400',
+            'yellow': 'text-yellow-400',
+            'cyan': 'text-cyan-400',
+            'purple': 'text-purple-400',
+            'gray': 'text-gray-400'
+        };
+
+        const div = document.createElement('div');
+        div.className = 'flex space-x-2 text-xs leading-relaxed';
+        div.innerHTML = `
+            <span class="text-gray-500 flex-shrink-0">[${timeStr}]</span>
+            <span class="font-semibold min-w-[60px] flex-shrink-0 ${colorMap[color] || 'text-green-300'}">${level}</span>
+            <span class="${colorMap[color] || 'text-green-300'} break-words">${escapeHtml(message)}</span>
+        `;
+
+        lines.appendChild(div);
+        lineCount++;
+
+        // Limit lines for performance
+        if (lineCount > maxLines) {
+            const firstChild = lines.firstElementChild;
+            if (firstChild) {
+                lines.removeChild(firstChild);
+                lineCount--;
+            }
+        }
+
+        if (autoScroll) {
+            const output = document.getElementById('console-output');
+            if (output) {
+                output.scrollTop = output.scrollHeight;
+            }
+        }
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    function handleCommandKeypress(event) {
+        if (event.key === 'Enter') {
+            executeCommand();
+        }
+    }
+
+    function executeCommand() {
+        const input = document.getElementById('command-input');
+        if (!input) return;
+
+        const command = input.value.trim();
+
+        if (!command) return;
+
+        // Show command in console
+        addLogMessage('USER', `$ ${command}`, 'cyan');
+
+        // Process command
+        processCommand(command);
+
+        // Clear input
+        input.value = '';
+    }
+
+    function processCommand(command) {
+        const cmd = command.toLowerCase();
+
+        // Handle local-only commands
+        if (cmd === 'clear') {
+            clearConsole();
+            return;
+        }
+
+        if (cmd === 'reconnect') {
+            addLogMessage('INFO', 'Reconnecting to log stream...', 'blue');
+            connectToLogStream();
+            return;
+        }
+
+        // Send command to server for processing and live console display
+        sendCommandToServer(command);
+    }
+
+    async function sendCommandToServer(command) {
+        const consoleToken = '{{ console_token }}';
+
+        if (!consoleToken || consoleToken === 'undefined' || consoleToken === '') {
+            addLogMessage('ERROR', 'No console token available. Cannot execute command.', 'red');
+            return;
+        }
+
+        try {
+            const response = await fetch(`/admin/api/console/execute?token=${encodeURIComponent(consoleToken)}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    command: command
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+
+            if (result.status === 'error') {
+                addLogMessage('ERROR', `Command failed: ${result.message}`, 'red');
+            }
+            // Success messages are handled by the log stream
+
+        } catch (error) {
+            addLogMessage('ERROR', `Failed to execute command: ${error.message}`, 'red');
+        }
+    }
+
+    function clearConsole() {
+        const lines = document.getElementById('console-lines');
+        if (lines) {
+            lines.innerHTML = '';
+            lineCount = 0;
+            addLogMessage('SYSTEM', 'Console cleared.', 'blue');
+        }
+    }
+
+    function toggleAutoScroll() {
+        autoScroll = !autoScroll;
+        const btn = document.getElementById('autoscroll-btn');
+        const status = document.getElementById('autoscroll-status');
+
+        if (btn && status) {
+            const newText = autoScroll ? 'Auto-scroll: ON' : 'Auto-scroll: OFF';
+            btn.textContent = newText;
+            status.textContent = autoScroll ? 'ON' : 'OFF';
+        }
+
+        if (autoScroll) {
+            const output = document.getElementById('console-output');
+            if (output) {
+                output.scrollTop = output.scrollHeight;
+            }
+        }
+    }
+
+    // Clean up on page unload
+    window.addEventListener('beforeunload', function() {
+        if (eventSource) {
+            eventSource.close();
+        }
+        if (reconnectTimeout) {
+            clearTimeout(reconnectTimeout);
+        }
+    });
+</script>
+{% endblock %}

supervaizer/admin/templates/dashboard.html

@@ -0,0 +1,153 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Supervaizer Admin{% endblock %}
+
+{% block content %}
+<div class="px-4 py-6 sm:px-0">
+    <!-- Header -->
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+                Dashboard
+            </h2>
+        </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-3">
+        <!-- Jobs Stats -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center">
+                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Total Jobs</dt>
+                            <dd class="text-lg font-medium text-gray-900">{{ stats.jobs.total }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-50 px-5 py-3">
+                <div class="text-sm">
+                    <a href="/admin/jobs" class="font-medium text-blue-700 hover:text-blue-900">
+                        View all jobs
+                    </a>
+                </div>
+                <div class="mt-1 text-xs text-gray-500">
+                    Running: {{ stats.jobs.running }} | Completed: {{ stats.jobs.completed }} | Failed: {{ stats.jobs.failed }}
+                </div>
+            </div>
+        </div>
+
+        <!-- Cases Stats -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center">
+                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Total Cases</dt>
+                            <dd class="text-lg font-medium text-gray-900">{{ stats.cases.total }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-50 px-5 py-3">
+                <div class="text-sm">
+                    <a href="/admin/cases" class="font-medium text-green-700 hover:text-green-900">
+                        View all cases
+                    </a>
+                </div>
+                <div class="mt-1 text-xs text-gray-500">
+                    Running: {{ stats.cases.running }} | Completed: {{ stats.cases.completed }} | Failed: {{ stats.cases.failed }}
+                </div>
+            </div>
+        </div>
+
+        <!-- System Stats -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="w-8 h-8 bg-purple-500 rounded-md flex items-center justify-center">
+                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path>
+                                <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V9a1 1 0 00-1-1h-1v-1z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">System Status</dt>
+                            <dd class="text-lg font-medium text-gray-900">{{ system_status }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-50 px-5 py-3">
+                <div class="text-sm">
+                    <span class="font-medium text-purple-700">Persistent Storage: {{ data_storage_path }}</span>
+                </div>
+                <div class="mt-1 text-xs text-gray-500">
+                    Database: {{ db_name }} | Collections: {{ stats.collections }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Activity -->
+    <div class="mt-8">
+        <div class="md:flex md:items-center md:justify-between">
+            <div class="min-w-0 flex-1">
+                <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Activity</h3>
+            </div>
+            <div class="mt-4 flex md:mt-0">
+                <button
+                    hx-get="/admin/api/recent-activity"
+                    hx-target="#recent-activity-content"
+                    hx-indicator="#refresh-indicator"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                >
+                    <svg id="refresh-indicator" class="htmx-indicator -ml-1 mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Refresh
+                </button>
+            </div>
+        </div>
+
+        <div id="recent-activity-content" class="mt-6 bg-white shadow overflow-hidden rounded-md">
+            <div class="px-4 py-5 sm:p-6">
+                <div class="text-center">
+                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                    </svg>
+                    <h3 class="mt-2 text-sm font-medium text-gray-900">Loading recent activity...</h3>
+                    <p class="mt-1 text-sm text-gray-500">This will show the latest entity updates.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Auto-load recent activity on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        htmx.trigger('#recent-activity-content', 'refresh');
+    });
+</script>
+{% endblock %}