feat: sort spans with startTime or spanId in a segment (#100)

src/views/dashboard/graphs/TopList.vue

@@ -17,13 +17,13 @@ limitations under the License. -->
   <div class="top-list" v-if="available">
     <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
       <div class="ell tools flex-h">
-        <div>
+        <div class="desc">
           <span class="calls mr-10">{{ i.value }}</span>
           <span class="cp mr-20">
             {{ i.name }}
           </span>
         </div>
-        <div>
+        <div class="copy">
           <Icon
             iconName="review-list"
             size="middle"
@@ -103,6 +103,16 @@ function handleClick(i: string) {
   height: 100%;
 }
 
+.desc {
+  flex-grow: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.copy {
+  width: 30px;
+}
+
 .calls {
   font-size: 12px;
   padding: 0 5px;

src/views/dashboard/graphs/components/ColumnGraph.vue

@@ -155,7 +155,7 @@ function getLabel(metric: string, index: string) {
 
 .value {
   display: inline-block;
-  width: calc(100% - 30px);
+  flex-grow: 2;
   height: 100%;
 }
 </style>