feat: visualize attached events on the trace widget (#190)

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;

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
+        }
+      }
     }
   }
   `,

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

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) {

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,

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[];
+}

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;

src/views/dashboard/related/trace/components/List.vue

@@ -107,4 +107,8 @@ function downloadTrace() {
 .list {
   height: calc(100% - 150px);
 }
+
+.event-tag {
+  color: red;
+}
 </style>

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(

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;
 

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 = [

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")

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")