Overhaul network layout

[edlerd]

Done

• overhaul network layout
• add network topology map for network detail pages
• add network config key search
• combine network overview and configuration tabs into one

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
   • With a local copy of this branch, build and run as described in the docs.
2. Perform the following QA steps:
   • explore network creation and editing

[webteam-app]

Demo

Jenkins

demos.haus

[mas-who]

Love the network topology and how the existing form is reused. Still need to go through the css files though.

[mas-who]

Please see some QA observations below:

1. Can we align the text for the network detail page general section? There is probably some margin that needs to be removed.
   

2. On smaller screens, on the create network page (edit page is fine), the config nav with the search bar seems to overlap with other page contents. Also maybe the nav can become collapsible on small screens?
   

3. When creating a network, if name is not entered we can switch to the yaml editor. Seems a little strange since we can set the network name in the yaml editor itself. Perhaps this is something to think about in the long run as it affects other creation forms too. Also we would have to figure out how to handle name field population in the yaml editor etc...
   

4. Should we show the downstream instances connected to the ovn networks in the following scenario? Probably a design question for @piperdeck . If not, we should probably get rid of the unconnected lines at the end of the topology.
   Note that in this scenario, I have instance i1 connected to the uplink as well as several ovn networks, the topology presented makes me think that i1 is only connected to the uplink network. wdyt?
   

[edlerd]

Please see some QA observations below:

1. Can we align the text for the network detail page general section? There is probably some margin that needs to be removed.

Yes, good point, fixed the alignment.

2. On smaller screens, on the create network page (edit page is fine), the config nav with the search bar seems to overlap with other page contents. Also maybe the nav can become collapsible on small screens?

I think we should hide the nav and search bar on small screens, which is done with recent changes.

3. When creating a network, if name is not entered we can switch to the yaml editor. Seems a little strange since we can set the network name in the yaml editor itself. Perhaps this is something to think about in the long run as it affects other creation forms too. Also we would have to figure out how to handle name field population in the yaml editor etc...

I think the name is mandatory to switch to the yaml editor, and that should be fine in my opinion. The editor would only be used for some advanced configuration that is not supported in the ui.

4. Should we show the downstream instances connected to the ovn networks in the following scenario? Probably a design question for @piperdeck . If not, we should probably get rid of the unconnected lines at the end of the topology.

I am now adding a line and three dots to downstream networks that have descendants. I discussed this with @piperdeck a while back, and I think we both agreed to only focus on direct neighbours in the topology and announcing further connections in this way. So we keep the focus on the current network and users can easily jump to the next network to explore further.

[piperdeck]

@edlerd

I've left some comments and feedback in a Figma page: https://www.figma.com/design/obSXJ4VkJUa2fHjt5lNf68/25.04-OVN-Networking?node-id=242-9623

[mas-who]

It's working very nicely, just a few more observations.

[edlerd]

Thanks for the comments and suggestions @piperdeck @mas-who and @lyubomir-popov
Please have another look, with the recent commit all things should be addressed.

[mas-who]

LGTM from my end 👍

[edlerd]

@piperdeck gave design +1 yesterday. @mas-who if you have some time on Monday, please give another review of the updates.