Skip to content

Commit

Permalink
feat(ui): add pagination size of topic list (#1109)
Browse files Browse the repository at this point in the history
relate #1051
  • Loading branch information
10xtechie authored Jun 26, 2022
1 parent 82cda2a commit 1222253
Show file tree
Hide file tree
Showing 8 changed files with 96 additions and 12 deletions.
34 changes: 34 additions & 0 deletions client/src/components/PageSize/PageSize.jsx
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 3 additions & 0 deletions client/src/components/PageSize/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import PageSize from './PageSize';

export default PageSize;
11 changes: 11 additions & 0 deletions client/src/components/PageSize/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@import "../../css/init";

// result per page
#result-per-page{
float: left;
display: flex;
}
#result-per-page span{
margin: 5px;
}

35 changes: 30 additions & 5 deletions client/src/containers/Topic/TopicList/TopicList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}

Expand Down Expand Up @@ -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) {
Expand All @@ -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});
}
Expand Down Expand Up @@ -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 :
Expand Down Expand Up @@ -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}
/>
Expand Down
8 changes: 6 additions & 2 deletions client/src/utils/endpoints.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand Down
5 changes: 3 additions & 2 deletions src/main/java/org/akhq/controllers/TopicController.java
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions src/main/java/org/akhq/utils/PagedList.java
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
8 changes: 5 additions & 3 deletions src/main/java/org/akhq/utils/ResultPagedList.java
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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()
);
}
}

0 comments on commit 1222253

Please sign in to comment.