github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 15:14:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

update id

Browse Source
This commit is contained in:
Fine 2025-03-27 15:56:29 +08:00
parent 63b2ee2b6f
commit fb95f1f18f
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
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>
<div id="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.parentSegmentId" @click="viewParentSpan(span)">{{
`Parent Span: ${span.parentSegmentId}` `Parent Span: ${span.parentSegmentId}`
@ -426,7 +426,7 @@ limitations under the License. -->
fill: #4caf50; fill: #4caf50;
} }
#action-box { #trace-action-box {
position: absolute; position: absolute;
color: $font-color; color: $font-color;
cursor: pointer; cursor: pointer;

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

@ -87,7 +87,7 @@ export default class ListGraph {
} }
init(data: Recordable, row: Recordable[], fixSpansSize: number) { init(data: Recordable, row: Recordable[], fixSpansSize: number) {
d3.select(`.${this.el?.className} .trace-xaxis`).remove(); d3.select(`.${this.el?.className} .trace-xaxis`).remove();
d3.select("#action-box").style("display", "none"); d3.select("#trace-action-box").style("display", "none");
this.row = row; this.row = row;
this.data = data; this.data = data;
this.min = d3.min(this.row.map((i) => i.startTime)); this.min = d3.min(this.row.map((i) => i.startTime));
@ -158,14 +158,14 @@ export default class ListGraph {
const hasClass = d3.select(this).classed("highlighted"); const hasClass = d3.select(this).classed("highlighted");
if (t.selectedNode) { if (t.selectedNode) {
t.selectedNode.classed("highlighted", false); t.selectedNode.classed("highlighted", false);
d3.select("#action-box").style("display", "none"); d3.select("#trace-action-box").style("display", "none");
} }
if (hasClass) { if (hasClass) {
t.selectedNode = null; t.selectedNode = null;
return; return;
} }
d3.select(this).classed("highlighted", true); d3.select(this).classed("highlighted", true);
d3.select("#action-box") d3.select("#trace-action-box")
.style("display", "block") .style("display", "block")
.style("left", `${event.pageX - 70}px`) .style("left", `${event.pageX - 70}px`)
.style("top", `${event.pageY + 30}px`); .style("top", `${event.pageY + 30}px`);
@ -420,7 +420,7 @@ export default class ListGraph {
if (parentSpan) { if (parentSpan) {
d3.select(`#list-node-${parentSpan.id}`).classed("highlightedParent", true); d3.select(`#list-node-${parentSpan.id}`).classed("highlightedParent", true);
} }
d3.select("#action-box").style("display", "none"); d3.select("#trace-action-box").style("display", "none");
this.selectedNode.classed("highlighted", false); this.selectedNode.classed("highlighted", false);
if (!parentSpan) return; if (!parentSpan) return;
const container = document.querySelector(".trace-chart .charts"); const container = document.querySelector(".trace-chart .charts");