github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 18:53:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update attached event's details (#200)

Browse Source
This commit is contained in:
Fine0830 2022-12-02 15:03:29 +08:00 committed by GitHub
parent aab44626da
commit 1f98619a5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,11 +102,11 @@ limitations under the License. -->
>
<div>
<div class="mb-10">
<span class="grey">Name:</span>
<span class="grey title">Name:</span>
{{ currentEvent.event || "" }}
</div>
<div class="mb-10">
<span class="grey">Start Time:</span>
<span class="grey title">Start Time:</span>
{{
currentEvent.startTime
? `${visDate(Number(currentEvent.startTime))}:${
@ -116,7 +116,7 @@ limitations under the License. -->
}}
</div>
<div class="mb-10">
<span class="grey">End Time:</span>
<span class="grey title">End Time:</span>
{{
currentEvent.endTime
? `${visDate(Number(currentEvent.endTime))}:${
@ -126,7 +126,7 @@ limitations under the License. -->
}}
</div>
<div class="mb-10">
<span class="grey">Summary:</span>
<span class="grey title">Summary:</span>
<div
class="mb-5"
v-for="(d, index) in currentEvent.summary || []"
@ -137,7 +137,7 @@ limitations under the License. -->
</div>
</div>
<div>
<span class="grey">Tags:</span>
<span class="grey title">Tags:</span>
<div
class="mb-5"
v-for="(tag, index) in currentEvent.tags || []"
@ -242,6 +242,10 @@ function visTimeline() {
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,
@ -255,12 +259,8 @@ function visTimeline() {
startTime: d.startTime.seconds * 1000 + d.startTime.nanos / 1000000,
endTime: d.endTime.seconds * 1000 + d.endTime.nanos / 1000000,
className: "Normal",
startTimeNanos: Number(
String(d.startTime.nanos / 1000000).split(".")[1]
).toLocaleString("en-US"),
endTimeNanos: Number(
String(d.endTime.nanos / 1000000).split(".")[1]
).toLocaleString("en-US"),
startTimeNanos,
endTimeNanos,
};
}
);
@ -278,6 +278,7 @@ function visTimeline() {
visGraph.value.on("select", (data: { items: number[] }) => {
const index = data.items[0];
currentEvent.value = events[index - 1 || 0] || {};
console.log(currentEvent.value);
if (data.items.length) {
showEventDetail.value = true;
return;
@ -285,6 +286,9 @@ function visTimeline() {
showEventDetail.value = false;
});
}
function toString(str: string) {
return str.replace(/\d(?=(\d{3})+$)/g, "$&,");
}
function turnPage(p: number) {
pageNum.value = p;
getTaceLogs();
@ -294,6 +298,11 @@ function showCurrentSpanDetail(text: string) {
}
</script>
<style lang="scss" scoped>
.title {
display: inline-block;
width: 70px;
}
.attach-events {
width: 100%;
margin: 0 5px 5px 0;