Replace network topology with curvature based graph

Registered by Bradley Jones

Replace the existing network topology diagram with an interactive graph. This graph will expose all of the Instances, Subnets, Routers, LBaas Load Balancers, and FWaas Firewalls belonging to the selected Tenant in an easy to interpret logical network topology layout.

The current network topology view is not as effective as it could be at making the logical network easier to understand, and doesn’t provide much interactivity. In addition, with large numbers of instances and networks the current view fails to scale into a meaningful view of a user’s deployment . These are the three main improvement areas we seek to address.

We seek to iteratively replace the current network topology diagram with a Curvature based graph to provide an improved user experience. Initially the static network topology will be replaced with a new graph with a similar level of interactivity that is currently available. Future work will add more functionality to the new network topology view until it reaches or exceeds feature parity with the standalone version of Curvature.

Step to be taken:
Replace the current network topology with a Curvature based visualization
Add ‘drag and drop’ to create instances/networks/
Add real time updates (launching of vms, etc.) without requiring page refresh (dependent on AngularJS)

For the proposed level of functionality there are no prerequisite changes. Future updates may depend on Horizon being modified to serve more JSON data.

The new Curvature based graph will consume the same JSON data used by the existing network topology diagram. Changes to this data may be required to expose LBaas and FWaas. All user-interactions will be handled by the existing API framework for CRUD operations on Instances, Subnets, etc.

This will be a complete change to the current network topology and will need input on UX design issues. UX team signoff will be required.

Wireframes, Mocks, Videos and UI Markup
Video Demo:
Portland Summit presentation video & slides:

Screenshot of proposed change

Brief instruction for reviewers to exercise the changes, including expected results where non-obvious.

Outside Dependencies
There will be no cross-project impact.
Requirements Update Required
We require D3.js & AngularJS which are already used in Horizon
Look into Icon libraries to be used (Font Awesome?).

Doc Impact
Any documentation referring to the current network topology will need to be updated to describe the new version.

Blueprint information

David Lyle
Bradley Jones
Bradley Jones
Series goal:
Accepted for liberty
Milestone target:
milestone icon 8.0.0
Started by
David Lyle
Completed by
David Lyle

Related branches



Targeted for liberty-1
Specifically this step: Replace the current network topology with a Curvature based visualization

Gerrit topic:,topic:bp/curvature-network-topology,n,z

Addressed by:
    Add Curvature topology

[lblanchard 2014-02-02]

Hi All,

I really love where the curvature design has gone with representing the OpenStack environment for a user. I wanted to take some time to review the latest demo and give some feedback/ask some questions from a UX perspective. Please let me know if you have any questions or concerns on these thoughts...

1) Could the mouse icon change when the user is hovering over items in the canvas? It would be nice to use something to make it really clear that these items are able to be grabbed.
2) I wonder if it will take a while for users to discover that they can double click the link tool to connect multiple nodes at once. One idea to improve this interaction is to break out the Tools tab (which doesn’t seem to fit quite right with the others anyways and allow for a section where the user has the tools that they select to interact with the canvas. I’m thinking the first selection could just be the cursor. The second could be the link tool, and the third could be the Remove tool. In this case, one “Tool” would always be selected.
3) Perhaps we could add a subtle key somewhere describing that the blue means underplayed? Also, this could include info around what orange and black states mean.
4) Is there a reason that the blue coloring is different shades for the two nodes? Should it be the same?
5) I think it might be a good idea to always show the tools that are available. They could be disabled until they are allowed to be used. For example, Remove and VNC would be disabled until a node is actually selected.

[david-lyle | 2015-03-15] Moving out of Kilo. I think this has a ways to go before being ready, but would still like to have it in early Liberty.

[tsufiev | 2015-07-01] Tested and liked very much. Also to make this topology graph reusable (mostly due to selfish motives of using this for Merlin/Mistral/HotBuilder) I've started extracting the logic of the topology graph as an Angular widget customizable with another Angular directive. Do I need to file a separate blueprint for that effort?

Addressed by:
    Refactor network topology graph as an Angular directive

Addressed by:
    Default Sidebar should grow with page height

Addressed by:
    Refactors network topology into angular elements


Work Items

This blueprint contains Public information 
Everyone can see this information.