fix: update trace statistics

src/assets/icons/settings_ethernet.svg

@@ -0,0 +1,17 @@
+<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M17.766 5.484l5.438 6.516-5.438 6.516-1.547-1.266 4.359-5.25-4.359-5.25zM11.016 12.984v-1.969h1.969v1.969h-1.969zM17.016 11.016v1.969h-2.016v-1.969h2.016zM6.984 12.984v-1.969h2.016v1.969h-2.016zM7.781 6.75l-4.359 5.25 4.359 5.25-1.547 1.266-5.438-6.516 5.438-6.516z"></path>
+</svg>

src/assets/icons/sort.svg

@@ -0,0 +1,15 @@
+<!-- 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 t="1620798822338" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1847" width="200" height="200"><path d="M679.765333 597.333333a21.333333 21.333333 0 0 1 16.426667 34.986667l-167.808 201.386667a21.333333 21.333333 0 0 1-32.768 0l-167.808-201.386667a21.333333 21.333333 0 0 1 16.426667-34.986667zM525.653333 187.605333a21.333333 21.333333 0 0 1 2.730667 2.730667l167.808 201.344a21.333333 21.333333 0 0 1-16.426667 34.986667H344.234667a21.333333 21.333333 0 0 1-16.426667-34.986667l167.808-201.386667a21.333333 21.333333 0 0 1 30.037333-2.688z" fill="#999999" p-id="1848"></path></svg>

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

@@ -13,11 +13,11 @@ 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-table">
+  <div class="trace-statistics">
-    <div class="rk-trace-t-loading" v-show="loading">
+    <div class="trace-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
-    <TableContainer :tableData="tableData" :type="HeaderType">
+    <TableContainer :tableData="tableData" type="statistics" HeaderType>
       <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
     </TableContainer>
   </div>
@@ -106,3 +106,16 @@ watch(
   }
 );
 </script>
+<style lang="scss" scoped>
+.trace-tips {
+  width: 100%;
+  text-align: center;
+  margin-top: 10px;
+}
+
+.trace-statistics {
+  padding: 10px;
+  height: calc(100% - 95px);
+  width: 100%;
+}
+</style>

src/views/dashboard/related/trace/components/table/Index.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
     <div class="rk-trace-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
-    <TableContainer :tableData="tableData" :type="HeaderType">
+    <TableContainer :tableData="tableData" type="table" HeaderType>
       <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
     </TableContainer>
   </div>

src/views/dashboard/related/trace/components/table/TableContainer.vue

@@ -15,12 +15,23 @@ limitations under the License. -->
 
 <template>
   <div class="trace">
-    <div class="trace-header">
+    <div class="trace-header" v-if="type === 'statistics'">
+      <div :class="item.label" v-for="(item, index) in headerData" :key="index">
+        {{ item.value }}
+        <span
+          class="r cp"
+          @click="sortStatistics(item.key)"
+          :key="componentKey"
+          v-if="item.key !== 'endpointName' && item.key !== 'type'"
+        >
+          <Icon iconName="sort" size="sm" />
+        </span>
+      </div>
+    </div>
+    <div class="trace-header" v-else>
       <div class="method" :style="`width: ${method}px`">
         <span class="r cp" ref="dragger">
-          <svg class="icon">
+          <Icon iconName="settings_ethernet" size="sm" />
-            <use xlink:href="#settings_ethernet"></use>
-          </svg>
         </span>
         {{ headerData[0].value }}
       </div>
@@ -47,19 +58,19 @@ import { ref, onMounted } from "vue";
 import type { PropType } from "vue";
 import TableItem from "./TableItem.vue";
 import { ProfileConstant, TraceConstant, StatisticsConstant } from "./data";
-import { Option } from "@/types/app";
 
 /* global defineProps, Nullable */
 const props = defineProps({
   tableData: { type: Array as PropType<any>, default: () => [] },
   type: { type: String, default: "" },
+  HeaderType: { type: String, default: "" },
 });
 const method = ref<number>(300);
 const componentKey = ref<number>(300);
 const flag = ref<boolean>(true);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
-let headerData: (Option & { key?: string })[] = TraceConstant;
+let headerData: any[] = TraceConstant;
-if (props.type === "profile") {
+if (props.HeaderType === "profile") {
   headerData = ProfileConstant;
 }
 if (props.type === "statistics") {