From af9c47d03866f184e19cbadd2fcd367f2eb3f71f Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Wed, 2 Mar 2022 05:45:53 -0800
Subject: [PATCH] Fix pagination in Active table

---
 CHANGELOG.md                           | 3 +++
 ui/src/components/ActiveTasksTable.tsx | 3 ++-
 ui/src/components/TasksTable.tsx       | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c26642..f20a6e6 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/ui/src/components/ActiveTasksTable.tsx b/ui/src/components/ActiveTasksTable.tsx
index 2668234..60108d4 100644
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/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={{
diff --git a/ui/src/components/TasksTable.tsx b/ui/src/components/TasksTable.tsx
index c23d82d..58db170 100644
--- a/ui/src/components/TasksTable.tsx
+++ b/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