Merge lp:~huwshimi/juju-gui/bundle-charm-list into lp:juju-gui/experimental

[Huw Wilkins]

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/14673044/

[Huw Wilkins (huwshimi)]

Reviewers: mp+191562_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/~huwshimi/juju-gui/bundle-charm-list/+merge/191562

(do not edit description out of merge proposal)

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

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

[Richard Harding (rharding)]

Code looks good with the cleanup added. Will QA next.

https://codereview.appspot.com/14673044/diff/1/app/subapps/browser/views/bundle.js
File app/subapps/browser/views/bundle.js (right):

https://codereview.appspot.com/14673044/diff/1/app/subapps/browser/views/bundle.js#newcode137
app/subapps/browser/views/bundle.js:137: token.render(node);
the tokens need to get tracked and cleaned up on destroy()

https://codereview.appspot.com/14673044/

[Richard Harding (rharding)]

LGTM, qa ok and qa'd on IE10 as well.

Longer term we should add some intro text like the other tabs, etc. I'll
pull this branch down and add the cleanup so we can land it.

https://codereview.appspot.com/14673044/

=== 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 07:10:14 +0000
@@ -137,6 +137,25 @@
     },
 
     /**
+      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);
+    },
+
+    /**
       Renders the bundle view template into the DOM.
 
       @method _renderBundleView
@@ -184,6 +203,7 @@
         this.tabview.selectChild(2);
       }
       this._dispatchTabEvents(this.tabview);
+      this._renderCharmListing();
 
       this.set('rendered', true);
     },
@@ -244,6 +264,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 07:10:14 +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 07:10:14 +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;
             }
         }
     }