diff --git a/CHANGELOG.md b/CHANGELOG.md index f08b6993f19..f1e5d85b1d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,12 @@ See also the [v0.107.58 GitHub milestone][ms-v0.107.58]. NOTE: Add new changes BELOW THIS COMMENT. --> +### Fixed + +- The formatting of large numbers in the clients tables on the *Client settings* page ([#7583]). + +[#7583]: https://github.com/AdguardTeam/AdGuardHome/issues/7583 + diff --git a/client/src/components/Settings/Clients/AutoClients.tsx b/client/src/components/Settings/Clients/AutoClients.tsx index f633f76a48e..4f6d8114e22 100644 --- a/client/src/components/Settings/Clients/AutoClients.tsx +++ b/client/src/components/Settings/Clients/AutoClients.tsx @@ -12,7 +12,7 @@ import whoisCell from './whoisCell'; import LogsSearchLink from '../../ui/LogsSearchLink'; -import { sortIp } from '../../../helpers/helpers'; +import { sortIp, formatNumber } from '../../../helpers/helpers'; import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from '../../../helpers/localStorageHelper'; import { TABLES_MIN_ROWS } from '../../../helpers/constants'; @@ -66,7 +66,7 @@ class AutoClients extends Component { return (
- {clientStats} + {formatNumber(clientStats)}
); diff --git a/client/src/components/Settings/Clients/ClientsTable/ClientsTable.tsx b/client/src/components/Settings/Clients/ClientsTable/ClientsTable.tsx index a8888dad1da..b86ce77596d 100644 --- a/client/src/components/Settings/Clients/ClientsTable/ClientsTable.tsx +++ b/client/src/components/Settings/Clients/ClientsTable/ClientsTable.tsx @@ -12,7 +12,7 @@ import ReactTable from 'react-table'; import { getAllBlockedServices, getBlockedServices } from '../../../../actions/services'; import { initSettings } from '../../../../actions'; -import { splitByNewLine, countClientsStatistics, sortIp, getService } from '../../../../helpers/helpers'; +import { splitByNewLine, countClientsStatistics, sortIp, getService, formatNumber } from '../../../../helpers/helpers'; import { MODAL_TYPE, LOCAL_TIMEZONE_VALUE, TABLES_MIN_ROWS } from '../../../../helpers/constants'; import Card from '../../../ui/Card'; @@ -306,12 +306,15 @@ const ClientsTable = ({ sortMethod: (a: any, b: any) => b - a, minWidth: 120, Cell: (row: any) => { - const content = CellWrap(row); - - if (!row.value) { - return content; + let content = row.value; + if (typeof content === "number") { + content = formatNumber(content); + } else { + content = CellWrap(row); } - + if (!content) { + return content; + } return {content}; }, },