[incubator-dubbo-ops] branch develop updated: service and app autocomplete #158

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

min pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-ops.git


The following commit(s) were added to refs/heads/develop by this push:
     new 9819b06  service and app autocomplete #158
9819b06 is described below

commit 9819b06d18d134c9b2e3d0e6407266c4d16f5a36
Author: nzomkxia <z8...@gmail.com>
AuthorDate: Wed Nov 7 17:01:03 2018 +0800

    service and app autocomplete #158
---
 .../src/components/ServiceSearch.vue               | 59 ++++++++++++++++++++--
 1 file changed, 54 insertions(+), 5 deletions(-)

diff --git a/dubbo-admin-frontend/src/components/ServiceSearch.vue b/dubbo-admin-frontend/src/components/ServiceSearch.vue
index 8c19c85..32a3a24 100644
--- a/dubbo-admin-frontend/src/components/ServiceSearch.vue
+++ b/dubbo-admin-frontend/src/components/ServiceSearch.vue
@@ -23,11 +23,19 @@
           <v-card-text>
             <v-form>
               <v-layout row wrap>
-                  <v-text-field label="Search dubbo services"
-                                :hint="hint"
-                                :suffix="queryBy"
-                                v-model="filter"></v-text-field>
-
+                <v-autocomplete
+                  :loading="loading"
+                  :items="typeAhead"
+                  :search-input.sync="input"
+                  v-model="filter"
+                  flat
+                  append-icon=""
+                  hide-no-data
+                  :suffix="queryBy"
+                  :hint="hint"
+                  open-on-clear
+                  label="Search Dubbo Services"
+                ></v-autocomplete>
                   <v-menu class="hidden-xs-only">
                     <v-btn slot="activator" large icon>
                       <v-icon>unfold_more</v-icon>
@@ -90,7 +98,12 @@
         {id: 1, title: 'IP', value: 'ip'},
         {id: 2, title: 'application', value: 'application'}
       ],
+      loading: false,
       selected: 0,
+      serviceItem: [],
+      input: null,
+      appItem: [],
+      typeAhead: [],
       services: [],
       filter: '',
       headers: [
@@ -136,7 +149,31 @@
         }
       }
     },
+    watch: {
+      input (val) {
+        console.log(val)
+        console.log(this.typeAhead)
+        if (val === undefined || val === '' || val === null || val.length < 5) {
+          this.filter = null
+          this.typeAhead = []
+          return
+        }
+        val && val !== this.select && this.querySelections(val)
+      }
+    },
     methods: {
+      querySelections (v) {
+        // this.loading = true
+        if (this.selected === 0) {
+          this.typeAhead = this.serviceItem.filter(e => {
+            return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
+          })
+        } else if (this.selected === 2) {
+          this.typeAhead = this.appItem.filter(e => {
+            return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
+          })
+        }
+      },
       getHref: function (service, app, group, version) {
         let query = 'service=' + service + '&app=' + app
         if (group !== null) {
@@ -169,6 +206,7 @@
       let query = this.$route.query
       let filter = null
       let pattern = null
+      let vm = this
       Object.keys(query).forEach(function (key) {
         if (key === 'filter') {
           filter = query[key]
@@ -188,6 +226,17 @@
         }
         this.search(filter, pattern, false)
       }
+      this.$axios.get('/service', {
+        params: {
+          pattern: 'serviceName'
+        }
+      }).then(response => {
+        let length = response.data.length
+        for (let i = 0; i < length; i++) {
+          vm.serviceItem.push(response.data[i].service)
+          vm.appItem.push(response.data[i].appName)
+        }
+      })
     }
 
   }