slim fit filters to tool bar

src/views/dashboard/panel/Tool.vue

@@ -14,7 +14,7 @@ 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 class="selectors-item" v-if="key !== 10">
           <el-tooltip
@@ -24,9 +24,11 @@ limitations under the License. -->
             placement="top-start"
           >
             <el-button
-              style="margin-left: 4px"
+              v-if="!selectedSelector.length || selectedSelector === '$service'"
               @click="setSelectedSelector('$service')"
+              class="tool-btn"
               type="secondary"
+              size="xs"
             >
               <Icon size="sm" iconName="playlist_add" />
             </el-button>
@@ -45,7 +47,7 @@ limitations under the License. -->
           <el-button
             style="margin-left: 4px"
             v-if="selectedSelector === '$service'"
-            class="search-btn"
+            class="search-btn tool-btn"
             size="small"
             type="danger"
             @click="closeSelector"
@@ -55,6 +57,7 @@ limitations under the License. -->
         </div>
         <div class="selectors-item" v-if="key === 3 || key === 4">
           <el-tooltip
+          v-if="!selectedSelector.length || selectedSelector === '$endpoint'"
             class="box-item"
             effect="dark"
             content="Endpoint"
@@ -63,6 +66,7 @@ limitations under the License. -->
             <el-button
               style="margin-left: 4px"
               @click="setSelectedSelector('$endpoint')"
+              class="tool-btn"
               type="secondary"
             >
               <Icon size="sm" iconName="view" />
@@ -88,7 +92,7 @@ limitations under the License. -->
               ['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)
             "
           />
-          <!-- <el-button
+          <el-button
             style="margin-left: 4px"
             v-if="selectedSelector === '$endpoint'"
             class="search-btn"
@@ -97,7 +101,7 @@ limitations under the License. -->
             @click="closeSelector"
           >
             <Icon iconSize="sm" iconName="cancel" />
-          </el-button> -->
+          </el-button>
         </div>
         <div class="selectors-item" v-if="key === 2 || key === 4">
           <span class="label">$DestinationService</span>
@@ -431,6 +435,7 @@ async function getServices() {
 }
 
 async function changeService(service: any) {
+    selectedSelector.value = ""
   if (service[0]) {
     states.currentService = service[0].value;
     selectorStore.setCurrentService(service[0]);
@@ -450,6 +455,7 @@ function changeDestService(service: any) {
 }
 
 function changePods(pod: any) {
+  selectedSelector.value = ""
   if (pod[0]) {
     selectorStore.setCurrentPod(pod[0]);
   } else {
@@ -705,6 +711,7 @@ watch(
   background: rgb(240, 242, 245);
   border-bottom: 1px solid #dfe4e8;
   justify-content: space-between;
+  align-items: center;
 }
 
 .switch {
@@ -751,4 +758,8 @@ watch(
 .selectorPod {
   width: 300px;
 }
+
+.tool-btn{
+  height: 18px;
+}
 </style>

src/views/dashboard/related/trace/Filter.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="flex-h row">
+  <div class="flex-h">
     <div class="flex-h">
       <el-tooltip
         v-if="!activeFilter.length || activeFilter === 'service'"
@@ -22,7 +22,7 @@ limitations under the License. -->
         content="Service"
         placement="top-start"
       >
-        <el-button @click="setFilter('service')" type="secondary">
+        <el-button class="filter-btn" @click="setFilter('service')" type="secondary">
           <Icon size="sm" iconName="cloud_queue" />
         </el-button>
       </el-tooltip>
@@ -34,7 +34,7 @@ limitations under the License. -->
         content="Instance"
         placement="top-start"
       >
-        <el-button @click="setFilter('instance')" type="secondary">
+        <el-button class="filter-btn" @click="setFilter('instance')" type="secondary">
           <Icon size="sm" iconName="storage" />
         </el-button>
       </el-tooltip>
@@ -46,7 +46,7 @@ limitations under the License. -->
         content="Status"
         placement="top-start"
       >
-        <el-button @click="setFilter('status')" type="secondary">
+        <el-button class="filter-btn" @click="setFilter('status')" type="secondary">
           <Icon size="sm" iconName="device_hub" />
         </el-button>
       </el-tooltip>
@@ -58,7 +58,7 @@ limitations under the License. -->
         content="Duration"
         placement="top-start"
       >
-        <el-button @click="setFilter('duration')" type="secondary">
+        <el-button class="filter-btn" @click="setFilter('duration')" type="secondary">
           <Icon size="sm" iconName="av_timer" />
         </el-button>
       </el-tooltip>
@@ -70,7 +70,7 @@ limitations under the License. -->
         content="Trace ID"
         placement="top-start"
       >
-        <el-button @click="setFilter('traceId')" type="secondary">
+        <el-button class="filter-btn" @click="setFilter('traceId')" type="secondary">
           <Icon size="sm" iconName="timeline" />
         </el-button>
       </el-tooltip>
@@ -82,7 +82,7 @@ limitations under the License. -->
         content="Tags"
         placement="top-start"
       >
-        <el-button @click="setFilter('tags')" type="secondary">
+        <el-button class="filter-btn" @click="setFilter('tags')" type="secondary">
           <Icon size="sm" iconName="epic" />
         </el-button>
       </el-tooltip>
@@ -153,7 +153,7 @@ limitations under the License. -->
       />
       <el-button
         v-if="activeFilter"
-        class="search-btn"
+        class="search-btn filter-btn"
         size="small"
         type="primary"
         @click="searchTraces"
@@ -163,7 +163,7 @@ limitations under the License. -->
       </el-button>
       <el-button
         v-if="activeFilter"
-        class="search-btn"
+        class="search-btn filter-btn"
         size="small"
         type="danger"
         @click="cancelSearch"
@@ -352,7 +352,7 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
+  margin-left: 20px;  
   cursor: pointer;
 }
 .wrap-filters {
@@ -362,9 +362,12 @@ watch(
   // flex-direction: column;
   align-items: center;
   .filter {
-    margin: 5px 0;
+    margin: 0;
   }
 }
+.filter-btn {
+  height: 18px;
+}
 </style>
 
 //