From ec36b0987ee7976681802383fc346b9267baed39 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 26 Feb 2022 16:47:42 +0800
Subject: [PATCH] feat: add related logs

---
 src/main.ts                                   |   3 +-
 src/styles/grid.scss                          | 510 ++++++++++++++++++
 src/styles/index.scss                         |  19 +
 src/utils/formatJson.ts                       |  25 +
 src/views/components/LogTable/Index.vue       |  23 +-
 src/views/components/LogTable/LogDetail.vue   |  75 +++
 src/views/dashboard/related/trace/Detail.vue  |   3 +-
 .../{Graph.vue => D3Graph/Index.vue}          |  13 +-
 .../trace/components/D3Graph/SpanDetail.vue   | 164 ++++++
 .../related/trace/components/List.vue         |   2 +-
 .../related/trace/components/Tree.vue         |   2 +-
 .../related/trace/components/table/Index.vue  |  21 -
 .../related/trace/utils/d3-trace-list.ts      |   2 +-
 src/views/log/LogList.vue                     |  66 +++
 14 files changed, 897 insertions(+), 31 deletions(-)
 create mode 100644 src/styles/grid.scss
 create mode 100644 src/styles/index.scss
 create mode 100644 src/utils/formatJson.ts
 create mode 100644 src/views/components/LogTable/LogDetail.vue
 rename src/views/dashboard/related/trace/components/{Graph.vue => D3Graph/Index.vue} (96%)
 create mode 100644 src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
 create mode 100644 src/views/log/LogList.vue

diff --git a/src/main.ts b/src/main.ts
index 4cb44b1d..962c2f06 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,8 +21,7 @@ import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
 import "element-plus/dist/index.css";
