[SIEM] Table columns, number related design tweaks #48969

stephmilovic · 2019-10-22T19:34:26Z

Summary

I realized I still had a couple issues open from the Product Design Meta I opened in April, so thought I'd get those small changes in.

Resolves https://github.com/elastic/siem-team/issues/253

Updated the relative times to timestamps in the Authentications Table

Resolves https://github.com/elastic/siem-team/issues/254

Right aligns numeral values in the Uncommon Processes Table and the DNS Table
I decided not to right align the draggable numeral values in the Auth table, it looked funky as the handles didn't line up

I also set the width on a few of these numeral value in some of the more crowded tables, I think it looks a bit better but I want to see what @MichaelMarcialis thinks.

Auth Table
Before:

After:

Uncommon Processes Table
Before:

After:

DNS Table
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 · 2019-10-22T19:34:28Z

Pinging @elastic/siem (Team:SIEM)

MichaelMarcialis · 2019-10-22T20:00:04Z

While testing locally, it looks like relative time has been completely removed or is not working. Ideally, it would show relative time if it is within the last hour. If not, then it would switch to absolute time.

MichaelMarcialis

Thanks for taking care of this @stephmilovic. It's looking good. Left two small comments. Once updated, I can give it a LGTM :)

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx

elasticmachine · 2019-10-22T20:48:26Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: ba66386

elasticmachine · 2019-10-22T22:44:12Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: d189ea3

stephmilovic · 2019-10-22T22:59:44Z

Pushed a change to do relative time in past hour @MichaelMarcialis. Is there anywhere else besides the Auth table that you want to see this?

elasticmachine · 2019-10-23T00:19:42Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 206a426

MichaelMarcialis · 2019-10-23T00:29:34Z

Pushed a change to do relative time in past hour @MichaelMarcialis. Is there anywhere else besides the Auth table that you want to see this?

Thanks, @stephmilovic. If we're talking about just the hosts and host details pages, I'd say we'd want that same relative/absolute time behavior on:

Hosts & Host Details Pages
- Header (Last event subtitle)
- Anomalies table (Timestamp)
Hosts Page
- All hosts table (Last seen)
Host Details Page
- Host details overview (First seen, Last seen)

If we're talking globally across SIEM, we'll probably want it to also behave this way on:

Network & IP Details Pages
- Header (Last event subtitle)
- Anomalies table (Timestamp)
IP Details Page
- Overview (First seen, Last seen)
Timelines Page
- All timelines table (Last modified)

Also, if we are indeed talking globally across SIEM, I imagine we'll want the following number-based table columns to also be right-aligned to match:

Network Page
- Top DNS domains table (Total queries, Unique domains, DNS bytes in, DNS bytes out)
IP Details Page
- Users table (Document count)

stephmilovic · 2019-10-23T18:09:02Z

@MichaelMarcialis all your requested changes have been made. Some more screenshots:

MichaelMarcialis

This all looks great to me. Thanks, @stephmilovic!

elasticmachine · 2019-10-23T19:30:26Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: bf5ad49

elasticmachine · 2019-10-23T20:54:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 1e3562e

elasticmachine · 2019-10-23T21:47:55Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: ce9d987

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

spong · 2019-10-23T22:26:55Z

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

