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