ADG-9565 format large numbers in the upstream table and query log

CHANGELOG.md

@@ -32,12 +32,15 @@ NOTE: Add new changes BELOW THIS COMMENT.
 
 ### Fixed
 
+- The formatting of large numbers in the upstream table and query log ([#7590]).
+
 - Request count link in the clients table ([#7513]).
 
 - The formatting of large numbers on the dashboard ([#7329]).
 
 [#7513]: https://github.com/AdguardTeam/AdGuardHome/issues/7513
 [#7329]: https://github.com/AdguardTeam/AdGuardHome/issues/7329
+[#7590]: https://github.com/AdguardTeam/AdGuardHome/issues/7329
 
 [go-1.23.5]: https://groups.google.com/g/golang-announce/c/sSaUhLA-2SI
 

client/src/components/Dashboard/UpstreamAvgTime.tsx

@@ -10,6 +10,7 @@ import Card from '../ui/Card';
 
 import DomainCell from './DomainCell';
 import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, TABLES_MIN_ROWS } from '../../helpers/constants';
+import { formatNumber } from '../../helpers/helpers';
 
 interface TimeCellProps {
     value?: string | number;
@@ -20,7 +21,7 @@ const TimeCell = ({ value }: TimeCellProps) => {
         return '–';
     }
 
-    const valueInMilliseconds = round(Number(value) * 1000);
+    const valueInMilliseconds = formatNumber(round(Number(value) * 1000));
 
     return (
         <div className="logs__row o-hidden">

client/src/helpers/helpers.tsx

@@ -453,7 +453,7 @@ export const getParamsForClientsSearch = (data: any, param: any, additionalParam
     });
 
     return {
-        clients: Array.from(clients).map(id => ({ id })),
+        clients: Array.from(clients).map((id) => ({ id })),
     };
 };
 
@@ -670,9 +670,16 @@ export const countClientsStatistics = (ids: any, autoClients: any) => {
  * @param {function} t translate
  * @returns {string}
  */
-export const formatElapsedMs = (elapsedMs: any, t: any) => {
-    const formattedElapsedMs = parseInt(elapsedMs, 10) || parseFloat(elapsedMs).toFixed(2);
-    return `${formattedElapsedMs} ${t('milliseconds_abbreviation')}`;
+export const formatElapsedMs = (elapsedMs: string, t: (key: string) => string) => {
+    const parsedElapsedMs = parseInt(elapsedMs, 10);
+
+    if (Number.isNaN(parsedElapsedMs)) {
+        return elapsedMs;
+    }
+
+    const formattedMs = formatNumber(parsedElapsedMs);
+
+    return `${formattedMs} ${t('milliseconds_abbreviation')}`;
 };
 
 /**
@@ -754,12 +761,9 @@ type NestedObject = {
     order: number;
 };
 
-export const getObjectKeysSorted = <
-    T extends Record<string, NestedObject>,
-    K extends keyof NestedObject
->(
+export const getObjectKeysSorted = <T extends Record<string, NestedObject>, K extends keyof NestedObject>(
     object: T,
-    sortKey: K
+    sortKey: K,
 ): string[] => {
     return Object.entries(object)
         .sort(([, a], [, b]) => (a[sortKey] as number) - (b[sortKey] as number))