From 6b72247de6a8e59e97a9cce09200ff5cef5f92df Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 26 Feb 2022 13:57:35 +0800
Subject: [PATCH] fix: update trace statistics

---
 src/assets/icons/settings_ethernet.svg        | 17 +++++++++++++
 src/assets/icons/sort.svg                     | 15 +++++++++++
 .../related/trace/components/Statistics.vue   | 19 +++++++++++---
 .../related/trace/components/table/Index.vue  |  2 +-
 .../trace/components/table/TableContainer.vue | 25 +++++++++++++------
 5 files changed, 67 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/icons/settings_ethernet.svg
 create mode 100644 src/assets/icons/sort.svg

diff --git a/src/assets/icons/settings_ethernet.svg b/src/assets/icons/settings_ethernet.svg
new file mode 100644
index 00000000..8a8c91f8
--- /dev/null
+++ b/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>
diff --git a/src/assets/icons/sort.svg b/src/assets/icons/sort.svg
new file mode 100644
index 00000000..8770c018
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/dashboard/related/trace/components/Statistics.vue b/src/views/dashboard/related/trace/components/Statistics.vue
index 4f1f2ad1..8c0d0076 100644
--- a/src/views/dashboard/related/trace/components/Statistics.vue
+++ b/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="rk-trace-t-loading" v-show="loading">
+  <div class="trace-statistics">
+    <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>
diff --git a/src/views/dashboard/related/trace/components/table/Index.vue b/src/views/dashboard/related/trace/components/table/Index.vue
index 97737f11..521ef16d 100644
--- a/src/views/dashboard/related/trace/components/table/Index.vue
+++ b/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>
diff --git a/src/views/dashboard/related/trace/components/table/TableContainer.vue b/src/views/dashboard/related/trace/components/table/TableContainer.vue
index 19d8e482..d8f02824 100644
--- a/src/views/dashboard/related/trace/components/table/TableContainer.vue
+++ b/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">
-            <use xlink:href="#settings_ethernet"></use>
-          </svg>
+          <Icon iconName="settings_ethernet" size="sm" />
         </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;
-if (props.type === "profile") {
+let headerData: any[] = TraceConstant;
+if (props.HeaderType === "profile") {
   headerData = ProfileConstant;
 }
 if (props.type === "statistics") {