Table row detail drawers

Registered by David Lapsley on 2014-05-22

Summary:
Create a reusable table that includes table drawers

Motivation:
Horizon tables are great for summarizing information about a large number of entities. Currently, in order to see more information about a particular entity, a user must click on a detail link that will redirect to another page. This requires a full page load, and can be a little time consuming.

The initial driving motivation is to redesign the launch instance wizard based on a modern, responsive design that is based on client side rendering using angular. Another motivation is to modernize the identity tables.

This was discussed in numerous sessions at the Kilo summit that the right direction going forward is to move this to client-side. AngularJS appears to be the first choice primarily because of its structure and MVW framework.

Although the desired target is launch instance, we want to separate out the basic table with a reusable widget in angular that can be used throughout horizon. This will enable easier reviews and cleaner separation. We will co-develop it with the more complicated launch instance work and identity table work, but will ensure good separation is maintained.

Description:

In this blue print, we propose the addition of a table enhancement that will enable this information to be displayed within the table as a slide-down "drawer" that is activated when the user clicks on a toggle switch within a row. The drawer will appear as an additional row (with configurable height) and will contain additional information about the entity in the row above it (e.g. additional entity details, metrics, graphs, etc.). Multiple drawers may be opened at one time.

The widget will be as lightweight as possible, but still allow for customization.

Interactive tutorial on AngularJS:
http://campus.codeschool.com/courses/shaping-up-with-angular-js/

UX:

The UX will support the experience being developed for:

Launch instance:
https://blueprints.launchpad.net/horizon/+spec/launch-instance-redesign

Identity tables:
https://blueprints.launchpad.net/horizon/+spec/angularize-identity-tables

Instance details:
https://blueprints.launchpad.net/horizon/+spec/instance-details-redesign

Outside Dependencies:
None

Requirements Update Required:
Smart table
Angular 1.3.7
Angular bootstrap

Doc Impact:
None

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
High
Drafter:
Travis Tripp
Direction:
Approved
Assignee:
Kelly Domico
Definition:
Approved
Series goal:
Accepted for kilo
Implementation:
Implemented
Milestone target:
milestone icon 2015.1.0
Started by
David Lyle on 2015-02-06
Completed by
David Lyle on 2015-03-03

Related branches

Sprints

Whiteboard

[2014-11-17 | david-lyle] I would like to see this implemented in Kilo. I would like to see more details around the UX and overall design.

[2015-01-21 | travis-tripp] I This table drawer concept is actually being done as part of the launch instance redesign and for the identity table work. The work is all spec'd out in rich mockups on the launch instance design. https://blueprints.launchpad.net/horizon/+spec/launch-instance-redesign Additional mockups may be available. Kelly Domico (kelly-domico) is actively working on this effort. See: https://review.openstack.org/#/c/147393/ If needed this BP could be assigned to her.

Gerrit topic: https://review.openstack.org/#q,topic:bp/table-row-detail-drawers,n,z

Addressed by: https://review.openstack.org/147393 -- merged
    WIP Re-designed and Angularized tables

Gerrit topic: https://review.openstack.org/#q,topic:responsive-table-demo,n,z

[2015-02-11][tqtran] Bumping to high priority as it is required for launch instance and identity rework.

Addressed by: https://review.openstack.org/156016 -- merged
    Adding constants to tables

Addressed by: https://review.openstack.org/158090 -- merged
    Default sort added to hzTable

(?)

Work Items

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.