Fix the topology layout for there are multiple independent network relationships (#397)

src/views/dashboard/Widget.vue

@@ -15,9 +15,9 @@ limitations under the License. -->
 <template>
   <div class="content">
     <div class="header">
-      <span>{{ decodeURIComponent(title) }}</span>
+      <span>{{ title }}</span>
       <div class="tips" v-show="tips">
-        <el-tooltip :content="decodeURIComponent(tips) || ''">
+        <el-tooltip :content="tips || ''">
           <span>
             <Icon iconName="info_outline" size="sm" />
           </span>

src/views/dashboard/related/log/LogTable/Index.vue

@@ -42,14 +42,14 @@ limitations under the License. -->
       @closed="showDetail = false"
       :title="t('logDetail')"
     >
-      <LogDetail :currentLog="currentLog" />
+      <LogDetail :currentLog="currentLog" :logTemplate="type === 'browser' ? BrowserLogConstants : ServiceLogDetail" />
     </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
-  import { ServiceLogConstants, BrowserLogConstants } from "./data";
+  import { ServiceLogConstants, BrowserLogConstants, ServiceLogDetail } from "./data";
   import LogBrowser from "./LogBrowser.vue";
   import LogService from "./LogService.vue";
   import LogDetail from "./LogDetail.vue";

src/views/dashboard/related/log/LogTable/LogBrowser.vue

@@ -44,13 +44,6 @@ limitations under the License. -->
   const logItem = ref<any>(null);
 
   function showSelectSpan() {
-    const items: NodeListOf<any> = document.querySelectorAll(".log-item");
-
-    for (const item of items) {
-      item.style.background = "#fff";
-    }
-
-    logItem.value.style.background = "rgba(0, 0, 0, 0.1)";
     emit("select", props.data);
   }
 </script>
@@ -62,15 +55,15 @@ limitations under the License. -->
   }
 
   .log-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .log-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .log-item:hover {
-    background: rgba(0, 0, 0, 0.04) !important;
+    background: rgb(0 0 0 / 4%) !important;
   }
 
   .log-item > div {

src/views/dashboard/related/log/LogTable/LogDetail.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="log-detail">
-    <div class="mb-10 clear rk-flex" v-for="(item, index) in ServiceLogDetail" :key="index">
+    <div class="mb-10 clear rk-flex" v-for="(item, index) in logTemplate" :key="index">
       <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
       <span v-if="['timestamp', 'time'].includes(item.label)" class="g-sm-8 mb-10">
         {{ dateFormat(currentLog[item.label]) }}
@@ -38,11 +38,11 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { dateFormat } from "@/utils/dateFormat";
   import { formatJson } from "@/utils/formatJson";
-  import { ServiceLogDetail } from "./data";
 
   /*global defineProps */
   const props = defineProps({
     currentLog: { type: Object as PropType<any>, default: () => ({}) },
+    logTemplate: { type: Object as PropType<any>, default: () => ({}) },
   });
   const { t } = useI18n();
   const logTags = computed(() => {

src/views/dashboard/related/topology/components/utils/layout.ts

@@ -141,9 +141,10 @@ function findMostFrequent(arr: Call[]) {
 
   return maxItem;
 }
-export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
+export function computeLevels(calls: Call[], nodeList: Node[], arr: Node[][]) {
+  const levels: Node[][] = [];
   const node = findMostFrequent(calls);
-  const nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => {
+  let nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => {
     if (a.name.toLowerCase() < b.name.toLowerCase()) {
       return -1;
     }
@@ -158,23 +159,23 @@ export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
     key = nodes.findIndex((n: Node) => n.id === node.id);
   }
   levels.push([nodes[key]]);
-  nodes.splice(key, 1);
+  nodes = nodes.filter((_: unknown, index: number) => index !== key);
   for (const level of levels) {
     const a = [];
     for (const l of level) {
       for (const n of calls) {
         if (n.target === l.id) {
           const i = nodes.findIndex((d: Node) => d.id === n.source);
-          if (i > -1) {
+          if (i > -1 && nodes[i]) {
             a.push(nodes[i]);
-            nodes.splice(i, 1);
+            nodes = nodes.filter((_: unknown, index: number) => index !== i);
           }
         }
         if (n.source === l.id) {
           const i = nodes.findIndex((d: Node) => d.id === n.target);
-          if (i > -1) {
+          if (i > -1 && nodes[i]) {
             a.push(nodes[i]);
-            nodes.splice(i, 1);
+            nodes = nodes.filter((_: unknown, index: number) => index !== i);
           }
         }
       }
@@ -183,13 +184,22 @@ export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
       levels.push(a);
     }
   }
+  const list = levels.length > arr.length ? levels : arr;
+  const subList = levels.length > arr.length ? arr : levels;
+  arr = list.map((subArray: Node[], index: number) => {
+    if (subList[index]) {
+      return subArray.concat(subList[index]);
+    } else {
+      return subArray;
+    }
+  });
+
   if (nodes.length) {
     const ids = nodes.map((d: Node) => d.id);
     const links = calls.filter((item: Call) => ids.includes(item.source) || ids.includes(item.target));
-    const list = computeLevels(links, nodes, []);
-    levels = list.map((subArrayA, index) => subArrayA.concat(levels[index]));
+    arr = computeLevels(links, nodes, arr);
   }
-  return levels;
+  return arr;
 }
 export function changeNode(d: { x: number; y: number }, currentNode: Nullable<Node>, layout: any, radius: number) {
   if (!currentNode) {
@@ -229,7 +239,7 @@ export function changeNode(d: { x: number; y: number }, currentNode: Nullable<No
 }
 export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
   // precompute level depth
-  levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
+  levels.forEach((l: Node[], i: number) => l.forEach((n: Node) => n && (n.level = i)));
 
   const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
   // layout

src/views/dashboard/related/trace/components/Statistics.vue

@@ -54,11 +54,11 @@ limitations under the License. -->
     const result: StatisticsSpan[] = [];
     const map = traceTable.changeStatisticsTree(data);
     map.forEach((nodes, nodeKey) => {
-      const nodeKeyData = nodeKey.split(":");
+      const lastColonIndex = nodeKey.lastIndexOf(":");
       result.push(
         getSpanGroupData(nodes, {
-          endpointName: nodeKeyData[0],
-          type: nodeKeyData[1],
+          endpointName: nodeKey.slice(0, lastColonIndex),
+          type: nodeKey.slice(lastColonIndex + 1),
         }),
       );
     });