Tweak how hide/highlight is rendered in MV.

app/models/models.js

@@ -302,6 +302,31 @@ YUI.add('juju-models', function(Y) {
       });
     },
 
+    /**
+      Returns a list of the deployed (both uncommitted and committed) services
+      that are not related to this service.
+
+      @method findUnrelatedServices
+      @param {Object} db A reference to the database Model.
+      @return {Array} A list of the service names of unrelated services.
+    */
+    findUnrelatedServices: function(db) {
+      var relationData = utils.getRelationDataForService(db, this);
+      var related = [this.get('name')],  // Add own name to related list.
+          unrelated = [],
+          serviceName;
+      // Compile the list of related services.
+      relationData.forEach(function(relation) {
+        related.push(relation.far.service);
+      });
+      // Find the unrelated by filtering out the related.
+      unrelated = db.services.filter(function(service) {
+        serviceName = service.get('name');
+        return related.indexOf(serviceName) === -1;
+      });
+      return unrelated;
+    },
+
     /**
       Detaches all of the events in the models _event property
 

app/templates/container-token-units.handlebars

@@ -2,7 +2,7 @@
   <li class="unit {{#unless agent_state }}uncommitted{{/unless}} {{#if deleted }}deleted{{/if}} {{#if fade}}fade{{/if}} {{#if hide}}hide{{/if}}"
       data-id="{{id}}">
     {{>more-menu}}
-    <img src="{{icon}}" alt="{{service}}"/>
+    <img src="{{icon}}" alt="{{service}}" title="{{displayName}}"/>
     <span class="name">
       {{displayName}}
       <span class="removed">

app/templates/container-token.handlebars

@@ -10,6 +10,7 @@
     <span class="token-uncommitted">&deg;</span>
   </span>
   <ul class="service-icons"></ul>
+  <ul class="service-icons-faded"></ul>
   <div class="drop">
     <span>Add to container {{ displayName }}</span>
   </div>

app/widgets/container-token.js

@@ -164,13 +164,16 @@ YUI.add('container-token', function(Y) {
          */
         renderUnits: function() {
           var machine = this.get('machine');
-          var units = machine.units;
+          // Display shown units and faded units in two different lists.
+          var shownUnits = machine.units.filter(function(u) {
+            return !(u.fade || u.hide);
+          });
           this.get('container').one('.service-icons').setHTML(
-              this.unitsTemplate(machine));
+              this.unitsTemplate({units: shownUnits}));
           // Create the more menus for the units.
-          if (units.length > 0) {
-            Object.keys(units).forEach(function(index) {
-              var id = units[index].id;
+          if (shownUnits.length > 0) {
+            Object.keys(shownUnits).forEach(function(index) {
+              var id = shownUnits[index].id;
               if (!this._unitMoreMenus) {
                 this._unitMoreMenus = [];
               }
@@ -184,6 +187,12 @@ YUI.add('container-token', function(Y) {
               }
             }, this);
           }
+          // Add faded units to the second list.
+          var fadedUnits = machine.units.filter(function(u) {
+            return u.fade;
+          });
+          this.get('container').one('.service-icons-faded').setHTML(
+              this.unitsTemplate({units: fadedUnits}));
         },
 
         /**

app/widgets/machine-token.js

@@ -172,8 +172,13 @@ YUI.add('machine-token', function(Y) {
           @method renderUnits
         */
         renderUnits: function() {
+          // Only display shown units.
+          // TODO refactor filter method to be reused
+          var shownUnits = this.get('machine').units.filter(function(u) {
+            return !(u.fade || u.hide);
+          });
           this.get('container').one('.service-icons').setHTML(
-              this.unitsTemplate(this.get('machine')));
+              this.unitsTemplate({units: shownUnits}));
         },
 
         /**

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

@@ -11,7 +11,7 @@
         .title {
             margin-right: 10px;
         }
-        .service-icons {
+        .service-icons, .service-icons-faded {
             margin-top: 2px;
             list-style: none;
 
@@ -27,9 +27,6 @@
                 &.deleted .removed {
                     display: inline;
                 }
-                &.fade {
-                    opacity: 0.2;
-                }
                 &.hide {
                     display: none;
                 }
@@ -64,5 +61,22 @@
                 }
             }
         }
+
+        .service-icons-faded {
+            .unit {
+                display: inline-block;
+                padding: 0;
+                margin: 0;
+                .more-menu {
+                    display: none;
+                }
+                img {
+                  margin: 0;
+                }
+                .name {
+                    display: none;
+                }
+            }
+        }
     }
 }

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

@@ -59,7 +59,7 @@
     .token-uncommitted {
         display: none;
     }
-    .service-icons {
+    .service-icons, .service-icons-faded {
         img {
             width: 20px;
             height: 20px;