[Obs Nav] Create sub-nav hierarchy for stateful and serverless

[paulb-elastic]

There is requirement to change the design of the left navigation, to be based on a second level navigation pane, in place of the current expanding (nested) sections.

This needs to be applied to both stateful and severless (as a reminder, there are already some differences between the menu options available in stateful and serverless, and this will still be the case even with this new layout).

A clickable version of the figma mock up (specifically for stateful) can be found here.

Note that the Platform team (@sebelga) can help point us in the right direction if there are any questions on how this should be implemented.

Acceptance Criteria

• The “switch on new navigation” will still be an opt-in (per space) in stateful, in 8.16 (as is the current behaviour)
  • You opt in via Stack Management > Spaces > Navigation > Set solution view
  • Change from empty/classic, to Observability
  • Note that you don’t opt-in in with serverless as there is only one kind of navigation (the layout of which will be updated with this issue)
• With this change, the sub-navigation will be shown instead of the collapsable/nested view we have currently:
  • By default in serverless
  • In 8.16 in stateful if opted in (i.e. Set solution view == Observability)
• The current single level menu items (like Alerts), do not change
• The hover behaviour for the menus are shown in the figma mockup

⚠️ NOTE that @kkurstak is confirming the use of title/sentence case for the various menu headings and items

Stateful

The navigation options where there are two levels available for stateful are as follows (see figma for mock up) - note these use Sentence case:

• Applications (first level)
  • Applications (main heading in second navigation panel not clickable)
  • Services
  • Traces
  • Dependencies
  • User experience
  • SYNTHETICS (subheading not clickable) - NOTE this has moved under Applications from it’s current top-level position
  • Monitors
  • TLS certificates
• Infrastructure (first level)
  • Infrastructure (main heading in second navigation panel not clickable)
  • Inventory
  • Hosts
  • Metrics explorer
  • UNIVERSAL PROFILING (subheading not clickable)
  • Stacktraces
  • Flamegraphs
  • Functions
• Machine learning (first level)
  • Machine learning (main heading in second navigation panel not clickable)
  • Overview
  • Notifications
  • Memory usage
  • ANOMALY DETECTION (subheading not clickable)
  • Jobs
  • Anomaly explorer
  • Logs anomalies
  • Single metric viewer
  • Settings
  • DATA FRAME ANALYTICS (subheading not clickable)
  • Jobs
  • Results explorer
  • Analytics map
  • MODEL MANAGEMENT (subheading not clickable)
  • Trained models
  • Flamegraphs
  • DATA VISUALIZER (subheading not clickable)
  • File
  • Data view
  • ES|QL
  • Data drift
  • AIOPS LABS (subheading not clickable)
  • Log rate analysis
  • Log pattern analysis
  • Change point detection
• Other tools (first level)
  • Other tools (main heading in second navigation panel not clickable)
  • Logs stream
  • Logs categories
  • Canvas
  • Maps
  • Graph
  • Visualise library
• Management (first level)
  • Management (main heading in second navigation panel not clickable)
  • Integrations
  • Fleet
  • Osquery
  • INGEST (subheading not clickable)
  • Logstash pipelines
  • Ingest pipelines
  • DATA (subheading not clickable)
  • Index management
  • Index lifecycle policies
  • Data set quality
  • Snapshot and restore
  • Rollup jobs
  • Transforms
  • Cross-cluster replication
  • Remote clusters
  • ALERTS AND INSIGHTS (subheading not clickable)
  • Alerts
  • Rules
  • Connectors
  • Reporting
  • Watcher
  • Maintenance windows
  • SECURITY (subheading not clickable)
  • Users
  • Roles
  • API keys
  • Role mapping
  • KIBANA (subheading not clickable)
  • Data views
  • Files
  • Saved objects
  • Tags
  • Search sessions
  • Spaces
  • Advanced settings
  • STACK (subheading not clickable)
  • Upgrade assistant

Serverless

The navigation options where there are two levels available for serverless are as follows:

• See Figma

Breadcrumbs

• Check that breadcrumbs are not affected by the change, and if necessary, raise a follow up to fix them
  • For stateful
  • For serverless

[elasticmachine]

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

[kkurstak]

Adding the link to our main figma file. I've passed all relevant information to the obs team - just in case any last-minute changes need to happen. I'll be back next week.

[paulb-elastic]

I've added a note about checking the breadcrumbs aren't impacted by this change

[paulb-elastic]

@kkurstak I've added a couple of items that @gbamparop raised were missing:

• Added Data set quality
• Added Logs categories

[sebelga]

I just had a quick look at the figma. If we want to use a chevron arrow instead of the 4 square icons used in security solution I think it would be good to confirm first that:

• It plays nicely with an accordion group next to it (I am wondering if it is not confusing to have 2 arrows at 90deg difference)
• The security team agrees to change their icon (we probably want consistency)

[kkurstak]

Update - serverless designs under this link. Waiting for final approval from Vinay :)

