From 4751528d690a6464354c7d6163450f929454c4f3 Mon Sep 17 00:00:00 2001
From: Artem Baskal <a.baskal@adguard.com>
Date: Tue, 26 Nov 2019 19:24:22 +0300
Subject: [PATCH 1/2] - client: fix table size and add pagination

---
 client/src/components/Settings/Dhcp/Leases.js             | 3 ++-
 client/src/components/Settings/Dhcp/StaticLeases/index.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Settings/Dhcp/Leases.js b/client/src/components/Settings/Dhcp/Leases.js
index 04935c80..0a61299f 100644
--- a/client/src/components/Settings/Dhcp/Leases.js
+++ b/client/src/components/Settings/Dhcp/Leases.js
@@ -36,7 +36,8 @@ class Leases extends Component {
                         Cell: this.cellWrap,
                     },
                 ]}
-                showPagination={false}
+                pageSize={100}
+                showPagination={true}
                 noDataText={t('dhcp_leases_not_found')}
                 minRows={6}
                 className="-striped -highlight card-table-overflow"
diff --git a/client/src/components/Settings/Dhcp/StaticLeases/index.js b/client/src/components/Settings/Dhcp/StaticLeases/index.js
index e96e806e..a1a3d0b5 100644
--- a/client/src/components/Settings/Dhcp/StaticLeases/index.js
+++ b/client/src/components/Settings/Dhcp/StaticLeases/index.js
@@ -82,7 +82,8 @@ class StaticLeases extends Component {
                             },
                         },
                     ]}
-                    showPagination={false}
+                    pageSize={100}
+                    showPagination={true}
                     noDataText={t('dhcp_static_leases_not_found')}
                     className="-striped -highlight card-table-overflow"
                     minRows={6}

From f446186db146b74cc6af3d29cf53ff69adc26e4f Mon Sep 17 00:00:00 2001
From: Artem Baskal <a.baskal@adguard.com>
Date: Tue, 26 Nov 2019 20:50:02 +0300
Subject: [PATCH 2/2] - client: fix table pagination

---
 client/src/components/Settings/Dhcp/Leases.js        |  6 ++++--
 .../components/Settings/Dhcp/StaticLeases/index.js   | 12 +++++++-----
 client/src/helpers/constants.js                      |  3 +++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Settings/Dhcp/Leases.js b/client/src/components/Settings/Dhcp/Leases.js
index 0a61299f..446b66ca 100644
--- a/client/src/components/Settings/Dhcp/Leases.js
+++ b/client/src/components/Settings/Dhcp/Leases.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { Trans, withNamespaces } from 'react-i18next';
+import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
 
 class Leases extends Component {
     cellWrap = ({ value }) => (
@@ -36,8 +37,9 @@ class Leases extends Component {
                         Cell: this.cellWrap,
                     },
                 ]}
-                pageSize={100}
-                showPagination={true}
+                pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
+                showPageSizeOptions={false}
+                showPagination={leases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
                 noDataText={t('dhcp_leases_not_found')}
                 minRows={6}
                 className="-striped -highlight card-table-overflow"
diff --git a/client/src/components/Settings/Dhcp/StaticLeases/index.js b/client/src/components/Settings/Dhcp/StaticLeases/index.js
index a1a3d0b5..7f146c41 100644
--- a/client/src/components/Settings/Dhcp/StaticLeases/index.js
+++ b/client/src/components/Settings/Dhcp/StaticLeases/index.js
@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { Trans, withNamespaces } from 'react-i18next';
+import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
 
 import Modal from './Modal';
 
@@ -16,7 +17,7 @@ class StaticLeases extends Component {
 
     handleSubmit = (data) => {
         this.props.addStaticLease(data);
-    }
+    };
 
     handleDelete = (ip, mac, hostname = '') => {
         const name = hostname || ip;
@@ -24,7 +25,7 @@ class StaticLeases extends Component {
         if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
             this.props.removeStaticLease({ ip, mac, hostname });
         }
-    }
+    };
 
     render() {
         const {
@@ -74,7 +75,7 @@ class StaticLeases extends Component {
                                             }
                                         >
                                             <svg className="icons">
-                                                <use xlinkHref="#delete" />
+                                                <use xlinkHref="#delete"/>
                                             </svg>
                                         </button>
                                     </div>
@@ -82,8 +83,9 @@ class StaticLeases extends Component {
                             },
                         },
                     ]}
-                    pageSize={100}
-                    showPagination={true}
+                    pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
+                    showPageSizeOptions={false}
+                    showPagination={staticLeases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
                     noDataText={t('dhcp_static_leases_not_found')}
                     className="-striped -highlight card-table-overflow"
                     minRows={6}
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 4abc9bac..fefd9425 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -402,6 +402,9 @@ export const DEFAULT_LOGS_FILTER = {
 export const DEFAULT_LANGUAGE = 'en';
 
 export const TABLE_DEFAULT_PAGE_SIZE = 100;
+
+export const SMALL_TABLE_DEFAULT_PAGE_SIZE = 20;
+
 export const RESPONSE_FILTER = {
     ALL: 'all',
     FILTERED: 'filtered',