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