feat: the log widget and the trace widget associate with each other, remove log tables on the trace widget (#128)

src/views/dashboard/controls/Log.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Header :needQuery="needQuery" />
+      <Header :needQuery="needQuery" :data="data" />
     </div>
     <div class="log">
       <List />
@@ -38,20 +38,24 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { provide } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
+import { LayoutConfig } from "@/types/dashboard";
+import type { PropType } from "vue";
 
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object,
-    default: () => ({}),
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ graph: {} }),
   },
   activeIndex: { type: String, default: "" },
   needQuery: { type: Boolean, default: true },
 });
+provide("options", props.data);
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 
@@ -72,6 +76,7 @@ function removeWidget() {
   position: absolute;
   top: 5px;
   right: 3px;
+  z-index: 1000;
 }
 
 .header {

src/views/dashboard/controls/Tab.vue

@@ -259,6 +259,26 @@ export default defineComponent({
         }
       }
     );
+    watch(
+      () => dashboardStore.currentTabIndex,
+      () => {
+        activeTabIndex.value = dashboardStore.currentTabIndex;
+        dashboardStore.activeGridItem(props.data.i);
+        dashboardStore.selectWidget(props.data);
+        const l = dashboardStore.layout.findIndex(
+          (d: LayoutConfig) => d.i === props.data.i
+        );
+        dashboardStore.setCurrentTabItems(
+          dashboardStore.layout[l].children[activeTabIndex.value].children
+        );
+        needQuery.value = true;
+        if (route.params.activeTabIndex) {
+          let p = location.href.split("/tab/")[0];
+          p = p + "/tab/" + activeTabIndex.value;
+          history.replaceState({}, "", p);
+        }
+      }
+    );
     return {
       handleClick,
       layoutUpdatedEvent,

src/views/dashboard/controls/Trace.vue

@@ -30,7 +30,7 @@ limitations under the License. -->
       </div>
     </el-popover>
     <div class="header">
-      <Filter :needQuery="needQuery" />
+      <Filter :needQuery="needQuery" :data="data" />
     </div>
     <div class="trace flex-h">
       <TraceList />
@@ -39,6 +39,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { provide } from "vue";
 import type { PropType } from "vue";
 import Filter from "../related/trace/Filter.vue";
 import TraceList from "../related/trace/TraceList.vue";
@@ -55,6 +56,7 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
   needQuery: { type: Boolean, default: true },
 });
+provide("options", props.data);
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 function removeWidget() {

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 = {