[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

angorayc · 2019-08-01T12:45:35Z

Summary

Update date picker after brushing on a chart:
According to the documentation, we are able to pass a function to onBrushEnd, and therefore it will execute the function after brushing on a the chart. The function will recieve min and max selection of timestamp if it is a time chart (reference). So in this implementation, I just pass narrowDateRange all the way down to the chart and it is doing its job.

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-08-01T13:50:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-01T14:15:13Z

Pinging @elastic/secops

elasticmachine · 2019-08-01T14:38:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-01T15:11:24Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

angorayc · 2019-08-01T17:40:56Z

x-pack/legacy/plugins/siem/public/pages/hosts/host_details.tsx

+                            narrowDateRange={(min: number, max: number) => {
+                              setTimeout(() => {
+                                setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
+                              }, 500);


Wait a bit here as chart updates the state for itself when BrushEnd. If we updated the date picker immediately after brushEnd, we would have unmountd the chart for fetching data before setState completed.

I wish I had a better suggestion for this, but FWIW as a user, the delay doesn't feel perceivable.

I think this a-ok as is as the UI doesn't feel laggy or anything, but I wonder what other ways we can get around this?

Two that come to mind would be:

Use narrowDateRange to set a flag that can be used as the dependency for a useEffect that runs after the state update.

If there's a way to cancel/prevent said state update from propagating within narrowDateRange.

Either way, just thoughts -- doesn't appear to be any need to make any modifications :)

Thanks, I didn't think of these options! Those are very interesting ideas, but I haven't had it work yet 😢, I'll follow up the update from charts and improve this accordingly.

elasticmachine · 2019-08-01T17:55:59Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-01T18:34:59Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

angorayc · 2019-08-01T18:53:33Z

jenkins, test this please

angorayc · 2019-08-02T10:56:51Z

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

    yTickFormatter: numberFormatter,
  },
+  settings: {
+    onBrushEnd: getOr(() => {}, 'onBrushEnd', config),


Reference for onBrushEnd:
https://elastic.github.io/elastic-charts/?selectedKind=Interactions&selectedStory=brush%20selection%20tool%20on%20time%20charts&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fstories%2Fstories-panel

angorayc · 2019-08-02T11:26:12Z

jenkins, test this please

elasticmachine · 2019-08-02T12:23:51Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

andrew-goldstein

This is awesome! 😎 I ran this branch locally and interacted with it for ~ 30 minutes, and it behaved as-expected every single time. It feels good to be able to, for example, see a spike in authentication failures and then brush to see what's happening.
LGTM 📈

spong · 2019-08-02T17:13:56Z

x-pack/legacy/plugins/siem/public/components/charts/common.tsx


 const chartHeight = 74;
+export const chartDefaultRotation: Rotation = 0;


Does this need to be exported? I don't see any usages outside this file currently.

Right, let me remove that, Thanks @spong ! You've got eagle eyes!

spong

Checked out, tested locally, and performed code review. Nice clean implementation + tests @angorayc! LGTM! 👍:tada:🚀

I've left a few comments, but no changes required.

In testing I found these two ancillary issues:

setAbsoluteRangeDatePicker() does not add date range to 'Recently used date ranges' within SuperDatePicker
There doesn't appear to be any way to cancel a brush action. I tried pressing escape, moving the mouse cursor drastically out of bounds, etc. Didn't create an issue for this as I figured you may want to chat with the charts team first.

elasticmachine · 2019-08-02T20:16:36Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…ion on charts (elastic#42440) * add click and brush events * replace setAbsoluteRangeDatePicker * fix type error * remove a not necessary export

…ion on charts (#42440) (#42559) * add click and brush events * replace setAbsoluteRangeDatePicker * fix type error * remove a not necessary export

…-or-edit-existing-rollup-job * 'master' of github.com:elastic/kibana: (67 commits) [TSVB] Shim new platform (elastic#39169) [Metric Vis] Shim new platform (elastic#42240) [Tag Cloud] Shim new platform (elastic#42348) Disable flaky request lib tests. Add es_ui_shared plugin to CODEOWNERS. Add disk space percentage to node listing (elastic#42145) [SIEM] Add chart interactions - update date picker after brush selection on charts (elastic#42440) Document HTTP service (elastic#42331) [Reporting] Sanitize 409 error log message (elastic#42495) [docs][skip ci] Maps read only access (elastic#35561) [x-pack/ftr] refactor types to be more accurate/consistent wit… (elastic#42407) [DOCS] Updates images and content in Dashboard docs (elastic#42500) Allow sorting on multiple columns in Discover (elastic#41918) [Infra UI][Logs UI] Fix autocomplete to use proper derived index pattern (elastic#42287) [ftr/cheerio] improve cheerio types to include test subject me… (elastic#42534) Upgraded EUI 13.0.0 -> 13.1.1 (elastic#42298) Increase max-old-space-size for builds (elastic#42218) [Infra UI] Add cloud metrics and cloud/host info to metadata endpoint (elastic#41836) [Logs UI][a11y] Announce name of column on remove column button (elastic#41695) Inspector 👉 New Platform (elastic#42164) Make alerting properly space aware (elastic#42081) ...

…s_autocomplete * 'master' of github.com:elastic/kibana: (189 commits) [TSVB] Shim new platform (elastic#39169) [Metric Vis] Shim new platform (elastic#42240) [Tag Cloud] Shim new platform (elastic#42348) Disable flaky request lib tests. Add es_ui_shared plugin to CODEOWNERS. Add disk space percentage to node listing (elastic#42145) [SIEM] Add chart interactions - update date picker after brush selection on charts (elastic#42440) Document HTTP service (elastic#42331) [Reporting] Sanitize 409 error log message (elastic#42495) [docs][skip ci] Maps read only access (elastic#35561) [x-pack/ftr] refactor types to be more accurate/consistent wit… (elastic#42407) [DOCS] Updates images and content in Dashboard docs (elastic#42500) Allow sorting on multiple columns in Discover (elastic#41918) [Infra UI][Logs UI] Fix autocomplete to use proper derived index pattern (elastic#42287) [ftr/cheerio] improve cheerio types to include test subject me… (elastic#42534) Upgraded EUI 13.0.0 -> 13.1.1 (elastic#42298) Increase max-old-space-size for builds (elastic#42218) [Infra UI] Add cloud metrics and cloud/host info to metadata endpoint (elastic#41836) [Logs UI][a11y] Announce name of column on remove column button (elastic#41695) Inspector 👉 New Platform (elastic#42164) Make alerting properly space aware (elastic#42081) ...

angorayc changed the title ~~[SIEM] Chart interactions~~ [SIEM] Add chart interactions Aug 1, 2019

angorayc added Team:SIEM v7.4.0 v8.0.0 labels Aug 1, 2019

angorayc added 3 commits August 2, 2019 00:56

add click and brush events

962b167

replace setAbsoluteRangeDatePicker

b2beb83

fix type error

79ff522

angorayc force-pushed the chart-interactions branch from 792d8ef to 79ff522 Compare August 1, 2019 17:22

angorayc added the release_note:enhancement label Aug 1, 2019

angorayc commented Aug 1, 2019

View reviewed changes

angorayc changed the title ~~[SIEM] Add chart interactions~~ [SIEM] Add chart interactions - update date picker after brush selection on charts Aug 1, 2019

angorayc marked this pull request as ready for review August 1, 2019 18:56

angorayc commented Aug 2, 2019

View reviewed changes

andrew-goldstein approved these changes Aug 2, 2019

View reviewed changes

spong reviewed Aug 2, 2019

View reviewed changes

spong approved these changes Aug 2, 2019

View reviewed changes

remove a not necessary export

276ecf6

angorayc merged commit 392b8e1 into elastic:master Aug 3, 2019

angorayc mentioned this pull request Aug 3, 2019

[7.x] [SIEM] Add chart interactions - update date picker after brush selection on charts (#42440) #42559

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

angorayc commented Aug 1, 2019 •

edited

Loading

elasticmachine commented Aug 1, 2019

elasticmachine commented Aug 1, 2019

elasticmachine commented Aug 1, 2019

elasticmachine commented Aug 1, 2019

angorayc Aug 1, 2019 •

edited

Loading

andrew-goldstein Aug 2, 2019

spong Aug 2, 2019

angorayc Aug 2, 2019

elasticmachine commented Aug 1, 2019

elasticmachine commented Aug 1, 2019

angorayc commented Aug 1, 2019

angorayc Aug 2, 2019

angorayc commented Aug 2, 2019

elasticmachine commented Aug 2, 2019

andrew-goldstein left a comment

spong Aug 2, 2019

angorayc Aug 2, 2019

spong left a comment

elasticmachine commented Aug 2, 2019


		const chartHeight = 74;
		export const chartDefaultRotation: Rotation = 0;

[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

[SIEM] Add chart interactions - update date picker after brush selection on charts #42440

Conversation

angorayc commented Aug 1, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Aug 1, 2019

💔 Build Failed

elasticmachine commented Aug 1, 2019

elasticmachine commented Aug 1, 2019

💔 Build Failed

elasticmachine commented Aug 1, 2019

💔 Build Failed

angorayc Aug 1, 2019 • edited Loading

Choose a reason for hiding this comment

andrew-goldstein Aug 2, 2019

Choose a reason for hiding this comment

spong Aug 2, 2019

Choose a reason for hiding this comment

angorayc Aug 2, 2019

Choose a reason for hiding this comment

elasticmachine commented Aug 1, 2019

💔 Build Failed

elasticmachine commented Aug 1, 2019

💔 Build Failed

angorayc commented Aug 1, 2019

angorayc Aug 2, 2019

Choose a reason for hiding this comment

angorayc commented Aug 2, 2019

elasticmachine commented Aug 2, 2019

💚 Build Succeeded

andrew-goldstein left a comment

Choose a reason for hiding this comment

spong Aug 2, 2019

Choose a reason for hiding this comment

angorayc Aug 2, 2019

Choose a reason for hiding this comment

spong left a comment

Choose a reason for hiding this comment

elasticmachine commented Aug 2, 2019

💚 Build Succeeded

angorayc commented Aug 1, 2019 •

edited

Loading

angorayc Aug 1, 2019 •

edited

Loading