update

src/hooks/useDashboardsSession.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
+
 export default function getDashboard(param: {
   name: string;
   layer: string;
@@ -29,7 +31,7 @@ export default function getDashboard(param: {
       d.layer === param.layer
   );
   const all = dashboardStore.layout;
-  const widgets = [];
+  const widgets: LayoutConfig[] = [];
   for (const item of all) {
     if (item.type === "Tab") {
       if (item.children && item.children.length) {
@@ -43,5 +45,31 @@ export default function getDashboard(param: {
       widgets.push(item);
     }
   }
-  return { dashboard, widgets };
+  function associationWidget(sourceId: string, filters: unknown, type: string) {
+    const widget = widgets.filter((d: { type: string }) => d.type === type)[0];
+    if (!widget) {
+      return;
+    }
+    const item = {
+      ...widget,
+      filters,
+    };
+    dashboardStore.setWidget(item);
+    const targetTabIndex = (widget.id || "").split("-");
+    const sourceTabindex = (sourceId || "").split("-") || [];
+    let container: Nullable<Element>;
+
+    if (targetTabIndex[1] === undefined) {
+      container = document.querySelector(".ds-main");
+    } else {
+      container = document.querySelector(".tab-layout");
+    }
+    if (targetTabIndex[1] && targetTabIndex[1] !== sourceTabindex[1]) {
+      dashboardStore.setActiveTabIndex(Number(targetTabIndex[1]));
+    }
+    if (container && widget) {
+      container.scrollTop = widget.y * 10;
+    }
+  }
+  return { dashboard, widgets, associationWidget };
 }

src/views/dashboard/controls/Widget.vue

@@ -168,7 +168,7 @@ export default defineComponent({
 
       for (const item of associate) {
         const widget = widgets.find(
-          (d: { id: string }) => d.id === item.widgetId
+          (d: LayoutConfig) => d.id === item.widgetId
         );
         if (widget) {
           widget.filters = {

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

@@ -121,7 +121,7 @@ limitations under the License. -->
 </template>
 <script lang="ts">
 import dayjs from "dayjs";
-import { ref, defineComponent, computed, inject } from "vue";
+import { ref, defineComponent, inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
@@ -140,21 +140,14 @@ export default defineComponent({
     LogTable,
   },
   setup() {
-    /*global Nullable, Recordable */
+    /*global Recordable */
     const options: Recordable<LayoutConfig> = inject("options") || {};
     const { t } = useI18n();
     const traceStore = useTraceStore();
     const loading = ref<boolean>(false);
     const traceId = ref<string>("");
     const displayMode = ref<string>("List");
-    const pageNum = ref<number>(1);
-    const pageSize = 10;
     const dashboardStore = useDashboardStore();
-    const total = computed(() =>
-      traceStore.traceList.length === pageSize
-        ? pageSize * pageNum.value + 1
-        : pageSize * pageNum.value
-    );
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
 
@@ -173,41 +166,17 @@ export default defineComponent({
     }
 
     async function searchTraceLogs() {
-      const { widgets } = getDashboard(dashboardStore.currentDashboard);
+      const { associationWidget } = getDashboard(
-      const widget = widgets.filter(
+        dashboardStore.currentDashboard
-        (d: { type: string }) => d.type === "Log"
+      );
-      )[0];
+      associationWidget(
-      if (!widget) {
+        (options.id as any) || "",
-        return;
+        {
-      }
-      const item = {
-        ...widget,
-        filters: {
           sourceId: options?.id || "",
           traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
         },
-      };
+        "Log"
-      dashboardStore.setWidget(item);
+      );
-      const logTabIndex = widget.id.split("-");
-      const traceTabindex = (options.id as any).split("-") || [];
-      let container: Nullable<Element>;
-
-      if (logTabIndex[1] === undefined) {
-        container = document.querySelector(".ds-main");
-      } else {
-        container = document.querySelector(".tab-layout");
-      }
-      if (logTabIndex[1] && logTabIndex[1] !== traceTabindex[1]) {
-        dashboardStore.setActiveTabIndex(Number(logTabIndex[1]));
-      }
-      if (container && widget) {
-        container.scrollTop = widget.y * 10;
-      }
-    }
-
-    function turnLogsPage(page: number) {
-      pageNum.value = page;
-      searchTraceLogs();
     }
     return {
       traceStore,
@@ -217,11 +186,7 @@ export default defineComponent({
       handleClick,
       t,
       searchTraceLogs,
-      turnLogsPage,
-      pageSize,
-      pageNum,
       loading,
-      total,
       traceId,
     };
   },

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -81,77 +81,38 @@ 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 { ref, computed } from "vue";
+import { ref, inject } 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 getDashboard from "@/hooks/useDashboardsSession";
-import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { LayoutConfig } from "@/types/dashboard";
 
-/* global defineProps */
+/*global defineProps, Recordable */
+const options: Recordable<LayoutConfig> = inject("options") || {};
 const props = defineProps({
   currentSpan: { type: Object as PropType<any>, default: () => ({}) },
 });
+const dashboardStore = useDashboardStore();
 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
-);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 async function getTaceLogs() {
-  showRelatedLogs.value = true;
+  const { associationWidget } = getDashboard(dashboardStore.currentDashboard);
-  const res = await traceStore.getSpanLogs({
+  associationWidget(
-    condition: {
+    (options.id as any) || "",
-      relatedTrace: {
+    {
+      sourceId: options?.id || "",
       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);