[Security Solution] expandable flyout - correctly format alert and do…

…cument count number in the prevalence details table (elastic#165843)
yctercero · Sep 11, 2023 · 5b216c6 · 5b216c6
1 parent 6526280
commit 5b216c6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 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
@@ -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
@@ -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()