Merge lp:~rharding/juju-gui/qa-bundle-charms into lp:juju-gui/experimental

[Richard Harding]

Added charm details to bundle

Browse to a charm and view the "Charms" tab. There is no direction for what
this page is supposed to contain yet so I've added tokens for each charm and
also display the config options and number of units.'

https://codereview.appspot.com/14654046/

[Richard Harding (rharding)]

Reviewers: mp+191649_code.launchpad.net,

Message:
Please take a look.

Description:
Added charm details to bundle

Browse to a charm and view the "Charms" tab. There is no direction for
what
this page is supposed to contain yet so I've added tokens for each charm
and
also display the config options and number of units.'

https://code.launchpad.net/~rharding/juju-gui/qa-bundle-charms/+merge/191649

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/14654046/

Affected files (+192, -43 lines):
   A [revision details]
   M app/subapps/browser/views/bundle.js
   M app/templates/bundle.handlebars
   M lib/views/browser/charm-full.less
   M test/test_bundle_details_view.js

[Richard Harding (rharding)]

LGTM, added test and cleanup. Original branch is from huw over at
https://codereview.appspot.com/14673044/

https://codereview.appspot.com/14654046/

[Richard Harding (rharding)]

*** Submitted:

Added charm details to bundle

Browse to a charm and view the "Charms" tab. There is no direction for
what
this page is supposed to contain yet so I've added tokens for each charm
and
also display the config options and number of units.'

R=
CC=
https://codereview.appspot.com/14654046

https://codereview.appspot.com/14654046/

