Merge branch 'master' into ADG-9415

AdguardTeam · Feb 26, 2025 · 76bf994 · 76bf994
2 parents 2952997 + 0389515
commit 76bf994
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git 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
+
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.
 -->

diff --git 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<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>
                     );

diff --git 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 <LogsSearchLink search={row.original.name}>{content}</LogsSearchLink>;
             },
         },