Pull request: 6180 fix dashboard tables scroll

Updates AdguardTeam#6180 Squashed commit of the following: commit eee7fa3 Author: Ildar Kamalov <ik@adguard.com> Date: Tue Oct 17 11:47:41 2023 +0300 fix scroll commit 0a86a1a Merge: 07f4550 413f484 Author: Ildar Kamalov <ik@adguard.com> Date: Tue Oct 17 10:27:29 2023 +0300 Merge branch 'master' into ADG-7473-1 commit 07f4550 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Oct 13 17:41:47 2023 +0300 changelog commit 28a1a73 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Oct 13 16:13:59 2023 +0300 overflow commit aa38288 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Oct 13 16:09:05 2023 +0300 firefox scroll commit ac98653 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Oct 13 16:06:49 2023 +0300 constants commit a3cdd0a Merge: 0cd8481 506d713 Author: Ildar Kamalov <ik@adguard.com> Date: Fri Oct 13 16:03:16 2023 +0300 Merge branch 'master' into ADG-7473-1 commit 0cd8481 Author: Ildar Kamalov <ik@adguard.com> Date: Thu Oct 12 11:13:14 2023 +0300 changelog commit ed67807 Author: Ildar Kamalov <ik@adguard.com> Date: Thu Oct 12 11:00:23 2023 +0300 fix rows commit 5e4f35c Author: Ildar Kamalov <ik@adguard.com> Date: Thu Oct 12 10:58:58 2023 +0300 ADG-7473 fix dashboard tables scroll
annguyen0 · Nov 27, 2023 · fd69bd6 · fd69bd6
1 parent d1e969c
commit fd69bd6
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,11 +29,15 @@ NOTE: Add new changes BELOW THIS COMMENT.
 
 ### Fixed
 
