Fix format of time+ in the web UI

glances/outputs/static/css/style.css

@@ -49,6 +49,10 @@ body {
     font-weight: bold;
     color: white;
 }
+.highlight {
+    font-weight: bold;
+    color: magenta;
+}
 .ok {
     color: green;
 }

glances/outputs/static/html/plugins/processlist.html

@@ -22,7 +22,9 @@
         <div class="table-cell text-left">{{process.username}}</div>
         <div class="table-cell">{{process.nice | exclamation}}</div>
         <div class="table-cell" ng-class="{status: process.status == 'R'}">{{process.status}}</div>
-        <div class="table-cell hidden-xs hidden-sm">{{process.timeformatted}}</div>
+        <div class="table-cell hidden-xs hidden-sm">
+            <span ng-show="process.timeplus.hours > 0" class="highlight">{{ process.timeplus.hours }}h</span>{{ process.timeplus.minutes | leftPad:2:'0' }}:{{ process.timeplus.seconds | leftPad:2:'0' }}<span ng-show="process.timeplus.hours <= 0">.{{ process.timeplus.milliseconds | leftPad:2:'0' }}</span>
+        </div>
         <div class="table-cell hidden-xs hidden-sm">{{process.io_read}}</div>
         <div class="table-cell hidden-xs hidden-sm">{{process.io_write}}</div>
         <div class="table-cell text-left" ng-if="show.short_process_name">{{process.name}}</div>

glances/outputs/static/js/filters.js

@@ -76,3 +76,11 @@ glancesApp.filter('bits', function($filter) {
       return $filter('bytes')(bits, low_precision) + 'b';
     }
 });
+
+glancesApp.filter('leftPad', function($filter) {
+    return function (value, length, chars) {
+      length = length || 0;
+      chars = chars || ' ';
+      return _.padLeft(value, length, chars);
+    }
+});

glances/outputs/static/js/stats_controller.js

@@ -89,21 +89,16 @@ glancesApp.controller('statsController', function($scope, $http, $interval, $q,
                 }
                 return sum;
             }
-            function leftpad(input) {
-                if (input < 10) {
-                    return "0" + input
-                }
-                return input
-            }
             function timedelta(input) {
                 var sum = timemillis(input);
                 var d = new Date(sum);
-                var hour = leftpad(d.getUTCHours()) // TODO : multiple days ( * (d.getDay() * 24)))
-                var minutes = leftpad(d.getUTCMinutes())
-                var seconds = leftpad(d.getUTCSeconds())
-                var milliseconds = parseInt("" + d.getUTCMilliseconds() / 10)
-                var millisecondsStr = leftpad(milliseconds)
-                return hour +":" + minutes + ":" + seconds + "." + millisecondsStr
+
+                return {
+                  hours: d.getUTCHours(), // TODO : multiple days ( * (d.getDay() * 24)))
+                  minutes: d.getUTCMinutes(),
+                  seconds: d.getUTCSeconds(),
+                  milliseconds: parseInt("" + d.getUTCMilliseconds() / 10)
+                };
             };
 
             function durationBetweenTwoDates(startDate, endDate) {
@@ -119,7 +114,7 @@ glancesApp.controller('statsController', function($scope, $http, $interval, $q,
                 var process = response['processlist'][i]
                 process.memvirt = process.memory_info[1]
                 process.memres  = process.memory_info[0]
-                process.timeformatted = timedelta(process.cpu_times)
+                process.timeplus = timedelta(process.cpu_times)
                 process.timemillis = timemillis(process.cpu_times)
 
                 process.io_read = '?';