=== modified file 'app/subapps/browser/views/bundle.js'
--- app/subapps/browser/views/bundle.js	2013-10-11 22:48:51 +0000
+++ app/subapps/browser/views/bundle.js	2013-10-17 14:16:02 +0000
@@ -137,6 +137,26 @@
     },
 
     /**
+      Render the list of charms in the bundle.
+
+      @method _renderCharmListing
+
+     */
+    _renderCharmListing: function() {
+      var attrs = this.get('entity').getAttrs();
+      Y.Object.each(attrs.charm_metadata, function(charm, key) {
+        var charmModel = new Y.juju.models.Charm(charm);
+        charm = charmModel.getAttrs();
+        charm.size = 'tiny';
+        charm.isDraggable = false;
+        var token = new widgets.browser.Token(charm);
+        var node = Y.one('[data-config="' + key + '"]');
+        token.render(node);
+        this._cleanup.tokens.push(token);
+      }, this);
+    },
+
+    /**
       Renders the bundle view template into the DOM.
 
       @method _renderBundleView
@@ -184,6 +204,7 @@
         this.tabview.selectChild(2);
       }
       this._dispatchTabEvents(this.tabview);
+      this._renderCharmListing();
 
       this.set('rendered', true);
     },
@@ -211,6 +232,31 @@
     },
 
     /**
+      Destroy things when the view is destroyed.
+
+      @method destructor
+
+     */
+    destructor: function() {
+      this._cleanup.tokens.forEach(function(token) {
+        token.destroy();
+      });
+    },
+
+    /**
+      Generic initializer method for the View.
+
+      @method initializer
+      @param {Object} cfg the config object to create the View with.
+
+     */
+    initializer: function(cfg) {
+      this._cleanup = {
+        tokens: []
+      };
+    },
+
+    /**
       Renders the loading indicator into the DOM and then calls
       the _prepareData method to fetch/parse the bundle data for
       the real view rendering.
@@ -244,6 +290,7 @@
 }, '', {
   requires: [
     'browser-overlay-indicator',
+    'juju-charm-models',
     'juju-view-utils',
     'view',
     'juju-env-fakebackend',

=== modified file 'app/templates/bundle.handlebars'
--- app/templates/bundle.handlebars	2013-10-10 04:44:18 +0000
+++ app/templates/bundle.handlebars	2013-10-17 14:16:02 +0000
@@ -119,7 +119,33 @@
                     </div>
                 </div>
                 <div id="bws-readme"></div>
-                <div id="bws-charms"></div>
+                <div id="bws-charms">
+                    <div class="yui3-g">
+                        <div class="interfaces-heading yui3-u-1-2">
+                            <h3>Charm</h3>
+                        </div>
+                        <div class="interfaces-heading yui3-u-1-2">
+                            <h3>Config</h3>
+                        </div>
+                    </div>
+                    <ul class="interface-list">
+                        {{#arrayObject services}}
+                            <li class="interface-row yui3-g">
+                                <div class="yui3-u-1-2" data-config="{{ key }}"></div>
+                                <div class="yui3-u-1-2 charm-config">
+                                    <ul>
+                                        <li>Number of units: {{ value.num_units }}</li>
+                                        {{#if value.config}}
+                                            {{#arrayObject value.options}}
+                                                <li>{{ key }}: {{ value }}</li>
+                                            {{/arrayObject}}
+                                        {{/if}}
+                                    </ul>
+                                </div>
+                            </li>
+                        {{/arrayObject}}
+                    </ul>
+                </div>
                 <div id="bws-code">
                     <p class="intro">
                         The source code of the bundle includes scripts, metadata,

=== modified file 'lib/views/browser/charm-full.less'
--- lib/views/browser/charm-full.less	2013-10-09 04:05:57 +0000
+++ lib/views/browser/charm-full.less	2013-10-17 14:16:02 +0000
@@ -124,6 +124,59 @@
         margin-top: 9px;
         margin-bottom: 26px;
     }
+    .interfaces-heading,
+    .interface,
+    .related {
+        .border-box;
+        padding: 0 20px;
+    }
+    .interfaces-heading {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-bottom: 1px solid @bws-border;
+
+        h3 {
+            margin: 0;
+            padding: 0;
+            border: none;
+        }
+    }
+    .interface-list {
+        h4 {
+            margin: 0;
+            padding: 0;
+            border: none;
+        }
+        .interface-row {
+            border-bottom: 1px solid @bws-border;
+
+            .interface {
+                padding-top: 10px;
+                padding-bottom: 10px;
+                font-size: 10.5pt;
+            }
+            .charm-config {
+                .border-box;
+                min-height: 87px;
+                padding: 20px;
+                border-left: 1px solid @bws-border;
+
+                li {
+                    margin-bottom: 5px;
+                }
+            }
+            .yui3-token {
+                width: 100%;
+
+              .title {
+                  max-width: 150px;
+              }
+            }
+            &:last-child {
+                border: none;
+            }
+        }
+    }
     #bws-features,
     #bws-summary,
     #bws-readme {
@@ -135,46 +188,6 @@
             padding-left: 2em;
         }
     }
-    #bws-related-charms {
-        .interfaces-heading,
-        .interface,
-        .related {
-            .border-box;
-            padding: 0 20px;
-        }
-        h4,
-        h3 {
-            margin: 0;
-            padding: 0;
-            border: none;
-        }
-        .interfaces-heading {
-            padding-top: 0;
-            padding-bottom: 15px;
-            border-bottom: 1px solid @bws-border;
-        }
-        .interface-list {
-            .interface-row {
-                border-bottom: 1px solid @bws-border;
-
-                .interface {
-                    padding-top: 10px;
-                    padding-bottom: 10px;
-                    font-size: 10.5pt;
-                }
-                .yui3-token {
-                    width: 100%;
-
-                    .title {
-                        max-width: 150px;
-                    }
-                }
-                &:last-child {
-                    border: none;
-                }
-            }
-        }
-    }
     #bws-configuration {
         dt {
             margin: 20px 0 15px 0;
@@ -246,7 +259,7 @@
         padding: 17px 70px 16px 16px;
 
         a {
-            padding-right: 5px; 
+            padding-right: 5px;
         }
     }
 }
@@ -326,7 +339,7 @@
             }
             span {
                 color: @bws-text;
-                text-decoration: underline;    
+                text-decoration: underline;
             }
         }
     }

=== modified file 'test/test_bundle_details_view.js'
--- test/test_bundle_details_view.js	2013-10-11 22:48:51 +0000
+++ test/test_bundle_details_view.js	2013-10-17 14:16:02 +0000
@@ -237,5 +237,66 @@
     view.render();
   });
 
+  it('renders the charm list tab properly', function(done) {
+    view._parseData = function() {
+      return new Y.Promise(function(resolve) { resolve(); });
+    };
+    view.set('entity', {
+      getAttrs: function() {
+        return {
+          charm_metadata: {
+            foo: {
+              id: 'precise/foo-9',
+              storeId: 'testid',
+              name: 'foo'
+            },
+            bar: {
+              id: 'precise/bar-10',
+              storeId: 'testid',
+              name: 'bar'
+            }
+          },
+          files: [],
+          data: {
+            services: {
+              foo: {
+                annotations: {
+                  'gui-x': '1',
+                  'gui-y': '2'
+                }
+              },
+              bar: {
+                annotations: {
+                  'gui-x': '3',
+                  'gui-y': '4'
+                }
+              }
+            }
+          },
+          services: {
+            foo: {
+              annotations: {
+                'gui-x': '1',
+                'gui-y': '2'
+              }
+            },
+            bar: {
+              annotations: {
+                'gui-x': '3',
+                'gui-y': '4'
+              }
+            }
+          }
+        };
+      }});
+    view.after('renderedChange', function(e) {
+      var tab = container.one('#bws-charms');
+      assert.equal(tab.all('.token').size(), 2);
+      done();
+    });
+    view.render();
+  });
+
+
 
 });