[FLINK-3056] [web-dashboard] Represent bytes in more readable form.

Bytes are now displayed in the following fashion:
  1. For [0, 1000) units, display three significant digits.
  2. For [1000,1024) units, display 2 decimal points for the next higher unit.
For example, 1010 KB is displayed as 0.99 MB, 10 MB is displayed as 10.0 MB and 
230 MB is displayed as such.

This closes #1419


Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/80512229
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/80512229
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/80512229

Branch: refs/heads/master
Commit: 80512229c487537e59688d35ffdfb10dc18a8ac9
Parents: 6bac921
Author: Sachin Goel <sachingoel0...@gmail.com>
Authored: Sat Nov 28 16:54:23 2015 +0530
Committer: Stephan Ewen <se...@apache.org>
Committed: Mon Nov 30 17:44:12 2015 +0100

----------------------------------------------------------------------
 .../jobs/job.plan.node-list.overview.jade       |  4 +--
 .../partials/jobs/job.plan.node.subtasks.jade   |  6 ++--
 .../app/partials/taskmanager/index.jade         |  6 ++--
 .../taskmanager/taskmanager.metrics.jade        | 33 +++++++++++++-------
 .../app/scripts/common/filters.coffee           | 21 ++++++++-----
 flink-runtime-web/web-dashboard/web/js/index.js | 33 +++++++++++++-------
 .../jobs/job.plan.node-list.overview.html       |  4 +--
 .../partials/jobs/job.plan.node.subtasks.html   |  4 +--
 .../web/partials/taskmanager/index.html         |  6 ++--
 .../taskmanager/taskmanager.metrics.html        | 24 +++++++-------
 10 files changed, 85 insertions(+), 56 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flink/blob/80512229/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
----------------------------------------------------------------------
diff --git 
a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
 
b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
index 54bd29c..ef9257d 100644
--- 
a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
+++ 
b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.overview.jade
@@ -39,9 +39,9 @@ table.table.table-body-hover.table-clickable.table-activable
         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 }}
+      td(title="{{v.metrics['read-bytes']}} bytes") {{ v.metrics['read-bytes'] 
| humanizeBytes }}
       td {{ v.metrics['read-records'] | number }}
-      td {{ v.metrics['write-bytes'] | number }}
+      td(title="{{v.metrics['write-bytes']}} bytes") {{ 
v.metrics['write-bytes'] | humanizeBytes }}
       td {{ v.metrics['write-records'] | number }}
       td
         .label-group

http://git-wip-us.apache.org/repos/asf/flink/blob/80512229/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
----------------------------------------------------------------------
diff --git 
a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade 
b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
index 6350325..259b364 100644
--- 
a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
+++ 
b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
@@ -43,11 +43,13 @@ 
table.table.table-hover.table-clickable.table-activable.table-inner(ng-if="subta
         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 }}
+        span(ng-if="subtask.metrics['read-bytes'] > -1" 
title="{{subtask.metrics['read-bytes']}} bytes")
+          | {{ subtask.metrics['read-bytes'] | humanizeBytes}}
       td
         span(ng-if="subtask.metrics['read-records'] > -1") {{ 
subtask.metrics['read-records'] | number }}
       td
-        span(ng-if="subtask.metrics['write-bytes'] > -1") {{ 
subtask.metrics['write-bytes'] | number }}
+        span(ng-if="subtask.metrics['write-bytes'] > -1" 
title="{{subtask.metrics['write-bytes']}} bytes")
+          | {{ subtask.metrics['write-bytes'] | humanizeBytes}}
       td
         span(ng-if="subtask.metrics['write-records'] > -1") {{ 
subtask.metrics['write-records'] | number }}
 

http://git-wip-us.apache.org/repos/asf/flink/blob/80512229/flink-runtime-web/web-dashboard/app/partials/taskmanager/index.jade
----------------------------------------------------------------------
diff --git 
a/flink-runtime-web/web-dashboard/app/partials/taskmanager/index.jade 
b/flink-runtime-web/web-dashboard/app/partials/taskmanager/index.jade
index b6c98b2..a2b715d 100644
--- a/flink-runtime-web/web-dashboard/app/partials/taskmanager/index.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/taskmanager/index.jade
@@ -47,7 +47,7 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main
         td {{ manager.slotsNumber }}
         td {{ manager.freeSlots }}
         td {{ manager.cpuCores }}
-        td {{ manager.physicalMemory | bytes:MB }}
-        td {{ manager.freeMemory | bytes:MB }}
-        td {{ manager.managedMemory | bytes:MB }}
+        td(title="{{manager.physicalMemory}} bytes") {{ manager.physicalMemory 
| humanizeBytes }}
+        td(title="{{manager.freeMemory}} bytes") {{ manager.freeMemory | 
humanizeBytes }}
+        td(title="{{manager.managedMemory}} bytes") {{ manager.managedMemory | 
humanizeBytes }}
 

http://git-wip-us.apache.org/repos/asf/flink/blob/80512229/flink-runtime-web/web-dashboard/app/partials/taskmanager/taskmanager.metrics.jade
----------------------------------------------------------------------
diff --git 
a/flink-runtime-web/web-dashboard/app/partials/taskmanager/taskmanager.metrics.jade
 
