github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 16:27:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

update trace graph

Browse Source
This commit is contained in:
Fine 2022-11-23 14:23:01 +08:00
parent c6436e8c59
commit e66fd2362d
2 changed files with 82 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -186,19 +186,35 @@ export default class ListGraph {
return label; return label;
}); });
nodeEnter nodeEnter
.append("rect") .append("circle")
.attr("rx", 2) .attr("r", 8)
.attr("ry", 2) .attr("cx", 270)
.attr("height", 15) .attr("cy", -5)
.attr("width", 40) .attr("fill", "none")
.attr("fill", "#e66") .attr("stroke", "#e66")
.attr("x", 270) .style("opacity", (d: any) => {
.attr("y", -15); // const events = d.data.attachedEvents;
const events = [
{
startTime: "",
event: "event",
endTime: "",
tags: [],
summary: [],
},
];
if (events && events.length) {
return 0.5;
} else {
return 0;
}
});
nodeEnter nodeEnter
.append("text") .append("text")
.attr("x", 272) .attr("x", 267)
.attr("y", -4) .attr("y", -1)
.attr("fill", "#fff") .attr("fill", "#e66")
.style("font-size", "10px")
.text(() => { .text(() => {
// const events = d.data.attachedEvents; // const events = d.data.attachedEvents;
const events = [ const events = [
@ -211,7 +227,7 @@ export default class ListGraph {
}, },
]; ];
if (events && events.length) { if (events && events.length) {
return `events`; return `E`;
} else { } else {
return ""; return "";
} }

58
src/views/dashboard/related/trace/utils/d3-trace-tree.ts
View File

@ -188,7 +188,57 @@ export default class TraceMap {
.on("click", function (event: any, d: any) { .on("click", function (event: any, d: any) {
that.handleSelectSpan(d); that.handleSelectSpan(d);
}); });
nodeEnter
.append("circle")
.attr("r", 8)
.attr("cy", "-12")
.attr("cx", function (d: any) {
return d.children || d._children ? -15 : 110;
})
.attr("fill", "none")
.attr("stroke", "#e66")
.style("opacity", (d: any) => {
// const events = d.data.attachedEvents;
const events = [
{
startTime: "",
event: "event",
endTime: "",
tags: [],
summary: [],
},
];
if (events && events.length) {
return 0.5;
} else {
return 0;
}
});
nodeEnter
.append("text")
.attr("x", function (d: any) {
return d.children || d._children ? -18 : 107;
})
.attr("dy", "-0.8em")
.attr("fill", "#e66")
.style("font-size", "10px")
.text((d: any) => {
// const events = d.data.attachedEvents;
const events = [
{
startTime: "",
event: "event",
endTime: "",
tags: [],
summary: [],
},
];
if (events && events.length) {
return `E`;
} else {
return "";
}
});
nodeEnter nodeEnter
.append("circle") .append("circle")
.attr("class", "node") .attr("class", "node")
@ -208,14 +258,14 @@ export default class TraceMap {
.attr("font-size", 11) .attr("font-size", 11)
.attr("dy", "-0.5em") .attr("dy", "-0.5em")
.attr("x", function (d: any) { .attr("x", function (d: any) {
return d.children || d._children ? -15 : 15; return d.children || d._children ? -45 : 15;
}) })
.attr("text-anchor", function (d: any) { .attr("text-anchor", function (d: any) {
return d.children || d._children ? "end" : "start"; return d.children || d._children ? "end" : "start";
}) })
.text((d: any) => .text((d: any) =>
d.data.label.length > 19 d.data.label.length > 19
? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..." ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label : (d.data.isError ? "◉ " : "") + d.data.label
) )
.style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17")); .style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
@ -223,7 +273,7 @@ export default class TraceMap {
.append("text") .append("text")
.attr("class", "node-text") .attr("class", "node-text")
.attr("x", function (d: any) { .attr("x", function (d: any) {
return d.children || d._children ? -15 : 15; return d.children || d._children ? -45 : 15;
}) })
.attr("dy", "1em") .attr("dy", "1em")
.attr("fill", "#bbb") .attr("fill", "#bbb")