| | <!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> |
