From 9e8a30aa22f0cbd3355db4727e1d8c6dc95c24eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 26 Oct 2019 20:43:02 +0100
Subject: [PATCH] chore(ui): better pagination handling for large lists

---
 ui/src/Components/LabelSetList/index.js       | 14 ++++++++-----
 .../Components/SilenceModal/Browser/index.js  | 20 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js
index efb69ed22..f9f5de6c3 100644
--- a/ui/src/Components/LabelSetList/index.js
+++ b/ui/src/Components/LabelSetList/index.js
@@ -7,8 +7,10 @@ import { observable, action } from "mobx";
 import hash from "object-hash";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
+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";
 
@@ -93,12 +95,14 @@ const LabelSetList = observer(
                 totalItemsCount={labelsList.length}
                 pageRangeDisplayed={5}
                 onChange={this.pagination.onPageChange}
-                hideFirstLastPages
+                hideFirstLastPages={labelsList.length / this.maxPerPage < 10}
                 innerClass="pagination justify-content-center"
                 itemClass="page-item"
                 linkClass="page-link"
-                prevPageText={<FontAwesomeIcon icon={faChevronLeft} />}
-                nextPageText={<FontAwesomeIcon icon={faChevronRight} />}
+                prevPageText={<FontAwesomeIcon icon={faAngleLeft} />}
+                nextPageText={<FontAwesomeIcon icon={faAngleRight} />}
+                firstPageText={<FontAwesomeIcon icon={faAngleDoubleLeft} />}
+                lastPageText={<FontAwesomeIcon icon={faAngleDoubleRight} />}
               />
             </div>
           ) : null}
diff --git a/ui/src/Components/SilenceModal/Browser/index.js b/ui/src/Components/SilenceModal/Browser/index.js
index fc6bcdac8..834cc8837 100644
--- a/ui/src/Components/SilenceModal/Browser/index.js
+++ b/ui/src/Components/SilenceModal/Browser/index.js
@@ -13,8 +13,10 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 import { faSortAmountDownAlt } from "@fortawesome/free-solid-svg-icons/faSortAmountDownAlt";
 import { faSortAmountUp } from "@fortawesome/free-solid-svg-icons/faSortAmountUp";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons/faChevronLeft";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
+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 { AlertStore, FormatBackendURI } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -235,12 +237,20 @@ const Browser = observer(
                       totalItemsCount={this.dataSource.silences.length}
                       pageRangeDisplayed={5}
                       onChange={this.pagination.onPageChange}
-                      hideFirstLastPages
+                      hideFirstLastPages={
+                        this.dataSource.silences.length / this.maxPerPage < 20
+                      }
                       innerClass="pagination justify-content-center"
                       itemClass="page-item"
                       linkClass="page-link"
-                      prevPageText={<FontAwesomeIcon icon={faChevronLeft} />}
-                      nextPageText={<FontAwesomeIcon icon={faChevronRight} />}
+                      prevPageText={<FontAwesomeIcon icon={faAngleLeft} />}
+                      nextPageText={<FontAwesomeIcon icon={faAngleRight} />}
+                      firstPageText={
+                        <FontAwesomeIcon icon={faAngleDoubleLeft} />
+                      }
+                      lastPageText={
+                        <FontAwesomeIcon icon={faAngleDoubleRight} />
+                      }
                     />
                   </div>
                 ) : null}