| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Monitoring System</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <style> |
| .risk-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 5px; } |
| .risk-1 { background-color: #10B981; } |
| .risk-2 { background-color: #F59E0B; } |
| .risk-3 { background-color: #EF4444; } |
| .status-running { color: #3B82F6; } |
| .status-done { color: #10B981; } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div id="app" class="container mx-auto p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h1 class="text-xl font-bold">Monitoring Results</h1> |
| <div> |
| <button @click="rerunSelected" class="bg-blue-500 text-white px-3 py-1 rounded mr-2"> |
| <i class="fas fa-sync-alt mr-1"></i> Rerun |
| </button> |
| <button @click="showAddModal = true" class="bg-green-500 text-white px-3 py-1 rounded"> |
| <i class="fas fa-plus mr-1"></i> Add |
| </button> |
| </div> |
| </div> |
|
|
| <div class="bg-white shadow rounded overflow-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="px-4 py-2 text-left"><input type="checkbox" @change="toggleAll" v-model="allSelected"></th> |
| <th class="px-4 py-2 text-left">SQR MID</th> |
| <th class="px-4 py-2 text-left">Risk</th> |
| <th class="px-4 py-2 text-left">Status</th> |
| <th class="px-4 py-2 text-left">Messages</th> |
| <th class="px-4 py-2 text-left">Report</th> |
| <th class="px-4 py-2 text-left">Last Updated</th> |
| <th class="px-4 py-2 text-left">Config</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr v-for="(item, index) in monitoringResults" :key="item.sqr_mid"> |
| <td class="px-4 py-2"><input type="checkbox" v-model="selectedItems" :value="item.sqr_mid"></td> |
| <td class="px-4 py-2">{{ item.sqr_mid }}</td> |
| <td class="px-4 py-2"> |
| <span class="risk-dot" :class="'risk-' + item.risk_level"></span> |
| {{ item.risk_level }} |
| </td> |
| <td class="px-4 py-2" :class="'status-' + (item.status || 'done')"> |
| <i v-if="item.status === 'running'" class="fas fa-spinner fa-spin mr-1"></i> |
| {{ item.status || 'done' }} |
| </td> |
| <td class="px-4 py-2"> |
| <button @click="toggleExpand('recent_messages', index)" class="text-gray-600 hover:text-blue-500"> |
| <i class="fas fa-file-alt"></i> |
| </button> |
| <div v-if="expanded.recent_messages === index" class="bg-gray-100 p-2 mt-1 rounded text-sm"> |
| <pre>{{ JSON.stringify(item.recent_messages, null, 2) }}</pre> |
| </div> |
| </td> |
| <td class="px-4 py-2"> |
| <button @click="toggleExpand('report', index)" class="text-gray-600 hover:text-blue-500"> |
| <i class="fas fa-file-alt"></i> |
| </button> |
| <div v-if="expanded.report === index" class="bg-gray-100 p-2 mt-1 rounded text-sm"> |
| {{ item.report }} |
| </div> |
| </td> |
| <td class="px-4 py-2">{{ formatDate(item.last_updated) }}</td> |
| <td class="px-4 py-2"> |
| <button @click="openConfigModal(item)" class="text-gray-600 hover:text-blue-500"> |
| <i class="fas fa-cog"></i> Edit |
| </button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
|
|
| |
| <div v-if="showAddModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg p-4 w-full max-w-md"> |
| <h3 class="font-bold mb-4">Add New Monitoring</h3> |
| <div class="mb-4"> |
| <label class="block mb-1">SQR MID</label> |
| <input type="text" v-model="newSqrMid" class="border p-2 w-full rounded"> |
| </div> |
| <div class="flex justify-end"> |
| <button @click="showAddModal = false" class="bg-gray-300 px-4 py-2 rounded mr-2">Close</button> |
| <button @click="addNewMonitoring" class="bg-green-500 text-white px-4 py-2 rounded">Add & Monitor</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div v-if="showConfigModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"> |
| <div class="bg-white rounded-lg p-4 w-full max-w-md"> |
| <h3 class="font-bold mb-4">Edit Monitoring Config</h3> |
| <div class="mb-4"> |
| <label class="block mb-1">SQR MID</label> |
| <div class="p-2 bg-gray-100 rounded">{{ currentConfig.sqr_mid }}</div> |
| </div> |
| <div class="mb-4"> |
| <label class="block mb-1">Monitoring Period (hours)</label> |
| <select v-model="currentConfig.monitoring_period_hour" class="border p-2 w-full rounded"> |
| <option v-for="n in 24" :value="n">{{ n }} hour{{ n > 1 ? 's' : '' }}</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block mb-1">Recent Message Count</label> |
| <select v-model="currentConfig.monitoring_message_count" class="border p-2 w-full rounded"> |
| <option v-for="n in 5" :value="n * 10">{{ n * 10 }} messages</option> |
| </select> |
| </div> |
| <div class="flex justify-end"> |
| <button @click="showConfigModal = false" class="bg-gray-300 px-4 py-2 rounded mr-2">Cancel</button> |
| <button @click="saveConfig" class="bg-blue-500 text-white px-4 py-2 rounded">Save</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| new Vue({ |
| el: '#app', |
| data: { |
| monitoringResults: [ |
| { |
| sqr_mid: 'MID001', |
| risk_level: 1, |
| recent_messages: [{id: 1, message: "Test message 1"}, {id: 2, message: "Test message 2"}], |
| report: "This is a sample report for MID001", |
| last_updated: '2023-05-15T10:30:00Z' |
| }, |
| { |
| sqr_mid: 'MID002', |
| risk_level: 2, |
| recent_messages: [{id: 1, message: "Warning message 1"}, {id: 2, message: "Warning message 2"}], |
| report: "This is a sample report for MID002 with warnings", |
| last_updated: '2023-05-15T11:45:00Z' |
| }, |
| { |
| sqr_mid: 'MID003', |
| risk_level: 3, |
| recent_messages: [{id: 1, message: "Error message 1"}, {id: 2, message: "Error message 2"}], |
| report: "This is a sample report for MID003 with critical errors", |
| last_updated: '2023-05-15T09:15:00Z' |
| } |
| ], |
| monitoringConfigs: [ |
| {sqr_mid: 'MID001', monitoring_period_hour: 6, monitoring_message_count: 20}, |
| {sqr_mid: 'MID002', monitoring_period_hour: 12, monitoring_message_count: 30}, |
| {sqr_mid: 'MID003', monitoring_period_hour: 24, monitoring_message_count: 50} |
| ], |
| selectedItems: [], |
| allSelected: false, |
| expanded: { |
| recent_messages: null, |
| report: null |
| }, |
| showAddModal: false, |
| showConfigModal: false, |
| newSqrMid: '', |
| currentConfig: { |
| sqr_mid: '', |
| monitoring_period_hour: 1, |
| monitoring_message_count: 10 |
| } |
| }, |
| methods: { |
| formatDate(dateString) { |
| return new Date(dateString).toLocaleString(); |
| }, |
| toggleAll() { |
| this.allSelected = !this.allSelected; |
| this.selectedItems = this.allSelected |
| ? this.monitoringResults.map(item => item.sqr_mid) |
| : []; |
| }, |
| toggleExpand(type, index) { |
| this.expanded[type] = this.expanded[type] === index ? null : index; |
| }, |
| rerunSelected() { |
| if (this.selectedItems.length === 0) { |
| alert('Please select at least one item to rerun'); |
| return; |
| } |
| |
| |
| this.monitoringResults.forEach(item => { |
| if (this.selectedItems.includes(item.sqr_mid)) { |
| this.$set(item, 'status', 'running'); |
| } |
| }); |
| |
| |
| setTimeout(() => { |
| this.monitoringResults.forEach(item => { |
| if (this.selectedItems.includes(item.sqr_mid)) { |
| this.$set(item, 'status', 'done'); |
| this.$set(item, 'last_updated', new Date().toISOString()); |
| |
| |
| if (item.risk_level === 3) item.risk_level = 1; |
| else item.risk_level++; |
| |
| item.recent_messages = [ |
| {id: 1, message: "Updated message 1 at " + new Date().toLocaleTimeString()}, |
| {id: 2, message: "Updated message 2 at " + new Date().toLocaleTimeString()} |
| ]; |
| |
| item.report = "Updated report at " + new Date().toLocaleString(); |
| } |
| }); |
| |
| this.selectedItems = []; |
| this.allSelected = false; |
| }, 2000); |
| }, |
| addNewMonitoring() { |
| if (!this.newSqrMid.trim()) { |
| alert('Please enter a valid SQR MID'); |
| return; |
| } |
| |
| if (this.monitoringResults.some(item => item.sqr_mid === this.newSqrMid)) { |
| alert('This SQR MID is already being monitored'); |
| return; |
| } |
| |
| |
| this.monitoringConfigs.push({ |
| sqr_mid: this.newSqrMid, |
| monitoring_period_hour: 1, |
| monitoring_message_count: 10 |
| }); |
| |
| |
| this.monitoringResults.push({ |
| sqr_mid: this.newSqrMid, |
| risk_level: 0, |
| recent_messages: [], |
| report: "Initializing monitoring...", |
| last_updated: new Date().toISOString(), |
| status: 'running' |
| }); |
| |
| |
| setTimeout(() => { |
| const index = this.monitoringResults.findIndex(item => item.sqr_mid === this.newSqrMid); |
| if (index !== -1) { |
| this.$set(this.monitoringResults[index], 'status', 'done'); |
| this.$set(this.monitoringResults[index], 'risk_level', Math.floor(Math.random() * 3) + 1); |
| this.$set(this.monitoringResults[index], 'recent_messages', [ |
| {id: 1, message: "Initial message 1"}, |
| {id: 2, message: "Initial message 2"} |
| ]); |
| this.$set(this.monitoringResults[index], 'report', "Initial monitoring report"); |
| } |
| }, 2000); |
| |
| this.showAddModal = false; |
| this.newSqrMid = ''; |
| }, |
| openConfigModal(item) { |
| const config = this.monitoringConfigs.find(c => c.sqr_mid === item.sqr_mid); |
| this.currentConfig = config |
| ? {...config} |
| : { |
| sqr_mid: item.sqr_mid, |
| monitoring_period_hour: 1, |
| monitoring_message_count: 10 |
| }; |
| this.showConfigModal = true; |
| }, |
| saveConfig() { |
| |
| const index = this.monitoringConfigs.findIndex(c => c.sqr_mid === this.currentConfig.sqr_mid); |
| if (index !== -1) { |
| this.$set(this.monitoringConfigs, index, {...this.currentConfig}); |
| } else { |
| this.monitoringConfigs.push({...this.currentConfig}); |
| } |
| |
| this.showConfigModal = false; |
| } |
| }, |
| watch: { |
| selectedItems(newVal) { |
| this.allSelected = newVal.length === this.monitoringResults.length; |
| } |
| } |
| }); |
| </script> |
| <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> |
| </html> |
