fix(desktop): ensure fulltopic display for all non-base nodes in topi…

…c tree
emqx · Oct 22, 2024 · 53b61e0 · 53b61e0
1 parent ed5a22e
commit 53b61e0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 45 deletions.
diff --git a/src/components/widgets/TreeNodeInfo.vue b/src/components/widgets/TreeNodeInfo.vue
@@ -6,70 +6,50 @@
         <div :key="`label-${index}`">{{ item.label }}</div>
         <div :key="`value-${index}`" class="node-info-item">{{ item.value }}</div>
       </template>
-      <div>{{ $t('connections.subTopics') }}</div>
-      <div class="mt-2">
-        <el-tag
-          type="info"
-          v-for="(topic, index) in getSubTopics(node)"
-          :key="`${topic}-${index}`"
-          size="small"
-          class="mr-2 mb-2"
-        >
-          {{ topic }}
-        </el-tag>
-      </div>
     </div>
-    <!-- Topic node without payload -->
-    <div v-else-if="!node.message || (node.message && checkPayloadEmpty(node.message.payload))">
+    <!-- Full Topic (shown for all nodes except the base node) -->
+    <template v-else>
       <div>{{ $t('connections.fullTopic') }}</div>
       <el-tooltip
         :effect="currentTheme !== 'light' ? 'light' : 'dark'"
-        :disabled="fullTopicPath.length < 20"
+        :disabled="fullTopicPath.length < 25"
         placement="top"
         :content="fullTopicPath"
         :open-delay="500"
       >
         <div ref="topicPath" class="node-info-item ellipsis">{{ fullTopicPath }}</div>
       </el-tooltip>
+    </template>
+    <!-- Topic node without payload -->
+    <div v-if="!node.message || (node.message && checkPayloadEmpty(node.message.payload))">
       <template v-if="node.subTopicCount === 0 && node.messageCount > 0">
         <el-alert class="no-payload-alert" type="warning" :closable="false">{{
           $t('viewer.noPayloadFromTopicNode')
         }}</el-alert>
       </template>
-      <template v-else>
-        <div>{{ $t('connections.subTopics') }}</div>
-        <div class="mt-2">
-          <el-tag
-            v-for="(topic, index) in getSubTopics(node)"
-            type="info"
-            :key="`${topic}-${index}`"
-            size="small"
-            class="mr-2 mb-2"
-          >
-            {{ topic }}
-          </el-tag>
-        </div>
-      </template>
+    </div>
+    <!-- Sub topics section -->
+    <div v-if="node.subTopicCount > 0">
+      <div>{{ $t('connections.subTopics') }}</div>
+      <div class="mt-2">
+        <el-tag
+          v-for="(topic, index) in getSubTopics(node)"
+          type="info"
+          :key="`${topic}-${index}`"
+          size="small"
+          class="mr-2 mb-2"
+        >
+          {{ topic }}
+        </el-tag>
+      </div>
     </div>
     <!-- Topic node with payload -->
-    <div v-else>
-      <div>{{ $t('connections.fullTopic') }}</div>
-      <el-tooltip
-        :effect="currentTheme !== 'light' ? 'light' : 'dark'"
-        :disabled="fullTopicPath.length < 25"
-        placement="top"
-        :content="fullTopicPath"
-        :open-delay="500"
-      >
-        <div ref="topicPath" class="node-info-item ellipsis">{{ fullTopicPath }}</div>
-      </el-tooltip>
+    <div v-if="node.message && !checkPayloadEmpty(node.message.payload)">
       <div>{{ $t('connections.receivedTime') }}</div>
-      <div v-if="node.message" class="node-info-item">{{ node.message.createAt }}</div>
+      <div class="node-info-item">{{ node.message.createAt }}</div>
       <div class="flex justify-between">
-        <span
-          >Payload <el-tag v-if="node.message && node.message.retain" type="info" size="mini">Retained</el-tag></span
-        >
-        <span v-if="node.message">QoS: {{ node.message.qos }}</span>
+        <span>Payload <el-tag v-if="node.message.retain" type="info" size="mini">Retained</el-tag></span>
+        <span>QoS: {{ node.message.qos }}</span>
       </div>
       <pre
         class="payload-container mt-2 mb-2"

diff --git a/src/components/widgets/TreeView.vue b/src/components/widgets/TreeView.vue
@@ -74,6 +74,7 @@
       width="96%"
       class="visualize-tree-dialog"
       :btn-disabled="true"
+      @close="handleVisualizeTreeDialogClose"
     >
       <el-select size="small" v-model="selectedTreeRoot" class="my-3 ml-3" :style="{ width: '250px' }">
         <el-option
@@ -256,6 +257,10 @@ export default class TreeView extends Vue {
     this.$emit('clear-tree')
   }
 
+  private handleVisualizeTreeDialogClose() {
+    this.selectedTreeRoot = null
+  }
+
   private mounted() {
     // Keep the filter text when data changes
     this.$nextTick(() => {