From 22126faef5151bd14ad0ccbdee53def514cdb75c Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 26 Feb 2022 15:17:55 +0800
Subject: [PATCH] feat: add trace log

---
 src/components/Selector.vue                   |   1 -
 src/graphql/fragments/log.ts                  |  65 ++++++++++
 src/graphql/index.ts                          |   2 +
 src/graphql/query/log.ts                      |  27 ++++
 src/store/modules/trace.ts                    |  19 ++-
 src/views/components/LogTable/Index.vue       | 117 +++++++++++++++++
 src/views/components/LogTable/LogBrowser.vue  | 107 ++++++++++++++++
 src/views/components/LogTable/LogService.vue  | 115 +++++++++++++++++
 src/views/components/LogTable/data.ts         | 120 ++++++++++++++++++
 src/views/dashboard/related/trace/Detail.vue  |  92 ++++++++++----
 .../dashboard/related/trace/TraceList.vue     |   4 +-
 .../related/trace/components/table/Index.vue  |   3 +-
 .../related/trace/utils/trace-table.ts        |  16 +--
 13 files changed, 644 insertions(+), 44 deletions(-)
 create mode 100644 src/graphql/fragments/log.ts
 create mode 100644 src/graphql/query/log.ts
 create mode 100644 src/views/components/LogTable/Index.vue
 create mode 100644 src/views/components/LogTable/LogBrowser.vue
 create mode 100644 src/views/components/LogTable/LogService.vue
 create mode 100644 src/views/components/LogTable/data.ts

diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 37920ca6..46aa408b 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -35,7 +35,6 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import type { PropType } from "vue";
-import { ElSelect, ElOption } from "element-plus";
 
 interface Option {
   label: string;
diff --git a/src/graphql/fragments/log.ts b/src/graphql/fragments/log.ts
new file mode 100644
index 00000000..cfc505d5
--- /dev/null
+++ b/src/graphql/fragments/log.ts
@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+
+export const QueryBrowserErrorLogs = {
+  variable: "$condition: BrowserErrorLogQueryCondition",
+  query: `
+    queryBrowserErrorLogs(condition: $condition) {
+        logs {
+           message
+           service
+           serviceVersion
+           time
+           pagePath
+           category
+           errorUrl
+           stack
+           grade
+        }
+        total
+    }`,
+};
+
+export const QueryServiceLogs = {
+  variable: "$condition: LogQueryCondition",
+  query: `
+    queryLogs(condition: $condition) {
+        logs {
+          serviceName
+          serviceId
+          serviceInstanceName
+          serviceInstanceId
+          endpointName
+          endpointId
+          traceId
+          timestamp
+          contentType
+          content
+          tags {
+            key
+            value
+          }
+        }
+        total
+    }`,
+};
+
+export const QueryLogsByKeywords = {
+  variable: "",
+  query: `
+  support: supportQueryLogsByKeywords`,
+};
diff --git a/src/graphql/index.ts b/src/graphql/index.ts
index c7db9f84..78b1a5c8 100644
--- a/src/graphql/index.ts
+++ b/src/graphql/index.ts
@@ -21,6 +21,7 @@ import * as selector from "./query/selector";
 import * as dashboard from "./query/dashboard";
 import * as topology from "./query/topology";
 import * as trace from "./query/trace";
+import * as log from "./query/log";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -28,6 +29,7 @@ const query: { [key: string]: string } = {
   ...dashboard,
   ...topology,
   ...trace,
+  ...log,
 };
 class Graphql {
   private queryData = "";
diff --git a/src/graphql/query/log.ts b/src/graphql/query/log.ts
new file mode 100644
index 00000000..cac2e2e1
--- /dev/null
+++ b/src/graphql/query/log.ts
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+import {
+  QueryBrowserErrorLogs,
+  QueryServiceLogs,
+  QueryLogsByKeywords,
+} from "../fragments/log";
+
+export const queryBrowserErrorLogs = `query queryBrowserErrorLogs(${QueryBrowserErrorLogs.variable}) {
+  ${QueryBrowserErrorLogs.query}}`;
+export const queryServiceLogs = `query queryLogs(${QueryServiceLogs.variable}) {${QueryServiceLogs.query}}`;
+export const queryLogsByKeywords = `query queryLogsByKeywords {${QueryLogsByKeywords.query}}`;
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 6e18179f..0cccd6c7 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -32,8 +32,8 @@ interface TraceState {
   traceSpans: Span[];
   currentTrace: Trace | any;
   conditions: any;
-  // traceSpanLogs: any[];
-  // traceSpanLogsTotal: number;
+  traceSpanLogs: any[];
+  traceSpanLogsTotal: number;
   // traceListErrors: string;
   // traceSpanErrors: string;
   // traceSpanLogErrors: string;
@@ -56,6 +56,8 @@ export const traceStore = defineStore({
       queryOrder: "BY_START_TIME",
       paging: { pageNum: 1, pageSize: 15, needTotal: true },
     },
+    traceSpanLogs: [],
+    traceSpanLogsTotal: 0,
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
   }),
@@ -122,6 +124,19 @@ export const traceStore = defineStore({
       }
       this.setTraceSpans(res.data.data.trace.spans || []);
     },
+    async getSpanLogs(params: any) {
+      const res: AxiosResponse = await graphql
+        .query("queryServiceLogs")
+        .params(params);
+      if (res.data.errors) {
+        this.traceSpanLogs = [];
+        this.traceSpanLogsTotal = 0;
+        return res.data;
+      }
+      this.traceSpanLogs = res.data.data.queryLogs.logs || [];
+      this.traceSpanLogsTotal = res.data.data.queryLogs.total;
+      return res.data;
+    },
   },
 });
 
