EPMRPP-88780 || Increase the dashboard limit per project

app/localization/translated/be.json

@@ -462,7 +462,7 @@
   "DashboardForm.editModalSubmitButtonText": "Актуалізаваць",
   "DashboardForm.editModalTitle": "Рэдагаваць панэль кіравання",
   "DashboardForm.modalCancelButtonText": "Адмяніць",
-  "DashboardHeaderButton.buttonTooltip": "Ліміт у 300 панэляў дасягнуты. Каб стварыць новы, трэба выдаліць хаця б адзін, створаны раней",
+  "DashboardHeaderButton.buttonTooltip": "Ліміт у 3000 панэляў дасягнуты. Каб стварыць новы, трэба выдаліць хаця б адзін, створаны раней",
   "DashboardItemPage.addNewWidget": "Дадаць новы віджэт",
   "DashboardItemPage.addWidgetSuccess": "Віджэт дададзены",
   "DashboardItemPage.dashboardEmptyText": "Дадайце Ваш першы віджэт каб прааналізаваць статыстыку",

app/localization/translated/es.json

@@ -462,7 +462,7 @@
   "DashboardForm.editModalSubmitButtonText": "Actualizar",
   "DashboardForm.editModalTitle": "editar panel de control",
   "DashboardForm.modalCancelButtonText": "Cancelar",
-  "DashboardHeaderButton.buttonTooltip": "Se alcanzó el límite de 300 paneles de control. Para crear uno nuevo, debe eliminar al menos uno de los creados anteriormente",
+  "DashboardHeaderButton.buttonTooltip": "Se alcanzó el límite de 3000 paneles de control. Para crear uno nuevo, debe eliminar al menos uno de los creados anteriormente",
   "DashboardItemPage.addNewWidget": "Añadir nuevo widget",
   "DashboardItemPage.addWidgetSuccess": "Widget añadido",
   "DashboardItemPage.dashboardEmptyText": "Añade el primer widget para analizar las estadísticas",

app/localization/translated/ru.json

@@ -462,7 +462,7 @@
   "DashboardForm.editModalSubmitButtonText": "Обновить",
   "DashboardForm.editModalTitle": "редактировать панель управления",
   "DashboardForm.modalCancelButtonText": "Отменить",
-  "DashboardHeaderButton.buttonTooltip": "Достигнут предел в 300 информационных панелей. Для создания нового нужно удалить хотя бы одно созданное ранее",
+  "DashboardHeaderButton.buttonTooltip": "Достигнут предел в 3000 информационных панелей. Для создания нового нужно удалить хотя бы одно созданное ранее",
   "DashboardItemPage.addNewWidget": "Добавить новый виджет",
   "DashboardItemPage.addWidgetSuccess": "Виджет добавлен",
   "DashboardItemPage.dashboardEmptyText": "Добавьте первый виджет, чтобы проанализировать статистику",

app/localization/translated/uk.json

@@ -462,7 +462,7 @@
   "DashboardForm.editModalSubmitButtonText": "Оновити",
   "DashboardForm.editModalTitle": "редагувати панель управління",
   "DashboardForm.modalCancelButtonText": "Скасувати",
-  "DashboardHeaderButton.buttonTooltip": "Досягнуто обмеження в 300 інформаційних панелей. Щоб створити новий, потрібно видалити принаймні один, створений раніше",
+  "DashboardHeaderButton.buttonTooltip": "Досягнуто обмеження в 3000 інформаційних панелей. Щоб створити новий, потрібно видалити принаймні один, створений раніше",
   "DashboardItemPage.addNewWidget": "Додати новий віджет",
   "DashboardItemPage.addWidgetSuccess": "Доданий віджет",
   "DashboardItemPage.dashboardEmptyText": "Додайте перший віджет, щоб проаналізувати статистику",

app/localization/translated/zh.json

@@ -462,7 +462,7 @@
   "DashboardForm.editModalSubmitButtonText": "更新",
   "DashboardForm.editModalTitle": "编辑报告面板",
   "DashboardForm.modalCancelButtonText": "取消",
-  "DashboardHeaderButton.buttonTooltip": "已达到 300 个仪表板的上限。要创建一个新的，您需要至少删除一个之前创建的。",
+  "DashboardHeaderButton.buttonTooltip": "已达到 3000 个仪表板的上限。要创建一个新的，您需要至少删除一个之前创建的。",
   "DashboardItemPage.addNewWidget": "添加新小部件",
   "DashboardItemPage.addWidgetSuccess": "小部件已添加",
   "DashboardItemPage.dashboardEmptyText": "添加您的第一个小部件以分析统计数据",

app/src/common/urls.js

