[FLINK-2966][web-dashboard] Improve the way job duration is reported

This closes #1327.

flink-runtime-web/web-dashboard/app/partials/jobs/completed-jobs.jade

@@ -38,7 +38,7 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
       tr(ng-repeat="job in jobs|orderBy:\"'end-time'\":true" ui-sref="single-job.plan.overview({ jobid: job.jid })")
         td {{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
         td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
-        td {{job.duration}} ms
+        td(title="{{job.duration | humanizeDuration:false}}") {{job.duration | humanizeDuration:true}}
         td {{job.name}}
         td {{job.jid}}
         td.label-group

flink-runtime-web/web-dashboard/app/partials/jobs/job.jade

@@ -36,8 +36,8 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main(ng-if="job")
       | - 
       | {{ job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
 
-  .navbar-info.last.first(ng-if="job.duration > -1")
-    | {{job.duration}} ms
+  .navbar-info.last.first(ng-if="job.duration > -1" title="{{job.duration | humanizeDuration:false}}")
+    | {{job.duration | humanizeDuration:true}}
 
   .navbar-info.last.first(ng-if="job.state=='RUNNING' || job.state=='CREATED'")
     span.navbar-info-button.btn.btn-default(ng-click="cancelJob($event)")

flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade

@@ -36,7 +36,7 @@ table.table.table-body-hover.table-clickable.table-activable
       td
         span(ng-if="v['end-time'] > -1") {{ v['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
       td
-        span(ng-if="v.duration > -1") {{ v.duration }} ms
+        span(ng-if="v.duration > -1" title="{{v.duration | humanizeDuration:false}}") {{v.duration | humanizeDuration:true}}
 
       td.td-long {{ v.name | humanizeText }}
       td {{ v.metrics['read-bytes'] | number }}

flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade

@@ -40,7 +40,7 @@ table.table.table-hover.table-clickable.table-activable.table-inner(ng-if="subta
       td
         span(ng-if="subtask['end-time'] > -1") {{ subtask['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
       td
-        span(ng-if="subtask.duration > -1") {{ subtask.duration }} ms
+        span(ng-if="subtask.duration > -1" title="{{subtask.duration | humanizeDuration:false}}") {{subtask.duration | humanizeDuration:true}}
 
       td
         span(ng-if="subtask.metrics['read-bytes'] > -1") {{ subtask.metrics['read-bytes'] | number }}

flink-runtime-web/web-dashboard/app/partials/jobs/running-jobs.jade

@@ -38,7 +38,7 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
       tr(ng-repeat="job in jobs|orderBy:\"'start-time'\"" ui-sref="single-job.plan.overview({ jobid: job.jid })")
         td {{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
         td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
-        td {{job.duration}} ms
+        td(title="{{job.duration | humanizeDuration:false}}") {{job.duration | humanizeDuration:true}}
         td {{job.name}}
         td {{job.jid}}
         td.label-group

flink-runtime-web/web-dashboard/app/partials/overview.jade

@@ -98,7 +98,7 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
           tr(ng-repeat="job in runningJobs|orderBy:\"'start-time'\"" ui-sref="single-job.plan.overview({ jobid: job.jid })")
             td {{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
             td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
-            td {{job.duration}} ms
+            td(title="{{job.duration | humanizeDuration:false}}") {{job.duration | humanizeDuration:true}}
             td {{job.name}}
             td {{job.jid}}
             td.label-group
@@ -126,7 +126,7 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
           tr(ng-repeat="job in finishedJobs|orderBy:\"'end-time'\":true" ui-sref="single-job.plan.overview({ jobid: job.jid })")
             td {{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
             td {{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}
-            td {{job.duration}} ms
+            td(title="{{job.duration | humanizeDuration:false}}") {{job.duration | humanizeDuration:true}}
             td {{job.name}}
             td {{job.jid}}
             td.label-group

flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee

@@ -28,6 +28,32 @@ angular.module('flinkApp')
 
   amDurationFormatExtendedFilter
 
+.filter "humanizeDuration", ->
+  (value, short) ->
+    return "" if typeof value is "undefined" or value is null
+    ms = value % 1000
+    x = Math.floor(value / 1000)
+    seconds = x % 60
+    x = Math.floor(x / 60)
+    minutes = x % 60
+    x = Math.floor(x / 60)
+    hours = x % 24
+    x = Math.floor(x / 24)
+    days = x
+    if days == 0
+      if hours == 0
+        if minutes == 0
+          if seconds == 0
+            return ms + "ms"
+          else
+            return seconds + "s "
+        else
+          return minutes + "m " + seconds + "s"
+      else
+        if short then return hours + "h " + minutes + "m" else return hours + "h " + minutes + "m " + seconds + "s"
+    else
+      if short then return days + "d " + hours + "h" else return days + "d " + hours + "h " + minutes + "m " + seconds + "s"
+
 .filter "humanizeText", ->
   (text) ->
     # TODO: extend... a lot

flink-runtime-web/web-dashboard/web/partials/jobs/completed-jobs.html

@@ -38,7 +38,7 @@ limitations under the License.
       <tr ng-repeat="job in jobs|orderBy:&quot;'end-time'&quot;:true" ui-sref="single-job.plan.overview({ jobid: job.jid })">
         <td>{{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
         <td>{{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
-        <td>{{job.duration}} ms</td>
+        <td title="{{job.duration | humanizeDuration:false}}">{{job.duration | humanizeDuration:true}}</td>
         <td>{{job.name}}</td>
         <td>{{job.jid}}</td>
         <td class="label-group">

flink-runtime-web/web-dashboard/web/partials/jobs/job.html

@@ -31,7 +31,7 @@ limitations under the License.
   <div class="navbar-info first last hidden-xs hidden-sm">{{ job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}<span ng-if="job['end-time'] &gt; -1">
       - 
       {{ job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}</span></div>
-  <div ng-if="job.duration &gt; -1" class="navbar-info last first">{{job.duration}} ms</div>
+  <div ng-if="job.duration &gt; -1" title="{{job.duration | humanizeDuration:false}}" class="navbar-info last first">{{job.duration | humanizeDuration:true}}</div>
   <div ng-if="job.state=='RUNNING' || job.state=='CREATED'" class="navbar-info last first"><span ng-click="cancelJob($event)" class="navbar-info-button btn btn-default">Cancel</span></div>
 </nav>
 <nav ng-if="job" class="navbar navbar-default navbar-fixed-top navbar-main-additional">

flink-runtime-web/web-dashboard/web/partials/jobs/job.plan.node-list.overview.html

@@ -36,7 +36,7 @@ limitations under the License.
     <tr ng-if="v.type == 'regular'">
       <td><span ng-if="v['start-time'] &gt; -1">{{ v['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}</span></td>
       <td><span ng-if="v['end-time'] &gt; -1">{{ v['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}</span></td>
-      <td><span ng-if="v.duration &gt; -1">{{ v.duration }} ms</span></td>
+      <td><span ng-if="v.duration &gt; -1" title="{{v.duration | humanizeDuration:false}}">{{v.duration | humanizeDuration:true}}</span></td>
       <td class="td-long">{{ v.name | humanizeText }}</td>
       <td>{{ v.metrics['read-bytes'] | number }}</td>
       <td>{{ v.metrics['read-records'] | number }}</td>

flink-runtime-web/web-dashboard/web/partials/jobs/job.plan.node.subtasks.html

@@ -37,7 +37,7 @@ limitations under the License.
     <tr ng-repeat="subtask in subtasks">
       <td><span ng-if="subtask['start-time'] &gt; -1">{{ subtask['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}</span></td>
       <td><span ng-if="subtask['end-time'] &gt; -1">{{ subtask['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}</span></td>
-      <td><span ng-if="subtask.duration &gt; -1">{{ subtask.duration }} ms</span></td>
+      <td><span ng-if="subtask.duration &gt; -1" title="{{subtask.duration | humanizeDuration:false}}">{{subtask.duration | humanizeDuration:true}}</span></td>
       <td><span ng-if="subtask.metrics['read-bytes'] &gt; -1">{{ subtask.metrics['read-bytes'] | number }}</span></td>
       <td><span ng-if="subtask.metrics['read-records'] &gt; -1">{{ subtask.metrics['read-records'] | number }}</span></td>
       <td><span ng-if="subtask.metrics['write-bytes'] &gt; -1">{{ subtask.metrics['write-bytes'] | number }}</span></td>

flink-runtime-web/web-dashboard/web/partials/jobs/running-jobs.html

@@ -38,7 +38,7 @@ limitations under the License.
       <tr ng-repeat="job in jobs|orderBy:&quot;'start-time'&quot;" ui-sref="single-job.plan.overview({ jobid: job.jid })">
         <td>{{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
         <td>{{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
-        <td>{{job.duration}} ms</td>
+        <td title="{{job.duration | humanizeDuration:false}}">{{job.duration | humanizeDuration:true}}</td>
         <td>{{job.name}}</td>
         <td>{{job.jid}}</td>
         <td class="label-group">

flink-runtime-web/web-dashboard/web/partials/overview.html

@@ -95,7 +95,7 @@ limitations under the License.
           <tr ng-repeat="job in runningJobs|orderBy:&quot;'start-time'&quot;" ui-sref="single-job.plan.overview({ jobid: job.jid })">
             <td>{{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
             <td>{{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
-            <td>{{job.duration}} ms</td>
+            <td title="{{job.duration | humanizeDuration:false}}">{{job.duration | humanizeDuration:true}}</td>
             <td>{{job.name}}</td>
             <td>{{job.jid}}</td>
             <td class="label-group">
@@ -130,7 +130,7 @@ limitations under the License.
           <tr ng-repeat="job in finishedJobs|orderBy:&quot;'end-time'&quot;:true" ui-sref="single-job.plan.overview({ jobid: job.jid })">
             <td>{{job['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
             <td>{{job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss'}}</td>
-            <td>{{job.duration}} ms</td>
+            <td title="{{job.duration | humanizeDuration:false}}">{{job.duration | humanizeDuration:true}}</td>
             <td>{{job.name}}</td>
             <td>{{job.jid}}</td>
             <td class="label-group">