Refactor bytes formatting to allow use in our charts

We need a formatting function to use with our charts, so this splits out
a hook from the original react component, allowing our charts to be
formatted as specified in the user's UI settings.

x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.test.tsx

@@ -15,11 +15,12 @@ import { PreferenceFormattedBytesComponent } from '.';
 jest.mock('../../lib/kibana');
 const mockUseUiSetting$ = useUiSetting$ as jest.Mock;
 
+const DEFAULT_BYTES_FORMAT_VALUE = '0,0.[0]b'; // kibana's default for this setting
 const bytes = '2806422';
 
 describe('PreferenceFormattedBytes', () => {
   test('renders correctly against snapshot', () => {
-    mockUseUiSetting$.mockImplementation(() => ['0,0.[0]b']);
+    mockUseUiSetting$.mockImplementation(() => [DEFAULT_BYTES_FORMAT_VALUE]);
     const wrapper = shallow(<PreferenceFormattedBytesComponent value={bytes} />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
@@ -33,14 +34,14 @@ describe('PreferenceFormattedBytes', () => {
   });
 
   test('it renders bytes according to the default format', () => {
-    mockUseUiSetting$.mockImplementation(() => ['0,0.[0]b']);
+    mockUseUiSetting$.mockImplementation(() => [DEFAULT_BYTES_FORMAT_VALUE]);
     const wrapper = mount(<PreferenceFormattedBytesComponent value={bytes} />);
 
     expect(wrapper.text()).toEqual('2.7MB');
   });
 
   test('it renders bytes supplied as a number according to the default format', () => {
-    mockUseUiSetting$.mockImplementation(() => ['0,0.[0]b']);
+    mockUseUiSetting$.mockImplementation(() => [DEFAULT_BYTES_FORMAT_VALUE]);
     const wrapper = mount(<PreferenceFormattedBytesComponent value={+bytes} />);
 
     expect(wrapper.text()).toEqual('2.7MB');

x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.tsx

@@ -10,11 +10,22 @@ import numeral from '@elastic/numeral';
 import { DEFAULT_BYTES_FORMAT } from '../../../common/constants';
 import { useUiSetting$ } from '../../lib/kibana';
 
-export const PreferenceFormattedBytesComponent = ({ value }: { value: string | number }) => {
+type Bytes = string | number;
+
+export const formatBytes = (value: Bytes, format: string) => {
+  return numeral(value).format(format);
+};
+
+export const useFormatBytes = () => {
   const [bytesFormat] = useUiSetting$<string>(DEFAULT_BYTES_FORMAT);
-  return <>{numeral(value).format(bytesFormat)}</>;
+
+  return (value: Bytes) => formatBytes(value, bytesFormat);
 };
 
+export const PreferenceFormattedBytesComponent = ({ value }: { value: Bytes }) => (
+  <>{useFormatBytes()(value)}</>
+);
+
 PreferenceFormattedBytesComponent.displayName = 'PreferenceFormattedBytesComponent';
 
 export const PreferenceFormattedBytes = React.memo(PreferenceFormattedBytesComponent);

x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts

@@ -87,7 +87,3 @@ export const getCustomChartData = (
     }, formattedChartData);
   else return formattedChartData;
 };
-
-export const bytesFormatter = (value: number) => {
-  return numeral(value).format('0,0.[0]b');
-};

x-pack/legacy/plugins/siem/public/components/page/network/dns_histogram/index.tsx

@@ -9,22 +9,23 @@ import React from 'react';
 import { ScaleType } from '@elastic/charts';
 import * as i18n from './translation';
 import { MatrixHistogram } from '../../../matrix_histogram';
-import { bytesFormatter } from '../../../matrix_histogram/utils';
 import { MatrixOverOrdinalHistogramData } from '../../../../graphql/types';
 import { MatrixHistogramBasicProps } from '../../../matrix_histogram/types';
+import { useFormatBytes } from '../../../formatted_bytes';
 
 export const NetworkDnsHistogram = (
   props: MatrixHistogramBasicProps<MatrixOverOrdinalHistogramData>
 ) => {
   const dataKey = 'histogram';
   const { ...matrixOverTimeProps } = props;
+  const formatBytes = useFormatBytes();
 
   return (
     <MatrixHistogram
       title={i18n.NETWORK_DNS_HISTOGRAM}
       dataKey={dataKey}
       scaleType={ScaleType.Ordinal}
-      yTickFormatter={bytesFormatter}
+      yTickFormatter={formatBytes}
       showLegend={false}
       {...matrixOverTimeProps}
     />