[Alert details page][Custom threshold] Add group by and tags fields to the alert details page summary

[maryam-saeidi]

Closes #155698
Closes #174236

Summary

This PR adds group and tag information to the alert details page summary fields for the custom threshold rule:

🧪 How to test

• Enable alert details page config

  xpack.observability.unsafe.alertDetails.observability.enabled: true
  

• Create a custom threshold rule with a group by and add more than 3 rule tags
• After the alert is fired, go to the alert details page (from alert flyout or menu action in the alert table); you should see the group by and tags information there.

[apmmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
• run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

[maryam-saeidi]

/ci

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

[benakansara]

Should adjust spacing when "Tags" is empty and show "-" under "Tags"?

[maryam-saeidi]

Should adjust spacing when "Tags" is empty and show "-" under "Tags"?

Good point! I can also hide tags if we don't have any. @maciejforcone What do you think? Is it better to hide tags or just show a - when we don't have any?

[maciejforcone]

Good point! I can also hide tags if we don't have any. @maciejforcone What do you think? Is it better to hide tags or just show a - when we don't have any?

I also think that we can just hide tags header in this case.

[maryam-saeidi]

@benakansara I checked the code, and I saw I was checking if tags exist, but in our case, tags are an empty array, and because of that, the code didn't work correctly. I fixed it in this commit: 87bab8e

[benakansara]

@maryam-saeidi @maciejforcone Should we adjust spacing around tags when there are less number of tags (first screenshot below)? We can show all alert summary fields (source, tags, any other) equally spaced, wdyt?

[maryam-saeidi]

@maryam-saeidi @maciejforcone Should we adjust spacing around tags when there are less number of tags (first screenshot below)? We can show all alert summary fields (source, tags, any other) equally spaced, wdyt?

If you mean to spread the content to fill the whole row, personally, I like the current structure better.
If you mean having a bit more space between columns, I think it is a good idea. I checked the design, and it seems the space is more than the current implementation. @benakansara Is that what you meant?

Current

With XL gutterSize:

[benakansara]

I meant to spread the content to fill the whole row. I remember at some point we had this kind of design in alert details page (when I added tags in APM alert details page long time back). But it seems the design is changed since then. I checked the APM alert details page now, and looks similar to design in this PR.

I think adding xl gutterSize will help.

[benakansara]

LGTM

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 8daf713

Failed CI Steps

• Jest Tests #5

Test Failures

• [job] [logs] Jest Tests #5 / useGetCaseMetrics shows an error toast when getSingleCaseMetrics throws

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
observability	581	583	+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	600.7KB	602.0KB	+1.3KB

History

• 💛 Build #187619 was flaky f9f713b
• 💚 Build #187438 succeeded 29baece
• 💚 Build #186259 succeeded d1e4a47
• 💔 Build #186117 failed 0fa6aaf
• 💔 Build #186108 failed 8e722d4
• 💛 Build #185834 was flaky e28e17d

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

cc @maryam-saeidi