trace tool toggled from component

src/store/modules/dashboard.ts

@@ -37,10 +37,11 @@ interface DashboardState {
   activedGridItem: string;
   durationTime: Duration;
   selectorStore: any;
-  showTopology: boolean;
   fullView: boolean;
   currentTabItems: LayoutConfig[];
-  currentTabName: string;
+  currentTabName: string; // TODO: remove before commit
+  showTraceTools: boolean;
+  showTopologyTools: boolean;
   dashboards: DashboardItem[];
   currentDashboard: Nullable<DashboardItem>;
   editMode: boolean;
@@ -57,7 +58,8 @@ export const dashboardStore = defineStore({
     activedGridItem: "",
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
-    showTopology: false,
+    showTopologyTools: false,
+    showTraceTools: false,
     fullView: false,
     currentTabItems: [],
     currentTabName: '',
@@ -265,8 +267,11 @@ export const dashboardStore = defineStore({
     setEntity(type: string) {
       this.entity = type;
     },
-    setTopology(show: boolean) {
-      this.showTopology = show;
+    setTraceTools(show: boolean) {
+      this.showTraceTools = show;
+    },
+    setTopologyTools(show: boolean) {
+      this.showTopologyTools = show;
     },
     setConfigs(param: { [key: string]: unknown }) {
       const actived = this.activedGridItem.split("-");

src/views/dashboard/controls/Topology.vue

@@ -38,11 +38,13 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from "vue";
+import type { PropType, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Topology from "../related/topology/Index.vue";
-
+onMounted(() => {
+  console.log("TOPOLOGY COMPONENT!!!");
+});
 /*global defineProps */
 const props = defineProps({
   data: {

src/views/dashboard/controls/Trace.vue

@@ -39,12 +39,13 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType, ref, computed } from "vue";
+import type { PropType, computed, onMounted, onBeforeUnmount } from "vue";
 import TraceList from "../related/trace/TraceList.vue";
 import TraceDetail from "../related/trace/Detail.vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useTraceStore } from "@/store/modules/trace";
+
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -65,6 +66,13 @@ function removeWidget() {
 function showTraceDetails() {
   traceListActive.value = false;
 }
+
+onMounted(() => {
+  dashboardStore.setTraceTools(true)
+});
+onBeforeUnmount(() => {
+  dashboardStore.setTraceTools(false)
+})
 </script>
 <style lang="scss" scoped>
 .trace-wrapper {

src/views/dashboard/panel/Tool.vue

@@ -186,7 +186,7 @@ limitations under the License. -->
 import Filter from "../related/trace/Filter.vue";
 import Header from "../related/log/Header.vue";
 
-import { reactive, ref, computed, watch } from "vue";
+import { reactive, ref, computed, watch, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -213,12 +213,18 @@ const appStore = useAppStoreWithOut();
 const traceStore = useTraceStore();
 const params = useRoute().params;
 const selectedSelector = ref<string>("");
-const showFilter = computed(() => dashboardStore.currentTabName === "Trace");
+const showFilter = computed(() =>dashboardStore.showTraceTools);
 const showLogHeader = computed(() => dashboardStore.currentTabName === "Log");
 const currentTraceView = computed(() => traceStore.currentView);
 const { query } = useRoute();
 dashboardStore.setViewMode(query["fullview"] === "true");
-
+onMounted(() => {
+  setTimeout(() => {
+    console.log(
+      showFilter.value
+    );
+  }, 1000)
+})
 const toolIcons = ref<{ name: string; content: string; id: string }[]>(
   EndpointRelationTools
 );