Added other log tools

src/store/modules/dashboard.ts

@@ -39,7 +39,6 @@ interface DashboardState {
   selectorStore: any;
   fullView: boolean;
   currentTabItems: LayoutConfig[];
-  currentTabName: string; // TODO: remove before commit
   showTraceTools: boolean;
   showLogTools: boolean;
   dashboards: DashboardItem[];
@@ -62,7 +61,6 @@ export const dashboardStore = defineStore({
     showTraceTools: false,
     fullView: false,
     currentTabItems: [],
-    currentTabName: '',
     dashboards: [],
     currentDashboard: null,
     editMode: false,
@@ -214,9 +212,6 @@ export const dashboardStore = defineStore({
     setCurrentTabItems(items: LayoutConfig[]) {
       this.currentTabItems = items;
     },
-    setCurrentTabType(name: string) {
-      this.currentTabName = name
-    },
     removeTab(item: LayoutConfig) {
       if (this.selectedGrid && this.selectedGrid.i === item.i) {
         this.selectedGrid = null;

src/views/dashboard/controls/Log.vue

@@ -29,19 +29,17 @@ limitations under the License. -->
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
-    <div class="header">
-      <!-- <Header /> -->
-    </div>
+    <!-- <div class="header">
+    </div> -->
     <div class="log">
       <List />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import type { onBeforeUnmount, onMounted} from 'vue'
+import type { onBeforeUnmount, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
-// import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
 
 /*global defineProps */
@@ -59,11 +57,11 @@ function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
 onMounted(() => {
-  dashboardStore.setLogTools(true)
+  dashboardStore.setLogTools(true);
 });
 onBeforeUnmount(() => {
-  dashboardStore.setLogTools(false)
-})
+  dashboardStore.setLogTools(false);
+});
 </script>
 <style lang="scss" scoped>
 .log-wrapper {

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)"
+        @click="clickTabs($event, idx)"
       >
         <input
           @click="editTabName($event, idx)"
@@ -161,10 +161,6 @@ import Text from "./Text.vue";
 import Ebpf from "./Ebpf.vue";
 import { dragIgnoreFrom } from "../data";
 
-interface TabChild {
-  name: string;
-  children: LayoutConfig[];
-}
 const props = {
   data: {
     type: Object as PropType<LayoutConfig>,
@@ -261,7 +257,7 @@ export default defineComponent({
       }
     );
 
-    function clickTabs(e: Event, idx: number, extra: TabChild) {
+    function clickTabs(e: Event, idx: number) {
       e.stopPropagation();
       activeTabIndex.value = idx;
       dashboardStore.activeGridItem(props.data.i);
@@ -273,7 +269,6 @@ export default defineComponent({
       dashboardStore.setCurrentTabItems(
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
-      dashboardStore.setCurrentTabType(extra.children[0].type);
       needQuery.value = true;
     }
     function removeTab(e: Event) {

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

@@ -33,10 +33,10 @@ limitations under the License. -->
         </el-tooltip> 
       </div>
     </div>
-    <div class="flex-h row">
-      <!-- <div
-        class="mr-5 flex-h"
-        v-if="dashboardStore.entity === EntityType[1].value"
+    <div class="flex-h items-center row">
+      <div
+        class="mr-5 flex-h items-center"
+        v-if="dashboardStore.entity === EntityType[1].value && currentSearchTerm === 'service' "
       >
         <span class="grey mr-5">{{ t("service") }}:</span>
         <Selector
@@ -46,10 +46,10 @@ limitations under the License. -->
           placeholder="Select a service"
           @change="changeField('service', $event)"
         />
-      </div> -->
-      <!-- <div
+      </div>      
+      <div
         class="mr-5 flex-h"
-        v-if="dashboardStore.entity !== EntityType[3].value"
+        v-if="dashboardStore.entity !== EntityType[3].value && currentSearchTerm === 'instance'"
       >
         <span class="grey mr-5">
           {{ isBrowser ? t("version") : t("instance") }}:
@@ -61,10 +61,10 @@ limitations under the License. -->
           placeholder="Select a instance"
           @change="changeField('instance', $event)"
         />
-      </div> -->
-      <!-- <div
-        class="mr-5 flex-h"
-        v-if="dashboardStore.entity !== EntityType[2].value"
+      </div>
+      <div
+        class="mr-5 flex-h items-center"
+        v-if="dashboardStore.entity !== EntityType[2].value  && currentSearchTerm === 'endpoint'"
       >
         <span class="grey mr-5"
           >{{ isBrowser ? t("page") : t("endpoint") }}:</span
@@ -78,7 +78,7 @@ limitations under the License. -->
           :isRemote="true"
           @query="searchEndpoints"
         />
-      </div> -->
+      </div>
     </div>
     <!-- <div class="row tips">
       <b>{{ t("conditionNotice") }}</b>
@@ -238,16 +238,21 @@ const arrayOfFilters = ref<filtersObject[]>([
     iconName: "issue-child",
     description: "Exclude keywords",
   },
-  // {
-  //   name: "traceId",
-  //   iconName: "timeline",
-  //   description: "Trace ID",
-  // },
-  // {
-  //   name: "tags",
-  //   iconName: "epic",
-  //   description: "Tags",
-  // },
+  {
+    name: "instance",
+    iconName: "epic",
+    description: "Instance",
+  },
+  {
+    name: "service",
+    iconName: "settings",
+    description: "Service",
+  },
+  {
+    name: "endpoints",
+    iconName: "timeline",
+    description: "Endpoints",
+  },
 ]);
 init();
 async function init() {