UI: Filter menu UX improvements (#5994)

* fix filter menu

* fixes

* fixes

* fixes

Author: Hoang Nguyen

ui/src/components/view/SearchView.vue

@@ -59,6 +59,7 @@
                     initialValue: fieldValues[field.name] || null
                   }]"
                   showSearch
+                  :dropdownMatchSelectWidth="false"
                   optionFilterProp="children"
                   :filterOption="(input, option) => {
                     return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -82,7 +83,7 @@
                         </span>
                         <a-icon v-else type="block" style="margin-right: 5px" />
                       </span>
-                      {{ $t(opt.name) }}
+                      {{ $t(opt.path || opt.name) }}
                     </div>
                   </a-select-option>
                 </a-select>
@@ -309,25 +310,25 @@ export default {
         if (zoneIndex > -1) {
           const zones = response.filter(item => item.type === 'zoneid')
           if (zones && zones.length > 0) {
-            this.fields[zoneIndex].opts = zones[0].data
+            this.fields[zoneIndex].opts = this.sortArray(zones[0].data)
           }
         }
         if (domainIndex > -1) {
           const domain = response.filter(item => item.type === 'domainid')
           if (domain && domain.length > 0) {
-            this.fields[domainIndex].opts = domain[0].data
+            this.fields[domainIndex].opts = this.sortArray(domain[0].data, 'path')
           }
         }
         if (podIndex > -1) {
           const pod = response.filter(item => item.type === 'podid')
           if (pod && pod.length > 0) {
-            this.fields[podIndex].opts = pod[0].data
+            this.fields[podIndex].opts = this.sortArray(pod[0].data)
           }
         }
         if (clusterIndex > -1) {
           const cluster = response.filter(item => item.type === 'clusterid')
           if (cluster && cluster.length > 0) {
-            this.fields[clusterIndex].opts = cluster[0].data
+            this.fields[clusterIndex].opts = this.sortArray(cluster[0].data)
           }
         }
         this.$forceUpdate()
@@ -347,6 +348,14 @@ export default {
         this.fillFormFieldValues()
       })
     },
+    sortArray (data, key = 'name') {
+      return data.sort(function (a, b) {
+        if (a[key] < b[key]) { return -1 }
+        if (a[key] > b[key]) { return 1 }
+
+        return 0
+      })
+    },
     fillFormFieldValues () {
       this.fieldValues = {}
       if (Object.keys(this.$route.query).length > 0) {