feat(overview): show cluster name

emqx · Sep 10, 2024 · f9cd057 · f9cd057
1 parent bbe9e4a
commit f9cd057
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/hooks/useClusterNodes.ts b/src/hooks/useClusterNodes.ts
@@ -4,6 +4,8 @@ import _ from 'lodash'
 import { compareVersions } from 'compare-versions'
 import { loadNodes } from '@/api/common'
 import { NodeInfo } from '@/types/dashboard'
+import { getClusterNodes } from '@/api/common'
+import type { GetCluster200 } from '@/types/schemas/cluster.schemas'
 
 interface UseClusterNodesOptions {
   loadByDefault?: boolean
@@ -18,6 +20,7 @@ export default function useClusterNodes(
     getVersion: false,
   },
 ): {
+  clusterName: Ref<string>
   nodes: Ref<Array<NodeInfo>>
   lockTable: Ref<boolean>
   hasMemory: Ref<boolean>
@@ -34,6 +37,7 @@ export default function useClusterNodes(
     latestVersion: '',
     isMutiVersion: false,
   })
+  const clusterName = ref('')
 
   const handleVersions = (nodes: NodeInfo[]) => {
     const versionList = nodes.map((node) => node.version.split('-')[0])
@@ -67,5 +71,13 @@ export default function useClusterNodes(
   if (loadByDefault) {
     loadData()
   }
-  return { nodes, lockTable, hasMemory, loadData, versionInfo }
+
+  const getClusterName = async () => {
+    const res: GetCluster200 = await getClusterNodes()
+    clusterName.value = res.name ?? ''
+  }
+
+  getClusterName()
+
+  return { nodes, lockTable, hasMemory, loadData, versionInfo, clusterName }
 }
diff --git a/src/views/Dashboard/components/NodesGraphCard.vue b/src/views/Dashboard/components/NodesGraphCard.vue
@@ -4,6 +4,7 @@
       <div class="nodes-graph-container">
         <span class="node-count">
           <img src="@/assets/img/node.png" width="12" height="12" alt="node" />
+          {{ clusterName ? `${clusterName} -` : '' }}
           {{ $t('Dashboard.node', { n: nodes.length }) }}
         </span>
         <NodesGraph v-model="currentNodeName" :nodes="nodes" v-if="!infoLoading" />
@@ -146,7 +147,11 @@ const { locale } = useI18n()
 const POLLING_INTERVAL = 2000
 
 // const { nodes, loadData: getNodes } = useClusterNodes(false, true, 25000)
-const { nodes, loadData: getNodes } = useClusterNodes({
+const {
+  nodes,
+  loadData: getNodes,
+  clusterName,
+} = useClusterNodes({
   loadByDefault: false,
   hideProgress: true,
   timeout: 25000,