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.

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

[ResponseOps][Flapping] Update rule specific flapping tooltip UI #194086

Merged
merged 7 commits into from
Oct 3, 2024

Conversation

JiaweiWu
Copy link
Contributor

@JiaweiWu JiaweiWu commented Sep 26, 2024

Summary

Updates the rule specific flapping UI according to the finalized figma designs: https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

Screenshot 2024-09-25 at 8 56 47 PM Screenshot 2024-09-25 at 9 23 30 PM

To test:

  1. Turn IS_RULE_SPECIFIC_FLAPPING_ENABLED to true.
  2. Navigate to rule create/edit flyout and you should see the new tooltips based on the figma designs linked above.

Checklist

@JiaweiWu JiaweiWu added release_note:skip Skip the PR/issue when compiling release notes Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v9.0.0 backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) v8.16.0 labels Sep 26, 2024
@JiaweiWu JiaweiWu requested a review from a team as a code owner September 26, 2024 04:26
@elasticmachine
Copy link
Contributor

Pinging @elastic/response-ops (Team:ResponseOps)

@adcoelho
Copy link
Contributor

I got some weird scenario where I couldn't close the popovers.

Screen.Recording.2024-09-30.at.21.06.56.mov

@JiaweiWu
Copy link
Contributor Author

JiaweiWu commented Oct 1, 2024

@elasticmachine merge upstream

@JiaweiWu
Copy link
Contributor Author

JiaweiWu commented Oct 1, 2024

I got some weird scenario where I couldn't close the popovers.

Fixed!

Copy link
Contributor

@ersin-erdal ersin-erdal left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Contributor

@Zacqary Zacqary left a comment

Choose a reason for hiding this comment

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

Code changes LGTM, just get this test fixed. Feel free to merge on green CI

