fix: set selector props and update configuration panel styles (#175)

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);

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();

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>

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>