Hugging Face's logo

Spaces:
vrvrv
/
monitoring-dashboard-draft
Running

App Files Community
vrvrv commited on
Commit
0ec95eb
·
verified ·
1 Parent(s): 83ea8e6

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +302 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Monitoring Dashboard Draft
3
- emoji: 💻
4
- colorFrom: gray
5
- colorTo: red
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: monitoring-dashboard-draft
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,302 @@
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>Monitoring System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10
+ <style>
11
+ .risk-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 5px; }
12
+ .risk-1 { background-color: #10B981; }
13
+ .risk-2 { background-color: #F59E0B; }
14
+ .risk-3 { background-color: #EF4444; }
15
+ .status-running { color: #3B82F6; }
16
+ .status-done { color: #10B981; }
17
+ </style>
18
+ </head>
19
+ <body class="bg-gray-50">
20
+ <div id="app" class="container mx-auto p-4">
21
+ <div class="flex justify-between items-center mb-4">
22
+ <h1 class="text-xl font-bold">Monitoring Results</h1>
23
+ <div>
24
+ <button @click="rerunSelected" class="bg-blue-500 text-white px-3 py-1 rounded mr-2">
25
+ <i class="fas fa-sync-alt mr-1"></i> Rerun
26
+ </button>
27
+ <button @click="showAddModal = true" class="bg-green-500 text-white px-3 py-1 rounded">
28
+ <i class="fas fa-plus mr-1"></i> Add
29
+ </button>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="bg-white shadow rounded overflow-auto">
34
+ <table class="min-w-full divide-y divide-gray-200">
35
+ <thead class="bg-gray-100">
36
+ <tr>
37
+ <th class="px-4 py-2 text-left"><input type="checkbox" @change="toggleAll" v-model="allSelected"></th>
38
+ <th class="px-4 py-2 text-left">SQR MID</th>
39
+ <th class="px-4 py-2 text-left">Risk</th>
40
+ <th class="px-4 py-2 text-left">Status</th>
41
+ <th class="px-4 py-2 text-left">Messages</th>
42
+ <th class="px-4 py-2 text-left">Report</th>
43
+ <th class="px-4 py-2 text-left">Last Updated</th>
44
+ <th class="px-4 py-2 text-left">Config</th>
45
+ </tr>
46
+ </thead>
47
+ <tbody class="divide-y divide-gray-200">
48
+ <tr v-for="(item, index) in monitoringResults" :key="item.sqr_mid">
49
+ <td class="px-4 py-2"><input type="checkbox" v-model="selectedItems" :value="item.sqr_mid"></td>
50
+ <td class="px-4 py-2">{{ item.sqr_mid }}</td>
51
+ <td class="px-4 py-2">
52
+ <span class="risk-dot" :class="'risk-' + item.risk_level"></span>
53
+ {{ item.risk_level }}
54
+ </td>
55
+ <td class="px-4 py-2" :class="'status-' + (item.status || 'done')">
56
+ <i v-if="item.status === 'running'" class="fas fa-spinner fa-spin mr-1"></i>
57
+ {{ item.status || 'done' }}
58
+ </td>
59
+ <td class="px-4 py-2">
60
+ <button @click="toggleExpand('recent_messages', index)" class="text-gray-600 hover:text-blue-500">
61
+ <i class="fas fa-file-alt"></i>
62
+ </button>
63
+ <div v-if="expanded.recent_messages === index" class="bg-gray-100 p-2 mt-1 rounded text-sm">
64
+ <pre>{{ JSON.stringify(item.recent_messages, null, 2) }}</pre>
65
+ </div>
66
+ </td>
67
+ <td class="px-4 py-2">
68
+ <button @click="toggleExpand('report', index)" class="text-gray-600 hover:text-blue-500">
69
+ <i class="fas fa-file-alt"></i>
70
+ </button>
71
+ <div v-if="expanded.report === index" class="bg-gray-100 p-2 mt-1 rounded text-sm">
72
+ {{ item.report }}
73
+ </div>
74
+ </td>
75
+ <td class="px-4 py-2">{{ formatDate(item.last_updated) }}</td>
76
+ <td class="px-4 py-2">
77
+ <button @click="openConfigModal(item)" class="text-gray-600 hover:text-blue-500">
78
+ <i class="fas fa-cog"></i> Edit
79
+ </button>
80
+ </td>
81
+ </tr>
82
+ </tbody>
83
+ </table>
84
+ </div>
85
+
86
+ <!-- Add Modal -->
87
+ <div v-if="showAddModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
88
+ <div class="bg-white rounded-lg p-4 w-full max-w-md">
89
+ <h3 class="font-bold mb-4">Add New Monitoring</h3>
90
+ <div class="mb-4">
91
+ <label class="block mb-1">SQR MID</label>
92
+ <input type="text" v-model="newSqrMid" class="border p-2 w-full rounded">
93
+ </div>
94
+ <div class="flex justify-end">
95
+ <button @click="showAddModal = false" class="bg-gray-300 px-4 py-2 rounded mr-2">Close</button>
96
+ <button @click="addNewMonitoring" class="bg-green-500 text-white px-4 py-2 rounded">Add & Monitor</button>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Config Modal -->
102
+ <div v-if="showConfigModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
103
+ <div class="bg-white rounded-lg p-4 w-full max-w-md">
104
+ <h3 class="font-bold mb-4">Edit Monitoring Config</h3>
105
+ <div class="mb-4">
106
+ <label class="block mb-1">SQR MID</label>
107
+ <div class="p-2 bg-gray-100 rounded">{{ currentConfig.sqr_mid }}</div>
108
+ </div>
109
+ <div class="mb-4">
110
+ <label class="block mb-1">Monitoring Period (hours)</label>
111
+ <select v-model="currentConfig.monitoring_period_hour" class="border p-2 w-full rounded">
112
+ <option v-for="n in 24" :value="n">{{ n }} hour{{ n > 1 ? 's' : '' }}</option>
113
+ </select>
114
+ </div>
115
+ <div class="mb-4">
116
+ <label class="block mb-1">Recent Message Count</label>
117
+ <select v-model="currentConfig.monitoring_message_count" class="border p-2 w-full rounded">
118
+ <option v-for="n in 5" :value="n * 10">{{ n * 10 }} messages</option>
119
+ </select>
120
+ </div>
121
+ <div class="flex justify-end">
122
+ <button @click="showConfigModal = false" class="bg-gray-300 px-4 py-2 rounded mr-2">Cancel</button>
123
+ <button @click="saveConfig" class="bg-blue-500 text-white px-4 py-2 rounded">Save</button>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <script>
130
+ new Vue({
131
+ el: '#app',
132
+ data: {
133
+ monitoringResults: [
134
+ {
135
+ sqr_mid: 'MID001',
136
+ risk_level: 1,
137
+ recent_messages: [{id: 1, message: "Test message 1"}, {id: 2, message: "Test message 2"}],
138
+ report: "This is a sample report for MID001",
139
+ last_updated: '2023-05-15T10:30:00Z'
140
+ },
141
+ {
142
+ sqr_mid: 'MID002',
143
+ risk_level: 2,
144
+ recent_messages: [{id: 1, message: "Warning message 1"}, {id: 2, message: "Warning message 2"}],
145
+ report: "This is a sample report for MID002 with warnings",
146
+ last_updated: '2023-05-15T11:45:00Z'
147
+ },
148
+ {
149
+ sqr_mid: 'MID003',
150
+ risk_level: 3,
151
+ recent_messages: [{id: 1, message: "Error message 1"}, {id: 2, message: "Error message 2"}],
152
+ report: "This is a sample report for MID003 with critical errors",
153
+ last_updated: '2023-05-15T09:15:00Z'
154
+ }
155
+ ],
156
+ monitoringConfigs: [
157
+ {sqr_mid: 'MID001', monitoring_period_hour: 6, monitoring_message_count: 20},
158
+ {sqr_mid: 'MID002', monitoring_period_hour: 12, monitoring_message_count: 30},
159
+ {sqr_mid: 'MID003', monitoring_period_hour: 24, monitoring_message_count: 50}
160
+ ],
161
+ selectedItems: [],
162
+ allSelected: false,
163
+ expanded: {
164
+ recent_messages: null,
165
+ report: null
166
+ },
167
+ showAddModal: false,
168
+ showConfigModal: false,
169
+ newSqrMid: '',
170
+ currentConfig: {
171
+ sqr_mid: '',
172
+ monitoring_period_hour: 1,
173
+ monitoring_message_count: 10
174
+ }
175
+ },
176
+ methods: {
177
+ formatDate(dateString) {
178
+ return new Date(dateString).toLocaleString();
179
+ },
180
+ toggleAll() {
181
+ this.allSelected = !this.allSelected;
182
+ this.selectedItems = this.allSelected
183
+ ? this.monitoringResults.map(item => item.sqr_mid)
184
+ : [];
185
+ },
186
+ toggleExpand(type, index) {
187
+ this.expanded[type] = this.expanded[type] === index ? null : index;
188
+ },
189
+ rerunSelected() {
190
+ if (this.selectedItems.length === 0) {
191
+ alert('Please select at least one item to rerun');
192
+ return;
193
+ }
194
+
195
+ // Update status to running for selected items
196
+ this.monitoringResults.forEach(item => {
197
+ if (this.selectedItems.includes(item.sqr_mid)) {
198
+ this.$set(item, 'status', 'running');
199
+ }
200
+ });
201
+
202
+ // Simulate server callback after 2 seconds
203
+ setTimeout(() => {
204
+ this.monitoringResults.forEach(item => {
205
+ if (this.selectedItems.includes(item.sqr_mid)) {
206
+ this.$set(item, 'status', 'done');
207
+ this.$set(item, 'last_updated', new Date().toISOString());
208
+
209
+ // Simulate updated data
210
+ if (item.risk_level === 3) item.risk_level = 1;
211
+ else item.risk_level++;
212
+
213
+ item.recent_messages = [
214
+ {id: 1, message: "Updated message 1 at " + new Date().toLocaleTimeString()},
215
+ {id: 2, message: "Updated message 2 at " + new Date().toLocaleTimeString()}
216
+ ];
217
+
218
+ item.report = "Updated report at " + new Date().toLocaleString();
219
+ }
220
+ });
221
+
222
+ this.selectedItems = [];
223
+ this.allSelected = false;
224
+ }, 2000);
225
+ },
226
+ addNewMonitoring() {
227
+ if (!this.newSqrMid.trim()) {
228
+ alert('Please enter a valid SQR MID');
229
+ return;
230
+ }
231
+
232
+ if (this.monitoringResults.some(item => item.sqr_mid === this.newSqrMid)) {
233
+ alert('This SQR MID is already being monitored');
234
+ return;
235
+ }
236
+
237
+ // Add new monitoring config
238
+ this.monitoringConfigs.push({
239
+ sqr_mid: this.newSqrMid,
240
+ monitoring_period_hour: 1,
241
+ monitoring_message_count: 10
242
+ });
243
+
244
+ // Add to monitoring results with initial status
245
+ this.monitoringResults.push({
246
+ sqr_mid: this.newSqrMid,
247
+ risk_level: 0,
248
+ recent_messages: [],
249
+ report: "Initializing monitoring...",
250
+ last_updated: new Date().toISOString(),
251
+ status: 'running'
252
+ });
253
+
254
+ // Simulate server callback after 2 seconds
255
+ setTimeout(() => {
256
+ const index = this.monitoringResults.findIndex(item => item.sqr_mid === this.newSqrMid);
257
+ if (index !== -1) {
258
+ this.$set(this.monitoringResults[index], 'status', 'done');
259
+ this.$set(this.monitoringResults[index], 'risk_level', Math.floor(Math.random() * 3) + 1);
260
+ this.$set(this.monitoringResults[index], 'recent_messages', [
261
+ {id: 1, message: "Initial message 1"},
262
+ {id: 2, message: "Initial message 2"}
263
+ ]);
264
+ this.$set(this.monitoringResults[index], 'report', "Initial monitoring report");
265
+ }
266
+ }, 2000);
267
+
268
+ this.showAddModal = false;
269
+ this.newSqrMid = '';
270
+ },
271
+ openConfigModal(item) {
272
+ const config = this.monitoringConfigs.find(c => c.sqr_mid === item.sqr_mid);
273
+ this.currentConfig = config
274
+ ? {...config}
275
+ : {
276
+ sqr_mid: item.sqr_mid,
277
+ monitoring_period_hour: 1,
278
+ monitoring_message_count: 10
279
+ };
280
+ this.showConfigModal = true;
281
+ },
282
+ saveConfig() {
283
+ // Find existing config or add new one
284
+ const index = this.monitoringConfigs.findIndex(c => c.sqr_mid === this.currentConfig.sqr_mid);
285
+ if (index !== -1) {
286
+ this.$set(this.monitoringConfigs, index, {...this.currentConfig});
287
+ } else {
288
+ this.monitoringConfigs.push({...this.currentConfig});
289
+ }
290
+
291
+ this.showConfigModal = false;
292
+ }
293
+ },
294
+ watch: {
295
+ selectedItems(newVal) {
296
+ this.allSelected = newVal.length === this.monitoringResults.length;
297
+ }
298
+ }
299
+ });
300
+ </script>
301
+ <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=vrvrv/monitoring-dashboard-draft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
302
+ </html>