diff --git a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx index fcd13c4d8c..b8be878677 100644 --- a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx +++ b/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) => { 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 97979e0033..a5ba3159b7 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,9 +1,9 @@ import React from 'react'; import { EuiStat, EuiStatProps } from '@elastic/eui'; -import { formatUIStringWithNumbers } from '../../../../../react-services/format-number'; +import { formatUINumber } from '../../../../../react-services/format-number'; type VulsSeverityStatProps = { - value: number; + value: string; color: string; textAlign?: EuiStatProps['textAlign']; statElement?: EuiStatProps['descriptionElement']; @@ -20,7 +20,7 @@ export default function VulsSeverityStat({ return ( - { - // statValue can take the value of "-" if countLastAlerts does not exist. - typeof countLastAlerts === 'number' - ? formatUINumber(Number(statValue)) - : statValue - } + {formatUINumber(Number(statValue))} } diff --git a/plugins/main/public/react-services/format-number.ts b/plugins/main/public/react-services/format-number.ts index 144d2f1fe4..2d065407c4 100644 --- a/plugins/main/public/react-services/format-number.ts +++ b/plugins/main/public/react-services/format-number.ts @@ -10,19 +10,9 @@ * Find more information about this on the LICENSE file. */ -export function formatUINumber(number: number) { - if (typeof number !== 'number') { - return '-'; +export function formatUINumber(value) { + if (Number.isNaN(Number(value))) { + return value; } - 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'); - }); + return Number(value).toLocaleString('en-US'); }