+ * - the raw date value (e.g. 2019-03-22T00:47:46Z)
+ */
+
+export const FormattedRelativePreferenceDate = ({ value }: { value?: string | number | null }) => {


ToFormattedRelativePreferenceDate or to RelativeFormattedPreferenceDate? That is the question!

Seems there's some dispute around if the Age modifier should be before or after Shape. Good to know us engineers aren't the only ones that care deeply about specificity... 😅

(I just learned this recently, so just a shameless plug for that wiki article -- no change necessary!)

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

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx

spong

Thanks for all these awesome fixes @stephmilovic! Checked out, tested locally, and performed a code review. Added a few infotainment comments, but no changes necessary. LGTM! 👍

elasticmachine · 2019-10-24T21:50:34Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 07043d1

few table design changes

ba66386

stephmilovic added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.5.0 labels Oct 22, 2019

stephmilovic requested a review from MichaelMarcialis October 22, 2019 19:34

MichaelMarcialis requested changes Oct 22, 2019

View reviewed changes

x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx Outdated Show resolved Hide resolved

change from 5% to 8%

d189ea3

relative time in last hour

206a426

stephmilovic added 2 commits October 23, 2019 11:59

updates to timestamp

5f57182

get rid of repetitive code

021af2f

stephmilovic added 2 commits October 23, 2019 12:11

readd field renderer

33546ee

merge conflicts

bf5ad49

MichaelMarcialis approved these changes Oct 23, 2019

View reviewed changes

blerg type fix

2cbfd3c

stephmilovic added 2 commits October 23, 2019 13:33

revert unnecessary code change

1e3562e

readd totally necessary code

ce9d987

stephmilovic changed the title ~~[SIEM] Table columns, numeral design tweaks~~ [SIEM] Table columns, number related design tweaks Oct 23, 2019

spong reviewed Oct 23, 2019

View reviewed changes

x-pack/legacy/plugins/siem/public/components/formatted_date/index.test.tsx Outdated Show resolved Hide resolved

spong reviewed Oct 23, 2019

View reviewed changes

x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx Outdated Show resolved Hide resolved

spong reviewed Oct 23, 2019

View reviewed changes

x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx Show resolved Hide resolved

spong approved these changes Oct 23, 2019

View reviewed changes

minor cleanups

07043d1

stephmilovic added the v7.6.0 label Oct 24, 2019

stephmilovic merged commit 39aa439 into elastic:master Oct 24, 2019

stephmilovic deleted the table-design-updates branch October 24, 2019 22:27

stephmilovic added a commit to stephmilovic/kibana that referenced this pull request Oct 24, 2019

[SIEM] Table columns, number related design tweaks (elastic#48969)

15274c0

stephmilovic mentioned this pull request Oct 24, 2019

[7.x] [SIEM] Table columns, number related design tweaks (#48969) #49260

Merged

stephmilovic added a commit to stephmilovic/kibana that referenced this pull request Oct 24, 2019

[SIEM] Table columns, number related design tweaks (elastic#48969)

b208fb1

stephmilovic mentioned this pull request Oct 24, 2019

[7.5] [SIEM] Table columns, number related design tweaks (#48969) #49261

Merged

stephmilovic added a commit that referenced this pull request Oct 25, 2019

[SIEM] Table columns, number related design tweaks (#48969) (#49261)

be9c221

stephmilovic added a commit that referenced this pull request Oct 25, 2019

[SIEM] Table columns, number related design tweaks (#48969) (#49260)

94b7ced

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SIEM] Table columns, number related design tweaks #48969

[SIEM] Table columns, number related design tweaks #48969

stephmilovic commented Oct 22, 2019

elasticmachine commented Oct 22, 2019

MichaelMarcialis commented Oct 22, 2019

MichaelMarcialis left a comment

elasticmachine commented Oct 22, 2019

elasticmachine commented Oct 22, 2019

stephmilovic commented Oct 22, 2019

elasticmachine commented Oct 23, 2019

MichaelMarcialis commented Oct 23, 2019 •

edited

Loading

stephmilovic commented Oct 23, 2019

MichaelMarcialis left a comment

elasticmachine commented Oct 23, 2019

elasticmachine commented Oct 23, 2019

elasticmachine commented Oct 23, 2019

spong Oct 23, 2019

stephmilovic Oct 24, 2019

spong left a comment

elasticmachine commented Oct 24, 2019

[SIEM] Table columns, number related design tweaks #48969

[SIEM] Table columns, number related design tweaks #48969

Conversation

stephmilovic commented Oct 22, 2019

Summary

Checklist

For maintainers

elasticmachine commented Oct 22, 2019

MichaelMarcialis commented Oct 22, 2019

MichaelMarcialis left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 22, 2019

💚 Build Succeeded

elasticmachine commented Oct 22, 2019

💚 Build Succeeded

stephmilovic commented Oct 22, 2019

elasticmachine commented Oct 23, 2019

💚 Build Succeeded

MichaelMarcialis commented Oct 23, 2019 • edited Loading

stephmilovic commented Oct 23, 2019

MichaelMarcialis left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 23, 2019

💔 Build Failed

elasticmachine commented Oct 23, 2019

💔 Build Failed

elasticmachine commented Oct 23, 2019

💚 Build Succeeded

spong Oct 23, 2019

Choose a reason for hiding this comment

stephmilovic Oct 24, 2019

Choose a reason for hiding this comment

spong left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 24, 2019

💚 Build Succeeded

MichaelMarcialis commented Oct 23, 2019 •

edited

Loading