[DUBBO-OPS-318]: Feature: server-side pagination. resolve issue #318 (#324)

* feature: server-side pagination. resolve issue #318

* remove unused import

dubbo-admin-server/pom.xml

@@ -41,6 +41,10 @@
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
 
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-data-jpa</artifactId>
+        </dependency>
 
         <dependency>
             <groupId>org.springframework.boot</groupId>

dubbo-admin-server/src/main/java/org/apache/dubbo/admin/DubboAdminApplication.java

@@ -19,8 +19,12 @@ package org.apache.dubbo.admin;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
+import org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration;
 
-@SpringBootApplication
+@SpringBootApplication(exclude={
+		DataSourceAutoConfiguration.class, HibernateJpaAutoConfiguration.class
+})
 public class DubboAdminApplication {
 
 	public static void main(String[] args) {

dubbo-admin-server/src/main/java/org/apache/dubbo/admin/controller/ServiceController.java

@@ -29,6 +29,9 @@ import org.apache.dubbo.admin.service.ProviderService;
 import org.apache.dubbo.metadata.definition.model.FullServiceDefinition;
 import org.apache.dubbo.metadata.identifier.MetadataIdentifier;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.Pageable;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
@@ -37,6 +40,7 @@ import org.springframework.web.bind.annotation.RestController;
 
 import java.util.List;
 import java.util.Set;
+import java.util.stream.Collectors;
 
 @RestController
 @RequestMapping("/api/{env}")
@@ -54,9 +58,21 @@ public class ServiceController {
     }
 
     @RequestMapping( value = "/service", method = RequestMethod.GET)
-    public Set<ServiceDTO> searchService(@RequestParam String pattern,
-                                         @RequestParam String filter,@PathVariable String env) {
-        return providerService.getServiceDTOS(pattern, filter, env);
+    public Page<ServiceDTO> searchService(@RequestParam String pattern,
+                                          @RequestParam String filter,
+                                          @PathVariable String env,
+                                          Pageable pageable) {
+        final Set<ServiceDTO> serviceDTOS = providerService.getServiceDTOS(pattern, filter, env);
+
+        final int total = serviceDTOS.size();
+        final List<ServiceDTO> content =
+                serviceDTOS.stream()
+                        .skip(pageable.getOffset())
+                        .limit(pageable.getPageSize())
+                        .collect(Collectors.toList());
+
+        final Page<ServiceDTO> page = new PageImpl<>(content, pageable, total);
+        return page;
     }
 
     @RequestMapping(value = "/service/{service}", method = RequestMethod.GET)

dubbo-admin-ui/src/components/ServiceSearch.vue

@@ -69,10 +69,12 @@
         <v-card-text class="pa-0">
           <template>
             <v-data-table
-              hide-actions
               class="elevation-0 table-striped"
+              :pagination.sync="pagination"
+              :total-items="totalItems"
               :headers="headers"
               :items="services"
+              :loading="loadingServices"
             >
               <template slot="items" slot-scope="props">
                 <td >{{props.item.service}}</td>
@@ -159,9 +161,15 @@
       selected: 0,
       input: null,
       typeAhead: [],
-      services: [],
+      resultPage: {},
       filter: '',
-      headers: []
+      headers: [],
+      pagination: {
+        page: 1,
+        rowsPerPage: 10 // -1 for All
+      },
+      totalItems: 0,
+      loadingServices: false
     }),
     computed: {
       queryBy () {
@@ -178,6 +186,12 @@
       },
       area () {
         return this.$i18n.locale
+      },
+      services () {
+        if (!this.resultPage || !this.resultPage.content) {
+          return []
+        }
+        return this.resultPage.content
       }
     },
     watch: {
@@ -186,6 +200,17 @@
       },
       area () {
         this.setHeaders()
+      },
+      pagination: {
+        handler (newVal, oldVal) {
+          if (newVal.page === oldVal.page && newVal.rowsPerPage === oldVal.rowsPerPage) {
+            return
+          }
+          const filter = this.$route.query.filter || '*';
+          const pattern = this.$route.query.pattern || 'service'
+          this.search(filter, pattern, false)
+        },
+        deep: true
       }
     },
     methods: {
@@ -273,16 +298,24 @@
         }
       },
       search: function (filter, pattern, rewrite) {
+        const page = this.pagination.page - 1
+        const size = this.pagination.rowsPerPage
+        this.loadingServices = true
         this.$axios.get('/service', {
           params: {
-            pattern: pattern,
-            filter: filter
+            pattern,
+            filter,
+            page,
+            size
           }
         }).then(response => {
-          this.services = response.data
+          this.resultPage = response.data
+          this.totalItems = this.resultPage.totalElements
           if (rewrite) {
             this.$router.push({path: 'service', query: {filter: filter, pattern: pattern}})
           }
+        }).finally(() => {
+          this.loadingServices = false
         })
       },
       toTestService (item) {