chore(ui): switch matched alerts preview to use pagination component

ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap

@@ -50,6 +50,10 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
       </li>
     </ul>
   </div>
+  <div tabindex=\\"-1\\"
+       class=\\"components-pagination\\"
+  >
+  </div>
 </div>
 "
 `;

ui/src/Components/LabelSetList/index.js

@@ -6,16 +6,9 @@ import { observable, action } from "mobx";
 
 import hash from "object-hash";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleLeft } from "@fortawesome/free-solid-svg-icons/faAngleLeft";
-import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
-import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
-import { faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons/faAngleDoubleRight";
-
-import Pagination from "react-js-pagination";
-
 import { AlertStore } from "Stores/AlertStore";
 import { StaticLabel } from "Components/Labels/StaticLabel";
+import { PageSelect } from "Components/Pagination";
 
 // take a list of groups and outputs a list of label sets, this ignores
 // the receiver, so we'll end up with only unique alerts
@@ -87,27 +80,13 @@ const LabelSetList = observer(
                 ))}
             </ul>
           </div>
-          {labelsList.length > this.maxPerPage ? (
-            <div className="mt-3">
-              <Pagination
-                activePage={this.pagination.activePage}
-                itemsCountPerPage={this.maxPerPage}
-                totalItemsCount={labelsList.length}
-                pageRangeDisplayed={5}
-                onChange={this.pagination.onPageChange}
-                hideFirstLastPages={labelsList.length / this.maxPerPage < 10}
-                innerClass="pagination justify-content-center"
-                itemClass="page-item"
-                linkClass="page-link"
-                activeClass="active"
-                activeLinkClass="font-weight-bold"
-                prevPageText={<FontAwesomeIcon icon={faAngleLeft} />}
-                nextPageText={<FontAwesomeIcon icon={faAngleRight} />}
-                firstPageText={<FontAwesomeIcon icon={faAngleDoubleLeft} />}
-                lastPageText={<FontAwesomeIcon icon={faAngleDoubleRight} />}
-              />
-            </div>
-          ) : null}
+          <PageSelect
+            totalPages={Math.ceil(labelsList.length / this.maxPerPage)}
+            activePage={this.pagination.activePage}
+            maxPerPage={this.maxPerPage}
+            totalItemsCount={labelsList.length}
+            setPageCallback={this.pagination.onPageChange}
+          />
         </div>
       ) : (
         <p className="text-muted text-center">No alerts matched</p>

ui/src/Components/Pagination/index.js

@@ -42,6 +42,7 @@ class PageSelect extends Component {
   render() {
     const {
       totalItemsCount,
+      totalPages,
       maxPerPage,
       activePage,
       setPageCallback
@@ -68,7 +69,7 @@ class PageSelect extends Component {
               totalItemsCount={totalItemsCount}
               pageRangeDisplayed={5}
               onChange={setPageCallback}
-              hideFirstLastPages={totalItemsCount / maxPerPage < 20}
+              hideFirstLastPages={totalPages < 10}
               innerClass="pagination justify-content-center"
               itemClass="page-item"
               linkClass="page-link"

ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap

@@ -89,6 +89,10 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
         </li>
       </ul>
     </div>
+    <div tabindex=\\"-1\\"
+         class=\\"components-pagination\\"
+    >
+    </div>
   </div>
 </div>
 <div class=\\"d-flex flex-row-reverse\\">