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

feat: update events

Browse Source
This commit is contained in:
Fine 2023-02-14 17:30:27 +08:00
parent a1223ff5e2
commit 003ca1b92f
2 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
View File

@ -183,27 +183,36 @@ limitations under the License. -->
return;
}
const attachedEvents = props.currentSpan.attachedEvents || [];
const events: any[] = attachedEvents.map((d: SpanAttachedEvent, index: number) => {
let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0");
let endTimeNanos = String(d.endTime.nanos).slice(-6).padStart(6, "0");
endTimeNanos = toString(endTimeNanos);
startTimeNanos = toString(startTimeNanos);
return {
id: index + 1,
content: d.event,
start: new Date(Number(d.startTime.seconds * 1000 + d.startTime.nanos / 1000000)),
end: new Date(Number(d.endTime.seconds * 1000 + d.endTime.nanos / 1000000)),
...d,
startTime: d.startTime.seconds * 1000 + d.startTime.nanos / 1000000,
endTime: d.endTime.seconds * 1000 + d.endTime.nanos / 1000000,
className: "Normal",
startTimeNanos,
endTimeNanos,
};
});
const events: any[] = attachedEvents
.map((d: SpanAttachedEvent) => {
let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0");
let endTimeNanos = String(d.endTime.nanos).slice(-6).padStart(6, "0");
endTimeNanos = toString(endTimeNanos);
startTimeNanos = toString(startTimeNanos);
const startTime = d.startTime.seconds * 1000 + d.startTime.nanos / 1000000;
const endTime = d.endTime.seconds * 1000 + d.endTime.nanos / 1000000;
return {
label: d.event,
...d,
startTime,
endTime,
startTimeNanos,
endTimeNanos,
};
})
.sort((a: { startTime: number }, b: { startTime: number }) => {
return a.startTime - b.startTime;
});
tree.value = new ListGraph(eventGraph.value, selectEvent);
tree.value.init({ label: "TRACE_ROOT", children: props.currentSpan.segmentId }, events, 0);
tree.value.init(
{
children: events,
label: "",
},
events,
0,
);
tree.value.draw();
}
@ -231,7 +240,8 @@ limitations under the License. -->
.attach-events {
width: 100%;
margin: 0 5px 5px 0;
height: 200px;
height: 400px;
overflow: auto;
}
.popup-btn {

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

@ -18,6 +18,7 @@
import * as d3 from "d3";
import d3tip from "d3-tip";
import type { Trace } from "@/types/trace";
import dayjs from "dayjs";
export default class ListGraph {
private barHeight = 48;
@ -72,9 +73,6 @@ export default class ListGraph {
L${d.target.y} ${d.target.x - 5}`;
}
init(data: any, row: any[], fixSpansSize: number) {
console.log(data);
console.log(row);
console.log(fixSpansSize);
d3.select(".trace-xaxis").remove();
this.row = row;
this.data = data;
@ -94,7 +92,6 @@ export default class ListGraph {
this.svg
.append("g")
.attr("class", "trace-xaxis")
.attr("transform", `translate(${this.width * 0.618 - 20},${30})`)
.call(this.xAxis);
this.sequentialScale = d3
@ -167,6 +164,7 @@ export default class ListGraph {
.attr("x", 35)
.attr("y", -6)
.attr("fill", "#333")
.style("font-size", "12px")
.html((d: any) => {
if (d.data.label === "TRACE_ROOT") {
return "";
@ -217,7 +215,16 @@ export default class ListGraph {
.attr("y", 12)
.attr("fill", "#ccc")
.style("font-size", "11px")
.text((d: any) => `${d.data.layer || ""} ${d.data.component ? "- " + d.data.component : d.data.component || ""}`);
.text(
(d: any) =>
`${d.data.layer || ""} ${
d.data.component
? "- " + d.data.component
: d.data.event
? this.visDate(d.data.startTime) + ":" + d.data.startTimeNanos
: ""
}`,
);
nodeEnter
.append("rect")
.attr("rx", 2)
@ -308,6 +315,9 @@ export default class ListGraph {
callback();
}
}
visDate(date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") {
return dayjs(date).format(pattern);
}
resize() {
if (!this.el) {
return;