diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index 41fc3dc4..6e8d97ee 100644
--- a/src/views/components/ConditionTags.vue
+++ b/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"
/>
@@ -92,7 +93,7 @@ const tagsList = ref([]);
const tagArr = ref([]);
const tagList = ref([]);
const tagKeys = ref([]);
-const keyList = ref([]);
+const keysList = ref([]);
const visible = ref(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];
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 29e7ce9a..911d074d 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/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(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%;
+}
diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts
index c63ae899..2317dee7 100644
--- a/src/views/dashboard/related/trace/utils/trace-table.ts
+++ b/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));
}
}