wip

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

core/frontend/src/components/zenoh-inspector/ZenohInspector.vue

@@ -15,7 +15,7 @@
             <v-card-title>
               <v-text-field
                 v-model="topic_filter"
-                label="Search Topics"
+                :label="`Search Topics (${filtered_topics.length})`"
                 clearable
                 prepend-inner-icon="mdi-magnify"
                 single-line
@@ -41,10 +41,10 @@
                           {{ item }}
                           <v-chip
                             x-small
-                            :color="topic_liveliness[item] ? 'green' : 'red'"
+                            :color="topic_liveliness[item] === undefined ? 'grey' : (topic_liveliness[item] ? 'green' : 'red')"
                             class="ml-2"
                           >
-                            {{ topic_liveliness[item] ? 'Alive' : 'Dead' }}
+                            {{ topic_liveliness[item] === undefined ? 'Unknown' : (topic_liveliness[item] ? 'Alive' : 'Dead') }}
                           </v-chip>
                           <v-chip
                             x-small
@@ -90,10 +90,10 @@
           <v-card-title>
             {{ selected_topic }}
             <v-chip
-              :color="topic_liveliness[selected_topic] ? 'green' : 'red'"
+              :color="topic_liveliness[selected_topic] === undefined ? 'grey' : (topic_liveliness[selected_topic] ? 'green' : 'red')"
               class="ml-2"
             >
-              {{ topic_liveliness[selected_topic] ? 'Alive' : 'Dead' }}
+              {{ topic_liveliness[selected_topic] === undefined ? 'Unknown' : (topic_liveliness[selected_topic] ? 'Alive' : 'Dead') }}
             </v-chip>
             <v-chip
               color="blue"
@@ -171,27 +171,25 @@ export default Vue.extend({
     formatMessage(message: ZenohMessage | null): string {
       if (!message) return 'No messages received yet'
 
+      // Create the base message object
+      const formattedMessage = {
+        topic: message.topic,
+        timestamp: message.timestamp.toLocaleString(),
+        liveliness: this.topic_liveliness[message.topic] === undefined ? 'Unknown' :
+                   (this.topic_liveliness[message.topic] ? 'Alive' : 'Dead'),
+        topic_type: this.topic_types[message.topic] || 'Unknown',
+        message_type: this.topic_typs[message.topic] || 'Unknown',
+        payload: message.payload
+      }
+
+      // Try to parse the payload as JSON if possible
       try {
-        const parsedPayload = JSON.parse(message.payload)
-        return JSON.stringify({
-          topic: message.topic,
-          timestamp: message.timestamp.toLocaleString(),
-          liveliness: this.topic_liveliness[message.topic] ? 'Alive' : 'Dead',
-          topic_type: this.topic_types[message.topic] || 'Unknown',
-          message_type: this.topic_typs[message.topic] || 'Unknown',
-          payload: parsedPayload
-        }, null, 2)
-      } catch (e) {
-        // If payload is not valid JSON, return the raw message
-        return JSON.stringify({
-          topic: message.topic,
-          timestamp: message.timestamp.toLocaleString(),
-          liveliness: this.topic_liveliness[message.topic] ? 'Alive' : 'Dead',
-          topic_type: this.topic_types[message.topic] || 'Unknown',
-          message_type: this.topic_typs[message.topic] || 'Unknown',
-          payload: message.payload
-        }, null, 2)
+        formattedMessage.payload = JSON.parse(message.payload)
+      } catch (exception) {
+        // Keep the raw payload if it's not valid JSON
       }
+
+      return JSON.stringify(formattedMessage, null, 2)
     },
     async setupZenoh() {
       try {