fix(webui): display Kafka key convert from base64 using UTF-8

fix(webui): navigating to event from search result

Author: marle3003

webui/e2e/mocks/http_handler.js

@@ -594,15 +594,15 @@ function getSearchResults() {
                 type: 'Event',
                 domain: 'Swagger Petstore',
                 title: "http://127.0.0.1:18080/pet",
-                fragments: ['<mark>GET</mark>'],
+                fragments: ['<mark>POST</mark>'],
                 time: '2025-05-23T08:49:25.482366+01:00',
                 params: {
                     type: 'event',
                     'traits.namespace': 'http',
                     'traits.name': 'Swagger Petstore',
                     'traits.path': '/pet',
-                    'traits.method': 'GET',
-                    id: '4242'
+                    'traits.method': 'POST',
+                    id: '9e058601-562a-4063-a3b2-066ba624893a'
                 }
             },
             {
@@ -649,7 +649,7 @@ function getSearchResults() {
                     'traits.topic': 'mokapi.shop.products',
                     'traits.type': 'message',
                     'traits.partition': '0',
-                    id: '123456'
+                    id: '5d549ffe-97cd-477d-8db6-27ed4963c08d'
                 }
             },
             {
@@ -667,11 +667,12 @@ function getSearchResults() {
                 domain: 'Mail Testserver',
                 title: "A test mail",
                 fragments: ['<mark>test</mark> <mark>mail</mark>'],
+                time: '2025-05-01T08:49:25.482366+01:00',
                 params: {
                     type: 'event',
                     'traits.namespace': 'mail',
                     'traits.name': 'Mail Testserver',
-                    id: '8832'
+                    id: '273cd167-f5a5-4da1-969e-d44213686491'
                 }
             },
             {
@@ -689,6 +690,7 @@ function getSearchResults() {
                 domain: 'LDAP Testserver',
                 title: "(objectClass=user)",
                 fragments: ['(objectClass=<mark>user</mark>)'],
+                time: '2025-05-01T08:49:25.482366+01:00',
                 params: {
                     type: 'event',
                     'traits.namespace': 'ldap',

webui/e2e/mocks/kafka.js

@@ -344,7 +344,7 @@ export let events = [
         data: {
             offset: 1,
             key: {
-                value: 'TEST1'
+                binary: 'VEVTVDEgw6Qg8JCAgA=='
             },
             message: {
                 value: JSON.stringify(

webui/src/components/dashboard/Search.vue

@@ -84,7 +84,7 @@ async function navigateToSearchResult(result: any) {
     case 'ldap':
       return router.push({ name: 'ldapService', params: result.params })
     case 'event':
-      switch (result.params.namespace) {
+      switch (result.params['traits.namespace']) {
         case 'http':
           return router.push({ name: 'httpRequest', params: result.params })
         case 'kafka':

webui/src/components/dashboard/http/Request.vue

@@ -36,6 +36,7 @@ const operation = computed(() => {
 
 const eventId = computed(() => {
   const id = route.params.id
+  console.log('Route param id:', id)
   if (!id) {
     return undefined
   }
@@ -146,7 +147,7 @@ function isNumber(value: string): boolean {
         </div>
     </div>
     <loading v-if="!data || data?.isLoading"></loading>
-    <div v-if="data && !data.event && !data.isLoading">
+    <div v-if="!eventId || (data && !data.event && !data.isLoading)">
         <message message="HTTP Request not found"></message>
     </div>
 </template>

webui/src/components/dashboard/search/Event.vue

@@ -38,6 +38,8 @@ function isMail() {
             <div v-if="item.time" class="text-muted">⏱ {{ format(item.time) }}</div>
             <span v-if="isKafka()" class="fw-semibold text-dark">Message received</span>
             <span v-if="isHttp()" class="fw-semibold text-dark">Request received</span>
+            <span v-if="isMail()" class="fw-semibold text-dark">Mail received</span>
+            <span v-if="isLdap()" class="fw-semibold text-dark">Search received</span>
         </div>
 
         <h6 class="mb-1 mt-1">

webui/src/composables/usePrettyText.ts

@@ -39,12 +39,12 @@ export function usePrettyText() {
     }
 
     function fromBinary(encoded: string) {
-        const binary = atob(encoded);
-        const bytes = new Uint8Array(binary.length);
-        for (let i = 0; i < bytes.length; i++) {
-            bytes[i] = binary.charCodeAt(i);
-        }
-        return String.fromCharCode(...new Uint16Array(bytes.buffer));
+        return new TextDecoder().decode(base64ToBytes(encoded))
+    }
+
+    function base64ToBytes(base64: string) {
+        const binString = atob(base64);
+        return Uint8Array.from(binString, (m) => m.codePointAt(0)!);
     }
 
     return { parseUrls, adaptiveTruncate, fromBinary }