Hugging Face's logo

Spaces:
arcticaurora
/
Migrate2
Sleeping

App Files Community
arcticaurora commited on
Commit
3a79c2a
·
verified ·
1 Parent(s): df31cca

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +59 -154
templates/index.html CHANGED
@@ -16,14 +16,13 @@
16
  <body>
17
  <div class="app-container">
18
  <!-- Sidebar Navigation -->
19
- <nav class="sidebar">
20
  <div class="sidebar-header">
21
  <i class="fas fa-database"></i>
22
- <span>Migrator</span>
23
  </div>
24
  <ul class="sidebar-nav">
25
- <li><a href="#" class="nav-link active" data-target="dashboard"><i class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li>
26
- <li><a href="#" class="nav-link" data-target="connections"><i class="fas fa-plug"></i><span>Connections</span></a></li>
27
  <li><a href="#" class="nav-link" data-target="dump"><i class="fas fa-download"></i><span>Dump</span></a></li>
28
  <li><a href="#" class="nav-link" data-target="restore"><i class="fas fa-upload"></i><span>Restore</span></a></li>
29
  <li><a href="#" class="nav-link" data-target="logs"><i class="fas fa-scroll"></i><span>Logs</span></a></li>
@@ -33,96 +32,56 @@
33
  <!-- Main Content -->
34
  <main class="main-content">
35
  <header class="main-header">
36
- <h1 id="header-title">Dashboard</h1>
 
37
  <div id="status-badge" class="status-badge idle">
38
  <span class="status-dot"></span>
39
  <span class="status-text">Idle</span>
40
  </div>
41
  </header>
42
 
43
- <!-- Page Content Area -->
44
  <div class="page-content">
45
- <!-- Dashboard Page -->
46
- <section id="dashboard-page" class="page active">
47
- <div class="dashboard-grid">
48
- <div class="dashboard-card status-highlight">
49
- <h4>Current Status</h4>
50
- <p id="dashboard-status-text">The system is currently idle and ready for a new operation.</p>
51
- <div class="quick-actions">
52
- <button id="dashboard-goto-dump" class="btn btn-primary"><i class="fas fa-download"></i> Start New Dump</button>
53
- <button id="dashboard-goto-restore" class="btn btn-secondary"><i class="fas fa-upload"></i> Start New Restore</button>
54
- </div>
55
- </div>
56
- <div class="dashboard-card">
57
- <h4>Last Operation</h4>
58
- <div id="last-operation-summary">
59
- <p class="text-muted">No operations have been run yet.</p>
60
- </div>
61
- </div>
62
- <div class="dashboard-card full-width">
63
- <h4>Recent Activity</h4>
64
- <div id="mini-log-feed" class="mini-log-feed">
65
- <!-- Mini logs will be inserted here by JS -->
66
- </div>
67
- </div>
68
- </div>
69
- </section>
70
-
71
  <!-- Connections Page -->
72
- <section id="connections-page" class="page">
73
- <div class="connection-grid">
74
- <!-- Source DB -->
75
- <div class="form-card">
76
  <h3><i class="fas fa-server"></i> Source Database</h3>
77
  <div class="form-group">
78
  <label for="source-conn">Connection String</label>
79
- <div class="input-group">
80
- <input type="password" id="source-conn" class="form-control" placeholder="postgresql://user:pass@host:5432/db">
81
- <button class="btn-icon" id="toggle-source-visibility" title="Toggle visibility"><i class="fas fa-eye-slash"></i></button>
82
- </div>
83
  </div>
84
  <button id="test-source-btn" class="btn btn-primary"><i class="fas fa-plug"></i> Test Connection</button>
85
- <div id="source-status-details" class="connection-details"></div>
 
 
86
  </div>
87
- <!-- Target DB -->
88
- <div class="form-card">
89
  <h3><i class="fas fa-cloud-upload-alt"></i> Target Database</h3>
90
  <div class="form-group">
91
  <label for="target-conn">Connection String</label>
