From 82de203482265dfe321cc6610da4eae84f6545cf Mon Sep 17 00:00:00 2001
From: opi <opi@no-log.org>
Date: Fri, 14 Feb 2014 20:14:09 +0100
Subject: [PATCH] Human readable size with HandleBars helper.

---
 js/app.js        | 43 ++++++++-----------------------------------
 views/monitor.ms | 34 +++++++++++++++++-----------------
 2 files changed, 25 insertions(+), 52 deletions(-)

diff --git a/js/app.js b/js/app.js
index 487e67da..30790b97 100644
--- a/js/app.js
+++ b/js/app.js
@@ -7,6 +7,14 @@ app = Sammy('#main', function (sam) {
     // Plugins
     sam.use('Handlebars', 'ms');
 
+    Handlebars.registerHelper('humanSize', function(bytes) {
+        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        if (bytes == 0) return 'n/a';
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[[i]];
+    });
+
+
     // Look for supported type of storage to use
     var storageType;
     if (Sammy.Store.isAvailable('session')) {
@@ -577,56 +585,21 @@ app = Sammy('#main', function (sam) {
     sam.get('#/monitor', function (c) {
         monitorData = {}
 
-        // Put this function elswere ?
-        function bytesToSize(bytes) {
-            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-            if (bytes == 0) return 'n/a';
-            var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-            return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[[i]];
-        };
-
         // Why this method ? 
         c.api('/monitor/update-stats', function(data) { // ?
 
             c.api('/monitor/system', function(data) {
                 monitorData.system = data;
 
-                // Convert byte to human readable string
-                $.each(monitorData.system.memory, function(k,v) {
-                    monitorData.system.memory[k].free = bytesToSize(v.free);
-                    monitorData.system.memory[k].used = bytesToSize(v.used);
-                    monitorData.system.memory[k].total = bytesToSize(v.total);
-                });
-                
                 c.api('/monitor/disk', function(data) {
                     monitorData.disk = data;
 
-                    // Convert byte to human readable string
-                    $.each(monitorData.disk, function(k,v) {
-                        monitorData.disk[k].filesystem.avail = bytesToSize(v.filesystem.avail);
-                        monitorData.disk[k].filesystem.size = bytesToSize(v.filesystem.size);
-                        monitorData.disk[k].filesystem.used = bytesToSize(v.filesystem.used);
-                        monitorData.disk[k].io.read_bytes = bytesToSize(v.io.read_bytes);
-                        monitorData.disk[k].io.write_bytes = bytesToSize(v.io.write_bytes);
-                    });
-
                     c.api('/monitor/network', function(data) {
                         monitorData.network = data;
                         
                         // Remove useless interface
                         delete monitorData.network.usage.lo;
 
-                        // Convert byte to human readable string
-                        $.each(monitorData.network.usage, function(k,v) {
-                            monitorData.network.usage[k].cx = bytesToSize(v.cx);
-                            monitorData.network.usage[k].cumulative_cx = bytesToSize(v.cumulative_cx);
-                            monitorData.network.usage[k].rx = bytesToSize(v.rx);
-                            monitorData.network.usage[k].cumulative_rx = bytesToSize(v.cumulative_rx);
-                            monitorData.network.usage[k].tx = bytesToSize(v.tx);
-                            monitorData.network.usage[k].cumulative_tx = bytesToSize(v.cumulative_tx);
-                        });
-
-
                         c.view('monitor', monitorData);
                     });
 
diff --git a/views/monitor.ms b/views/monitor.ms
index 6d37fb22..b7a75d64 100644
--- a/views/monitor.ms
+++ b/views/monitor.ms
@@ -36,15 +36,15 @@
                     <table class="table table-condensed">
                         <tr>
                             <td>Used</td>
-                            <td>{{system.memory.ram.used}} ({{system.memory.ram.percent}} %)</td>
+                            <td>{{humanSize system.memory.ram.used}} ({{system.memory.ram.percent}} %)</td>
                         </tr>
                         <tr>
                             <td>Free</td>
-                            <td>{{system.memory.ram.free}}</td>
+                            <td>{{humanSize system.memory.ram.free}}</td>
                         </tr>
                         <tr class="active">
                             <td>Total</td>
-                            <td>{{system.memory.ram.total}}</td>
+                            <td>{{humanSize system.memory.ram.total}}</td>
                         </tr>
                     </table>
 
@@ -52,15 +52,15 @@
                     <table class="table table-condensed">
                         <tr>
                             <td>Used</td>
-                            <td>{{system.memory.swap.used}} ({{system.memory.swap.percent}} %)</td>
+                            <td>{{humanSize system.memory.swap.used}} ({{system.memory.swap.percent}} %)</td>
                         </tr>
                         <tr>
                             <td>Free</td>
-                            <td>{{system.memory.swap.free}}</td>
+                            <td>{{humanSize system.memory.swap.free}}</td>
                         </tr>
                         <tr class="active">
                             <td>Total</td>
-                            <td>{{system.memory.swap.total}}</td>
+                            <td>{{humanSize system.memory.swap.total}}</td>
                         </tr>
                     </table>
                 </div>
@@ -147,18 +147,18 @@
                     <table class="table table-condensed">
                         <tr>
                             <td>Cx</td>
-                            <td>{{cx}}</td>
-                            <td>{{cumulative_cx}} (cumulative)</td>
+                            <td>{{humanSize cx}}</td>
+                            <td>{{humanSize cumulative_cx}} (cumulative)</td>
                         </tr>
                         <tr>
                             <td>Rx</td>
-                            <td>{{rx}}</td>
-                            <td>{{cumulative_rx}} (cumulative)</td>
+                            <td>{{humanSize rx}}</td>
+                            <td>{{humanSize cumulative_rx}} (cumulative)</td>
                         </tr>
                         <tr>
                             <td>Tx</td>
-                            <td>{{tx}}</td>
-                            <td>{{cumulative_tx}} (cumulative)</td>
+                            <td>{{humanSize tx}}</td>
+                            <td>{{humanSize cumulative_tx}} (cumulative)</td>
                         </tr>
                     </table>
                 {{/each}}
@@ -188,13 +188,13 @@
                                 <td>Mount point</td><td>{{ filesystem.mnt_point }}</td>
                             </tr>
                             <tr>
-                                <td>Size</td><td>{{ filesystem.size }}</td>
+                                <td>Size</td><td>{{humanSize filesystem.size }}</td>
                             </tr>
                             <tr>
-                                <td>Used</td><td>{{ filesystem.used }}</td>
+                                <td>Used</td><td>{{humanSize filesystem.used }}</td>
                             </tr>
                             <tr class="active">
-                                <td>Available</td><td>{{ filesystem.avail }}</td>
+                                <td>Available</td><td>{{humanSize filesystem.avail }}</td>
                             </tr>
                         </table>
                     </div>
@@ -202,10 +202,10 @@
                         <h4>I/O <small>Time since update: {{ io.time_since_update }}</small></h4>
                         <table class="table table-condensed">
                             <tr>
-                                <td>Read</td><td>{{ io.read_bytes }}</td>
+                                <td>Read</td><td>{{humanSize io.read_bytes }}</td>
                             </tr>
                             <tr>
-                                <td>Write</td><td>{{ io.write_bytes }}</td>
+                                <td>Write</td><td>{{humanSize io.write_bytes }}</td>
                             </tr>
                         </table>
                     </div>