From 4127378f844261ae33ee0181397bf9b16d67a569 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Tue, 10 May 2022 05:19:05 +0100
Subject: [PATCH] dynamic tab type

---
 src/store/modules/dashboard.ts       |  2 +-
 src/views/dashboard/controls/Tab.vue |  8 ++++----
 src/views/dashboard/panel/Tool.vue   | 23 +++++++++++------------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 7abade17..fca35e5f 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -212,7 +212,7 @@ export const dashboardStore = defineStore({
     setCurrentTabItems(items: LayoutConfig[]) {
       this.currentTabItems = items;
     },
-    setCurrentTabName(name: string) {
+    setCurrentTabType(name: string) {
       this.currentTabName = name
     },
     removeTab(item: LayoutConfig) {
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index b69f7a35..c8ca8963 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
         v-for="(child, idx) in data.children || []"
         :key="idx"
         :class="{ active: activeTabIndex === idx }"
-        @click="clickTabs($event, idx, child.name, child)"
+        @click="clickTabs($event, idx, child)"
       >
         <input
           @click="editTabName($event, idx)"
@@ -266,9 +266,9 @@ export default defineComponent({
       }
     );
 
-    function clickTabs(e: Event, idx: number, currentTabName:string, extra:any) {      
+    function clickTabs(e: Event, idx: number, extra:any) {      
       e.stopPropagation();
-      console.log(currentTabName, extra)
+      console.log(extra.children[0].type)
       activeTabIndex.value = idx;
       dashboardStore.activeGridItem(props.data.i);
       dashboardStore.selectWidget(props.data);
@@ -279,7 +279,7 @@ export default defineComponent({
       dashboardStore.setCurrentTabItems(
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
-      dashboardStore.setCurrentTabName(currentTabName)
+      dashboardStore.setCurrentTabType(extra.children[0].type)
       needQuery.value = true;
     }
     function removeTab(e: Event) {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 2479a361..1f79593a 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="dashboard-tool flex-h">  
+  <div class="dashboard-tool flex-h">
     <div class="flex-h">
       <div class="flex-h">
         <div
@@ -56,7 +56,10 @@ limitations under the License. -->
             <Icon iconSize="sm" iconName="cancel" />
           </el-button>
         </div>
-        <div class="selectors-item" v-if="(key === 3 || key === 4 ) && currentTraceView === 'traceList' " >        
+        <div
+          class="selectors-item"
+          v-if="(key === 3 || key === 4) && currentTraceView === 'traceList'"
+        >
           <el-tooltip
             v-if="!selectedSelector.length || selectedSelector === '$endpoint'"
             class="box-item"
@@ -191,9 +194,9 @@ import { useRoute, useRouter } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useTraceStore } from "@/store/modules/trace";
-onMounted(() =>{
-  console.log(dashboardStore.layout,dashboardStore.currentDashboard)
-})
+onMounted(() => {
+  console.log(dashboardStore.layout, dashboardStore.currentDashboard);
+});
 import {
   EntityType,
   AllTools,
@@ -217,13 +220,9 @@ const appStore = useAppStoreWithOut();
 const traceStore = useTraceStore();
 const params = useRoute().params;
 const selectedSelector = ref<string>("");
-const showFilter = computed(
-  () => dashboardStore.layout[0]?.activedTabIndex === 2
-);
-const showLogHeader = computed(
-  () => dashboardStore.layout[0]?.activedTabIndex === 3
-);
-const currentTraceView = computed(() => traceStore.currentView)
+const showFilter = computed(() => dashboardStore.currentTabName === "Trace");
+const showLogHeader = computed(() => dashboardStore.currentTabName === "Log");
+const currentTraceView = computed(() => traceStore.currentView);
 const { query } = useRoute();
 dashboardStore.setViewMode(query["fullview"] === "true");