Spaces:
Paused
Paused
File size: 10,639 Bytes
4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 3a79c2a 4878797 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | <!DOCTYPE html>
<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> |