diff --git a/ui/src/Components/SilenceModal/Browser/index.js b/ui/src/Components/SilenceModal/Browser/index.js index a42150916..54ed0fbec 100644 --- a/ui/src/Components/SilenceModal/Browser/index.js +++ b/ui/src/Components/SilenceModal/Browser/index.js @@ -110,6 +110,10 @@ const Browser = observer( this.dataSource.silences = result; this.dataSource.setDone(); this.dataSource.setError(null); + this.pagination.resetIfNeeded( + this.dataSource.silences.length, + this.maxPerPage + ); }) .catch(err => { console.trace(err); @@ -129,10 +133,17 @@ const Browser = observer( activePage: 1, onPageChange(pageNumber) { this.activePage = pageNumber; + }, + resetIfNeeded(totalItemsCount, maxPerPage) { + const totalPages = Math.ceil(totalItemsCount / maxPerPage); + if (this.activePage > totalPages) { + this.activePage = totalPages; + } } }, { - onPageChange: action.bound + onPageChange: action.bound, + resetIfNeeded: action.bound } ); diff --git a/ui/src/Components/SilenceModal/Browser/index.test.js b/ui/src/Components/SilenceModal/Browser/index.test.js index 045396ecd..a2eaec284 100644 --- a/ui/src/Components/SilenceModal/Browser/index.test.js +++ b/ui/src/Components/SilenceModal/Browser/index.test.js @@ -203,6 +203,29 @@ describe("", () => { expect(tree.find("ManagedSilence")).toHaveLength(1); }); + it("resetes pagination to last page on truncation", async () => { + fetch.mockResponseOnce(JSON.stringify(MockSilenceList(11))); + const tree = MountedBrowser(); + const instance = tree.instance(); + await expect(instance.dataSource.fetch).resolves.toBeUndefined(); + tree.update(); + + expect(instance.pagination.activePage).toBe(1); + const pageLink = tree.find(".page-link").at(3); + pageLink.simulate("click"); + tree.update(); + expect(tree.find("ManagedSilence")).toHaveLength(1); + expect(instance.pagination.activePage).toBe(3); + + fetch.mockResponseOnce(JSON.stringify(MockSilenceList(7))); + instance.onFetch(); + await expect(instance.dataSource.fetch).resolves.toBeUndefined(); + tree.update(); + + expect(tree.find("ManagedSilence")).toHaveLength(2); + expect(instance.pagination.activePage).toBe(2); + }); + it("renders error after failed fetch", async () => { jest.spyOn(console, "trace").mockImplementation(() => {}); fetch.mockReject("fake failure");