[Alerting] "Create alert" and alert list design improvements by andreadelrio · Pull Request #63515 · elastic/kibana

andreadelrio · 2020-04-14T19:33:07Z

Summary

"Create alert" changes

Adjust spacing around visualization chart area.
Adjust typography in the Actions section. Made the Actions header visible after the user has picked an action.
Adjusted buttons size
Adjusted placement of Add action button and added a horizontal rule above it
Adjusted layout of KeyPadMenuItems showing actions to avoid having extra white space on the right.
Add external icon to "Get more actions" link

[Create Alert] Actions section

Now

Before

"Alert list" changes

Improved styling in bulk actions menu
Improved styling in collapsed item actions menu, including change to compressed switches.

Now

Before

elasticmachine · 2020-04-14T19:33:09Z

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

YulNaumenko

LGTM

snide

Just a comment when looking at one of your screens. Didn't run this locally yet.

...ggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss

...rs_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss

mikecote

Thank you for doing this PR for us! LGTM, I just had a few notes.

...lugins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx

...ers_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.tsx

...iggers_actions_ui/public/application/sections/common/components/alert_quick_edit_buttons.tsx

...iggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx

andreadelrio · 2020-04-16T00:53:42Z

Just a comment when looking at one of your screens. Didn't run this locally yet.

@snide I tried many routes to fix the alignment of the trash icon and the delete label, including EuiFlexGroup and EuiButtonEmpty. In all cases something felt off. The only solution I found was adding some padding-top to the label. It’s not the cleanest route but I just couldn’t get this to feel right using flex alignment properties, I think that might be because of the icon we’re using.

^ This is what it looks like right now. I worked on the copy with Gail and DeFazio. I did not use EuiContextMenuItem for Disable and Mute because I didn't want the help text to be clickable or to have an underline whenever the user hovers over the switches. Result:

Also a note for other reviewers that we've changed "Enable" to "Disable" so that we have all of them be "negative" actions.

mdefazio · 2020-04-16T00:57:56Z

These look great. The popover for the row actions is much better. We can maybe try and align the label (Disable/Mute) with the definition instead of with the switch.

mikecote

Tested the changes locally and still LGTM 👍

gchaps · 2020-04-16T13:53:04Z

@andreadelrio Please add a period at the end of each sentence.

When disabled, the alert is not checked.
When muted, the alert is checked, but no action is performed.

Fix functional tests for alerting UI enhancements

kibanamachine · 2020-04-17T19:13:15Z

💚 Build Succeeded

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

History

💔 Build #41452 failed fa62385
💔 Build #41421 failed 435fd07
💔 Build #41404 failed 9a9ad29
💔 Build #41369 failed 78e7f9d
💔 Build #41323 failed c37799f

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

…#63515) * added header to actions section * adjusted some spacing in Create Alert * lighter text in Actions section headings * fixed bulk actions dropdown * improve alert collapsed item actions * improve dropdown and adjust some buttos * adjust font size of steps to match hierarchy * need to check master * improve collapsed actions menu * added periods to help texts * going back to EuiButtonEmpty to be able to use isLoading * fix prop * remove Fragment * remove translations we're not using * Fix functional tests Co-authored-by: Mike Cote <mikecote@users.noreply.github.com>

