Pull request #2337: ADG-9565

Merge in DNS/adguard-home from ADG-9565 to master

Squashed commit of the following:

commit ef92c2e891
Merge: a4364ff7e 91270d0b6
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Jan 29 13:42:29 2025 +0300

    Merge branch 'master' into ADG-9565

commit a4364ff7ed
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Jan 29 13:39:14 2025 +0300

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

CHANGELOG.md

@@ -18,6 +18,12 @@ See also the [v0.107.57 GitHub milestone][ms-v0.107.57].
 NOTE: Add new changes BELOW THIS COMMENT.
 -->
 
+### Fixed
+
+- The formatting of large numbers in the upstream table and query log ([#7590]).
+
+[#7590]: https://github.com/AdguardTeam/AdGuardHome/issues/7590
+
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.
 -->

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))