From b1fd8923ca14fdd3d431cce09f9b528685378f42 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Tue, 3 May 2022 12:12:05 +0100
Subject: [PATCH] toggle trace filters

---
 src/views/dashboard/controls/Tab.vue         |   3 +-
 src/views/dashboard/panel/Tool.vue           | 262 +++++++++----------
 src/views/dashboard/related/trace/Filter.vue |   8 +
 3 files changed, 131 insertions(+), 142 deletions(-)

diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 4b625e7b..b91d60b0 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -266,7 +266,7 @@ export default defineComponent({
       }
     );
 
-    function clickTabs(e: Event, idx: number) {
+    function clickTabs(e: Event, idx: number) {      
       e.stopPropagation();
       activeTabIndex.value = idx;
       dashboardStore.activeGridItem(props.data.i);
@@ -279,6 +279,7 @@ export default defineComponent({
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
       needQuery.value = true;
+      console.log(dashboardStore.layout[0])
     }
     function removeTab(e: Event) {
       e.stopPropagation();
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 261208e5..1739afc6 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -13,112 +13,116 @@ 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="flex-h">    
-      <div class="selectors-item" v-if="key !== 10">
-        <span class="label">$Service</span>
-        <Selector
-          v-model="states.currentService"
-          :options="selectorStore.services"
-          size="small"
-          placeholder="Select a service"
-          @change="changeService"
-          class="selectors"
-        />
+  <div class="dashboard-tool">
+    <div class="dashboard-tool flex-h">
+      <div class="flex-h">
+        <div class="selectors-item" v-if="key !== 10">
+          <span class="label">$Service</span>
+          <Selector
+            v-model="states.currentService"
+            :options="selectorStore.services"
+            size="small"
+            placeholder="Select a service"
+            @change="changeService"
+            class="selectors"
+          />
+        </div>
+        <div class="selectors-item" v-if="key === 3 || key === 4">
+          <span class="label">
+            {{
+              ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
+                ? "$Endpoint"
+                : "$ServiceInstance"
+            }}
+          </span>
+          <Selector
+            v-model="states.currentPod"
+            :options="selectorStore.pods"
+            size="small"
+            placeholder="Select a data"
+            @change="changePods"
+            @query="searchPods"
+            class="selectorPod"
+            :isRemote="['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)"
+          />
+        </div>
+        <div class="selectors-item" v-if="key === 2 || key === 4">
+          <span class="label">$DestinationService</span>
+          <Selector
+            v-model="states.currentDestService"
+            :options="selectorStore.destServices"
+            size="small"
+            placeholder="Select a service"
+            @change="changeDestService"
+            class="selectors"
+          />
+        </div>
+        <div class="selectors-item" v-if="key === 4">
+          <span class="label">
+            {{
+              dashboardStore.entity === "EndpointRelation"
+                ? "$DestinationEndpoint"
+                : "$DestinationServiceInstance"
+            }}
+          </span>
+          <Selector
+            v-model="states.currentDestPod"
+            :options="selectorStore.destPods"
+            size="small"
+            placeholder="Select a data"
+            @change="changeDestPods"
+            class="selectorPod"
+            @query="searchDestPods"
+            :isRemote="dashboardStore.entity === 'EndpointRelation'"
+          />
+        </div>
       </div>
-      <div class="selectors-item" v-if="key === 3 || key === 4">
-        <span class="label">
-          {{
-            ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
-              ? "$Endpoint"
-              : "$ServiceInstance"
-          }}
-        </span>
-        <Selector
-          v-model="states.currentPod"
-          :options="selectorStore.pods"
-          size="small"
-          placeholder="Select a data"
-          @change="changePods"
-          @query="searchPods"
-          class="selectorPod"
-          :isRemote="
-            ['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)
-          "
-        />
-      </div>
-      <div class="selectors-item" v-if="key === 2 || key === 4">
-        <span class="label">$DestinationService</span>
-        <Selector
-          v-model="states.currentDestService"
-          :options="selectorStore.destServices"
-          size="small"
-          placeholder="Select a service"
-          @change="changeDestService"
-          class="selectors"
-        />
-      </div>
-      <div class="selectors-item" v-if="key === 4">
-        <span class="label">
-          {{
-            dashboardStore.entity === "EndpointRelation"
-              ? "$DestinationEndpoint"
-              : "$DestinationServiceInstance"
-          }}
-        </span>
-        <Selector
-          v-model="states.currentDestPod"
-          :options="selectorStore.destPods"
-          size="small"
-          placeholder="Select a data"
-          @change="changeDestPods"
-          class="selectorPod"
-          @query="searchDestPods"
-          :isRemote="dashboardStore.entity === 'EndpointRelation'"
-        />
-      </div>
-    </div>
-    <div class="flex-h tools" v-loading="loading" v-if="$route.query['portal'] !== 'true'">
-      <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
-        <el-dropdown content="Controls" placement="bottom">
-          <i>
-            <Icon class="icon-btn" size="sm" iconName="control" />
-          </i>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                @click="clickIcons(t)"
-                v-for="(t, index) in toolIcons"
-                :key="index"
-                :title="t.content"
-              >
-                <Icon class="mr-5" size="middle" :iconName="t.name" />
-                <span>{{ t.content }}</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <el-tooltip content="Apply" placement="bottom" effect="light">
-          <i @click="applyDashboard">
-            <Icon class="icon-btn" size="sm" iconName="save" />
-          </i>
-        </el-tooltip>
-      </div>
-      <div class="switch">
-        <el-switch
-          v-model="dashboardStore.editMode"
-          active-text="Edit"
-          inactive-text="View"
-          size="small"
-          inline-prompt
-          active-color="#409eff"
-          inactive-color="#999"
-          @change="changeMode"
-        />
+      <div
+        class="flex-h tools"
+        v-loading="loading"
+        v-if="$route.query['portal'] !== 'true'"
+      >
+        <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
+          <el-dropdown content="Controls" placement="bottom">
+            <i>
+              <Icon class="icon-btn" size="sm" iconName="control" />
+            </i>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  @click="clickIcons(t)"
+                  v-for="(t, index) in toolIcons"
+                  :key="index"
+                  :title="t.content"
+                >
+                  <Icon class="mr-5" size="middle" :iconName="t.name" />
+                  <span>{{ t.content }}</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-tooltip content="Apply" placement="bottom" effect="light">
+            <i @click="applyDashboard">
+              <Icon class="icon-btn" size="sm" iconName="save" />
+            </i>
+          </el-tooltip>
+        </div>
+        <div class="switch">
+          <el-switch
+            v-model="dashboardStore.editMode"
+            active-text="Edit"
+            inactive-text="View"
+            size="small"
+            inline-prompt
+            active-color="#409eff"
+            inactive-color="#999"
+            @change="changeMode"
+          />
+        </div>
       </div>
     </div>
+    <Filter v-if="showFilter" />
   </div>
-  <Filter />
 </template>
 <script lang="ts" setup>
 import Filter from "../related/trace/Filter.vue";
@@ -146,6 +150,10 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
 const params = useRoute().params;
+const showFilter = computed(
+  () => dashboardStore.layout[0].activedTabIndex === 2
+);
+
 
 const { query } = useRoute();
 dashboardStore.setViewMode(query["fullview"] === "true");
@@ -172,9 +180,7 @@ const states = reactive<{
   currentDestPod: "",
 });
 const key = computed(() => {
-  const type = EntityType.find(
-    (d: Option) => d.value === dashboardStore.entity
-  );
+  const type = EntityType.find((d: Option) => d.value === dashboardStore.entity);
   return (type && type.key) || 0;
 });
 
@@ -208,9 +214,7 @@ async function setSelector() {
     ].includes(String(params.entity))
   ) {
     setSourceSelector();
-    if (
-      [EntityType[2].value, EntityType[3].value].includes(String(params.entity))
-    ) {
+    if ([EntityType[2].value, EntityType[3].value].includes(String(params.entity))) {
       return;
     }
     setDestSelector();
@@ -278,11 +282,7 @@ async function setSourceSelector() {
 async function setDestSelector() {
   await selectorStore.getService(String(params.destServiceId), true);
   states.currentDestService = selectorStore.currentDestService.value;
-  await fetchPods(
-    String(params.entity),
-    selectorStore.currentDestService.id,
-    false
-  );
+  await fetchPods(String(params.entity), selectorStore.currentDestService.id, false);
   if (!(selectorStore.destPods.length && selectorStore.destPods[0])) {
     selectorStore.setCurrentDestPod(null);
     states.currentDestPod = "";
@@ -295,9 +295,7 @@ async function setDestSelector() {
       (d: { label: string }) => d.label === states.currentDestPod
     );
   } else {
-    currentDestPod = selectorStore.destPods.find(
-      (d: { id: string }) => d.id === destPod
-    );
+    currentDestPod = selectorStore.destPods.find((d: { id: string }) => d.id === destPod);
   }
   if (currentDestPod) {
     selectorStore.setCurrentDestPod(currentDestPod);
@@ -326,9 +324,7 @@ async function getServices() {
       (d: { label: string }) => d.label === states.currentService
     );
   } else {
-    s = (selectorStore.services || []).find(
-      (d: unknown, index: number) => index === 0
-    );
+    s = (selectorStore.services || []).find((d: unknown, index: number) => index === 0);
   }
   selectorStore.setCurrentService(s || null);
   let d;
@@ -337,9 +333,7 @@ async function getServices() {
       (d: { label: string }) => d.label === states.currentDestService
     );
   } else {
-    d = (selectorStore.services || []).find(
-      (d: unknown, index: number) => index === 1
-    );
+    d = (selectorStore.services || []).find((d: unknown, index: number) => index === 1);
   }
   selectorStore.setCurrentDestService(d || null);
   if (!selectorStore.currentService) {
@@ -347,18 +341,14 @@ async function getServices() {
   }
   states.currentService = selectorStore.currentService.value;
   const e = dashboardStore.entity.split("Relation")[0];
-  if (
-    [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
-  ) {
+  if ([EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)) {
     fetchPods(e, selectorStore.currentService.id, true);
   }
   if (!selectorStore.currentDestService) {
     return;
   }
   states.currentDestService = selectorStore.currentDestService.value;
-  if (
-    [EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)
-  ) {
+  if ([EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)) {
     fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
   }
 }
@@ -413,10 +403,7 @@ async function applyDashboard() {
 }
 
 async function clickIcons(t: { id: string; content: string; name: string }) {
-  if (
-    dashboardStore.selectedGrid &&
-    dashboardStore.selectedGrid.type === "Tab"
-  ) {
+  if (dashboardStore.selectedGrid && dashboardStore.selectedGrid.type === "Tab") {
     setTabControls(t.id);
     return;
   }
@@ -504,9 +491,7 @@ async function fetchPods(
             (d: { label: unknown }) => d.label === states.currentPod
           );
         } else {
-          p = selectorStore.pods.find(
-            (d: unknown, index: number) => index === 0
-          );
+          p = selectorStore.pods.find((d: unknown, index: number) => index === 0);
         }
         selectorStore.setCurrentPod(p || null);
         states.currentPod = selectorStore.currentPod.label;
@@ -614,12 +599,7 @@ function searchDestPods(query: string) {
   const param = {
     keyword: query,
   };
-  fetchPods(
-    EntityType[6].value,
-    selectorStore.currentDestService.id,
-    false,
-    param
-  );
+  fetchPods(EntityType[6].value, selectorStore.currentDestService.id, false, param);
 }
 watch(
   () => dashboardStore.entity,
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index d527569c..072db7ab 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
+    <div class="flex-h">
+      <el-button type="secondary"> Instance </el-button>
+      <el-button type="secondary"> Status </el-button>
+      <el-button type="secondary"> 
+        <!-- <Icon size="sm" iconName="duration" /> -->
+        Duration
+       </el-button>
+    </div>
     <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
       <span class="grey mr-5">{{ t("service") }}:</span>
       <Selector