Create js/app.js

static/js/app.js

@@ -0,0 +1,447 @@
+// static/js/app.js
+
+document.addEventListener('DOMContentLoaded', () => {
+    // --- STATE ---
+    let migrationState = {};
+    let updateInterval = null;
+    let lastLogId = -1;
+    let confirmAction = null;
+
+    // --- SELECTORS ---
+    const selectors = {
+        // Navigation
+        navLinks: document.querySelectorAll('.nav-link'),
+        pages: document.querySelectorAll('.page'),
+        headerTitle: document.getElementById('header-title'),
+        // Status
+        statusBadge: document.getElementById('status-badge'),
+        statusDot: document.querySelector('#status-badge .status-dot'),
+        statusText: document.querySelector('#status-badge .status-text'),
+        // Dashboard
+        dashboardStatusText: document.getElementById('dashboard-status-text'),
+        dashboardGotoDump: document.getElementById('dashboard-goto-dump'),
+        dashboardGotoRestore: document.getElementById('dashboard-goto-restore'),
+        lastOpSummary: document.getElementById('last-operation-summary'),
+        miniLogFeed: document.getElementById('mini-log-feed'),
+        // Connections
+        sourceConnInput: document.getElementById('source-conn'),
+        targetConnInput: document.getElementById('target-conn'),
+        toggleSourceVisibility: document.getElementById('toggle-source-visibility'),
+        toggleTargetVisibility: document.getElementById('toggle-target-visibility'),
+        testSourceBtn: document.getElementById('test-source-btn'),
+        testTargetBtn: document.getElementById('test-target-btn'),
+        sourceStatusDetails: document.getElementById('source-status-details'),
+        targetStatusDetails: document.getElementById('target-status-details'),
+        // Dump
+        dumpConfigView: document.getElementById('dump-config-view'),
+        dumpProgressView: document.getElementById('dump-progress-view'),
+        startDumpBtn: document.getElementById('start-dump-btn'),
+        stopDumpBtn: document.getElementById('stop-dump-btn'),
+        dumpFormat: document.getElementById('dump-format'),
+        dumpCompression: document.getElementById('dump-compression'),
+        schemaFilter: document.getElementById('schema-filter'),
+        dumpFilename: document.getElementById('dump-filename'),
+        dumpElapsedTime: document.getElementById('dump-elapsed-time'),
+        dumpFileSize: document.getElementById('dump-file-size'),
+        dumpCurrentTable: document.getElementById('dump-current-table'),
+        dumpSizeProgressBar: document.getElementById('dump-size-progress-bar'),
+        dumpSizeProgressText: document.getElementById('dump-size-progress-text'),
+        dumpSizeSubtext: document.getElementById('dump-size-subtext'),
+        dumpCountProgressBar: document.getElementById('dump-count-progress-bar'),
+        dumpCountProgressText: document.getElementById('dump-count-progress-text'),
+        dumpCountSubtext: document.getElementById('dump-count-subtext'),
+        // Restore
+        restoreConfigView: document.getElementById('restore-config-view'),
+        restoreProgressView: document.getElementById('restore-progress-view'),
+        startRestoreBtn: document.getElementById('start-restore-btn'),
+        stopRestoreBtn: document.getElementById('stop-restore-btn'),
+        serverBackupFile: document.getElementById('server-backup-file'),
+        restoreElapsedTime: document.getElementById('restore-elapsed-time'),
+        restoreTablesCompleted: document.getElementById('restore-tables-completed'),
+        restoreCurrentTable: document.getElementById('restore-current-table'),
+        // Logs
+        logOutput: document.getElementById('log-output'),
+        logAutoscrollToggle: document.getElementById('log-autoscroll-toggle'),
+        // Modal
+        confirmModal: document.getElementById('confirm-modal'),
+        confirmModalTitle: document.getElementById('confirm-modal-title'),
+        confirmModalBody: document.getElementById('confirm-modal-body'),
+        closeConfirmModal: document.getElementById('close-confirm-modal'),
+        cancelConfirmBtn: document.getElementById('cancel-confirm-btn'),
+        confirmActionBtn: document.getElementById('confirm-action-btn'),
+    };
+
+    // --- UTILITY FUNCTIONS ---
+    const formatBytes = (bytes, decimals = 2) => {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    };
+
+    const formatDuration = (seconds) => {
+        if (seconds < 0) seconds = 0;
+        const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
+        const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
+        const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+        return `${h}:${m}:${s}`;
+    };
+
+    const showToast = (type, title, message) => {
+        const container = document.getElementById('toast-container');
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        const icons = { success: 'fa-check-circle', error: 'fa-times-circle' };
+        toast.innerHTML = `
+            <i class="fas ${icons[type]} toast-icon"></i>
+            <div class="toast-body">
+                <h4>${title}</h4>
+                <p>${message}</p>
+            </div>
+        `;
+        container.appendChild(toast);
+        setTimeout(() => toast.remove(), 5000);
+    };
+
+    const navigateTo = (targetId) => {
+        selectors.pages.forEach(p => p.classList.remove('active'));
+        document.getElementById(`${targetId}-page`).classList.add('active');
+        selectors.navLinks.forEach(l => l.classList.remove('active'));
+        const activeLink = document.querySelector(`.nav-link[data-target="${targetId}"]`);
+        activeLink.classList.add('active');
+        selectors.headerTitle.textContent = activeLink.querySelector('span').textContent;
+    };
+
+    // --- UI RENDERING ---
+    const renderUI = (state) => {
+        migrationState = state;
+
+        // Global Status Badge
+        if (state.running) {
+            const operationText = state.operation === 'dump' ? 'Dumping' : 'Restoring';
+            selectors.statusBadge.className = 'status-badge running';
+            selectors.statusText.textContent = operationText;
+        } else if (state.dump_completed || state.restore_completed) {
+            selectors.statusBadge.className = 'status-badge success';
+            selectors.statusText.textContent = 'Completed';
+        } else if (state.end_time && !state.dump_completed && !state.restore_completed) {
+            selectors.statusBadge.className = 'status-badge error';
+            selectors.statusText.textContent = 'Failed/Stopped';
+        } else {
+            selectors.statusBadge.className = 'status-badge idle';
+            selectors.statusText.textContent = 'Idle';
+        }
+
+        // Dashboard
+        renderDashboard(state);
+
+        // Dump Page
+        if (state.operation === 'dump') {
+            selectors.dumpConfigView.classList.toggle('hidden', state.running);
+            selectors.dumpProgressView.classList.toggle('hidden', !state.running);
+            if (state.running) {
+                renderDumpProgress(state);
+            }
+        } else { // If not dumping, show config
+            selectors.dumpConfigView.classList.remove('hidden');
+            selectors.dumpProgressView.classList.add('hidden');
+        }
+
+        // Restore Page
+        if (state.operation === 'restore') {
+            selectors.restoreConfigView.classList.toggle('hidden', state.running);
+            selectors.restoreProgressView.classList.toggle('hidden', !state.running);
+            if(state.running) {
+                renderRestoreProgress(state);
+            }
+        } else {
+            selectors.restoreConfigView.classList.remove('hidden');
+            selectors.restoreProgressView.classList.add('hidden');
+        }
+
+        // Logs
+        renderLogs(state.log);
+    };
+
+    const renderDashboard = (state) => {
+        if (state.running) {
+            const opText = state.operation === 'dump' ? 'A database dump' : 'A database restore';
+            selectors.dashboardStatusText.textContent = `${opText} is currently in progress.`;
+        } else {
+            selectors.dashboardStatusText.textContent = 'The system is currently idle and ready for a new operation.';
+        }
+
+        if (state.end_time) {
+            const success = state.dump_completed || state.restore_completed;
+            const duration = formatDuration(state.end_time - state.start_time);
+            const op = state.operation === 'dump' ? 'Dump' : 'Restore';
+            selectors.lastOpSummary.innerHTML = `
+                <p class="op-status ${success ? 'success' : 'error'}">
+                    <i class="fas ${success ? 'fa-check-circle' : 'fa-times-circle'}"></i>
+                    ${op} ${success ? 'Completed' : 'Failed/Stopped'}
+                </p>
+                <div class="op-details">
+                    <span>Duration:</span><strong>${duration}</strong>
+                    ${state.operation === 'dump' ? `<span>File Size:</span><strong>${formatBytes(state.dump_file_size * 1024 * 1024)}</strong>` : ''}
+                </div>
+            `;
+        } else {
+             selectors.lastOpSummary.innerHTML = `<p class="text-muted">No operations have been run yet.</p>`;
+        }
+    };
+
+    const renderDumpProgress = (state) => {
+        const elapsed = state.start_time ? (Date.now() / 1000) - state.start_time : 0;
+        selectors.dumpElapsedTime.textContent = formatDuration(elapsed);
+        selectors.dumpFileSize.textContent = formatBytes(state.dump_file_size * 1024 * 1024);
+        selectors.dumpCurrentTable.textContent = state.progress.current_table || '-';
+
+        const { progress } = state;
+        selectors.dumpSizeProgressBar.style.width = `${progress.percent_complete_by_size}%`;
+        selectors.dumpSizeProgressText.textContent = `${progress.percent_complete_by_size.toFixed(2)}%`;
+        selectors.dumpSizeSubtext.textContent = `${formatBytes(progress.size_processed_bytes)} / ${formatBytes(progress.total_size_bytes)}`;
+
+        selectors.dumpCountProgressBar.style.width = `${progress.percent_complete_by_count}%`;
+        selectors.dumpCountProgressText.textContent = `${progress.percent_complete_by_count.toFixed(2)}%`;
+        selectors.dumpCountSubtext.textContent = `${progress.chunks_processed} / ${progress.total_chunks} Chunks`;
+    };
+
+    const renderRestoreProgress = (state) => {
+        const elapsed = state.start_time ? (Date.now() / 1000) - state.start_time : 0;
+        selectors.restoreElapsedTime.textContent = formatDuration(elapsed);
+        selectors.restoreTablesCompleted.textContent = state.progress.tables_completed;
+        selectors.restoreCurrentTable.textContent = state.progress.current_table || '-';
+    };
+
+    const renderLogs = (logs) => {
+        const newLogs = logs.filter(log => log.id > lastLogId);
+        if (newLogs.length > 0) {
+            const fragment = document.createDocumentFragment();
+            newLogs.forEach(log => {
+                const entry = document.createElement('div');
+                entry.className = 'log-entry';
+                entry.innerHTML = `
+                    <span class="timestamp">${log.timestamp}</span>
+                    <span class="level level-${log.level}">${log.level.toUpperCase()}</span>
+                    <span class="message">${log.message}</span>
+                `;
+                fragment.appendChild(entry);
+            });
+            selectors.logOutput.appendChild(fragment);
+            lastLogId = newLogs[newLogs.length - 1].id;
+
+            if (selectors.logAutoscrollToggle.checked) {
+                selectors.logOutput.scrollTop = selectors.logOutput.scrollHeight;
+            }
+        }
+        // Update mini log feed on dashboard
+        const recentLogs = logs.slice(-5).reverse();
+        selectors.miniLogFeed.innerHTML = recentLogs.map(log => `
+            <div class="mini-log-entry">
+                <span class="timestamp">${log.timestamp.split(' ')[1]}</span>
+                <span class="level level-${log.level}">${log.level.toUpperCase()}</span>
+                <span class="message">${log.message}</span>
+            </div>
+        `).join('');
+    };
+
+    // --- API CALLS ---
+    const updateStatus = async () => {
+        try {
+            const response = await fetch('/status');
+            if (!response.ok) throw new Error('Network response was not ok');
+            const state = await response.json();
+            renderUI(state);
+            // If process is finished, stop polling
+            if (!state.running && updateInterval) {
+                clearInterval(updateInterval);
+                updateInterval = null;
+            }
+        } catch (error) {
+            console.error('Failed to fetch status:', error);
+            if (updateInterval) {
+                clearInterval(updateInterval);
+                updateInterval = null;
+            }
+            // You might want to show a "disconnected" message here
+        }
+    };
+
+    const startPolling = () => {
+        if (!updateInterval) {
+            updateStatus(); // Initial call
+            updateInterval = setInterval(updateStatus, 1500);
+        }
+    };
+
+    const testConnection = async (connString, detailsElement) => {
+        detailsElement.innerHTML = `<p><i class="fas fa-spinner fa-spin"></i> Testing connection...</p>`;
+        try {
+            const response = await fetch('/test-connection', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ connection_string: connString }),
+            });
+            const data = await response.json();
+            if (data.success) {
+                detailsElement.innerHTML = `
+                    <p class="success"><i class="fas fa-check-circle"></i> Connection successful!</p>
+                    <p><strong>DB:</strong> ${data.database}</p>
+                    <p><strong>Version:</strong> ${data.is_timescaledb ? `TimescaleDB ${data.timescaledb_version}` : 'PostgreSQL'}</p>
+                `;
+            } else {
+                detailsElement.innerHTML = `<p class="error"><i class="fas fa-times-circle"></i> ${data.message}</p>`;
+            }
+        } catch (error) {
+            detailsElement.innerHTML = `<p class="error"><i class="fas fa-exclamation-triangle"></i> Request failed. Is the server running?</p>`;
+        }
+    };
+
+    const loadServerBackups = async () => {
+        try {
+            const response = await fetch('/list-dumps');
+            const data = await response.json();
+            selectors.serverBackupFile.innerHTML = '';
+            if (data.dumps && data.dumps.length > 0) {
+                data.dumps.forEach(d => {
+                    const option = document.createElement('option');
+                    option.value = d.path;
+                    option.textContent = `${d.name} (${d.size_mb.toFixed(2)} MB)`;
+                    selectors.serverBackupFile.appendChild(option);
+                });
+            } else {
+                selectors.serverBackupFile.innerHTML = '<option value="" disabled>No backups found</option>';
+            }
+        } catch (error) {
+            console.error('Failed to load backups:', error);
+            selectors.serverBackupFile.innerHTML = '<option value="" disabled>Error loading backups</option>';
+        }
+    };
+
+    // --- EVENT LISTENERS ---
+    selectors.navLinks.forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            navigateTo(link.dataset.target);
+        });
+    });
+
+    selectors.dashboardGotoDump.addEventListener('click', () => navigateTo('dump'));
+    selectors.dashboardGotoRestore.addEventListener('click', () => navigateTo('restore'));
+
+    selectors.toggleSourceVisibility.addEventListener('click', () => {
+        const input = selectors.sourceConnInput;
+        input.type = input.type === 'password' ? 'text' : 'password';
+    });
+    selectors.toggleTargetVisibility.addEventListener('click', () => {
+        const input = selectors.targetConnInput;
+        input.type = input.type === 'password' ? 'text' : 'password';
+    });
+    
+    selectors.testSourceBtn.addEventListener('click', () => testConnection(selectors.sourceConnInput.value, selectors.sourceStatusDetails));
+    selectors.testTargetBtn.addEventListener('click', () => testConnection(selectors.targetConnInput.value, selectors.targetStatusDetails));
+
+    selectors.startDumpBtn.addEventListener('click', async () => {
+        if (!selectors.sourceConnInput.value) {
+            return showToast('error', 'Missing Input', 'Source connection string is required.');
+        }
+        try {
+            const response = await fetch('/start-dump', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    source_conn: selectors.sourceConnInput.value,
+                    options: {
+                        format: selectors.dumpFormat.value,
+                        compression: selectors.dumpCompression.value,
+                        schema: selectors.schemaFilter.value,
+                        filename: selectors.dumpFilename.value,
+                    }
+                })
+            });
+            const data = await response.json();
+            if (data.success) {
+                showToast('success', 'Dump Started', 'The database dump is now in progress.');
+                startPolling();
+            } else {
+                showToast('error', 'Failed to Start', data.detail || 'An unknown error occurred.');
+            }
+        } catch (error) {
+            showToast('error', 'Request Failed', 'Could not start the dump process.');
+        }
+    });
+
+    selectors.startRestoreBtn.addEventListener('click', async () => {
+        if (!selectors.targetConnInput.value || !selectors.serverBackupFile.value) {
+            return showToast('error', 'Missing Input', 'Target connection and a backup file are required.');
+        }
+        try {
+            const response = await fetch('/start-restore', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    target_conn: selectors.targetConnInput.value,
+                    dump_file: selectors.serverBackupFile.value,
+                    options: {
+                        timescaledb_pre_restore: document.getElementById('timescaledb-pre-restore').checked,
+                        timescaledb_post_restore: document.getElementById('timescaledb-post-restore').checked,
+                        no_owner: document.getElementById('no-owner').checked,
+                        clean: document.getElementById('clean').checked,
+                    }
+                })
+            });
+            const data = await response.json();
+            if (data.success) {
+                showToast('success', 'Restore Started', 'The database restore is now in progress.');
+                startPolling();
+            } else {
+                showToast('error', 'Failed to Start', data.detail || 'An unknown error occurred.');
+            }
+        } catch (error) {
+            showToast('error', 'Request Failed', 'Could not start the restore process.');
+        }
+    });
+
+    const openConfirmModal = (action, title, body) => {
+        confirmAction = action;
+        selectors.confirmModalTitle.textContent = title;
+        selectors.confirmModalBody.textContent = body;
+        selectors.confirmModal.classList.remove('hidden');
+    };
+
+    const stopProcess = async () => {
+        try {
+            await fetch('/stop-process', { method: 'POST' });
+            showToast('success', 'Stop Initiated', 'Attempting to stop the current operation.');
+            // Polling will handle the UI update once the process is confirmed stopped.
+        } catch (error) {
+            showToast('error', 'Request Failed', 'Could not send stop command.');
+        }
+    };
+
+    selectors.stopDumpBtn.addEventListener('click', () => {
+        openConfirmModal('stop', 'Stop Dump?', 'Are you sure you want to stop the dump? The backup file will be incomplete.');
+    });
+    selectors.stopRestoreBtn.addEventListener('click', () => {
+        openConfirmModal('stop', 'Stop Restore?', 'Are you sure? Stopping a restore may leave the target database in an inconsistent state.');
+    });
+    
+    selectors.closeConfirmModal.addEventListener('click', () => selectors.confirmModal.classList.add('hidden'));
+    selectors.cancelConfirmBtn.addEventListener('click', () => selectors.confirmModal.classList.add('hidden'));
+    selectors.confirmActionBtn.addEventListener('click', () => {
+        if (confirmAction === 'stop') {
+            stopProcess();
+        }
+        selectors.confirmModal.classList.add('hidden');
+    });
+
+    // --- INITIALIZATION ---
+    const initialize = () => {
+        startPolling();
+        loadServerBackups();
+    };
+
+    initialize();
+});