[Actionable Observability] Integrate alert search bar on rule details page

[maryam-saeidi]

Resolves #143962

📝 Summary

In this PR, an alerts search bar was added to the rule details page by syncing its state to the URL. This will enable navigating to the alerts table for a specific rule with a filtered state based on active or recovered.

Notes

• Renamed alert page container to alert search bar container and used it both in alerts and rule details page (it will be responsible to sync search bar params to the URL) --> moved to a shared component
• Moved AlertsStatusFilter to be a sub-component of the shared observability search bar
• Allowed ObservabilityAlertSearchBar to be used both as a stand-alone component and as a wired component with syncing params to the URL (ObservabilityAlertSearchBar, ObservabilityAlertSearchbarWithUrlSync)
• Set a minHeight for the Alerts and Execution tab, otherwise, the page will have extra scroll on the tab change while content is loading (very annoying!)

🎨 Preview

🧪 How to test

• Create a rule and go to the rule details page
• Click on the alerts tab and change the search criteria, you should be able to see the criteria in the query parameter
• Refresh the page, alerts tab should be selected and you should be able to see the filters that you applied in the previous step
• As a side test, check alert search bar on alerts page as well, it should work as before

[maryam-saeidi]

💬 Successfully copy pasted from APM 😂

[maryam-saeidi]

💬 Some of the types are duplicated and unused, so I removed them.

[elasticmachine]

Pinging @elastic/actionable-observability (Team: Actionable Observability)

[CoenWarmer]

• After entering a query and reloading the page, the page goes to the alert tab and shows previous query ✅

Did notice that when an incorrect query is entered, the page goes blank.

To reproduce:

1. Enter a query: host.cpu.usage >= "25%""" (notice double quotes at the end)
2. Page goes blank
3. Console shows:

[CoenWarmer]

• After entering a query and reloading the page, the page goes to the alert tab and shows previous query ✅

Did notice that when an incorrect query is entered, the page goes blank.

To reproduce:

1. Enter a query: host.cpu.usage >= "25%""" (notice double quotes at the end)
2. Page goes blank
3. Console shows:

[maryam-saeidi]

Did notice that when an incorrect query is entered, the page goes blank.

To reproduce:

1. Enter a query: host.cpu.usage >= "25%""" (notice double quotes at the end)
2. Page goes blank
3. Console shows:

@CoenWarmer Nice catch! Unfortunately, this is an issue that we also have on the Alerts page and I've created a ticket for it previously (#143641)
Since the component is shared between these 2 pages, when we fix it in TriggersActionsUI, then it will be fixed everywhere.
I will add your example to the ticket as well 👍🏻

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 2ba4d62

Failed CI Steps

• FTR Configs #1

Test Failures

• [job] [logs] FTR Configs #1 / Upgrade Assistant Deprecation pages "before all" hook for "renders the Elasticsearch deprecations page"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observability	426	431	+5

Async chunks

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

id	before	after	diff
observability	485.8KB	486.6KB	+819.0B

Unknown metric groups

ESLint disabled in files

id	before	after	diff
osquery	1	2	+1

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
fleet	59	65	+6
osquery	108	113	+5
securitySolution	440	446	+6
total			+19

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
fleet	67	73	+6
osquery	109	115	+6
securitySolution	517	523	+6
total			+20

History

• 💚 Build #86195 succeeded 0a2b7cc
• 💚 Build #86194 succeeded 1f579ff
• 💚 Build #86150 succeeded a069ad4
• 💔 Build #85949 failed 9cc22ce
• 💔 Build #85925 failed e0b0056

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

cc @maryam-saeidi

[CoenWarmer]

Hey @maryam-saeidi, code looks excellent.

I am a little concerned that if this gets merged before the issue in TriggersActionsUI is fixed, end-users could have a sub par experience. So I am going to approve, but I will leave it to your best judgement whether or not it is good to merge for 8.6.0.

[fkanout]

Tested locally and it works as expected and I like the fast autocompletion which not only for the field name but also its value!! 👏🏻

@maryam-saeidi, I found something confusing (we have discussed this topic previously) when we set kibana.alert.status : "active" in the search bar and then we apply the UI filter but with different value e.g recovered, the table will show the active alert while in the UI filter says recovered i.e. the search override the UI filter
This could not be a big issue if the query in the search bar is simple, the user will figure it out. But if the user have many conditions in the search bar it could be misleading.

I would suggest once the user click on one of the UI filter, we remove any condition mentioned for kibana.alert.status in the search bar.

[maryam-saeidi]

Thanks @CoenWarmer and @fkanout for reviewing. 💖

@CoenWarmer Since this is an issue that already exists on the alerts page for a couple of versions, so, unfortunately, it already can cause issues on the alerts page which is IMO more important than the Rule Details page. For the related bug ticket, I think we should be able to fix it after the feature freeze and backport it.

@fkanout Indeed we discussed this case, I am not sure how often this issue might happen but if it is challenging for our users, we can implement it as you suggested we can come up with an idea on how to implement it because manipulating search input makes the code unnecessarily complicated and fragile. I assume when users are working with both filter and query input, they know both filters will be applied together (similar to the case that we have for the controls and filters in the search bar.)
Anyway, I will double check it with Vinay and I will create a ticket for it if it is needed.