const {
application: {
capabilities: {
rulesSettings: { writeFlappingSettingsUI },
Copy link
Contributor

Choose a reason for hiding this comment

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

This needs to be mocked in x-pack/plugins/monitoring/public/alerts/alert_form.test.tsx

Copy link
Contributor Author

Choose a reason for hiding this comment

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

nice catch!

@JiaweiWu JiaweiWu enabled auto-merge (squash) October 3, 2024 02:03
@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
triggersActionsUi 1.6MB 1.6MB +3.3KB

History

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

@JiaweiWu JiaweiWu merged commit aab80bd into elastic:main Oct 3, 2024
21 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11155541451

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 3, 2024
…stic#194086)

## Summary
Updates the rule specific flapping UI according to the finalized figma
designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

<img width="798" alt="Screenshot 2024-09-25 at 8 56 47 PM"
src="https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31">
<img width="588" alt="Screenshot 2024-09-25 at 9 23 30 PM"
src="https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56">

### To test:
1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.
2. Navigate to rule create/edit flyout and you should see the new
tooltips based on the figma designs linked above.

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit aab80bd)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Oct 3, 2024
#194086) (#194779)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Flapping] Update rule specific flapping tooltip UI
(#194086)](#194086)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jiawei
Wu","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-03T03:48:11Z","message":"[ResponseOps][Flapping]
Update rule specific flapping tooltip UI (#194086)\n\n##
Summary\r\nUpdates the rule specific flapping UI according to the
finalized
figma\r\ndesigns:\r\nhttps://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0\r\n\r\n<img
width=\"798\" alt=\"Screenshot 2024-09-25 at 8 56
47 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31\">\r\n<img
width=\"588\" alt=\"Screenshot 2024-09-25 at 9 23
30 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56\">\r\n\r\n###
To test:\r\n1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.\r\n2.
Navigate to rule create/edit flyout and you should see the
new\r\ntooltips based on the figma designs linked above.\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"aab80bdee97a20e13e1b7ab83971088f1a6b447e","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.16.0"],"title":"[ResponseOps][Flapping]
Update rule specific flapping tooltip
UI","number":194086,"url":"https://github.com/elastic/kibana/pull/194086","mergeCommit":{"message":"[ResponseOps][Flapping]
Update rule specific flapping tooltip UI (#194086)\n\n##
Summary\r\nUpdates the rule specific flapping UI according to the
finalized
figma\r\ndesigns:\r\nhttps://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0\r\n\r\n<img
width=\"798\" alt=\"Screenshot 2024-09-25 at 8 56
47 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31\">\r\n<img
width=\"588\" alt=\"Screenshot 2024-09-25 at 9 23
30 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56\">\r\n\r\n###
To test:\r\n1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.\r\n2.
Navigate to rule create/edit flyout and you should see the
new\r\ntooltips based on the figma designs linked above.\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"aab80bdee97a20e13e1b7ab83971088f1a6b447e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194086","number":194086,"mergeCommit":{"message":"[ResponseOps][Flapping]
Update rule specific flapping tooltip UI (#194086)\n\n##
Summary\r\nUpdates the rule specific flapping UI according to the
finalized
figma\r\ndesigns:\r\nhttps://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0\r\n\r\n<img
width=\"798\" alt=\"Screenshot 2024-09-25 at 8 56
47 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31\">\r\n<img
width=\"588\" alt=\"Screenshot 2024-09-25 at 9 23
30 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56\">\r\n\r\n###
To test:\r\n1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.\r\n2.
Navigate to rule create/edit flyout and you should see the
new\r\ntooltips based on the figma designs linked above.\r\n\r\n###
Checklist\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"aab80bdee97a20e13e1b7ab83971088f1a6b447e"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jiawei Wu <[email protected]>
tiansivive pushed a commit to tiansivive/kibana that referenced this pull request Oct 7, 2024
…stic#194086)

## Summary
Updates the rule specific flapping UI according to the finalized figma
designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-28064&node-type=instance&t=GX5pGpXe1blP0x0G-0

<img width="798" alt="Screenshot 2024-09-25 at 8 56 47 PM"
src="https://github.com/user-attachments/assets/2655a3cd-8097-442e-a3c0-71ab40675e31">
<img width="588" alt="Screenshot 2024-09-25 at 9 23 30 PM"
src="https://github.com/user-attachments/assets/e40b43be-f5a5-4d80-a35c-c3032e017b56">

### To test:
1. Turn `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to `true`.
2. Navigate to rule create/edit flyout and you should see the new
tooltips based on the figma designs linked above.

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
JiaweiWu added a commit that referenced this pull request Oct 10, 2024
…orm Page (#194516)

## Summary

Depends on: #194086
Designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-29867&node-type=frame&t=1VfgdlcjkSHmpbje-0

Adds the rule specific flapping form to the new rule form page. 

## To test:

1. change `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to true 
2. run `yarn start --run-examples`
3. assert the new flapping UI exists by going to developer examples ->
create/edit rule

<img width="1162" alt="Screenshot 2024-09-30 at 11 43 16 PM"
src="https://github.com/user-attachments/assets/a1275a49-f2ed-43ce-815b-5c0bd93770e5">

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 10, 2024
…orm Page (elastic#194516)

## Summary

Depends on: elastic#194086
Designs:
https://www.figma.com/design/eTr6WsKzhSLcQ24AlgrY8R/Flapping-per-Rule--%3E-%23294?node-id=5265-29867&node-type=frame&t=1VfgdlcjkSHmpbje-0

Adds the rule specific flapping form to the new rule form page.

## To test:

1. change `IS_RULE_SPECIFIC_FLAPPING_ENABLED` to true
2. run `yarn start --run-examples`
3. assert the new flapping UI exists by going to developer examples ->
create/edit rule

<img width="1162" alt="Screenshot 2024-09-30 at 11 43 16 PM"
src="https://github.com/user-attachments/assets/a1275a49-f2ed-43ce-815b-5c0bd93770e5">

### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit 447617e)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) release_note:skip Skip the PR/issue when compiling release notes Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) v8.16.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants