Integrated Alerting: Pagination device for viewing large numbers of Alert Rules

User story:

• As a PMM Admin user I need to be able to use pagination on Alert Rule so that I'll be able to configure a more suitable way of presenting data for me

UI/UX:

• See Figma

Acceptance criteria

• User is able to see Pagination element and use it
• the default value is 25 items per page
• the values in the "per page" selector: 25-50-100 (as in QAN)
• selected "N per page" used on Alert Rules page only and specifically for this particular browser. (No need to do more than "localstorage") - save on the user's browser level

Out of scope:

• persistent across browser settings for the user

Suggested implementation:

• Start off by creating a pagination component, which needs to take into account: rows per-page options (e.g. 25, 50, 100), total pages, total items, number of page buttons visible (e.g. for 3 page buttons : "| << | < | 1 | 2 | 3 | > | >> |"). These can be configurable and the component should work with different combinations of options;
• Integrate this pagination with the "Table" component we built (used on Notification Channels already). The page should keep working, except now there' s pagination on the bottom;
• Replace remaining Integrated Alerting tables. For that, the "Table" component will need to allow different rendering methods (probably render prop here);
• Take advantage os react-table's API to allow controlled pagination, i.e. pagination that is taken care by ourselves while communicating with the API. Any change of page or page size should trigger an API request and update the table and / or pagination.
• Use local storage to save the page size. This can be done on a per-page basis using an hash for each item.

How to test:

• Go to a tabled page, e.g. Alert Rules;
• Look at the API request: the number of total items (overall) should be displayed in pagination ("Showing X - Y of <Total>");
• Look at the API request: the number of items retrieved should be displayed in pagination (e.g. 20 items came: "Showing 1 - 20 of 500");
• Change page: an API request should be triggered with the page and items per page as from the selected options. New data should come, table data updated as well as the pagination component itself (new selected page and information from items above);
• Change per page option: same as above;
• Go to first page: "<" and "<<" buttons should be disabled;
• Go to last page: ">" and ">>" buttons should be disabled;
• Any empty table should not display pagination;
• The pagination styling should follow Figma's specification.
• After changing the page size, a page refresh should keep that same page size for a particular table.

Screenshot: