[PATCH] BZ810919 mustach-ify pretty-view pool header so that instance/deployment counts are automatically updated

Imre Farkas ifarkas at redhat.com
Mon May 21 14:50:43 UTC 2012


On 05/21/2012 03:22 PM, Tzu-Mainn Chen wrote:
> ---
>   src/app/helpers/mustache_helper.rb                 |    1 +
>   src/app/views/pools/_pretty_list.html.haml         |   24 ++++---------------
>   .../views/pools/_pretty_list_header.html.mustache  |   24 ++++++++++++++++++++
>   src/public/javascripts/backbone/routers.js         |    8 ++++++
>   src/public/javascripts/backbone/views.js           |    7 +++++-
>   5 files changed, 44 insertions(+), 20 deletions(-)
>   create mode 100644 src/app/views/pools/_pretty_list_header.html.mustache
>
> diff --git a/src/app/helpers/mustache_helper.rb b/src/app/helpers/mustache_helper.rb
> index eed0223..739f979 100644
> --- a/src/app/helpers/mustache_helper.rb
> +++ b/src/app/helpers/mustache_helper.rb
> @@ -76,6 +76,7 @@ module MustacheHelper
>       {
>         :id               =>  pool.id,
>         :name             =>  pool.name,
> +      :view_path =>  pool_path(pool),
>         :filter_view_path =>  pool_path(pool, :view =>  :filter),
>         :failed_instances_present =>  pool_statistics[:instances_failed_count]>  0,
>         :deployments_count        =>  pool.deployments.count,
> diff --git a/src/app/views/pools/_pretty_list.html.haml b/src/app/views/pools/_pretty_list.html.haml
> index 041d092..7061af6 100644
> --- a/src/app/views/pools/_pretty_list.html.haml
> +++ b/src/app/views/pools/_pretty_list.html.haml
> @@ -4,25 +4,8 @@
>   .content#pools-list
>     - @pools.each do |pool|
>       %div.pool.overview{:id =>  ['pool', pool.id], :class =>  ('collapsed' unless pool.deployments.size>  0)}
> -      %header
> -        %h3.name
> -          = link_to pool.name, pool
> -        %dl.statistics
> -          %ul.groups
> -            %li
> -              %dt=t 'deployments.deployments'
> -              %dd.count.deployment= pool.deployments.size
> -            %li
> -              %dt=t 'instances.instances.other'
> -              %dd.count.instance= pool.instances.size
> -              %dd.count.instance.pending= pool.instances.select {|i| i.state == Instance::STATE_PENDING }.length
> -              %dd.count.instance.failure= pool.instances.select {|i| i.state == Instance::STATE_ERROR || i.state == Instance::STATE_CREATE_FAILED }.length
> -            %li
> -              %dt=t'quota_used'
> -              %dd.percentage.quota
> -                = number_to_percentage(pool.quota.percentage_used, :precision =>  0)
> -        %a.control{:href =>  '#'}
> -          %span Expand/Collapse
> +      %header{:class =>  "pool-header-#{pool.id}"}
> +        = render :partial =>  'pretty_list_header', :mustache =>  pool_for_mustache(pool)
>         %div.content
>           - deployments = paginate_collection(pool.deployments.includes(:owner, :pool, :instances, :events).list_for_user(current_user, Privilege::VIEW).ascending_by_name, params[:page], PER_PAGE)
>           = render :partial =>  'deployments', :locals =>  {:pool =>  pool, :deployments =>  deployments}
> @@ -48,3 +31,6 @@
>         });
>       })
>     });
> +
> +%script#poolPrettyListHeaderTemplate{ :type =>  'text/html' }
> +  = render :partial =>  'pretty_list_header'
> diff --git a/src/app/views/pools/_pretty_list_header.html.mustache b/src/app/views/pools/_pretty_list_header.html.mustache
> new file mode 100644
> index 0000000..140cd67
> --- /dev/null
> +++ b/src/app/views/pools/_pretty_list_header.html.mustache
> @@ -0,0 +1,24 @@
> +<h3 class="name">
> +<%= link_to('{{name}}', '{{view_path}}') %>
> +</h3>
> +<dl class="statistics">
> +<ul class="groups">
> +<li>
> +<dt><%= t('deployments.deployments')%></dt>
> +<dd class="count deployment">{{deployments_count}}</dd>
> +</li>
> +<li>
> +<dt><%= t('instances.instances.other')%></dt>
> +<dd class="count instance">{{statistics.total_instances}}</dd>
> +<dd class="count instance pending">{{statistics.instances_pending}}</dd>
> +<dd class="count instance failure">{{statistics.instances_failed_count}}</dd>
> +</li>
> +<li>
> +<dt><%= t('quota_used')%></dt>
> +<dd class="percentage_quota">{{statistics.quota_percent}}</dd>
> +</li>
> +</ul>
> +</dl>
> +<a class="control" href="#">
> +<span>Expand/Collapse</span>
> +</a>
> diff --git a/src/public/javascripts/backbone/routers.js b/src/public/javascripts/backbone/routers.js
> index 8d99ac5..ec2a23b 100644
> --- a/src/public/javascripts/backbone/routers.js
> +++ b/src/public/javascripts/backbone/routers.js
> @@ -17,6 +17,14 @@ Conductor.Routers.Pools = Backbone.Router.extend({
>         }
>         else if (view.currentView() == 'pretty') {
>           view.collection = new Conductor.Models.Deployments();
> +        view.pools = new Conductor.Models.Pools();
> +
> +	view.pools.queryParams = view.queryParams();
> +	view.pools.bind('change', function() { view.render() });
Please replace the hard tabs with soft tabs.

> +
> +        view.pools.fetch({ success: function() {
> +          view.pools.trigger('change');
> +        }})
>         }
>
>         view.collection.queryParams = view.queryParams();
> diff --git a/src/public/javascripts/backbone/views.js b/src/public/javascripts/backbone/views.js
> index 055202a..3b8e052 100644
> --- a/src/public/javascripts/backbone/views.js
> +++ b/src/public/javascripts/backbone/views.js
> @@ -100,13 +100,18 @@ Conductor.Views.PoolsIndex = Backbone.View.extend({
>             $rows.append($row);
>           }
>         }
> +
> +      var headerTemplate = $('#poolPrettyListHeaderTemplate');
> +      $.each(this.pools.models, function(index, value) {
> +        var $header = $('header.pool-header-' + value.attributes.id);
> +        $header.html(Mustache.to_html(headerTemplate.html(), value.toJSON()));
> +      });
>       }
>     }
>   });
>
>   Conductor.Views.PoolsShow = Backbone.View.extend({
>     el: '#content',
> -
>     currentView: function() {
>       if ($('form.filterable-data').length>  0) {
>         return 'table'

As we discussed on IRC, it would be better to fire only one request and 
modify the controller response to incorporate all the data needed for 
the view.

There is also one inline note.

Imre



More information about the aeolus-devel mailing list