fix: optimize the trace widget (#73)

src/assets/icons/arrow-down.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path id="a" d="m10.472352 7.28232367c.3431062-.36783247.904419-.36783247 1.2592596-.00644059.3578153.36442148.3578153.95850784.0002156 1.28561559l-3.10532264 3.16826253c-.17025689.1734002-.39845625.2702388-.62654793.2702388-.24380864 0-.45151514-.0919745-.62697852-.2706782l-3.09835734-3.16693764c-.36405333-.352236-.36405333-.94614513-.01248284-1.28566765.34310619-.36783247.90441901-.36783247 1.25901327-.0066912l2.48658215 2.52737493z"/></svg>

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

@@ -24,7 +24,12 @@ limitations under the License. -->
         />
         <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
         <div class="trace-log-btn">
-          <el-button class="mr-10" type="primary" @click="searchTraceLogs">
+          <el-button
+            size="small"
+            class="mr-10"
+            type="primary"
+            @click="searchTraceLogs"
+          >
             {{ t("viewLogs") }}
           </el-button>
         </div>
@@ -88,7 +93,8 @@ limitations under the License. -->
         </div>
         <div>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'List' }"
             @click="displayMode = 'List'"
           >
@@ -96,7 +102,8 @@ limitations under the License. -->
             {{ t("list") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Tree' }"
             @click="displayMode = 'Tree'"
           >
@@ -104,7 +111,8 @@ limitations under the License. -->
             {{ t("tree") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Table' }"
             @click="displayMode = 'Table'"
           >
@@ -112,7 +120,8 @@ limitations under the License. -->
             {{ t("table") }}
           </el-button>
           <el-button
-            class="grey small"
+            class="grey"
+            size="small"
             :class="{ ghost: displayMode !== 'Statistics' }"
             @click="displayMode = 'Statistics'"
           >
@@ -230,7 +239,9 @@ export default defineComponent({
 }
 
 .trace-chart {
-  height: 100%;
+  height: calc(100% - 100px);
+  overflow: auto;
+  padding-bottom: 20px;
 }
 
 .trace-detail-wrapper {

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

@@ -22,11 +22,11 @@ limitations under the License. -->
         <Icon iconName="issue-open-m" class="mr-5" size="sm" />
         <span>{{ i }}</span>
       </span>
-      <el-button class="btn" type="primary" @click="downloadTrace">
+      <el-button class="btn" size="small" type="primary" @click="downloadTrace">
         {{ t("exportImage") }}
       </el-button>
     </div>
-    <div>
+    <div class="list">
       <Graph :data="data" :traceId="traceId" type="List" />
     </div>
   </div>
@@ -103,4 +103,8 @@ function downloadTrace() {
 .btn {
   float: right;
 }
+
+.list {
+  height: calc(100% - 150px);
+}
 </style>

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

@@ -40,8 +40,8 @@ export default class ListGraph {
   constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
     this.handleSelectSpan = handleSelectSpan;
     this.el = el;
-    this.width = el.clientWidth - 10;
-    this.height = el.clientHeight;
+    this.width = el.getBoundingClientRect().width - 10;
+    this.height = el.getBoundingClientRect().height - 10;
     this.svg = d3
       .select(this.el)
       .append("svg")
@@ -306,8 +306,8 @@ export default class ListGraph {
     if (!this.el) {
       return;
     }
-    this.width = this.el.clientWidth - 20;
-    this.height = this.el.clientHeight;
+    this.width = this.el.getBoundingClientRect().width - 20;
+    this.height = this.el.getBoundingClientRect().height - 10;
     this.svg.attr("width", this.width).attr("height", this.height);
     this.svg.select("g").attr("transform", () => `translate(160, 0)`);
     const transform = d3.zoomTransform(this.svg).translate(0, 0);