Topics Tree

src/assets/scss/base.scss

@@ -1,5 +1,6 @@
 @import './variable.scss';
 @import './mixins.scss';
+@import './atom.scss';
 
 html,
 body,

src/assets/scss/element/element-reset.scss

@@ -319,11 +319,6 @@
   background-color: var(--color-bg-primary);
 }
 
-/* Tree */
-.el-tree-node__content > .el-tree-node__expand-icon {
-  padding: 3px;
-}
-
 /* Skeleton */
 .el-skeleton.is-animated .el-skeleton__item {
   background: linear-gradient(
@@ -366,3 +361,16 @@
     color: var(--color-text-default);
   }
 }
+
+/* Tabs */
+.el-tabs {
+  .el-tabs__item {
+    color: var(--color-text-title);
+    &.is-active {
+      color: var(--color-main-green);
+    }
+  }
+  .el-tabs__nav-wrap::after {
+    background-color: var(--color-border-default);
+  }
+}

src/components/Leftbar.vue

@@ -5,45 +5,17 @@
         <img src="@/assets/images/app-logo.png" alt="app-logo" />
       </a>
     </div>
-    <section class="leftbar-center">
-      <template v-if="!isNewWindow">
-        <div :class="[{ active: isConnection }, 'leftbar-item']">
-          <a href="javascript:;" @click="routeToPage('/recent_connections')">
-            <i class="iconfont icon-connections"></i>
-          </a>
-        </div>
-        <div :class="[{ active: isCreate }, 'leftbar-item']">
-          <a href="javascript:;" @click="routeToPage('/recent_connections/0?oper=create')">
-            <i class="iconfont icon-new"></i>
-          </a>
-        </div>
-        <div :class="[{ active: isScript }, 'leftbar-item']">
-          <a href="javascript:;" @click="routeToPage('/script')">
-            <i class="iconfont icon-script"></i>
-          </a>
-        </div>
-        <div :class="[{ active: isLog }, 'leftbar-item']">
-          <a href="javascript:;" @click="routeToPage('/log')">
-            <i class="iconfont icon-log"></i>
-          </a>
-        </div>
-      </template>
-    </section>
-
-    <section v-if="!isNewWindow" class="leftbar-bottom">
-      <div :class="[{ active: isSettings }, 'leftbar-item']">
-        <a href="javascript:;" @click="routeToPage('/settings')">
-          <i class="iconfont icon-settings"></i>
+    <section v-if="!isNewWindow" class="leftbar-center">
+      <div v-for="item in menuItems" :key="item.path" :class="['leftbar-item', { active: isActive(item) }]">
+        <a href="javascript:;" @click="routeToPage(item.path, item.query)">
+          <i :class="['iconfont', item.icon]"></i>
         </a>
       </div>
-      <div :class="[{ active: isHelp }, 'leftbar-item']">
-        <a href="javascript:;" @click="routeToPage('/help')">
-          <i class="iconfont icon-mqtt"></i>
-        </a>
-      </div>
-      <div :class="[{ active: isAbout }, 'leftbar-item']">
-        <a href="javascript:;" @click="routeToPage('/about')">
-          <i class="iconfont icon-about"></i>
+    </section>
+    <section v-if="!isNewWindow" class="leftbar-bottom">
+      <div v-for="item in bottomItems" :key="item.path" :class="['leftbar-item', { active: isActive(item) }]">
+        <a href="javascript:;" @click="routeToPage(item.path)">
+          <i :class="['iconfont', item.icon]"></i>
         </a>
       </div>
     </section>
@@ -55,44 +27,54 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import gaCustomLinks from '@/utils/gaCustomLinks'
 
