Replace network topology with curvature based graph

Registered by Bradley Jones on 2014-11-21

Summary
=======
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.

Motivation
========
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.

Description
=========
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.

UX
===
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: http://youtu.be/oFTmHHCn2-g
Portland Summit presentation video & slides: https://www.openstack.org/summit/portland-2013/session-videos/presentation/interactive-visual-orchestration-with-curvature-and-donabe

Screenshot of proposed change
----------------------------------------------
http://imgur.com/a/qddWB

Testing
======
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

Status:
Complete
Approver:
David Lyle
Priority:
Medium
Drafter:
Bradley Jones
Direction:
Approved
Assignee:
Bradley Jones
Definition:
Approved
Series goal:
Accepted for liberty
Implementation:
Implemented
Milestone target:
milestone icon 8.0.0
Started by
David Lyle on 2015-01-06
Completed by
David Lyle on 2015-09-17

Related branches

Sprints

Whiteboard

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

Gerrit topic: https://review.openstack.org/#q,topic:bp/curvature-network-topology,n,z

Addressed by: https://review.openstack.org/141078
    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: https://review.openstack.org/199063
    Refactor network topology graph as an Angular directive

Addressed by: https://review.openstack.org/215745
    Default Sidebar should grow with page height

Addressed by: https://review.openstack.org/543829
    Refactors network topology into angular elements

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.