refactor: visualize events

This commit is contained in:
Fine 2023-02-10 16:47:20 +08:00
parent 8c04a065a3
commit a1223ff5e2
2 changed files with 15 additions and 28 deletions

View File

@ -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, "$&,");

View File

@ -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;