feat(ui): paginate long preview lists

ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
+"
+<ul class=\\"list-group list-group-flush\\">
+  <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+    <span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
+      foo: bar
+    </span>
+  </li>
+  <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+    <span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
+      job: node_exporter
+    </span>
+  </li>
+  <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+    <span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
+      instance: server1
+    </span>
+  </li>
+  <li class=\\"list-group-item px-0 pt-2 pb-1\\">
+    <span class=\\"components-label text-nowrap text-truncate badge badge-warning mw-100\\">
+      cluster: prod
+    </span>
+  </li>
+</ul>
+"
+`;

ui/src/Components/LabelSetList/index.js

@@ -1,8 +1,17 @@
-import React from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import { observer } from "mobx-react";
+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 Pagination from "react-js-pagination";
+
 import { AlertStore } from "Stores/AlertStore";
 import { StaticLabel } from "Components/Labels/StaticLabel";
 
@@ -25,29 +34,78 @@ const GroupListToUniqueLabelsList = groups => {
   return Object.values(alerts);
 };
 
-// used in new silence form preview stage and when deleting silences
-const LabelSetList = ({ alertStore, labelsList }) =>
-  labelsList.length > 0 ? (
-    <ul className="list-group list-group-flush">
-      {labelsList.map(labels => (
-        <li key={hash(labels)} className="list-group-item px-0 pt-2 pb-1">
-          {Object.entries(labels).map(([name, value]) => (
-            <StaticLabel
-              key={name}
-              alertStore={alertStore}
-              name={name}
-              value={value}
-            />
-          ))}
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <p className="text-muted text-center">No alerts matched</p>
-  );
-LabelSetList.propTypes = {
-  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-  labelsList: PropTypes.arrayOf(PropTypes.object).isRequired
-};
+const LabelSetList = observer(
+  class LabelSetList extends Component {
+    static propTypes = {
+      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+      labelsList: PropTypes.arrayOf(PropTypes.object).isRequired
+    };
+
+    maxPerPage = 10;
+
+    pagination = observable(
+      {
+        activePage: 1,
+        onPageChange(pageNumber) {
+          this.activePage = pageNumber;
+        }
+      },
+      {
+        onPageChange: action.bound
+      }
+    );
+
+    render() {
+      const { alertStore, labelsList } = this.props;
+
+      return labelsList.length > 0 ? (
+        <React.Fragment>
+          <ul className="list-group list-group-flush">
+            {labelsList
+              .slice(
+                (this.pagination.activePage - 1) * this.maxPerPage,
+                this.pagination.activePage * this.maxPerPage
+              )
+              .map(labels => (
+                <li
+                  key={hash(labels)}
+                  className="list-group-item px-0 pt-2 pb-1"
+                >
+                  {Object.entries(labels).map(([name, value]) => (
+                    <StaticLabel
+                      key={name}
+                      alertStore={alertStore}
+                      name={name}
+                      value={value}
+                    />
+                  ))}
+                </li>
+              ))}
+          </ul>
+          {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
+                hideDisabled
+                innerClass="pagination justify-content-center"
+                itemClass="page-item"
+                linkClass="page-link"
+                prevPageText={<FontAwesomeIcon icon={faChevronLeft} />}
+                nextPageText={<FontAwesomeIcon icon={faChevronRight} />}
+              />
+            </div>
+          ) : null}
+        </React.Fragment>
+      ) : (
+        <p className="text-muted text-center">No alerts matched</p>
+      );
+    }
+  }
+);
 
 export { LabelSetList, GroupListToUniqueLabelsList };

ui/src/Components/LabelSetList/index.test.js

@@ -0,0 +1,66 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { AlertStore } from "Stores/AlertStore";
+import { LabelSetList } from ".";
+
+let alertStore;
+
+beforeEach(() => {
+  alertStore = new AlertStore([]);
+});
+
+const MountedLabelSetList = labelsList => {
+  return mount(
+    <LabelSetList alertStore={alertStore} labelsList={labelsList} />
+  );
+};
+
+describe("<LabelSetList />", () => {
+  it("renders placeholder on empty list", () => {
+    const tree = MountedLabelSetList([]);
+    expect(tree.text()).toBe("No alerts matched");
+  });
+
+  it("renders labels on populated list", () => {
+    const tree = MountedLabelSetList([{ foo: "bar" }]);
+    expect(tree.text()).not.toBe("No alerts matched");
+    expect(tree.text()).toBe("foo: bar");
+  });
+
+  it("matches snapshot with populated list", () => {
+    const tree = MountedLabelSetList([
+      { foo: "bar" },
+      { job: "node_exporter" },
+      { instance: "server1" },
+      { cluster: "prod" }
+    ]);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("doesn't render pagination when list has 9 elements", () => {
+    const tree = MountedLabelSetList(
+      Array.from(Array(9), (_, i) => ({ instance: `server${i}` }))
+    );
+    expect(tree.find(".pagination")).toHaveLength(0);
+  });
+
+  it("renders pagination when list has 11 elements", () => {
+    const tree = MountedLabelSetList(
+      Array.from(Array(11), (_, i) => ({ instance: `server${i}` }))
+    );
+    expect(tree.find(".pagination")).toHaveLength(1);
+  });
+
+  it("clicking on pagination changes displayed elements", () => {
+    const tree = MountedLabelSetList(
+      Array.from(Array(21), (_, i) => ({ instance: `server${i + 1}` }))
+    );
+    const pageLink = tree.find(".page-link").at(2);
+    pageLink.simulate("click");
+    expect(tree.text()).toBe("instance: server21");
+  });
+});