Fix #1397 : Add pagination on background task list (#1453)

GladysAssistant · Mar 7, 2022 · aa625eb · aa625eb
1 parent 9926207
commit aa625eb
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 14 deletions.
diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -1395,6 +1395,8 @@
     "jobType": "Type",
     "jobProgress": "%",
     "jobStatus": "Status",
+    "previous": "Previous",
+    "next": "Next",
     "jobTypes": {
       "monthly-device-state-aggregate": "Monthly sensors aggregation",
       "daily-device-state-aggregate": "Daily sensors aggregation",

diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -1395,6 +1395,8 @@
     "jobType": "Type",
     "jobProgress": "%",
     "jobStatus": "Statut",
+    "previous": "Précédent",
+    "next": "Suivant",
     "jobTypes": {
       "monthly-device-state-aggregate": "Aggrégation donnée capteur mensuelle",
       "daily-device-state-aggregate": "Aggrégation donnée capteur journalière",

diff --git a/front/src/routes/settings/settings-background-jobs/JobList.jsx b/front/src/routes/settings/settings-background-jobs/JobList.jsx
@@ -78,6 +78,18 @@ const JobList = ({ children, ...props }) => (
             ))}
         </tbody>
       </table>
+      <div class="card-body">
+        {!props.isFirstPage && (
+          <button class="btn btn-secondary" onClick={props.loadPreviousPage}>
+            <Text id="jobsSettings.previous" />
+          </button>
+        )}
+        {!props.isLastPage && (
+          <button class="btn btn-secondary" onClick={props.loadNextPage}>
+            <Text id="jobsSettings.next" />
+          </button>
+        )}
+      </div>
     </div>
   </div>
 );

diff --git a/front/src/routes/settings/settings-background-jobs/SettingsBackgroundJobs.jsx b/front/src/routes/settings/settings-background-jobs/SettingsBackgroundJobs.jsx
@@ -1,9 +1,16 @@
 import SettingsLayout from '../SettingsLayout';
 import JobList from './JobList';
 
-const SettingsBackgroubJobsPage = ({ jobs, user }) => (
+const SettingsBackgroubJobsPage = ({ jobs, user, loadNextPage, loadPreviousPage, isFirstPage, isLastPage }) => (
   <SettingsLayout>
-    <JobList jobs={jobs} user={user} />
+    <JobList
+      jobs={jobs}
+      user={user}
+      loadNextPage={loadNextPage}
+      loadPreviousPage={loadPreviousPage}
+      isFirstPage={isFirstPage}
+      isLastPage={isLastPage}
+    />
   </SettingsLayout>
 );
 

diff --git a/front/src/routes/settings/settings-background-jobs/index.js b/front/src/routes/settings/settings-background-jobs/index.js
@@ -5,32 +5,52 @@ import SettingsBackgroundJobs from './SettingsBackgroundJobs';
 import actions from '../../../actions/system';
 import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../server/utils/constants';
 
+const NUMBER_OF_JOBS_PER_PAGE = 15;
+
 class SettingsSystem extends Component {
-  getJobs = async () => {
+  getJobs = async page => {
     try {
-      const jobs = await this.props.httpClient.get(`/api/v1/job?take=500`);
+      const skip = page * NUMBER_OF_JOBS_PER_PAGE;
+      const jobs = await this.props.httpClient.get(`/api/v1/job?take=${NUMBER_OF_JOBS_PER_PAGE}&skip=${skip}`);
+
       this.setState({
-        jobs
+        jobs,
+        isFirstPage: page === 0,
+        isLastPage: jobs.length < NUMBER_OF_JOBS_PER_PAGE,
+        currentPage: page
       });
     } catch (e) {
       console.error(e);
     }
   };
 
+  loadNextPage = async () => {
+    const { currentPage } = this.state;
+    this.getJobs(currentPage + 1);
+  };
+
+  loadPreviousPage = async () => {
+    const { currentPage } = this.state;
+    this.getJobs(currentPage - 1);
+  };
+
   search = async e => {
     const text = e.target.value;
     await this.setState({
       search: text
     });
-    this.getJobs();
+    this.getJobs(0);
   };
 
   newJob = payload => {
-    const { jobs } = this.state;
-    jobs.unshift(payload);
-    this.setState({
-      jobs
-    });
+    const { jobs, currentPage } = this.state;
+    // only add jobs to page if we are at the first page
+    if (currentPage === 0) {
+      jobs.unshift(payload);
+      this.setState({
+        jobs
+      });
+    }
   };
 
   jobUpdated = payload => {
@@ -48,12 +68,15 @@ class SettingsSystem extends Component {
     super(props);
     this.props = props;
     this.state = {
+      currentPage: 0,
+      isFirstPage: true,
+      isLastPage: false,
       jobs: []
     };
   }
 
   componentDidMount() {
-    this.getJobs();
+    this.getJobs(0);
     this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.JOB.NEW, this.newJob);
     this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.JOB.UPDATED, this.jobUpdated);
   }
@@ -63,8 +86,17 @@ class SettingsSystem extends Component {
     this.props.session.dispatcher.removeListener(WEBSOCKET_MESSAGE_TYPES.JOB.UPDATED, this.jobUpdated);
   }
 
-  render(props, { jobs }) {
-    return <SettingsBackgroundJobs jobs={jobs} user={props.user} />;
+  render(props, { jobs, isFirstPage, isLastPage }) {
+    return (
+      <SettingsBackgroundJobs
+        jobs={jobs}
+        user={props.user}
+        loadNextPage={this.loadNextPage}
+        loadPreviousPage={this.loadPreviousPage}
+        isFirstPage={isFirstPage}
+        isLastPage={isLastPage}
+      />
+    );
   }
 }