You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by mi...@apache.org on 2019/02/12 05:55:32 UTC

[incubator-dubbo-ops] branch develop updated: feature: navigation between services and tests. Fixes #285 (#286)

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 af0a20f  feature: navigation between services and tests. Fixes #285 (#286)
af0a20f is described below

commit af0a20f933f584ce8658c1af64382c77a4fa8051
Author: kezhenxu94 <ke...@163.com>
AuthorDate: Tue Feb 12 13:55:27 2019 +0800

    feature: navigation between services and tests. Fixes #285 (#286)
    
    * feature: navigation between services and tests. Fixes #285
    
    * autocomplete service name and support fuzzy search
---
 dubbo-admin-ui/src/components/ServiceSearch.vue    | 11 ++++
 dubbo-admin-ui/src/components/test/ServiceTest.vue | 58 ++++++++++++++++++++--
 dubbo-admin-ui/src/lang/en.js                      | 10 +++-
 dubbo-admin-ui/src/lang/zh.js                      | 10 +++-
 4 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/dubbo-admin-ui/src/components/ServiceSearch.vue b/dubbo-admin-ui/src/components/ServiceSearch.vue
index a979b8e..1f7706a 100644
--- a/dubbo-admin-ui/src/components/ServiceSearch.vue
+++ b/dubbo-admin-ui/src/components/ServiceSearch.vue
@@ -83,6 +83,13 @@
                   <v-btn
                     small
                     color='primary'
+                    @click="toTestService(props.item)"
+                  >
+                    {{$t('test')}}
+                  </v-btn>
+                  <v-btn
+                    small
+                    color='primary'
                     :href='getHref(props.item.service, props.item.appName, props.item.group, props.item.version)'
                   >
                    {{ $t('detail') }}
@@ -276,6 +283,10 @@
             this.$router.push({path: 'service', query: {filter: filter, pattern: pattern}})
           }
         })
+      },
+      toTestService (item) {
+        const service = item.service
+        this.$router.push(`/test/?service=${service}`)
       }
     },
     mounted: function () {
diff --git a/dubbo-admin-ui/src/components/test/ServiceTest.vue b/dubbo-admin-ui/src/components/test/ServiceTest.vue
index 57c3506..3e4fb20 100644
--- a/dubbo-admin-ui/src/components/test/ServiceTest.vue
+++ b/dubbo-admin-ui/src/components/test/ServiceTest.vue
@@ -21,10 +21,24 @@
         <breadcrumb title="serviceTest" :items="breads"></breadcrumb>
       </v-flex>
       <v-flex xs12>
-        <search v-model="filter" label="Search by service name" :submit="search"></search>
+        <v-autocomplete
+          flat
+          hide-no-data
+          v-model="service"
+          :loading="loading"
+          :search-input.sync="filter"
+          :hint="$t('testModule.searchServiceHint')"
+          :items="services"
+          item-value="service"
+          item-text="service"
+          :label="$t('placeholders.searchService')"
+          persistent-hint
+          @keyup.enter="search"
+          clearable
+        ></v-autocomplete>
       </v-flex>
       <v-flex xs12>
-        <h3>Methods</h3>
+        <h3>{{$t('methods')}}</h3>
       </v-flex>
       <v-flex xs12>
         <v-data-table :headers="headers" :items="methods" hide-actions class="elevation-1">
@@ -40,7 +54,7 @@
                 >
                   <v-icon>edit</v-icon>
                 </v-btn>
-                <span>Try it</span>
+                <span>{{$t('test')}}</span>
               </v-tooltip>
             </td>
           </template>
@@ -68,13 +82,16 @@
         breads: [
           {
             text: 'serviceSearch',
-            href: ''
+            href: '/test'
           }
         ],
         headers: [
         ],
         service: null,
-        methods: []
+        methods: [],
+        services: [],
+        searchKey: this.$route.query['service'] || '*',
+        loading: false
       }
     },
     methods: {
@@ -138,6 +155,26 @@
           this.showSnackbar('error', error.response.data.message)
         })
       },
+      searchServices () {
+        let filter = this.filter || ''
+        if (!filter.startsWith('*')) {
+          filter = '*' + filter
+        }
+        if (!filter.endsWith('*')) {
+          filter += '*'
+        }
+        const pattern = 'service'
+        this.loading = true
+        this.$axios.get('/service', {
+          params: {
+            pattern, filter
+          }
+        }).then(response => {
+          this.services = response.data
+        }).finally(() => {
+          this.loading = false
+        })
+      },
       getHref (application, service, method) {
         return `/#/testMethod?application=${application}&service=${service}&method=${method}`
       }
@@ -150,6 +187,12 @@
     watch: {
       area () {
         this.setHeaders()
+      },
+      filter () {
+        this.searchServices()
+      },
+      searchKey () {
+        this.search()
       }
     },
     created () {
@@ -157,3 +200,8 @@
     }
   }
 </script>
+<style>
+  .v-breadcrumbs {
+    padding-left: 0;
+  }
+</style>
diff --git a/dubbo-admin-ui/src/lang/en.js b/dubbo-admin-ui/src/lang/en.js
index c9e628a..639cd93 100644
--- a/dubbo-admin-ui/src/lang/en.js
+++ b/dubbo-admin-ui/src/lang/en.js
@@ -130,5 +130,13 @@ export default {
   success: 'SUCCESS',
   fail: 'FAIL',
   detail: 'Detail',
-  more: 'More'
+  more: 'More',
+  test: 'Test',
+  placeholders: {
+    searchService: 'Search by service name'
+  },
+  methods: 'Methods',
+  testModule: {
+    searchServiceHint: 'Service ID, org.apache.dubbo.demo.api.DemoService, * for fuzzy search, press Enter to search'
+  }
 }
diff --git a/dubbo-admin-ui/src/lang/zh.js b/dubbo-admin-ui/src/lang/zh.js
index c9e4c51..3330933 100644
--- a/dubbo-admin-ui/src/lang/zh.js
+++ b/dubbo-admin-ui/src/lang/zh.js
@@ -130,5 +130,13 @@ export default {
   success: ' 成功',
   fail: '失败',
   detail: '详情',
-  more: '更多'
+  more: '更多',
+  test: '测试',
+  placeholders: {
+    searchService: '通过服务名搜索服务'
+  },
+  methods: '方法列表',
+  testModule: {
+    searchServiceHint: '服务ID, org.apache.dubbo.demo.api.DemoService, 使用 * 进行模糊查找, 按回车键查询'
+  }
 }