You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/11/24 03:19:29 UTC
[skywalking-booster-ui] branch main updated: feat: visualize attached events on the trace widget (#190)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 7d802d4 feat: visualize attached events on the trace widget (#190)
7d802d4 is described below
commit 7d802d490e80627063f2a4b647f20ed95199bf3a
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Thu Nov 24 11:19:25 2022 +0800
feat: visualize attached events on the trace widget (#190)
---
src/components/DateCalendar.vue | 5 -
src/graphql/fragments/trace.ts | 19 ++++
src/layout/components/SideBar.vue | 2 +-
src/store/modules/trace.ts | 3 +-
src/styles/reset.scss | 4 +-
src/types/trace.d.ts | 17 ++-
.../trace/components/D3Graph/SpanDetail.vue | 126 ++++++++++++++++++++-
.../dashboard/related/trace/components/List.vue | 4 +
.../related/trace/components/Statistics.vue | 2 +-
.../related/trace/components/Table/TableItem.vue | 12 ++
.../related/trace/components/Table/data.ts | 4 +
.../dashboard/related/trace/utils/d3-trace-list.ts | 46 +++++++-
.../dashboard/related/trace/utils/d3-trace-tree.ts | 43 ++++++-
13 files changed, 263 insertions(+), 24 deletions(-)
diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index 7af98b7..1ef5cee 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -632,11 +632,6 @@ onMounted(() => {
right: 24px;
}
-.calendar-next-month-btn .middle,
-.calendar-prev-month-btn .middle {
- margin-top: 8px;
-}
-
.calendar-body {
position: relative;
width: 196px;
diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts
index e1e0af9..d645042 100644
--- a/src/graphql/fragments/trace.ts
+++ b/src/graphql/fragments/trace.ts
@@ -69,6 +69,25 @@ export const TraceSpans = {
value
}
}
+ attachedEvents {
+ startTime {
+ seconds
+ nanos
+ }
+ event
+ endTime {
+ seconds
+ nanos
+ }
+ tags {
+ key
+ value
+ }
+ summary {
+ key
+ value
+ }
+ }
}
}
`,
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index b9afcc4..403f56c 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -107,7 +107,7 @@ if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
} else {
appStore.setIsMobile(false);
}
-const isCollapse = ref(appStore.isMobile ? true : false);
+const isCollapse = ref(true);
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index e9654e8..640d10a 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -175,7 +175,8 @@ export const traceStore = defineStore({
if (res.data.errors) {
return res.data;
}
- this.setTraceSpans(res.data.data.trace.spans || []);
+ const data = res.data.data.trace.spans;
+ this.setTraceSpans(data || []);
return res.data;
},
async getSpanLogs(params: any) {
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 41ef283..b5de79f 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -179,7 +179,7 @@ div.vis-tooltip {
.vis-item {
cursor: pointer;
- height: 17px;
+ height: 20px;
}
.vis-item.Error {
@@ -196,7 +196,7 @@ div.vis-tooltip {
}
.vis-item .vis-item-content {
- padding: 0 5px !important;
+ padding: 0 3px !important;
}
.vis-item.vis-selected.Error,
diff --git a/src/types/trace.d.ts b/src/types/trace.d.ts
index 569e717..9055e8a 100644
--- a/src/types/trace.d.ts
+++ b/src/types/trace.d.ts
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
export interface Trace {
duration: number;
isError: boolean;
@@ -85,3 +84,19 @@ export class TraceTreeRef {
segmentMap: Map<string, Span>;
segmentIdGroup: string[];
}
+
+type Instant = {
+ seconds: number;
+ nanos: number;
+};
+type KeyValue = {
+ key: string;
+ value: string | number;
+};
+export interface SpanAttachedEvent {
+ startTime: Instant;
+ endTime: Instant;
+ event: string;
+ tags: KeyValue[];
+ summary: KeyValue[];
+}
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 061325f..083fc39 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>
- <h5 class="mb-15">{{ t("tags") }}.</h5>
<div class="mb-10 clear item">
<span class="g-sm-4 grey">{{ t("service") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.serviceCode }}</span>
@@ -43,6 +42,9 @@ limitations under the License. -->
<span class="g-sm-4 grey">{{ t("isError") }}:</span>
<span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
</div>
+ <h5 class="mb-10" v-if="currentSpan.tags && currentSpan.tags.length">
+ {{ t("tags") }}.
+ </h5>
<div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
<span class="g-sm-4 grey">{{ i.key }}:</span>
<span class="g-sm-8 wba">
@@ -61,8 +63,8 @@ limitations under the License. -->
</h5>
<div v-for="(i, index) in currentSpan.logs" :key="index">
<div class="mb-10 sm">
- <span class="mr-10">{{ t("time") }}:</span
- ><span class="grey">{{ dateFormat(i.time) }}</span>
+ <span class="mr-10">{{ t("time") }}:</span>
+ <span class="grey">{{ dateFormat(i.time) }}</span>
</div>
<div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
<div class="mb-10">
@@ -77,10 +79,53 @@ limitations under the License. -->
<pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
</div>
</div>
+ <h5
+ class="mb-10"
+ v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"
+ >
+ {{ t("events") }}.
+ </h5>
+ <div
+ class="attach-events"
+ ref="timeline"
+ v-if="currentSpan.attachedEvents && currentSpan.attachedEvents.length"
+ ></div>
<el-button class="popup-btn" type="primary" @click="getTaceLogs">
{{ t("relatedTraceLogs") }}
</el-button>
</div>
+ <el-dialog
+ v-model="showEventDetail"
+ :destroy-on-close="true"
+ fullscreen
+ @closed="showEventDetail = false"
+ >
+ <div>
+ <div>Name: {{ currentEvent.event || "" }}</div>
+ <div>
+ Start Time:
+ {{
+ currentEvent.startTime ? visDate(Number(currentEvent.startTime)) : ""
+ }}
+ </div>
+ <div>
+ End Time:
+ {{ currentEvent.endTime ? visDate(Number(currentEvent.endTime)) : "" }}
+ </div>
+ <div>
+ Summary:
+ {{(currentEvent.summary || [])
+ .map((d: any) => d.key + "=" + d.value)
+ .join("; ")}}
+ </div>
+ <div>
+ Tags:
+ {{(currentEvent.tags || [])
+ .map((d: any) => d.key + "=" + d.value)
+ .join("; ")}}
+ </div>
+ </div>
+ </el-dialog>
<el-dialog
v-model="showRelatedLogs"
:destroy-on-close="true"
@@ -108,29 +153,45 @@ limitations under the License. -->
</el-dialog>
</template>
<script lang="ts" setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import type { PropType } from "vue";
+import dayjs from "dayjs";
+import { DataSet, Timeline } from "vis-timeline/standalone";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
import copy from "@/utils/copy";
import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/dateFormat";
import { useTraceStore } from "@/store/modules/trace";
import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue";
+import { SpanAttachedEvent } from "@/types/trace";
-/*global defineProps */
+/*global defineProps, Nullable */
const props = defineProps({
currentSpan: { type: Object as PropType<any>, default: () => ({}) },
});
const { t } = useI18n();
const traceStore = useTraceStore();
+const timeline = ref<Nullable<HTMLDivElement>>(null);
+const visGraph = ref<Nullable<any>>(null);
const pageNum = ref<number>(1);
const showRelatedLogs = ref<boolean>(false);
+const showEventDetail = ref<boolean>(false);
+const currentEvent = ref<SpanAttachedEvent | Record<string, never>>({});
const pageSize = 10;
const total = computed(() =>
traceStore.traceList.length === pageSize
? pageSize * pageNum.value + 1
: pageSize * pageNum.value
);
+const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+ dayjs(date).format(pattern);
+
+onMounted(() => {
+ setTimeout(() => {
+ visTimeline();
+ }, 500);
+});
async function getTaceLogs() {
showRelatedLogs.value = true;
const res = await traceStore.getSpanLogs({
@@ -147,6 +208,55 @@ async function getTaceLogs() {
ElMessage.error(res.errors);
}
}
+function visTimeline() {
+ if (!timeline.value) {
+ return;
+ }
+ if (visGraph.value) {
+ visGraph.value.destroy();
+ }
+ const h = timeline.value.getBoundingClientRect().height;
+ const attachedEvents = props.currentSpan.attachedEvents || [];
+ const events: any[] = attachedEvents.map(
+ (d: SpanAttachedEvent, index: number) => {
+ return {
+ id: index + 1,
+ content: d.event,
+ start: new Date(
+ Number(d.startTime.seconds * 1000 + d.startTime.nanos / 1000)
+ ),
+ end: new Date(
+ Number(d.endTime.seconds * 1000 + d.endTime.nanos / 1000)
+ ),
+ ...d,
+ startTime: d.startTime.seconds * 1000 + d.startTime.nanos / 1000,
+ endTime: d.endTime.seconds * 1000 + d.endTime.nanos / 1000,
+ className: "Normal",
+ };
+ }
+ );
+ const items = new DataSet(events);
+ const options: any = {
+ height: h,
+ width: "100%",
+ locale: "en",
+ groupHeightMode: "fitItems",
+ autoResize: false,
+ zoomMin: 80,
+ zoomMax: 3600000,
+ };
+
+ visGraph.value = new Timeline(timeline.value, items, options);
+ visGraph.value.on("select", (data: { items: number[] }) => {
+ const index = data.items[0];
+ currentEvent.value = events[index - 1 || 0] || {};
+ if (data.items.length) {
+ showEventDetail.value = true;
+ return;
+ }
+ showEventDetail.value = false;
+ });
+}
function turnPage(p: number) {
pageNum.value = p;
getTaceLogs();
@@ -156,6 +266,12 @@ function showCurrentSpanDetail(text: string) {
}
</script>
<style lang="scss" scoped>
+.attach-events {
+ width: 100%;
+ margin: 0 5px 5px 0;
+ height: 200px;
+}
+
.popup-btn {
color: #fff;
margin-top: 40px;
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index 907c236..869c927 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -107,4 +107,8 @@ function downloadTrace() {
.list {
height: calc(100% - 150px);
}
+
+.event-tag {
+ color: red;
+}
</style>
diff --git a/src/views/dashboard/related/trace/components/Statistics.vue b/src/views/dashboard/related/trace/components/Statistics.vue
index 05bd63b..5618e57 100644
--- a/src/views/dashboard/related/trace/components/Statistics.vue
+++ b/src/views/dashboard/related/trace/components/Statistics.vue
@@ -56,7 +56,7 @@ onMounted(() => {
function calculationDataforStatistics(data: Span[]): StatisticsSpan[] {
list.value = traceTable.buildTraceDataList(data);
const result: StatisticsSpan[] = [];
- const map = traceTable.changeStatisticsTree(data, props.traceId);
+ const map = traceTable.changeStatisticsTree(data);
map.forEach((nodes, nodeKey) => {
const nodeKeyData = nodeKey.split(":");
result.push(
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index a60598e..38af3b4 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -112,6 +112,9 @@ limitations under the License. -->
>
<span>{{ t("view") }}</span>
</div>
+ <div class="application" v-show="headerType !== 'profile'">
+ <span>{{ data.attachedEvents && data.attachedEvents.length }}</span>
+ </div>
</div>
<div
v-show="data.children && data.children.length > 0 && displayChildren"
@@ -247,6 +250,15 @@ export default defineComponent({
<style lang="scss" scoped>
@import "./table.scss";
+.event-tag {
+ width: 12px;
+ height: 12px;
+ border-radius: 12px;
+ border: 1px solid #e66;
+ color: #e66;
+ display: inline-block;
+}
+
.trace-item.level0 {
color: #448dfe;
diff --git a/src/views/dashboard/related/trace/components/Table/data.ts b/src/views/dashboard/related/trace/components/Table/data.ts
index 6c7c041..cc48653 100644
--- a/src/views/dashboard/related/trace/components/Table/data.ts
+++ b/src/views/dashboard/related/trace/components/Table/data.ts
@@ -79,6 +79,10 @@ export const TraceConstant = [
label: "application",
value: "Service",
},
+ {
+ label: "application",
+ value: "Attached Events",
+ },
];
export const StatisticsConstant = [
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index 15190c7..af301e7 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -175,13 +175,51 @@ export default class ListGraph {
.attr("x", 35)
.attr("y", -6)
.attr("fill", "#333")
- .text((d: any) => {
+ .html((d: any) => {
if (d.data.label === "TRACE_ROOT") {
return "";
}
- return d.data.label.length > 40
- ? `${d.data.label.slice(0, 40)}...`
- : `${d.data.label}`;
+ const label =
+ d.data.label.length > 30
+ ? `${d.data.label.slice(0, 30)}...`
+ : `${d.data.label}`;
+ return label;
+ });
+ nodeEnter
+ .append("circle")
+ .attr("r", 10)
+ .attr("cx", (d: any) => {
+ const events = d.data.attachedEvents;
+ if (events && events.length > 9) {
+ return 272;
+ } else {
+ return 270;
+ }
+ })
+ .attr("cy", -5)
+ .attr("fill", "none")
+ .attr("stroke", "#e66")
+ .style("opacity", (d: any) => {
+ const events = d.data.attachedEvents;
+ if (events && events.length) {
+ return 0.5;
+ } else {
+ return 0;
+ }
+ });
+ nodeEnter
+ .append("text")
+ .attr("x", 267)
+ .attr("y", -1)
+ .attr("fill", "#e66")
+ .style("font-size", "10px")
+ .text((d: any) => {
+ const events = d.data.attachedEvents;
+ if (events && events.length) {
+ return `${events.length}`;
+ } else {
+ return "";
+ }
});
nodeEnter
.append("text")
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
index fab33bf..940665b 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@@ -188,7 +188,42 @@ export default class TraceMap {
.on("click", function (event: any, d: any) {
that.handleSelectSpan(d);
});
-
+ nodeEnter
+ .append("circle")
+ .attr("r", 8)
+ .attr("cy", "-12")
+ .attr("cx", function (d: any) {
+ return d.children || d._children ? -15 : 110;
+ })
+ .attr("fill", "none")
+ .attr("stroke", "#e66")
+ .style("opacity", (d: any) => {
+ const events = d.data.attachedEvents;
+ if (events && events.length) {
+ return 0.5;
+ } else {
+ return 0;
+ }
+ });
+ nodeEnter
+ .append("text")
+ .attr("x", function (d: any) {
+ const events = d.data.attachedEvents || [];
+ let p = d.children || d._children ? -18 : 107;
+ p = events.length > 9 ? p - 2 : p;
+ return p;
+ })
+ .attr("dy", "-0.8em")
+ .attr("fill", "#e66")
+ .style("font-size", "10px")
+ .text((d: any) => {
+ const events = d.data.attachedEvents;
+ if (events && events.length) {
+ return `${events.length}`;
+ } else {
+ return "";
+ }
+ });
nodeEnter
.append("circle")
.attr("class", "node")
@@ -208,14 +243,14 @@ export default class TraceMap {
.attr("font-size", 11)
.attr("dy", "-0.5em")
.attr("x", function (d: any) {
- return d.children || d._children ? -15 : 15;
+ return d.children || d._children ? -45 : 15;
})
.attr("text-anchor", function (d: any) {
return d.children || d._children ? "end" : "start";
})
.text((d: any) =>
d.data.label.length > 19
- ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..."
+ ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label
)
.style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
@@ -223,7 +258,7 @@ export default class TraceMap {
.append("text")
.attr("class", "node-text")
.attr("x", function (d: any) {
- return d.children || d._children ? -15 : 15;
+ return d.children || d._children ? -45 : 15;
})
.attr("dy", "1em")
.attr("fill", "#bbb")