Hugging Face's logo

Spaces:
x3v
/
elastic-dashboard
Running

App Files Community
x3v commited on
Commit
53f8d4a
·
verified ·
1 Parent(s): f887c68

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +459 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Elastic Dashboard
3
- emoji: 🏃
4
- colorFrom: yellow
5
  colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: elastic-dashboard
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,459 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Elasticsearch Data Visualization</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0"></script>
11
+ <style>
12
+ .chart-container {
13
+ position: relative;
14
+ height: 300px;
15
+ width: 100%;
16
+ }
17
+ .card {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .card:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-100 min-h-screen">
27
+ <div class="container mx-auto px-4 py-8">
28
+ <div class="flex justify-between items-center mb-8">
29
+ <h1 class="text-3xl font-bold text-gray-800">
30
+ <i class="fas fa-chart-line text-blue-500 mr-2"></i> Elasticsearch Data Dashboard
31
+ </h1>
32
+ <div class="flex items-center space-x-4">
33
+ <div class="relative">
34
+ <select id="time-range" class="bg-white border border-gray-300 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
35
+ <option value="24h">Last 24 Hours</option>
36
+ <option value="7d" selected>Last 7 Days</option>
37
+ <option value="30d">Last 30 Days</option>
38
+ </select>
39
+ </div>
40
+ <button id="refresh-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
41
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
42
+ </button>
43
+ </div>
44
+ </div>
45
+
46
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
47
+ <!-- Summary Cards -->
48
+ <div class="card bg-white rounded-lg shadow-md p-6">
49
+ <div class="flex items-center">
50
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
51
+ <i class="fas fa-database text-xl"></i>
52
+ </div>
53
+ <div>
54
+ <p class="text-gray-500 text-sm">Total Documents</p>
55
+ <h3 class="text-2xl font-bold" id="total-docs">12,458</h3>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ <div class="card bg-white rounded-lg shadow-md p-6">
60
+ <div class="flex items-center">
61
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
62
+ <i class="fas fa-bolt text-xl"></i>
63
+ </div>
64
+ <div>
65
+ <p class="text-gray-500 text-sm">Indexing Rate</p>
66
+ <h3 class="text-2xl font-bold" id="index-rate">1,245 <span class="text-sm">docs/sec</span></h3>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ <div class="card bg-white rounded-lg shadow-md p-6">
71
+ <div class="flex items-center">
72
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
73
+ <i class="fas fa-search text-xl"></i>
74
+ </div>
75
+ <div>
76
+ <p class="text-gray-500 text-sm">Search Queries</p>
77
+ <h3 class="text-2xl font-bold" id="search-count">3,421 <span class="text-sm">/day</span></h3>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ <div class="card bg-white rounded-lg shadow-md p-6">
82
+ <div class="flex items-center">
83
+ <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4">
84
+ <i class="fas fa-exclamation-triangle text-xl"></i>
85
+ </div>
86
+ <div>
87
+ <p class="text-gray-500 text-sm">Failed Queries</p>
88
+ <h3 class="text-2xl font-bold" id="failed-queries">42 <span class="text-sm">(1.2%)</span></h3>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
95
+ <!-- Time Series Charts -->
96
+ <div class="card bg-white rounded-lg shadow-md p-6">
97
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">
98
+ <i class="fas fa-chart-bar text-blue-500 mr-2"></i> Document Count Over Time
99
+ </h2>
100
+ <div class="chart-container">
101
+ <canvas id="docCountChart"></canvas>
102
+ </div>
103
+ </div>
104
+ <div class="card bg-white rounded-lg shadow-md p-6">
105
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">
106
+ <i class="fas fa-chart-line text-green-500 mr-2"></i> Indexing Rate Over Time
107
+ </h2>
108
+ <div class="chart-container">
109
+ <canvas id="indexRateChart"></canvas>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
115
+ <!-- Other Charts -->
116
+ <div class="card bg-white rounded-lg shadow-md p-6">
117
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">
118
+ <i class="fas fa-chart-pie text-purple-500 mr-2"></i> Index Distribution
119
+ </h2>
120
+ <div class="chart-container">
121
+ <canvas id="indexDistributionChart"></canvas>
122
+ </div>
123
+ </div>
124
+ <div class="card bg-white rounded-lg shadow-md p-6">
125
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">
126
+ <i class="fas fa-stopwatch text-yellow-500 mr-2"></i> Query Response Times
127
+ </h2>
128
+ <div class="chart-container">
129
+ <canvas id="queryTimeChart"></canvas>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="card bg-white rounded-lg shadow-md p-6 mb-8">
135
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">
136
+ <i class="fas fa-table text-blue-500 mr-2"></i> Recent Documents
137
+ </h2>
138
+ <div class="overflow-x-auto">
139
+ <table class="min-w-full divide-y divide-gray-200">
140
+ <thead class="bg-gray-50">
141
+ <tr>
142
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Index</th>
143
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
144
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
145
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
146
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
147
+ </tr>
148
+ </thead>
149
+ <tbody id="recent-docs" class="bg-white divide-y divide-gray-200">
150
+ <!-- Table rows will be populated here -->
151
+ </tbody>
152
+ </table>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <script>
158
+ document.addEventListener('DOMContentLoaded', function() {
159
+ // Font Awesome for icons
160
+ const faScript = document.createElement('script');
161
+ faScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js';
162
+ document.head.appendChild(faScript);
163
+
164
+ // Sample Elasticsearch data
165
+ const sampleData = {
166
+ summary: {
167
+ totalDocs: 12458,
168
+ indexRate: 1245,
169
+ searchCount: 3421,
170
+ failedQueries: 42
171
+ },
172
+ timeSeries: {
173
+ docCount: {
174
+ labels: generateTimeLabels(7),
175
+ data: generateRandomData(7, 8000, 15000)
176
+ },
177
+ indexRate: {
178
+ labels: generateTimeLabels(7),
179
+ data: generateRandomData(7, 500, 2000)
180
+ }
181
+ },
182
+ indexDistribution: {
183
+ labels: ['logs-2023', 'metrics-2023', 'transactions', 'users', 'products', 'others'],
184
+ data: [35, 25, 15, 10, 8, 7]
185
+ },
186
+ queryTimes: {
187
+ labels: ['<50ms', '50-100ms', '100-200ms', '200-500ms', '500ms-1s', '>1s'],
188
+ data: [45, 30, 15, 6, 3, 1]
189
+ },
190
+ recentDocs: [
191
+ { index: 'logs-2023.06.15', type: 'log', timestamp: '2023-06-15T08:23:45Z', source: 'web-server-1', status: 'success' },
192
+ { index: 'metrics-2023.06', type: 'metric', timestamp: '2023-06-15T08:22:30Z', source: 'system', status: 'success' },
193
+ { index: 'transactions', type: 'txn', timestamp: '2023-06-15T08:21:15Z', source: 'payment-gateway', status: 'success' },
194
+ { index: 'users', type: 'user', timestamp: '2023-06-15T08:20:00Z', source: 'api', status: 'success' },
195
+ { index: 'logs-2023.06.15', type: 'log', timestamp: '2023-06-15T08:19:45Z', source: 'web-server-2', status: 'failed' }
196
+ ]
197
+ };
198
+
199
+ // Initialize charts
200
+ const docCountChart = createTimeSeriesChart('docCountChart', 'Document Count', sampleData.timeSeries.docCount);
201
+ const indexRateChart = createTimeSeriesChart('indexRateChart', 'Indexing Rate (docs/sec)', sampleData.timeSeries.indexRate);
202
+ const indexDistributionChart = createDoughnutChart('indexDistributionChart', sampleData.indexDistribution);
203
+ const queryTimeChart = createBarChart('queryTimeChart', 'Query Response Times', sampleData.queryTimes);
204
+
205
+ // Populate summary cards
206
+ document.getElementById('total-docs').textContent = sampleData.summary.totalDocs.toLocaleString();
207
+ document.getElementById('index-rate').innerHTML = `${sampleData.summary.indexRate.toLocaleString()} <span class="text-sm">docs/sec</span>`;
208
+ document.getElementById('search-count').innerHTML = `${sampleData.summary.searchCount.toLocaleString()} <span class="text-sm">/day</span>`;
209
+ document.getElementById('failed-queries').innerHTML = `${sampleData.summary.failedQueries} <span class="text-sm">(${((sampleData.summary.failedQueries / sampleData.summary.searchCount) * 100).toFixed(1)}%)</span>`;
210
+
211
+ // Populate recent documents table
212
+ const recentDocsTable = document.getElementById('recent-docs');
213
+ sampleData.recentDocs.forEach(doc => {
214
+ const row = document.createElement('tr');
215
+ row.innerHTML = `
216
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${doc.index}</td>
217
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${doc.type}</td>
218
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatDate(doc.timestamp)}</td>
219
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${doc.source}</td>
220
+ <td class="px-6 py-4 whitespace-nowrap text-sm">
221
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${doc.status === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
222
+ ${doc.status}
223
+ </span>
224
+ </td>
225
+ `;
226
+ recentDocsTable.appendChild(row);
227
+ });
228
+
229
+ // Event listeners
230
+ document.getElementById('refresh-btn').addEventListener('click', function() {
231
+ // Simulate data refresh
232
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Refreshing...';
233
+
234
+ setTimeout(() => {
235
+ // Update charts with new random data
236
+ updateChartWithRandomData(docCountChart, 8000, 15000);
237
+ updateChartWithRandomData(indexRateChart, 500, 2000);
238
+
239
+ // Reset button
240
+ this.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Refresh';
241
+
242
+ // Show notification
243
+ showNotification('Data refreshed successfully!', 'success');
244
+ }, 1500);
245
+ });
246
+
247
+ document.getElementById('time-range').addEventListener('change', function() {
248
+ const value = this.value;
249
+ let days = 7;
250
+
251
+ if (value === '24h') days = 1;
252
+ else if (value === '30d') days = 30;
253
+
254
+ // Update time series charts with new time range
255
+ const newLabels = generateTimeLabels(days);
256
+
257
+ docCountChart.data.labels = newLabels;
258
+ docCountChart.data.datasets[0].data = generateRandomData(days, 8000, 15000);
259
+ docCountChart.update();
260
+
261
+ indexRateChart.data.labels = newLabels;
262
+ indexRateChart.data.datasets[0].data = generateRandomData(days, 500, 2000);
263
+ indexRateChart.update();
264
+
265
+ showNotification(`Time range changed to ${this.options[this.selectedIndex].text}`, 'info');
266
+ });
267
+
268
+ // Helper functions
269
+ function generateTimeLabels(days) {
270
+ const labels = [];
271
+ const now = new Date();
272
+
273
+ for (let i = days; i >= 0; i--) {
274
+ const date = new Date(now);
275
+ date.setDate(date.getDate() - i);
276
+ labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
277
+ }
278
+
279
+ return labels;
280
+ }
281
+
282
+ function generateRandomData(count, min, max) {
283
+ const data = [];
284
+ for (let i = 0; i < count; i++) {
285
+ data.push(Math.floor(Math.random() * (max - min + 1)) + min);
286
+ }
287
+ return data;
288
+ }
289
+
290
+ function formatDate(isoString) {
291
+ const date = new Date(isoString);
292
+ return date.toLocaleString('en-US', {
293
+ month: 'short',
294
+ day: 'numeric',
295
+ hour: '2-digit',
296
+ minute: '2-digit'
297
+ });
298
+ }
299
+
300
+ function showNotification(message, type) {
301
+ const notification = document.createElement('div');
302
+ notification.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-md text-white ${
303
+ type === 'success' ? 'bg-green-500' :
304
+ type === 'error' ? 'bg-red-500' : 'bg-blue-500'
305
+ }`;
306
+ notification.innerHTML = `
307
+ <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} mr-2"></i>
308
+ ${message}
309
+ `;
310
+ document.body.appendChild(notification);
311
+
312
+ setTimeout(() => {
313
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
314
+ setTimeout(() => {
315
+ document.body.removeChild(notification);
316
+ }, 500);
317
+ }, 3000);
318
+ }
319
+
320
+ function updateChartWithRandomData(chart, min, max) {
321
+ chart.data.datasets[0].data = generateRandomData(chart.data.labels.length, min, max);
322
+ chart.update();
323
+ }
324
+
325
+ function createTimeSeriesChart(canvasId, label, data) {
326
+ const ctx = document.getElementById(canvasId).getContext('2d');
327
+ return new Chart(ctx, {
328
+ type: 'line',
329
+ data: {
330
+ labels: data.labels,
331
+ datasets: [{
332
+ label: label,
333
+ data: data.data,
334
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
335
+ borderColor: 'rgba(59, 130, 246, 1)',
336
+ borderWidth: 2,
337
+ tension: 0.3,
338
+ fill: true,
339
+ pointBackgroundColor: 'rgba(59, 130, 246, 1)',
340
+ pointRadius: 3,
341
+ pointHoverRadius: 5
342
+ }]
343
+ },
344
+ options: {
345
+ responsive: true,
346
+ maintainAspectRatio: false,
347
+ plugins: {
348
+ legend: {
349
+ display: false
350
+ },
351
+ tooltip: {
352
+ mode: 'index',
353
+ intersect: false
354
+ }
355
+ },
356
+ scales: {
357
+ y: {
358
+ beginAtZero: false,
359
+ grid: {
360
+ drawBorder: false
361
+ }
362
+ },
363
+ x: {
364
+ grid: {
365
+ display: false
366
+ }
367
+ }
368
+ }
369
+ }
370
+ });
371
+ }
372
+
373
+ function createDoughnutChart(canvasId, data) {
374
+ const ctx = document.getElementById(canvasId).getContext('2d');
375
+ return new Chart(ctx, {
376
+ type: 'doughnut',
377
+ data: {
378
+ labels: data.labels,
379
+ datasets: [{
380
+ data: data.data,
381
+ backgroundColor: [
382
+ 'rgba(59, 130, 246, 0.7)',
383
+ 'rgba(16, 185, 129, 0.7)',
384
+ 'rgba(245, 158, 11, 0.7)',
385
+ 'rgba(139, 92, 246, 0.7)',
386
+ 'rgba(220, 38, 38, 0.7)',
387
+ 'rgba(75, 85, 99, 0.7)'
388
+ ],
389
+ borderColor: [
390
+ 'rgba(59, 130, 246, 1)',
391
+ 'rgba(16, 185, 129, 1)',
392
+ 'rgba(245, 158, 11, 1)',
393
+ 'rgba(139, 92, 246, 1)',
394
+ 'rgba(220, 38, 38, 1)',
395
+ 'rgba(75, 85, 99, 1)'
396
+ ],
397
+ borderWidth: 1
398
+ }]
399
+ },
400
+ options: {
401
+ responsive: true,
402
+ maintainAspectRatio: false,
403
+ plugins: {
404
+ legend: {
405
+ position: 'right',
406
+ labels: {
407
+ boxWidth: 12,
408
+ padding: 20
409
+ }
410
+ }
411
+ },
412
+ cutout: '65%'
413
+ }
414
+ });
415
+ }
416
+
417
+ function createBarChart(canvasId, label, data) {
418
+ const ctx = document.getElementById(canvasId).getContext('2d');
419
+ return new Chart(ctx, {
420
+ type: 'bar',
421
+ data: {
422
+ labels: data.labels,
423
+ datasets: [{
424
+ label: label,
425
+ data: data.data,
426
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
427
+ borderColor: 'rgba(59, 130, 246, 1)',
428
+ borderWidth: 1,
429
+ borderRadius: 4
430
+ }]
431
+ },
432
+ options: {
433
+ responsive: true,
434
+ maintainAspectRatio: false,
435
+ plugins: {
436
+ legend: {
437
+ display: false
438
+ }
439
+ },
440
+ scales: {
441
+ y: {
442
+ beginAtZero: true,
443
+ grid: {
444
+ drawBorder: false
445
+ }
446
+ },
447
+ x: {
448
+ grid: {
449
+ display: false
450
+ }
451
+ }
452
+ }
453
+ }
454
+ });
455
+ }
456
+ });
457
+ </script>
458
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=x3v/elastic-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
459
+ </html>