AMBARI-4468. When showing past operations popup window, add start time and completion time for each task and request.

ambari-web/app/controllers/global/background_operations_controller.js

@@ -167,6 +167,8 @@ App.BackgroundOperationsController = Em.Controller.extend({
         rq.set('progress', Math.ceil(request.Requests.progress_percent));
         rq.set('status', request.Requests.request_status);
         rq.set('isRunning', isRunning);
+        rq.set('startTime', request.Requests.start_time);
+        rq.set('endTime', request.Requests.end_time);
       } else {
         rq = Em.Object.create({
           id: request.Requests.id,
@@ -177,6 +179,8 @@ App.BackgroundOperationsController = Em.Controller.extend({
           isRunning: isRunning,
           hostsMap: {},
           tasks: [],
+          startTime: request.Requests.start_time,
+          endTime: request.Requests.end_time,
           dependentService: requestParams.dependentService,
           sourceRequestScheduleId: request.Requests.source_schedule_id,
           previousTaskStatusMap: {},

ambari-web/app/messages.js

@@ -140,6 +140,8 @@ Em.I18n.translations = {
   'common.misc': 'Misc',
   'common.userSettings': 'User Settings',
   'common.operations': 'Operations',
+  'common.startTime': 'Start Time',
+  'common.duration': 'Duration',
   'common.reinstall': 'Re-Install',
   'common.errorPopup.header': 'An error has been encountered',
   'common.use': 'Use',

ambari-web/app/styles/application.less

@@ -1372,11 +1372,30 @@ width:100%;
   }
 }
 .host-component-popup-wrap {
-  #host-info, #service-info{
-    .task-list-line-cursor{
-      width: 100%;
-      height: 20px;
+  .task-top-wrap {
+    height: 20px;
+    .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;
     }
+  }
+  #host-info, #service-info{
     .span2{
       width:20%;
       float: left;
@@ -1390,20 +1409,56 @@ width:100%;
       width: 50%;
       white-space: nowrap;
     }
+  }
+  #host-info, #service-info, #host-log {
     .log-list-wrap {
       padding: 10px 10px 10px 20px;
       border-top: 1px solid #CCC;
       border-bottom: 1px solid #CCC;
-
+    }
+    .task-list-line-cursor{
+      width: 100%;
+      min-height: 20px;
+      .progress-bar{
+        .progress{
+          margin-bottom: 0px;
+        }
+      }
       .show-details {
         float: right;
         cursor: pointer;
         font-size: 16px;
-
         i {
           color: #333;
         }
       }
+      .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;
+      }
+    }
+    .task-list-line-cursor:before,.task-list-line-cursor:after {
+      display: table;
+      line-height: 0;
+      content: "";
+    }
+    .task-list-line-cursor:after {
+      clear: both;
     }
   }
 }
@@ -1471,25 +1526,7 @@ width:100%;
     }
 
     .tasks-list-select{
-      margin-top: -28px;
-    }
-  }
-
-  #host-log, {
-    .log-list-wrap {
-      padding: 10px 10px 10px 20px;
-      border-top: 1px solid #CCC;
-      border-bottom: 1px solid #CCC;
-
-      .show-details {
-        float: right;
-        cursor: pointer;
-        font-size: 16px;
-
-        i {
-          color: #333;
-        }
-      }
+      //margin-top: -28px;
     }
   }
 }

ambari-web/app/templates/common/host_progress_popup.hbs

@@ -23,7 +23,9 @@
 
     <div {{bindAttr class="view.isServiceListHidden:hidden :task-list-main-warp"}}>
       <div class="task-top-wrap">
