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

fix(ui): render fewer items per page on mobile

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-05-11 10:13:45 +01:00
committed by Łukasz Mierzwa
parent ac8762e502
commit 11a3e15d03
3 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ import { useLocalStore, useObserver } from "mobx-react";
import hash from "object-hash";
import { AlertStore } from "Stores/AlertStore";
import { IsMobile } from "Common/Device";
import { StaticLabel } from "Components/Labels/StaticLabel";
import { PageSelect } from "Components/Pagination";
@@ -36,7 +37,7 @@ const LabelSetList = ({ alertStore, labelsList }) => {
},
}));
const maxPerPage = 10;
const maxPerPage = IsMobile() ? 5 : 10;
return useObserver(() =>
labelsList.length > 0 ? (

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

@@ -17,6 +17,7 @@ import { AlertStore, FormatBackendURI } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { Settings } from "Stores/Settings";
import { FetchGet } from "Common/Fetch";
import { IsMobile } from "Common/Device";
import { ManagedSilence } from "Components/ManagedSilence";
import { PageSelect } from "Components/Pagination";
import { ThemeContext } from "Components/Theme";
@@ -79,7 +80,7 @@ const Browser = ({
},
}));
const maxPerPage = 5;
const maxPerPage = IsMobile() ? 4 : 6;
const pagination = useLocalStore(() => ({
activePage: 1,
@@ -118,7 +119,7 @@ const Browser = ({
dataSource.setDone();
return dataSource.setError(`Request failed with: ${err.message}`);
});
}, [dataSource, pagination]);
}, [dataSource, maxPerPage, pagination]);
const onDebouncedFetch = debounce(onFetch, 500);

24
ui/src/Components/SilenceModal/Browser/index.test.js
View File

@@ -221,24 +221,24 @@ describe("<Browser />", () => {
}, 200);
});
it("renders only first 5 silences", (done) => {
it("renders only first 6 silences", (done) => {
fetch.mockResponse(JSON.stringify(MockSilenceList(6)));
const tree = MountedBrowser();
setTimeout(() => {
tree.update();
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
done();
}, 200);
});
it("renders last silence after page change", (done) => {
fetch.mockResponse(JSON.stringify(MockSilenceList(6)));
fetch.mockResponse(JSON.stringify(MockSilenceList(7)));
const tree = MountedBrowser();
setTimeout(() => {
tree.update();
expect(tree.find("li.page-item").at(1).hasClass("active")).toBe(true);
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
const pageLink = tree.find(".page-link").at(3);
pageLink.simulate("click");
@@ -250,20 +250,20 @@ describe("<Browser />", () => {
});
it("renders next/previous page after arrow key press", (done) => {
fetch.mockResponse(JSON.stringify(MockSilenceList(11)));
fetch.mockResponse(JSON.stringify(MockSilenceList(13)));
const tree = MountedBrowser();
setTimeout(() => {
tree.update();
expect(tree.find("li.page-item").at(1).hasClass("active")).toBe(true);
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
const paginator = tree.find(".components-pagination").at(0);
paginator.simulate("focus");
PressKey(paginator, "ArrowRight", 39);
expect(tree.find("li.page-item").at(2).hasClass("active")).toBe(true);
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
PressKey(paginator, "ArrowRight", 39);
expect(tree.find("li.page-item").at(3).hasClass("active")).toBe(true);
@@ -275,21 +275,21 @@ describe("<Browser />", () => {
PressKey(paginator, "ArrowLeft", 37);
expect(tree.find("li.page-item").at(2).hasClass("active")).toBe(true);
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
PressKey(paginator, "ArrowLeft", 37);
expect(tree.find("li.page-item").at(1).hasClass("active")).toBe(true);
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
PressKey(paginator, "ArrowLeft", 37);
expect(tree.find("li.page-item").at(1).hasClass("active")).toBe(true);
expect(tree.find("ManagedSilence")).toHaveLength(5);
expect(tree.find("ManagedSilence")).toHaveLength(6);
done();
}, 200);
});
it("resets pagination to last page on truncation", (done) => {
fetch.mockResponse(JSON.stringify(MockSilenceList(11)));
fetch.mockResponse(JSON.stringify(MockSilenceList(13)));
const tree = MountedBrowser();
setTimeout(() => {
tree.update();
@@ -300,7 +300,7 @@ describe("<Browser />", () => {
expect(tree.find("ManagedSilence")).toHaveLength(1);
expect(tree.find("li.page-item").at(3).hasClass("active")).toBe(true);
fetch.mockResponse(JSON.stringify(MockSilenceList(7)));
fetch.mockResponse(JSON.stringify(MockSilenceList(8)));
tree.find("button.btn-secondary").simulate("click");
setTimeout(() => {