feat(ui): add pagination size of topic list (#1109)

relate #1051

client/src/components/PageSize/PageSize.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import './styles.scss';
+
+const PageSize = ({
+  pageNumber,
+  totalPageNumber,
+  currentPageSize,
+  totalRecords,
+  ranges = [10, 25, 50, 100, 150, 200],
+  onChange,
+  editPageNumber,
+  showTotalPageNumber = true
+}) => {
+    var pageSizeOptions = [];
+    var pageSizeOptionsList = [];
+    ranges.forEach(element => pageSizeOptions[element] = element );
+    //if server's pageSize does not belong to ranges, it should be added - when the page is loaded for the first
+    if(!ranges.includes(currentPageSize)){
+      pageSizeOptions[currentPageSize] = currentPageSize;
+    }
+    pageSizeOptions.forEach((k) => {
+        pageSizeOptionsList.push(<option key={k} value={k}>{pageSizeOptions[k]}</option>);
+    })
+  return (
+    <div id="result-per-page">
+        <span>Results</span>
+        <select className="pagination mb-0" id="currentPageSize" name="currentPageSize" value={currentPageSize} onChange={(e) => {e.preventDefault(); onChange(pageSizeOptions[e.target.value])}}>
+          {pageSizeOptionsList}
+        </select>
+      </div>
+  );
+};
+
+export default PageSize;

client/src/components/PageSize/index.js

@@ -0,0 +1,3 @@
+import PageSize from './PageSize';
+
+export default PageSize;

client/src/components/PageSize/styles.scss

@@ -0,0 +1,11 @@
+@import "../../css/init";
+
+// result per page 
+#result-per-page{
+  float: left;
+  display: flex;
+}
+#result-per-page span{
+  margin: 5px;
+}
+

client/src/containers/Topic/TopicList/TopicList.jsx

@@ -16,6 +16,7 @@ import Root from '../../../components/Root';
 import DateTime from '../../../components/DateTime';
 import {getClusterUIOptions} from '../../../utils/functions';
 import {handlePageChange, getPageNumber} from './../../../utils/pagination';
