[SIEM] Format bytes columns in timeline (elastic#43147) (elastic#43478)

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { mount } from 'enzyme';
+import * as React from 'react';
+
+import { TestProviders } from '../../mock';
+import { PreferenceFormattedBytes } from '../formatted_bytes';
+
+import { Bytes } from '.';
+
+describe('Bytes', () => {
+  test('it renders the expected formatted bytes', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Bytes contextId="test" eventId="abc" fieldName="network.bytes" value={`1234567`} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(PreferenceFormattedBytes)
+        .first()
+        .text()
+    ).toEqual('1.177MB');
+  });
+});

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

@@ -0,0 +1,35 @@
+/*
+ * 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 * as React from 'react';
+
+import { DefaultDraggable } from '../draggables';
+import { PreferenceFormattedBytes } from '../formatted_bytes';
+
+export const BYTES_FORMAT = 'bytes';
+
+/**
+ * Renders draggable text containing the value of a field representing a
+ * duration of time, (e.g. `event.duration`)
+ */
+export const Bytes = React.memo<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  value?: string | null;
+}>(({ contextId, eventId, fieldName, value }) => (
+  <DefaultDraggable
+    id={`${contextId}-${eventId}-${fieldName}-${value}`}
+    name={name}
+    field={fieldName}
+    tooltipContent={null}
+    value={value}
+  >
+    <PreferenceFormattedBytes value={`${value}`} />
+  </DefaultDraggable>
+));
+
+Bytes.displayName = 'Bytes';