-import "./styles/lib.scss";
-import "./styles/reset.scss";
+import "./styles/index.scss";
 import ElementPlus from "element-plus";
 
 const app = createApp(App);
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
new file mode 100644
index 00000000..29b4dac9
--- /dev/null
+++ b/src/styles/grid.scss
@@ -0,0 +1,510 @@
+/**
+ * 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.
+ */
+
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg {
+  display: none !important;
+}
+@media (max-width: 767px) {
+  .show-xs {
+    display: block !important;
+  }
+
+  .hide-xs {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .show-sm {
+    display: block !important;
+  }
+
+  .hide-sm {
+    display: none !important;
+  }
+}
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .show-md {
+    display: block !important;
+  }
+
+  .hide-md {
+    display: none !important;
+  }
+}
+@media (min-width: 1280px) {
+  .show-lg {
+    display: block !important;
+  }
+
+  .hide-lg {
+    display: none !important;
+  }
+}
+
+.g-xs-1,
+.g-xs-2,
+.g-xs-3,
+.g-xs-4,
+.g-xs-5,
+.g-xs-6,
+.g-xs-7,
+.g-xs-8,
+.g-xs-9,
+.g-xs-10,
+.g-xs-11,
+.g-xs-12 {
+  float: left;
+  min-height: 1px;
+}
+
+.g-xs-12 {
+  width: 100%;
+}
+
+.g-xs-11 {
+  width: 91.666%;
+}
+
+.g-xs-10 {
+  width: 83.333%;
+}
+
+.g-xs-9 {
+  width: 75%;
+}
+
+.g-xs-8 {
+  width: 66.666%;
+}
+
+.g-xs-7 {
+  width: 58.333%;
+}
+
+.g-xs-6 {
+  width: 50%;
+}
+
+.g-xs-5 {
+  width: 41.666%;
+}
+
+.g-xs-4 {
+  width: 33.333%;
+}
+
+.g-xs-3 {
+  width: 25%;
+}
+
+.g-xs-2 {
+  width: 16.666%;
+}
+
+.g-xs-1 {
+  width: 8.333%;
+}
+
+.g-xs-space-12 {
+  margin-left: 100%;
+}
+
+.g-xs-space-11 {
+  margin-left: 91.666%;
+}
+
+.g-xs-space-10 {
+  margin-left: 83.333%;
+}
+
+.g-xs-space-9 {
+  margin-left: 75%;
+}
+
+.g-xs-space-8 {
+  margin-left: 66.666%;
+}
+
+.g-xs-space-7 {
+  margin-left: 58.333%;
+}
+
+.g-xs-space-6 {
+  margin-left: 50%;
+}
+
+.g-xs-space-5 {
+  margin-left: 41.666%;
+}
+
+.g-xs-space-4 {
+  margin-left: 33.333%;
+}
+
+.g-xs-space-3 {
+  margin-left: 25%;
+}
+
+.g-xs-space-2 {
+  margin-left: 16.666%;
+}
+
+.g-xs-space-1 {
+  margin-left: 8.333%;
+}
+@media (min-width: 768px) {
+  .g-sm-1,
+  .g-sm-2,
+  .g-sm-3,
+  .g-sm-4,
+  .g-sm-5,
+  .g-sm-6,
+  .g-sm-7,
+  .g-sm-8,
+  .g-sm-9,
+  .g-sm-10,
+  .g-sm-11,
+  .g-sm-12 {
+    float: left;
+    min-height: 1px;
+  }
+
+  .g-sm-12 {
+    width: 100%;
+  }
+
+  .g-sm-11 {
+    width: 91.666%;
+  }
+
+  .g-sm-10 {
+    width: 83.333%;
+  }
+
+  .g-sm-9 {
+    width: 75%;
+  }
+
+  .g-sm-8 {
+    width: 66.666%;
+  }
+
+  .g-sm-7 {
+    width: 58.333%;
+  }
+
+  .g-sm-6 {
+    width: 50%;
+  }
+
+  .g-sm-5 {
+    width: 41.666%;
+  }
+
+  .g-sm-4 {
+    width: 33.333%;
+  }
+
+  .g-sm-3 {
+    width: 25%;
+  }
+
+  .g-sm-2 {
+    width: 16.666%;
+  }
+
+  .g-sm-1 {
+    width: 8.333%;
+  }
+
+  .g-sm-space-12 {
+    margin-left: 100%;
+  }
+
+  .g-sm-space-11 {
+    margin-left: 91.666%;
+  }
+
+  .g-sm-space-10 {
+    margin-left: 83.333%;
+  }
+
+  .g-sm-space-9 {
+    margin-left: 75%;
+  }
+
+  .g-sm-space-8 {
+    margin-left: 66.666%;
+  }
+
+  .g-sm-space-7 {
+    margin-left: 58.333%;
+  }
+
+  .g-sm-space-6 {
+    margin-left: 50%;
+  }
+
+  .g-sm-space-5 {
+    margin-left: 41.666%;
+  }
+
+  .g-sm-space-4 {
+    margin-left: 33.333%;
+  }
+
+  .g-sm-space-3 {
+    margin-left: 25%;
+  }
+
+  .g-sm-space-2 {
+    margin-left: 16.666%;
+  }
+
+  .g-sm-space-1 {
+    margin-left: 8.333%;
+  }
+}
+@media (min-width: 1024px) {
+  .g-md-1,
+  .g-md-2,
+  .g-md-3,
+  .g-md-4,
+  .g-md-5,
+  .g-md-6,
+  .g-md-7,
+  .g-md-8,
+  .g-md-9,
+  .g-md-10,
+  .g-md-11,
+  .g-md-12 {
+    float: left;
+    min-height: 1px;
+  }
+
+  .g-md-12 {
+    width: 100%;
+  }
+
+  .g-md-11 {
+    width: 91.666%;
+  }
+
+  .g-md-10 {
+    width: 83.333%;
+  }
+
+  .g-md-9 {
+    width: 75%;
+  }
+
+  .g-md-8 {
+    width: 66.666%;
+  }
+
+  .g-md-7 {
+    width: 58.333%;
+  }
+
+  .g-md-6 {
+    width: 50%;
+  }
+
+  .g-md-5 {
+    width: 41.666%;
+  }
+
+  .g-md-4 {
+    width: 33.333%;
+  }
+
+  .g-md-3 {
+    width: 25%;
+  }
+
+  .g-md-2 {
+    width: 16.666%;
+  }
+
+  .g-md-1 {
+    width: 8.333%;
+  }
+
+  .g-md-space-12 {
+    margin-left: 100%;
+  }
+
+  .g-md-space-11 {
+    margin-left: 91.666%;
+  }
+
+  .g-md-space-10 {
+    margin-left: 83.333%;
+  }
+
+  .g-md-space-9 {
+    margin-left: 75%;
+  }
+
+  .g-md-space-8 {
+    margin-left: 66.666%;
+  }
+
+  .g-md-space-7 {
+    margin-left: 58.333%;
+  }
+
+  .g-md-space-6 {
+    margin-left: 50%;
+  }
+
+  .g-md-space-5 {
+    margin-left: 41.666%;
+  }
+
+  .g-md-space-4 {
+    margin-left: 33.333%;
+  }
+
+  .g-md-space-3 {
+    margin-left: 25%;
+  }
+
+  .g-md-space-2 {
+    margin-left: 16.666%;
+  }
+
+  .g-md-space-1 {
+    margin-left: 8.333%;
+  }
+}
+@media (min-width: 1280px) {
+  .g-lg-1,
+  .g-lg-2,
+  .g-lg-3,
+  .g-lg-4,
+  .g-lg-5,
+  .g-lg-6,
+  .g-lg-7,
+  .g-lg-8,
+  .g-lg-9,
+  .g-lg-10,
+  .g-lg-11,
+  .g-lg-12 {
+    float: left;
+    min-height: 1px;
+  }
+
+  .g-lg-12 {
+    width: 100%;
+  }
+
+  .g-lg-11 {
+    width: 91.666%;
+  }
+
+  .g-lg-10 {
+    width: 83.333%;
+  }
+
+  .g-lg-9 {
+    width: 75%;
+  }
+
+  .g-lg-8 {
+    width: 66.666%;
+  }
+
+  .g-lg-7 {
+    width: 58.333%;
+  }
+
+  .g-lg-6 {
+    width: 50%;
+  }
+
+  .g-lg-5 {
+    width: 41.666%;
+  }
+
+  .g-lg-4 {
+    width: 33.333%;
+  }
+
+  .g-lg-3 {
+    width: 25%;
+  }
+
+  .g-lg-2 {
+    width: 16.666%;
+  }
+
+  .g-lg-1 {
+    width: 8.333%;
+  }
+
+  .g-lg-space-12 {
+    margin-left: 100%;
+  }
+
+  .g-lg-space-11 {
+    margin-left: 91.666%;
+  }
+
+  .g-lg-space-10 {
+    margin-left: 83.333%;
+  }
+
+  .g-lg-space-9 {
+    margin-left: 75%;
+  }
+
+  .g-lg-space-8 {
+    margin-left: 66.666%;
+  }
+
+  .g-lg-space-7 {
+    margin-left: 58.333%;
+  }
+
+  .g-lg-space-6 {
+    margin-left: 50%;
+  }
+
+  .g-lg-space-5 {
+    margin-left: 41.666%;
+  }
+
+  .g-lg-space-4 {
+    margin-left: 33.333%;
+  }
+
+  .g-lg-space-3 {
+    margin-left: 25%;
+  }
+
+  .g-lg-space-2 {
+    margin-left: 16.666%;
+  }
+
+  .g-lg-space-1 {
+    margin-left: 8.333%;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 00000000..ce0421bb
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,19 @@
+/**
+ * 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 "./grid.scss";
+@import "./lib.scss";
+@import "./reset.scss";
diff --git a/src/utils/formatJson.ts b/src/utils/formatJson.ts
new file mode 100644
index 00000000..d1537758
--- /dev/null
+++ b/src/utils/formatJson.ts
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+const censor = (key: any, value: any) => {
+  if (typeof value === "function") {
+    return Function.prototype.toString.call(value);
+  }
+  return value;
+};
+export const formatJson = (data: JSON) => {
+  return JSON.stringify(data, censor, 2);
+};
diff --git a/src/views/components/LogTable/Index.vue b/src/views/components/LogTable/Index.vue
index 43f42727..e70707b8 100644
--- a/src/views/components/LogTable/Index.vue
+++ b/src/views/components/LogTable/Index.vue
@@ -38,17 +38,28 @@ limitations under the License. -->
         v-for="(item, index) in tableData"
         :data="item"
         :key="'browser' + index"
+        @select="setCurrentLog"
       />
     </div>
     <div v-else>
-      <LogServiceItem
+      <LogService
         v-for="(item, index) in tableData"
         :data="item"
         :key="'service' + index"
         :noLink="noLink"
+        @select="setCurrentLog"
       />
     </div>
     <slot></slot>
+    <el-dialog
+      v-model="showDetail"
+      :destroy-on-close="true"
+      fullscreen
+      @closed="showDetail = false"
+      :title="t('logDetail')"
+    >
+      <LogDetail :currentLog="currentLog" />
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
@@ -56,7 +67,8 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { ServiceLogConstants, BrowserLogConstants } from "./data";
 import LogBrowser from "./LogBrowser.vue";
-import LogServiceItem from "./LogService.vue";
+import LogService from "./LogService.vue";
+import LogDetail from "./LogDetail.vue";
 
 /*global defineProps, Nullable */
 const props = defineProps({
@@ -65,10 +77,17 @@ const props = defineProps({
   noLink: { type: Boolean, default: true },
 });
 const { t } = useI18n();
+const currentLog = ref<any>({});
+const showDetail = ref<boolean>(false);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
 // const method = ref<number>(380);
 const columns: any[] =
   props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
+
+function setCurrentLog(log: any) {
+  showDetail.value = true;
+  currentLog.value = log;
+}
 </script>
 <style lang="scss" scoped>
 .log {
diff --git a/src/views/components/LogTable/LogDetail.vue b/src/views/components/LogTable/LogDetail.vue
new file mode 100644
index 00000000..45881327
--- /dev/null
+++ b/src/views/components/LogTable/LogDetail.vue
@@ -0,0 +1,75 @@
+<!-- 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-detail">
+    <div
+      class="mb-10 clear rk-flex"
+      v-for="(item, index) in columns"
+      :key="index"
+    >
+      <template>
+        <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
+        <span v-if="item.label === 'timestamp'" class="g-sm-8">
+          {{ dateFormat(currentLog[item.label]) }}
+        </span>
+        <textarea
+          class="content"
+          :readonly="true"
+          v-else-if="item.label === 'content'"
+          :value="currentLog[item.label]"
+        />
+        <span v-else-if="item.label === 'tags'" class="g-sm-8">
+          <div v-for="(d, index) in logTags" :key="index">{{ d }}</div>
+        </span>
+        <span v-else class="g-sm-8">{{ currentLog[item.label] }}</span>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import dayjs from "dayjs";
+import { ServiceLogDetail } from "@/views/components/LogTable/data";
+
+/*global defineProps */
+const props = defineProps({
+  currentLog: { type: Object as PropType<any>, default: () => ({}) },
+});
+const { t } = useI18n();
+const columns = ServiceLogDetail;
+const logTags = computed(() => {
+  if (!props.currentLog.tags) {
+    return [];
+  }
+  return props.currentLog.tags.map((d: { key: string; value: string }) => {
+    return `${d.key} = ${d.value}`;
+  });
+});
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+</script>
+<style lang="scss" scoped>
+.content {
+  max-width: 700px;
+  min-width: 500px;
+  min-height: 500px;
+  border: none;
+  outline: none;
+  color: #3d444f;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 71e8ac9f..198cea07 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -36,7 +36,7 @@ limitations under the License. -->
         >
           <div>
             <el-pagination
-              v-model:currentPage="traceStore.conditions.paging.pageNum"
+              v-model:currentPage="pageNum"
               v-model:page-size="pageSize"
               :small="true"
               :total="traceStore.traceSpanLogsTotal"
@@ -210,6 +210,7 @@ export default defineComponent({
       showTraceLogs,
       turnLogsPage,
       pageSize,
+      pageNum,
     };
   },
 });
diff --git a/src/views/dashboard/related/trace/components/Graph.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
similarity index 96%
rename from src/views/dashboard/related/trace/components/Graph.vue
rename to src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 15f8466d..abbb0f26 100644
--- a/src/views/dashboard/related/trace/components/Graph.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -15,15 +15,24 @@ limitations under the License. -->
     <Icon iconName="spinner" size="sm" />
   </div>
   <div ref="traceGraph" class="d3-graph"></div>
+  <el-dialog
+    v-model="showDetail"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="showDetail = false"
+  >
+    <SpanDetail :currentSpan="currentSpan" />
+  </el-dialog>
 </template>
 <script lang="ts" setup>
 import { ref, watch, onBeforeUnmount, onMounted } from "vue";
 import type { PropType } from "vue";
 import _ from "lodash";
 import * as d3 from "d3";
-import ListGraph from "../utils/d3-trace-list";
-import TreeGraph from "../utils/d3-trace-tree";
+import ListGraph from "../../utils/d3-trace-list";
+import TreeGraph from "../../utils/d3-trace-tree";
 import { Span } from "@/types/trace";
+import SpanDetail from "./SpanDetail.vue";
 
 /* global defineProps, Nullable, defineExpose*/
 const props = defineProps({
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
new file mode 100644
index 00000000..78affb10
--- /dev/null
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -0,0 +1,164 @@
+<!-- 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>
+    <h5 class="mb-15">{{ t("tags") }}.</h5>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">{{ t("service") }}:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.serviceCode }}</span>
+    </div>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">{{ t("instance") }}:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.serviceInstanceName }}</span>
+    </div>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">{{ t("endpoint") }}:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.label }}</span>
+    </div>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">{{ t("spanType") }}:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.type }}</span>
+    </div>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">{{ t("component") }}:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.component }}</span>
+    </div>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">Peer:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.peer || "No Peer" }}</span>
+    </div>
+    <div class="mb-10 clear">
+      <span class="g-sm-4 grey">{{ t("error") }}:</span>
+      <span class="g-sm-8 wba">{{ currentSpan.isError }}</span>
+    </div>
+    <div class="mb-10 clear" v-for="i in currentSpan.tags" :key="i.key">
+      <span class="g-sm-4 grey">{{ i.key }}:</span>
+      <span class="g-sm-8 wba">
+        {{ i.value }}
+        <svg
+          v-if="i.key === 'db.statement'"
+          class="icon vm grey link-hover cp ml-5"
+          @click="copy(i.value)"
+        >
+          <use xlink:href="#review-list"></use>
+        </svg>
+      </span>
+    </div>
+    <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length">
+      {{ t("logs") }}.
+    </h5>
+    <div v-for="(i, index) in currentSpan.logs" :key="index">
+      <div class="mb-10 sm">
+        <span class="mr-10">{{ t("time") }}:</span
+        ><span class="grey">{{ dateFormat(i.time) }}</span>
+      </div>
+      <div class="mb-15 clear" v-for="(_i, _index) in i.data" :key="_index">
+        <div class="mb-10">
+          {{ _i.key }}:<span
+            v-if="_i.key === 'stack'"
+            class="r rk-sidebox-magnify"
+            @click="showCurrentSpanDetail(_i.value)"
+          >
+            <svg class="icon">
+              <use xlink:href="#magnify"></use>
+            </svg>
+          </span>
+        </div>
+        <pre class="pl-15 mt-0 mb-0 sm oa">{{ _i.value }}</pre>
+      </div>
+    </div>
+    <div @click="getTaceLogs()">
+      <el-button class="popup-btn" type="primary">
+        {{ t("relatedTraceLogs") }}
+      </el-button>
+    </div>
+  </div>
+  <el-dialog
+    v-model="showRelatedLogs"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="showRelatedLogs = false"
+  >
+    <el-pagination
+      v-model:currentPage="pageNum"
+      v-model:page-size="pageSize"
+      :small="true"
+      :total="traceStore.traceSpanLogsTotal"
+      @current-change="turnPage"
+    />
+    <LogTable
+      :tableData="traceStore.traceSpanLogs || []"
+      :type="`service`"
+      :noLink="true"
+    >
+      <div class="log-tips" v-if="!traceStore.traceSpanLogs.length">
+        {{ t("noData") }}
+      </div>
+    </LogTable>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import type { PropType } from "vue";
+import dayjs from "dayjs";
+import { useTraceStore } from "@/store/modules/trace";
+import copy from "@/utils/copy";
+import { ElMessage } from "element-plus";
+import LogTable from "@/views/components/LogTable/Index.vue";
+
+/* global defineProps */
+const props = defineProps({
+  currentSpan: { type: Object as PropType<any>, default: () => ({}) },
+});
+const { t } = useI18n();
+const traceStore = useTraceStore();
+const pageNum = ref<number>(1);
+const showRelatedLogs = ref<boolean>(false);
+const pageSize = 10;
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+async function getTaceLogs() {
+  showRelatedLogs.value = true;
+  const res = await traceStore.getSpanLogs({
+    condition: {
+      relatedTrace: {
+        traceId: props.currentSpan.traceId,
+        segmentId: props.currentSpan.segmentId,
+        spanId: props.currentSpan.spanId,
+      },
+      paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+    },
+  });
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function turnPage(p: number) {
+  pageNum.value = p;
+  getTaceLogs();
+}
+function showCurrentSpanDetail(text: string) {
+  copy(text);
+}
+</script>
+<style lang="scss" scoped>
+.popup-btn {
+  color: #fff;
+  margin-top: 40px;
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index 0e5a9ca9..c9a48d52 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -37,7 +37,7 @@ import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import { Span } from "@/types/trace";
-import Graph from "./Graph.vue";
+import Graph from "./D3Graph/Index.vue";
 
 /* global defineProps*/
 const props = defineProps({
diff --git a/src/views/dashboard/related/trace/components/Tree.vue b/src/views/dashboard/related/trace/components/Tree.vue
index 9f681d11..43f2d06c 100644
--- a/src/views/dashboard/related/trace/components/Tree.vue
+++ b/src/views/dashboard/related/trace/components/Tree.vue
@@ -41,7 +41,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import * as d3 from "d3";
-import Graph from "./Graph.vue";
+import Graph from "./D3Graph/Index.vue";
 import type { PropType } from "vue";
 import { Span } from "@/types/trace";
 import { useI18n } from "vue-i18n";
diff --git a/src/views/dashboard/related/trace/components/table/Index.vue b/src/views/dashboard/related/trace/components/table/Index.vue
index ae375f86..07bc73e2 100644
--- a/src/views/dashboard/related/trace/components/table/Index.vue
+++ b/src/views/dashboard/related/trace/components/table/Index.vue
@@ -77,27 +77,6 @@ function handleSelectSpan(data: any[]) {
   emit("select", data);
 }
 
-function showCurrentSpanDetail(title: string, text: string) {
-  const textLineNumber = text.split("\n").length;
-  let textHeight = textLineNumber * 20.2 + 10;
-  const tmpHeight = window.innerHeight * 0.9;
-  textHeight = textHeight >= tmpHeight ? tmpHeight : textHeight;
-  // this.$modal.show('dialog', {
-  //   title,
-  //   text: `<div style="height:${textHeight}px">${text}</div>`,
-  //   buttons: [
-  //     {
-  //       title: 'Copy',
-  //       handler: () => {
-  //         this.copy(text);
-  //       },
-  //     },
-  //     {
-  //       title: 'Close',
-  //     },
-  //   ],
-  // });
-}
 function handleViewSpan() {
   showDetail.value = true;
 }
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index fa89beca..f987e1bd 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -147,7 +147,7 @@ export default class ListGraph {
       .on("mouseout", function (event: any, d: Trace) {
         t.tip.hide(d, this);
       })
-      .on("click", (d: Trace) => {
+      .on("click", (event: any, d: Trace) => {
         if (this.handleSelectSpan) {
           this.handleSelectSpan(d);
         }
diff --git a/src/views/log/LogList.vue b/src/views/log/LogList.vue
new file mode 100644
index 00000000..2dd1261d
--- /dev/null
+++ b/src/views/log/LogList.vue
@@ -0,0 +1,66 @@
+<!-- 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-detail-chart-table">
+    <div class="rk-log-t-loading" v-show="loading">
+      <svg class="icon loading">
+        <use xlink:href="#spinner"></use>
+      </svg>
+    </div>
+    <LogTable :tableData="data" :type="`service`" :noLink="noLink">
+      <div class="log-tips" v-if="!data.length">{{ $t("noData") }}</div>
+    </LogTable>
+    <el-dialog
+      v-model="showDetail"
+      :destroy-on-close="true"
+      :width="800"
+      @closed="showDetail = false"
+      :title="t('logDetail')"
+    >
+      <LogDetail :currentLog="currentLog" />
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import LogTable from "@/views/components/LogTable/Index.vue";
+import { ServiceLogDetail } from "@/views/components/LogTable/data";
+import { formatJson } from "@/utils/formatJson";
+// import LogDetail from "./LogDetail.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  noLink: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+});
+const showDetail = ref<boolean>(false);
+const { t } = useI18n();
+const columns = ServiceLogDetail;
+const currentLog = ref<any>({});
+const logContent = ref<string>("");
+
+function handleSelectLog(data: any) {
+  currentLog.value = data;
+  if (currentLog.value.contentType === "JSON") {
+    logContent.value = formatJson(JSON.parse(this.currentLog.content));
+  } else {
+    logContent.value = this.currentLog.content;
+  }
+  this.showDetail = true;
+}
+</script>