diff --git a/CHANGELOG.md b/CHANGELOG.md index 51bb4c40..baf6f568 100644 --- 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 index 73829a1b..225234f6 100644 --- 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" /> diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js index ac243491..50242297 100644 --- 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 index 67a69aec..3f794a1a 100644 --- 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 index debc4fe7..5308c872 100644 --- 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" /> diff --git a/client/src/components/Dashboard/UpstreamAvgTime.js b/client/src/components/Dashboard/UpstreamAvgTime.js index f56b5165..eb198189 100644 --- 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" /> diff --git a/client/src/components/Dashboard/UpstreamResponses.js b/client/src/components/Dashboard/UpstreamResponses.js index 658d7de8..e6cf619f 100644 --- 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" /> diff --git a/client/src/components/Filters/Rewrites/Table.js b/client/src/components/Filters/Rewrites/Table.js index 667f0e51..5b9ea3de 100644 --- 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 index 192af1f6..165c756b 100644 --- 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 index 19f57616..9f65986f 100644 --- 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 index 9e649264..6f5e31ab 100644 --- 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 index 6f14926b..66ad3f51 100644 --- 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',