[Actionable Observability] Add Alert Details page header

[CoenWarmer]

Summary

This PR adds two components:

• PageTitle: the title of the Alert Detail including the "Active / Inactive" badge underneath;
• HeaderActions: the popover with "Add to case", "View / edit rule conditions" and "Snooze rule" functionalities.

Resolves #140030

Alert Detail Page with both components:

Pressing the "Actions" button

Add Alert to case:

View edit rule condition:

Snooze rule:

All functionalities in the header actions component have been implemented.

Additionally, PageTitle has been added to Storybook.

Checklist

Delete any items that are not applicable to this PR.

• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[elasticmachine]

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

[CoenWarmer]

@elasticmachine merge upstream

[maryam-saeidi]

Great to have a storybook as well! 🎉
I am waiting for the build to see the component in action! :D

[fkanout]

@CoenWarmer, I left you some comments. However, awesome work here! And thank you for shipping the PR with tests.

[maryam-saeidi]

Tested Locally, LGTM!

Question: When I snooze the related rule, should I still see the active badge?

[CoenWarmer]

Tested Locally, LGTM!

Question: When I snooze the related rule, should I still see the active badge?

A good question. I am not totally sure. @maciejforcone, @vinaychandrasekhar could you weigh in?

[benakansara]

The API that we are using to fetch alert data can be possibly modified to return index as well. Currently it returns _source. The alert.hits.hits[0] also has _index property.
@simianhacker @fkanout what do you think?

kibana/x-pack/plugins/rule_registry/server/alert_data_client/alerts_client.ts

Line 498 in 2d8eb0e

return alert.hits.hits[0]._source;

[benakansara]

@simianhacker Not related to the scope of PR, but there is a comment above this line of code "move away from pulling data from _source in the future". What is the other way if we don't want to use "_source"? Is this implemented somewhere else to have a look?

[simianhacker]

The API that we are using to fetch alert data can be possibly modified to return index as well. Currently it returns _source. The alert.hits.hits[0] also has _index property. @simianhacker @fkanout what do you think?

What would we use the _index field for?

What is the other way if we don't want to use "_source"? Is this implemented somewhere else to have a look?

The alternative is to use the fields API (which is a setting on the request). I think the fields API becomes more advantageous when the index is not setup to store the _source and only has fieldData. I believe the fields API also resolves runtime fields as well (which we are not using).

[benakansara]

@simianhacker We need the index name here - index: '.internal.alerts-observability.metrics.alerts-*',
Currently it is hardcoded.

[simianhacker]

Then yes, we need to get the _index field as well.

[fkanout]

Tested locally and it works as expected. Nifty work here, @CoenWarmer!
I left some comments for minor issues.

[benakansara]

LGTM. Tested locally, works as expected. Nice work!! 👏

[fkanout]

LGTM, @CoenWarmer, good job!
Following up PRs to address the comments in this one.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 117c40b
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observability	469	471	+2
triggersActionsUi	506	508	+2
total			+4

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
triggersActionsUi	485	487	+2

Async chunks

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

id	before	after	diff
observability	523.6KB	526.4KB	+2.8KB
triggersActionsUi	665.8KB	672.3KB	+6.5KB
total			+9.3KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
triggersActionsUi	48	49	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
triggersActionsUi	98.9KB	99.1KB	+176.0B

Unknown metric groups

API count

id	before	after	diff
triggersActionsUi	512	514	+2

async chunk count

id	before	after	diff
triggersActionsUi	49	50	+1

ESLint disabled line counts

id	before	after	diff
triggersActionsUi	130	131	+1

Total ESLint disabled count

id	before	after	diff
triggersActionsUi	133	134	+1

History

• 💔 Build #77160 failed 7d2bd7d
• 💚 Build #76816 succeeded 1e9691ab36f639a33d82e374cd5c609fb7f001f7
• 💚 Build #76800 succeeded 239e6ed1fa9815e701833b2a5a8ae6676f32f77d
• 💚 Build #76699 succeeded aa8249cb31152f60629f7aa84bbfbc888979d211
• 💔 Build #76671 failed a369225001c4e26532b6c8a58e52ebf9af133af5

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