Editable Network Topology View

Registered by Toshiyuki Hayashi on 2013-04-10

This feature enable to delete a instance or router on the network topology view. Also it enables to launch router, instance, vnc console and network on the view. So you can do basic actions on the view.
Please check the following images.
https://googledrive.com/host/0BzC_ZCA5viU_Qy1ITkVPNjVFQm8/demo1.png
https://googledrive.com/host/0BzC_ZCA5viU_Qy1ITkVPNjVFQm8/demo2.png

Blueprint information

Status:
Complete
Approver:
Gabriel Hurley
Priority:
Medium
Drafter:
Toshiyuki Hayashi
Direction:
Approved
Assignee:
Toshiyuki Hayashi
Definition:
Approved
Series goal:
Accepted for havana
Implementation:
Implemented
Milestone target:
milestone icon 2013.2
Started by
Gabriel Hurley on 2013-04-30
Completed by
David Lyle on 2013-08-30

Related branches

Sprints

Whiteboard

[gabrielhurley] We should look into using d3 (http://d3js.org/) for rendering the visualization, since Horizon is going to move towards using d3 for all graphs, charts and visualizations in the Havana.

[hayashi] Actually I've thought about using D3 or any other SVG framework for visualizing Network topology view. I prefer SVG rather than canvas, because SVG have actual nodes that means something, it is more semantic compared to canvas.
I'll try using d3 for network topology view. Is it OK?
Also, I think I can do this blue point as well:
https://blueprints.launchpad.net/horizon/+spec/d3

[2013-07-16 | Gabriel] I'd rather see this land as a robust, well-tested feature early in I than try to rush it into H. I'm willing to reconsider if great code shows up early in H3, but for now I'm going to defer this.

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

Addressed by: https://review.openstack.org/41775
    Delete and launch devices on the topology view

[hayashi]
screenshots
https://dl.dropboxusercontent.com/u/7098/openstack/ntp/1.png
https://dl.dropboxusercontent.com/u/7098/openstack/ntp/2.png
https://dl.dropboxusercontent.com/u/7098/openstack/ntp/3.png

movie
https://www.youtube.com/watch?feature=player_embedded&v=5UTkW2QoafU

[lblanchard] Toshi - These screens look awesome, great work on the design and development. It's very powerful to be able to view what is happening with the network topology in a visual way. I love the addition of the small and normal sizing. A few small thoughts:

-Do you think we need the "X" icon to close the hover over on the instance details? Maybe a 500ms buffer and mouse out would be fine for it disappearing? Just a small idea to save a click.
-I wonder if "view instance details" is a better label rather than "more info"...although it is much longer, so it would make the box a bit wider. It's a bit more descriptive of where the user will be taken and it's consistent grammar with the "open console" label. I guess this comment would apply to routers and networks too.

[hayashi]
Liz, Thank you very much for helpful comments! Regarding label issues, I totally agree with you. I'll update you pointed out. Regarding "X" icon, It's difficult to judge, I still think it would be better to have it for now. If the balloon is much smaller such as tool tip, I think it doesn't need to have "X", but it uses some space of UI, user might want to hide immediately, so I think it would be better to have it (like Google maps's balloon). But I'm gonna change to the more discreet design, it is somehow messy.
Also, I haven't implemented auto hide function when mouseout, I'm gonna implement, but it takes some time because it is a little bit complicated, it might be after H3. The balloon is hidden when the user clicks 'x' or clicks outside of the balloon for now.
Thanks again for the comments, I'll fix you pointed out soon.

[lblanchard] Sounds great. Thanks!

Gerrit topic: https://review.openstack.org/#q,topic:bug/1215683,n,z

[hayashi]
I fixed the label issues.
https://dl.dropboxusercontent.com/u/7098/openstack/ntp/4.png
Regarding the auto hide, not yet.

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.