[Security Solution][Detections] Table UI: consistent dates

[banderror]

Summary

We have at least 3 different date formats used in our tables:

It would be nice to end up having dates consistently rendered across our app, including dates displayed in table cells.

Date formats should follow a guideline as below:

• If less than 24 hours, display relative dates (i.e. “5 minutes ago) with a more detailed hover tooltip up until 24 hours
• If more than 24 hours, we write the default format (xx.xx.xx), where is taken from Kibana settings https://www.elastic.co/guide/en/kibana/master/advanced-options.html#kibana-general-settings, field dateFormat + a more detailed hover tooltip

Default format(xx.xx.xx) is taken from Kibana settings https://www.elastic.co/guide/en/kibana/master/advanced-options.html#kibana-general-settings, field dateFormat.

Acceptance Criteria

• Dates look consistently in Rule Management, Rule Monitoring and Exceptions tables.
• This is implemented via a common component for rendering a date. This generic component can be parameterized by the format in which to render a date, and the list of supported formats is limited to only those that we decided to use.
• We have a written design guideline for displaying dates in the app - here

[elasticmachine]

Pinging @elastic/security-detections-response (Team:Detections and Resp)

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[yiyangliu9286]

This is a great proposal and agree that we should align on the date format that is in the table cell across Security tables. Here are the aligned general direction from the Security UX team on how we should treat the date format in the table cell in Security:

For the general guidance for Date format in Security app's tables (unless there are exceptions for specific request for displaying accurate Timestamp like the Alerts table), we do (dee detail in this audit doc):

• If less than 24 hours, display relative dates (i.e. “5 minutes ago) with a more detailed hover tooltip up until 24 hours
• If more than 24 hours, we write the date (xx.xx.xx) again with a more detailed hover tooltip

cc: @jethr0null

[vitaliidm]

As discussed with @banderror a good starting point for design guideline would be security-team repo: https://github.com/elastic/security-team/pull/2104

[banderror]

@yiyangliu9286 could you please clarify what do you mean by the xx.xx.xx format? Is it DD.MM.YY or MM.DD.YY or something else?

Should we render datetime values as short dates in cells, but as a full date+time in tooltips? Currently it seems like we render date+time+milliseconds in some cases in cells.

[vitaliidm]

@yiyangliu9286 , @banderror currently default displayed date format is a format from Kibana configuration
https://www.elastic.co/guide/en/kibana/master/advanced-options.html#kibana-general-settings, field dateFormat (thanks to @spong for pointing it out).
Which is by default looks like that MMM D, YYYY @ HH:mm:ss.SSS and is using right now in table.
User can configure it to look like differently, but in current default state it looks as quite long string. So, it probably will be truncated in some columns, properly with ellipsis and tooltip, so don't see a big issue here.

So, regarding format xx.xx.xx, mentioned by Georgii in a comment above:

• shall we just use default configurable by user format, long one, but which can be easily truncated?
• or shall we render some custom/hardcoded format? Regarding 'xx.xx.xx', if it's actual format, it looks like it can be confused with 'DD.MM.YY'/'MM.DD.YY' depends on a user location.

I think sticking to default, configurable format is the best way to proceed. What would be in your opinion the way to go?

[yiyangliu9286]

@vitaliidm @banderror Agreeing that we should stick to default, configurable format MMM D, YYYY @ HH:mm:ss.SSS with the truncation ellipsis and tooltip is the best way to proceed (thanks @spong for pointing out the resources!).

So I think design wise based on the current format, we just need to add truncation ... to avoid the long date format being cuts off for this UI enhancement for this issue.

[banderror]

Addressed in #117643 and https://github.com/elastic/security-team/pull/2104