github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-04 12:45:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

selected span nodes

Browse Source
This commit is contained in:
Fine 2025-03-25 16:14:06 +08:00
parent 1d2b1192f6
commit 28945c560a
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ limitations under the License. -->
<Icon iconName="spinner" size="sm" /> <Icon iconName="spinner" size="sm" />
</div> </div>
<div ref="traceGraph" class="d3-graph"></div> <div ref="traceGraph" class="d3-graph"></div>
<el-dialog v-model="showDetail" :destroy-on-close="true" @closed="showDetail = false"> <el-dialog v-model="showDetail" :destroy-on-close="true" @closed="showDetail = false" v-if="currentSpan?.segmentId">
<SpanDetail :currentSpan="currentSpan" /> <SpanDetail :currentSpan="currentSpan" />
</el-dialog> </el-dialog>
</template> </template>
@ -42,7 +42,7 @@ limitations under the License. -->
const showDetail = ref<boolean>(false); const showDetail = ref<boolean>(false);
const fixSpansSize = ref<number>(0); const fixSpansSize = ref<number>(0);
const segmentId = ref<Recordable[]>([]); const segmentId = ref<Recordable[]>([]);
const currentSpan = ref<Array<Span>>([]); const currentSpan = ref<Nullable<Span>>(null);
const refSpans = ref<Array<Ref>>([]); const refSpans = ref<Array<Ref>>([]);
const tree = ref<Nullable<any>>(null); const tree = ref<Nullable<any>>(null);
const traceGraph = ref<Nullable<HTMLDivElement>>(null); const traceGraph = ref<Nullable<HTMLDivElement>>(null);
@ -361,7 +361,7 @@ limitations under the License. -->
}, },
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.d3-graph { .d3-graph {
height: 100%; height: 100%;
} }
@ -382,25 +382,18 @@ limitations under the License. -->
} }
.trace-node .node-text { .trace-node .node-text {
font: 12.5px sans-serif; font: 12px sans-serif;
pointer-events: none; pointer-events: none;
} }
.domain {
display: none;
}
.time-charts-item {
display: inline-block;
padding: 2px 8px;
border: 1px solid;
font-size: 11px;
border-radius: 4px;
}
.dialog-c-text { .dialog-c-text {
white-space: pre; white-space: pre;
overflow: auto; overflow: auto;
font-family: monospace; font-family: monospace;
} }
.trace-node.highlighted .node-text {
font-weight: bold;
fill: #409eff;
}
</style> </style>

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

@ -42,6 +42,7 @@ export default class ListGraph {
private xAxis: any = null; private xAxis: any = null;
private sequentialScale: any = null; private sequentialScale: any = null;
private root: any = null; private root: any = null;
private selectedNode: any = null;
constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) { constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
this.handleSelectSpan = handleSelectSpan; this.handleSelectSpan = handleSelectSpan;
this.el = el; this.el = el;
@ -144,16 +145,23 @@ export default class ListGraph {
.attr("transform", `translate(${source.y0},${source.x0})`) .attr("transform", `translate(${source.y0},${source.x0})`)
.attr("class", "trace-node") .attr("class", "trace-node")
.attr("style", "cursor: pointer") .attr("style", "cursor: pointer")
.style("opacity", 0)
.on("mouseover", function (event: MouseEvent, d: Trace) { .on("mouseover", function (event: MouseEvent, d: Trace) {
t.tip.show(d, this); t.tip.show(d, this);
}) })
.on("mouseout", function (event: MouseEvent, d: Trace) { .on("mouseout", function (event: MouseEvent, d: Trace) {
t.tip.hide(d, this); t.tip.hide(d, this);
}) })
.on("click", (event: MouseEvent, d: Trace) => { .on("click", function (event: MouseEvent, d: Trace & { id: string }) {
if (this.handleSelectSpan) { event.stopPropagation();
this.handleSelectSpan(d); if (t.selectedNode) {
t.selectedNode.classed("highlighted", false);
}
if (t.selectedNode?.datum().id !== d.id) {
d3.select(this).classed("highlighted", true);
}
t.selectedNode = d3.select(this);
if (t.handleSelectSpan) {
t.handleSelectSpan(d);
} }
}); });
nodeEnter nodeEnter