92
- <div class="input-group">
93
- <input type="password" id="target-conn" class="form-control" placeholder="postgresql://user:pass@host:5432/db">
94
- <button class="btn-icon" id="toggle-target-visibility" title="Toggle visibility"><i class="fas fa-eye-slash"></i></button>
95
- </div>
96
  </div>
97
  <button id="test-target-btn" class="btn btn-primary"><i class="fas fa-plug"></i> Test Connection</button>
98
- <div id="target-status-details" class="connection-details"></div>
 
 
99
  </div>
100
  </div>
101
  </section>
102
 
103
  <!-- Dump Page -->
104
  <section id="dump-page" class="page">
105
- <!-- Dump Configuration View -->
106
  <div id="dump-config-view">
107
- <div class="form-card">
108
  <h3><i class="fas fa-cog"></i> Dump Settings</h3>
109
- <div class="form-grid">
110
  <div class="form-group">
111
  <label for="dump-format">Format</label>
112
- <select id="dump-format" class="form-control">
113
- <option value="c" selected>Custom (compressed, flexible)</option>
114
- <option value="d">Directory (for parallel restores)</option>
115
- <option value="p">Plain SQL (readable)</option>
116
- </select>
117
  </div>
118
  <div class="form-group">
119
  <label for="dump-compression">Compression</label>
120
- <select id="dump-compression" class="form-control">
121
- <option value="default" selected>Default</option>
122
- <option value="0">0 (None)</option>
123
- <option value="5">5 (Balanced)</option>
124
- <option value="9">9 (Max)</option>
125
- </select>
126
  </div>
127
  <div class="form-group">
128
  <label for="schema-filter">Schema (Optional)</label>
@@ -133,117 +92,68 @@
133
  <input type="text" id="dump-filename" class="form-control" value="timescale_backup">
134
  </div>
135
  </div>
 
136
  <div class="form-actions">
137
  <button id="start-dump-btn" class="btn btn-primary btn-lg"><i class="fas fa-play"></i> Start Dump</button>
138
  </div>
139
  </div>
140
  </div>
141
- <!-- Dump Progress View -->
142
- <div id="dump-progress-view" class="hidden">
143
- <div class="progress-card">
144
- <div class="progress-header">
145
- <h3><i class="fas fa-sync fa-spin"></i> Dump in Progress</h3>
146
- <button id="stop-dump-btn" class="btn btn-danger"><i class="fas fa-stop"></i> Stop</button>
147
- </div>
148
- <div class="progress-stats">
149
- <div class="stat-item">
150
- <span class="stat-label">Elapsed Time</span>
151
- <span class="stat-value" id="dump-elapsed-time">00:00:00</span>
152
- </div>
153
- <div class="stat-item">
154
- <span class="stat-label">Backup Size</span>
155
- <span class="stat-value" id="dump-file-size">0.00 MB</span>
156
- </div>
157
- <div class="stat-item">
158
- <span class="stat-label">Current Task</span>
159
- <span class="stat-value" id="dump-current-table">-</span>
160
- </div>
161
- </div>
162
- <div class="progress-tracker">
163
- <label>Data Size Progress (<span id="dump-size-progress-text">0%</span>)</label>
164
- <div class="progress-bar-container">
165
- <div id="dump-size-progress-bar" class="progress-bar"></div>
166
- </div>
167
- <span class="progress-subtext" id="dump-size-subtext">0 B / 0 B</span>
168
- </div>
169
- <div class="progress-tracker">
170
- <label>Chunk Count Progress (<span id="dump-count-progress-text">0%</span>)</label>
171
- <div class="progress-bar-container">
172
- <div id="dump-count-progress-bar" class="progress-bar secondary"></div>
173
- </div>
174
- <span class="progress-subtext" id="dump-count-subtext">0 / 0 Chunks</span>
175
- </div>
176
- </div>
177
- </div>
178
  </section>
179
 
180
  <!-- Restore Page -->
181
  <section id="restore-page" class="page">
182
- <!-- Restore Configuration View -->
183
  <div id="restore-config-view">
