638 lines
15 KiB
Vue
638 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());
|
|
|
|
// 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] as number;
|
|
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>
|