+import PageSize from '../../../components/PageSize';
 
 class TopicList extends Root {
   state = {
@@ -27,6 +28,7 @@ class TopicList extends Root {
     deleteData: {},
     pageNumber: 1,
     totalPageNumber: 1,
+    currentPageSize: 1,
     searchData: {
       search: '',
       topicListView: constants.SETTINGS_VALUES.TOPIC.TOPIC_DEFAULT_VIEW.HIDE_INTERNAL
@@ -72,6 +74,7 @@ class TopicList extends Root {
     const query =  new URLSearchParams(this.props.location.search);
     const {searchData, keepSearch} = this.state;
     let { pageNumber } = this.state;
+    let { currentPageSize } = this.state;
     const uiOptions = await getClusterUIOptions(clusterId)
 
     let searchDataTmp;
@@ -87,14 +90,16 @@ class TopicList extends Root {
             (uiOptions && uiOptions.topic && uiOptions.topic.defaultView)? uiOptions.topic.defaultView : searchData.topicListView,
       }
       pageNumber = (query.get('page'))? parseInt(query.get('page')) : parseInt(pageNumber)
+      currentPageSize = (query.get('uiPageSize'))? parseInt(query.get('uiPageSize')) : parseInt(currentPageSize)
     }
 
     this.setState({
       selectedCluster: clusterId, 
       searchData: searchDataTmp,
       keepSearch: keepSearchTmp,
       uiOptions: uiOptions ?? {},
-      pageNumber: pageNumber
+      pageNumber: pageNumber,
+      currentPageSize: currentPageSize
     }, callBackFunction);
   }
 
@@ -153,12 +158,23 @@ class TopicList extends Root {
     });
   };
 
+  handlePageSizeChangeSubmission = value => {
+    let pageNumber = 1;
+    this.setState({ currentPageSize: value, pageNumber: pageNumber},() => {
+      this.getTopics();
+      this.props.history.push({
+        pathname: `/ui/${this.state.selectedCluster}/topic`,
+        search: `search=${this.state.searchData.search}&topicListView=${this.state.searchData.topicListView}&uiPageSize=${value}`
+      });
+    });
+  };
+
   async getTopics() {
-    const { selectedCluster, pageNumber } = this.state;
+    const { selectedCluster, pageNumber, currentPageSize } = this.state;
     const { search, topicListView } = this.state.searchData;
     this.setState({ loading: true } );
 
-    let response = await this.getApi(uriTopics(selectedCluster, search, topicListView, pageNumber));
+    let response = await this.getApi(uriTopics(selectedCluster, search, topicListView, pageNumber, currentPageSize));
     let data = response.data;
 
     if (data) {
@@ -167,7 +183,7 @@ class TopicList extends Root {
       } else {
         this.setState({ topics: [] });
       }
-      this.setState({ selectedCluster, totalPageNumber: data.page, loading: false }  )
+      this.setState({ selectedCluster, totalPageNumber: data.page, currentPageSize: data.pageSize, loading: false }  )
     } else {
       this.setState({ topics: [], loading: false, totalPageNumber: 0});
     }
@@ -279,7 +295,7 @@ class TopicList extends Root {
   }
 
   render() {
-    const { topics, selectedCluster, searchData, pageNumber, totalPageNumber, loading, collapseConsumerGroups, keepSearch, uiOptions } = this.state;
+    const { topics, selectedCluster, searchData, pageNumber, totalPageNumber, currentPageSize, loading, collapseConsumerGroups, keepSearch, uiOptions } = this.state;
     const uiOptionsTopic = uiOptions.topic ?? {};
     const dateTimeFormat = uiOptions.topicData && uiOptions.topicData.dateTimeFormat ?
       uiOptions.topicData.dateTimeFormat :
@@ -441,9 +457,18 @@ class TopicList extends Root {
               }}
               doSubmit={this.handleSearch}
           />
+
+          <PageSize
+            pageNumber={pageNumber}
+            totalPageNumber={totalPageNumber}
+            currentPageSize={this.state.currentPageSize}
+            onChange={this.handlePageSizeChangeSubmission}
+          />
+
           <Pagination
             pageNumber={pageNumber}
             totalPageNumber={totalPageNumber}
+            currentPageSize={currentPageSize}
             onChange={handlePageChange}
             onSubmit={this.handlePageChangeSubmission}
           />

client/src/utils/endpoints.js

@@ -35,8 +35,12 @@ export const uriUIOptions = (clusterId) => {
   return `${apiUrl}/${clusterId}/ui-options`;
 };
 
-export const uriTopics = (clusterId, search, show, page) => {
-  return `${apiUrl}/${clusterId}/topic?search=${search}&show=${show}&page=${page}`;
+export const uriTopics = (clusterId, search, show, page, pageSize) => {
+  if(pageSize === 1){
+    return `${apiUrl}/${clusterId}/topic?search=${search}&show=${show}&page=${page}`;
+  }else{
+    return `${apiUrl}/${clusterId}/topic?search=${search}&show=${show}&page=${page}&uiPageSize=${pageSize}`;
+  }
 };
 
 export const uriTopicDefaultConf = () => `${apiUrl}/topic/defaults-configs`;

src/main/java/org/akhq/controllers/TopicController.java

@@ -84,10 +84,11 @@ public ResultPagedList<Topic> list(
         String cluster,
         Optional<String> search,
         Optional<TopicRepository.TopicListView> show,
-        Optional<Integer> page
+        Optional<Integer> page,
+        Optional<Integer> uiPageSize
     ) throws ExecutionException, InterruptedException {
         URIBuilder uri = URIBuilder.fromURI(request.getUri());
-        Pagination pagination = new Pagination(pageSize, uri, page.orElse(1));
+        Pagination pagination = new Pagination(uiPageSize.orElse(pageSize), uri, page.orElse(1));
 
         return ResultPagedList.of(this.topicRepository.list(
             cluster,

src/main/java/org/akhq/utils/PagedList.java

@@ -25,6 +25,10 @@ public int total() {
         return this.total;
     }
 
+    public int pageSize() {
+        return this.pageSize;
+    }
+
     public URIBuilder before() {
         if (currentPage - 1 > 0) {
             return uri.addParameter("page", String.valueOf(currentPage - 1));

src/main/java/org/akhq/utils/ResultPagedList.java

@@ -1,11 +1,11 @@
 package org.akhq.utils;
 
+import java.util.List;
+
 import lombok.AllArgsConstructor;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 
-import java.util.List;
-
 @NoArgsConstructor
 @AllArgsConstructor
 @Getter
@@ -15,14 +15,16 @@ public class ResultPagedList<T> {
     private String after;
     private int page;
     private int total;
+    private int pageSize;
 
     public static <T> ResultPagedList<T> of(PagedList<T> pagedList) {
         return new ResultPagedList<>(
             pagedList,
             pagedList.before().toNormalizedURI(false).toString(),
             pagedList.after().toNormalizedURI(false).toString(),
             pagedList.pageCount(),
-            pagedList.total()
+            pagedList.total(),
+            pagedList.pageSize()
         );
     }
 }