show only active tools

src/views/dashboard/related/log/Header.vue

@@ -26,6 +26,7 @@ limitations under the License. -->
             type="success"
             :class="[activeTerms.includes(item.name) ? 'active-toggle' : '']"
             class="toggle-btn mx-3"
+            v-show="item.isVisible"
             @click="setSearchTerm(item.name)"
           >
             <Icon iconSize="sm" :iconName="item.iconName" />
@@ -34,9 +35,10 @@ limitations under the License. -->
       </div>
     </div>
     <div class="flex-h items-center row">
+      <div class="flex-h items-center" v-if="currentSearchTerm === 'service'">
         <div
           class="mr-5 flex-h items-center"
-        v-if="dashboardStore.entity === EntityType[1].value && currentSearchTerm === 'service' "
+          v-if="dashboardStore.entity === EntityType[1].value"
         >
           <span class="grey mr-5">{{ t("service") }}:</span>
           <Selector
@@ -47,9 +49,16 @@ limitations under the License. -->
             @change="changeField('service', $event)"
           />
         </div>
+        <b v-else>{{ t("service") }} data not available</b>
+      </div>
+
+      <div class="flex-h items-center" v-if="currentSearchTerm === 'instance'">
         <div
           class="mr-5 flex-h"
-        v-if="dashboardStore.entity !== EntityType[3].value && currentSearchTerm === 'instance'"
+          v-if="
+            dashboardStore.entity !== EntityType[3].value &&
+            currentSearchTerm === 'instance'
+          "
         >
           <span class="grey mr-5">
             {{ isBrowser ? t("version") : t("instance") }}:
@@ -62,9 +71,16 @@ limitations under the License. -->
             @change="changeField('instance', $event)"
           />
         </div>
+        <b v-else>{{ t("instance") }} data not available</b>
+      </div>
+
+      <div class="flex-h items-center" v-if="currentSearchTerm === 'endpoints'">
         <div
           class="mr-5 flex-h items-center"
-        v-if="dashboardStore.entity !== EntityType[2].value  && currentSearchTerm === 'endpoint'"
+          v-if="
+            dashboardStore.entity !== EntityType[2].value &&
+            currentSearchTerm === 'endpoint'
+          "
         >
           <span class="grey mr-5"
             >{{ isBrowser ? t("page") : t("endpoint") }}:</span
@@ -79,6 +95,8 @@ limitations under the License. -->
             @query="searchEndpoints"
           />
         </div>
+        <b v-else>{{ t("endpoint") }} data not available</b>
+      </div>
     </div>
     <!-- <div class="row tips">
       <b>{{ t("conditionNotice") }}</b>
@@ -216,42 +234,50 @@ interface filtersObject {
   name: string;
   iconName: string;
   description: string;
+  isVisible?: boolean;
 }
 const arrayOfFilters = ref<filtersObject[]>([
   {
     name: "traceId",
     iconName: "timeline",
     description: "Trace ID",
+    isVisible: true,
   },
   {
     name: "tags",
     iconName: "epic",
     description: "Tags",
+    isVisible: true,
   },
   {
     name: "keywords",
     iconName: "library_books",
     description: "Keywords",
+    isVisible: logStore.supportQueryLogsByKeywords,
   },
   {
     name: "exclude",
     iconName: "issue-child",
     description: "Exclude keywords",
+    isVisible: logStore.supportQueryLogsByKeywords,
   },
   {
     name: "instance",
     iconName: "epic",
     description: "Instance",
+    isVisible: dashboardStore.entity !== EntityType[3].value,
   },
   {
     name: "service",
     iconName: "settings",
     description: "Service",
+    isVisible: dashboardStore.entity === EntityType[1].value,
   },
   {
     name: "endpoints",
     iconName: "timeline",
     description: "Endpoints",
+    isVisible: dashboardStore.entity !== EntityType[2].value,
   },
 ]);
 init();
@@ -318,11 +344,13 @@ function addToActiveTerms(){
   activeTerms.value.push(currentSearchTerm.value);
 }
 function removeFromActiveTerms() {
-  activeTerms.value = activeTerms.value.filter(term => term !== currentSearchTerm.value );  
+  activeTerms.value = activeTerms.value.filter(
+    (term) => term !== currentSearchTerm.value
+  );
 }
 function searchLogs() {
-  addToActiveTerms()
+  addToActiveTerms();
-  currentSearchTerm.value = ""
+  currentSearchTerm.value = "";
   let endpoint = "",
     instance = "";
   if (dashboardStore.entity === EntityType[2].value) {
@@ -409,7 +437,7 @@ function setSearchTerm(term: string) {
   currentSearchTerm.value = term;
 }
 function cancelSearchTerm() {
-  removeFromActiveTerms()
+  removeFromActiveTerms();
   currentSearchTerm.value = "";
 }
 watch(