From ed6fb0448bc780d8b8a9af2b249b9a529de0782b Mon Sep 17 00:00:00 2001 From: WD Date: Thu, 17 Nov 2022 16:07:18 +0800 Subject: [PATCH 1/5] feat: solve the problem of floating loading (#183) --- .../related/topology/components/Graph.vue | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) 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%; +} From 882828b04ac2b8fba61a8d4b317f88a7f9463cc0 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 17 Nov 2022 17:57:23 +0800 Subject: [PATCH 2/5] feat: enhance tags component to search tags with the input value (#184) --- src/views/components/ConditionTags.vue | 40 ++++++++++++++++++++------ 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue index 3eb86975..ef3dd2fe 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,6 +93,7 @@ const tagsList = ref([]); const tagArr = ref([]); const tagList = ref([]); const tagKeys = ref([]); +const keysList = ref([]); const visible = ref(false); const tipsMap = { LOG: "logTagsTip", @@ -137,6 +139,7 @@ async function fetchTagKeys() { } tagArr.value = resp.data.tagKeys; tagKeys.value = resp.data.tagKeys; + keysList.value = resp.data.tagKeys; searchTags(); } @@ -157,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 + "="; @@ -171,11 +198,6 @@ function selectTag(item: string) { } function searchTags() { - if (!tags.value) { - tagList.value = tagArr.value; - fetchTagKeys(); - return; - } let search = ""; if (tags.value.includes("=")) { search = tags.value.split("=")[1]; From 670bef1d69c3387d7a0f363354429bbaeeba5b1f Mon Sep 17 00:00:00 2001 From: drgnchan <40224023+drgnchan@users.noreply.github.com> Date: Fri, 18 Nov 2022 11:55:52 +0800 Subject: [PATCH 3/5] fix typo (#185) --- src/views/dashboard/related/trace/utils/trace-table.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts index c63ae899..6d93cf68 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, From dc842609ba866a0281748698e9d240feefd90829 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Sat, 19 Nov 2022 16:53:15 +0800 Subject: [PATCH 4/5] fix: update condition logic for trace tree data (#186) --- src/views/dashboard/related/trace/utils/trace-table.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts index 6d93cf68..f15ade1f 100644 --- a/src/views/dashboard/related/trace/utils/trace-table.ts +++ b/src/views/dashboard/related/trace/utils/trace-table.ts @@ -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: [], From e8d909792dffd4e5ca8046be98b39060f2ac5b6a Mon Sep 17 00:00:00 2001 From: WD Date: Mon, 21 Nov 2022 10:07:01 +0800 Subject: [PATCH 5/5] chore: fix typo (#187) --- src/views/dashboard/related/trace/utils/trace-table.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts index f15ade1f..2317dee7 100644 --- a/src/views/dashboard/related/trace/utils/trace-table.ts +++ b/src/views/dashboard/related/trace/utils/trace-table.ts @@ -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)); } }