can toggle between traceList and details from store

src/views/dashboard/controls/Trace.vue

@@ -39,12 +39,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType, ref } from "vue";
+import type { PropType, ref, computed } 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: {
@@ -55,7 +55,11 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const traceListActive = ref<boolean>(true);
+const traceStore = useTraceStore();
+// const traceListActive = ref<boolean>(true);
+const traceListActive = computed(() => {
+  return traceStore.currentView === "traceList";
+});
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }

src/views/dashboard/panel/Tool.vue

@@ -170,8 +170,10 @@ limitations under the License. -->
       </div>
     </div>
     <!-- Trace Details tools here -->
-    <TraceDetailsTools />
-    <Filter v-if="showFilter" />
+    <TraceDetailsTools
+      v-if="showFilter && currentTraceView === 'traceDetails'"
+    />
+    <Filter v-if="showFilter && currentTraceView === 'traceList'" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -180,6 +182,7 @@ import { reactive, ref, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useTraceStore } from "@/store/modules/trace";
 import {
   EntityType,
   AllTools,
@@ -194,18 +197,19 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
 import { useI18n } from "vue-i18n";
-import TraceDetailsTools from './component/TraceDetailsTools'
+import TraceDetailsTools from "./component/TraceDetailsTools";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
+const traceStore = useTraceStore();
 const params = useRoute().params;
 const selectedSelector = ref<string>("");
 const showFilter = computed(
   () => dashboardStore.layout[0]?.activedTabIndex === 2
 );
-
+const currentTraceView = computed(() => traceStore.currentView)
 const { query } = useRoute();
 dashboardStore.setViewMode(query["fullview"] === "true");
 

src/views/dashboard/panel/component/TraceDetailsTools.vue

@@ -157,7 +157,7 @@ export default defineComponent({
     const showTraceLogs = ref<boolean>(false);
 
     function showTraceList() {
-      ctx.emit("show:list");
+      traceStore.setCurrentView("traceList");
     }
     function handleClick(ids: string[] | any) {
       let copyValue = null;

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

@@ -71,7 +71,7 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref, defineEmits } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { ElMessage } from "element-plus";
@@ -88,8 +88,6 @@ const pageCount = ref<number>(5);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
-const emit = defineEmits(["show:trace"]);
-
 function searchTrace() {
   loading.value = true;
   queryTraces();
@@ -112,7 +110,7 @@ function changeSort(opt: Option[] | any) {
 }
 
 async function selectTrace(i: Trace) {
-  emit("show:trace");
+  traceStore.setCurrentView("traceDetails");
   traceStore.setCurrentTrace(i);
   selectedKey.value = i.key;
   if (i.traceIds.length) {
@@ -166,7 +164,7 @@ async function queryTraces() {
 }
 
 .trace-t {
-  width: 100%;  
+  width: 100%;
 }
 
 .list {