Pull request 2349: 7583-clients-format

Updates #7583.

* commit 'e9d4e76828261622dfb424c760246a21b73040e8':
  all: upd chlog
  refactor: Format value requests_count on client table
  refactor: Format value clientstats

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
+
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.
 -->

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<AutoClientsProps> {
                     return (
                         <div className="logs__row">
                             <div className="logs__text" title={clientStats}>
-                                <LogsSearchLink search={row.original.ip}>{clientStats}</LogsSearchLink>
+                                <LogsSearchLink search={row.original.ip}>{formatNumber(clientStats)}</LogsSearchLink>
                             </div>
                         </div>
                     );

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';
@@ -300,12 +300,12 @@ const ClientsTable = ({
             sortMethod: (a: any, b: any) => b - a,
             minWidth: 120,
             Cell: (row: any) => {
-                const content = CellWrap(row);
+                let content = CellWrap(row);
 
                 if (!row.value) {
                     return content;
                 }
-
+                content = typeof content === "number" ? formatNumber(content) : content;
                 return <LogsSearchLink search={row.original.name}>{content}</LogsSearchLink>;
             },
         },