…bana into ingest-node-pipelines/privileges * 'feature/ingest-node-pipelines' of github.com:elastic/kibana: (126 commits) [SEARCH] Cleanup fetch soon (elastic#63320) skip flaky suite (elastic#58692) [Uptime] Refresh index and also show more info to user regardi… (elastic#62606) [Drilldowns] Fix back button by removing panels from url in dashboard in view mode (elastic#62415) [platform] serve plugins from /bundles/plugin:${id} [Alerting] Documentation for how to pre-configure connectors. (elastic#63807) skip flaky suite (elastic#63621) Revert "skip flaky suite (elastic#63747)" skip flaky suite (elastic#63747) [SIEM][Detections Engine] - Update rule.lists to be rule.exceptions_list (elastic#63717) [SIEM] Flaky test fix: Bump find_statuses timeout (elastic#63900) [Uptime] Add cert API request and runtime type checking (elastic#63062) [Lens] Allow table to scroll horizontally (elastic#63805) [Metrics UI] Allow users to create alerts from the central Alerts UI (elastic#63803) Migrate legacy maps licensing (x-pack/tilemap) to NP (elastic#63539) [Alerting] "Create alert" and alert list design improvements (elastic#63515) [Lens] Fix existence for dotted paths in _source (elastic#63752) Example plugins in X-Pack (elastic#63823) [ML] Migrate Mocha unit tests to Jest: migrate job utils and query utils tests (elastic#63775) Endpoint: middleware receive immutable versions of state and actions (elastic#63802) ...

…bana into pipeline-editor-part-mvp-2 * 'feature/ingest-node-pipelines' of github.com:elastic/kibana: (127 commits) [Ingest pipelines] Polish details panel and empty list (elastic#63926) [SEARCH] Cleanup fetch soon (elastic#63320) skip flaky suite (elastic#58692) [Uptime] Refresh index and also show more info to user regardi… (elastic#62606) [Drilldowns] Fix back button by removing panels from url in dashboard in view mode (elastic#62415) [platform] serve plugins from /bundles/plugin:${id} [Alerting] Documentation for how to pre-configure connectors. (elastic#63807) skip flaky suite (elastic#63621) Revert "skip flaky suite (elastic#63747)" skip flaky suite (elastic#63747) [SIEM][Detections Engine] - Update rule.lists to be rule.exceptions_list (elastic#63717) [SIEM] Flaky test fix: Bump find_statuses timeout (elastic#63900) [Uptime] Add cert API request and runtime type checking (elastic#63062) [Lens] Allow table to scroll horizontally (elastic#63805) [Metrics UI] Allow users to create alerts from the central Alerts UI (elastic#63803) Migrate legacy maps licensing (x-pack/tilemap) to NP (elastic#63539) [Alerting] "Create alert" and alert list design improvements (elastic#63515) [Lens] Fix existence for dotted paths in _source (elastic#63752) Example plugins in X-Pack (elastic#63823) [ML] Migrate Mocha unit tests to Jest: migrate job utils and query utils tests (elastic#63775) ...

…#63899) * added header to actions section * adjusted some spacing in Create Alert * lighter text in Actions section headings * fixed bulk actions dropdown * improve alert collapsed item actions * improve dropdown and adjust some buttos * adjust font size of steps to match hierarchy * need to check master * improve collapsed actions menu * added periods to help texts * going back to EuiButtonEmpty to be able to use isLoading * fix prop * remove Fragment * remove translations we're not using * Fix functional tests Co-authored-by: Mike Cote <mikecote@users.noreply.github.com> Co-authored-by: Mike Cote <mikecote@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

andreadelrio added 8 commits April 8, 2020 08:25

added header to actions section

61cfdc6

Merge remote-tracking branch 'upstream/master' into alerting-design-cu

4f68ae8

adjusted some spacing in Create Alert

8dec0f5

lighter text in Actions section headings

ff642eb

fixed bulk actions dropdown

08393d3

improve alert collapsed item actions

616b54f

improve dropdown and adjust some buttos

3b07e75

fixed conflicts and some more changes

0b3b50e

andreadelrio added Feature:Alerting Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// labels Apr 14, 2020

andreadelrio requested review from a team as code owners April 14, 2020 19:33

YulNaumenko approved these changes Apr 14, 2020

View reviewed changes

adjust font size of steps to match hierarchy

8fc87bc

andreadelrio added the release_note:skip Skip the PR/issue when compiling release notes label Apr 14, 2020

snide reviewed Apr 15, 2020

View reviewed changes

...ggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.scss Show resolved Hide resolved

...rs_actions_ui/public/application/sections/alerts_list/components/collapsed_item_actions.scss Outdated Show resolved Hide resolved

mikecote self-requested a review April 15, 2020 13:37

mikecote added v7.8.0 v8.0.0 labels Apr 15, 2020

mikecote approved these changes Apr 15, 2020

View reviewed changes

andreadelrio mentioned this pull request Apr 15, 2020

EuiSteps to allow for different title sizes elastic/eui#3324

Closed

andreadelrio added 2 commits April 15, 2020 14:04

need to check master

c4bb2f7

improve collapsed actions menu

9b464e3

andreadelrio requested a review from snide April 16, 2020 01:06

mikecote approved these changes Apr 16, 2020

View reviewed changes

added periods to help texts

c37799f

snide approved these changes Apr 16, 2020

View reviewed changes

mikecote added release_note:skip Skip the PR/issue when compiling release notes and removed release_note:skip Skip the PR/issue when compiling release notes labels Apr 16, 2020

andreadelrio and others added 7 commits April 16, 2020 12:59

going back to EuiButtonEmpty to be able to use isLoading

78e7f9d

fix prop

bd9976e

Merge remote-tracking branch 'upstream/master' into alerting-design-cu

9a9ad29

remove Fragment

435fd07

remove translations we're not using

fa62385

Fix functional tests

4275ae9

Merge pull request #1 from mikecote/pr/63515

b84819d

Fix functional tests for alerting UI enhancements

andreadelrio merged commit c13a026 into elastic:master Apr 17, 2020

andreadelrio mentioned this pull request Apr 17, 2020

[7.x] [Alerting] "Create alert" and alert list design improvements (#63515) #63899

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Alerting] "Create alert" and alert list design improvements#63515

[Alerting] "Create alert" and alert list design improvements#63515
andreadelrio merged 19 commits intoelastic:masterfrom
andreadelrio:alerting-design-cu

andreadelrio commented Apr 14, 2020

Uh oh!

elasticmachine commented Apr 14, 2020

Uh oh!

YulNaumenko left a comment

Uh oh!

snide left a comment

Uh oh!

Uh oh!

Uh oh!

mikecote left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andreadelrio commented Apr 16, 2020

Uh oh!

mdefazio commented Apr 16, 2020

Uh oh!

mikecote left a comment

Uh oh!

gchaps commented Apr 16, 2020

Uh oh!

kibanamachine commented Apr 17, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Conversation

andreadelrio commented Apr 14, 2020

Summary

"Create alert" changes

[Create Alert] Actions section

"Alert list" changes

Uh oh!

elasticmachine commented Apr 14, 2020

Uh oh!

YulNaumenko left a comment

Choose a reason for hiding this comment

Uh oh!

snide left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mikecote left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andreadelrio commented Apr 16, 2020

Uh oh!

mdefazio commented Apr 16, 2020

Uh oh!

mikecote left a comment

Choose a reason for hiding this comment

Uh oh!

gchaps commented Apr 16, 2020

Uh oh!

kibanamachine commented Apr 17, 2020

💚 Build Succeeded

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants