Table row detail drawers
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://
UX:
The UX will support the experience being developed for:
Launch instance:
https:/
Identity tables:
https:/
Instance details:
https:/
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:
-
2015.1.0
- Started by
- David Lyle
- Completed by
- David Lyle
Related branches
Related bugs
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:/
Gerrit topic: https:/
Addressed by: https:/
WIP Re-designed and Angularized tables
Gerrit topic: https:/
[2015-02-
Addressed by: https:/
Adding constants to tables
Addressed by: https:/
Default sort added to hzTable
Work Items
Dependency tree
* Blueprints in grey have been implemented.
