Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TimescaleDB Migrator</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <!-- Stylesheet --> | |
| <link rel="stylesheet" href="/static/css/app.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Sidebar Navigation --> | |
| <nav class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <i class="fas fa-database"></i> | |
| <span class="sidebar-title">Migrator</span> | |
| </div> | |
| <ul class="sidebar-nav"> | |
| <li><a href="#" class="nav-link active" data-target="connections"><i class="fas fa-plug"></i><span>Connections</span></a></li> | |
| <li><a href="#" class="nav-link" data-target="dump"><i class="fas fa-download"></i><span>Dump</span></a></li> | |
| <li><a href="#" class="nav-link" data-target="restore"><i class="fas fa-upload"></i><span>Restore</span></a></li> | |
| <li><a href="#" class="nav-link" data-target="logs"><i class="fas fa-scroll"></i><span>Logs</span></a></li> | |
| </ul> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <header class="main-header"> | |
| <button class="menu-toggle" id="menu-toggle"><i class="fas fa-bars"></i></button> | |
| <h1 id="header-title">Connections</h1> | |
| <div id="status-badge" class="status-badge idle"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Idle</span> | |
| </div> | |
| </header> | |
| <div class="page-content"> | |
| <!-- Connections Page --> | |
| <section id="connections-page" class="page active"> | |
| <div class="grid-container"> | |
| <div class="card"> | |
| <h3><i class="fas fa-server"></i> Source Database</h3> | |
| <div class="form-group"> | |
| <label for="source-conn">Connection String</label> | |
| <input type="password" id="source-conn" class="form-control" placeholder="postgresql://user:pass@host:5432/db"> | |
| </div> | |
| <button id="test-source-btn" class="btn btn-primary"><i class="fas fa-plug"></i> Test Connection</button> | |
| <div class="connection-status-card" id="source-status-card"> | |
| <p class="text-muted">Test connection to see details.</p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3><i class="fas fa-cloud-upload-alt"></i> Target Database</h3> | |
| <div class="form-group"> | |
| <label for="target-conn">Connection String</label> | |
| <input type="password" id="target-conn" class="form-control" placeholder="postgresql://user:pass@host:5432/db"> | |
| </div> | |
| <button id="test-target-btn" class="btn btn-primary"><i class="fas fa-plug"></i> Test Connection</button> | |
| <div class="connection-status-card" id="target-status-card"> | |
| <p class="text-muted">Test connection to see details.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dump Page --> | |
| <section id="dump-page" class="page"> | |
| <div id="dump-config-view"> | |
| <div class="card"> | |
| <h3><i class="fas fa-cog"></i> Dump Settings</h3> | |
| <div class="grid-container"> | |
| <div class="form-group"> | |
| <label for="dump-format">Format</label> | |
| <select id="dump-format" class="form-control"><option value="c" selected>Custom</option><option value="d">Directory</option></select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="dump-compression">Compression</label> | |
| <select id="dump-compression" class="form-control"><option value="default" selected>Default</option><option value="0">0</option><option value="9">9</option></select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="schema-filter">Schema (Optional)</label> | |
| <input type="text" id="schema-filter" class="form-control" placeholder="public"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="dump-filename">Filename</label> | |
| <input type="text" id="dump-filename" class="form-control" value="timescale_backup"> | |
| </div> | |
| </div> | |
| <div class="command-preview" id="dump-command-preview"></div> | |
| <div class="form-actions"> | |
| <button id="start-dump-btn" class="btn btn-primary btn-lg"><i class="fas fa-play"></i> Start Dump</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="dump-monitoring-view" class="hidden"></div> | |
| </section> | |
| <!-- Restore Page --> | |
| <section id="restore-page" class="page"> | |
| <div id="restore-config-view"> | |
| <div class="card"> | |
| <h3><i class="fas fa-cog"></i> Restore Settings</h3> | |
| <div class="form-group"> | |
| <label for="server-backup-file">Select Backup File</label> | |
| <select id="server-backup-file" class="form-control"><option value="">-- Loading... --</option></select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Options</label> | |
| <div class="checkbox-group"> | |
| <label><input type="checkbox" id="timescaledb-pre-restore" checked> Run pre-restore</label> | |
| <label><input type="checkbox" id="timescaledb-post-restore" checked> Run post-restore & ANALYZE</label> | |
| <label><input type="checkbox" id="no-owner" checked> Ignore ownership</label> | |
| <label><input type="checkbox" id="clean"> Clean (drop) objects</label> | |
| </div> | |
| </div> | |
| <div class="command-preview" id="restore-command-preview"></div> | |
| <div class="form-actions"> | |
| <button id="start-restore-btn" class="btn btn-primary btn-lg"><i class="fas fa-play"></i> Start Restore</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="restore-monitoring-view" class="hidden"></div> | |
| </section> | |
| <!-- Logs Page --> | |
| <section id="logs-page" class="page"> | |
| <div class="card log-explorer"> | |
| <div class="log-header"> | |
| <h3><i class="fas fa-scroll"></i> Log Explorer</h3> | |
| <div class="log-controls"> | |
| <input type="text" id="log-search" class="form-control" placeholder="Search logs..."> | |
| <div class="btn-group" id="log-level-filters"> | |
| <button class="btn btn-sm active" data-level="all">All</button> | |
| <button class="btn btn-sm" data-level="info">Info</button> | |
| <button class="btn btn-sm" data-level="success">Success</button> | |
| <button class="btn btn-sm" data-level="warning">Warning</button> | |
| <button class="btn btn-sm" data-level="error">Error</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="log-output" id="log-output"></div> | |
| <div class="log-footer"> | |
| <div class="autoscroll-toggle"> | |
| <input type="checkbox" id="log-autoscroll-toggle" checked> | |
| <label for="log-autoscroll-toggle">Auto-Scroll</label> | |
| </div> | |
| <div class="log-actions"> | |
| <button id="export-logs-btn" class="btn btn-secondary"><i class="fas fa-file-export"></i> Export</button> | |
| <button id="clear-logs-btn" class="btn btn-danger"><i class="fas fa-trash"></i> Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Confirmation Modal --> | |
| <div id="confirm-modal" class="modal-backdrop hidden"> | |
| <div class="modal"> | |
| <div class="modal-header"><h3 id="confirm-modal-title"></h3></div> | |
| <div class="modal-body"><p id="confirm-modal-body"></p></div> | |
| <div class="modal-footer"> | |
| <button id="cancel-confirm-btn" class="btn btn-secondary">Cancel</button> | |
| <button id="confirm-action-btn" class="btn btn-danger">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notification Container --> | |
| <div id="toast-container"></div> | |
| <!-- JavaScript --> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> |