fix: update trace list

package.json

@@ -89,7 +89,8 @@
       "@typescript-eslint/explicit-function-return-type": "off",
       "no-use-before-define": "off",
       "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/no-non-null-assertion": "off"
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-this-alias": "off"
     },
     "overrides": [
       {

src/assets/icons/issue-open-m.svg

@@ -0,0 +1,16 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/issue-open-m</title><path d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 2A7 7 0 1 1 8 1a7 7 0 0 1 0 14z" id="a"/></svg>

src/views/dashboard/related/trace/Detail.vue

@@ -11,6 +11,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
+  <div class="trace-detail">
     <div
       class="trace-detail-wrapper clear"
       v-if="traceStore.currentTrace.endpointNames"
@@ -52,7 +53,9 @@ limitations under the License. -->
             {{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
           </span>
           <div class="tag mr-5">{{ t("duration") }}</div>
-        <span class="mr-15 sm">{{ traceStore.currentTrace.duration }} ms</span>
+          <span class="mr-15 sm"
+            >{{ traceStore.currentTrace.duration }} ms</span
+          >
           <div class="tag mr-5">{{ t("spans") }}</div>
           <span class="sm">{{ traceStore.traceSpans.length }}</span>
         </div>
@@ -97,6 +100,7 @@ limitations under the License. -->
       :data="traceStore.traceSpans"
       :traceId="traceStore.currentTrace.traceIds[0].value"
     />
+  </div>
 </template>
 <script lang="ts" setup>
 import dayjs from "dayjs";
@@ -141,6 +145,11 @@ function changeTraceId(opt: Option[]) {
 //     }
 </script>
 <style lang="scss" scoped>
+.trace-detail {
+  height: 100%;
+  width: 100%;
+}
+
 .trace-detail-wrapper {
   font-size: 12px;
   padding: 5px 10px;

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

@@ -11,24 +11,24 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="time-charts scroll_hide">
+  <div class="time-charts">
     <div class="trace-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
-    <transition-group name="fade" tag="a" class="mb-5">
+    <div class="service-code">
       <span
-        class="time-charts-item mr-10"
+        class="time-charts-item mr-5"
-        v-for="(i, index) in data"
+        v-for="(i, index) in list"
         :key="index"
         :style="`color:${computedScale(index)}`"
       >
-        <svg class="icon vm mr-5 sm">
+        <Icon iconName="issue-open-m" class="mr-5" size="sm" />
-          <use xlink:href="#issue-open-m"></use>
-        </svg>
         <span>{{ i }}</span>
       </span>
-    </transition-group>
+      <el-button class="btn" type="primary" @click="downloadTrace">
-    <a class="rk-btn r vm tc" @click="downloadTrace">{{ t("exportImage") }}</a>
+        {{ t("exportImage") }}
+      </el-button>
+    </div>
     <div class="trace-list">
       <div ref="traceList"></div>
     </div>
@@ -41,9 +41,8 @@ import _ from "lodash";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import ListGraph from "./utils/d3-trace";
-import copy from "@/utils/copy";
+import { Span } from "@/types/trace";
-import { Span, Trace } from "@/types/trace";
+
-import { Option } from "@/types/app";
 /* global defineProps, Nullable*/
 const props = defineProps({
   data: { type: Array as PropType<Span[]>, default: () => [] },
@@ -55,7 +54,7 @@ const showDetail = ref<boolean>(false);
 const fixSpansSize = ref<number>(0);
 const segmentId = ref<any>([]);
 const currentSpan = ref<Array<Span>>([]);
-const list = ref<any>([]);
+const list = ref<string[]>([]);
 const tree = ref<any>(null);
 const traceList = ref<Nullable<HTMLDivElement>>(null);
 
@@ -141,7 +140,7 @@ function changeTree() {
   if (props.data.length === 0) {
     return [];
   }
-  list.value = Array.from(new Set(props.data.map((i: any) => i.serviceCode)));
+  list.value = Array.from(new Set(props.data.map((i: Span) => i.serviceCode)));
   segmentId.value = [];
   const segmentGroup: any = {};
   const segmentIdGroup: any = [];
@@ -335,9 +334,10 @@ watch(
 <style lang="scss" scoped>
 .time-charts {
   overflow: auto;
-  padding: 10px 30px;
+  padding: 10px;
   position: relative;
-  min-height: 150px;
+  height: calc(100% - 95px);
+  width: 100%;
 }
 
 .trace-node .group {
@@ -387,4 +387,8 @@ watch(
   overflow: auto;
   font-family: monospace;
 }
+
+.btn {
+  float: right;
+}
 </style>

src/views/dashboard/related/trace/components/utils/d3-trace.ts

@@ -18,6 +18,7 @@
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import { Span, Trace } from "@/types/trace";
+import { func } from "vue-types";
 
 const type = {
   MQ: "#bf99f8",
@@ -49,7 +50,7 @@ export default class ListGraph {
   constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
     this.handleSelectSpan = handleSelectSpan;
     this.el = el;
-    this.width = el.clientWidth;
+    this.width = el.clientWidth - 20;
     this.height = el.clientHeight;
     this.svg = d3
       .select(this.el)
@@ -61,8 +62,8 @@ export default class ListGraph {
     this.tip = (d3tip as any)()
       .attr("class", "d3-tip")
       .offset([-8, 0])
-      .html(
+      .html((d: any) => {
-        (d: any) => `
+        return `
           <div class="mb-5">${d.data.label}</div>
           ${
             d.data.dur
@@ -76,8 +77,8 @@ export default class ListGraph {
                 "ms</div>"
               : ""
           }
-      `
+          `;
-      );
+      });
     this.svg.call(this.tip);
   }
   diagonal(d: any) {
@@ -135,6 +136,7 @@ export default class ListGraph {
     scope.update(d);
   }
   update(source: any, callback: any) {
+    const t = this;
     const nodes = this.root.descendants();
     let index = -1;
     this.root.eachBefore((n: any) => {
@@ -150,11 +152,11 @@ export default class ListGraph {
       .attr("transform", `translate(${source.y0},${source.x0})`)
       .attr("class", "trace-node")
       .style("opacity", 0)
-      .on("mouseover", (d: Trace) => {
+      .on("mouseover", function (event: any, d: Trace) {
-        this.tip.show(d, this);
+        t.tip.show(d, this);
       })
-      .on("mouseout", (d: Trace) => {
+      .on("mouseout", function (event: any, d: Trace) {
-        this.tip.hide(d, this);
+        t.tip.hide(d, this);
       })
       .on("click", (d: Trace) => {
         if (this.handleSelectSpan) {