Bug 1166963

Cloned from launchpad blueprint https://blueprints.launchpad.net/horizon/+spec/curvature-network-topology.

Description:

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.


Specification URL (additional information):

None