dbviewer 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7cc641a4845b5267ef95a4fd7b5c368a9f4145dd0f60322eb753e8b4a270414a
|
4
|
+
data.tar.gz: 37ee52e24a3578c61f939b14d74cea8d125e4f737ed98abafa109c9a3e71e627
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4253de79918ecd100eeb6f8e17b4e64346060295defd167cb709227db1eec0cd6716e230c1c56ae251dac5361643eaf8abd529fc566a31cad27edfdcc72ad424
|
7
|
+
data.tar.gz: af7b679d9ec6116487322ce9309ca4390e02e22fdaf8d873dff8c71f83ab8142a8bd7d08f34e9fd127d2a233c963b9903bf82bfd75972f8f6452f67c5994ab1e
|
@@ -1,9 +1,32 @@
|
|
1
1
|
module Dbviewer
|
2
2
|
class HomeController < ApplicationController
|
3
3
|
def index
|
4
|
+
# Load page immediately without heavy data
|
5
|
+
# Data will be loaded asynchronously via AJAX
|
6
|
+
end
|
7
|
+
|
8
|
+
def analytics
|
4
9
|
@analytics = fetch_database_analytics
|
5
|
-
|
6
|
-
|
10
|
+
|
11
|
+
respond_to do |format|
|
12
|
+
format.json { render json: @analytics }
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
def recent_queries
|
17
|
+
@recent_queries = if Dbviewer.configuration.enable_query_logging
|
18
|
+
Dbviewer::Logger.instance.recent_queries(limit: 10)
|
19
|
+
else
|
20
|
+
[]
|
21
|
+
end
|
22
|
+
|
23
|
+
respond_to do |format|
|
24
|
+
format.json do
|
25
|
+
render json: {
|
26
|
+
enabled: Dbviewer.configuration.enable_query_logging,
|
27
|
+
queries: @recent_queries
|
28
|
+
}
|
29
|
+
end
|
7
30
|
end
|
8
31
|
end
|
9
32
|
|
@@ -8,7 +8,7 @@
|
|
8
8
|
</div>
|
9
9
|
</div>
|
10
10
|
|
11
|
-
<div class="row g-3 mb-4">
|
11
|
+
<div class="row g-3 mb-4" id="analytics-cards">
|
12
12
|
<div class="col-md-3">
|
13
13
|
<div class="card h-100 border-0 shadow-sm <%= stat_card_bg_class %>">
|
14
14
|
<div class="card-body d-flex align-items-center">
|
@@ -17,7 +17,12 @@
|
|
17
17
|
</div>
|
18
18
|
<div class="text-start">
|
19
19
|
<h5 class="mb-1">Tables</h5>
|
20
|
-
<h2 class="mb-0"
|
20
|
+
<h2 class="mb-0">
|
21
|
+
<span class="skeleton-loader number-loader" id="tables-loading">
|
22
|
+
|
23
|
+
</span>
|
24
|
+
<span id="tables-count" class="d-none">0</span>
|
25
|
+
</h2>
|
21
26
|
</div>
|
22
27
|
</div>
|
23
28
|
</div>
|
@@ -31,7 +36,12 @@
|
|
31
36
|
</div>
|
32
37
|
<div class="text-start">
|
33
38
|
<h5 class="mb-1">Records</h5>
|
34
|
-
<h2 class="mb-0"
|
39
|
+
<h2 class="mb-0">
|
40
|
+
<span class="skeleton-loader number-loader" id="records-loading">
|
41
|
+
|
42
|
+
</span>
|
43
|
+
<span id="records-count" class="d-none">0</span>
|
44
|
+
</h2>
|
35
45
|
</div>
|
36
46
|
</div>
|
37
47
|
</div>
|
@@ -45,7 +55,12 @@
|
|
45
55
|
</div>
|
46
56
|
<div class="text-start">
|
47
57
|
<h5 class="mb-1">Relationships</h5>
|
48
|
-
<h2 class="mb-0"
|
58
|
+
<h2 class="mb-0">
|
59
|
+
<span class="skeleton-loader number-loader" id="relationships-loading">
|
60
|
+
|
61
|
+
</span>
|
62
|
+
<span id="relationships-count" class="d-none">0</span>
|
63
|
+
</h2>
|
49
64
|
<small class="text-muted d-block">Foreign Key Connections</small>
|
50
65
|
</div>
|
51
66
|
</div>
|
@@ -60,7 +75,12 @@
|
|
60
75
|
</div>
|
61
76
|
<div class="text-start">
|
62
77
|
<h5 class="mb-1">Database Size</h5>
|
63
|
-
<h2 class="mb-0"
|
78
|
+
<h2 class="mb-0">
|
79
|
+
<span class="skeleton-loader number-loader" id="size-loading">
|
80
|
+
|
81
|
+
</span>
|
82
|
+
<span id="size-count" class="d-none">0</span>
|
83
|
+
</h2>
|
64
84
|
</div>
|
65
85
|
</div>
|
66
86
|
</div>
|
@@ -73,35 +93,25 @@
|
|
73
93
|
<div class="card-header">
|
74
94
|
<h5 class="card-title mb-0">Largest Tables</h5>
|
75
95
|
</div>
|
76
|
-
<div class="card-body p-0">
|
77
|
-
|
78
|
-
<
|
79
|
-
<
|
80
|
-
<
|
96
|
+
<div class="card-body p-0" id="largest-tables-container">
|
97
|
+
<div class="table-responsive">
|
98
|
+
<table class="table table-hover table-sm mb-0">
|
99
|
+
<thead>
|
100
|
+
<tr>
|
101
|
+
<th>Table Name</th>
|
102
|
+
<th class="text-end">Records</th>
|
103
|
+
</tr>
|
104
|
+
</thead>
|
105
|
+
<tbody>
|
106
|
+
<% 10.times do %>
|
81
107
|
<tr>
|
82
|
-
<
|
83
|
-
<
|
108
|
+
<td><div class="skeleton-loader table-cell-loader"></div></td>
|
109
|
+
<td class="text-end"><div class="skeleton-loader records-loader"></div></td>
|
84
110
|
</tr>
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
<td>
|
90
|
-
<a href="<%= dbviewer.table_path(table[:name]) %>">
|
91
|
-
<%= table[:name] %>
|
92
|
-
</a>
|
93
|
-
</td>
|
94
|
-
<td class="text-end"><%= number_with_delimiter(table[:record_count]) %></td>
|
95
|
-
</tr>
|
96
|
-
<% end %>
|
97
|
-
</tbody>
|
98
|
-
</table>
|
99
|
-
</div>
|
100
|
-
<% else %>
|
101
|
-
<div class="text-center my-4 empty-data-message">
|
102
|
-
<p>No table data available</p>
|
103
|
-
</div>
|
104
|
-
<% end %>
|
111
|
+
<% end %>
|
112
|
+
</tbody>
|
113
|
+
</table>
|
114
|
+
</div>
|
105
115
|
</div>
|
106
116
|
</div>
|
107
117
|
</div>
|
@@ -110,55 +120,326 @@
|
|
110
120
|
<div class="card shadow-sm">
|
111
121
|
<div class="card-header d-flex justify-content-between align-items-center">
|
112
122
|
<h5 class="card-title mb-0">Recent SQL Queries</h5>
|
113
|
-
|
114
|
-
|
115
|
-
|
123
|
+
<div id="queries-view-all-link" class="d-none">
|
124
|
+
<!-- Link will be added dynamically if query logging is enabled -->
|
125
|
+
</div>
|
116
126
|
</div>
|
117
|
-
<div class="card-body p-0">
|
118
|
-
|
119
|
-
|
120
|
-
<
|
121
|
-
<
|
122
|
-
|
123
|
-
|
127
|
+
<div class="card-body p-0" id="recent-queries-container">
|
128
|
+
<div class="table-responsive">
|
129
|
+
<table class="table table-hover table-sm mb-0">
|
130
|
+
<thead>
|
131
|
+
<tr>
|
132
|
+
<th>Query</th>
|
133
|
+
<th class="text-end" style="width: 120px">Duration</th>
|
134
|
+
<th class="text-end" style="width: 180px">Time</th>
|
135
|
+
</tr>
|
136
|
+
</thead>
|
137
|
+
<tbody>
|
138
|
+
<% 5.times do %>
|
124
139
|
<tr>
|
125
|
-
<
|
126
|
-
<
|
127
|
-
<
|
140
|
+
<td><div class="skeleton-loader query-cell-loader"></div></td>
|
141
|
+
<td class="text-end"><div class="skeleton-loader duration-cell-loader"></div></td>
|
142
|
+
<td class="text-end"><div class="skeleton-loader time-cell-loader"></div></td>
|
128
143
|
</tr>
|
129
|
-
|
130
|
-
|
131
|
-
|
144
|
+
<% end %>
|
145
|
+
</tbody>
|
146
|
+
</table>
|
147
|
+
</div>
|
148
|
+
</div>
|
149
|
+
</div>
|
150
|
+
</div>
|
151
|
+
</div>
|
152
|
+
</div>
|
153
|
+
|
154
|
+
<script>
|
155
|
+
document.addEventListener('DOMContentLoaded', function() {
|
156
|
+
// Helper function to format numbers with commas
|
157
|
+
function numberWithDelimiter(number) {
|
158
|
+
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
159
|
+
}
|
160
|
+
|
161
|
+
// Helper function to format file sizes
|
162
|
+
function numberToHumanSize(bytes) {
|
163
|
+
if (bytes === null || bytes === undefined) return 'N/A';
|
164
|
+
if (bytes === 0) return '0 Bytes';
|
165
|
+
|
166
|
+
const k = 1024;
|
167
|
+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
168
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
169
|
+
|
170
|
+
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
171
|
+
}
|
172
|
+
|
173
|
+
// Function to update analytics cards
|
174
|
+
function updateAnalyticsCards(analytics) {
|
175
|
+
// Update tables count
|
176
|
+
document.getElementById('tables-loading').classList.add('d-none');
|
177
|
+
document.getElementById('tables-count').classList.remove('d-none');
|
178
|
+
document.getElementById('tables-count').textContent = analytics.total_tables || 0;
|
179
|
+
|
180
|
+
// Update records count
|
181
|
+
document.getElementById('records-loading').classList.add('d-none');
|
182
|
+
document.getElementById('records-count').classList.remove('d-none');
|
183
|
+
document.getElementById('records-count').textContent = numberWithDelimiter(analytics.total_records || 0);
|
184
|
+
|
185
|
+
// Update relationships count
|
186
|
+
document.getElementById('relationships-loading').classList.add('d-none');
|
187
|
+
document.getElementById('relationships-count').classList.remove('d-none');
|
188
|
+
document.getElementById('relationships-count').textContent = analytics.total_relationships || 0;
|
189
|
+
|
190
|
+
// Update database size
|
191
|
+
document.getElementById('size-loading').classList.add('d-none');
|
192
|
+
document.getElementById('size-count').classList.remove('d-none');
|
193
|
+
document.getElementById('size-count').textContent = numberToHumanSize(analytics.schema_size);
|
194
|
+
}
|
195
|
+
|
196
|
+
// Function to update largest tables
|
197
|
+
function updateLargestTables(analytics) {
|
198
|
+
const container = document.getElementById('largest-tables-container');
|
199
|
+
|
200
|
+
if (analytics.largest_tables && analytics.largest_tables.length > 0) {
|
201
|
+
const tableHtml = `
|
202
|
+
<div class="table-responsive">
|
203
|
+
<table class="table table-sm table-hover">
|
204
|
+
<thead>
|
205
|
+
<tr>
|
206
|
+
<th>Table Name</th>
|
207
|
+
<th class="text-end">Records</th>
|
208
|
+
</tr>
|
209
|
+
</thead>
|
210
|
+
<tbody>
|
211
|
+
${analytics.largest_tables.map(table => `
|
212
|
+
<tr>
|
213
|
+
<td>
|
214
|
+
<a href="${window.location.origin}${window.location.pathname.replace(/\/$/, '')}/tables/${table.name}">
|
215
|
+
${table.name}
|
216
|
+
</a>
|
217
|
+
</td>
|
218
|
+
<td class="text-end">${numberWithDelimiter(table.record_count)}</td>
|
219
|
+
</tr>
|
220
|
+
`).join('')}
|
221
|
+
</tbody>
|
222
|
+
</table>
|
223
|
+
</div>
|
224
|
+
`;
|
225
|
+
container.innerHTML = tableHtml;
|
226
|
+
} else {
|
227
|
+
container.innerHTML = `
|
228
|
+
<div class="text-center my-4 empty-data-message">
|
229
|
+
<p>No table data available</p>
|
230
|
+
</div>
|
231
|
+
`;
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
// Function to update recent queries
|
236
|
+
function updateRecentQueries(data) {
|
237
|
+
const container = document.getElementById('recent-queries-container');
|
238
|
+
const linkContainer = document.getElementById('queries-view-all-link');
|
239
|
+
|
240
|
+
if (data.enabled) {
|
241
|
+
// Show "View All Logs" link if query logging is enabled
|
242
|
+
linkContainer.innerHTML = `
|
243
|
+
<a href="${window.location.origin}${window.location.pathname.replace(/\/$/, '')}/logs" class="btn btn-sm btn-primary">View All Logs</a>
|
244
|
+
`;
|
245
|
+
linkContainer.classList.remove('d-none');
|
246
|
+
|
247
|
+
if (data.queries && data.queries.length > 0) {
|
248
|
+
const tableHtml = `
|
249
|
+
<div class="table-responsive">
|
250
|
+
<table class="table table-sm table-hover mb-0">
|
251
|
+
<thead>
|
252
|
+
<tr>
|
253
|
+
<th>Query</th>
|
254
|
+
<th class="text-end" style="width: 120px">Duration</th>
|
255
|
+
<th class="text-end" style="width: 180px">Time</th>
|
256
|
+
</tr>
|
257
|
+
</thead>
|
258
|
+
<tbody>
|
259
|
+
${data.queries.map(query => {
|
260
|
+
const duration = query.duration_ms;
|
261
|
+
const durationClass = duration > 100 ? 'query-duration-slow' : 'query-duration';
|
262
|
+
const timestamp = new Date(query.timestamp);
|
263
|
+
const timeString = timestamp.toLocaleTimeString();
|
264
|
+
|
265
|
+
return `
|
132
266
|
<tr>
|
133
267
|
<td class="text-truncate" style="max-width: 500px;">
|
134
|
-
<code class="sql-query-code"
|
268
|
+
<code class="sql-query-code">${query.sql}</code>
|
135
269
|
</td>
|
136
270
|
<td class="text-end">
|
137
|
-
<span class="
|
138
|
-
|
271
|
+
<span class="${durationClass}">
|
272
|
+
${duration} ms
|
139
273
|
</span>
|
140
274
|
</td>
|
141
275
|
<td class="text-end query-timestamp">
|
142
|
-
<small
|
276
|
+
<small>${timeString}</small>
|
143
277
|
</td>
|
144
278
|
</tr>
|
145
|
-
|
146
|
-
|
147
|
-
</
|
148
|
-
</
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
<
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
279
|
+
`;
|
280
|
+
}).join('')}
|
281
|
+
</tbody>
|
282
|
+
</table>
|
283
|
+
</div>
|
284
|
+
`;
|
285
|
+
container.innerHTML = tableHtml;
|
286
|
+
} else {
|
287
|
+
container.innerHTML = `
|
288
|
+
<div class="text-center my-4 empty-data-message">
|
289
|
+
<p>No queries recorded yet</p>
|
290
|
+
</div>
|
291
|
+
`;
|
292
|
+
}
|
293
|
+
} else {
|
294
|
+
container.innerHTML = `
|
295
|
+
<div class="text-center my-4 empty-data-message">
|
296
|
+
<p>Query logging is disabled</p>
|
297
|
+
<small class="text-muted">Enable it in the configuration to see SQL queries here</small>
|
160
298
|
</div>
|
299
|
+
`;
|
300
|
+
}
|
301
|
+
}
|
302
|
+
|
303
|
+
// Function to show error state
|
304
|
+
function showError(containerId, message) {
|
305
|
+
const container = document.getElementById(containerId);
|
306
|
+
container.innerHTML = `
|
307
|
+
<div class="text-center my-4 text-danger">
|
308
|
+
<i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
|
309
|
+
<p>Error loading data</p>
|
310
|
+
<small>${message}</small>
|
161
311
|
</div>
|
162
|
-
|
163
|
-
|
164
|
-
|
312
|
+
`;
|
313
|
+
}
|
314
|
+
|
315
|
+
// Load analytics data
|
316
|
+
fetch('<%= api_analytics_path %>', {
|
317
|
+
headers: {
|
318
|
+
'Accept': 'application/json',
|
319
|
+
'X-Requested-With': 'XMLHttpRequest'
|
320
|
+
}
|
321
|
+
})
|
322
|
+
.then(response => {
|
323
|
+
if (!response.ok) {
|
324
|
+
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
325
|
+
}
|
326
|
+
return response.json();
|
327
|
+
})
|
328
|
+
.then(analytics => {
|
329
|
+
updateAnalyticsCards(analytics);
|
330
|
+
updateLargestTables(analytics);
|
331
|
+
})
|
332
|
+
.catch(error => {
|
333
|
+
console.error('Error loading analytics:', error);
|
334
|
+
// Update cards with error state
|
335
|
+
['tables-loading', 'records-loading', 'relationships-loading', 'size-loading'].forEach(id => {
|
336
|
+
const loading = document.getElementById(id);
|
337
|
+
const count = document.getElementById(id.replace('-loading', '-count'));
|
338
|
+
loading.classList.add('d-none');
|
339
|
+
count.classList.remove('d-none');
|
340
|
+
count.innerHTML = '<span class="text-danger">Error</span>';
|
341
|
+
});
|
342
|
+
|
343
|
+
showError('largest-tables-container', error.message);
|
344
|
+
});
|
345
|
+
|
346
|
+
// Load recent queries data
|
347
|
+
fetch('<%= api_recent_queries_path %>', {
|
348
|
+
headers: {
|
349
|
+
'Accept': 'application/json',
|
350
|
+
'X-Requested-With': 'XMLHttpRequest'
|
351
|
+
}
|
352
|
+
})
|
353
|
+
.then(response => {
|
354
|
+
if (!response.ok) {
|
355
|
+
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
356
|
+
}
|
357
|
+
return response.json();
|
358
|
+
})
|
359
|
+
.then(data => {
|
360
|
+
updateRecentQueries(data);
|
361
|
+
})
|
362
|
+
.catch(error => {
|
363
|
+
console.error('Error loading recent queries:', error);
|
364
|
+
showError('recent-queries-container', error.message);
|
365
|
+
});
|
366
|
+
});
|
367
|
+
</script>
|
368
|
+
|
369
|
+
<style>
|
370
|
+
.sql-query-code {
|
371
|
+
font-family: 'Courier New', Courier, monospace;
|
372
|
+
font-size: 0.85rem;
|
373
|
+
background-color: rgba(0, 0, 0, 0.05);
|
374
|
+
padding: 2px 4px;
|
375
|
+
border-radius: 3px;
|
376
|
+
}
|
377
|
+
|
378
|
+
.query-duration {
|
379
|
+
color: #28a745;
|
380
|
+
font-weight: 500;
|
381
|
+
}
|
382
|
+
|
383
|
+
.query-duration-slow {
|
384
|
+
color: #dc3545;
|
385
|
+
font-weight: 600;
|
386
|
+
}
|
387
|
+
|
388
|
+
.query-timestamp {
|
389
|
+
color: #6c757d;
|
390
|
+
}
|
391
|
+
|
392
|
+
.empty-data-message {
|
393
|
+
color: #6c757d;
|
394
|
+
}
|
395
|
+
|
396
|
+
/* Loading animations */
|
397
|
+
.spinner-border-sm {
|
398
|
+
width: 1rem;
|
399
|
+
height: 1rem;
|
400
|
+
}
|
401
|
+
|
402
|
+
/* Skeleton loader styles */
|
403
|
+
.skeleton-loader {
|
404
|
+
display: inline-block;
|
405
|
+
height: 1.2em;
|
406
|
+
width: 100%;
|
407
|
+
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
|
408
|
+
background-size: 400% 100%;
|
409
|
+
animation: skeleton-loading 1.2s ease-in-out infinite;
|
410
|
+
border-radius: 4px;
|
411
|
+
}
|
412
|
+
.number-loader {
|
413
|
+
width: 2.5em;
|
414
|
+
height: 1.5em;
|
415
|
+
margin-bottom: 0.2em;
|
416
|
+
}
|
417
|
+
.table-cell-loader {
|
418
|
+
width: 6em;
|
419
|
+
height: 1.2em;
|
420
|
+
}
|
421
|
+
.records-loader {
|
422
|
+
width: 3em;
|
423
|
+
height: 1.2em;
|
424
|
+
}
|
425
|
+
.query-cell-loader {
|
426
|
+
width: 12em;
|
427
|
+
height: 1.2em;
|
428
|
+
}
|
429
|
+
.duration-cell-loader {
|
430
|
+
width: 4em;
|
431
|
+
height: 1.2em;
|
432
|
+
}
|
433
|
+
.time-cell-loader {
|
434
|
+
width: 7em;
|
435
|
+
height: 1.2em;
|
436
|
+
}
|
437
|
+
@keyframes skeleton-loading {
|
438
|
+
0% {
|
439
|
+
background-position: 100% 50%;
|
440
|
+
}
|
441
|
+
100% {
|
442
|
+
background-position: 0 50%;
|
443
|
+
}
|
444
|
+
}
|
445
|
+
</style>
|
data/config/routes.rb
CHANGED
@@ -16,8 +16,10 @@ Dbviewer::Engine.routes.draw do
|
|
16
16
|
end
|
17
17
|
end
|
18
18
|
|
19
|
-
# Homepage
|
19
|
+
# Homepage and API endpoints
|
20
20
|
get "dashboard", to: "home#index", as: :dashboard
|
21
|
+
get "api/analytics", to: "home#analytics"
|
22
|
+
get "api/recent_queries", to: "home#recent_queries"
|
21
23
|
|
22
24
|
root to: "home#index"
|
23
25
|
end
|
data/lib/dbviewer/version.rb
CHANGED