From 4232161d36d83716a9949dec1d5da63ec701f928 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Tue, 25 Oct 2022 16:48:49 +0800
Subject: [PATCH] fix: set selector props and update configuration panel styles
 (#175)

---
 src/components/Selector.vue                                 | 3 ++-
 src/views/dashboard/configuration/Widget.vue                | 2 +-
 .../dashboard/configuration/widget/AssociateOptions.vue     | 1 +
 .../dashboard/configuration/widget/RelatedTraceOptions.vue  | 6 ++++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 65c033b4..ea1ccd7a 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -18,7 +18,6 @@ limitations under the License. -->
     v-model="selected"
     :placeholder="placeholder"
     @change="changeSelected"
-    filterable
     :multiple="multiple"
     :disabled="disabled"
     :style="{ borderRadius }"
@@ -26,6 +25,7 @@ limitations under the License. -->
     :remote="isRemote"
     :reserve-keyword="isRemote"
     :remote-method="remoteMethod"
+    :filterable="filterable"
   >
     <el-option
       v-for="item in options"
@@ -66,6 +66,7 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
   isRemote: { type: Boolean, default: false },
+  filterable: { type: Boolean, default: true },
 });
 
 const selected = ref<string[] | string>(props.value);
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 4c684906..4582b702 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -101,7 +101,7 @@ export default defineComponent({
     ...CustomOptions,
   },
   setup() {
-    const configHeight = document.documentElement.clientHeight - 520;
+    const configHeight = document.documentElement.clientHeight - 540;
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
diff --git a/src/views/dashboard/configuration/widget/AssociateOptions.vue b/src/views/dashboard/configuration/widget/AssociateOptions.vue
index 765baa95..43f29e34 100644
--- a/src/views/dashboard/configuration/widget/AssociateOptions.vue
+++ b/src/views/dashboard/configuration/widget/AssociateOptions.vue
@@ -23,6 +23,7 @@ limitations under the License. -->
       placeholder="Select a widget"
       class="selectors"
       @change="updateWidgetConfig"
+      :filterable="false"
     />
   </div>
 </template>
diff --git a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
index 378e1e39..e516f329 100644
--- a/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
+++ b/src/views/dashboard/configuration/widget/RelatedTraceOptions.vue
@@ -31,6 +31,7 @@ limitations under the License. -->
         :options="Status"
         placeholder="Select a status"
         @change="updateConfig({ status: $event[0].value })"
+        class="selector"
       />
     </div>
     <div class="item">
@@ -40,6 +41,7 @@ limitations under the License. -->
         :value="queryOrder"
         :options="QueryOrders"
         placeholder="Select a option"
+        class="selector"
         @change="updateConfig({ queryOrder: $event[0].value })"
       />
     </div>
@@ -87,4 +89,8 @@ function updateConfig(param: { [key: string]: unknown }) {
 .item {
   margin-bottom: 10px;
 }
+
+.selector {
+  width: 500px;
+}
 </style>