update trace

src/hooks/useDashboardsSession.ts

@@ -34,6 +34,7 @@ export default function getDashboard(param?: {
   const widgets: LayoutConfig[] = [];
   for (const item of all) {
     if (item.type === "Tab") {
+      widgets.push(item);
       if (item.children && item.children.length) {
         for (const child of item.children) {
           if (child.children && child.children.length) {
@@ -46,7 +47,7 @@ export default function getDashboard(param?: {
     }
   }
   function associationWidget(sourceId: string, filters: unknown, type: string) {
-    const widget = widgets.filter((d: { type: string }) => d.type === type)[0];
+    const widget = widgets.find((d: { type: string }) => d.type === type);
     if (!widget) {
       return ElMessage.info(`There has no a ${type} widget in the dashboard`);
     }
@@ -62,13 +63,18 @@ export default function getDashboard(param?: {
     if (targetTabIndex[1] === undefined) {
       container = document.querySelector(".ds-main");
     } else {
+      const w = widgets.find((d: any) => d.id === targetTabIndex[0]);
       container = document.querySelector(".tab-layout");
+      const layout: Nullable<Element> = document.querySelector(".ds-main");
+      if (w && layout) {
+        layout.scrollTop = w.y * 10 + w.h * 5;
+      }
     }
     if (targetTabIndex[1] && targetTabIndex[1] !== sourceTabindex[1]) {
       dashboardStore.setActiveTabIndex(Number(targetTabIndex[1]));
     }
     if (container && widget) {
-      container.scrollTop = widget.y * 10 + 10;
+      container.scrollTop = widget.y * 10 + widget.h * 5;
     }
   }
   return { dashboard, widgets, associationWidget };

src/store/modules/trace.ts

@@ -63,6 +63,14 @@ export const traceStore = defineStore({
     setTraceSpans(spans: Span) {
       this.traceSpans = spans;
     },
+    resetCondition() {
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 20 },
+        traceState: "ALL",
+        queryOrder: "BY_START_TIME",
+      };
+    },
     async getServices(layer: string) {
       const res: AxiosResponse = await graphql.query("queryServices").params({
         layer,

src/views/dashboard/controls/Log.vue

@@ -76,6 +76,7 @@ function removeWidget() {
   position: absolute;
   top: 5px;
   right: 3px;
+  z-index: 1000;
 }
 
 .header {

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

@@ -92,7 +92,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onUnmounted } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
@@ -230,6 +230,15 @@ async function searchEndpoints(keyword: string) {
     ElMessage.error(resp.errors);
   }
 }
+onUnmounted(() => {
+  traceStore.resetCondition();
+  const item = {
+    ...props.data,
+    filters: undefined,
+  };
+  dashboardStore.setWidget(item);
+  traceId.value = "";
+});
 watch(
   () => [selectorStore.currentPod],
   () => {