github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): better pagination handling for large lists

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-10-26 20:43:02 +01:00
parent c0f4e4aabb
commit 9e8a30aa22
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/Components/LabelSetList/index.js
View File

@@ -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}

20
ui/src/Components/SilenceModal/Browser/index.js
View File

@@ -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}