@paulb-elastic thank you so much for pointing out the misses. I must have been looking at another version of this menu - really sorry about that. I've added the two items.

[kkurstak]

@sebelga -

It plays nicely with an accordion group next to it (I am wondering if it is not confusing to have 2 arrows at 90deg difference)

Good eye! We have actually had a discussion within the team about this. For now we want the simplest behaviour - on click: show secondary menu; second click (unclick;) - hide secondary menu.

Any changes to the behaviour would be decided after we gather some user feedback on this. Our key here is changing the arrow appearance on the active state - instead of adding an additional interaction.

The security team agrees to change their icon (we probably want consistency)

I'm not sure this is in the scope for now. The pattern presented here works a bit differently from the security pattern. Not an ideal solution, but I don't see this as a must.

[kkurstak]

I have serverless screens with the final comments from @vinaychandrasekhar. All logic is well-described in the figma. I have spoken with Elizabeth about starting a continuous research project on the Observability navigation - will get back to this topic in the early autumn, as we manage all current initiative priorities first. Thank you for all your support

[sebelga]

I'm not sure this is in the scope for now. The pattern presented here works a bit differently from the security pattern. Not an ideal solution, but I don't see this as a must.

Can you clarify your answer?

What I tried to say is that, the icon is not customisable (and we probably don't want to allow it). So if we decide to go with an arrow, it will change the icon for the security team too. This is a reusable component where we want consistency for all users across solutions.

[kkurstak]

Thank you @sebelga for clarifying.

One more question from my side - what about the behaviour? The solution we are proposing consists of 1 action -> the clicking on the navigation item opens the secondary menu on the right. Security's pattern consists of 2 actions -> clicking on the icon opens the secondary menu on the right, whereas clicking on the navigation menu title opens a landing page.

With these changes, will the icon still be not customisable? [as these menus would be working differently - the pattern we want is different from the security's one]

[sebelga]

With these changes, will the icon still be not customisable? [as these menus would be working differently - the pattern we want is different from the security's one]

Everything can be done, I am just a bit worried about the timing to add another group type to the side navigation.

Is the design finalised? If so it would be good to create an issue for our team with this specific ask so we can keep track of it. Your team would be blocked by it to be able to change the oblt navigation.

[kkurstak]

Thank you @sebelga . Yes, the design is finalised. This planning would be out of my control - @vinaychandrasekhar could you please have a look here?

[vinaychandrasekhar]

@sebelga are we truly blocked by it or can our team help? I'll also check in with @jasonrhodes tomorrow.

[sebelga]

are we truly blocked by it or can our team help?

Yeah sorry I meant blocked by the component not (yet) supporting it. Sure @jasonrhodes can help 👍

[paulb-elastic]

Just checking in on this:

• @vinaychandrasekhar are you ok with the final serverless layout?
• @kkurstak and @sebelga are you both aligned about consistency of the arrows?
  • Is the expectation that @jasonrhodes's team contribute to change this so it is customisable (and different for Observability)?
• @jasonrhodes do you have what you need to begin working on this?

Also, do we need to coordinate this Observability change with other solutions, or can we make this and merge it into main as we're able, at which point it will shortly after be released in serverless (and then hit in 8.16 for those opted into the new navigation)?

[sebelga]

are you both aligned about consistency of the arrows

Yes 👍

Is the expectation that @jasonrhodes's team contribute to change this so it is customisable

I synced with Jason and he is all set to make the changes in the SharedUX component

do we need to coordinate this Observability change with other solutions, or can we make this and merge it into main

You don't need to coordinate with other solutions, the change to the component will not affect them.

[jasonrhodes]

@kkurstak I'm making a new issue (that will reference this one) to clarify a lot of things for my engineers to pick this up ASAP. I am looking at the linked Figmas and I think the Serverless design frames all say "Stateful A" as their title. Can you change those so we can avoid confusion there? I'd change them but I don't have edit access on the Figma. Thank you.

For those following along, this is the other issue I'm creating. I'll close this one once I've got that one finished and delivered to my team. Thanks to @sebelga for the excellent walkthrough last week (which I've recorded and will share with my team, whoever picks this up).

[vinaychandrasekhar]

Folks (@jasonrhodes / @kkurstak ) please note there are a couple bugs in the Figma that we need to fix during our implementation. (thanks @arisonl for letting us know!).

• Figma shows "Logs anomalies" under Machine Learning->Anomaly Detection. That's incorrect and "Logs anomalies" should instead be shown before "Logs categories" under Other Tools. (This is inline with how both those options appear under Logs currently, and should not be separated)
• Figma shows "Flamegraphs" under Machine Learning->Model Management. That's incorrect and "Flamegraphs" should be removed. (that option is already shown under Infrastructure->Universal Profiling which is the right place)

Goal would be to keep the Machine Learning menu intact, the way it's currently presented in the Management / Stack Management area.

cc @paulb-elastic

[jasonrhodes]

This issue has been fully replaced by https://github.com/elastic/kibana/issues/192050