From 9f57e351199b5e08bfad4e6587b77ed25e61b1e5 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Fri, 14 Oct 2022 11:28:10 +0800
Subject: [PATCH] revert logs on trace widget (#170)

---
 src/locales/lang/en.ts                        |  1 +
 src/locales/lang/es.ts                        |  1 +
 src/locales/lang/zh.ts                        |  1 +
 src/router/data/gateway.ts                    |  2 +-
 src/types/components.d.ts                     |  1 +
 .../trace/components/D3Graph/Index.vue        |  8 ---
 .../trace/components/D3Graph/SpanDetail.vue   | 71 +++++++++++++++----
 .../related/trace/utils/d3-trace-list.ts      |  1 +
 8 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 52cae280..92712471 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -154,6 +154,7 @@ const msg = {
   query: "Query",
   postgreSQL: "PostgreSQL",
   endpointTips: "The table shows up to 20 pieces of endpoints.",
+  apisix: "APISIX",
   seconds: "Seconds",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index 3d8e7739..f061bfbc 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -154,6 +154,7 @@ const msg = {
   query: "Consulta",
   postgreSQL: "PostgreSQL",
   endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
+  apisix: "APISIX",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index e72dfb77..af9bfc79 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -151,6 +151,7 @@ const msg = {
   query: "查询",
   postgreSQL: "PostgreSQL",
   endpointTips: "这里最多展示20条endpoints。",
+  apisix: "APISIX",
   seconds: "秒",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
diff --git a/src/router/data/gateway.ts b/src/router/data/gateway.ts
index c5e0b395..f3814381 100644
--- a/src/router/data/gateway.ts
+++ b/src/router/data/gateway.ts
@@ -30,7 +30,7 @@ export default [
         path: "/apisix",
         name: "APISIX",
         meta: {
-          title: "APISIX",
+          title: "apisix",
           layer: "APISIX",
         },
       },
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 98d9902c..695f24e0 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 35f3db68..a95d42d2 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -362,14 +362,6 @@ watch(
   border-radius: 4px;
 }
 
-.trace-list .trace-node rect {
-  cursor: pointer;
-
-  &:hover {
-    fill: rgba(0, 0, 0, 0.05);
-  }
-}
-
 .dialog-c-text {
   white-space: pre;
   overflow: auto;
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index eb534c1f..061325f8 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -81,34 +81,75 @@ limitations under the License. -->
       {{ t("relatedTraceLogs") }}
     </el-button>
   </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"
+      layout="prev, pager, next"
+      :pager-count="5"
+      :total="total"
+      @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 { inject } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import copy from "@/utils/copy";
-import getDashboard from "@/hooks/useDashboardsSession";
-import { LayoutConfig } from "@/types/dashboard";
+import { ElMessage } from "element-plus";
 import { dateFormat } from "@/utils/dateFormat";
+import { useTraceStore } from "@/store/modules/trace";
+import LogTable from "@/views/dashboard/related/log/LogTable/Index.vue";
 
-/*global defineProps, Recordable */
-const options: Recordable<LayoutConfig> = inject("options") || {};
+/*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 total = computed(() =>
+  traceStore.traceList.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 async function getTaceLogs() {
-  const { associationWidget } = getDashboard();
-  associationWidget(
-    (options.id as any) || "",
-    {
-      sourceId: options?.id || "",
-      traceId: props.currentSpan.traceId,
-      segmentId: props.currentSpan.segmentId,
-      spanId: props.currentSpan.spanId,
+  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 },
     },
-    "Log"
-  );
+  });
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function turnPage(p: number) {
+  pageNum.value = p;
+  getTaceLogs();
 }
 function showCurrentSpanDetail(text: string) {
   copy(text);
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 ddd70432..15190c7c 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -141,6 +141,7 @@ export default class ListGraph {
       .append("g")
       .attr("transform", `translate(${source.y0},${source.x0})`)
       .attr("class", "trace-node")
+      .attr("style", "cursor: pointer")
       .style("opacity", 0)
       .on("mouseover", function (event: any, d: Trace) {
         t.tip.show(d, this);