Save task-rows-per-page as user settings

ui/src/components/ActiveTasksTable.tsx

@@ -24,10 +24,10 @@ import {
   batchCancelActiveTasksAsync,
   cancelAllActiveTasksAsync,
 } from "../actions/tasksActions";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
   rowsPerPageOptions,
-  defaultPageSize,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
 import { usePolling } from "../hooks";
@@ -59,6 +59,7 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.activeTasks.batchActionPending,
     allActionPending: state.tasks.activeTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
@@ -67,6 +68,7 @@ const mapDispatchToProps = {
   cancelActiveTaskAsync,
   batchCancelActiveTasksAsync,
   cancelAllActiveTasksAsync,
+  taskRowsPerPageChange,
 };
 
 const columns: TableColumn[] = [
@@ -88,10 +90,9 @@ interface Props {
 }
 
 function ActiveTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listActiveTasksAsync, queue } = props;
+  const { pollInterval, listActiveTasksAsync, queue, pageSize } = props;
   const classes = useStyles();
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
 
@@ -105,7 +106,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
   const handleChangeRowsPerPage = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    setPageSize(parseInt(event.target.value, 10));
+    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
     setPage(0);
   };
 

ui/src/components/ArchivedTasksTable.tsx

@@ -30,9 +30,9 @@ import {
   runAllArchivedTasksAsync,
 } from "../actions/tasksActions";
 import TablePaginationActions, {
-  defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import TableActions from "./TableActions";
 import { timeAgo, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
@@ -63,6 +63,7 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.archivedTasks.batchActionPending,
     allActionPending: state.tasks.archivedTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
@@ -74,6 +75,7 @@ const mapDispatchToProps = {
   deleteAllArchivedTasksAsync,
   batchRunArchivedTasksAsync,
   batchDeleteArchivedTasksAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -86,10 +88,9 @@ interface Props {
 }
 
 function ArchivedTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listArchivedTasksAsync, queue } = props;
+  const { pollInterval, listArchivedTasksAsync, queue, pageSize } = props;
   const classes = useStyles();
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
 
@@ -103,7 +104,7 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
   const handleChangeRowsPerPage = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    setPageSize(parseInt(event.target.value, 10));
+    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
     setPage(0);
   };
 
@@ -288,14 +289,14 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
   );
 }
 
-const useRowStyles = makeStyles(theme => ({
+const useRowStyles = makeStyles((theme) => ({
   actionCell: {
     width: "96px",
   },
   actionButton: {
     marginLeft: 3,
     marginRight: 3,
-  }
+  },
 }));
 
 interface RowProps {

ui/src/components/PendingTasksTable.tsx

@@ -20,7 +20,6 @@ import ArchiveIcon from "@material-ui/icons/Archive";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import TablePaginationActions, {
-  defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
@@ -33,6 +32,7 @@ import {
   batchArchivePendingTasksAsync,
   archiveAllPendingTasksAsync,
 } from "../actions/tasksActions";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import { AppState } from "../store";
 import { usePolling } from "../hooks";
 import { uuidPrefix } from "../utils";
@@ -63,6 +63,7 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.pendingTasks.batchActionPending,
     allActionPending: state.tasks.pendingTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
@@ -74,6 +75,7 @@ const mapDispatchToProps = {
   archivePendingTaskAsync,
   batchArchivePendingTasksAsync,
   archiveAllPendingTasksAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -86,10 +88,9 @@ interface Props {
 }
 
 function PendingTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listPendingTasksAsync, queue } = props;
+  const { pollInterval, listPendingTasksAsync, queue, pageSize } = props;
   const classes = useStyles();
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
 
@@ -103,7 +104,7 @@ function PendingTasksTable(props: Props & ReduxProps) {
   const handleChangeRowsPerPage = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    setPageSize(parseInt(event.target.value, 10));
+    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
     setPage(0);
   };
 

ui/src/components/RetryTasksTable.tsx

@@ -34,9 +34,9 @@ import {
 } from "../actions/tasksActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
-  defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import TableActions from "./TableActions";
 import { durationBefore, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
@@ -67,6 +67,7 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.retryTasks.batchActionPending,
     allActionPending: state.tasks.retryTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
@@ -81,6 +82,7 @@ const mapDispatchToProps = {
   deleteRetryTaskAsync,
   runRetryTaskAsync,
   archiveRetryTaskAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -93,10 +95,9 @@ interface Props {
 }
 
 function RetryTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listRetryTasksAsync, queue } = props;
+  const { pollInterval, listRetryTasksAsync, queue, pageSize } = props;
   const classes = useStyles();
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
 
@@ -110,7 +111,7 @@ function RetryTasksTable(props: Props & ReduxProps) {
   const handleChangeRowsPerPage = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    setPageSize(parseInt(event.target.value, 10));
+    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
     setPage(0);
   };
 

ui/src/components/ScheduledTasksTable.tsx

@@ -32,9 +32,9 @@ import {
   runScheduledTaskAsync,
   archiveScheduledTaskAsync,
 } from "../actions/tasksActions";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
-  defaultPageSize,
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
@@ -67,6 +67,7 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.scheduledTasks.batchActionPending,
     allActionPending: state.tasks.scheduledTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
@@ -81,6 +82,7 @@ const mapDispatchToProps = {
   deleteScheduledTaskAsync,
   runScheduledTaskAsync,
   archiveScheduledTaskAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -93,10 +95,9 @@ interface Props {
 }
 
 function ScheduledTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listScheduledTasksAsync, queue } = props;
+  const { pollInterval, listScheduledTasksAsync, queue, pageSize } = props;
   const classes = useStyles();
   const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string>("");
 
@@ -110,7 +111,7 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
   const handleChangeRowsPerPage = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    setPageSize(parseInt(event.target.value, 10));
+    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
     setPage(0);
   };