+interface MenuItem {
+  path: string
+  icon: string
+  name?: string
+  query?: { [key: string]: string }
+}
+
 @Component
 export default class Leftbar extends Vue {
   @Getter('currentLang') private getterLang!: Language
 
+  private menuItems: MenuItem[] = [
+    { path: '/recent_connections', icon: 'icon-connections', name: 'Connections' },
+    { path: '/recent_connections/0', icon: 'icon-new', query: { oper: 'create' }, name: 'ConnectionDetails' },
+    { path: '/viewer', icon: 'icon-viewer' },
+    { path: '/script', icon: 'icon-script' },
+    { path: '/log', icon: 'icon-log' },
+  ]
+
+  private bottomItems: MenuItem[] = [
+    { path: '/settings', icon: 'icon-settings' },
+    { path: '/help', icon: 'icon-mqtt' },
+    { path: '/about', icon: 'icon-about' },
+  ]
+
   get siteLink(): string {
     return gaCustomLinks(this.getterLang).leftBarLogo
   }
-  get isConnection(): boolean {
-    return ['Connections', 'ConnectionDetails'].includes(this.$route.name || '') && this.$route.query.oper !== 'create'
-  }
-  get isCreate(): boolean {
-    return this.$route.name === 'ConnectionDetails' && this.$route.query.oper === 'create'
-  }
-  get isSettings(): boolean {
-    return this.$route.path === '/settings'
-  }
-  get isAbout(): boolean {
-    return this.$route.path === '/about'
-  }
-  get isScript(): boolean {
-    return this.$route.path === '/script'
-  }
-  get isLog(): boolean {
-    return this.$route.path === '/log'
-  }
+
   get isNewWindow(): boolean {
     return this.$route.name === 'newWindow'
   }
-  get isHelp(): boolean {
-    return this.$route.path === '/help'
+
+  private isActive(item: MenuItem): boolean {
+    if (item.name === 'Connections' || item.name === 'ConnectionDetails') {
+      return (
+        ['Connections', 'ConnectionDetails'].includes(this.$route.name || '') &&
+        (item.name === 'Connections' ? this.$route.query.oper !== 'create' : this.$route.query.oper === 'create')
+      )
+    }
+    if (item.path === '/viewer') {
+      return this.$route.path.startsWith('/viewer')
+    }
+    return this.$route.path === item.path
   }
 
-  private routeToPage(path: string) {
-    this.$router
-      .push({
-        path,
-      })
-      .catch(() => {})
+  private routeToPage(path: string, query?: { [key: string]: string }) {
+    this.$router.push({ path, query }).catch(() => {})
   }
 }
 </script>
@@ -114,7 +96,7 @@ export default class Leftbar extends Vue {
     flex: 1;
   }
   & > .leftbar-center {
-    flex: 3;
+    flex: 4;
   }
   & > .leftbar-bottom {
     flex: 0;

src/components/widgets/TreeNodeInfo.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="tree-node-info">
+    <!-- Base node -->
+    <div class="tree-node-info-title" v-if="isBaseNode">
+      <template v-for="(item, index) in connectionInfoItems">
+        <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 v-for="topic in getSubTopics(node)" :key="topic" size="small" class="mr-2 mb-2">
+          {{ topic }}
+        </el-tag>
+      </div>
+    </div>
+    <!-- Topic node without payload -->
+    <div v-else-if="!node.latestMessage">
+      <div>{{ $t('connections.fullTopic') }}</div>
+      <el-tooltip
+        :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+        :disabled="fullTopicPath.length < 20"
+        placement="top"
+        :content="fullTopicPath"
+        :open-delay="500"
+      >
+        <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 in getSubTopics(node)" :key="topic" 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>{{ $t('connections.receivedTime') }}</div>
+      <div class="node-info-item">{{ node.time }}</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>
+      </div>
+      <pre
+        class="payload-container mt-2 mb-2"
+      ><code :class="`language-${payloadFormat}`" v-html="latestMessage"></code></pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import { findSubTopics, findFullTopicPath } from '@/utils/topicTree'
+import Prism from 'prismjs'
+
+@Component
+export default class TreeNodeInfo extends Vue {
+  @Prop() private node!: TopicTreeData
+  @Prop() private treeData!: TopicTreeData[]
+
+  @Getter('currentTheme') private currentTheme!: Theme
+
+  get isBaseNode() {
+    return this.node.connectionInfo !== undefined
+  }
+
+  get latestMessage(): string {
+    if (this.payloadFormat === 'json') {
+      return JSON.stringify(JSON.parse(this.node.latestMessage || ''), null, 2)
+    }
+    return this.node.latestMessage || ''
+  }
+
+  get payloadFormat(): string {
+    try {
+      JSON.parse(this.latestMessage)
+      return 'json'
+    } catch (e) {
+      return 'plaintext'
+    }
+  }
+
+  get fullTopicPath(): string {
+    return this.getFullTopicPath(this.node)
+  }
+
+  get connectionInfoItems() {
+    if (!this.node.connectionInfo) return []
+    const { name, clientId } = this.node.connectionInfo
+    return [
+      { label: this.$t('connections.name'), value: name },
+      { label: this.$t('connections.brokerIP'), value: this.getFullHost(this.node.connectionInfo) },
+      { label: 'Client ID', value: clientId },
+    ]
+  }
+
+  private getFullHost(connectionInfo: ConnectionModel) {
+    const { protocol, host, port, path } = connectionInfo
+    let fullHost = `${protocol}://${host}:${port}`
+    if (protocol && ['ws', 'wss'].includes(protocol) && path) {
+      fullHost += `${path}`
+    }
+    return fullHost
+  }
+
+  private getSubTopics(node: TopicTreeData): string[] {
+    return findSubTopics(node)
+  }
+
+  private getFullTopicPath(node: TopicTreeData): string {
+    const fullPath = findFullTopicPath(this.treeData, node.label)
+    return fullPath || node.label
+  }
+
+  private mounted() {
+    this.$nextTick(() => {
+      Prism.highlightAllUnder(this.$el)
+    })
+  }
+
+  private updated() {
+    this.$nextTick(() => {
+      Prism.highlightAllUnder(this.$el)
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/mixins.scss';
+
+body.light {
+  @import '@/assets/scss/theme/custom/prism-one-light.scss';
+}
+body.dark,
+body.night {
+  @import '@/assets/scss/theme/custom/prism-one-dark.scss';
+}
+
+.tree-node-info {
+  .node-info-item {
+    background-color: var(--color-bg-select_lang);
+    padding: 6px 12px;
+    margin: 6px 0 12px 0;
+    border-radius: 8px;
+  }
+  .payload-container {
+    max-height: 320px;
+    overflow-y: auto;
+    border: 1px solid var(--color-border-default);
+    border-radius: 8px;
+    width: 100%;
+    pre {
+      margin: 0;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+  }
+}
+</style>