184
- <div class="form-card">
185
  <h3><i class="fas fa-cog"></i> Restore Settings</h3>
186
- <div class="form-group">
187
  <label for="server-backup-file">Select Backup File</label>
188
- <select id="server-backup-file" class="form-control">
189
- <option value="">-- Loading backups... --</option>
190
- </select>
191
  </div>
192
  <div class="form-group">
193
- <label>Restore Options</label>
194
  <div class="checkbox-group">
195
- <label><input type="checkbox" id="timescaledb-pre-restore" checked> Run `timescaledb_pre_restore()`</label>
196
- <label><input type="checkbox" id="timescaledb-post-restore" checked> Run `timescaledb_post_restore()` & ANALYZE</label>
197
- <label><input type="checkbox" id="no-owner" checked> Ignore object ownership</label>
198
- <label><input type="checkbox" id="clean"> Clean (drop) objects before recreating</label>
199
  </div>
200
  </div>
 
201
  <div class="form-actions">
202
  <button id="start-restore-btn" class="btn btn-primary btn-lg"><i class="fas fa-play"></i> Start Restore</button>
203
  </div>
204
  </div>
205
  </div>
206
- <!-- Restore Progress View -->
207
- <div id="restore-progress-view" class="hidden">
208
- <div class="progress-card">
209
- <div class="progress-header">
210
- <h3><i class="fas fa-sync fa-spin"></i> Restore in Progress</h3>
211
- <button id="stop-restore-btn" class="btn btn-danger"><i class="fas fa-stop"></i> Stop</button>
212
- </div>
213
- <div class="progress-stats">
214
- <div class="stat-item">
215
- <span class="stat-label">Elapsed Time</span>
216
- <span class="stat-value" id="restore-elapsed-time">00:00:00</span>
217
- </div>
218
- <div class="stat-item">
219
- <span class="stat-label">Tables Restored</span>
220
- <span class="stat-value" id="restore-tables-completed">0</span>
221
- </div>
222
- <div class="stat-item">
223
- <span class="stat-label">Current Task</span>
224
- <span class="stat-value" id="restore-current-table">-</span>
225
- </div>
226
- </div>
227
- <p class="text-muted text-center">Restore progress is monitored via logs. Check the Logs tab for detailed, real-time output.</p>
228
- </div>
229
- </div>
230
  </section>
231
 
232
  <!-- Logs Page -->
233
  <section id="logs-page" class="page">
234
- <div class="log-container">
235
  <div class="log-header">
236
- <h3><i class="fas fa-scroll"></i> Operation Logs</h3>
237
  <div class="log-controls">
238
- <label class="toggle-switch">
239
- <input type="checkbox" id="log-autoscroll-toggle" checked>
240
- <span class="slider"></span>
241
- </label>
242
- <span>Auto-Scroll</span>
 
 
 
243
  </div>
244
  </div>
245
- <div id="log-output" class="log-output">
246
- <!-- Log entries will be inserted here -->
 
 
 
 
 
 
 
 
247
  </div>
248
  </div>
249
  </section>
@@ -251,19 +161,11 @@
251
  </main>
252
  </div>
253
 
254
- <!-- Toast Notification Container -->
255
- <div id="toast-container"></div>
256
-
257
  <!-- Confirmation Modal -->
258
  <div id="confirm-modal" class="modal-backdrop hidden">
259
  <div class="modal">
260
- <div class="modal-header">
261
- <h3 id="confirm-modal-title">Confirm Action</h3>
262
- <button id="close-confirm-modal" class="btn-icon">&times;</button>
263
- </div>
264
- <div class="modal-body">
265
- <p id="confirm-modal-body">Are you sure you want to proceed?</p>
266
- </div>
267
  <div class="modal-footer">
268
  <button id="cancel-confirm-btn" class="btn btn-secondary">Cancel</button>
269
  <button id="confirm-action-btn" class="btn btn-danger">Confirm</button>
@@ -271,7 +173,10 @@
271
  </div>
272
  </div>
273
 
 
 
 
274
  <!-- JavaScript -->
