AMBARI-4586. Time taken for operations do not appear on the task list when Installing wizard is ongoing. (xiwang via yusaku)

ambari-web/app/controllers/wizard/step9_controller.js

@@ -738,7 +738,7 @@ App.WizardStep9Controller = Em.Controller.extend({
   getUrl: function (requestId) {
     var clusterName = this.get('content.cluster.name');
     var requestId = requestId || this.get('content.cluster.requestId');
-    var url = App.apiPrefix + '/clusters/' + clusterName + '/requests/' + requestId + '?fields=tasks/Tasks/command,tasks/Tasks/exit_code,tasks/Tasks/host_name,tasks/Tasks/id,tasks/Tasks/role,tasks/Tasks/status&minimal_response=true';
+    var url = App.apiPrefix + '/clusters/' + clusterName + '/requests/' + requestId + '?fields=tasks/Tasks/command,tasks/Tasks/exit_code,tasks/Tasks/start_time,tasks/Tasks/end_time,tasks/Tasks/host_name,tasks/Tasks/id,tasks/Tasks/role,tasks/Tasks/status&minimal_response=true';
     console.log("URL for step9 is: " + url);
     return url;
   },

ambari-web/app/styles/application.less

@@ -1380,20 +1380,6 @@ width:100%;
     .operation-name-top {
       width: 33%;
       padding-left: 20px;
-    }
-    .task-name-top {
-      width: 23%;
-      padding-left: 20px;
-    }
-    .start-time-top {
-      width: 20%;
-      padding-left: 5px;
-    }
-    .duration-top {
-      width: 10%;
-      padding-left: 5px;
-    }
-    .operation-name-top,.task-name-top,.start-time-top,.duration-top {
       float: left;
       text-align: left;
     }
@@ -1515,6 +1501,7 @@ width:100%;
     text-align: center;
     font-size: 15px;
     padding: 0 0 10px 0;
+    height: 20px;
 
     .task-detail-back-to-hosts {
       float: left;
@@ -1531,6 +1518,25 @@ width:100%;
     .tasks-list-select{
       //margin-top: -28px;
     }
+
+    .task-name-top {
+      width: 23%;
+      padding-left: 20px;
+    }
+    .start-time-top {
+      width: 20%;
+      padding-left: 5px;
+    }
+    .duration-top {
+      width: 10%;
+      padding-left: 5px;
+    }
+    .task-name-top,.start-time-top,.duration-top {
+      float: left;
+      text-align: left;
+    }
+
+
   }
 
   #host-log {
@@ -1538,7 +1544,6 @@ width:100%;
       padding: 10px 10px 10px 20px;
       border-top: 1px solid #CCC;
       border-bottom: 1px solid #CCC;
-
       .show-details {
         float: right;
         cursor: pointer;
@@ -1548,6 +1553,34 @@ width:100%;
           color: #333;
         }
       }
+
+      .task-list-line-cursor:before,.task-list-line-cursor:after {
+        display: table;
+        line-height: 0;
+        content: "";
+      }
+      .task-list-line-cursor:after {
+        clear: both;
+      }
+      .operation-name-icon-wrap {
+        float: left;
+        width: 35%;
+      }
+      .start-time-text {
+        margin-left: 5px;
+        width: 20%;
+        float: left;
+      }
+      .duration-text {
+        margin-left: 5px;
+        width: 10%;
+        float: left;
+      }
+      .time-summary {
+        padding-left: 0px;
+        color: #808080;
+        font-size: 12px;
+      }
     }
   }
 }

ambari-web/app/templates/wizard/step9HostTasksLogPopup.hbs

@@ -17,7 +17,9 @@
 }}
 <div {{bindAttr class="view.isLogWrapHidden::hidden :task-list-main-warp"}}>
   <div class="task-top-wrap">
-    {{t common.tasks}}
+    <div class="task-name-top task-detail-log-rolename">{{t common.tasks}}</div>
+    <div class="start-time-top">{{t common.startTime}}</div>
+    <div class="duration-top">{{t common.duration}}</div>
     <div class="select-wrap">
       {{t common.show}}:
       {{view Ember.Select
@@ -32,10 +34,14 @@
     {{#each taskInfo in view.tasks}}
       <div {{bindAttr class="taskInfo.isVisible::hidden :log-list-wrap"}}>
         <div {{action toggleTaskLog taskInfo}} class="task-list-line-cursor">
-          <i {{bindAttr class="taskInfo.status taskInfo.icon"}}></i>
-          <a href="#">
-            {{taskInfo.role}} {{taskInfo.command}}
-          </a>
+          <div class="operation-name-icon-wrap">
+            <i {{bindAttr class="taskInfo.status taskInfo.icon"}}></i>
+            <a href="#">
+              {{taskInfo.role}} {{taskInfo.command}}
+            </a>
+          </div>
+          <div class="time-summary start-time-text">{{taskInfo.startTime}}</div>
+          <div class="time-summary duration-text">{{taskInfo.duration}}</div>
           <div class="show-details"><i class="icon-caret-right"></i></div>
         </div>
       </div>

ambari-web/app/views/wizard/step9_view.js

@@ -17,6 +17,7 @@
  */
 
 var App = require('app');
+var date = require('utils/date');
 
 App.WizardStep9View = Em.View.extend({
 
@@ -217,6 +218,8 @@ App.HostStatusView = Em.View.extend({
               taskInfo.set('role', App.format.role(_task.Tasks.role));
               taskInfo.set('stderr', _task.Tasks.stderr);
               taskInfo.set('stdout', _task.Tasks.stdout);
+              taskInfo.set('startTime',  date.startTime(_task.Tasks.start_time));
+              taskInfo.set('duration', date.durationSummary(_task.Tasks.start_time, _task.Tasks.end_time));
               taskInfo.set('isVisible', true);
               taskInfo.set('icon', '');
               taskInfo.set('hostName', _task.Tasks.host_name);