Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution][Detections] Better toast errors #72205

Merged
merged 11 commits into from
Jul 17, 2020
Merged

[Security Solution][Detections] Better toast errors #72205

merged 11 commits into from
Jul 17, 2020

Conversation

rylnd
Copy link
Contributor

@rylnd rylnd commented Jul 16, 2020

Summary

A few changes related to toast messages:

  • Better presentation of error data sent from the API (both general platform errors and app-specific errors)
  • Uses platform's new Toasts service to prevent modal/toast z-index collision issues
  • Updates both the Value Lists Modal and the Exceptions List Modals to use this new hook wrapping the above

This also fixes an issue with useListsConfig where, when the server is nonresponsive, it will not continue to poll awaiting a non-error response.

I'm not replacing all uses of our redux-based toaster implementation for now, but we can/should do that in a subsequent PR.

Example Toasts when trying to upload too large of a value list:

Detections_-_Kibana

Detections_-_Kibana

Checklist

For maintainers

@rylnd
Add new hook to wrap the toasts service
81e70e3 
When receiving error responses from our APIs, this gives us better toast
messages.
@rylnd
Replace useToasts with useAppToasts in trivial case
28095e6
@rylnd
WIP: prevent infinite polling when server is unresponsive
940c54b 
The crux of this issue was that we had no steady state when the server
returned a non-API error (!isApiError), as it would if the server was
throwing 500s or just generally misbehaving.

The solution, then, is to addresse these non-API errors in our
underlying useListsIndex and useListsPrivileges hooks.

This also refactors those hooks to:

