Add WebSocket Log feature to Services Status View
- Introduced a WebSocket Log section in the Services Status View, allowing users to view real-time logs. - Updated localization files for both German and English to include WebSocket Log messages. - Enhanced the UI with a button to open the WebSocket Log dialog, improving user interaction and monitoring capabilities.
This commit is contained in:
Torsten Schulz (local)
263
frontend/src/dialogues/admin/WebSocketLogDialog.vue
Normal file
263
frontend/src/dialogues/admin/WebSocketLogDialog.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<DialogWidget ref="dialog" :title="$t('admin.servicesStatus.daemon.websocketLog.title')"
|
||||
:show-close="true" :buttons="buttons" name="WebSocketLogDialog" :modal="true" :isTitleTranslated="true"
|
||||
:width="'90%'" :height="'80%'">
|
||||
<div class="websocket-log-container">
|
||||
<div class="log-controls">
|
||||
<button @click="fetchLog" class="refresh-btn" :disabled="loading">
|
||||
{{ loading ? $t('admin.servicesStatus.daemon.websocketLog.loading') : $t('admin.servicesStatus.daemon.websocketLog.refresh') }}
|
||||
</button>
|
||||
<span v-if="logEntries.length > 0" class="entry-count">
|
||||
{{ $t('admin.servicesStatus.daemon.websocketLog.entryCount', { count: logEntries.length }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div v-if="logEntries.length === 0 && !loading" class="no-entries">
|
||||
{{ $t('admin.servicesStatus.daemon.websocketLog.noEntries') }}
|
||||
</div>
|
||||
<div v-else class="log-entries">
|
||||
<table class="log-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('admin.servicesStatus.daemon.websocketLog.timestamp') }}</th>
|
||||
<th>{{ $t('admin.servicesStatus.daemon.websocketLog.direction') }}</th>
|
||||
<th>{{ $t('admin.servicesStatus.daemon.websocketLog.peer') }}</th>
|
||||
<th>{{ $t('admin.servicesStatus.daemon.websocketLog.connUser') }}</th>
|
||||
<th>{{ $t('admin.servicesStatus.daemon.websocketLog.targetUser') }}</th>
|
||||
<th>{{ $t('admin.servicesStatus.daemon.websocketLog.event') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(entry, index) in logEntries" :key="index" class="log-entry">
|
||||
<td>{{ formatTimestamp(entry.timestamp) }}</td>
|
||||
<td>
|
||||
<span :class="['direction-badge', entry.direction === 'broker->client' ? 'incoming' : 'outgoing']">
|
||||
{{ entry.direction }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ entry.peer || '-' }}</td>
|
||||
<td>{{ entry.conn_user || '-' }}</td>
|
||||
<td>{{ entry.target_user || '-' }}</td>
|
||||
<td>{{ entry.event || '-' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</DialogWidget>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DialogWidget from '@/components/DialogWidget.vue';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'WebSocketLogDialog',
|
||||
components: { DialogWidget },
|
||||
data() {
|
||||
return {
|
||||
logEntries: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
buttons: [
|
||||
{ text: 'admin.servicesStatus.daemon.websocketLog.close', action: () => this.closeDialog() }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['daemonSocket'])
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.dialog.open();
|
||||
this.fetchLog();
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.dialog.close();
|
||||
},
|
||||
async fetchLog() {
|
||||
if (!this.daemonSocket || this.daemonSocket.readyState !== WebSocket.OPEN) {
|
||||
this.error = this.$t('admin.servicesStatus.daemon.websocketLog.notConnected');
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const message = JSON.stringify({
|
||||
event: 'getWebsocketLog'
|
||||
});
|
||||
this.daemonSocket.send(message);
|
||||
// Die Antwort wird über handleDaemonMessage verarbeitet
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Senden von getWebsocketLog:', err);
|
||||
this.error = this.$t('admin.servicesStatus.daemon.websocketLog.sendError');
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleDaemonMessage(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.event === 'getWebsocketLogResponse') {
|
||||
this.logEntries = data.entries || [];
|
||||
this.loading = false;
|
||||
this.error = null;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Verarbeiten der Daemon-Nachricht:', err);
|
||||
this.error = this.$t('admin.servicesStatus.daemon.websocketLog.parseError');
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
formatTimestamp(timestamp) {
|
||||
if (!timestamp) return '-';
|
||||
const date = new Date(timestamp * 1000);
|
||||
return date.toLocaleString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// Event-Listener für Daemon-Nachrichten registrieren
|
||||
if (this.daemonSocket) {
|
||||
this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
// Event-Listener entfernen
|
||||
if (this.daemonSocket) {
|
||||
this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
daemonSocket(newSocket, oldSocket) {
|
||||
// Event-Listener bei Socket-Änderung aktualisieren
|
||||
if (oldSocket) {
|
||||
oldSocket.removeEventListener('message', this.handleDaemonMessage);
|
||||
}
|
||||
if (newSocket) {
|
||||
newSocket.addEventListener('message', this.handleDaemonMessage);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.websocket-log-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 8px 16px;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.refresh-btn:hover:not(:disabled) {
|
||||
background: #1565c0;
|
||||
}
|
||||
|
||||
.refresh-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.entry-count {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 10px;
|
||||
background: #ffebee;
|
||||
border: 1px solid #f44336;
|
||||
border-radius: 4px;
|
||||
color: #c62828;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.no-entries {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.log-entries {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.log-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f5f5f5;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.log-table th {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #ddd;
|
||||
font-weight: bold;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.log-table td {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.log-entry:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.direction-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.direction-badge.incoming {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.direction-badge.outgoing {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user