[Security Solution][Resolver] Pill numbers in compact notation

x-pack/plugins/security_solution/public/resolver/view/submenu.test.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { compactNotationParts } from './submenu';
+
+describe('The Resolver node pills number presentation', () => {
+  describe('When given a small number under 1000', () => {
+    it('does not change the presentation of small numbers', () => {
+      expect(compactNotationParts(1)).toEqual([1, '', '']);
+      expect(compactNotationParts(100)).toEqual([100, '', '']);
+      expect(compactNotationParts(999)).toEqual([999, '', '']);
+    });
+  });
+  describe('When given a number greater or equal to 1000 but less than 1000000', () => {
+    it('presents the number as untis of k', () => {
+      expect(compactNotationParts(1000)).toEqual([1, 'k', '']);
+      expect(compactNotationParts(1001)).toEqual([1, 'k', '+']);
+      expect(compactNotationParts(10000)).toEqual([10, 'k', '']);
+      expect(compactNotationParts(10001)).toEqual([10, 'k', '+']);
+      expect(compactNotationParts(999999)).toEqual([999, 'k', '+']);
+    });
+  });
+  describe('When given a number greater or equal to 1000000 but less than 1000000000', () => {
+    it('presents the number as untis of M', () => {
+      expect(compactNotationParts(1000000)).toEqual([1, 'M', '']);
+      expect(compactNotationParts(1000001)).toEqual([1, 'M', '+']);
+      expect(compactNotationParts(10000000)).toEqual([10, 'M', '']);
+      expect(compactNotationParts(10000001)).toEqual([10, 'M', '+']);
+      expect(compactNotationParts(999999999)).toEqual([999, 'M', '+']);
+    });
+  });
+  describe('When given a number greater or equal to 1000000000 but less than 1000000000000', () => {
+    it('presents the number as untis of B', () => {
+      expect(compactNotationParts(1000000000)).toEqual([1, 'B', '']);
+      expect(compactNotationParts(1000000001)).toEqual([1, 'B', '+']);
+      expect(compactNotationParts(10000000000)).toEqual([10, 'B', '']);
+      expect(compactNotationParts(10000000001)).toEqual([10, 'B', '+']);
+      expect(compactNotationParts(999999999999)).toEqual([999, 'B', '+']);
+    });
+  });
+  describe('When given a number greater or equal to 1000000000000', () => {
+    it('presents the number as untis of T', () => {
+      expect(compactNotationParts(1000000000000)).toEqual([1, 'T', '']);
+      expect(compactNotationParts(1000000000001)).toEqual([1, 'T', '+']);
+      expect(compactNotationParts(10000000000000)).toEqual([10, 'T', '']);
+      expect(compactNotationParts(10000000000001)).toEqual([10, 'T', '+']);
+      expect(compactNotationParts(999999999999999)).toEqual([999, 'T', '+']);
+      expect(compactNotationParts(9999999999999990)).toEqual([9999, 'T', '+']);
+    });
+  });
+});

x-pack/plugins/security_solution/public/resolver/view/submenu.tsx

@@ -6,6 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { EuiI18nNumber } from '@elastic/eui';
 import { ResolverNodeStats } from '../../../common/endpoint/types';
 import { useRelatedEventByCategoryNavigation } from './use_related_event_by_category_navigation';
@@ -39,6 +40,49 @@ interface ResolverSubmenuOption {
   prefix?: number | JSX.Element;
 }
 
+/**
+ * Until browser support accomodates the `notation="compact"` feature of Intl.NumberFormat...
+ * exported for testing
+ * @param num The number to format
+ * @returns [mantissa ("12" in "12k+"), Scalar of compact notation (k,M,B,T), remainder indicator ("+" in "12k+")]
+ */
+export function compactNotationParts(num: number): [number, string, string] {
+  if (!Number.isFinite(num)) {
+    return [num, '', ''];
+  }
+
+  const scale = Math.pow(10, 3 * Math.min(Math.floor(Math.floor(Math.log10(num)) / 3), 4));
+
+  const compactPrefixTranslations = {
+    compactThousands: i18n.translate('xpack.securitySolution.endpoint.resolver.compactThousands', {
+      defaultMessage: 'k',
+    }),
+    compactMillions: i18n.translate('xpack.securitySolution.endpoint.resolver.compactMillions', {
+      defaultMessage: 'M',
+    }),
+
+    compactBillions: i18n.translate('xpack.securitySolution.endpoint.resolver.compactBillions', {
+      defaultMessage: 'B',
+    }),
+
+    compactTrillions: i18n.translate('xpack.securitySolution.endpoint.resolver.compactTrillions', {
+      defaultMessage: 'T',
+    }),
+  };
+  const prefixMap: Map<number, string> = new Map([
+    [1, ''],
+    [1000, compactPrefixTranslations.compactThousands],
+    [1000000, compactPrefixTranslations.compactMillions],
+    [1000000000, compactPrefixTranslations.compactBillions],
+    [1000000000000, compactPrefixTranslations.compactTrillions],
+  ]);
+  const hasRemainder = i18n.translate('xpack.securitySolution.endpoint.resolver.compactOverflow', {
+    defaultMessage: '+',
+  });
+  const prefix = prefixMap.get(scale) ?? '';
+  return [Math.floor(num / scale), prefix, (num / scale) % 1 > Number.EPSILON ? hasRemainder : ''];
+}
+
 export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string;
 
 /**
@@ -70,8 +114,17 @@ export const NodeSubMenuComponents = React.memo(
         return [];
       } else {
         return Object.entries(relatedEventStats.events.byCategory).map(([category, total]) => {
+          const [mantissa, scale, hasRemainder] = compactNotationParts(total || 0);
+          const prefix = (
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.node.pillNumber"
+              description=""
+              defaultMessage="{mantissa}{scale}{hasRemainder}"
+              values={{ mantissa: <EuiI18nNumber value={mantissa} />, scale, hasRemainder }}
+            />
+          );
           return {
-            prefix: <EuiI18nNumber value={total || 0} />,
+            prefix,
             optionTitle: category,
             action: () => relatedEventCallbacks(category),
           };