merge

src/views/components/ConditionTags.vue

@@ -35,9 +35,10 @@ limitations under the License. -->
           size="small"
           v-model="tags"
           class="trace-new-tag"
-          @input="searchTags"
+          @input="inputTags"
           @blur="visible = false"
           @focus="visible = true"
+          @change="addTags"
         />
       </template>
       <div class="content">
@@ -92,7 +93,7 @@ const tagsList = ref<string[]>([]);
 const tagArr = ref<string[]>([]);
 const tagList = ref<string[]>([]);
 const tagKeys = ref<string[]>([]);
-const keyList = ref<string[]>([]);
+const keysList = ref<string[]>([]);
 const visible = ref<boolean>(false);
 const tipsMap = {
   LOG: "logTagsTip",
@@ -138,7 +139,7 @@ async function fetchTagKeys() {
   }
   tagArr.value = resp.data.tagKeys;
   tagKeys.value = resp.data.tagKeys;
-  keyList.value = resp.data.tagKeys;
+  keysList.value = resp.data.tagKeys;
   searchTags();
 }
 
@@ -159,13 +160,37 @@ async function fetchTagValues() {
   searchTags();
 }
 
+function inputTags() {
+  if (!tags.value) {
+    tagArr.value = keysList.value;
+    tagKeys.value = keysList.value;
+    tagList.value = tagArr.value;
+    return;
+  }
+  let search = "";
+  if (tags.value.includes("=")) {
+    search = tags.value.split("=")[1];
+    fetchTagValues();
+  } else {
+    search = tags.value;
+  }
+  tagList.value = tagArr.value.filter((d: string) => d.includes(search));
+}
+
+function addTags() {
+  if (!tags.value.includes("=")) {
+    return;
+  }
+  addLabels();
+  tagArr.value = tagKeys.value;
+  searchTags();
+}
+
 function selectTag(item: string) {
   if (tags.value.includes("=")) {
     const key = tags.value.split("=")[0];
     tags.value = key + "=" + item;
-    addLabels();
-    tagArr.value = tagKeys.value;
-    searchTags();
+    addTags();
     return;
   }
   tags.value = item + "=";
@@ -173,11 +198,6 @@ function selectTag(item: string) {
 }
 
 function searchTags() {
-  if (!tags.value) {
-    tagList.value = keyList.value;
-    tagKeys.value = keyList.value;
-    return;
-  }
   let search = "";
   if (tags.value.includes("=")) {
     search = tags.value.split("=")[1];

src/views/dashboard/related/topology/components/Graph.vue

@@ -90,6 +90,7 @@ import {
   reactive,
   watch,
   computed,
+  nextTick,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
@@ -149,6 +150,14 @@ const graphConfig = computed(() => props.config.graph || {});
 const depth = ref<number>(graphConfig.value.depth || 2);
 
 onMounted(async () => {
+  await nextTick();
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 40,
+    width: 0,
+  };
+  height.value = dom.height - 40;
+  width.value = dom.width;
+
   loading.value = true;
   const json = await selectorStore.fetchServices(dashboardStore.layerId);
   if (json.errors) {
@@ -157,18 +166,13 @@ onMounted(async () => {
   }
   const resp = await getTopology();
   loading.value = false;
+
   if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
   topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
   topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
   topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
-  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
-    height: 40,
-    width: 0,
-  };
-  height.value = dom.height - 40;
-  width.value = dom.width;
   window.addEventListener("resize", resize);
   svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
   await initLegendMetrics();
@@ -733,4 +737,8 @@ watch(
     stroke-dashoffset: 0;
   }
 }
+
+.el-loading-spinner {
+  top: 30%;
+}
 </style>

src/views/dashboard/related/trace/utils/trace-table.ts

@@ -29,13 +29,13 @@ export default class TraceUtil {
     return Array.from(new Set(data.map((span: Span) => span.serviceCode)));
   }
 
-  public static changeTree(data: Span[], cureentTraceId: string) {
+  public static changeTree(data: Span[], currentTraceId: string) {
     const segmentIdList: Span[] = [];
     const traceTreeRef: any = this.changeTreeCore(data);
     traceTreeRef.segmentIdGroup.forEach((segmentId: string) => {
       if (traceTreeRef.segmentMap.get(segmentId).refs) {
         traceTreeRef.segmentMap.get(segmentId).refs.forEach((ref: Ref) => {
-          if (ref.traceId === cureentTraceId) {
+          if (ref.traceId === currentTraceId) {
             this.traverseTree(
               traceTreeRef.segmentMap.get(ref.parentSegmentId) as Span,
               ref.parentSpanId,
@@ -144,7 +144,7 @@ export default class TraceUtil {
               spanId: parentSpanId,
               parentSpanId: parentSpanId > -1 ? 0 : -1,
             };
-            if (lodash.find(fixSpans, fixSpanKeyContent)) {
+            if (!lodash.find(fixSpans, fixSpanKeyContent)) {
               fixSpans.push({
                 ...fixSpanKeyContent,
                 refs: [],
@@ -255,11 +255,11 @@ export default class TraceUtil {
   private static collapse(span: Span) {
     if (span.children) {
       let dur = span.endTime - span.startTime;
-      span.children.forEach((chlid: Span) => {
-        dur -= chlid.endTime - chlid.startTime;
+      span.children.forEach((child: Span) => {
+        dur -= child.endTime - child.startTime;
       });
       span.dur = dur < 0 ? 0 : dur;
-      span.children.forEach((chlid) => this.collapse(chlid));
+      span.children.forEach((child) => this.collapse(child));
     }
   }