github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-06 01:48:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

distinguish parents

Browse Source
This commit is contained in:
Fine 2025-03-28 10:03:49 +08:00
parent 2389e61295
commit bdc327c40a
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -16,10 +16,13 @@ limitations under the License. -->
</div>
<div ref="traceGraph" class="d3-graph"></div>
<div id="trace-action-box">
<div @click="showDetail = true">Span Details</div>
<div v-for="span in parentSpans" :key="span.parentSegmentId" @click="viewParentSpan(span)">{{
`Parent Span: ${span.endpointName} -> Start Time: ${visDate(span.startTime)}`
}}</div>
<div @click="showDetail = true">Span details</div>
<div v-for="span in parentSpans" :key="span.segmentId" @click="viewParentSpan(span)">
{{ `Parent span: ${span.endpointName} -> Start time: ${visDate(span.startTime)}` }}
</div>
<div v-for="span in refParentSpans" :key="span.segmentId" @click="viewParentSpan(span)">
{{ `Ref to span: ${span.endpointName} -> Start time: ${visDate(span.startTime)}` }}
</div>
</div>
<el-dialog
v-model="showDetail"
@ -62,6 +65,7 @@ limitations under the License. -->
const tree = ref<Nullable<any>>(null);
const traceGraph = ref<Nullable<HTMLDivElement>>(null);
const parentSpans = ref<Array<Span>>([]);
const refParentSpans = ref<Array<Span>>([]);
const debounceFunc = debounce(draw, 500);
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
@ -110,13 +114,15 @@ limitations under the License. -->
}
function handleSelectSpan(i: Recordable) {
const spans = [];
const refSpans = [];
parentSpans.value = [];
refParentSpans.value = [];
currentSpan.value = i.data;
if (!currentSpan.value) {
return;
}
for (const ref of currentSpan.value.refs || []) {
spans.push(ref);
refSpans.push(ref);
}
if (currentSpan.value.parentSpanId > -1) {
spans.push({
@ -125,6 +131,12 @@ limitations under the License. -->
traceId: currentSpan.value.traceId,
});
}
for (const span of refSpans) {
const item = props.data.find(
(d) => d.segmentId === span.parentSegmentId && d.spanId === span.parentSpanId && d.traceId === span.traceId,
);
item && refParentSpans.value.push(item);
}
for (const span of spans) {
const item = props.data.find(
(d) => d.segmentId === span.parentSegmentId && d.spanId === span.parentSpanId && d.traceId === span.traceId,

2
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -172,7 +172,7 @@ export default class ListGraph {
d3.select("#trace-action-box")
.style("display", "block")
.style("left", `${offsetX + 30}px`)
.style("top", `${offsetY + 30}px`);
.style("top", `${offsetY + 40}px`);
t.selectedNode = d3.select(this);
if (t.handleSelectSpan) {
t.handleSelectSpan(d);