AMBARI-10107 RU: include info about completed / total in RU progress popup. (atkach)

ambari-web/app/assets/data/stack_versions/upgrade.json

@@ -623,6 +623,8 @@
         "progress_percent" : 0.0,
         "request_id" : 23,
         "status" : "IN_PROGRESS",
+        "completed_task_count" : 2,
+        "total_task_count" : 3,
         "title" : "Core Slaves"
       },
       "upgrade_items" : [

ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js

@@ -221,6 +221,7 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage,
       oldData.upgradeGroups.forEach(function (oldGroup) {
         oldGroup.set('status', groupsMap[oldGroup.get('group_id')].status);
         oldGroup.set('progress_percent', groupsMap[oldGroup.get('group_id')].progress_percent);
+        oldGroup.set('completed_task_count', groupsMap[oldGroup.get('group_id')].completed_task_count);
         oldGroup.upgradeItems.forEach(function (item) {
           item.set('status', itemsMap[item.get('stage_id')].status);
           item.set('progress_percent', itemsMap[item.get('stage_id')].progress_percent);

ambari-web/app/styles/application.less

@@ -5537,4 +5537,13 @@ input[type="checkbox"].align-checkbox {
 
 .bottom-border {
   border-bottom: 1px solid #dddddd;
+}
+
+.progress-counter {
+  position: relative;
+  .counters-label {
+    font-weight: bold;
+    left: 45%;
+    position: absolute;
+  }
 }

ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs

@@ -24,9 +24,11 @@
   </div>
   {{#if view.content.isRunning}}
     <div class="span3">
-      {{view App.ProgressBarView
+      {{view view.progressBarView
         progressBinding="view.content.progress"
         statusBinding="view.content.status"
+        totalTasksBinding="view.content.total_task_count"
+        completedTasksBinding="view.content.completed_task_count"
       }}
     </div>
     <div class="span1">

ambari-web/app/views/main/admin/stack_upgrade/upgrade_group_view.js

@@ -22,6 +22,16 @@ var App = require('app');
 App.upgradeGroupView = Em.View.extend({
   templateName: require('templates/main/admin/stack_upgrade/upgrade_group'),
 
+  /**
+   * customized view of progress bar that show completed/total counters
+   * @class App.ProgressBarView
+   */
+  progressBarView: App.ProgressBarView.extend({
+    classNames: ['progress-counter'],
+    template: Ember.Handlebars.compile('<div class="bar" {{bindAttr style="view.progressWidth"}}></div>' +
+    '<div class="counters-label">{{view.completedTasks}}/{{view.totalTasks}}</div>')
+  }),
+
   /**
    * Only one UpgradeGroup or UpgradeItem could be expanded at a time
    * @param {object} event

ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js

@@ -417,7 +417,8 @@ describe('App.MainAdminStackAndUpgradeController', function() {
             UpgradeGroup: {
               group_id: 1,
               status: 'COMPLETED',
-              progress_percent: 100
+              progress_percent: 100,
+              completed_task_count: 3
             },
             upgrade_items: [
               {
@@ -435,6 +436,7 @@ describe('App.MainAdminStackAndUpgradeController', function() {
       controller.updateUpgradeData(newData);
       expect(controller.get('upgradeData.upgradeGroups')[0].get('status')).to.equal('COMPLETED');
       expect(controller.get('upgradeData.upgradeGroups')[0].get('progress_percent')).to.equal(100);
+      expect(controller.get('upgradeData.upgradeGroups')[0].get('completed_task_count')).to.equal(3);
       expect(controller.get('upgradeData.upgradeGroups')[0].get('upgradeItems')[0].get('status')).to.equal('COMPLETED');
       expect(controller.get('upgradeData.upgradeGroups')[0].get('upgradeItems')[0].get('progress_percent')).to.equal(100);
     });