[SIEM] Formats the bytes columns in timeline

[stephmilovic]

Summary

Formats bytes in Timeline and TimelineDetails using the format value from getAllFieldsByName with the new PreferenceFormattedBytes component. https://github.com/elastic/siem-team/issues/341

Before:

After:

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/siem

[stephmilovic]

So far this PR only formats timeline columns with fields that end in .bytes. It does not include bytes fields like bytes_in, bytes_out, zeek.files.seen_bytes, suricata.eve.flow, mysql.slowlog.bytes_sent, etc... there are a lot of misc fields like this that I have not been able to populate data for, so I am hesitant to apply this fix to any field with bytes in the name without seeing what the data looks like... that's why I went with .bytes as the last key. If we can confirm that any field with bytes in the name should be formatted as bytes, I can update this PR to do that. Please let me know @cwurm @tsg

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cwurm]

We ship with a hardcoded ECS schema in the SIEM app, can we use that? It contains formatting information, e.g. for source.bytes:

kibana/x-pack/legacy/plugins/siem/server/utils/beat_schema/8.0.0/packetbeat.ts

Lines 1720 to 1727 in 2d81859

	{
	name: 'bytes',
	level: 'core',
	type: 'long',
	format: 'bytes',
	example: 184,
	description: 'Bytes sent from the source to the destination.',
	},

That way, we could keep the number of places where we hardcode things to a minimum.

The rest of Kibana uses index patterns for formatting information, and I wish we could do the same, but we don't rely on index patterns in the SIEM app (maybe we should, but that would be a bigger change).

[XavierM]

I think that with the fields browser, we should be able to do exactly what @cwurm is talking about since it is a mix of the ECS schema and index pattern.

[stephmilovic]

@cwurm @XavierM perfect, I'll work on piping that format value through and determining bytes display based off of that

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[andrew-goldstein]

Thanks for adding this feature @stephmilovic , and for fixing the flag issue!

For consistency with the special formatting applied to dates and IP addresses, would you be willing to also apply the new bytes formatting to the fields shown in an expanded timeline event, per the screenshot below?

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[andrew-goldstein]

🙏 @stephmilovic for the additional formatting in the expanded events

ran it locally and it works great 💥

LGTM

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request