-        {{t common.operations}}
+        <div class="operation-name-top">{{t common.operations}}</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
@@ -41,12 +43,14 @@
           {{#each servicesInfo in view.services}}
             <div {{bindAttr class="servicesInfo.isVisible::hidden :log-list-wrap"}}>
               <div {{action gotoHosts servicesInfo}} class="task-list-line-cursor">
-                <div class="host-name-icon-wrap">
+                <div class="operation-name-icon-wrap">
                   <i {{bindAttr class="servicesInfo.status servicesInfo.icon"}}></i>
                   <a href="#">
                     {{servicesInfo.name}}
                   </a>
                 </div>
+                <div class="time-summary start-time-text">{{servicesInfo.startTime}}</div>
+                <div class="time-summary duration-text">{{servicesInfo.duration}}</div>
                 <div class="progress-bar span2">
                   <div {{bindAttr class="servicesInfo.isInProgress:progress-striped :active servicesInfo.barColor :progress"}}>
                     <div class="bar" {{bindAttr style="servicesInfo.barWidth"}}></div>
@@ -130,10 +134,10 @@
 
   <div {{bindAttr class="view.isTaskListHidden:hidden :task-list-main-warp"}}>
     <div class="task-top-wrap">
-       <a class="task-detail-back-to-hosts" href="javascript:void(null)" {{action backToHostList}} ><i class="icon-arrow-left"></i>&nbsp;{{t common.hosts}}</a>
-       <div>
-         <span class="task-detail-log-rolename" >{{t common.tasks}}</span>
-       </div>
+      <a class="task-detail-back-to-hosts" href="javascript:void(null)" {{action backToHostList}} ><i class="icon-arrow-left"></i>&nbsp;{{t common.hosts}}</a>
+      <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 tasks-list-select">
         {{t common.show}}:
         {{view Ember.Select
@@ -151,10 +155,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/utils/ajax.js

@@ -44,7 +44,7 @@ var urls = {
     'testInProduction': true
   },
   'background_operations.get_by_request': {
-    'real': '/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',
+    'real': '/clusters/{clusterName}/requests/{requestId}?fields=*,tasks/Tasks/command,tasks/Tasks/start_time,tasks/Tasks/end_time,tasks/Tasks/exit_code,tasks/Tasks/host_name,tasks/Tasks/id,tasks/Tasks/role,tasks/Tasks/status',
     'mock': '/data/background_operations/task_by_request{requestId}.json',
     'testInProduction': true,
     'format': function (data) {

ambari-web/app/utils/date.js

@@ -52,6 +52,53 @@ module.exports = {
     }
     return date.toDateString();
   },
+  /**
+   * Convert starTimestamp to 'DAY_OF_THE_WEEK, MONTH DAY, YEAR HOURS:MINUTES, lasted for DURATION', except for the case: year equals 1969
+   * @param startTimestamp
+   * @return string startTimeSummary
+   */
+  startTime: function (startTimestamp) {
+    if (!validator.isValidInt(startTimestamp)) return '';
+    var startDate = new Date(startTimestamp * 1);
+    var months = this.dateMonths;
+    var days = this.dateDays;
+    // generate start time
+    if (startDate.getFullYear() == 1969 || startTimestamp < 1) {
+      return 'Not started';
+    }
+    var startTimeSummary = '';
+    if (new Date(startTimestamp * 1).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0) ) { //today
+      startTimeSummary = 'Today ' + this.dateFormatZeroFirst(startDate.getHours()) + ':' + this.dateFormatZeroFirst(startDate.getMinutes());
+    } else {
+      startTimeSummary =  days[startDate.getDay()] + ' ' + months[startDate.getMonth()] + ' ' + this.dateFormatZeroFirst(startDate.getDate()) + ' ' + startDate.getFullYear() + ' '
+        + this.dateFormatZeroFirst(startDate.getHours()) + ':' + this.dateFormatZeroFirst(startDate.getMinutes());
+    }
+    return startTimeSummary;
+  },
+  /**
+   * Provides the duration between the given start and end timestamp. If start time
+   * not valid, duration will be ''. If end time is not valid, duration will
+   * be till now, showing 'Lasted for xxx secs'.
+   * @param startTimestamp
+   * @param endTimestamp
+   * @return string durationSummary
+   */
+  durationSummary: function (startTimestamp, endTimestamp) {
+    // generate duration
+    var durationSummary = '';
+    var startDate = new Date(startTimestamp * 1);
+    var endDate = new Date(endTimestamp * 1);
+    if (startDate.getFullYear() == 1969 || startTimestamp < 1) {
+      return '';
+    }
+    if (endDate.getFullYear() != 1969 && endTimestamp > 0) {
+      durationSummary = '' + this.timingFormat(endTimestamp - startTimestamp, 1); //lasted for xx secs
+    } else {
+      durationSummary = '' + this.timingFormat(new Date().getTime() - startTimestamp, 1);
+    }
+    return durationSummary;
+  },
+
   /**
    * Convert time in mseconds to
    * 30 ms = 30 ms

ambari-web/app/utils/host_progress_popup.js

@@ -18,6 +18,7 @@
 
 var App = require('app');
 var batchUtils = require('utils/batch_scheduled_requests');
+var date = require('utils/date');
 
 /**
  * App.HostPopup is for the popup that shows up upon clicking already-performed or currently-in-progress operations
@@ -242,6 +243,8 @@ App.HostPopup = Em.Object.create({
           isRunning: service.isRunning,
           name: service.name,
           isVisible: true,
+          startTime: date.startTime(service.startTime),
+          duration: date.durationSummary(service.startTime, service.endTime),
           icon: status[1],
           barColor: status[2],
           isInProgress: status[3],
@@ -271,6 +274,8 @@ App.HostPopup = Em.Object.create({
       stderr: _task.Tasks.stderr,
       stdout: _task.Tasks.stdout,
       isVisible: true,
+      startTime: date.startTime(_task.Tasks.start_time),
+      duration: date.durationSummary(_task.Tasks.start_time, _task.Tasks.end_time),
       icon: function () {
         var statusIconMap = {
           'pending': 'icon-cog',
@@ -339,6 +344,8 @@ App.HostPopup = Em.Object.create({
                   existTask.set('status', App.format.taskStatus(_task.Tasks.status));
                   existTask.set('stdout', _task.Tasks.stdout);
                   existTask.set('stderr', _task.Tasks.stderr);
+                  existTask.set('startTime', date.startTime(_task.Tasks.start_time));
+                  existTask.set('duration', date.durationSummary(_task.Tasks.start_time, _task.Tasks.end_time));
                 } else {
                   existTasks.pushObject(this.createTask(_task));
                 }