From 9c725655cb6a703d8e1dc3b46f9657ca234347a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 28 Feb 2020 21:44:46 +0000
Subject: [PATCH] chore(ui): switch matched alerts preview to use pagination
 component

---
 .../__snapshots__/index.test.js.snap          |  4 ++
 ui/src/Components/LabelSetList/index.js       | 37 ++++---------------
 ui/src/Components/Pagination/index.js         |  3 +-
 .../__snapshots__/index.test.js.snap          |  4 ++
 4 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap b/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
index e3ab2dbc5..5d4b9e057 100644
--- a/ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
+++ b/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>
 "
 `;
diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js
index 65805e717..33dcc8ff5 100644
--- a/ui/src/Components/LabelSetList/index.js
+++ b/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>
diff --git a/ui/src/Components/Pagination/index.js b/ui/src/Components/Pagination/index.js
index c654eedfd..d2e322504 100644
--- a/ui/src/Components/Pagination/index.js
+++ b/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"
diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
index 61199c21b..500492a15 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
+++ b/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\\">