mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-19 00:25:23 +00:00
refactor: visualize events
This commit is contained in:
parent
8c04a065a3
commit
a1223ff5e2
@ -74,7 +74,7 @@ limitations under the License. -->
|
|||||||
<h5 class="mb-10" v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"> {{ t("events") }}. </h5>
|
<h5 class="mb-10" v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"> {{ t("events") }}. </h5>
|
||||||
<div
|
<div
|
||||||
class="attach-events"
|
class="attach-events"
|
||||||
ref="timeline"
|
ref="eventGraph"
|
||||||
v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"
|
v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"
|
||||||
></div>
|
></div>
|
||||||
<el-button class="popup-btn" type="primary" @click="getTaceLogs">
|
<el-button class="popup-btn" type="primary" @click="getTaceLogs">
|
||||||
@ -131,8 +131,7 @@ limitations under the License. -->
|
|||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import type { PropType } from "vue";
|
import type { PropType } from "vue";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import { DataSet, Timeline } from "vis-timeline/standalone";
|
import ListGraph from "../../utils/d3-trace-list";
|
||||||
import "vis-timeline/styles/vis-timeline-graph2d.css";
|
|
||||||
import copy from "@/utils/copy";
|
import copy from "@/utils/copy";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { dateFormat } from "@/utils/dateFormat";
|
import { dateFormat } from "@/utils/dateFormat";
|
||||||
@ -146,8 +145,6 @@ limitations under the License. -->
|
|||||||
});
|
});
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const traceStore = useTraceStore();
|
const traceStore = useTraceStore();
|
||||||
const timeline = ref<Nullable<HTMLDivElement>>(null);
|
|
||||||
const visGraph = ref<Nullable<any>>(null);
|
|
||||||
const pageNum = ref<number>(1);
|
const pageNum = ref<number>(1);
|
||||||
const showRelatedLogs = ref<boolean>(false);
|
const showRelatedLogs = ref<boolean>(false);
|
||||||
const showEventDetail = ref<boolean>(false);
|
const showEventDetail = ref<boolean>(false);
|
||||||
@ -156,6 +153,8 @@ limitations under the License. -->
|
|||||||
const total = computed(() =>
|
const total = computed(() =>
|
||||||
traceStore.traceList.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
|
traceStore.traceList.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
|
||||||
);
|
);
|
||||||
|
const tree = ref<any>(null);
|
||||||
|
const eventGraph = ref<Nullable<HTMLDivElement>>(null);
|
||||||
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
|
const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -180,13 +179,9 @@ limitations under the License. -->
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
function visTimeline() {
|
function visTimeline() {
|
||||||
if (!timeline.value) {
|
if (!eventGraph.value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (visGraph.value) {
|
|
||||||
visGraph.value.destroy();
|
|
||||||
}
|
|
||||||
const h = timeline.value.getBoundingClientRect().height;
|
|
||||||
const attachedEvents = props.currentSpan.attachedEvents || [];
|
const attachedEvents = props.currentSpan.attachedEvents || [];
|
||||||
const events: any[] = attachedEvents.map((d: SpanAttachedEvent, index: number) => {
|
const events: any[] = attachedEvents.map((d: SpanAttachedEvent, index: number) => {
|
||||||
let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0");
|
let startTimeNanos = String(d.startTime.nanos).slice(-6).padStart(6, "0");
|
||||||
@ -207,25 +202,14 @@ limitations under the License. -->
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const items = new DataSet(events);
|
tree.value = new ListGraph(eventGraph.value, selectEvent);
|
||||||
const options: any = {
|
tree.value.init({ label: "TRACE_ROOT", children: props.currentSpan.segmentId }, events, 0);
|
||||||
height: h,
|
tree.value.draw();
|
||||||
width: "100%",
|
}
|
||||||
locale: "en",
|
|
||||||
groupHeightMode: "fitItems",
|
|
||||||
zoomMin: 80,
|
|
||||||
};
|
|
||||||
|
|
||||||
visGraph.value = new Timeline(timeline.value, items, options);
|
function selectEvent(i: any) {
|
||||||
visGraph.value.on("select", (data: { items: number[] }) => {
|
currentEvent.value = i.data;
|
||||||
const index = data.items[0];
|
showEventDetail.value = true;
|
||||||
currentEvent.value = events[index - 1 || 0] || {};
|
|
||||||
if (data.items.length) {
|
|
||||||
showEventDetail.value = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
showEventDetail.value = false;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
function toString(str: string) {
|
function toString(str: string) {
|
||||||
return str.replace(/\d(?=(\d{3})+$)/g, "$&,");
|
return str.replace(/\d(?=(\d{3})+$)/g, "$&,");
|
||||||
|
@ -72,6 +72,9 @@ 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;
|
||||||
|
Loading…
Reference in New Issue
Block a user