@@ -39,11 +39,8 @@ export const URLS = {
     `${urlBase}data/${activeProject}/userphoto${getQueryParams({ login, loadThumbnail })}`,
 
   dashboard: (activeProject, id) => `${urlBase}${activeProject}/dashboard/${id}`,
-  dashboards: (activeProject) =>
-    `${urlBase}${activeProject}/dashboard${getQueryParams({
-      'page.page': 1,
-      'page.size': 300,
-    })}`,
+  dashboards: (activeProject, params) =>
+    `${urlBase}${activeProject}/dashboard${getQueryParams({ ...params })}`,
 
   widget: (activeProject, widgetId = '') => `${urlBase}${activeProject}/widget/${widgetId}`,
   widgetMultilevel: (activeProject, widgetId, params) =>

app/src/controllers/dashboard/index.js

@@ -33,6 +33,7 @@ export {
   dashboardFullScreenModeSelector,
   loadingSelector,
   totalDashboardsSelector,
+  dashboardPaginationSelector,
 } from './selectors';
 export {
   DASHBOARDS_TABLE_VIEW,

app/src/controllers/dashboard/selectors.js

@@ -41,3 +41,5 @@ export const totalDashboardsSelector = (state) =>
 export const dashboardFullScreenModeSelector = (state) => domainSelector(state).fullScreenMode;
 
 export const querySelector = createQueryParametersSelector();
+
+export const dashboardPaginationSelector = (state) => domainSelector(state).pagination;

app/src/pages/inside/common/dashboardPageHeader/addDashboardButton/addDashboardButton.jsx

@@ -36,7 +36,7 @@ const messages = defineMessages({
   },
   buttonTooltip: {
     id: 'DashboardHeaderButton.buttonTooltip',
-    defaultMessage: `The limit of 300 dashboards has been reached. To create a new one you need to delete at least one created previously`,
+    defaultMessage: `The limit of 3000 dashboards has been reached. To create a new one you need to delete at least one created previously`,
   },
 });
 

app/src/pages/inside/common/dashboardPageHeader/dashboardPageHeader.jsx

@@ -45,7 +45,7 @@ const messages = defineMessages({
 });
 
 const DASHBOARD_PAGE_ITEM_VALUE = 'All';
-const DASHBOARDS_LIMIT = 300;
+const DASHBOARDS_LIMIT = 3000;
 
 @connect((state) => ({
   projectId: activeProjectSelector(state),

app/src/pages/inside/dashboardPage/dashboardPage.jsx

@@ -31,8 +31,11 @@ import {
   DASHBOARDS_TABLE_VIEW,
   DASHBOARDS_GRID_VIEW,
   loadingSelector,
+  dashboardPaginationSelector,
 } from 'controllers/dashboard';
+import { DEFAULT_PAGINATION, PAGE_KEY, SIZE_KEY, withPagination } from 'controllers/pagination';
 import { DASHBOARD_PAGE, DASHBOARD_PAGE_EVENTS } from 'components/main/analytics/events';
+import { PaginationToolbar } from 'components/main/paginationToolbar';
 import { DASHBOARD_EVENTS } from 'analyticsEvents/dashboardsPageEvents';
 import { userInfoSelector } from 'controllers/user';
 import { showModalAction } from 'controllers/modal';
@@ -90,6 +93,9 @@ const messages = defineMessages({
   },
 )
 @withFilter()
+@withPagination({
+  paginationSelector: dashboardPaginationSelector,
+})
 @injectIntl
 @track({ page: DASHBOARD_PAGE })
 export class DashboardPage extends Component {
@@ -110,6 +116,12 @@ export class DashboardPage extends Component {
       getTrackingData: PropTypes.func,
     }).isRequired,
     loading: PropTypes.bool,
+    pageCount: PropTypes.number,
+    activePage: PropTypes.number,
+    itemCount: PropTypes.number,
+    pageSize: PropTypes.number,
+    onChangePage: PropTypes.func,
+    onChangePageSize: PropTypes.func,
   };
 
   static defaultProps = {
@@ -124,6 +136,12 @@ export class DashboardPage extends Component {
     onFilterChange: () => {},
     changeVisibilityType: () => {},
     loading: false,
+    pageCount: null,
+    activePage: DEFAULT_PAGINATION[PAGE_KEY],
+    itemCount: null,
+    pageSize: DEFAULT_PAGINATION[SIZE_KEY],
+    onChangePage: () => {},
+    onChangePageSize: () => {},
   };
 
   onDeleteDashboardItem = (item) => {
@@ -200,7 +218,20 @@ export class DashboardPage extends Component {
   };
 
   render() {
-    const { gridType, userInfo, onFilterChange, filter, dashboardItems, loading } = this.props;
+    const {
+      gridType,
+      userInfo,
+      onFilterChange,
+      filter,
+      dashboardItems,
+      loading,
+      pageCount,
+      activePage,
+      itemCount,
+      pageSize,
+      onChangePage,
+      onChangePageSize,
+    } = this.props;
 
     return (
       <PageLayout>
@@ -226,6 +257,16 @@ export class DashboardPage extends Component {
             onAddItem={this.onAddDashboardItem}
             filter={filter}
           />
+          {!!pageCount && !loading && (
+            <PaginationToolbar
+              activePage={activePage}
+              itemCount={itemCount}
+              pageCount={pageCount}
+              pageSize={pageSize}
+              onChangePage={onChangePage}
+              onChangePageSize={onChangePageSize}
+            />
+          )}
         </PageSection>
       </PageLayout>
     );

app/src/routes/routesMap.js

@@ -83,7 +83,6 @@ import { fetchLogPageData } from 'controllers/log';
 import { fetchHistoryPageInfoAction } from 'controllers/itemsHistory';
 import { fetchProjectsAction } from 'controllers/administrate/projects';
 import { startSetViewMode } from 'controllers/administrate/projects/actionCreators';
-import { SIZE_KEY } from 'controllers/pagination';
 import { setSessionItem, updateStorageItem } from 'common/utils/storageUtils';
 import { fetchClustersAction } from 'controllers/uniqueErrors';
 import {
@@ -174,11 +173,7 @@ const routesMap = {
   [PROJECT_DASHBOARD_PAGE]: {
     path: '/:projectId/dashboard',
     thunk: (dispatch) => {
-      dispatch(
-        fetchDashboardsAction({
-          [SIZE_KEY]: 300,
-        }),
-      );
+      dispatch(fetchDashboardsAction());
       dispatch(changeVisibilityTypeAction());
     },
   },