Move table rendering logic to client

Registered by Thai Tran

This blueprint has been superseded. See the newer blueprint "Angularize Identity Tables" for updated plans.

As part of the larger initiative to move the bulk of rendering logic to client-side, this BP specifically focuses on moving table rendering logic to client side.

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Medium
Drafter:
Thai Tran
Direction:
Needs approval
Assignee:
Thai Tran
Definition:
Superseded
Series goal:
None
Implementation:
Needs Code Review
Milestone target:
None
Started by
David Lyle
Completed by
Thai Tran

Related branches

Sprints

Whiteboard

[5-30-2014] tqtran:
Updated [6-12-2014] tqtran:

General Flow:
1. User visits URL
2. Server sends browser a base table template
3. Browser renders blank table with a loading indicator
4. Browser makes AJAX request for data and layout information
5. Browser renders data layout and data

Challenges:
1. Serializing some of the data and layout objects described above
2. Need to think about how we can express actions as JSON
3. Moving column filters to client (with translation still intact)
4. Updating rows via AJAX with JSON (not HTML) using Angular

We can realize this in 3 phases:
1. Provide alternative way to render table using Angular
2. Retrofit other tables with Angular approach
3. Deprecate old server-class-based approach

Gerrit topic: https://review.openstack.org/#q,topic:bp/table-client-rendering,n,z

Addressed by: https://review.openstack.org/94706
    Clientside table rendering

[5-23-2014] tqtran

Screenshots of current flow:
https://launchpadlibrarian.net/176200832/Openstack-horizon-actions.png
https://launchpadlibrarian.net/176200866/Openstack-horizon-post-activity.png

Gerrit topic: https://review.openstack.org/#q,topic:bp/tagging,n,z

[7-10-2014] tqtran:

The patch is ready for review!
Here are 3 easy steps to enable angular for any table:
1. Inherit the JSONTableMixin in your view. This will enable serialization and provide JSON endpoints.
2. Write a data-binding template using angular. Look at _instances_table.html in the patch an for example.
3. Override the template attribute in your table class to point to the angular template you wrote in step 2.

*Note: you may need to define additional filters that are specific to your view.

After you follow these 3 easy steps, your table will start rendering using AngularJS instead of Django.

Addressed by: https://review.openstack.org/107513
    Angularize admin flavors table

Gerrit topic: https://review.openstack.org/#q,topic:bp/ng-admin-flavors,n,z

Addressed by: https://review.openstack.org/107514
    Angularize admin flavors table

Addressed by: https://review.openstack.org/107532
    Angularize admin images table

[david-lyle 2014.09.02] Moving out of Juno.

Addressed by: https://review.openstack.org/124126
    Angular table templating

Addressed by: https://review.openstack.org/124130
    Angularize project instance table

[11-06-2014] tqtran
Link to slides at paris summit explaining motivation behind this blueprint.
https://www.dropbox.com/s/dyretopq71xdqnm/Django-Angular-Playing-Nice.pdf?dl=0

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.