refactor(ui): Optimize the topology detail display logic and remove duplicate code

Author: sohandsomejie

ui-vue3/src/views/resources/applications/tabs/topology.vue

@@ -29,15 +29,9 @@
           bordered
           :labelStyle="{ fontWeight: 'bold', width: '160px' }"
         >
-          <a-descriptions-item
-            v-for="(v, k) in detailData"
-            :key="k"
-            v-show="v !== undefined && v !== null"
-          >
-            <template #label>{{ k }}</template>
-            <a-typography-paragraph style="margin-bottom: 0">{{
-              formatValueForDisplay(v)
-            }}</a-typography-paragraph>
+          <a-descriptions-item v-for="item in detailEntries" :key="item.key">
+            <template #label>{{ item.key }}</template>
+            {{ formatValueForDisplay(item.value) }}
           </a-descriptions-item>
         </a-descriptions>
       </a-spin>
@@ -150,7 +144,14 @@ const detailTitle = computed(() => {
   return currentDetailKey.value ? `应用详情：${currentDetailKey.value}` : '应用详情'
 })
 
-const formatValueForDisplay = (v: unknown) => {
+const detailEntries = computed(() => {
+  const data = detailData.value ?? {}
+  return Object.entries(data)
+    .filter(([, v]) => v !== undefined && v !== null && String(v) !== '')
+    .map(([key, value]) => ({ key, value }))
+})
+
+const formatValueForDisplay = (v: unknown): string => {
   if (v === null || v === undefined) return ''
   if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') return String(v)
   if (Array.isArray(v))
@@ -211,7 +212,7 @@ const renderTopology = (graphData: any) => {
     node: {
       type: 'vue-node',
       style: {
-        component: (data) => <StatefulNode data={Object.assign({}, data)} />
+        component: (data: any) => <StatefulNode data={Object.assign({}, data)} />
       }
     },
     edge: {

ui-vue3/src/views/resources/services/tabs/topology.vue

@@ -31,19 +31,7 @@
         >
           <a-descriptions-item v-for="item in detailEntries" :key="item.key">
             <template #label>{{ item.key }}</template>
-            <template v-if="item.key === 'versionGroups' && Array.isArray(item.value)">
-              <a-space direction="vertical" size="small">
-                <a-space v-for="(vg, idx) in item.value" :key="idx" size="small">
-                  <a-tag>version: {{ vg?.version ?? '无' }}</a-tag>
-                  <a-tag>group: {{ vg?.group ?? '无' }}</a-tag>
-                </a-space>
-              </a-space>
-            </template>
-            <template v-else>
-              <a-typography-paragraph style="margin-bottom: 0">{{
-                formatValueForDisplay(item.value)
-              }}</a-typography-paragraph>
-            </template>
+            {{ formatValueForDisplay(item.value) }}
           </a-descriptions-item>
         </a-descriptions>
       </a-spin>
@@ -169,26 +157,15 @@ const detailTitle = computed(() => {
   return currentDetailKey.value ? `${base}：${currentDetailKey.value}` : base
 })
 
+const detailEntryBlacklist = new Set<string>(['versionGroups', 'appName'])
+
 const detailEntries = computed(() => {
   const data = detailData.value ?? {}
-  const preferredKeys = ['versionGroups', 'avgRT', 'avgQPS', 'requestTotal']
-  const pairs = Object.entries(data).filter(
-    ([, v]) => v !== undefined && v !== null && String(v) !== ''
-  )
-  const ordered: Array<[string, unknown]> = []
-  const used = new Set<string>()
-  for (const k of preferredKeys) {
-    const hit = pairs.find(([key]) => key === k)
-    if (hit) {
-      ordered.push(hit)
-      used.add(k)
-    }
-  }
-  const rest = pairs
-    .filter(([k]) => !used.has(k))
-    .sort((a, b) => (a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0))
-  ordered.push(...rest)
-  return ordered.map(([key, value]) => ({ key, value }))
+  return Object.entries(data)
+    .filter(
+      ([k, v]) => !detailEntryBlacklist.has(k) && v !== undefined && v !== null && String(v) !== ''
+    )
+    .map(([key, value]) => ({ key, value }))
 })
 
 const formatValueForDisplay = (v: unknown) => {