feat: add trace statistics

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

@@ -169,6 +169,7 @@ export default defineComponent({
 .trace-detail {
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 
 .trace-detail-wrapper {

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

@@ -0,0 +1,108 @@
+<!-- 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. -->
+<template>
+  <div class="trace-table">
+    <div class="rk-trace-t-loading" v-show="loading">
+      <Icon iconName="spinner" size="sm" />
+    </div>
+    <TableContainer :tableData="tableData" :type="HeaderType">
+      <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
+    </TableContainer>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, watch, onMounted } from "vue";
+import type { PropType } from "vue";
+import TableContainer from "./table/TableContainer.vue";
+import traceTable from "../utils/trace-table";
+import { StatisticsSpan, Span, StatisticsGroupRef } from "@/types/trace";
+
+/* global defineProps, defineEmits */
+const props = defineProps({
+  data: { type: Array as PropType<any>, default: () => [] },
+  traceId: { type: String, default: "" },
+  showBtnDetail: { type: Boolean, default: false },
+  HeaderType: { type: String, default: "" },
+});
+const emit = defineEmits(["load"]);
+const loading = ref<boolean>(true);
+const tableData = ref<any>([]);
+const list = ref<any[]>([]);
+
+onMounted(() => {
+  tableData.value = calculationDataforStatistics(props.data);
+  loading.value = false;
+  emit("load", () => {
+    loading.value = true;
+  });
+});
+
+function calculationDataforStatistics(data: Span[]): StatisticsSpan[] {
+  list.value = traceTable.buildTraceDataList(data);
+  const result: StatisticsSpan[] = [];
+  const map = traceTable.changeStatisticsTree(data, props.traceId);
+  map.forEach((nodes, nodeKey) => {
+    const nodeKeyData = nodeKey.split(":");
+    result.push(
+      getSpanGroupData(nodes, {
+        endpointName: nodeKeyData[0],
+        type: nodeKeyData[1],
+      })
+    );
+  });
+  return result;
+}
+
+function getSpanGroupData(
+  groupspans: Span[],
+  groupRef: StatisticsGroupRef
+): StatisticsSpan {
+  let maxTime = 0;
+  let minTime = 0;
+  let sumTime = 0;
+  const count = groupspans.length;
+  groupspans.forEach((groupspan: Span) => {
+    const duration = groupspan.dur || 0;
+    if (duration > maxTime) {
+      maxTime = duration;
+    }
+    if (duration < minTime) {
+      minTime = duration;
+    }
+    sumTime = sumTime + duration;
+  });
+  const avgTime = count === 0 ? 0 : sumTime / count;
+  return {
+    groupRef,
+    maxTime,
+    minTime,
+    sumTime,
+    avgTime,
+    count,
+  };
+}
+
+watch(
+  () => props.data,
+  () => {
+    if (!props.data.length) {
+      tableData.value = [];
+      return;
+    }
+    tableData.value = calculationDataforStatistics(props.data);
+    loading.value = false;
+  }
+);
+</script>

src/views/dashboard/related/trace/components/index.ts

@@ -18,9 +18,11 @@
 import List from "./List.vue";
 import Tree from "./Tree.vue";
 import Table from "./table/Index.vue";
+import Statistics from "./Statistics.vue";
 
 export default {
   List,
   Tree,
   Table,
+  Statistics,
 };

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

@@ -13,7 +13,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-chart-table">
+  <div class="trace-table">
     <div class="rk-trace-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
@@ -125,4 +125,10 @@ watch(
   text-align: center;
   margin-top: 10px;
 }
+
+.trace-table {
+  padding: 10px;
+  height: calc(100% - 95px);
+  width: 100%;
+}
 </style>

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

@@ -136,6 +136,7 @@ function sortStatistics(key: string) {
   font-size: 12px;
   height: 100%;
   overflow: auto;
+  width: 100%;
 }
 
 .trace-header {