Support pagination in ReplicatorDB activity panel

app/addons/replication/actions.js

@@ -26,7 +26,6 @@ import {
   createReplicatorDB
 } from './api';
 
-
 export const initReplicator = (routeLocalSource, localSource) => dispatch => {
   if (routeLocalSource && routeLocalSource !== localSource) {
     dispatch({
@@ -85,9 +84,9 @@ export const replicate = (params) => dispatch => {
         clear: true
       });
 
-      dispatch(getReplicationActivity());
-      FauxtonAPI.navigate('#/replication');
-    }).catch(json => {
+      dispatch(getReplicationActivity(params.pagination));
+    })
+    .catch(json => {
       if (json.error && json.error === "not_found") {
         return createReplicatorDB().then(() => {
           return replicate(params)(dispatch);
@@ -111,19 +110,16 @@ export const clearReplicationForm = () => {
   return { type: ActionTypes.REPLICATION_CLEAR_FORM };
 };
 
-export const getReplicationActivity = () => dispatch => {
+export const getReplicationActivity = (params) => dispatch => {
   dispatch({
     type: ActionTypes.REPLICATION_FETCHING_STATUS,
   });
 
-  supportNewApi()
-    .then(supportNewApi => {
-      return fetchReplicationDocs(supportNewApi);
-    })
-    .then(docs => {
+  fetchReplicationDocs(params)
+    .then(docsInfo => {
       dispatch({
         type: ActionTypes.REPLICATION_STATUS,
-        options: docs
+        options: docsInfo
       });
     });
 };
@@ -201,7 +197,7 @@ export const clearSelectedReplicates = () => {
   };
 };
 
-export const deleteDocs = (docs) => dispatch => {
+export const deleteDocs = (docs, pagination) => dispatch => {
   const bulkDocs = docs.map(({raw: doc}) => {
     doc._deleted = true;
     return doc;
@@ -237,7 +233,7 @@ export const deleteDocs = (docs) => dispatch => {
       });
 
       dispatch(clearSelectedDocs());
-      dispatch(getReplicationActivity());
+      dispatch(getReplicationActivity(pagination));
     })
     .catch(resp => {
       resp.json()
@@ -416,3 +412,43 @@ export const checkForNewApi = () => dispatch => {
     });
   });
 };
+
+export const updatePerPageResults = (amount) => {
+  const newPaginate = {
+    page: 1,
+    docsPerPage: amount
+  };
+  return (dispatch) => {
+    dispatch({
+      type: ActionTypes.REPLICATION_UPDATE_PER_PAGE_RESULTS,
+      options: amount
+    });
+
+    dispatch(getReplicationActivity(newPaginate));
+  };
+};
+
+export const paginateNext = (paginate) => {
+  return dispatch => {
+    dispatch({
+      type: ActionTypes.REPLICATION_NEXT_PAGE
+    });
+
+    paginate.page += 1;
+    dispatch(getReplicationActivity(paginate));
+  };
+};
+
+export const paginatePrevious = (paginate) => {
+  return dispatch => {
+    dispatch({
+      type: ActionTypes.REPLICATION_PREVIOUS_PAGE
+    });
+
+    if (paginate.page > 1) {
+      paginate.page -= 1;
+    }
+
+    dispatch(getReplicationActivity(paginate));
+  };
+};

app/addons/replication/actiontypes.js

@@ -38,5 +38,8 @@ export default {
   REPLICATION_CLEAR_SELECTED_REPLICATES: 'REPLICATION_CLEAR_SELECTED_REPLICATES',
   REPLICATION_FETCHING_FORM_STATE: 'REPLICATION_FETCHING_FORM_STATE',
   REPLICATION_HIDE_PASSWORD_MODAL: 'REPLICATION_HIDE_PASSWORD_MODAL',
-  REPLICATION_SHOW_PASSWORD_MODAL: 'REPLICATION_SHOW_PASSWORD_MODAL'
+  REPLICATION_SHOW_PASSWORD_MODAL: 'REPLICATION_SHOW_PASSWORD_MODAL',
+  REPLICATION_UPDATE_PER_PAGE_RESULTS: 'REPLICATION_UPDATE_PER_PAGE_RESULTS',
+  REPLICATION_NEXT_PAGE: 'REPLICATION_NEXT_PAGE',
+  REPLICATION_PREVIOUS_PAGE: 'REPLICATION_PREVIOUS_PAGE'
 };

app/addons/replication/api.js

@@ -13,10 +13,12 @@
 import '@webcomponents/url';
 import Constants from './constants';
 import FauxtonAPI from '../../core/api';
+import app from '../../app';
 import Helpers from '../../helpers';
 import {get, post, put} from '../../core/ajax';
 import base64 from 'base-64';
 import _ from 'lodash';
+import { removeOverflowDocsAndCalculateHasNext } from '../documents/index-results/actions/fetch';
 
 let newApiPromise = null;
 export const supportNewApi = (forceCheck) => {
@@ -260,24 +262,22 @@ export const getDocUrl = (doc) => {
   return removeSensitiveUrlInfo(url);
 };
 
-export const parseReplicationDocs = (rows) => {
-  return rows.map(row => row.doc).map(doc => {
-    return {
-      _id: doc._id,
-      _rev: doc._rev,
-      selected: false, //use this field for bulk delete in the ui
-      source: getDocUrl(doc.source),
-      target: getDocUrl(doc.target),
-      createTarget: doc.create_target,
-      continuous: doc.continuous === true ? true : false,
-      status: doc._replication_state,
-      errorMsg: doc._replication_state_reason ? doc._replication_state_reason : '',
-      statusTime: new Date(doc._replication_state_time),
-      startTime: new Date(doc._replication_start_time),
-      url: `#/database/_replicator/${encodeURIComponent(doc._id)}`,
-      raw: doc
-    };
-  });
+export const parseReplicationDocs = docs => {
+  return docs.map(doc => ({
+    _id: doc._id,
+    _rev: doc._rev,
+    selected: false, //use this field for bulk delete in the ui
+    source: getDocUrl(doc.source),
+    target: getDocUrl(doc.target),
+    createTarget: doc.create_target,
+    continuous: doc.continuous === true,
+    status: doc._replication_state,
+    errorMsg: doc._replication_state_reason ? doc._replication_state_reason : '',
+    statusTime: new Date(doc._replication_state_time),
+    startTime: new Date(doc._replication_start_time),
+    url: `#/database/_replicator/${encodeURIComponent(doc._id)}`,
+    raw: doc
+  }));
 };
 
 export const convertState = (state) => {
@@ -308,34 +308,69 @@ export const combineDocsAndScheduler = (docs, schedulerDocs) => {
   });
 };
 
-export const fetchReplicationDocs = () => {
+export const fetchReplicationDocs = ({docsPerPage, page}) => {
+  const limit = docsPerPage + 1;
+  const skip = (page - 1) * docsPerPage;
+
+  const mangoPayload = {
+    limit,
+    skip,
+    selector: {
+      _id: {
+        $gte: null
+      }
+    }
+  };
+
+  const schedulerDocsPayload = {
+    limit,
+    skip
+  };
+
   return supportNewApi()
     .then(newApi => {
-      const url = Helpers.getServerUrl('/_replicator/_all_docs?include_docs=true&limit=100');
-      const docsPromise = get(url)
+      const url = Helpers.getServerUrl('/_replicator/_find');
+      const docsPromise = post(url, mangoPayload)
         .then((res) => {
-          if (res.error) {
-            return [];
-          }
-
-          return parseReplicationDocs(res.rows.filter(row => row.id.indexOf("_design/") === -1));
+          const docs = res.error ? [] : res.docs;
+          return parseReplicationDocs(docs);
         });
 
       if (!newApi) {
-        return docsPromise;
+        return docsPromise
+          .then(docs => {
+            const {
+              finalDocList,
+              canShowNext
+            } = removeOverflowDocsAndCalculateHasNext(docs, false, docsPerPage + 1);
+            return {
+              docs: finalDocList,
+              canShowNext
+            };
+          });
       }
-      const schedulerPromise = fetchSchedulerDocs();
+      const schedulerPromise = fetchSchedulerDocs(schedulerDocsPayload);
       return FauxtonAPI.Promise.join(docsPromise, schedulerPromise, (docs, schedulerDocs) => {
         return combineDocsAndScheduler(docs, schedulerDocs);
       })
+        .then(docs => {
+          const {
+            finalDocList,
+            canShowNext
+          } = removeOverflowDocsAndCalculateHasNext(docs, false, docsPerPage + 1);
+          return {
+            docs: finalDocList,
+            canShowNext
+          };
+        })
         .catch(() => {
           return [];
         });
     });
 };
 
-export const fetchSchedulerDocs = () => {
-  const url = Helpers.getServerUrl('/_scheduler/docs?include_docs=true');
+export const fetchSchedulerDocs = (params) => {
+  const url = Helpers.getServerUrl(`/_scheduler/docs?${app.utils.queryParams(params)}`);
   return get(url)
     .then((res) => {
       if (res.error) {

app/addons/replication/assets/less/replication.less

@@ -374,3 +374,10 @@ td.replication__empty-row {
 .replication__activity-caveat {
   padding-left: 80px;
 }
+
+.replication__paginate-footer {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  width: 100%;
+}

app/addons/replication/components/activity.js

@@ -15,6 +15,7 @@ import React from 'react';
 import {DeleteModal} from './modals';
 import {ReplicationTable} from './common-table';
 import {ReplicationHeader} from './common-activity';
+import PaginationFooter from '../../documents/index-results/components/pagination/PaginationFooter';
 
 export default class Activity extends React.Component {
   constructor (props) {
@@ -48,7 +49,7 @@ export default class Activity extends React.Component {
       docs = this.props.docs.filter(doc => doc.selected);
     }
 
-    this.props.deleteDocs(docs);
+    this.props.deleteDocs(docs, this.props.pagination);
     this.closeModal();
   }
 
@@ -66,7 +67,14 @@ export default class Activity extends React.Component {
       selectAllDocs,
       someDocsSelected,
       allDocsSelected,
-      selectDoc
+      selectDoc,
+      pageStart,
+      pageEnd,
+      docsPerPage,
+      updatePerPageResults,
+      paginateNext,
+      paginatePrevious,
+      pagination
     } = this.props;
 
     const {modalVisible} = this.state;
@@ -90,6 +98,25 @@ export default class Activity extends React.Component {
           column={activitySort.column}
           changeSort={changeActivitySort}
         />
+        <div className="replication__paginate-footer">
+          <PaginationFooter
+            hasResults={true}
+            showPrioritizedEnabled={false}
+            prioritizedEnabled={false}
+            canShowNext={pagination.canShowNext}
+            canShowPrevious={pagination.page > 1}
+            perPage={docsPerPage}
+            toggleShowAllColumns={false}
+            docs={this.props.docs}
+            pageStart={pageStart}
+            pageEnd={pageEnd}
+            updatePerPageResults={updatePerPageResults}
+            paginateNext={paginateNext}
+            paginatePrevious={paginatePrevious}
+            queryOptionsParams={{}}
+            fetchParams={pagination}
+          />
+        </div>
         <DeleteModal
           isReplicationDB={true}
           multipleDocs={this.numDocsSelected()}

app/addons/replication/components/common-table.js

@@ -381,7 +381,7 @@ export class ReplicationTable extends React.Component {
   render () {
 
     return (
-      <Table striped>
+      <Table striped style={{marginBottom: '100px'}}>
         <thead>
           <tr>
             <th className="replication__table-bulk-select">
@@ -400,9 +400,9 @@ export class ReplicationTable extends React.Component {
               Target
               <span className={`replication__table-header-icon ${this.iconDirection('target')} ${this.isSelected('target')}`} />
             </th>
-            <th className="replication__table-header-time" onClick={this.onSort('statusTime')}>
+            <th className="replication__table-header-time" onClick={this.onSort('startTime')}>
               Start Time
-              <span className={`replication__table-header-icon ${this.iconDirection('statusTime')} ${this.isSelected('statusTime')}`} />
+              <span className={`replication__table-header-icon ${this.iconDirection('startTime')} ${this.isSelected('startTime')}`} />
             </th>
             <th className="replication__table-header-type" onClick={this.onSort('continuous')}>
               Type

app/addons/replication/components/newreplication.js

@@ -249,7 +249,8 @@ export default class NewReplicationController extends React.Component {
       sourceAuth,
       targetAuthType,
       targetAuth,
-      targetDatabasePartitioned
+      targetDatabasePartitioned,
+      pagination
     } = this.props;
 
     let _rev;
@@ -274,7 +275,8 @@ export default class NewReplicationController extends React.Component {
       sourceAuth,
       targetAuthType,
       targetAuth,
-      targetDatabasePartitioned
+      targetDatabasePartitioned,
+      pagination
     });
   }