Added a container token widget and navigation to view containers.

app/modules-debug.js

@@ -259,6 +259,10 @@ var GlobalConfig = {
           fullpath: '/juju-ui/views/help-dropdown.js'
         },
 
+        'juju-container-token': {
+          fullpath: '/juju-ui/widgets/container-token.js'
+        },
+
         'juju-deployer-bar': {
           fullpath: '/juju-ui/widgets/deployer-bar.js'
         },
@@ -307,6 +311,7 @@ var GlobalConfig = {
           use: [
             'handlebars',
             'd3-components',
+            'juju-container-token',
             'juju-templates',
             'juju-notifications',
             'juju-help-dropdown',

app/templates/container-token.handlebars

@@ -0,0 +1,6 @@
+<div class="token">
+  <span class="title">{{ displayName }}</span>
+  <span class="delete">
+    <i class="sprite token-delete"></i>
+  </span>
+</div>

app/templates/machine-token.handlebars

@@ -1,5 +1,5 @@
 <div class="token">
-  <span class="title">{{ title }}</span>
+  <span class="title">{{ displayName }}</span>
   <span class="details">
     {{ formattedHardware.cpuCores }}x{{ formattedHardware.cpuPower }}GHz,
     {{ formattedHardware.mem }}GB,

app/templates/machine-view-panel.handlebars

@@ -9,4 +9,7 @@
 </div>
 <div class="column containers">
   <div class="head"></div>
+  <div class="content">
+    <ul></ul>
+  </div>
 </div>

app/widgets/container-token.js

@@ -0,0 +1,103 @@
+/*
+This file is part of the Juju GUI, which lets users view and manage Juju
+environments within a graphical interface (https://launchpad.net/juju-gui).
+Copyright (C) 2012-2013 Canonical Ltd.
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License version 3, as published by
+the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
+SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
+General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+'use strict';
+
+/**
+ * Provide the container token view.
+ *
+ * @module views
+ */
+
+YUI.add('container-token', function(Y) {
+
+  var views = Y.namespace('juju.views'),
+      widgets = Y.namespace('juju.widgets'),
+      Templates = views.Templates;
+
+  /**
+   * The view associated with the container token.
+   *
+   * @class ContainerToken
+   */
+  var ContainerToken = Y.Base.create('ContainerToken', Y.View,
+      [
+        Y.Event.EventTracker
+      ], {
+        template: Templates['container-token'],
+
+        events: {
+          '.delete': {
+            click: 'handleDelete'
+          }
+        },
+
+        /**
+         * Fire the delete event.
+         *
+         * @method handleDelete
+         * @param {Event} ev the click event created.
+         */
+        handleDelete: function(e) {
+          e.preventDefault();
+          this.fire('deleteToken');
+        },
+
+        /**
+         * Sets up the DOM nodes and renders them to the DOM.
+         *
+         * @method render
+         */
+        render: function() {
+          var container = this.get('container'),
+              machine = this.get('machine');
+          container.setHTML(this.template(machine));
+          container.addClass('container-token');
+          this.get('containerParent').append(container);
+          return this;
+        },
+
+        ATTRS: {
+          /**
+           * @attribute machine
+           * @default undefined
+           * @type {Object}
+          */
+          machine: {},
+
+          /**
+           * @attribute containerParent
+           * @default undefined
+           * @type {Object}
+          */
+          containerParent: {}
+        }
+      });
+
+  views.ContainerToken = ContainerToken;
+
+}, '0.1.0', {
+  requires: [
+    'view',
+    'juju-view-utils',
+    'event-tracker',
+    'node',
+    'handlebars',
+    'juju-templates'
+  ]
+});

app/widgets/machine-token.js

@@ -91,35 +91,21 @@ YUI.add('machine-token', function(Y) {
          */
         render: function() {
           var container = this.get('container'),
-              attrs = this.getAttrs();
-          attrs.formattedHardware = this._formatHardware(attrs.hardware);
-          container.setHTML(this.template(attrs));
+              machine = this.get('machine');
+          machine.formattedHardware = this._formatHardware(machine.hardware);
+          container.setHTML(this.template(machine));
           container.addClass('machine-token');
-          container.setAttribute('data-id', attrs.id);
+          container.setAttribute('data-id', machine.id);
           return this;
         },
 
         ATTRS: {
           /**
-           * @attribute title
-           * @default undefined
-           * @type {String}
-          */
-          title: {},
-
-          /**
-           * @attribute id
+           * @attribute machine
            * @default undefined
            * @type {Object}
           */
-          id: {},
-
-          /**
-           * @attribute detail
-           * @default undefined
-           * @type {String}
-          */
-          hardware: {}
+          machine: {}
         }
       });
 

app/widgets/machine-view-panel.js

@@ -42,6 +42,9 @@ YUI.add('machine-view-panel', function(Y) {
         template: Templates['machine-view-panel'],
 
         events: {
+          '.machine-token .token': {
+            click: 'handleTokenSelect'
+          }
         },
 
         /**
@@ -56,6 +59,29 @@ YUI.add('machine-view-panel', function(Y) {
           machines.after('remove', this.render, this);
         },
 
+        /**
+         * Display containers for the selected machine.
+         *
+         * @method handleTokenSelect
+         * @param {Event} ev the click event created.
+         */
+        handleTokenSelect: function(e) {
+          var container = this.get('container'),
+              machineTokens = container.all('.machines .content ul .token'),
+              selected = e.currentTarget,
+              id = selected.ancestor().getData('id'),
+              containers = this.get('machines').filterByParent(id),
+              plural = containers.length > 1 ? 's' : '';
+          e.preventDefault();
+          // Select the active token.
+          machineTokens.removeClass('active');
+          selected.addClass('active');
+          // Set the header text.
+          container.one('.containers .head .label').set('text',
+              containers.length + ' machine' + plural + ', xx units');
+          this._renderContainerTokens(containers);
+        },
+
         /**
          * Set the panel to be the full width of the screen.
          *
@@ -81,7 +107,7 @@ YUI.add('machine-view-panel', function(Y) {
          */
         _renderHeaders: function(label) {
           var columns = this.get('container').all('.column'),
-              machines = this.get('machines');
+              machines = this.get('machines').filterByParent(null);
 
           columns.each(function(column) {
             var attrs = {container: column.one('.head')};
@@ -93,16 +119,35 @@ YUI.add('machine-view-panel', function(Y) {
               attrs.title = 'Environment';
               attrs.label = 'machine';
               attrs.action = 'New machine';
-              attrs.count = machines.size();
+              attrs.count = machines.length;
             }
             else if (column.hasClass('containers')) {
-              attrs.label = '0 containers, 1 unit';
               attrs.action = 'New container';
             }
             new views.MachineViewPanelHeaderView(attrs).render();
           });
         },
 
+        /**
+         * Display a list of given containers.
+         *
+         * @method _renderContainerTokens
+         */
+        _renderContainerTokens: function(containers) {
+          var containerParent = this.get('container').one(
+              '.containers .content ul');
+          containerParent.get('childNodes').remove();
+          if (containers.length > 0) {
+            Y.Object.each(containers, function(container) {
+              new views.ContainerToken({
+                containerTemplate: '<li/>',
+                containerParent: containerParent,
+                machine: container
+              }).render();
+            });
+          }
+        },
+
         /**
          * Render the machine token widgets.
          *
@@ -118,9 +163,7 @@ YUI.add('machine-view-panel', function(Y) {
               var node = Y.Node.create('<li></li>');
               new views.MachineToken({
                 container: node,
-                title: machine.displayName,
-                id: machine.id,
-                hardware: machine.hardware
+                machine: machine
               }).render();
               machineList.append(node);
             });
@@ -181,6 +224,7 @@ YUI.add('machine-view-panel', function(Y) {
     'node',
     'handlebars',
     'juju-templates',
+    'container-token',
     'machine-token',
     'machine-view-panel-header'
   ]

lib/views/machine-view/container-token.less

@@ -0,0 +1,28 @@
+.machine-view-panel .column .content li.container-token {
+    padding: 0;
+
+    .token {
+        position: relative;
+        display: block;
+        padding: 20px 20px 15px 20px;
+        cursor: pointer;
+        color: #dd4814;
+
+        &.active {
+            background-color: #eee;
+        }
+        span {
+            display: block;
+        }
+        .title {
+            margin-bottom: 10px;
+        }
+        .delete {
+            position: absolute;
+            display: block;
+            right: 20px;
+            top: 15px;
+            cursor: pointer;
+        }
+    }
+}

lib/views/stylesheet.less

@@ -927,6 +927,7 @@ g.unit {
 @import "browser/overlay-indicator.less";
 @import "browser/section-title.less";
 @import "browser/tabview.less";
+@import "machine-view/container-token.less";
 @import "machine-view/machine-token.less";
 @import "machine-view/machine-view-panel.less";
 @import "content-panel.less";

test/index.html

@@ -97,6 +97,7 @@
   <!-- FIXME: tests flicker, add container. -->
   <script src="test_conflict_ux.js"></script>
   <script src="test_console.js"></script>
+  <script src="test_container_token.js"></script>
   <script src="test_cookies_app_extension.js"></script>
   <script src="test_databinding.js"></script>
   <script src="test_d3_components.js"></script>