From 5ae494a554e50b709729cab6157e9cb5f9dd8bd5 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Wed, 4 May 2022 12:20:34 +0100
Subject: [PATCH] updated slignment of tools

---
 src/components/Selector.vue                  | 11 ++++++++++-
 src/views/dashboard/panel/Tool.vue           |  6 +++++-
 src/views/dashboard/related/trace/Filter.vue | 19 +++++++++++--------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 515a2226..ff2ebc28 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <el-select
+  ref="customSelector"
     :size="size"
     v-model="selected"
     :placeholder="placeholder"
@@ -37,7 +38,7 @@ limitations under the License. -->
   </el-select>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import type { PropType } from "vue";
 
 interface Option {
@@ -47,6 +48,7 @@ interface Option {
 
 /*global  defineProps, defineEmits*/
 const emit = defineEmits(["change", "query"]);
+const customSelector = ref<string>(null)
 const props = defineProps({
   options: {
     type: Array as PropType<(Option & { disabled?: boolean })[]>,
@@ -84,6 +86,10 @@ function remoteMethod(query: string) {
   }
 }
 
+onMounted(() => {
+  console.log(customSelector.value)
+})
+
 watch(
   () => props.value,
   (data) => {
@@ -95,4 +101,7 @@ watch(
 .el-input__inner {
   border-radius: unset !important;
 }
+.el-input.el-input--small.el-input--suffix{
+  height: 18px !important;
+}
 </style>
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 3291ce28..6f6fe7e2 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -36,7 +36,7 @@ limitations under the License. -->
           <!-- <span class="label">$Service</span> -->
           <Selector
             v-if="selectedSelector === '$service'"
-            style="margin-left: 20px"
+            style="margin-left: 20px;"
             v-model="states.currentService"
             :options="selectorStore.services"
             size="small"
@@ -81,6 +81,7 @@ limitations under the License. -->
           </span> -->
           <Selector
             v-if="selectedSelector === '$endpoint'"
+            style="margin-left: 20px;"
             v-model="states.currentPod"
             :options="selectorStore.pods"
             size="small"
@@ -762,4 +763,7 @@ watch(
 .tool-btn{
   height: 18px;
 }
+.el-input__wrapper{
+  height: 18px !important;
+}
 </style>
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index c4e8bebb..91442a14 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h">
-    <div class="flex-h">
+    <div class="flex-h filter-container">
       <el-tooltip
         v-if="!activeFilter.length || activeFilter === 'service'"
         class="box-item"
@@ -88,7 +88,7 @@ limitations under the License. -->
       </el-tooltip>
     </div>
     <div class="wrap-filters">
-      <div class="filter my-5" v-if="activeFilter === 'service'">
+      <div class="filter" v-if="activeFilter === 'service'">
         <span class="grey mr-5">{{ t("service") }}:</span>
         <Selector
           size="small"
@@ -99,7 +99,7 @@ limitations under the License. -->
         />
       </div>
       <div
-        class="filter my-5"
+        class="filter"
         v-if="
           activeFilter === 'instance' && dashboardStore.entity !== EntityType[3].value
         "
@@ -113,7 +113,7 @@ limitations under the License. -->
           @change="changeField('instance', $event)"
         />
       </div>
-      <div class="filter my-5" v-if="dashboardStore.entity !== EntityType[2].value">
+      <div class="filter" v-if="dashboardStore.entity !== EntityType[2].value">
         <span class="grey mr-5">{{ t("endpoint") }}:</span>
         <Selector
           size="small"
@@ -125,7 +125,7 @@ limitations under the License. -->
           @query="searchEndpoints"
         />
       </div>
-      <div v-if="activeFilter === 'status'" class="filter my-5">
+      <div v-if="activeFilter === 'status'" class="filter">
         <span class="grey mr-5">{{ t("status") }}:</span>
         <Selector
           size="small"
@@ -135,12 +135,12 @@ limitations under the License. -->
           @change="changeField('status', $event)"
         />
       </div>
-      <div v-if="activeFilter === 'traceId'" class="filter my-5">
+      <div v-if="activeFilter === 'traceId'" class="filter">
         <span class="grey mr-5">{{ t("traceID") }}:</span>
         <el-input size="small" v-model="traceId" class="traceId" />
       </div>
 
-      <div v-if="activeFilter === 'duration'" class="filter my-5">
+      <div v-if="activeFilter === 'duration'" class="filter">
         <span class="sm b grey mr-5">{{ t("duration") }}:</span>
         <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
         <span class="grey mr-5">-</span>
@@ -355,6 +355,9 @@ watch(
   margin-left: 20px;  
   cursor: pointer;
 }
+.filter-container{
+  align-items: center;
+}
 .wrap-filters {
   padding: 0 10px;
   display: flex;
@@ -372,7 +375,7 @@ watch(
 
 //
 <div class="flex-h">
-//      <div class="filter my-5">
+//      <div class="filter">
 //       <span class="grey mr-5">{{ t("timeRange") }}:</span>
 //       <TimePicker
 //         :value="dateTime"