[UI] Add page size option to tables

[bartektartanus]

Currently all tables shows 25 rows per page. Would be useful to have some dropdown field with more values to choose from, eg: 10, 25, 50, 100. This should be added next to page select component.

[10xtechie]

Hello @tchiotludo & @bartektartanus, If this issue #1051 is still relevant I would like to take on it. So, please assign it to me.

[10xtechie]

Hello @tchiotludo & @bartektartanus, Thanks for assigning this issue to me! What I have found so far is, the number of topics per page is set by a server's or application's environment variable; named akhq.pagination.page-size, of which the default value is set to 25 (see line 6 application.yml and line 67 of TopicController.java). Also, there is no RESTFul api defined in TopicController.java to change that default value of number of topics per page as set by the server's environment variable - by client or UI. We can control the number of topics to be shown on per page using a drop-down field on UI/Client, but the range of that number (e.g 10, 25, 50, 100) will depend on the value set by the server's environment variable. For example, if the default value for the number of topics per page is set to 25, we cannot show range of values of number of topic per page 50 or 100. So, what type of business logic/algorithm shall we use to divide the server's default value of number of topic per page into the range of number to choose from the UI drop-down field? There is another way to solve this issue i.e. to update the api in TopicController.java to allow for overriding this value from UI/client directly. Please let me know what you guys think and how we should implement this.

[tchiotludo]

IMO: The better will be to change the akhq.pagination.page-size to akhq.pagination.max-page-size and to control it on the server side and allow any value from the ui side

[10xtechie]

@tchiotludo I agree: server's default page size akhq.pagination.max-page-size will be the UI's default page size - for the first time the page is loaded. Thereafter, the page size will be controlled by the UI's page size dropdown field. I have completed the development creating a new React component name PageSize, so that this component can be plugged on a page along with pagination component. It is working fine :) However, I cannot run the exiting Unit tests or run the new ones. what do I need to setup to run the existing Unit tests? How do I setup debugger while running the app locally in a docker i.e. using docker-compose-dev.yml? I have tried setting remote debugger up with org.gradle.jvmargs option but the break pointers don't get hit.

[tchiotludo]

For the units test, you can runit with ./gradlew tests, it will spawn a temporary kafka cluster and no need to use docker for that. Or simply create the PR and let the CI/CD do the test for you :smile: