UI: Prevent extra API calls in search filter on scrolling (#12553)

ui/src/components/view/SearchFilter.vue

@@ -1,17 +1,17 @@
 // Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements. See the NOTICE file
+// or more contributor license agreements.  See the NOTICE file
 // distributed with this work for additional information
-// regarding copyright ownership. The ASF licenses this file
+// regarding copyright ownership.  The ASF licenses this file
 // to you under the Apache License, Version 2.0 (the
 // "License"); you may not use this file except in compliance
-// with the License. You may obtain a copy of the License at
+// with the License.  You may obtain a copy of the License at
 //
-// http://www.apache.org/licenses/LICENSE-2.0
+//   http://www.apache.org/licenses/LICENSE-2.0
 //
 // Unless required by applicable law or agreed to in writing,
 // software distributed under the License is distributed on an
 // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied. See the License for the
+// KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
 
@@ -189,9 +189,10 @@ export default {
               resolve()
             } else {
               this.getSearchFilters(filter.key, filter.value).then((value) => {
+                const displayValue = (value !== undefined && value !== null && value !== '') ? value : filter.value
                 clonedFilters[idx] = {
                   key: filter.key,
-                  value: value,
+                  value: displayValue,
                   isTag: filter.isTag
                 }
                 resolve()

ui/src/views/AutogenView.vue

@@ -114,7 +114,7 @@
           style="min-height: 36px; padding-top: 12px; padding-left: 12px;"
         >
           <search-filter
-            :filters="getActiveFilters()"
+            :filters="activeFiltersList"
             :apiName="apiName"
             @removeFilter="removeFilter"
           />
@@ -690,9 +690,36 @@ export default {
     }
   },
   computed: {
+    activeFiltersList () {
+      const queryParams = Object.assign({}, this.$route.query)
+      const activeFilters = []
+      for (const filter in queryParams) {
+        if (this.$route.name === 'host' && filter === 'type') {
+          continue
+        }
+        if (!filter.startsWith('tags[')) {
+          activeFilters.push({
+            key: filter,
+            value: queryParams[filter],
+            isTag: false
+          })
+        } else if (filter.endsWith('].key')) {
+          const tagIdx = filter.split('[')[1].split(']')[0]
+          const tagKey = queryParams[`tags[${tagIdx}].key`]
+          const tagValue = queryParams[`tags[${tagIdx}].value`]
+          activeFilters.push({
+            key: tagKey,
+            value: tagValue,
+            isTag: true,
+            tagIdx: tagIdx
+          })
+        }
+      }
+      return activeFilters
+    },
     showSearchFilters () {
       const excludedKeys = ['page', 'pagesize', 'q', 'keyword', 'tags', 'projectid']
-      return !this.dataView && this.$config.showSearchFilters && this.getActiveFilters().some(f => !excludedKeys.includes(f.key))
+      return !this.dataView && this.$config.showSearchFilters && this.activeFiltersList.some(f => !excludedKeys.includes(f.key))
     },
     hasSelected () {
       return this.selectedRowKeys.length > 0
@@ -1145,30 +1172,6 @@ export default {
       eventBus.emit('action-closing', { action: this.currentAction })
       this.closeAction()
     },
-    getActiveFilters () {
-      const queryParams = Object.assign({}, this.$route.query)
-      const activeFilters = []
-      for (const filter in queryParams) {
-        if (!filter.startsWith('tags[')) {
-          activeFilters.push({
-            key: filter,
-            value: queryParams[filter],
-            isTag: false
-          })
-        } else if (filter.endsWith('].key')) {
-          const tagIdx = filter.split('[')[1].split(']')[0]
-          const tagKey = queryParams[`tags[${tagIdx}].key`]
-          const tagValue = queryParams[`tags[${tagIdx}].value`]
-          activeFilters.push({
-            key: tagKey,
-            value: tagValue,
-            isTag: true,
-            tagIdx: tagIdx
-          })
-        }
-      }
-      return activeFilters
-    },
     removeFilter (filter) {
       const queryParams = Object.assign({}, this.$route.query)
       if (filter.isTag) {