Update the inspector scale up UI with the unit counts

app/templates/scale-up.handlebars

@@ -5,7 +5,8 @@
       <i class="sprite scale-up-open"></i>
     </div>
     <i class="sprite inspector-units units-icon"></i>
-    <span data-bind="unit_count" class="unit-count"></span> units
+    <span class="unit-count"></span>
+    <span class="uncommitted-unit-count"></span>
   </div>
   <div class="placement">
     <form>

app/views/viewlets/service-overview.js

@@ -410,6 +410,7 @@ YUI.add('inspector-overview-view', function(Y) {
             var statuses = this.viewlet.updateStatusList(value);
             this.viewlet.generateAndBindStatusHeaders(
                 node, statuses, this.viewlet.options.db.environment);
+            this.viewlet.updateUnitCounts(value);
           }
         }
       },
@@ -876,6 +877,39 @@ YUI.add('inspector-overview-view', function(Y) {
       }
     },
 
+    /**
+      Update the labels for the unit counts.
+
+      @method updateUnitCounts
+      @param {Object} serviceUnitList A list of service units.
+    */
+    updateUnitCounts: function(serviceUnitList) {
+      var container = this.get('container');
+      var unitCount = 0;
+      var uncommittedUnitCount = 0;
+      var unitPlural;
+      var uncommittedLabel;
+      var unitCountNode = container.one('.unit-count');
+      var uncommittedUnitCountNode = container.one('.uncommitted-unit-count');
+      serviceUnitList.each(function(unit) {
+        if (unit.agent_state) {
+          unitCount += 1;
+        } else {
+          uncommittedUnitCount += 1;
+        }
+      });
+      unitPlural = (unitCount === 1) ? '' : 's';
+      uncommittedLabel = (uncommittedUnitCount === 0) ? '' : '(' +
+          uncommittedUnitCount + ' uncommitted)';
+      // XXX: Remove the follow checks that the nodes exist when
+      // window.flags.mv is removed as it is only there due to the way
+      // the inspector is rendered in our tests. - huwshimi 13/08/2014
+      if (unitCountNode && uncommittedUnitCountNode) {
+        unitCountNode.setContent(unitCount + ' unit' + unitPlural);
+        uncommittedUnitCountNode.setContent(uncommittedLabel);
+      }
+    },
+
     /**
       Clean up anything not attached to the view instance destroy cycle.
 

test/test_inspector_overview.js

@@ -180,11 +180,42 @@ describe('Inspector Overview', function() {
     window.flags = {};
   });
 
-  it('binds the scale up unit count', function() {
+  it('sets the scale up unit count', function() {
+    var uncommittedCount = 1;
+    var unitCount;
     window.flags = {};
     window.flags.mv = true;
     inspector = setUpInspector();
-    assert.equal(container.one('.unit-count').get('text'), db.units.size());
+    db.addUnits({
+      id: 'mediawiki/20',
+      displayName: 'mediawiki/20'
+    });
+    unitCount = db.units.size() - uncommittedCount;
+    assert.equal(container.one('.unit-count').get('text'),
+        unitCount + ' units');
+    assert.equal(container.one('.uncommitted-unit-count').get('text'),
+        '(' + uncommittedCount + ' uncommitted)');
+    window.flags = {};
+  });
+
+  it('does not show the uncommitted units label if there are none', function() {
+    window.flags = {};
+    window.flags.mv = true;
+    inspector = setUpInspector();
+    assert.equal(container.one('.uncommitted-unit-count').get('text'), '');
+    window.flags = {};
+  });
+
+  it('does not pluralise the unit count if there is one unit', function() {
+    window.flags = {};
+    window.flags.mv = true;
+    inspector = setUpInspector(null, true);
+    db.addUnits({
+      id: 'mediawiki/20',
+      displayName: 'mediawiki/20',
+      agent_state: 'started'
+    });
+    assert.equal(container.one('.unit-count').get('text'), '1 unit');
     window.flags = {};
   });