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

Matt Wagner matt.wagner at redhat.com
Mon May 21 14:57:13 UTC 2012


On Mon, May 21, 2012 at 04:50:43PM +0200, Imre Farkas wrote:
> 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.

Oops, I had also started to review this. Just one more note -- the top
scoreboard doesn't appear to update automatically; only the smaller
scoreboard above each pool.

Otherwise, +1 to what Imre says.

-- Matt



More information about the aeolus-devel mailing list