From 0db7155e1a21d7f011fc134881e0bb576b876518 Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Mon, 13 Jan 2025 11:18:11 +0100 Subject: [PATCH 01/10] Added comma separato in home --- .../overview/components/last-alerts-stat/last-alerts-stat.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx index cf9258ca81..af544ae865 100644 --- a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx +++ b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx @@ -155,7 +155,7 @@ export function LastAlertsStat({ }} href={discoverLocation} > - {statValue} + {Number(statValue).toLocaleString('en-US')} </EuiLink> </EuiToolTip> } From d42f434e989dd50824a5fd68b40431f44e7f1b8e Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Mon, 13 Jan 2025 15:17:25 +0100 Subject: [PATCH 02/10] Added some number view more --- .../public/components/common/charts/visualizations/legend.tsx | 2 +- plugins/main/public/components/common/tables/table-wz-api.tsx | 4 +++- .../management/cluster/components/overview_cards.tsx | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/plugins/main/public/components/common/charts/visualizations/legend.tsx b/plugins/main/public/components/common/charts/visualizations/legend.tsx index f3a2c6a6e8..a61e5ecfd7 100644 --- a/plugins/main/public/components/common/charts/visualizations/legend.tsx +++ b/plugins/main/public/components/common/charts/visualizations/legend.tsx @@ -24,7 +24,7 @@ export function ChartLegend({ data }: ChartLegendProps) { textOverflow: 'ellipsis', overflow: 'hidden', }} - >{`${label} (${value})`}</div> + >{`${label} (${Number(value).toLocaleString('en-US')})`}</div> ), icon: <EuiIcon type='dot' size='l' color={labelColor} />, ...rest, diff --git a/plugins/main/public/components/common/tables/table-wz-api.tsx b/plugins/main/public/components/common/tables/table-wz-api.tsx index 196b81be8f..2be9f452d1 100644 --- a/plugins/main/public/components/common/tables/table-wz-api.tsx +++ b/plugins/main/public/components/common/tables/table-wz-api.tsx @@ -206,7 +206,9 @@ export function TableWzAPI({ {isLoading ? ( <EuiLoadingSpinner size='s' /> ) : ( - <span>({totalItems})</span> + <span> + ({Number(totalItems).toLocaleString('en-US')}) + </span> )} </h1> </EuiTitle> diff --git a/plugins/main/public/components/management/cluster/components/overview_cards.tsx b/plugins/main/public/components/management/cluster/components/overview_cards.tsx index 5b6db7ac3f..b1524b1518 100644 --- a/plugins/main/public/components/management/cluster/components/overview_cards.tsx +++ b/plugins/main/public/components/management/cluster/components/overview_cards.tsx @@ -155,7 +155,7 @@ export const OverviewCards = ({ onClick={goNodes} style={{ height: 'auto' }} > - {nodesCount} + {Number(nodesCount).toLocaleString('en-US')} </EuiButtonEmpty> </EuiToolTip> ), @@ -187,7 +187,7 @@ export const OverviewCards = ({ onClick={goAgents} style={{ height: 'auto' }} > - {agentsCount} + {Number(agentsCount).toLocaleString('en-US')} </EuiButtonEmpty> </EuiToolTip> ), From 6d682356d4c6e3e3ae68574bc12d20a153f2a498 Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Mon, 13 Jan 2025 17:09:15 +0100 Subject: [PATCH 03/10] Added chagelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78727d9859..4a5b6728e8 100644 --- a/CHANGELOG.md +++ b/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) ## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 08 From 8d28bfdfa50d0a1a4f5d004bdcc34b64402b7f02 Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Mon, 13 Jan 2025 17:22:56 +0100 Subject: [PATCH 04/10] Snapshots updated --- .../overview/components/__snapshots__/stats.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap index 96310fd8a7..44aea8c047 100644 --- a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap +++ b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap @@ -135,7 +135,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(189, 39, 30);" > - - + NaN </a> </span> </p> @@ -180,7 +180,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(254, 197, 20);" > - - + NaN </a> </span> </p> @@ -225,7 +225,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(96, 146, 192);" > - - + NaN </a> </span> </p> @@ -270,7 +270,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(0, 120, 113);" > - - + NaN </a> </span> </p> From 7aa04fb9f8d4cdb3de39af53aba66f3dc2abfeda Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Tue, 14 Jan 2025 09:38:32 +0100 Subject: [PATCH 05/10] Added a conditional to render statValue --- .../overview/components/__snapshots__/stats.test.tsx.snap | 8 ++++---- .../components/last-alerts-stat/last-alerts-stat.tsx | 7 ++++++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap index 44aea8c047..96310fd8a7 100644 --- a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap +++ b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap @@ -135,7 +135,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(189, 39, 30);" > - NaN + - </a> </span> </p> @@ -180,7 +180,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(254, 197, 20);" > - NaN + - </a> </span> </p> @@ -225,7 +225,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(96, 146, 192);" > - NaN + - </a> </span> </p> @@ -270,7 +270,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = ` rel="noreferrer" style="font-weight: normal; color: rgb(0, 120, 113);" > - NaN + - </a> </span> </p> diff --git a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx index af544ae865..e23c2982fd 100644 --- a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx +++ b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx @@ -155,7 +155,12 @@ export function LastAlertsStat({ }} href={discoverLocation} > - {Number(statValue).toLocaleString('en-US')} + { + // statValue can take the value of "-" if countLastAlerts does not exist. + typeof countLastAlerts === 'number' + ? Number(statValue).toLocaleString('en-US') + : statValue + } </EuiLink> </EuiToolTip> } From cfda0bacb348cf00cee8b088ea05f56d60242609 Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Tue, 14 Jan 2025 10:44:23 +0100 Subject: [PATCH 06/10] Create a new funtion to encapsulate it --- .../common/charts/visualizations/legend.tsx | 3 ++- .../components/common/tables/table-wz-api.tsx | 5 ++--- .../cluster/components/overview_cards.tsx | 5 +++-- .../last-alerts-stat/last-alerts-stat.tsx | 3 ++- .../public/react-services/format-number.js | 18 ++++++++++++++++++ 5 files changed, 27 insertions(+), 7 deletions(-) create mode 100644 plugins/main/public/react-services/format-number.js diff --git a/plugins/main/public/components/common/charts/visualizations/legend.tsx b/plugins/main/public/components/common/charts/visualizations/legend.tsx index a61e5ecfd7..b707a16c49 100644 --- a/plugins/main/public/components/common/charts/visualizations/legend.tsx +++ b/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} (${Number(value).toLocaleString('en-US')})`}</div> + >{`${label} (${formatUINumber(value)})`}</div> ), icon: <EuiIcon type='dot' size='l' color={labelColor} />, ...rest, diff --git a/plugins/main/public/components/common/tables/table-wz-api.tsx b/plugins/main/public/components/common/tables/table-wz-api.tsx index 2be9f452d1..202b40bb83 100644 --- a/plugins/main/public/components/common/tables/table-wz-api.tsx +++ b/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,9 +207,7 @@ export function TableWzAPI({ {isLoading ? ( <EuiLoadingSpinner size='s' /> ) : ( - <span> - ({Number(totalItems).toLocaleString('en-US')}) - </span> + <span>({formatUINumber(totalItems)})</span> )} </h1> </EuiTitle> diff --git a/plugins/main/public/components/management/cluster/components/overview_cards.tsx b/plugins/main/public/components/management/cluster/components/overview_cards.tsx index b1524b1518..7379d7d8c5 100644 --- a/plugins/main/public/components/management/cluster/components/overview_cards.tsx +++ b/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' }} > - {Number(nodesCount).toLocaleString('en-US')} + {formatUINumber(nodesCount)} </EuiButtonEmpty> </EuiToolTip> ), @@ -187,7 +188,7 @@ export const OverviewCards = ({ onClick={goAgents} style={{ height: 'auto' }} > - {Number(agentsCount).toLocaleString('en-US')} + {formatUINumber(agentsCount)} </EuiButtonEmpty> </EuiToolTip> ), diff --git a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx index e23c2982fd..901e01374c 100644 --- a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx +++ b/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'; @@ -158,7 +159,7 @@ export function LastAlertsStat({ { // statValue can take the value of "-" if countLastAlerts does not exist. typeof countLastAlerts === 'number' - ? Number(statValue).toLocaleString('en-US') + ? formatUINumber(Number(statValue)) : statValue } </EuiLink> diff --git a/plugins/main/public/react-services/format-number.js b/plugins/main/public/react-services/format-number.js new file mode 100644 index 0000000000..9698efe7aa --- /dev/null +++ b/plugins/main/public/react-services/format-number.js @@ -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(number: number) { + if (typeof number !== 'number') { + return '-'; + } + return Number(number).toLocaleString('en-US'); +} From 3ca68bb8df7787cbbd128fb511571a719af863de Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Tue, 14 Jan 2025 11:23:34 +0100 Subject: [PATCH 07/10] Change js a ts --- .../public/react-services/{format-number.js => format-number.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename plugins/main/public/react-services/{format-number.js => format-number.ts} (100%) diff --git a/plugins/main/public/react-services/format-number.js b/plugins/main/public/react-services/format-number.ts similarity index 100% rename from plugins/main/public/react-services/format-number.js rename to plugins/main/public/react-services/format-number.ts 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 08/10] 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'); + }); +} From 53a77024a22592855e132ffea9c21c3b3d2df61e Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Tue, 14 Jan 2025 14:06:48 +0100 Subject: [PATCH 09/10] Resolve comments --- .../vuls_panel/vuls_welcome_panel.tsx | 3 ++- .../vuls_severity_stat/vuls_severity_stat.tsx | 6 +++--- .../last-alerts-stat/last-alerts-stat.tsx | 7 +------ .../public/react-services/format-number.ts | 18 ++++-------------- 4 files changed, 10 insertions(+), 24 deletions(-) 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 ( <EuiStat className='vuls-severity-stat' - title={formatUIStringWithNumbers(value)} + title={value} description={''} titleElement={statElement} isLoading={isLoading} diff --git a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx index 901e01374c..1ebe5a13a0 100644 --- a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx +++ b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx @@ -156,12 +156,7 @@ export function LastAlertsStat({ }} href={discoverLocation} > - { - // statValue can take the value of "-" if countLastAlerts does not exist. - typeof countLastAlerts === 'number' - ? formatUINumber(Number(statValue)) - : statValue - } + {formatUINumber(Number(statValue))} </EuiLink> </EuiToolTip> } 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'); } From 4ed281e166c53e8dc0584adb6d7e6ceb0779daac Mon Sep 17 00:00:00 2001 From: JuanGarriuz <juan.garcia@wazuh.com> Date: Tue, 14 Jan 2025 14:28:18 +0100 Subject: [PATCH 10/10] Resolve test --- .../components/vuls_severity_stat/vuls_severity_stat.tsx | 1 - .../overview/components/last-alerts-stat/last-alerts-stat.tsx | 2 +- 2 files changed, 1 insertion(+), 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 a5ba3159b7..8796d682d2 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,6 +1,5 @@ import React from 'react'; import { EuiStat, EuiStatProps } from '@elastic/eui'; -import { formatUINumber } from '../../../../../react-services/format-number'; type VulsSeverityStatProps = { value: string; diff --git a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx index 1ebe5a13a0..0e0e4435f4 100644 --- a/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx +++ b/plugins/main/public/controllers/overview/components/last-alerts-stat/last-alerts-stat.tsx @@ -156,7 +156,7 @@ export function LastAlertsStat({ }} href={discoverLocation} > - {formatUINumber(Number(statValue))} + {formatUINumber(statValue)} </EuiLink> </EuiToolTip> }