From 046448bc48791613f7a0b9724fbb0a1b93bffb46 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Fri, 6 May 2022 05:11:08 +0100
Subject: [PATCH] can toggle between traceList and details from store

---
 src/views/dashboard/controls/Trace.vue               | 10 +++++++---
 src/views/dashboard/panel/Tool.vue                   | 12 ++++++++----
 .../dashboard/panel/component/TraceDetailsTools.vue  |  2 +-
 src/views/dashboard/related/trace/TraceList.vue      |  8 +++-----
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index bf8c976d..00135c15 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/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);
 }
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index d97fdfb9..33aac71b 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/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");
 
diff --git a/src/views/dashboard/panel/component/TraceDetailsTools.vue b/src/views/dashboard/panel/component/TraceDetailsTools.vue
index bdf58e49..789f5c9e 100644
--- a/src/views/dashboard/panel/component/TraceDetailsTools.vue
+++ b/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;
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index c0a24f13..84476bea 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/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 {