* collapse multiple error states into one (that's all we currently need)
* use useAppToasts for better UI

TODO: I don't think I need the changes in useListsConfig's useEffect.
@rylnd
Slightly more legible variables
beefe5b 
The only task in this hook is our readPrivileges task right now, so I'm
shortening the variable until we have a need to disambiguate it further.
@rylnd
Remove unnecessary conditions around creating our index
24ae1f5 
If the index hook has an error needsIndex will not be true.
@rylnd
Better toast errors for Kibana API errors
f78d9bb 
Our isApiError predicate does not work for errors coming back from
Kibana platform itself, e.g. for a request payload error.

I've added a separate predicate for that case, isKibanaError, and then a
wrapping isAppError predicate since most of our use cases just care
about error.body.message, which is common to both.
@rylnd
Use new toasts hook on our exceptions modals
3dd2fd4 
This fixes two issues:

* toast appears above modal overlay
* Error message from response is now presented in the toast
@rylnd rylnd added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.9.0 labels Jul 16, 2020
@rylnd rylnd self-assigned this Jul 16, 2020
@rylnd
Fix bug with toasts dependencies
b755361 
Because of the way some of the exception modal's hooks are written, a
change to one of its callbacks means that the request will be canceled.

Because the toasts service exports instance methods, the context within
the function (and thus the function itself) can change leading to a
mutable ref.

Because we don't want/need this behavior, we store our exported
functions in refs to 'freeze' them for react.

With our bound functions, we should now be able to declare e.g.
`toast.addError` as a dependency, however react cannot determine that it
is bound (and thus that toast.addError() is equivalent to addError()),
and so we must destructure our functions in order to use them as
dependencies.
@rylnd
Alert clipboard toasts through new Toasts service
59f36a9 
This fixes the z-index issue between modals and toasts.
FrankHassanabad
FrankHassanabad approved these changes Jul 17, 2020
View reviewed changes
Copy link
Contributor

@FrankHassanabad FrankHassanabad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@rylnd
Fix type errors
0800c29
@rylnd
Mock external dependency
8597df7 
These tests now call out to the Notifications service (in a context)
instead of our redux implementation.
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

id value diff baseline
securitySolution 1066 +1 1065

async chunks size

id value diff baseline
securitySolution 7.3MB -153.0B 7.3MB

page load bundle size

id value diff baseline
securitySolution 887.7KB +485.0B 887.2KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@rylnd rylnd marked this pull request as ready for review July 17, 2020 03:59
@rylnd rylnd requested review from a team as code owners July 17, 2020 03:59
@elasticmachine
Copy link
Contributor

Pinging @elastic/siem (Team:SIEM)

@rylnd rylnd merged commit effab78 into elastic:master Jul 17, 2020
@rylnd rylnd deleted the better_toast_errors branch July 17, 2020 04:00
This was referenced Jul 17, 2020
Merged
Merged
rylnd added a commit to rylnd/kibana that referenced this pull request Jul 17, 2020
@rylnd
[Security Solution][Detections] Better toast errors (elastic#72205)
8f7fb59 
* Add new hook to wrap the toasts service

When receiving error responses from our APIs, this gives us better toast
messages.

* Replace useToasts with useAppToasts in trivial case

* WIP: prevent infinite polling when server is unresponsive

The crux of this issue was that we had no steady state when the server
returned a non-API error (!isApiError), as it would if the server was
throwing 500s or just generally misbehaving.

The solution, then, is to addresse these non-API errors in our
underlying useListsIndex and useListsPrivileges hooks.

This also refactors those hooks to:

* collapse multiple error states into one (that's all we currently need)
* use useAppToasts for better UI

TODO: I don't think I need the changes in useListsConfig's useEffect.

* Slightly more legible variables

The only task in this hook is our readPrivileges task right now, so I'm
shortening the variable until we have a need to disambiguate it further.

* Remove unnecessary conditions around creating our index

If the index hook has an error needsIndex will not be true.

* Better toast errors for Kibana API errors

Our isApiError predicate does not work for errors coming back from
Kibana platform itself, e.g. for a request payload error.

I've added a separate predicate for that case, isKibanaError, and then a
wrapping isAppError predicate since most of our use cases just care
about error.body.message, which is common to both.

* Use new toasts hook on our exceptions modals

This fixes two issues:

* toast appears above modal overlay
* Error message from response is now presented in the toast

* Fix bug with toasts dependencies

Because of the way some of the exception modal's hooks are written, a
change to one of its callbacks means that the request will be canceled.

Because the toasts service exports instance methods, the context within
the function (and thus the function itself) can change leading to a
mutable ref.

Because we don't want/need this behavior, we store our exported
functions in refs to 'freeze' them for react.

With our bound functions, we should now be able to declare e.g.
`toast.addError` as a dependency, however react cannot determine that it
is bound (and thus that toast.addError() is equivalent to addError()),
and so we must destructure our functions in order to use them as
dependencies.

* Alert clipboard toasts through new Toasts service

This fixes the z-index issue between modals and toasts.

* Fix type errors

* Mock external dependency

These tests now call out to the Notifications service (in a context)
instead of our redux implementation.
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jul 17, 2020
@gmmorris
Merge branch 'master' into task-manager/batch-update-delete
edb3f1e 
* master: (214 commits)
  replacing hard coded links for ela.st (elastic#72240)
  skip flaky suite (elastic#60865)
  chore(NA): teardown dynamic dll plugin (elastic#72096)
  Register navLink actions for declared applications (elastic#72109)
  Fix value for process.hash.sha256 draggable (elastic#72142)
  Call setupIngest before fleet_install tests (elastic#72214)
  [Security Solution][Detections] Better toast errors (elastic#72205)
  skip flaky suite (elastic#64696)
  [Security Solution][Detections] Disable exceptions for Threshold and ML rules (elastic#72137)
  [Security Solution][Detections,Lists] Miscellaneous post-FF fixes (elastic#71990)
  [baseline/capture] use high-memory nodes with ramDisks (elastic#71894)
  skip flaky suite (elastic#77207)
  [Maps] Fix issue preventing TMS from rendering correctly (elastic#71946)
  using test_user with minimum privs (elastic#71988)
  Fixed Webhook connector doesn't retain added HTTP header settings (elastic#71924)
  [Ingest Manager] Do not show enrolling and unenrolling agents as online in agent counters (elastic#71921)
  [Maps] fix 'New Map' from getting added to recently accessed (elastic#72125)
  [Visualizations] Pass 'aggs' parameter to custom request handlers (elastic#71423)
  [Monitoring] Out of the box alert tweaks (elastic#71942)
  [ML] Fix datafeed start time is incorrect when the job has trailing empty buckets (elastic#71976)
  ...
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jul 17, 2020
@gmmorris
Merge branch 'master' into alerting/consumer-based-rbac
cbee849 
* master: (55 commits)
  updates 'External alerts' tab text (elastic#72237)
  [Security Solution][Case] Fix connector's dropdown with conflicting requests (elastic#72037)
  replacing hard coded links for ela.st (elastic#72240)
  skip flaky suite (elastic#60865)
  chore(NA): teardown dynamic dll plugin (elastic#72096)
  Register navLink actions for declared applications (elastic#72109)
  Fix value for process.hash.sha256 draggable (elastic#72142)
  Call setupIngest before fleet_install tests (elastic#72214)
  [Security Solution][Detections] Better toast errors (elastic#72205)
  skip flaky suite (elastic#64696)
  [Security Solution][Detections] Disable exceptions for Threshold and ML rules (elastic#72137)
  [Security Solution][Detections,Lists] Miscellaneous post-FF fixes (elastic#71990)
  [baseline/capture] use high-memory nodes with ramDisks (elastic#71894)
  skip flaky suite (elastic#77207)
  [Maps] Fix issue preventing TMS from rendering correctly (elastic#71946)
  using test_user with minimum privs (elastic#71988)
  Fixed Webhook connector doesn't retain added HTTP header settings (elastic#71924)
  [Ingest Manager] Do not show enrolling and unenrolling agents as online in agent counters (elastic#71921)
  [Maps] fix 'New Map' from getting added to recently accessed (elastic#72125)
  [Visualizations] Pass 'aggs' parameter to custom request handlers (elastic#71423)
  ...
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jul 17, 2020
@gmmorris
Merge branch 'alerting/consumer-based-rbac' into alerting/management-…
fead80a 
…feature-privileges

* alerting/consumer-based-rbac: (56 commits)
  take into account which features available in the active space
  updates 'External alerts' tab text (elastic#72237)
  [Security Solution][Case] Fix connector's dropdown with conflicting requests (elastic#72037)
  replacing hard coded links for ela.st (elastic#72240)
  skip flaky suite (elastic#60865)
  chore(NA): teardown dynamic dll plugin (elastic#72096)
  Register navLink actions for declared applications (elastic#72109)
  Fix value for process.hash.sha256 draggable (elastic#72142)
  Call setupIngest before fleet_install tests (elastic#72214)
  [Security Solution][Detections] Better toast errors (elastic#72205)
  skip flaky suite (elastic#64696)
  [Security Solution][Detections] Disable exceptions for Threshold and ML rules (elastic#72137)
  [Security Solution][Detections,Lists] Miscellaneous post-FF fixes (elastic#71990)
  [baseline/capture] use high-memory nodes with ramDisks (elastic#71894)
  skip flaky suite (elastic#77207)
  [Maps] Fix issue preventing TMS from rendering correctly (elastic#71946)
  using test_user with minimum privs (elastic#71988)
  Fixed Webhook connector doesn't retain added HTTP header settings (elastic#71924)
  [Ingest Manager] Do not show enrolling and unenrolling agents as online in agent counters (elastic#71921)
  [Maps] fix 'New Map' from getting added to recently accessed (elastic#72125)
  ...
yctercero pushed a commit that referenced this pull request Jul 17, 2020
@rylnd
[Security Solution][Detections] Better toast errors (#72205) (#72222)
2aea97f 
## Summary

A few changes related to toast messages:

* Better presentation of error data sent from the API (both general platform errors and app-specific errors)
* Uses platform's new Toasts service to prevent modal/toast z-index collision issues
* Updates both the Value Lists Modal and the Exceptions List Modals to use this new hook wrapping the above

This also fixes an issue with `useListsConfig` where, when the server is nonresponsive, it will not continue to poll awaiting a non-error response.
yctercero pushed a commit that referenced this pull request Jul 17, 2020
@rylnd
[Security Solution][Detections] Better toast errors (#72205) (#72223)
ddec1b5 
## Summary

A few changes related to toast messages:

* Better presentation of error data sent from the API (both general platform errors and app-specific errors)
* Uses platform's new Toasts service to prevent modal/toast z-index collision issues
* Updates both the Value Lists Modal and the Exceptions List Modals to use this new hook wrapping the above

This also fixes an issue with `useListsConfig` where, when the server is nonresponsive, it will not continue to poll awaiting a non-error response.
chrisronline pushed a commit to chrisronline/kibana that referenced this pull request Jul 17, 2020
@rylnd @chrisronline
[Security Solution][Detections] Better toast errors (elastic#72205)
55ea1d7 
* Add new hook to wrap the toasts service

When receiving error responses from our APIs, this gives us better toast
messages.

* Replace useToasts with useAppToasts in trivial case

* WIP: prevent infinite polling when server is unresponsive

The crux of this issue was that we had no steady state when the server
returned a non-API error (!isApiError), as it would if the server was
throwing 500s or just generally misbehaving.

The solution, then, is to addresse these non-API errors in our
underlying useListsIndex and useListsPrivileges hooks.

This also refactors those hooks to:

* collapse multiple error states into one (that's all we currently need)
* use useAppToasts for better UI

TODO: I don't think I need the changes in useListsConfig's useEffect.

* Slightly more legible variables

The only task in this hook is our readPrivileges task right now, so I'm
shortening the variable until we have a need to disambiguate it further.

* Remove unnecessary conditions around creating our index

If the index hook has an error needsIndex will not be true.

* Better toast errors for Kibana API errors

Our isApiError predicate does not work for errors coming back from
Kibana platform itself, e.g. for a request payload error.

I've added a separate predicate for that case, isKibanaError, and then a
wrapping isAppError predicate since most of our use cases just care
about error.body.message, which is common to both.

* Use new toasts hook on our exceptions modals

This fixes two issues:

* toast appears above modal overlay
* Error message from response is now presented in the toast

* Fix bug with toasts dependencies

Because of the way some of the exception modal's hooks are written, a
change to one of its callbacks means that the request will be canceled.

Because the toasts service exports instance methods, the context within
the function (and thus the function itself) can change leading to a
mutable ref.

Because we don't want/need this behavior, we store our exported
functions in refs to 'freeze' them for react.

With our bound functions, we should now be able to declare e.g.
`toast.addError` as a dependency, however react cannot determine that it
is bound (and thus that toast.addError() is equivalent to addError()),
and so we must destructure our functions in order to use them as
dependencies.

* Alert clipboard toasts through new Toasts service

This fixes the z-index issue between modals and toasts.

* Fix type errors

* Mock external dependency

These tests now call out to the Notifications service (in a context)
instead of our redux implementation.
@MindyRS MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Sep 23, 2021
@elasticmachine
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@FrankHassanabad FrankHassanabad FrankHassanabad approved these changes

Assignees

@rylnd rylnd

Labels
release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:SIEM v7.9.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@rylnd @kibanamachine @elasticmachine @FrankHassanabad @MindyRS