From 41b31ac7c25a2323b864f90bb1564c1f05ca9d24 Mon Sep 17 00:00:00 2001
From: JuanGarriuz <juan.garcia@wazuh.com>
Date: Tue, 14 Jan 2025 13:36:05 +0100
Subject: [PATCH] Update with a function that add formatted to a string with
 numbers

---
 .../vuls_severity_stat/vuls_severity_stat.tsx          |  5 +++--
 plugins/main/public/react-services/format-number.ts    | 10 ++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/plugins/main/public/components/common/welcome/components/vuls_severity_stat/vuls_severity_stat.tsx b/plugins/main/public/components/common/welcome/components/vuls_severity_stat/vuls_severity_stat.tsx
index 8796d682d2..97979e0033 100644
--- a/plugins/main/public/components/common/welcome/components/vuls_severity_stat/vuls_severity_stat.tsx
+++ b/plugins/main/public/components/common/welcome/components/vuls_severity_stat/vuls_severity_stat.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { EuiStat, EuiStatProps } from '@elastic/eui';
+import { formatUIStringWithNumbers } from '../../../../../react-services/format-number';
 
 type VulsSeverityStatProps = {
-  value: string;
+  value: number;
   color: string;
   textAlign?: EuiStatProps['textAlign'];
   statElement?: EuiStatProps['descriptionElement'];
@@ -19,7 +20,7 @@ export default function VulsSeverityStat({
   return (
     <EuiStat
       className='vuls-severity-stat'
-      title={value}
+      title={formatUIStringWithNumbers(value)}
       description={''}
       titleElement={statElement}
       isLoading={isLoading}
diff --git a/plugins/main/public/react-services/format-number.ts b/plugins/main/public/react-services/format-number.ts
index 9698efe7aa..144d2f1fe4 100644
--- a/plugins/main/public/react-services/format-number.ts
+++ b/plugins/main/public/react-services/format-number.ts
@@ -16,3 +16,13 @@ export function formatUINumber(number: number) {
   }
   return Number(number).toLocaleString('en-US');
 }
+
+export function formatUIStringWithNumbers(value: string) {
+  if (typeof value !== 'string') {
+    return '-';
+  }
+
+  return value.replace(/\d+/g, match => {
+    return Number(match).toLocaleString('en-US');
+  });
+}