Enhance WebSocketLogDialog to display enriched user information

- Updated the WebSocketLogDialog to use enriched log entries with resolved usernames for connection and target users.
- Implemented batch retrieval of user information from the API to improve user display in logs.
- Added error handling for user data fetching and fallback logic for missing usernames.

frontend/src/dialogues/admin/WebSocketLogDialog.vue

@@ -30,7 +30,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(entry, index) in logEntries" :key="index" class="log-entry">
+            <tr v-for="(entry, index) in enrichedLogEntries" :key="index" class="log-entry">
               <td>{{ formatTimestamp(entry.timestamp) }}</td>
               <td>
                 <span :class="['direction-badge', entry.direction === 'broker->client' ? 'incoming' : 'outgoing']">
@@ -38,8 +38,8 @@
                 </span>
               </td>
               <td>{{ entry.peer || '-' }}</td>
-              <td>{{ entry.conn_user || '-' }}</td>
+              <td>{{ entry.conn_user_display || '-' }}</td>
-              <td>{{ entry.target_user || '-' }}</td>
+              <td>{{ entry.target_user_display || '-' }}</td>
               <td>{{ entry.event || '-' }}</td>
             </tr>
           </tbody>
@@ -52,6 +52,7 @@
 <script>
 import DialogWidget from '@/components/DialogWidget.vue';
 import { mapState } from 'vuex';
+import apiClient from '@/utils/axios.js';
 
 export default {
   name: 'WebSocketLogDialog',
@@ -61,13 +62,22 @@ export default {
       logEntries: [],
       loading: false,
       error: null,
+      userMap: {}, // Map von User-ID zu Benutzername
       buttons: [
         { text: 'admin.servicesStatus.daemon.websocketLog.close', action: () => this.closeDialog() }
       ]
     };
   },
   computed: {
-    ...mapState(['daemonSocket'])
+    ...mapState(['daemonSocket']),
+    enrichedLogEntries() {
+      // Erstelle Log-Einträge mit aufgelösten Benutzernamen
+      return this.logEntries.map(entry => ({
+        ...entry,
+        conn_user_display: this.getUsername(entry.conn_user),
+        target_user_display: this.getUsername(entry.target_user)
+      }));
+    }
   },
   methods: {
     open() {
@@ -98,11 +108,32 @@ export default {
         this.loading = false;
       }
     },
-    handleDaemonMessage(event) {
+    async handleDaemonMessage(event) {
       try {
         const data = JSON.parse(event.data);
         if (data.event === 'getWebsocketLogResponse') {
           this.logEntries = data.entries || [];
+          
+          // Sammle alle eindeutigen User-IDs aus den Log-Einträgen
+          const userIds = new Set();
+          this.logEntries.forEach(entry => {
+            if (entry.conn_user) userIds.add(entry.conn_user);
+            if (entry.target_user) userIds.add(entry.target_user);
+          });
+          
+          // Lade User-Informationen für alle User-IDs
+          if (userIds.size > 0) {
+            try {
+              const response = await apiClient.get('/api/admin/users/batch', {
+                params: { ids: Array.from(userIds) }
+              });
+              this.userMap = response.data;
+            } catch (err) {
+              console.error('Fehler beim Abrufen der User-Informationen:', err);
+              // Fallback: Verwende User-IDs, wenn Abruf fehlschlägt
+            }
+          }
+          
           this.loading = false;
           this.error = null;
         }
@@ -112,6 +143,15 @@ export default {
         this.loading = false;
       }
     },
+    getUsername(userId) {
+      if (!userId) return null;
+      const userInfo = this.userMap[userId];
+      if (userInfo && userInfo.username) {
+        return userInfo.username;
+      }
+      // Fallback: Zeige ersten Teil der ID, wenn User nicht gefunden wurde
+      return userId.length > 8 ? userId.substring(0, 8) + '...' : userId;
+    },
     formatTimestamp(timestamp) {
       if (!timestamp) return '-';
       const date = new Date(timestamp * 1000);