[Alert Details] Add investigation guide empty state#223974
Merged
justinkambic merged 12 commits intoelastic:mainfrom Jun 23, 2025
Merged
[Alert Details] Add investigation guide empty state#223974justinkambic merged 12 commits intoelastic:mainfrom
justinkambic merged 12 commits intoelastic:mainfrom
Conversation
justinkambic
added
release_note:enhancement
Team:actionable-obs
Contributor
|
Pinging @elastic/obs-ux-management-team (Team:obs-ux-management) |
github-actions
bot
added
the
author:obs-ux-management
justinkambic
force-pushed
the
222051/investigation-guide-empty-state
branch
from
21c640a to
24ee038
Compare
justinkambic
force-pushed
the
222051/investigation-guide-empty-state
branch
from
24ee038 to
80d9d1a
Compare
justinkambic
commented
Jun 16, 2025
| docLinks, | ||
| ruleTypeRegistry, | ||
| actionTypeRegistry, | ||
| fieldsMetadata, |
Contributor
Author
There was a problem hiding this comment.
Prettier or something in Windsurf rearranged these dependencies, I don't know why.
…n-guide-empty-state
…n-guide-empty-state
Contributor
nastasha-solomon
left a comment
nastasha-solomon
left a comment
There was a problem hiding this comment.
Thanks for the ping! Left some suggestions below.
...vability/plugins/observability/public/pages/alert_details/components/investigation_guide.tsx
Show resolved
Hide resolved
...vability/plugins/observability/public/pages/alert_details/components/investigation_guide.tsx
Show resolved
Hide resolved
mgiota
approved these changes
Jun 20, 2025
Contributor
mgiota
left a comment
mgiota
left a comment
There was a problem hiding this comment.
@justinkambic I tested it and I verify that everything works as expected.
- Investigation guide is always enabled
- When there is no investigation guide, I can see the empty state
- When I click on the call to action, the edit flyout opens with Investigation guide tab preselected
- On save, I can see the rule data update in the page.
As a follow up issue, can we make it a bit prettier, so that it doesn't take the full space?
doakalexi
approved these changes
Jun 20, 2025
Contributor
doakalexi
left a comment
doakalexi
left a comment
There was a problem hiding this comment.
ResponseOps changes LGTM
justinkambic
force-pushed
the
222051/investigation-guide-empty-state
branch
from
6a4810f to
64059f7
Compare
Contributor
|
Starting backport for target branches: 8.19 https://github.com/elastic/kibana/actions/runs/15833124605 |
Contributor
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Public APIs missing exports
History
|
Contributor
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
justinkambic
added a commit
to justinkambic/kibana
that referenced
this pull request
Jun 24, 2025
## Summary Resolves elastic#222051. This PR makes a richer empty state UX for the Investigation Guide feature we added to the Alert Details page. Before, when a rule did not have an investigation guide, the tab on the alert details page dedicated to the feature was disabled. Now, the tab is always enabled. When an investigation guide is present on a rule, a badge will display to indicate the tab contains content. If the user clicks into the tab when the rule does not have an investigation guide, they will see an empty state with a call to action to create a guide. If the user decides to click the empty state button, it will open the Rule Edit flyout. I have added additional functionality that allows the flyout to take an `initialStep` prop, so we pre-set the flyout to the `Details` step which contains the text field the user can use to create their guide. The copy, iconography, and layout of the tab heading are all in draft state pending some design feedback. I will also add some tests to the code that I have added.  ## Reviewing this PR _Note to technical writers:_ You can see the copy added for the empty state [here](https://github.com/elastic/kibana/pull/223974/files#diff-71b439414e4974e2decb0f25c136f52ccea4b49ebe393af68dfc5fd184d56e1cR37). Here's a screenshot as well: <img width="375" alt="image" src="https://github.com/user-attachments/assets/491d87ac-b473-484e-82cd-45a1bd197c61" /> ### Technical review 1. Create a rule that will generate alerts; _do not_ define an Investigation Guide for it 1. Trigger an alert, and go to the details page 1. You should see the Investigation guide tab is available, whereas on `main` it would be disabled 1. Open the Investigation Guide tab, you should see the empty state with its CTA 1. Click this button, the rule flyout should open in Edit mode, and the Details step should be pre-selected 1. Define an investigation guide, this can be any text. Save the rule. 1. Once you have saved the rule you should see the rule data update in the page. The empty state will be gone and the investigation guide you defined will be there instead. (cherry picked from commit dd2e7cb) # Conflicts: # src/platform/packages/shared/response-ops/rule_form/src/rule_form.tsx
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
justinkambic
added a commit
that referenced
this pull request
Jun 24, 2025
…225173) # Backport This will backport the following commits from `main` to `8.19`: - [[Alert Details] Add investigation guide empty state (#223974)](#223974) <!--- Backport version: 10.0.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Justin Kambic","email":"jk@elastic.co"},"sourceCommit":{"committedDate":"2025-06-23T19:19:17Z","message":"[Alert Details] Add investigation guide empty state (#223974)\n\n## Summary\n\nResolves #222051.\n\nThis PR makes a richer empty state UX for the Investigation Guide\nfeature we added to the Alert Details page.\n\nBefore, when a rule did not have an investigation guide, the tab on the\nalert details page dedicated to the feature was disabled. Now, the tab\nis always enabled. When an investigation guide is present on a rule, a\nbadge will display to indicate the tab contains content.\n\nIf the user clicks into the tab when the rule does not have an\ninvestigation guide, they will see an empty state with a call to action\nto create a guide. If the user decides to click the empty state button,\nit will open the Rule Edit flyout. I have added additional functionality\nthat allows the flyout to take an `initialStep` prop, so we pre-set the\nflyout to the `Details` step which contains the text field the user can\nuse to create their guide.\n\nThe copy, iconography, and layout of the tab heading are all in draft\nstate pending some design feedback. I will also add some tests to the\ncode that I have added.\n\n\n\n\n## Reviewing this PR\n\n_Note to technical writers:_ You can see the copy added for the empty\nstate\n[here](https://github.com/elastic/kibana/pull/223974/files#diff-71b439414e4974e2decb0f25c136f52ccea4b49ebe393af68dfc5fd184d56e1cR37).\n\nHere's a screenshot as well:\n\n<img width=\"375\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/491d87ac-b473-484e-82cd-45a1bd197c61\"\n/>\n\n### Technical review\n\n1. Create a rule that will generate alerts; _do not_ define an\nInvestigation Guide for it\n1. Trigger an alert, and go to the details page\n1. You should see the Investigation guide tab is available, whereas on\n`main` it would be disabled\n1. Open the Investigation Guide tab, you should see the empty state with\nits CTA\n1. Click this button, the rule flyout should open in Edit mode, and the\nDetails step should be pre-selected\n1. Define an investigation guide, this can be any text. Save the rule.\n1. Once you have saved the rule you should see the rule data update in\nthe page. The empty state will be gone and the investigation guide you\ndefined will be there instead.","sha":"dd2e7cb5f238df3b04f0aeebf1335496085e51a5","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0","author:obs-ux-management"],"title":"[Alert Details] Add investigation guide empty state","number":223974,"url":"https://github.com/elastic/kibana/pull/223974","mergeCommit":{"message":"[Alert Details] Add investigation guide empty state (#223974)\n\n## Summary\n\nResolves #222051.\n\nThis PR makes a richer empty state UX for the Investigation Guide\nfeature we added to the Alert Details page.\n\nBefore, when a rule did not have an investigation guide, the tab on the\nalert details page dedicated to the feature was disabled. Now, the tab\nis always enabled. When an investigation guide is present on a rule, a\nbadge will display to indicate the tab contains content.\n\nIf the user clicks into the tab when the rule does not have an\ninvestigation guide, they will see an empty state with a call to action\nto create a guide. If the user decides to click the empty state button,\nit will open the Rule Edit flyout. I have added additional functionality\nthat allows the flyout to take an `initialStep` prop, so we pre-set the\nflyout to the `Details` step which contains the text field the user can\nuse to create their guide.\n\nThe copy, iconography, and layout of the tab heading are all in draft\nstate pending some design feedback. I will also add some tests to the\ncode that I have added.\n\n\n\n\n## Reviewing this PR\n\n_Note to technical writers:_ You can see the copy added for the empty\nstate\n[here](https://github.com/elastic/kibana/pull/223974/files#diff-71b439414e4974e2decb0f25c136f52ccea4b49ebe393af68dfc5fd184d56e1cR37).\n\nHere's a screenshot as well:\n\n<img width=\"375\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/491d87ac-b473-484e-82cd-45a1bd197c61\"\n/>\n\n### Technical review\n\n1. Create a rule that will generate alerts; _do not_ define an\nInvestigation Guide for it\n1. Trigger an alert, and go to the details page\n1. You should see the Investigation guide tab is available, whereas on\n`main` it would be disabled\n1. Open the Investigation Guide tab, you should see the empty state with\nits CTA\n1. Click this button, the rule flyout should open in Edit mode, and the\nDetails step should be pre-selected\n1. Define an investigation guide, this can be any text. Save the rule.\n1. Once you have saved the rule you should see the rule data update in\nthe page. The empty state will be gone and the investigation guide you\ndefined will be there instead.","sha":"dd2e7cb5f238df3b04f0aeebf1335496085e51a5"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/223974","number":223974,"mergeCommit":{"message":"[Alert Details] Add investigation guide empty state (#223974)\n\n## Summary\n\nResolves #222051.\n\nThis PR makes a richer empty state UX for the Investigation Guide\nfeature we added to the Alert Details page.\n\nBefore, when a rule did not have an investigation guide, the tab on the\nalert details page dedicated to the feature was disabled. Now, the tab\nis always enabled. When an investigation guide is present on a rule, a\nbadge will display to indicate the tab contains content.\n\nIf the user clicks into the tab when the rule does not have an\ninvestigation guide, they will see an empty state with a call to action\nto create a guide. If the user decides to click the empty state button,\nit will open the Rule Edit flyout. I have added additional functionality\nthat allows the flyout to take an `initialStep` prop, so we pre-set the\nflyout to the `Details` step which contains the text field the user can\nuse to create their guide.\n\nThe copy, iconography, and layout of the tab heading are all in draft\nstate pending some design feedback. I will also add some tests to the\ncode that I have added.\n\n\n\n\n## Reviewing this PR\n\n_Note to technical writers:_ You can see the copy added for the empty\nstate\n[here](https://github.com/elastic/kibana/pull/223974/files#diff-71b439414e4974e2decb0f25c136f52ccea4b49ebe393af68dfc5fd184d56e1cR37).\n\nHere's a screenshot as well:\n\n<img width=\"375\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/491d87ac-b473-484e-82cd-45a1bd197c61\"\n/>\n\n### Technical review\n\n1. Create a rule that will generate alerts; _do not_ define an\nInvestigation Guide for it\n1. Trigger an alert, and go to the details page\n1. You should see the Investigation guide tab is available, whereas on\n`main` it would be disabled\n1. Open the Investigation Guide tab, you should see the empty state with\nits CTA\n1. Click this button, the rule flyout should open in Edit mode, and the\nDetails step should be pre-selected\n1. Define an investigation guide, this can be any text. Save the rule.\n1. Once you have saved the rule you should see the rule data update in\nthe page. The empty state will be gone and the investigation guide you\ndefined will be there instead.","sha":"dd2e7cb5f238df3b04f0aeebf1335496085e51a5"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
Jun 25, 2025
## Summary Resolves elastic#222051. This PR makes a richer empty state UX for the Investigation Guide feature we added to the Alert Details page. Before, when a rule did not have an investigation guide, the tab on the alert details page dedicated to the feature was disabled. Now, the tab is always enabled. When an investigation guide is present on a rule, a badge will display to indicate the tab contains content. If the user clicks into the tab when the rule does not have an investigation guide, they will see an empty state with a call to action to create a guide. If the user decides to click the empty state button, it will open the Rule Edit flyout. I have added additional functionality that allows the flyout to take an `initialStep` prop, so we pre-set the flyout to the `Details` step which contains the text field the user can use to create their guide. The copy, iconography, and layout of the tab heading are all in draft state pending some design feedback. I will also add some tests to the code that I have added.  ## Reviewing this PR _Note to technical writers:_ You can see the copy added for the empty state [here](https://github.com/elastic/kibana/pull/223974/files#diff-71b439414e4974e2decb0f25c136f52ccea4b49ebe393af68dfc5fd184d56e1cR37). Here's a screenshot as well: <img width="375" alt="image" src="https://github.com/user-attachments/assets/491d87ac-b473-484e-82cd-45a1bd197c61" /> ### Technical review 1. Create a rule that will generate alerts; _do not_ define an Investigation Guide for it 1. Trigger an alert, and go to the details page 1. You should see the Investigation guide tab is available, whereas on `main` it would be disabled 1. Open the Investigation Guide tab, you should see the empty state with its CTA 1. Click this button, the rule flyout should open in Edit mode, and the Details step should be pre-selected 1. Define an investigation guide, this can be any text. Save the rule. 1. Once you have saved the rule you should see the rule data update in the page. The empty state will be gone and the investigation guide you defined will be there instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves #222051.
This PR makes a richer empty state UX for the Investigation Guide feature we added to the Alert Details page.
Before, when a rule did not have an investigation guide, the tab on the alert details page dedicated to the feature was disabled. Now, the tab is always enabled. When an investigation guide is present on a rule, a badge will display to indicate the tab contains content.
If the user clicks into the tab when the rule does not have an investigation guide, they will see an empty state with a call to action to create a guide. If the user decides to click the empty state button, it will open the Rule Edit flyout. I have added additional functionality that allows the flyout to take an
initialStepprop, so we pre-set the flyout to theDetailsstep which contains the text field the user can use to create their guide.The copy, iconography, and layout of the tab heading are all in draft state pending some design feedback. I will also add some tests to the code that I have added.
Reviewing this PR
Note to technical writers: You can see the copy added for the empty state here.
Here's a screenshot as well:
Technical review
mainit would be disabled