[PATCH conductor] BZ781579: Autoupdate for deployables#show

[Imre Farkas]

This patch depends on the following patches:
- BZ773034: Autoupdate for images#show (rev. 3)
- Fixing syntax error in model.js

[Imre Farkas]

From: Imre Farkas

https://bugzilla.redhat.com/show_bug.cgi?id=781579
---
 src/app/controllers/deployables_controller.rb |    8 ++++++
 src/app/views/deployables/show.html.haml      |   33 +++++++++++++++++++++++++
 src/public/javascripts/backbone/models.js     |   10 +++++++
 src/public/javascripts/backbone/routers.js    |   19 ++++++++++++++
 src/public/javascripts/backbone/views.js      |   13 +++++++++-
 5 files changed, 82 insertions(+), 1 deletions(-)

diff --git a/src/app/controllers/deployables_controller.rb b/src/app/controllers/deployables_controller.rb
index 2acc259..5090e81 100644
--- a/src/app/controllers/deployables_controller.rb
+++ b/src/app/controllers/deployables_controller.rb
@@ -98,6 +98,14 @@ class DeployablesController < ApplicationController
         :status => status,
       }
     end
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render :json => { :build_results => @build_results }
+      end
+    end
+
   end

def definition
diff --git a/src/app/views/deployables/show.html.haml b/src/app/views/deployables/show.html.haml
index 8d311e5..4e35572 100644
--- a/src/app/views/deployables/show.html.haml
+++ b/src/app/views/deployables/show.html.haml
@@ -106,3 +106,36 @@
       %h2.roles= t('role_assignments')
     .content
       = render :partial => 'permissions/permissions'
+
+%script#deployableBuildsTemplate{ :type => 'text/x-jquery-tmpl' }
+  :plain
+    {{each(provider_type, results) build_results}}
+      {{each(index, result) results}}
+        <li>
+          <div class="summary">
+            <div class="info">
+              <h2>${provider_type}</h2>
+              <span>${result['provider']}</span>
+              |
+              <span>${result['account']}</span>
+            </div>
+            <div class="controls">
+              <div class="build_status">
+                {{if result['status'] == 'not_built'}}
+                  <span>#{t('deployables.show.build_statuses_descriptions.not_built')}</span>
+                {{else result['status'] == 'building'}}
+                  <span>#{t('deployables.show.build_statuses_descriptions.building')}</span>
+                {{else result['status'] == 'not_pushed'}}
+                  <span>#{t('deployables.show.build_statuses_descriptions.not_pushed')}</span>
+                {{else result['status'] == 'pushing'}}
+                  <span>#{t('deployables.show.build_statuses_descriptions.pushing')}</span>
+                {{else result['status'] == 'pushed'}}
+                  <span>#{t('deployables.show.build_statuses_descriptions.pushed')}</span>
+                {{/if}}
+                <div class="build_status_icon ${result['status']}"></div>
+              </div>
+            </div>
+          </div>
+        </li>
+      {{/each}}
+    {{/each}}
diff --git a/src/public/javascripts/backbone/models.js b/src/public/javascripts/backbone/models.js
index e6e81fa..93c9114 100644
--- a/src/public/javascripts/backbone/models.js
+++ b/src/public/javascripts/backbone/models.js
@@ -33,6 +33,16 @@ Conductor.Models.Instances = Backbone.Collection.extend({
   }
 });

