[Uptime] Move uptime to new solution nav

[shahzad31]

Summary

Fix: #99901

Move uptime to new solutions nav

The following considerations have been addressed

• Accessibility has been considered, relevant aria tags and other accessibility features implemented
• Telemetry has been added where relevant
• Testing for expected behavior is in place
  • Automated tests exist to cover expected and edge case conditions
  • User acceptance testing has been carried out to ensure the feature functions as expected within the context of how it will be used
  • Any special/edge cases that need to be manually tested must be documented
  • Ensure the new layout works responsively (including down to small phone widths, where makes sense for the user flow, e.g. the error page when reacting to an alert)

Know Issues:

• Monitoring Overview route always remain selected ( will be fixed once this is merged ([Observability] Expose options to customize sidebar route matching #100886)

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[shahzad31]

Note that title are wrapped in h1, this is a known issue and design team is working on a solution.

[justinkambic]

It's really exciting seeing this design come to life!

Looking at the issue for this it seems we also wanted to add a new breadcrumb for the overview page. I think this difference is largely semantic, as both the Uptime and Monitoring overview breadcrumb will be disabled for that page.

Also, I am noticing that the Uptime breadcrumb should be disabled when we're on the overview page and today it isn't, so it links back to the current page. Sometimes this functionality is intentional for things like clearing filters, but our page doesn't do that either. I'd be fine fixing that as part of this change or creating a follow-up issue.

Additionally, I noticed the focus moves to the newly-loaded page after navigating via the keyboard. I'd imagine this is controlled more by the nav component than the revisions in this PR but I did find it jarring. This new nav UI frames Observability as a more unified app and I didn't plan on focus moving from the universal nav after choosing a view. Curious to hear @dominiqueclarke's feedback on this.

[shahzad31]

@justinkambic i have added the breadcrumb for Monitoring overview, just to be clear, i have kept uptime clickable, since i think it's natural to do that.

I didn't understand your focus shifting question though.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: d0c4da6
• Storybooks Preview

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
uptime	1.1MB	1.1MB	-3.0KB

Page load bundle

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

id	before	after	diff
uptime	19.5KB	20.0KB	+595.0B

Unknown metric groups

References to deprecated APIs

id	before	after	diff
canvas	29	25	-4
crossClusterReplication	8	6	-2
fleet	22	20	-2
globalSearch	4	2	-2
indexManagement	12	7	-5
infra	256	146	-110
lens	67	45	-22
licensing	18	15	-3
lists	239	236	-3
maps	286	208	-78
ml	121	115	-6
monitoring	109	56	-53
securitySolution	390	346	-44
stackAlerts	101	95	-6
total			-340

History

• 💚 Build #128329 succeeded cb45c37
• 💔 Build #128168 failed 0a27dab
• 💔 Build #127965 failed 5c963e6ad926a3d36d89e32950ad4dea78d72c0a
• 💔 Build #127950 failed 2a4c99fcdb1e6a131ca56c460c1a72065986986f
• 💔 Build #127943 failed 9177eaa6c7794460f951e9d58940e1d177ca9276

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

cc @shahzad31

[justinkambic]

Code looks good. Regarding the focus issue I was talking about, I've included a new GIF below:

When navigating this UI with my keyboard only, it's really hard for me to quickly switch between views and it feels as though it should be much easier. I'm not sure if this is an issue with the underlying nav API or with our app but it could improve.

[shahzad31]

@justinkambic yes you are right, the tab order is weird. It's controlled by shared component. I will log an issue with EUI team to take a look at this.

[shahzad31]

Code looks good. Regarding the focus issue I was talking about, I've included a new GIF below:

When navigating this UI with my keyboard only, it's really hard for me to quickly switch between views and it feels as though it should be much easier. I'm not sure if this is an issue with the underlying nav API or with our app but it could improve.

@weltenwort @cchaos any ideas, how this keyboard nav can be improved?

[justinkambic]

It's controlled by shared component.

That's what I figured, I don't see any need to hold this PR based on that.

[justinkambic]

LGTM!

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

[cchaos]

Hey @shahzad31 , I know you just merged this, but I'm seeing something odd in the layout. It looks like there's padding around the whole template causing the side nav and panels not to attach to the window edges. Is this an artifact of the placement of the observability specific template or where the Kibana template is placed?

As for the focus, neither the Kibana or EUI page templates do any forcing of focus states.

[shahzad31]

Hey @shahzad31 , I know you just merged this, but I'm seeing something odd in the layout. It looks like there's padding around the whole template causing the side nav and panels not to attach to the window edges. Is this an artifact of the placement of the observability specific template or where the Kibana template is placed?

As for the focus, neither the Kibana or EUI page templates do any forcing of focus states.

@cchaos that's a good catch, i have removed that padding in this PR #101005