b/flink-runtime-web/web-dashboard/app/partials/taskmanager/taskmanager.metrics.jade
index 60b6c77..5c3047c 100644
--- 
a/flink-runtime-web/web-dashboard/app/partials/taskmanager/taskmanager.metrics.jade
+++ 
b/flink-runtime-web/web-dashboard/app/partials/taskmanager/taskmanager.metrics.jade
@@ -26,19 +26,28 @@ table.table.table-properties(ng-if="metrics.id")
   tbody
     tr
       td Heap
-      td(table-property 
value="metrics.metrics.gauges['memory.heap.committed'].value | bytes:MB")
-      td(table-property 
value="metrics.metrics.gauges['memory.heap.init'].value | bytes:MB")
-      td(table-property value="metrics.metrics.gauges['memory.heap.max'].value 
| bytes:MB")
+      td(title="{{metrics.metrics.gauges['memory.heap.committed'].value}} 
bytes")
+        | {{metrics.metrics.gauges['memory.heap.committed'].value | 
humanizeBytes}}
+      td(title="{{metrics.metrics.gauges['memory.heap.init'].value}} bytes")
+        | {{metrics.metrics.gauges['memory.heap.init'].value | humanizeBytes}}
+      td(title="{{metrics.metrics.gauges['memory.heap.max'].value}} bytes")
+        | {{metrics.metrics.gauges['memory.heap.max'].value | humanizeBytes}}
     tr
       td Non-Heap
-      td(table-property 
value="metrics.metrics.gauges['memory.non-heap.committed'].value | bytes:MB")
-      td(table-property 
value="metrics.metrics.gauges['memory.non-heap.init'].value | bytes:MB")
-      td(table-property 
value="metrics.metrics.gauges['memory.non-heap.max'].value | bytes:MB")
+      td(title="{{metrics.metrics.gauges['memory.non-heap.committed'].value}} 
bytes")
+        | {{metrics.metrics.gauges['memory.non-heap.committed'].value | 
humanizeBytes}}
+      td(title="{{metrics.metrics.gauges['memory.non-heap.init'].value}} 
bytes")
+        | {{metrics.metrics.gauges['memory.non-heap.init'].value | 
humanizeBytes}}
+      td(title="{{metrics.metrics.gauges['memory.non-heap.max'].value}} bytes")
+        | {{metrics.metrics.gauges['memory.non-heap.max'].value | 
humanizeBytes}}
     tr
       td Total
-      td(table-property 
value="metrics.metrics.gauges['memory.total.committed'].value | bytes:MB")
-      td(table-property 
value="metrics.metrics.gauges['memory.total.init'].value | bytes:MB")
-      td(table-property 
value="metrics.metrics.gauges['memory.total.max'].value | bytes:MB")
+      td(title="{{metrics.metrics.gauges['memory.total.committed'].value}} 
bytes")
+        | {{metrics.metrics.gauges['memory.total.committed'].value | 
humanizeBytes}}
+      td(title="{{metrics.metrics.gauges['memory.total.init'].value}} bytes")
+        | {{metrics.metrics.gauges['memory.total.init'].value | humanizeBytes}}
+      td(title="{{metrics.metrics.gauges['memory.total.max'].value}} bytes")
+        | {{metrics.metrics.gauges['memory.total.max'].value | humanizeBytes}}
 
 table.table(ng-if="metrics.id")
   thead
@@ -57,9 +66,9 @@ table.table(ng-if="metrics.id")
       td {{ metrics.slotsNumber }}
       td {{ metrics.freeSlots }}
       td {{ metrics.cpuCores }}
-      td {{ metrics.physicalMemory | bytes:MB }}
-      td {{ metrics.freeMemory | bytes:MB }}
-      td {{ metrics.managedMemory | bytes:MB }}
+      td(title="{{metrics.physicalMemory}} bytes") {{ metrics.physicalMemory | 
humanizeBytes }}
+      td(title="{{metrics.freeMemory}} bytes") {{ metrics.freeMemory | 
humanizeBytes }}
+      td(title="{{metrics.managedMemory}} bytes") {{ metrics.managedMemory | 
humanizeBytes }}
 
 
 .row(ng-if="metrics.id")

http://git-wip-us.apache.org/repos/asf/flink/blob/80512229/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee 
b/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee
index a558a68..473adc3 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee
@@ -59,10 +59,17 @@ angular.module('flinkApp')
     # TODO: extend... a lot
     if text then text.replace(/&gt;/g, ">").replace(/<br\/>/g,"") else ''
 
-.filter "bytes", ->
-  (bytes, precision) ->
-    return "-"  if isNaN(parseFloat(bytes)) or not isFinite(bytes)
-    precision = 1  if typeof precision is "undefined"
-    units = [ "bytes", "kB", "MB", "GB", "TB", "PB" ]
-    number = Math.floor(Math.log(bytes) / Math.log(1024))
-    (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + " " + 
units[number]
+.filter "humanizeBytes", ->
+  (bytes) ->
+    units = ["B", "KB", "MB", "GB", "TB", "PB", "EB"]
+    converter = (value, power) ->
+      base = Math.pow(1024, power)
+      if value < base
+        return (value / base).toFixed(2) + " " + units[power]
+      else if value < base * 1000
+        return (value / base).toPrecision(3) + " " + units[power]
+      else
+        return converter(value, power + 1)
+    return "" if typeof bytes is "undefined" or bytes is null
+    if bytes < 1000 then bytes + " B" else converter(bytes, 1)
+

Reply via email to