+Conductor.Models.Deployable = Backbone.Model.extend({
+  initialize: function(options) {
+    this.catalog_id = options['catalog_id']
+  },
+
+  url: function() {
+    return Conductor.prefixedPath('/catalogs/' + this.catalog_id + '/deployables/' + this.id);;
+  }
+});
+
 Conductor.Models.Deployment = Backbone.Model.extend({
   urlRoot: Conductor.prefixedPath('/deployments'),

diff --git a/src/public/javascripts/backbone/routers.js b/src/public/javascripts/backbone/routers.js
index d2f0123..2e17348 100644
--- a/src/public/javascripts/backbone/routers.js
+++ b/src/public/javascripts/backbone/routers.js
@@ -86,6 +86,25 @@ Conductor.Routers.Deployments = Backbone.Router.extend({
   }
 });

+Conductor.Routers.Deployables = Backbone.Router.extend({
+  routes: {
+    'catalogs/:catalog_id/deployables/:id': 'show'
+  },
+
+  show: function(catalog_id, id) {
+    id = Conductor.idFromURLFragment(id);
+    var catalogId = Conductor.idFromURLFragment(catalog_id);
+
+    if(! _.isNumber(id) || ! _.isNumber(catalogId)) return;
+
+    setInterval(function() {
+      var deployable = new Conductor.Models.Deployable({ catalog_id: catalogId, id: id });
+      var view = new Conductor.Views.DeployablesShow({ model: deployable });
+      deployable.fetch({ success: function() { view.render(); } })
+    }, Conductor.AJAX_REFRESH_INTERVAL);
+  }
+});
+
 Conductor.Routers.Images = Backbone.Router.extend({
   routes: {
     'images/:id': 'show'
diff --git a/src/public/javascripts/backbone/views.js b/src/public/javascripts/backbone/views.js
index ec558e9..5063583 100644
--- a/src/public/javascripts/backbone/views.js
+++ b/src/public/javascripts/backbone/views.js
@@ -134,6 +134,18 @@ Conductor.Views.PoolsShow = Backbone.View.extend({
   }
 });

+Conductor.Views.DeployablesShow = Backbone.View.extend({
+
+  el: '#content',
+
+  render: function() {
+    var $builds = this.$('ul#providers-list');
+    if($builds.length === 0) return;
+
+    $builds.empty();
+    $('#deployableBuildsTemplate').tmpl(this.model.toJSON()).appendTo($builds);
+  }
+});

Conductor.Views.DeploymentsShow = Backbone.View.extend({

@@ -158,7 +170,6 @@ Conductor.Views.DeploymentsShow = Backbone.View.extend({

});

-
 Conductor.Views.ImagesShow = Backbone.View.extend({
   el: '#content',

[Jan Provazník]

On 01/31/2012 04:26 PM, [e-mail] wrote:
> From: Imre Farkas
> https://bugzilla.redhat.com/show_bug.cgi?id=781579
>
> src/app/controllers/deployables_controller.rb |    8 ++++++
>   src/app/views/deployables/show.html.haml      |   33 +++++++++++++++++++++++++
>   src/public/javascripts/backbone/models.js     |   10 +++++++
>   src/public/javascripts/backbone/routers.js    |   19 ++++++++++++++
>   src/public/javascripts/backbone/views.js      |   13 +++++++++-
>   5 files changed, 82 insertions(+), 1 deletions(-)
>
> diff --git a/src/app/controllers/deployables_controller.rb b/src/app/controllers/deployables_controller.rb
> index 2acc259..5090e81 100644
> --- a/src/app/controllers/deployables_controller.rb
> +++ b/src/app/controllers/deployables_controller.rb
> @@ -98,6 +98,14 @@ class DeployablesController<  ApplicationController
>           :status =>  status,
>         }
>       end
>
> respond_to do |format|
>  format.html
>  format.json do
>    render :json =>  { :build_results =>  @build_results }
>  end
>
> end
>
> end
>
> def definition
>
> diff --git a/src/app/views/deployables/show.html.haml b/src/app/views/deployables/show.html.haml
> index 8d311e5..4e35572 100644
> --- a/src/app/views/deployables/show.html.haml
> +++ b/src/app/views/deployables/show.html.haml
> @@ -106,3 +106,36 @@
>         %h2.roles= t('role_assignments')
>       .content
>         = render :partial =>  'permissions/permissions'
>
> +%script#deployableBuildsTemplate{ :type =>  'text/x-jquery-tmpl' }
> :plain
> {{each(provider_type, results) build_results}}
>  {{each(index, result) results}}
>
> +<li>
> +<div class="summary">
> +<div class="info">
> +<h2>${provider_type}</h2>
> +<span>${result['provider']}</span>
>          |
>
> +<span>${result['account']}</span>
> +</div>
> +<div class="controls">
> +<div class="build_status">
>            {{if result['status'] == 'not_built'}}
>
> +<span>#{t('deployables.show.build_statuses_descriptions.not_built')}</span>
>            {{else result['status'] == 'building'}}
>
> +<span>#{t('deployables.show.build_statuses_descriptions.building')}</span>
>            {{else result['status'] == 'not_pushed'}}
>
> +<span>#{t('deployables.show.build_statuses_descriptions.not_pushed')}</span>
>            {{else result['status'] == 'pushing'}}
>
> +<span>#{t('deployables.show.build_statuses_descriptions.pushing')}</span>
>            {{else result['status'] == 'pushed'}}
>
> +<span>#{t('deployables.show.build_statuses_descriptions.pushed')}</span>
>            {{/if}}
>
> +<div class="build_status_icon ${result['status']}"></div>
> +</div>
> +</div>
> +</div>
> +</li>
>  {{/each}}
> {{/each}}
>
> diff --git a/src/public/javascripts/backbone/models.js b/src/public/javascripts/backbone/models.js
> index e6e81fa..93c9114 100644
> --- a/src/public/javascripts/backbone/models.js
> +++ b/src/public/javascripts/backbone/models.js
> @@ -33,6 +33,16 @@ Conductor.Models.Instances = Backbone.Collection.extend({
>     }
>   });
>
> +Conductor.Models.Deployable = Backbone.Model.extend({
> initialize: function(options) {
> this.catalog_id = options['catalog_id']
> },
> url: function() {
> return Conductor.prefixedPath('/catalogs/' + this.catalog_id + '/deployables/' + this.id);;
> }
>
> +});
> Conductor.Models.Deployment = Backbone.Model.extend({
>   urlRoot: Conductor.prefixedPath('/deployments'),
>
> diff --git a/src/public/javascripts/backbone/routers.js b/src/public/javascripts/backbone/routers.js
> index d2f0123..2e17348 100644
> --- a/src/public/javascripts/backbone/routers.js
> +++ b/src/public/javascripts/backbone/routers.js
> @@ -86,6 +86,25 @@ Conductor.Routers.Deployments = Backbone.Router.extend({
>     }
>   });
>
> +Conductor.Routers.Deployables = Backbone.Router.extend({
> routes: {
> 'catalogs/:catalog_id/deployables/:id': 'show'
> },
> show: function(catalog_id, id) {
> id = Conductor.idFromURLFragment(id);
> var catalogId = Conductor.idFromURLFragment(catalog_id);
> if(! _.isNumber(id) || ! _.isNumber(catalogId)) return;
> setInterval(function() {
>  var deployable = new Conductor.Models.Deployable({ catalog_id: catalogId, id: id });
>  var view = new Conductor.Views.DeployablesShow({ model: deployable });
>  deployable.fetch({ success: function() { view.render(); } })
> }, Conductor.AJAX_REFRESH_INTERVAL);
> }
>
> +});
> Conductor.Routers.Images = Backbone.Router.extend({
>   routes: {
>     'images/:id': 'show'
>
> diff --git a/src/public/javascripts/backbone/views.js b/src/public/javascripts/backbone/views.js
> index ec558e9..5063583 100644
> --- a/src/public/javascripts/backbone/views.js
> +++ b/src/public/javascripts/backbone/views.js
> @@ -134,6 +134,18 @@ Conductor.Views.PoolsShow = Backbone.View.extend({
>     }
>   });
>
> +Conductor.Views.DeployablesShow = Backbone.View.extend({
> el: '#content',
> render: function() {
> var $builds = this.$('ul#providers-list');
> if($builds.length === 0) return;
> $builds.empty();
> $('#deployableBuildsTemplate').tmpl(this.model.toJSON()).appendTo($builds);
> }
>
> +});
>
> Conductor.Views.DeploymentsShow = Backbone.View.extend({
>
> @@ -158,7 +170,6 @@ Conductor.Views.DeploymentsShow = Backbone.View.extend({
>
> });
> Conductor.Views.ImagesShow = Backbone.View.extend({
>   el: '#content',

ACK

OT note: I'm little bit scared of how much code is duplicated for 
html/backbone views. Would be great to do deeper investigation how to 
optimize this (in post 1.0).

Jan

[Scott Seago]

On 02/01/2012 10:59 AM, Jan Provaznik wrote:
> On 01/31/2012 04:26 PM, [e-mail] wrote:
> > From: Imre Farkas
> > https://bugzilla.redhat.com/show_bug.cgi?id=781579
> >
> > src/app/controllers/deployables_controller.rb |    8 ++++++
> >   src/app/views/deployables/show.html.haml      |   33 
> > +++++++++++++++++++++++++
> >   src/public/javascripts/backbone/models.js     |   10 +++++++
> >   src/public/javascripts/backbone/routers.js    |   19 ++++++++++++++
> >   src/public/javascripts/backbone/views.js      |   13 +++++++++-
> >   5 files changed, 82 insertions(+), 1 deletions(-)
>
> ACK
>
> OT note: I'm little bit scared of how much code is duplicated for 
> html/backbone views. Would be great to do deeper investigation how to 
> optimize this (in post 1.0).
>
> Jan

+1 to this.

On at least two separate occasions I fixed a bug, only to realize that 
the problem was "un-fixed" on refresh, since the auto-updated tables are 
repopulated via a completely different code path than the original 
population.

Also, the refresh code is organized in such a different way than the 
controller code that it's hard to connect it (mentally) with the related 
controller code to confirm that things are really doing the same thing.

Scott

[Tomas Sedovic]

On 02/01/2012 05:27 PM, Scott Seago wrote:
> On 02/01/2012 10:59 AM, Jan Provaznik wrote:
> > On 01/31/2012 04:26 PM, [e-mail] wrote:
> > > From: Imre Farkas
> > > https://bugzilla.redhat.com/show_bug.cgi?id=781579
> > >
> > > src/app/controllers/deployables_controller.rb | 8 ++++++
> > > src/app/views/deployables/show.html.haml | 33 +++++++++++++++++++++++++
> > > src/public/javascripts/backbone/models.js | 10 +++++++
> > > src/public/javascripts/backbone/routers.js | 19 ++++++++++++++
> > > src/public/javascripts/backbone/views.js | 13 +++++++++-
> > > 5 files changed, 82 insertions(+), 1 deletions(-)
> >
> > ACK
> >
> > OT note: I'm little bit scared of how much code is duplicated for
> > html/backbone views. Would be great to do deeper investigation how to
> > optimize this (in post 1.0).
> >
> > Jan
>
> +1 to this.
>
> On at least two separate occasions I fixed a bug, only to realize that
> the problem was "un-fixed" on refresh, since the auto-updated tables are
> repopulated via a completely different code path than the original
> population.
>
> Also, the refresh code is organized in such a different way than the
> controller code that it's hard to connect it (mentally) with the related
> controller code to confirm that things are really doing the same thing.
>
> Scott

Imre and I discussed this a few weeks back. This is what we came up with:

1) Extract the views that are needed for client-side rendering to 
separate partials.
2) Use Mustache[1] for these views (and keep using HAML for everything 
else).
3) There is no step 3.

It would be great if we could just use HAML for everything -- including 
client-side rendering, but that doesn't seem  to be an option.

Switching from HAML completely towards a templating engine that works 
both with Rails and JavaScript seems a bit too much as well. We're quite 
invested in HAML and whatever works with JavaScript almost by definition 
won't allow using Rails' helper methods from within the views.

Mustache is very simple. It supports almost no logic (basic if/else and 
looping over object collections, nothing more). You pass it a Ruby hash 
or a JavaScript object and it incorporates the values into the markup.

The overhead of learning/using a second templating engine shouldn't be 
too big.

It works under JavaScript and Ruby (the rubygem is in Fedora).

If we limit the Mustache templates only to the pieces that need to be 
rendered both in the server and in the browser, it won't get too convoluted.

Thomas

[1]: http://mustache.github.com/

[DELTACLOUD-INTERNAL] [PATCH conductor] BZ781579: Autoupdate for deployables#show

[Jason Guiditta]

On 01/02/12 16:59 +0100, Jan Provaznik wrote:
> On 01/31/2012 04:26 PM, [e-mail] wrote:
> > From: Imre Farkas
>
> ACK
>
> OT note: I'm little bit scared of how much code is duplicated for 
> html/backbone views. Would be great to do deeper investigation how to 
> optimize this (in post 1.0).
>
> Jan

+1 - if your code is duplicated, you are doing something wrong.  Time
to refactor (post 1.0 of course).

-j