275
- <script src="/static/js/app.js" defer></script>
276
  </body>
277
  </html>
 
16
  <body>
17
  <div class="app-container">
18
  <!-- Sidebar Navigation -->
19
+ <nav class="sidebar" id="sidebar">
20
  <div class="sidebar-header">
21
  <i class="fas fa-database"></i>
22
+ <span class="sidebar-title">Migrator</span>
23
  </div>
24
  <ul class="sidebar-nav">
25
+ <li><a href="#" class="nav-link active" data-target="connections"><i class="fas fa-plug"></i><span>Connections</span></a></li>
 
26
  <li><a href="#" class="nav-link" data-target="dump"><i class="fas fa-download"></i><span>Dump</span></a></li>
27
  <li><a href="#" class="nav-link" data-target="restore"><i class="fas fa-upload"></i><span>Restore</span></a></li>
28
  <li><a href="#" class="nav-link" data-target="logs"><i class="fas fa-scroll"></i><span>Logs</span></a></li>
 
32
  <!-- Main Content -->
33
  <main class="main-content">
34
  <header class="main-header">
35
+ <button class="menu-toggle" id="menu-toggle"><i class="fas fa-bars"></i></button>
36
+ <h1 id="header-title">Connections</h1>
37
  <div id="status-badge" class="status-badge idle">
38
  <span class="status-dot"></span>
39
  <span class="status-text">Idle</span>
40
  </div>
41
  </header>
42
 
 
43
  <div class="page-content">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  <!-- Connections Page -->
45
+ <section id="connections-page" class="page active">
46
+ <div class="grid-container">
47
+ <div class="card">
 
48
  <h3><i class="fas fa-server"></i> Source Database</h3>
49
  <div class="form-group">
50
  <label for="source-conn">Connection String</label>
51
+ <input type="password" id="source-conn" class="form-control" placeholder="postgresql://user:pass@host:5432/db">
 
 
 
52
  </div>
53
  <button id="test-source-btn" class="btn btn-primary"><i class="fas fa-plug"></i> Test Connection</button>
54
+ <div class="connection-status-card" id="source-status-card">
55
+ <p class="text-muted">Test connection to see details.</p>
56
+ </div>
57
  </div>
58
+ <div class="card">
 
59
  <h3><i class="fas fa-cloud-upload-alt"></i> Target Database</h3>
60
  <div class="form-group">
61
  <label for="target-conn">Connection String</label>
62
+ <input type="password" id="target-conn" class="form-control" placeholder="postgresql://user:pass@host:5432/db">
 
 
 
63
  </div>
64
  <button id="test-target-btn" class="btn btn-primary"><i class="fas fa-plug"></i> Test Connection</button>
65
+ <div class="connection-status-card" id="target-status-card">
66
+ <p class="text-muted">Test connection to see details.</p>
67
+ </div>
68
  </div>
69
  </div>
70
  </section>
71
 
72
  <!-- Dump Page -->
73
  <section id="dump-page" class="page">
 
74
  <div id="dump-config-view">
75
+ <div class="card">
76
  <h3><i class="fas fa-cog"></i> Dump Settings</h3>
77
+ <div class="grid-container">
78
  <div class="form-group">
79
  <label for="dump-format">Format</label>
80
+ <select id="dump-format" class="form-control"><option value="c" selected>Custom</option><option value="d">Directory</option></select>
 
 
 
 
81
  </div>
82
  <div class="form-group">
83
  <label for="dump-compression">Compression</label>
84
+ <select id="dump-compression" class="form-control"><option value="default" selected>Default</option><option value="0">0</option><option value="9">9</option></select>
 
 
 
 
 
85
  </div>
86
  <div class="form-group">
87
  <label for="schema-filter">Schema (Optional)</label>
 
92
  <input type="text" id="dump-filename" class="form-control" value="timescale_backup">
93
  </div>
94
  </div>
95
+ <div class="command-preview" id="dump-command-preview"></div>
96
  <div class="form-actions">
