610 lines
15 KiB
Vue
610 lines
15 KiB
Vue
<template>
|
|
<div class="monitoring-tab">
|
|
<div class="controls">
|
|
<div class="input-group">
|
|
<label for="notificationChannel">Notification Channel</label>
|
|
<input
|
|
id="notificationChannel"
|
|
v-model="notificationChannel"
|
|
type="text"
|
|
placeholder="Enter notification channel"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="notificationPayload">Notification Payload (JSON)</label>
|
|
<textarea
|
|
id="notificationPayload"
|
|
v-model="notificationPayload"
|
|
placeholder='{"message": "Hello", "type": "info"}'
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="triggerEvent">Trigger Event</label>
|
|
<select id="triggerEvent" v-model="triggerEvent">
|
|
<option value="user_joined">User Joined</option>
|
|
<option value="user_left">User Left</option>
|
|
<option value="message_sent">Message Sent</option>
|
|
<option value="connection_lost">Connection Lost</option>
|
|
<option value="server_restart">Server Restart</option>
|
|
<option value="custom">Custom Event</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="customEvent">Custom Event Name</label>
|
|
<input
|
|
id="customEvent"
|
|
v-model="customEvent"
|
|
type="text"
|
|
placeholder="custom_event_name"
|
|
:disabled="triggerEvent !== 'custom'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button
|
|
class="btn btn-primary"
|
|
:disabled="!isConnected || !notificationChannel.trim() || !notificationPayload.trim()"
|
|
@click="triggerNotification"
|
|
>
|
|
Trigger Notification
|
|
</button>
|
|
|
|
<button
|
|
class="btn btn-info"
|
|
:disabled="!isConnected"
|
|
@click="getStats"
|
|
>
|
|
Refresh Stats
|
|
</button>
|
|
|
|
<button
|
|
class="btn btn-secondary"
|
|
:disabled="!isConnected"
|
|
@click="getMonitoringData"
|
|
>
|
|
Get Monitoring Data
|
|
</button>
|
|
|
|
<button
|
|
class="btn btn-warning"
|
|
@click="clearMonitoringData"
|
|
>
|
|
Clear Data
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Connection Health -->
|
|
<div class="health-section">
|
|
<h3>Connection Health</h3>
|
|
<div class="health-grid">
|
|
<div class="health-item">
|
|
<div class="health-label">Status</div>
|
|
<div class="health-value" :class="connectionHealthClass">
|
|
{{ connectionHealthText }}
|
|
</div>
|
|
</div>
|
|
<div class="health-item">
|
|
<div class="health-label">Latency</div>
|
|
<div class="health-value">{{ connectionState.connectionLatency }}ms</div>
|
|
</div>
|
|
<div class="health-item">
|
|
<div class="health-label">Messages Sent</div>
|
|
<div class="health-value">{{ connectionState.messagesSent }}</div>
|
|
</div>
|
|
<div class="health-item">
|
|
<div class="health-label">Messages Received</div>
|
|
<div class="health-value">{{ connectionState.messagesReceived }}</div>
|
|
</div>
|
|
<div class="health-item">
|
|
<div class="health-label">Reconnect Attempts</div>
|
|
<div class="health-value">{{ connectionState.reconnectAttempts }}</div>
|
|
</div>
|
|
<div class="health-item">
|
|
<div class="health-label">Connection Time</div>
|
|
<div class="health-value">{{ connectionState.uptime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Server Statistics -->
|
|
<div class="stats-section" v-if="stats">
|
|
<h3>Server Statistics</h3>
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-label">Connected Clients</div>
|
|
<div class="stat-value">{{ stats.connected_clients }}</div>
|
|
<div class="stat-change" :class="getStatChangeClass('connected_clients')">
|
|
{{ getStatChange('connected_clients') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Unique IPs</div>
|
|
<div class="stat-value">{{ stats.unique_ips }}</div>
|
|
<div class="stat-change" :class="getStatChangeClass('unique_ips')">
|
|
{{ getStatChange('unique_ips') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Static Clients</div>
|
|
<div class="stat-value">{{ stats.static_clients }}</div>
|
|
<div class="stat-change" :class="getStatChangeClass('static_clients')">
|
|
{{ getStatChange('static_clients') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Active Rooms</div>
|
|
<div class="stat-value">{{ stats.active_rooms }}</div>
|
|
<div class="stat-change" :class="getStatChangeClass('active_rooms')">
|
|
{{ getStatChange('active_rooms') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Message Queue</div>
|
|
<div class="stat-value">{{ stats.message_queue_size }}</div>
|
|
<div class="stat-change" :class="getStatChangeClass('message_queue_size')">
|
|
{{ getStatChange('message_queue_size') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Queue Workers</div>
|
|
<div class="stat-value">{{ stats.queue_workers }}</div>
|
|
<div class="stat-change" :class="getStatChangeClass('queue_workers')">
|
|
{{ getStatChange('queue_workers') }}
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Server Uptime</div>
|
|
<div class="stat-value">{{ formatUptime(stats.uptime) }}</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">Last Updated</div>
|
|
<div class="stat-value">{{ formatTime(stats.timestamp) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monitoring Data -->
|
|
<div class="monitoring-data-section" v-if="monitoringData">
|
|
<h3>Monitoring Data</h3>
|
|
<div class="monitoring-content">
|
|
<pre>{{ JSON.stringify(monitoringData, null, 2) }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification History -->
|
|
<div class="notification-history-section">
|
|
<h3>Notification History</h3>
|
|
<div class="notification-history">
|
|
<div
|
|
v-for="(notification, index) in notificationHistory.slice(0, 10)"
|
|
:key="index"
|
|
class="notification-item"
|
|
>
|
|
<div class="notification-header">
|
|
<div class="notification-channel">{{ notification.channel }}</div>
|
|
<div class="notification-time">{{ formatTime(notification.timestamp) }}</div>
|
|
</div>
|
|
<div class="notification-payload">
|
|
<pre>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
|
|
</div>
|
|
</div>
|
|
<div v-if="notificationHistory.length === 0" class="no-notifications">
|
|
No notifications sent yet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useWebSocket } from '../../composables/useWebSocket'
|
|
|
|
const {
|
|
isConnected,
|
|
connectionState,
|
|
stats,
|
|
monitoringData,
|
|
triggerNotification: triggerNotificationFn,
|
|
getStats,
|
|
getMonitoringData
|
|
} = useWebSocket()
|
|
|
|
const notificationChannel = ref('')
|
|
const notificationPayload = ref('')
|
|
const triggerEvent = ref('user_joined')
|
|
const customEvent = ref('')
|
|
const notificationHistory = ref<Array<{
|
|
channel: string
|
|
payload: any
|
|
timestamp: number
|
|
}>>([])
|
|
|
|
const connectionHealthClass = computed(() => {
|
|
switch (connectionState.connectionHealth) {
|
|
case 'excellent': return 'health-excellent'
|
|
case 'good': return 'health-good'
|
|
case 'warning': return 'health-warning'
|
|
case 'poor': return 'health-poor'
|
|
default: return 'health-poor'
|
|
}
|
|
})
|
|
|
|
const connectionHealthText = computed(() => {
|
|
switch (connectionState.connectionHealth) {
|
|
case 'excellent': return 'Excellent'
|
|
case 'good': return 'Good'
|
|
case 'warning': return 'Warning'
|
|
case 'poor': return 'Poor'
|
|
default: return 'Unknown'
|
|
}
|
|
})
|
|
|
|
const triggerNotification = () => {
|
|
if (!notificationChannel.value.trim() || !notificationPayload.value.trim()) return
|
|
|
|
try {
|
|
const payload = JSON.parse(notificationPayload.value)
|
|
const eventName = triggerEvent.value === 'custom' ? customEvent.value : triggerEvent.value
|
|
|
|
triggerNotificationFn(notificationChannel.value.trim(), {
|
|
...payload,
|
|
event: eventName,
|
|
timestamp: Date.now()
|
|
})
|
|
|
|
// Add to history
|
|
notificationHistory.value.unshift({
|
|
channel: notificationChannel.value.trim(),
|
|
payload,
|
|
timestamp: Date.now()
|
|
})
|
|
|
|
// Clear form
|
|
notificationChannel.value = ''
|
|
notificationPayload.value = ''
|
|
|
|
} catch (error) {
|
|
alert('Invalid JSON payload: ' + (error instanceof Error ? error.message : String(error)))
|
|
}
|
|
}
|
|
|
|
const clearMonitoringData = () => {
|
|
notificationHistory.value = []
|
|
}
|
|
|
|
const formatTime = (timestamp: number) => {
|
|
return new Date(timestamp).toLocaleString()
|
|
}
|
|
|
|
const formatUptime = (uptime: number) => {
|
|
const seconds = Math.floor(uptime / 1000)
|
|
const hours = Math.floor(seconds / 3600)
|
|
const minutes = Math.floor((seconds % 3600) / 60)
|
|
const secs = seconds % 60
|
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
// Mock stat changes for demonstration
|
|
const previousStats = ref<any>(null)
|
|
|
|
const getStatChange = (statName: string) => {
|
|
if (!previousStats.value || !stats.value) return ''
|
|
|
|
const current = stats.value[statName as keyof typeof stats.value]
|
|
const previous = previousStats.value[statName as keyof typeof previousStats.value]
|
|
|
|
if (current > previous) return `+${current - previous}`
|
|
if (current < previous) return `-${previous - current}`
|
|
return '0'
|
|
}
|
|
|
|
const getStatChangeClass = (statName: string) => {
|
|
if (!previousStats.value || !stats.value) return ''
|
|
|
|
const current = stats.value[statName as keyof typeof stats.value]
|
|
const previous = previousStats.value[statName as keyof typeof previousStats.value]
|
|
|
|
if (current > previous) return 'stat-increase'
|
|
if (current < previous) return 'stat-decrease'
|
|
return 'stat-unchanged'
|
|
}
|
|
|
|
// Update previous stats when new stats arrive
|
|
const updatePreviousStats = () => {
|
|
if (stats.value) {
|
|
previousStats.value = { ...stats.value }
|
|
}
|
|
}
|
|
|
|
// Watch for stats changes
|
|
import { watch } from 'vue'
|
|
watch(stats, updatePreviousStats, { deep: true })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.monitoring-tab {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
padding: 24px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.input-group label {
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.input-group input,
|
|
.input-group select,
|
|
.input-group textarea {
|
|
padding: 12px 16px;
|
|
border: 2px solid #e9ecef;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.input-group input:focus,
|
|
.input-group select:focus,
|
|
.input-group textarea:focus {
|
|
outline: none;
|
|
border-color: #1976d2;
|
|
box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
|
|
}
|
|
|
|
.input-group input:disabled {
|
|
background: #e9ecef;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #1976d2;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #1565c0;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
|
}
|
|
|
|
.btn-info {
|
|
background: #17a2b8;
|
|
color: white;
|
|
}
|
|
|
|
.btn-info:hover:not(:disabled) {
|
|
background: #138496;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #5a6268;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
|
}
|
|
|
|
.btn-warning {
|
|
background: #FFC107;
|
|
color: #212529;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
background: #e0a800;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.health-section,
|
|
.stats-section {
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.health-section h3,
|
|
.stats-section h3 {
|
|
margin-bottom: 16px;
|
|
color: #333;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.health-grid,
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.health-item,
|
|
.stat-item {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
text-align: center;
|
|
}
|
|
|
|
.health-label,
|
|
.stat-label {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.health-value {
|
|
color: #333;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-value {
|
|
color: #333;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-increase {
|
|
color: #28a745;
|
|
}
|
|
|
|
.stat-decrease {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.stat-unchanged {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.monitoring-data-section {
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.monitoring-data-section h3 {
|
|
margin-bottom: 16px;
|
|
color: #333;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.monitoring-content {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.monitoring-content pre {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: #333;
|
|
}
|
|
|
|
.notification-history-section {
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.notification-history-section h3 {
|
|
margin-bottom: 16px;
|
|
color: #333;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.notification-history {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.notification-item {
|
|
margin: 16px 0;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notification-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.notification-channel {
|
|
font-weight: 600;
|
|
color: #1976d2;
|
|
}
|
|
|
|
.notification-time {
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.notification-payload {
|
|
padding: 16px;
|
|
}
|
|
|
|
.notification-payload pre {
|
|
background: #f8f9fa;
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
font-size: 12px;
|
|
color: #333;
|
|
margin: 0;
|
|
}
|
|
|
|
.no-notifications {
|
|
text-align: center;
|
|
color: #666;
|
|
font-style: italic;
|
|
padding: 40px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.controls {
|
|
grid-template-columns: 1fr;
|
|
padding: 16px;
|
|
}
|
|
|
|
.health-grid,
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|