Persist Topic Tree Data

src/assets/scss/mixins.scss

@@ -155,3 +155,29 @@
     border-bottom: 1px solid var(--color-border-default);
   }
 }
+
+@mixin el-dropdown-menu-common {
+  .el-dropdown-menu {
+    .iconfont,
+    [class^='el-icon-'] {
+      font-size: 18px;
+      font-weight: 400;
+    }
+    .el-dropdown-menu__item {
+      display: flex;
+      align-items: center;
+      .iconfont,
+      [class^='el-icon-'] {
+        margin-right: 10px;
+      }
+    }
+    li.delete-item {
+      display: block;
+      color: var(--color-minor-red);
+      &:hover {
+        color: var(--color-minor-red);
+        background: var(--color-light-red);
+      }
+    }
+  }
+}

src/components/ClearUpHistoryData.vue

@@ -32,14 +32,20 @@ export default class ClearUpHistoryData extends Vue {
   }
 
   private async cleanHistoryData() {
-    const { connectionService, historyMessageHeaderService, historyMessagePayloadService, messageService } =
-      useServices()
+    const {
+      connectionService,
+      historyMessageHeaderService,
+      historyMessagePayloadService,
+      messageService,
+      topicNodeService,
+    } = useServices()
 
     await Promise.all([
       connectionService.cleanLeatest(),
       historyMessageHeaderService.clean(),
       historyMessagePayloadService.clean(),
       messageService.cleanAll(),
+      topicNodeService.clearTree(),
     ])
 
     this.$message.success(this.$tc('connections.cleanHistorySuccess'))

src/components/charts/Tree.vue

@@ -0,0 +1,112 @@
+<template>
+  <div :id="id" :style="{ width, height }"></div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import * as echarts from 'echarts/core'
+import { TooltipComponent, LegendComponent } from 'echarts/components'
+import { TreeChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([TooltipComponent, LegendComponent, TreeChart, CanvasRenderer])
+
+@Component
+export default class TreeChartComponent extends Vue {
+  @Prop({ required: true }) public id!: string
+  @Prop({ default: '400px' }) public height!: string
+  @Prop({ default: '100%' }) public width!: string
+  @Prop({ required: true }) public data!: TopicTreeNode[]
+  @Prop({ default: 'vertical' }) public layout!: 'horizontal' | 'vertical'
+  @Prop({ default: 7 }) public symbolSize!: number
+  @Prop({ default: 'transparent' }) public backgroundColor!: string
+  @Prop({ default: () => ({}) }) public tooltipFormatter!: (params: any) => string | Record<string, any>
+
+  @Getter('currentTheme') private theme!: string
+
+  private chart: echarts.ECharts | null = null
+
+  @Watch('data', { deep: true })
+  @Watch('layout')
+  @Watch('symbolSize')
+  private onDataChanged() {
+    this.updateChart()
+  }
+
+  private generateChartOption(): any {
+    const treeData = this.data
+    console.log(treeData)
+    return {
+      backgroundColor: this.backgroundColor,
+      tooltip: {
+        trigger: 'item',
+        triggerOn: 'mousemove',
+        formatter: this.tooltipFormatter,
+      },
+      legend: {
+        data: treeData.map((tree) => ({
+          name: tree.label,
+          icon: 'rectangle',
+        })),
+      },
+      series: treeData.map((tree) => ({
+        type: 'tree',
+        data: [tree],
+        symbolSize: this.symbolSize,
+        label: {
+          position: 'left',
+          verticalAlign: 'middle',
+          align: 'right',
+        },
+        leaves: {
+          label: {
+            position: 'right',
+            verticalAlign: 'middle',
+            align: 'left',
+          },
+        },
+        emphasis: {
+          focus: 'descendant',
+        },
+        expandAndCollapse: true,
+        animationDuration: 550,
+        animationDurationUpdate: 750,
+      })),
+    }
+  }
+
+  private initChart() {
+    const chartDom = document.getElementById(this.id)
+    if (!chartDom) return
+
+    this.chart = echarts.init(chartDom, this.theme !== 'light' ? 'dark' : 'light')
+    this.updateChart()
+  }
+
+  private updateChart() {
+    if (this.chart) {
+      const option = this.generateChartOption()
+      this.chart.setOption(option)
+    }
+  }
+
+  mounted() {
+    this.initChart()
+    window.addEventListener('resize', this.handleResize)
+  }
+
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  }
+
+  private handleResize = () => {
+    if (this.chart) {
+      this.chart.resize()
+    }
+  }
+}
+</script>

src/components/widgets/TreeNodeInfo.vue

@@ -20,7 +20,7 @@
       </div>
     </div>
     <!-- Topic node without payload -->
-    <div v-else-if="checkPayloadEmpty(node.latestMessage)">
+    <div v-else-if="!node.message || (node.message && checkPayloadEmpty(node.message.payload))">
       <div>{{ $t('connections.fullTopic') }}</div>
       <el-tooltip
         :effect="currentTheme !== 'light' ? 'light' : 'dark'"
@@ -31,18 +31,25 @@
       >
         <div ref="topicPath" class="node-info-item ellipsis">{{ fullTopicPath }}</div>
       </el-tooltip>
-      <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 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>
     <!-- Topic node with payload -->
     <div v-else>
@@ -57,10 +64,12 @@
         <div ref="topicPath" class="node-info-item ellipsis">{{ fullTopicPath }}</div>
       </el-tooltip>
       <div>{{ $t('connections.receivedTime') }}</div>
-      <div class="node-info-item">{{ node.time }}</div>
+      <div v-if="node.message" class="node-info-item">{{ node.message.createAt }}</div>
       <div class="flex justify-between">
-        <span>Payload <el-tag v-if="node.retain" type="info" size="mini">Retained</el-tag></span>
-        <span>QoS: {{ node.qos }}</span>
+        <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>
       </div>
       <pre
         class="payload-container mt-2 mb-2"
@@ -88,16 +97,16 @@ export default class TreeNodeInfo extends Vue {
   }
 
   get latestMessage(): string {
-    const message = this.node.latestMessage || ''
+    const payload = this.node.message?.payload || ''
     if (this.payloadFormat === 'json') {
-      return jsonStringify(jsonParse(message.toString()), null, 2)
+      return jsonStringify(jsonParse(payload.toString()), null, 2)
     }
-    return message.toString()
+    return payload.toString()
   }
 
   get payloadFormat(): string {
     try {
-      const message = this.node.latestMessage || ''
+      const message = this.node.message?.payload || ''
       JSON.parse(message.toString())
       return 'json'
     } catch (e) {
@@ -177,6 +186,12 @@ body.night {
     margin: 6px 0 12px 0;
     border-radius: 8px;
   }
+  .no-payload-alert {
+    padding: 6px 12px;
+    .el-alert__content {
+      padding: 0;
+    }
+  }
   .payload-container {
     max-height: 320px;
     overflow-y: auto;