Fix pagination in Active table

CHANGELOG.md

@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (ui): Display queue latency in dashboard page and queue detail page.
 - (ui): Added copy-to-clipboard button for task ID in tasks list-view page.
 
+### Fixed
+- (ui): Pagination in ActiveTasks table is fixed
+
 ## [0.5.0] - 2021-12-19
 
 Version 0.5 added support for [Prometheus](https://prometheus.io/) integration.

ui/src/components/ActiveTasksTable.tsx

@@ -90,6 +90,7 @@ type ReduxProps = ConnectedProps<typeof connector>;
 
 interface Props {
   queue: string; // name of the queue
+  totalTaskCount: number; // total number of active tasks
 }
 
 function ActiveTasksTable(props: Props & ReduxProps) {
@@ -251,7 +252,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
               <TablePagination
                 rowsPerPageOptions={rowsPerPageOptions}
                 colSpan={columns.length + 1}
-                count={props.tasks.length}
+                count={props.totalTaskCount}
                 rowsPerPage={pageSize}
                 page={page}
                 SelectProps={{

ui/src/components/TasksTable.tsx

@@ -207,7 +207,10 @@ function TasksTable(props: Props & ReduxProps) {
         </div>
       </div>
       <TabPanel value="active" selected={props.selected}>
-        <ActiveTasksTable queue={props.queue} />
+        <ActiveTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.active}
+        />
       </TabPanel>
       <TabPanel value="pending" selected={props.selected}>
         <PendingTasksTable