Added comma separators to numbers

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Added
 
 - Support for Wazuh 4.10.1
+- Added comma separators to numbers [#7233](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7233)
 
 ### Changed
 

plugins/main/public/components/common/charts/visualizations/legend.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { EuiIcon } from '@elastic/eui';
 import { EuiListGroup } from '@elastic/eui';
 import './legend.scss';
+import { formatUINumber } from '../../../../react-services/format-number';
 
 type ChartLegendProps = {
   data: {
@@ -24,7 +25,7 @@ export function ChartLegend({ data }: ChartLegendProps) {
           textOverflow: 'ellipsis',
           overflow: 'hidden',
         }}
-      >{`${label} (${value})`}</div>
+      >{`${label} (${formatUINumber(value)})`}</div>
     ),
     icon: <EuiIcon type='dot' size='l' color={labelColor} />,
     ...rest,

plugins/main/public/components/common/tables/table-wz-api.tsx

@@ -27,6 +27,7 @@ import { TableDefault } from './table-default';
 import { WzRequest } from '../../../react-services/wz-request';
 import { ExportTableCsv } from './components/export-table-csv';
 import { useStateStorage } from '../hooks';
+import { formatUINumber } from '../../../react-services/format-number';
 
 /**
  * Search input custom filter button
@@ -206,7 +207,7 @@ export function TableWzAPI({
                     {isLoading ? (
                       <EuiLoadingSpinner size='s' />
                     ) : (
-                      <span>({totalItems})</span>
+                      <span>({formatUINumber(totalItems)})</span>
                     )}
                   </h1>
                 </EuiTitle>

plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx

@@ -29,6 +29,7 @@ import { WzLink } from '../../../../../components/wz-link/wz-link';
 import { withErrorBoundary } from '../../../../common/hocs';
 import { compose } from 'redux';
 import { withVulnerabilitiesStateDataSource } from '../../../../../components/overview/vulnerabilities/common/hocs/validate-vulnerabilities-states-index-pattern';
+import { formatUINumber } from '../../../../../react-services/format-number';
 
 const VulsPanelContent = ({ agent }) => {
   const {
@@ -97,7 +98,7 @@ const VulsPanelContent = ({ agent }) => {
     const value =
       severityStats?.find(v => v.key.toUpperCase() === severity.toUpperCase())
         ?.doc_count || '0';
-    return value ? `${value} ${severity}` : '0';
+    return value ? `${formatUINumber(value)} ${severity}` : '0';
   };
 
   const renderSeverityStats = (severity, index) => {

plugins/main/public/components/management/cluster/components/overview_cards.tsx

@@ -15,6 +15,7 @@ import '../dashboard/cluster_dashboard.scss';
 import { getPlugins } from '../../../../kibana-services';
 import { DiscoverNoResults } from '../../../common/no-results/no-results';
 import { tFilter, tParsedIndexPattern } from '../../../common/data-source';
+import { formatUINumber } from '../../../../react-services/format-number';
 
 interface OverviewCardsProps {
   goAgents: () => void;
@@ -155,7 +156,7 @@ export const OverviewCards = ({
                         onClick={goNodes}
                         style={{ height: 'auto' }}
                       >
-                        {nodesCount}
+                        {formatUINumber(nodesCount)}
                       </EuiButtonEmpty>
                     </EuiToolTip>
                   ),
@@ -187,7 +188,7 @@ export const OverviewCards = ({
                         onClick={goAgents}
                         style={{ height: 'auto' }}
                       >
-                        {agentsCount}
+                        {formatUINumber(agentsCount)}
                       </EuiButtonEmpty>
                     </EuiToolTip>
                   ),

plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx

@@ -20,6 +20,7 @@ import {
   FILTER_OPERATOR,
   PatternDataSourceFilterManager,
 } from '../../../../components/common/data-source/pattern/pattern-data-source-filter-manager';
+import { formatUINumber } from '../../../../react-services/format-number';
 
 type SeverityKey = 'low' | 'medium' | 'high' | 'critical';
 
@@ -155,7 +156,7 @@ export function LastAlertsStat({
                 }}
                 href={discoverLocation}
               >
-                {statValue}
+                {formatUINumber(statValue)}
               </EuiLink>
             </EuiToolTip>
           }

plugins/main/public/react-services/format-number.ts

@@ -0,0 +1,18 @@
+/*
+ * Wazuh app - Time and date functions
+ * Copyright (C) 2015-2022 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+export function formatUINumber(value) {
+  if (Number.isNaN(Number(value))) {
+    return value;
+  }
+  return Number(value).toLocaleString('en-US');
+}