97
  <button id="start-dump-btn" class="btn btn-primary btn-lg"><i class="fas fa-play"></i> Start Dump</button>
98
  </div>
99
  </div>
100
  </div>
101
+ <div id="dump-monitoring-view" class="hidden"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  </section>
103
 
104
  <!-- Restore Page -->
105
  <section id="restore-page" class="page">
 
106
  <div id="restore-config-view">
107
+ <div class="card">
108
  <h3><i class="fas fa-cog"></i> Restore Settings</h3>
109
+ <div class="form-group">
110
  <label for="server-backup-file">Select Backup File</label>
111
+ <select id="server-backup-file" class="form-control"><option value="">-- Loading... --</option></select>
 
 
112
  </div>
113
  <div class="form-group">
114
+ <label>Options</label>
115
  <div class="checkbox-group">
116
+ <label><input type="checkbox" id="timescaledb-pre-restore" checked> Run pre-restore</label>
117
+ <label><input type="checkbox" id="timescaledb-post-restore" checked> Run post-restore & ANALYZE</label>
118
+ <label><input type="checkbox" id="no-owner" checked> Ignore ownership</label>
119
+ <label><input type="checkbox" id="clean"> Clean (drop) objects</label>
120
  </div>
121
  </div>
122
+ <div class="command-preview" id="restore-command-preview"></div>
123
  <div class="form-actions">
124
  <button id="start-restore-btn" class="btn btn-primary btn-lg"><i class="fas fa-play"></i> Start Restore</button>
125
  </div>
126
  </div>
127
  </div>
128
+ <div id="restore-monitoring-view" class="hidden"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </section>
130
 
131
  <!-- Logs Page -->
132
  <section id="logs-page" class="page">
133
+ <div class="card log-explorer">
134
  <div class="log-header">
135
+ <h3><i class="fas fa-scroll"></i> Log Explorer</h3>
136
  <div class="log-controls">
137
+ <input type="text" id="log-search" class="form-control" placeholder="Search logs...">
138
+ <div class="btn-group" id="log-level-filters">
139
+ <button class="btn btn-sm active" data-level="all">All</button>
140
+ <button class="btn btn-sm" data-level="info">Info</button>
141
+ <button class="btn btn-sm" data-level="success">Success</button>
142
+ <button class="btn btn-sm" data-level="warning">Warning</button>
143
+ <button class="btn btn-sm" data-level="error">Error</button>
144
+ </div>
145
  </div>
146
  </div>
147
+ <div class="log-output" id="log-output"></div>
148
+ <div class="log-footer">
149
+ <div class="autoscroll-toggle">
150
+ <input type="checkbox" id="log-autoscroll-toggle" checked>
151
+ <label for="log-autoscroll-toggle">Auto-Scroll</label>
152
+ </div>
153
+ <div class="log-actions">
154
+ <button id="export-logs-btn" class="btn btn-secondary"><i class="fas fa-file-export"></i> Export</button>
155
+ <button id="clear-logs-btn" class="btn btn-danger"><i class="fas fa-trash"></i> Clear</button>
156
+ </div>
157
  </div>
158
  </div>
159
  </section>
 
161
  </main>
162
  </div>
163
 
 
 
 
164
  <!-- Confirmation Modal -->
165
  <div id="confirm-modal" class="modal-backdrop hidden">
166
  <div class="modal">
167
+ <div class="modal-header"><h3 id="confirm-modal-title"></h3></div>
168
+ <div class="modal-body"><p id="confirm-modal-body"></p></div>
 
 
 
 
 
169
  <div class="modal-footer">
170
  <button id="cancel-confirm-btn" class="btn btn-secondary">Cancel</button>
171
  <button id="confirm-action-btn" class="btn btn-danger">Confirm</button>
 
173
  </div>
174
  </div>
175
 
176
+ <!-- Toast Notification Container -->
177
+ <div id="toast-container"></div>
178
+
179
  <!-- JavaScript -->
180
+ <script src="/static/js/app.js"></script>
181
  </body>
182
  </html>