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; return;
} }
const attachedEvents = props.currentSpan.attachedEvents || []; const attachedEvents = props.currentSpan.attachedEvents || [];
const events: any[] = attachedEvents.map((d: SpanAttachedEvent, index: number) => { const events: any[] = attachedEvents
let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0"); .map((d: SpanAttachedEvent) => {
let endTimeNanos = String(d.endTime.nanos).slice(-6).padStart(6, "0"); let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0");
endTimeNanos = toString(endTimeNanos); let endTimeNanos = String(d.endTime.nanos).slice(-6).padStart(6, "0");
startTimeNanos = toString(startTimeNanos); endTimeNanos = toString(endTimeNanos);
return { startTimeNanos = toString(startTimeNanos);
id: index + 1, const startTime = d.startTime.seconds * 1000 + d.startTime.nanos / 1000000;
content: d.event, const endTime = d.endTime.seconds * 1000 + d.endTime.nanos / 1000000;
start: new Date(Number(d.startTime.seconds * 1000 + d.startTime.nanos / 1000000)), return {
end: new Date(Number(d.endTime.seconds * 1000 + d.endTime.nanos / 1000000)), label: d.event,
...d, ...d,
startTime: d.startTime.seconds * 1000 + d.startTime.nanos / 1000000, startTime,
endTime: d.endTime.seconds * 1000 + d.endTime.nanos / 1000000, endTime,
className: "Normal", startTimeNanos,
startTimeNanos, endTimeNanos,
endTimeNanos, };
}; })
}); .sort((a: { startTime: number }, b: { startTime: number }) => {
return a.startTime - b.startTime;
});
tree.value = new ListGraph(eventGraph.value, selectEvent); 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(); tree.value.draw();
} }
@ -231,7 +240,8 @@ limitations under the License. -->
.attach-events { .attach-events {
width: 100%; width: 100%;
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
height: 200px; height: 400px;
overflow: auto;
} }
.popup-btn { .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 * as d3 from "d3";
import d3tip from "d3-tip"; import d3tip from "d3-tip";
import type { Trace } from "@/types/trace"; import type { Trace } from "@/types/trace";
import dayjs from "dayjs";
export default class ListGraph { export default class ListGraph {
private barHeight = 48; private barHeight = 48;
@ -72,9 +73,6 @@ export default class ListGraph {
L${d.target.y} ${d.target.x - 5}`; L${d.target.y} ${d.target.x - 5}`;
} }
init(data: any, row: any[], fixSpansSize: number) { init(data: any, row: any[], fixSpansSize: number) {
console.log(data);
console.log(row);
console.log(fixSpansSize);
d3.select(".trace-xaxis").remove(); d3.select(".trace-xaxis").remove();
this.row = row; this.row = row;
this.data = data; this.data = data;
@ -94,7 +92,6 @@ export default class ListGraph {
this.svg this.svg
.append("g") .append("g")
.attr("class", "trace-xaxis") .attr("class", "trace-xaxis")
.attr("transform", `translate(${this.width * 0.618 - 20},${30})`) .attr("transform", `translate(${this.width * 0.618 - 20},${30})`)
.call(this.xAxis); .call(this.xAxis);
this.sequentialScale = d3 this.sequentialScale = d3
@ -167,6 +164,7 @@ export default class ListGraph {
.attr("x", 35) .attr("x", 35)
.attr("y", -6) .attr("y", -6)
.attr("fill", "#333") .attr("fill", "#333")
.style("font-size", "12px")
.html((d: any) => { .html((d: any) => {
if (d.data.label === "TRACE_ROOT") { if (d.data.label === "TRACE_ROOT") {
return ""; return "";
@ -217,7 +215,16 @@ export default class ListGraph {
.attr("y", 12) .attr("y", 12)
.attr("fill", "#ccc") .attr("fill", "#ccc")
.style("font-size", "11px") .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 nodeEnter
.append("rect") .append("rect")
.attr("rx", 2) .attr("rx", 2)
@ -308,6 +315,9 @@ export default class ListGraph {
callback(); callback();
} }
} }
visDate(date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") {
return dayjs(date).format(pattern);
}
resize() { resize() {
if (!this.el) { if (!this.el) {
return; return;