+- Dashboard tables scroll issue ([#6180]).
+- Issues with QUIC and HTTP/3 upstreams on FreeBSD ([#6301]).
+- Panic on clearing query log ([#6304]).
 - The time shown in the statistics is one hour less than the current time ([#6296]).
 - Issues with QUIC and HTTP/3 upstreams on FreeBSD ([#6301]).
 - Panic on clearing query log ([#6304]).
 
 [#684]: https://github.com/AdguardTeam/AdGuardHome/issues/684
+[#6180]: https://github.com/AdguardTeam/AdGuardHome/issues/6180
 [#6296]: https://github.com/AdguardTeam/AdGuardHome/issues/6296
 [#6301]: https://github.com/AdguardTeam/AdGuardHome/issues/6301
 [#6304]: https://github.com/AdguardTeam/AdGuardHome/issues/6304

diff --git a/client/src/components/Dashboard/BlockedDomains.js b/client/src/components/Dashboard/BlockedDomains.js
@@ -8,7 +8,7 @@ import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';
 
 import { getPercent } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
 
 const CountCell = (totalBlocked) => function cell(row) {
     const { value } = row;
@@ -62,8 +62,8 @@ const BlockedDomains = ({
                 ]}
                 showPagination={false}
                 noDataText={t('no_domains_found')}
-                minRows={6}
-                defaultPageSize={100}
+                minRows={TABLES_MIN_ROWS}
+                defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
                 className="-highlight card-table-overflow--limited stats__table"
             />
         </Card>

diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js
@@ -9,7 +9,12 @@ import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
 import { getPercent, sortIp } from '../../helpers/helpers';
-import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
+import {
+    BLOCK_ACTIONS,
+    DASHBOARD_TABLES_DEFAULT_PAGE_SIZE,
+    STATUS_COLORS,
+    TABLES_MIN_ROWS,
+} from '../../helpers/constants';
 import { toggleClientBlock } from '../../actions/access';
 import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
 import { getStats } from '../../actions/stats';
@@ -159,8 +164,8 @@ const Clients = ({
                 ]}
                 showPagination={false}
                 noDataText={t('no_clients_found')}
-                minRows={6}
-                defaultPageSize={100}
+                minRows={TABLES_MIN_ROWS}
+                defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
                 className="-highlight card-table-overflow--limited clients__table"
                 getTrProps={(_state, rowInfo) => {
                     if (!rowInfo) {

diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css
@@ -34,7 +34,8 @@
 }
 
 .table__action .btn-icon {
-    margin: 2px;
+    outline: 0;
+    box-shadow: none;
 }
 
 .page-title--dashboard {

diff --git a/client/src/components/Dashboard/QueriedDomains.js b/client/src/components/Dashboard/QueriedDomains.js
@@ -7,7 +7,7 @@ import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';
 
-import { STATUS_COLORS } from '../../helpers/constants';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
 import { getPercent } from '../../helpers/helpers';
 
 const getQueriedPercentColor = (percent) => {
@@ -58,8 +58,8 @@ const QueriedDomains = ({
             ]}
             showPagination={false}
             noDataText={t('no_domains_found')}
-            minRows={6}
-            defaultPageSize={100}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
             className="-highlight card-table-overflow--limited stats__table"
         />
     </Card>

diff --git a/client/src/components/Dashboard/UpstreamAvgTime.js b/client/src/components/Dashboard/UpstreamAvgTime.js
@@ -6,6 +6,7 @@ import { withTranslation, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
 import DomainCell from './DomainCell';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, TABLES_MIN_ROWS } from '../../helpers/constants';
 
 const TimeCell = ({ value }) => {
     if (!value) {
@@ -62,8 +63,8 @@ const UpstreamAvgTime = ({
             ]}
             showPagination={false}
             noDataText={t('no_upstreams_data_found')}
-            minRows={6}
-            defaultPageSize={100}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
             className="-highlight card-table-overflow--limited stats__table"
         />
     </Card>

diff --git a/client/src/components/Dashboard/UpstreamResponses.js b/client/src/components/Dashboard/UpstreamResponses.js
@@ -8,7 +8,7 @@ import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';
 
 import { getPercent } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
 
 const CountCell = (totalBlocked) => (
     function cell(row) {
@@ -64,8 +64,8 @@ const UpstreamResponses = ({
             ]}
             showPagination={false}
             noDataText={t('no_upstreams_data_found')}
-            minRows={6}
-            defaultPageSize={100}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
             className="-highlight card-table-overflow--limited stats__table"
         />
     </Card>

diff --git a/client/src/components/Filters/Rewrites/Table.js b/client/src/components/Filters/Rewrites/Table.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
 import { withTranslation } from 'react-i18next';
 import { sortIp } from '../../../helpers/helpers';
-import { MODAL_TYPE } from '../../../helpers/constants';
+import { MODAL_TYPE, TABLES_MIN_ROWS } from '../../../helpers/constants';
 import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
 
 class Table extends Component {
@@ -88,7 +88,7 @@ class Table extends Component {
                 showPagination
                 defaultPageSize={LocalStorageHelper.getItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE) || 10}
                 onPageSizeChange={(size) => LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.REWRITES_PAGE_SIZE, size)}
-                minRows={5}
+                minRows={TABLES_MIN_ROWS}
                 ofText="/"
                 previousText={t('previous_btn')}
                 nextText={t('next_btn')}

diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js
@@ -10,6 +10,7 @@ import whoisCell from './whoisCell';
 import LogsSearchLink from '../../ui/LogsSearchLink';
 import { sortIp } from '../../../helpers/helpers';
 import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper';
+import { TABLES_MIN_ROWS } from '../../../helpers/constants';
 
 const COLUMN_MIN_WIDTH = 200;
 
@@ -90,7 +91,7 @@ class AutoClients extends Component {
                     onPageSizeChange={(size) => (
                         LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.AUTO_CLIENTS_PAGE_SIZE, size)
                     )}
-                    minRows={5}
+                    minRows={TABLES_MIN_ROWS}
                     ofText="/"
                     previousText={t('previous_btn')}
                     nextText={t('next_btn')}

diff --git a/client/src/components/Settings/Clients/ClientsTable/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable/ClientsTable.js
@@ -14,7 +14,7 @@ import {
     sortIp,
     getService,
 } from '../../../../helpers/helpers';
-import { MODAL_TYPE, LOCAL_TIMEZONE_VALUE } from '../../../../helpers/constants';
+import { MODAL_TYPE, LOCAL_TIMEZONE_VALUE, TABLES_MIN_ROWS } from '../../../../helpers/constants';
 import Card from '../../../ui/Card';
 import CellWrap from '../../../ui/CellWrap';
 import LogsSearchLink from '../../../ui/LogsSearchLink';
@@ -347,7 +347,7 @@ const ClientsTable = ({
                     onPageSizeChange={(size) => (
                         LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.CLIENTS_PAGE_SIZE, size)
                     )}
-                    minRows={5}
+                    minRows={TABLES_MIN_ROWS}
                     ofText="/"
                     previousText={t('previous_btn')}
                     nextText={t('next_btn')}

diff --git a/client/src/components/ui/Card.css b/client/src/components/ui/Card.css
@@ -2,6 +2,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0.6rem 1.5rem;
+    flex-shrink: 0;
 }
 
 .card-subtitle {
@@ -19,8 +20,16 @@
     max-height: 17.5rem;
 }
 
+.dashboard .card-table {
+    overflow: hidden;
+}
+
 .dashboard .card-table-overflow--limited {
-    max-height: 18rem;
+    max-height: 292px;
+}
+
+.dashboard .ReactTable .rt-tr-group {
+    min-height: 52px;
 }
 
 .card-actions {
@@ -125,7 +134,7 @@
 
 @media (min-width: 992px) {
     .dashboard .card:not(.card--full) {
-        height: 22rem;
+        height: 360px;
     }
 }
 

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -555,6 +555,10 @@ export const DISABLE_PROTECTION_TIMINGS = {
 
 export const LOCAL_TIMEZONE_VALUE = 'Local';
 
+export const TABLES_MIN_ROWS = 5;
+
+export const DASHBOARD_TABLES_DEFAULT_PAGE_SIZE = 100;
+
 export const TIME_UNITS = {
     HOURS: 'hours',
     DAYS: 'days',