From 62eb054ff50a672fa95a444788f022c64e93e403 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Fri, 12 Apr 2024 18:08:47 +0800 Subject: [PATCH 1/5] fix: remove unused configurations (#386) --- src/views/dashboard/List.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 66285edc..5b690366 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -391,6 +391,8 @@ limitations under the License. --> delete child.label; delete child.value; delete child.filters; + delete child.typesOfMQE; + delete child.subTypesOfMQE; if (isEmptyObject(child.graph)) { delete child.graph; } From 12cd279c90a6843199aee16056f455582211d6d0 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 15 Apr 2024 15:33:09 +0800 Subject: [PATCH 2/5] Feat: enhance the Trace widget for batch consuming spans (#387) --- src/store/modules/trace.ts | 2 +- .../trace/components/D3Graph/Index.vue | 88 +++++++++++-------- 2 files changed, 53 insertions(+), 37 deletions(-) diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 0b860130..4c2d5876 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -23,7 +23,6 @@ import type { AxiosResponse } from "axios"; import { useAppStoreWithOut } from "@/store/modules/app"; import { useSelectorStore } from "@/store/modules/selectors"; import { QueryOrders } from "@/views/dashboard/data"; - interface TraceState { services: Service[]; instances: Instance[]; @@ -168,6 +167,7 @@ export const traceStore = defineStore({ return res.data; } const data = res.data.data.trace.spans; + this.setTraceSpans(data || []); return res.data; }, diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index 6a107a0b..9d67f468 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -96,10 +96,8 @@ limitations under the License. --> node.children.push(data); return; } - if (node.children && node.children.length > 0) { - node.children.forEach((nodeItem: Recordable) => { - traverseTree(nodeItem, spanId, segmentId, data); - }); + for (const nodeItem of node.children || []) { + traverseTree(nodeItem, spanId, segmentId, data); } } function changeTree() { @@ -108,7 +106,7 @@ limitations under the License. --> } segmentId.value = []; const segmentGroup: Recordable = {}; - const segmentIdGroup: Recordable = []; + const segmentIdGroup: string[] = []; const fixSpans: Span[] = []; const segmentHeaders: Span[] = []; for (const span of props.data) { @@ -118,7 +116,9 @@ limitations under the License. --> if (span.parentSpanId === -1) { segmentHeaders.push(span); } else { - const item = props.data.find((i: Span) => i.segmentId === span.segmentId && i.spanId === span.spanId - 1); + const item = props.data.find( + (i: Span) => i.traceId === span.traceId && i.segmentId === span.segmentId && i.spanId === span.spanId - 1, + ); const fixSpanKeyContent = { traceId: span.traceId, segmentId: span.segmentId, @@ -145,18 +145,18 @@ limitations under the License. --> } } } - segmentHeaders.forEach((span: Span) => { + for (const span of segmentHeaders) { if (span.refs.length) { - let exit = 0; - span.refs.forEach((ref) => { - const i = props.data.findIndex( - (i: Recordable) => ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, + let exit = null; + for (const ref of span.refs) { + const e = props.data.find( + (i: Recordable) => + ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, ); - if (i > -1) { - exit = 1; + if (e) { + exit = e; } - }); - + } if (!exit) { const ref = span.refs[0]; // create a known broken node. @@ -214,23 +214,23 @@ limitations under the License. --> } } } - }); - [...fixSpans, ...props.data].forEach((i) => { + } + for (const i of [...fixSpans, ...props.data]) { i.label = i.endpointName || "no operation name"; i.children = []; - if (!segmentGroup[i.segmentId]) { + if (segmentGroup[i.segmentId]) { + segmentGroup[i.segmentId].push(i); + } else { segmentIdGroup.push(i.segmentId); segmentGroup[i.segmentId] = [i]; - } else { - segmentGroup[i.segmentId].push(i); } - }); + } fixSpansSize.value = fixSpans.length; - segmentIdGroup.forEach((id: string) => { + for (const id of segmentIdGroup) { const currentSegment = segmentGroup[id].sort((a: Span, b: Span) => b.parentSpanId - a.parentSpanId); - currentSegment.forEach((s: Recordable) => { + for (const s of currentSegment) { const index = currentSegment.findIndex((i: Span) => i.spanId === s.parentSpanId); - if (index !== -1) { + if (index > -1) { if ( (currentSegment[index].isBroken && currentSegment[index].parentSpanId === -1) || !currentSegment[index].isBroken @@ -251,37 +251,53 @@ limitations under the License. --> s.children.push(...children); } } - }); + } segmentGroup[id] = currentSegment[currentSegment.length - 1]; - }); - segmentIdGroup.forEach((id: string) => { - segmentGroup[id].refs.forEach((ref: Recordable) => { + } + for (const id of segmentIdGroup) { + for (const ref of segmentGroup[id].refs) { if (ref.traceId === props.traceId) { traverseTree(segmentGroup[ref.parentSegmentId], ref.parentSpanId, ref.parentSegmentId, segmentGroup[id]); } - }); - }); + } + } for (const i in segmentGroup) { - if (segmentGroup[i].refs.length === 0) { + if (segmentGroup[i].refs.length) { + let exit = null; + for (const ref of segmentGroup[i].refs) { + const e = props.data.find( + (i: Recordable) => + ref.traceId === i.traceId && ref.parentSegmentId === i.segmentId && ref.parentSpanId === i.spanId, + ); + if (e) { + exit = e; + } + } + if (exit) { + segmentId.value.push(segmentGroup[i]); + } + } else { segmentId.value.push(segmentGroup[i]); } } - segmentId.value.forEach((i: Span | Recordable) => { + for (const i of segmentId.value) { collapse(i); - }); + } } function collapse(d: Span | Recordable) { if (d.children) { const item = refSpans.value.find((s: Ref) => s.parentSpanId === d.spanId && s.parentSegmentId === d.segmentId); let dur = d.endTime - d.startTime; - d.children.forEach((i: Span) => { + for (const i of d.children) { dur -= i.endTime - i.startTime; - }); + } d.dur = dur < 0 ? 0 : dur; if (item) { d.children = d.children.sort(compare("startTime")); } - d.children.forEach((i: Span) => collapse(i)); + for (const i of d.children) { + collapse(i); + } } } function compare(p: string) { From 7f6e4d09c05a59c67564a8e601e2890a8bd83a2b Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Tue, 16 Apr 2024 15:00:18 +0800 Subject: [PATCH 3/5] Fix the Table widget (#389) --- src/hooks/useExpressionsProcessor.ts | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index 080469ae..0a346108 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -112,22 +112,7 @@ export async function useExpressionsQueryProcessor(config: Indexable) { tips.push(obj.error); typesOfMQE.push(type); if (!obj.error) { - if (type === ExpressionResultType.TIME_SERIES_VALUES) { - if (results.length === 1) { - const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value; - source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || []; - } else { - for (const item of results) { - const values = item.values.map((d: { value: unknown }) => d.value) || []; - const label = item.metric.labels - .map((d: { key: string; value: string }) => `${d.key}=${d.value}`) - .join(","); - - source[label] = values; - } - } - } - if (type === ExpressionResultType.SINGLE_VALUE) { + if ([ExpressionResultType.SINGLE_VALUE, ExpressionResultType.TIME_SERIES_VALUES].includes(type)) { for (const item of results) { const label = item.metric && From 731d652a7d6250d613b2ea1668171ade4f6afed9 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Tue, 16 Apr 2024 17:52:51 +0800 Subject: [PATCH 4/5] fix: polish (#390) --- src/components/Graph.vue | 10 ++++------ src/views/dashboard/graphs/Table.vue | 12 +++++++++++- .../dashboard/related/topology/pod/InstanceMap.vue | 6 ++++-- .../related/topology/service/HierarchyMap.vue | 6 ++++-- .../related/topology/service/ServiceMap.vue | 6 +++--- 5 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 174d6de4..280bac4f 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -235,12 +235,10 @@ limitations under the License. --> .no-data { font-size: $font-size-smaller; height: 100%; - box-sizing: border-box; - display: -webkit-box; - -webkit-box-orient: horizontal; - -webkit-box-pack: center; - -webkit-box-align: center; - color: #666; + align-items: center; + justify-content: center; + display: flex; + color: var(--text-color-placeholder); } .chart { diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue index baaf2190..df563ac5 100644 --- a/src/views/dashboard/graphs/Table.vue +++ b/src/views/dashboard/graphs/Table.vue @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. -->