diff --git a/src/views/components/LogTable/Index.vue b/src/views/components/LogTable/Index.vue
new file mode 100644
index 00000000..43f42727
--- /dev/null
+++ b/src/views/components/LogTable/Index.vue
@@ -0,0 +1,117 @@
+<!-- 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="log">
+    <div class="log-header">
+      <template v-for="(item, index) in columns">
+        <div
+          class="method"
+          :style="`width: ${item.method}px`"
+          v-if="item.drag"
+          :key="index"
+        >
+          <span class="r cp" ref="dragger" :data-index="index">
+            <Icon iconName="settings_ethernet" size="sm" />
+          </span>
+          {{ t(item.value) }}
+        </div>
+        <div v-else :class="item.label" :key="`col${index}`">
+          {{ t(item.value) }}
+        </div>
+      </template>
+    </div>
+    <div v-if="type === 'browser'">
+      <LogBrowser
+        v-for="(item, index) in tableData"
+        :data="item"
+        :key="'browser' + index"
+      />
+    </div>
+    <div v-else>
+      <LogServiceItem
+        v-for="(item, index) in tableData"
+        :data="item"
+        :key="'service' + index"
+        :noLink="noLink"
+      />
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { ServiceLogConstants, BrowserLogConstants } from "./data";
+import LogBrowser from "./LogBrowser.vue";
+import LogServiceItem from "./LogService.vue";
+
+/*global defineProps, Nullable */
+const props = defineProps({
+  type: { type: String, default: "service" },
+  tableData: { type: Array, default: () => [] },
+  noLink: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const dragger = ref<Nullable<HTMLSpanElement>>(null);
+// const method = ref<number>(380);
+const columns: any[] =
+  props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
+</script>
+<style lang="scss" scoped>
+.log {
+  font-size: 12px;
+  height: 100%;
+  overflow: auto;
+}
+
+.log-header {
+  /*display: flex;*/
+  white-space: nowrap;
+  user-select: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /*background-color: #f3f4f9;*/
+  .traceId {
+    width: 390px;
+  }
+
+  .content,
+  .tags {
+    width: 300px;
+  }
+
+  .serviceInstanceName,
+  .serviceName {
+    width: 200px;
+  }
+}
+
+.log-header div {
+  /*min-width: 140px;*/
+  width: 140px;
+  /*flex-grow: 1;*/
+  display: inline-block;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  line-height: 30px;
+  background-color: #f3f4f9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/components/LogTable/LogBrowser.vue b/src/views/components/LogTable/LogBrowser.vue
new file mode 100644
index 00000000..20fbb7d8
--- /dev/null
+++ b/src/views/components/LogTable/LogBrowser.vue
@@ -0,0 +1,107 @@
+<!-- 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 @click="showSelectSpan" :class="['log-item', 'clearfix']" ref="logItem">
+    <div
+      v-for="(item, index) in columns"
+      :key="index"
+      :class="[
+        'method',
+        ['message', 'stack'].includes(item.label) ? 'autoHeight' : '',
+      ]"
+      :style="{
+        lineHeight: 1.3,
+        width: `${item.drag ? item.method : ''}px`,
+      }"
+    >
+      <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
+      <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
+      <span v-else v-tooltip:bottom="data[item.label] || '-'">{{
+        data[item.label] || "-"
+      }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { BrowserLogConstants } from "./data";
+
+/*global defineProps, defineEmits, NodeListOf  */
+const props = defineProps({
+  data: { type: Array as any, default: () => [] },
+});
+const columns = BrowserLogConstants;
+const emit = defineEmits(["select"]);
+
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+
+function showSelectSpan() {
+  const items: NodeListOf<any> = document.querySelectorAll(".log-item");
+
+  for (const item of items) {
+    item.style.background = "#fff";
+  }
+  const logItem: any = this.$refs.logItem;
+
+  logItem.style.background = "rgba(0, 0, 0, 0.1)";
+  emit("select", props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-item {
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+}
+
+.log-item.selected {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item:not(.level0):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item:hover {
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+
+.log-item > div {
+  width: 140px;
+  padding: 0 5px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item .text {
+  width: 100% !important;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item > div.method {
+  padding: 7px 5px;
+  line-height: 30px;
+}
+</style>
diff --git a/src/views/components/LogTable/LogService.vue b/src/views/components/LogTable/LogService.vue
new file mode 100644
index 00000000..59943d47
--- /dev/null
+++ b/src/views/components/LogTable/LogService.vue
@@ -0,0 +1,115 @@
+<!-- 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 @click="showSelectSpan" class="log-item">
+    <div v-for="(item, index) in columns" :key="index" :class="item.label">
+      <span v-if="item.label === 'timestamp'">
+        {{ dateFormat(data.timestamp) }}
+      </span>
+      <span v-else-if="item.label === 'tags'">
+        {{ tags }}
+      </span>
+      <router-link
+        v-else-if="item.label === 'traceId' && !noLink"
+        :to="{ name: 'trace', query: { traceid: data[item.label] } }"
+      >
+        <span>{{ data[item.label] }}</span>
+      </router-link>
+      <span v-else>{{ data[item.label] }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import dayjs from "dayjs";
+import { ServiceLogConstants } from "./data";
+/*global defineProps, defineEmits */
+const props = defineProps({
+  data: { type: Array as any, default: () => [] },
+  noLink: { type: Boolean, default: true },
+});
+const emit = defineEmits(["select"]);
+const columns = ServiceLogConstants;
+const tags = computed(() => {
+  if (!props.data.tags) {
+    return "";
+  }
+  return String(props.data.tags.map((d: any) => `${d.key}=${d.value}`));
+});
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+function showSelectSpan() {
+  emit("select", props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-item {
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+
+  .traceId {
+    width: 390px;
+    color: #448dfe;
+    cursor: pointer;
+
+    span {
+      display: inline-block;
+      width: 100%;
+      line-height: 30px;
+    }
+  }
+
+  .content,
+  .tags {
+    width: 300px;
+  }
+
+  .serviceInstanceName,
+  .serviceName {
+    width: 200px;
+  }
+}
+
+.log-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item > div {
+  width: 140px;
+  padding: 0 5px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item .text {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item > div.method {
+  height: 100%;
+  padding: 3px 8px;
+}
+</style>
diff --git a/src/views/components/LogTable/data.ts b/src/views/components/LogTable/data.ts
new file mode 100644
index 00000000..9765e019
--- /dev/null
+++ b/src/views/components/LogTable/data.ts
@@ -0,0 +1,120 @@
+/**
+ * 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.
+ */
+
+export const ServiceLogConstants = [
+  {
+    label: "serviceName",
+    value: "service",
+  },
+  {
+    label: "serviceInstanceName",
+    value: "instance",
+  },
+  {
+    label: "timestamp",
+    value: "time",
+  },
+  {
+    label: "contentType",
+    value: "contentType",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "content",
+    value: "content",
+  },
+  {
+    label: "traceId",
+    value: "traceID",
+  },
+];
+export const ServiceLogDetail = [
+  {
+    label: "serviceName",
+    value: "currentService",
+  },
+  {
+    label: "serviceInstanceName",
+    value: "currentInstance",
+  },
+  {
+    label: "timestamp",
+    value: "time",
+  },
+  {
+    label: "contentType",
+    value: "contentType",
+  },
+  {
+    label: "traceId",
+    value: "traceID",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "content",
+    value: "content",
+  },
+];
+// The order of columns should be time, service, error, stack, version, url, catalog, and grade.
+export const BrowserLogConstants = [
+  {
+    label: "service",
+    value: "service",
+  },
+  {
+    label: "serviceVersion",
+    value: "serviceVersion",
+  },
+  {
+    label: "errorUrl",
+    value: "errorPage",
+  },
+  {
+    label: "time",
+    value: "time",
+  },
+  {
+    label: "message",
+    value: "message",
+    drag: true,
+    method: 350,
+  },
+  {
+    label: "stack",
+    value: "stack",
+    drag: true,
+    method: 350,
+  },
+  // {
+  //   label: 'pagePath',
+  //   value: 'Page Path',
+  // },
+  {
+    label: "category",
+    value: "category",
+  },
+  {
+    label: "grade",
+    value: "grade",
+  },
+];
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 4aadb25b..71e8ac9f 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -23,9 +23,36 @@ limitations under the License. -->
           class="red mr-5 sm"
         />
         <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
-        <!-- <div class="trace-log-btn bg-blue r mr-10" @click="searchTraceLogs">
-        {{ t("viewLogs") }}
-      </div> -->
+        <div class="trace-log-btn">
+          <el-button class="mr-10" type="primary" @click="searchTraceLogs">
+            {{ t("viewLogs") }}
+          </el-button>
+        </div>
+        <el-dialog
+          v-model="showTraceLogs"
+          :destroy-on-close="true"
+          fullscreen
+          @closed="showTraceLogs = false"
+        >
+          <div>
+            <el-pagination
+              v-model:currentPage="traceStore.conditions.paging.pageNum"
+              v-model:page-size="pageSize"
+              :small="true"
+              :total="traceStore.traceSpanLogsTotal"
+              @current-change="turnLogsPage"
+            />
+            <LogTable
+              :tableData="traceStore.traceSpanLogs || []"
+              :type="`service`"
+              :noLink="true"
+            >
+              <div class="log-tips" v-if="!traceStore.traceSpanLogs.length">
+                {{ t("noData") }}
+              </div>
+            </LogTable>
+          </div>
+        </el-dialog>
       </h5>
       <div class="mb-5 blue sm">
         <Selector
@@ -114,20 +141,27 @@ import { Option } from "@/types/app";
 import copy from "@/utils/copy";
 import List from "./components/List.vue";
 import graphs from "./components/index";
+import LogTable from "@/views/components/LogTable/Index.vue";
+import { ElMessage } from "element-plus";
 
 export default defineComponent({
   name: "TraceDetail",
   components: {
     ...graphs,
     List,
+    LogTable,
   },
   setup() {
     const { t } = useI18n();
     const traceStore = useTraceStore();
     const traceId = ref<string>("");
     const displayMode = ref<string>("List");
+    const pageNum = ref<number>(1);
+    const pageSize = 10;
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
+    const showTraceLogs = ref<boolean>(false);
+
     function handleClick(ids: string[]) {
       let copyValue = null;
       if (ids.length === 1) {
@@ -138,22 +172,33 @@ export default defineComponent({
       copy(copyValue);
     }
 
-    function changeTraceId(opt: Option[]) {
+    async function changeTraceId(opt: Option[]) {
       traceId.value = opt[0].value;
-      traceStore.getTraceSpans({ traceId: opt[0].value });
+      const res = await traceStore.getTraceSpans({ traceId: opt[0].value });
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
     }
 
-    // function searchTraceLogs() {
-    //       this.showTraceLogs = true;
-    //       this.GET_TRACE_SPAN_LOGS({
-    //         condition: {
-    //           relatedTrace: {
-    //             traceId: this.traceId || traceStore.current.traceIds[0],
-    //           },
-    //           paging: { pageNum: this.pageNum, pageSize: this.pageSize, needTotal: true },
-    //         },
-    //       });
-    //     }
+    async function searchTraceLogs() {
+      showTraceLogs.value = true;
+      const res = await traceStore.getSpanLogs({
+        condition: {
+          relatedTrace: {
+            traceId: traceId.value || traceStore.currentTrace.traceIds[0],
+          },
+          paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+        },
+      });
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    }
+
+    function turnLogsPage(page: number) {
+      pageNum.value = page;
+      searchTraceLogs();
+    }
     return {
       traceStore,
       displayMode,
@@ -161,6 +206,10 @@ export default defineComponent({
       changeTraceId,
       handleClick,
       t,
+      searchTraceLogs,
+      showTraceLogs,
+      turnLogsPage,
+      pageSize,
     };
   },
 });
@@ -205,16 +254,7 @@ export default defineComponent({
 }
 
 .trace-log-btn {
-  padding: 3px 9px;
-  background-color: #484b55;
-  border-radius: 4px;
-  color: #eee;
-  font-weight: normal;
-  cursor: pointer;
-
-  &.bg-blue {
-    background-color: #448dfe;
-  }
+  float: right;
 }
 
 .tag {
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index a5d7a90d..22641781 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -96,7 +96,7 @@ function searchTrace() {
 
 function updatePage(p: number) {
   traceStore.setCondition({
-    paging: { pageNum: p, pageSize: 15, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
   });
   searchTrace();
 }
@@ -104,7 +104,7 @@ function updatePage(p: number) {
 function changeSort(opt: Option[]) {
   traceStore.setCondition({
     queryOrder: opt[0].value,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true },
   });
   searchTrace();
 }
diff --git a/src/views/dashboard/related/trace/components/table/Index.vue b/src/views/dashboard/related/trace/components/table/Index.vue
index de1ae041..ae375f86 100644
--- a/src/views/dashboard/related/trace/components/table/Index.vue
+++ b/src/views/dashboard/related/trace/components/table/Index.vue
@@ -14,7 +14,7 @@ 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-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
     <TableContainer
@@ -29,7 +29,6 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ref, watch, onMounted } from "vue";
 import type { PropType } from "vue";
-import copy from "@/utils/copy";
 import TableContainer from "./TableContainer.vue";
 import traceTable from "../../utils/trace-table";
 
diff --git a/src/views/dashboard/related/trace/utils/trace-table.ts b/src/views/dashboard/related/trace/utils/trace-table.ts
index 3368b561..c63ae899 100644
--- a/src/views/dashboard/related/trace/utils/trace-table.ts
+++ b/src/views/dashboard/related/trace/utils/trace-table.ts
@@ -31,7 +31,7 @@ export default class TraceUtil {
 
   public static changeTree(data: Span[], cureentTraceId: string) {
     const segmentIdList: Span[] = [];
-    const traceTreeRef: any = this.changeTreeCore(data, cureentTraceId);
+    const traceTreeRef: any = this.changeTreeCore(data);
     traceTreeRef.segmentIdGroup.forEach((segmentId: string) => {
       if (traceTreeRef.segmentMap.get(segmentId).refs) {
         traceTreeRef.segmentMap.get(segmentId).refs.forEach((ref: Ref) => {
@@ -58,13 +58,10 @@ export default class TraceUtil {
     return segmentIdList;
   }
 
-  public static changeStatisticsTree(
-    data: Span[],
-    cureentTraceId: string
-  ): Map<string, Span[]> {
+  public static changeStatisticsTree(data: Span[]): Map<string, Span[]> {
     const result = new Map<string, Span[]>();
-    const traceTreeRef = this.changeTreeCore(data, cureentTraceId);
-    traceTreeRef.segmentMap.forEach((span, segmentId) => {
+    const traceTreeRef = this.changeTreeCore(data);
+    traceTreeRef.segmentMap.forEach((span) => {
       const groupRef = span.endpointName + ":" + span.type;
       if (span.children && span.children.length > 0) {
         this.calculationChildren(span.children, result);
@@ -80,10 +77,7 @@ export default class TraceUtil {
     return result;
   }
 
-  private static changeTreeCore(
-    data: Span[],
-    cureentTraceId: string
-  ): TraceTreeRef {
+  private static changeTreeCore(data: Span[]): TraceTreeRef {
     // set a breakpoint at this line
     if (data.length === 0) {
       return {