From af0a20f933f584ce8658c1af64382c77a4fa8051 Mon Sep 17 00:00:00 2001
From: kezhenxu94 <kezhenxu94@163.com>
Date: Tue, 12 Feb 2019 13:55:27 +0800
Subject: [PATCH] feature: navigation between services and tests. Fixes #285
 (#286)

* feature: navigation between services and tests. Fixes #285

* autocomplete service name and support fuzzy search
---
 .../src/components/ServiceSearch.vue          | 11 ++++
 .../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
@@ -80,6 +80,13 @@
                 <td>{{props.item.version}}</td>
                 <td>{{props.item.appName}}</td>
                 <td class="text-xs-center px-0" nowrap>
+                  <v-btn
+                    small
+                    color='primary'
+                    @click="toTestService(props.item)"
+                  >
+                    {{$t('test')}}
+                  </v-btn>
                   <v-btn
                     small
                     color='primary'
@@ -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, 使用 * 进行模糊查找, 按回车键查询'
+  }
 }
-- 
GitLab