From 5b216c6ea94e739fea1f161f0bbce5a57ae44c02 Mon Sep 17 00:00:00 2001
From: Philippe Oberti <philippe.oberti@elastic.co>
Date: Mon, 11 Sep 2023 18:14:35 +0200
Subject: [PATCH] [Security Solution] expandable flyout - correctly format
 alert and document count number in the prevalence details table (#165843)

---
 .../components/prevalence_details.test.tsx    | 37 +++++++++++++++++++
 .../left/components/prevalence_details.tsx    |  5 ++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.test.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.test.tsx
index 5c7a900765fe3..95f1345a87330 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.test.tsx
@@ -112,6 +112,43 @@ describe('PrevalenceDetails', () => {
     expect(queryByTestId(`${PREVALENCE_DETAILS_TABLE_TEST_ID}UpSell`)).not.toBeInTheDocument();
   });
 
+  it('should render formatted numbers for the alert and document count columns', () => {
+    (usePrevalence as jest.Mock).mockReturnValue({
+      loading: false,
+      error: false,
+      data: [
+        {
+          field: 'field1',
+          value: 'value1',
+          alertCount: 1000,
+          docCount: 2000000,
+          hostPrevalence: 0.05,
+          userPrevalence: 0.1,
+        },
+      ],
+    });
+
+    const { getByTestId } = render(
+      <TestProviders>
+        <LeftPanelContext.Provider value={panelContextValue}>
+          <PrevalenceDetails />
+        </LeftPanelContext.Provider>
+      </TestProviders>
+    );
+
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_FIELD_CELL_TEST_ID)).toHaveTextContent('field1');
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_VALUE_CELL_TEST_ID)).toHaveTextContent('value1');
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_ALERT_COUNT_CELL_TEST_ID)).toHaveTextContent('1k');
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_DOC_COUNT_CELL_TEST_ID)).toHaveTextContent('2M');
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_HOST_PREVALENCE_CELL_TEST_ID)).toHaveTextContent(
+      '5%'
+    );
+    expect(getByTestId(PREVALENCE_DETAILS_TABLE_USER_PREVALENCE_CELL_TEST_ID)).toHaveTextContent(
+      '10%'
+    );
+  });
+
   it('should render the table with only basic columns if license is not platinum', () => {
     const field1 = 'field1';
     const field2 = 'field2';
diff --git a/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.tsx b/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.tsx
index 11f370e9572a6..c58c138264ef5 100644
--- a/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/left/components/prevalence_details.tsx
@@ -23,6 +23,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { FormattedCount } from '../../../common/components/formatted_number';
 import { useLicense } from '../../../common/hooks/use_license';
 import { InvestigateInTimelineButton } from '../../../common/components/event_details/table/investigate_in_timeline_button';
 import type { PrevalenceData } from '../../shared/hooks/use_prevalence';
@@ -116,7 +117,7 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
           filters={[]}
           timeRange={{ kind: 'absolute', from: data.from, to: data.to }}
         >
-          <>{data.alertCount}</>
+          <FormattedCount count={data.alertCount} />
         </InvestigateInTimelineButton>
       ) : (
         getEmptyTagValue()
@@ -161,7 +162,7 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
           timeRange={{ kind: 'absolute', from: data.from, to: data.to }}
           keepDataView // changing dataview from only detections to include non-alerts docs
         >
-          <>{data.docCount}</>
+          <FormattedCount count={data.docCount} />
         </InvestigateInTimelineButton>
       ) : (
         getEmptyTagValue()