Bug 1565480 - Add pagination to the top

ui/perfherder/alerts/AlertsView.jsx

@@ -1,14 +1,7 @@
 /* eslint-disable react/no-did-update-set-state */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Alert,
-  Container,
-  Row,
-  Pagination,
-  PaginationItem,
-  PaginationLink,
-} from 'reactstrap';
+import { Alert, Container } from 'reactstrap';
 import cloneDeep from 'lodash/cloneDeep';
 
 import withValidation from '../Validation';
@@ -114,11 +107,6 @@ class AlertsView extends React.Component {
     this.setState({ status }, () => this.fetchAlertSummaries());
   };
 
-  navigatePage = page => {
-    this.setState({ page }, this.fetchAlertSummaries);
-    this.props.validated.updateParams({ page });
-  };
-
   getCurrentPages = () => {
     const { page, totalPages } = this.state;
     if (totalPages.length === 5 || !totalPages.length) {
@@ -154,7 +142,7 @@ class AlertsView extends React.Component {
     return params;
   };
 
-  async fetchAlertSummaries(id = this.state.id, update = false) {
+  async fetchAlertSummaries(id = this.state.id, update = false, page = 1) {
     // turn off loading when update is true (used to update alert statuses)
     this.setState({ loading: !update, errorMessages: [] });
 
@@ -166,16 +154,14 @@ class AlertsView extends React.Component {
       optionCollectionMap,
       alertSummaries,
       count,
-      page,
     } = this.state;
-
+    this.setState({ page });
     let updates = { loading: false };
     const params = this.composeParams(id, page, framework, status);
 
     const url = getApiUrl(
       `${endpoints.alertSummary}${createQueryParams(params)}`,
     );
-
     if (!issueTrackers.length && !optionCollectionMap) {
       const [optionCollectionMap, issueTrackers] = await Promise.all([
         OptionCollectionModel.getMap(),
@@ -228,10 +214,10 @@ class AlertsView extends React.Component {
       alertSummaries,
       issueTrackers,
       optionCollectionMap,
-      page,
-      count,
       bugTemplate,
       id,
+      page,
+      count,
     } = this.state;
 
     const frameworkNames =
@@ -279,56 +265,20 @@ class AlertsView extends React.Component {
           )}
           <AlertsViewControls
             dropdownOptions={id ? [] : alertDropdowns}
+            pageNums={pageNums}
             alertSummaries={alertSummaries}
             issueTrackers={issueTrackers}
             optionCollectionMap={optionCollectionMap}
-            fetchAlertSummaries={id => this.fetchAlertSummaries(id, true)}
+            fetchAlertSummaries={(id, update, page) =>
+              this.fetchAlertSummaries(id, update, page)
+            }
             updateViewState={state => this.setState(state)}
             bugTemplate={bugTemplate}
             user={user}
+            page={page}
+            count={count}
             {...this.props}
           />
-          {pageNums.length > 1 && (
-            <Row className="justify-content-center pb-5">
-              {/* The first and last pagination navigation links
-              aren't working correctly (icons aren't visible)
-              so they haven't been added */}
-              <Pagination aria-label={`Page ${page}`}>
-                {page > 1 && (
-                  <PaginationItem>
-                    <PaginationLink
-                      className="text-darker-info"
-                      previous
-                      onClick={() => this.navigatePage(page - 1)}
-                    />
-                  </PaginationItem>
-                )}
-                {pageNums.map(num => (
-                  <PaginationItem
-                    key={num}
-                    active={num === page}
-                    className="text-darker-info pagination-active"
-                  >
-                    <PaginationLink
-                      className="text-darker-info"
-                      onClick={() => this.navigatePage(num)}
-                    >
-                      {num}
-                    </PaginationLink>
-                  </PaginationItem>
-                ))}
-                {page < count && (
-                  <PaginationItem>
-                    <PaginationLink
-                      className="text-darker-info"
-                      next
-                      onClick={() => this.navigatePage(page + 1)}
-                    />
-                  </PaginationItem>
-                )}
-              </Pagination>
-            </Row>
-          )}
           {!loading && alertSummaries.length === 0 && (
             <p className="lead text-center">No alerts to show</p>
           )}

ui/perfherder/alerts/AlertsViewControls.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Row } from 'reactstrap';
 
 import FilterControls from '../FilterControls';
 import { convertParams } from '../helpers';
 
 import AlertTable from './AlertTable';
+import PaginationGroup from './Pagination';
 
 export default class AlertsViewControls extends React.Component {
   constructor(props) {
@@ -68,6 +70,10 @@ export default class AlertsViewControls extends React.Component {
       alertSummaries,
       dropdownOptions,
       fetchAlertSummaries,
+      pageNums,
+      validated,
+      page,
+      count,
       user,
     } = this.props;
     const {
@@ -107,6 +113,19 @@ export default class AlertsViewControls extends React.Component {
           updateFilterText={filterText => this.setState({ filterText })}
           dropdownCol
         />
+        {pageNums
+          ? pageNums.length > 1 && (
+              <Row className="justify-content-center">
+                <PaginationGroup
+                  pageNums={pageNums}
+                  updateParams={validated.updateParams}
+                  page={page}
+                  count={count}
+                  fetchData={fetchAlertSummaries}
+                />
+              </Row>
+            )
+          : null}
         {alertSummaries.length > 0 &&
           alertSummaries.map(alertSummary => (
             <AlertTable
@@ -118,6 +137,19 @@ export default class AlertsViewControls extends React.Component {
               user={user}
             />
           ))}
+        {pageNums
+          ? pageNums.length > 1 && (
+              <Row className="justify-content-center">
+                <PaginationGroup
+                  pageNums={pageNums}
+                  updateParams={validated.updateParams}
+                  page={page}
+                  count={count}
+                  fetchData={fetchAlertSummaries}
+                />
+              </Row>
+            )
+          : null}
       </React.Fragment>
     );
   }
@@ -130,6 +162,8 @@ AlertsViewControls.propTypes = {
   isListingAlertSummaries: PropTypes.bool,
   dropdownOptions: PropTypes.arrayOf(PropTypes.shape({})),
   fetchAlertSummaries: PropTypes.func.isRequired,
+  page: PropTypes.number,
+  count: PropTypes.number,
   alertSummaries: PropTypes.arrayOf(PropTypes.shape({})),
   user: PropTypes.shape({}).isRequired,
 };
@@ -138,4 +172,6 @@ AlertsViewControls.defaultProps = {
   isListingAlertSummaries: null,
   dropdownOptions: null,
   alertSummaries: [],
+  page: 1,
+  count: 1,
 };

ui/perfherder/alerts/Pagination.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+class PaginationGroup extends React.Component {
+  navigatePage = page => {
+    const { fetchData, updateParams } = this.props;
+    fetchData(undefined, false, parseInt(page, 10));
+    updateParams({ page });
+  };
+
+  render() {
+    const { pageNums, page, count } = this.props;
+    return (
+      /* The first and last pagination navigation links
+         aren't working correctly (icons aren't visible)
+         so they haven't been added */
+      <Pagination aria-label={`Page ${page}`}>
+        {page > 1 && (
+          <PaginationItem>
+            <PaginationLink
+              className="text-info"
+              previous
+              onClick={() => this.navigatePage(page - 1)}
+            />
+          </PaginationItem>
+        )}
+        {pageNums.map(num => (
+          <PaginationItem
+            key={num}
+            active={num === page}
+            className="text-info pagination-active"
+          >
+            <PaginationLink
+              className="text-info"
+              onClick={() => this.navigatePage(num)}
+            >
+              {num}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        {page < count && (
+          <PaginationItem>
+            <PaginationLink
+              className="text-info"
+              next
+              onClick={() => this.navigatePage(page + 1)}
+            />
+          </PaginationItem>
+        )}
+      </Pagination>
+    );
+  }
+}
+
+PaginationGroup.propTypes = {
+  pageNums: PropTypes.array.isRequired,
+  page: PropTypes.number,
+  count: PropTypes.number,
+  fetchData: PropTypes.func.isRequired,
+  updateParams: PropTypes.func.isRequired,
+};
+
+PaginationGroup.defaultProps = {
+  page: 1,
+  count: 1,
+};
+
+export default PaginationGroup;