Better representation for VMs memory usage in host page (fixes #14).

The scale is not logarithmic but the order is respected.

public/js/xo.helpers.js

@@ -0,0 +1,87 @@
+/**
+ * This file is a part of Xen Orchestra Web.
+ *
+ * Xen Orchestra Web is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * Xen Orchestra Web is distributed in the hope that it will be
+ * useful, but WITHOUT ANY WARRANTY; without even the implied warranty
+ * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Xen Orchestra Web. If not, see
+ * <http://www.gnu.org/licenses/>.
+ *
+ * @author Julien Fontanet <julien.fontanet@vates.fr
+ * @license http://www.gnu.org/licenses/agpl-3.0-standalone.html GNU AGPLv3
+ *
+ * @package Xen Orchestra Web
+ */
+
+!function(xo, _, undefined)
+{
+	'use strict';
+
+	/**
+	 * [description]
+	 *
+	 * @todo Documentation
+	 *
+	 * @param {integer} size [description]
+	 * @param {string=} unit [description]
+	 * @param {integer=} base
+	 *
+	 * @return string
+	 */
+	xo.formatSize = function(size, unit, base)
+	{
+		unit = (undefined !== unit) ? ''+unit : 'B';
+		base = (undefined !== base) ? base|0 : 1024;
+
+		var powers = ['', 'K', 'M', 'G', 'T', 'P'];
+		var str = '' + size;
+
+		for (var i = 0; size > base; ++i)
+		{
+			size = (size|0) / base;
+		}
+
+		return (size + powers[i] + unit);
+	};
+
+	/**
+	 * [description]
+	 *
+	 * @todo Find a better name!
+	 * @todo Documentation
+	 *
+	 * @param {list} values [description]
+	 * @param {number=} ratio  [description]
+	 * @param {number=} total  [description]
+	 *
+	 * @return {[type]}        [description]
+	 */
+	xo.plop = function(values, ratio, total)
+	{
+		var sum = _.reduce(values, function(sum, value) {
+			return (sum + +value);
+		}, 0);
+
+		var avg = sum / _.size(values);
+
+		ratio = (undefined !== ratio) ? +ratio : 0.5;
+		var comp = 1 - ratio; // Complementary ratio.
+
+		var coef = (undefined !== total) ? +total / sum : 1;
+		ratio *= coef;
+		comp *= coef;
+		_.each(values, function(value, i) {
+			values[i] = ratio * values[i] + comp * avg;
+		});
+
+		return values;
+	}
+}(window.xo = window.xo || {}, window._);

views/_base.templet

@@ -164,9 +164,11 @@
 		{block body}{/block}
 
 		{* JS Placed at the end of the document so the pages load faster *}
+		<script src="{$base_path}/js/underscore.js"></script>
 		<script src="{$base_path}/js/jquery.js"></script>
 		<script src="{$base_path}/js/bootstrap.js"></script>
 		<script src="{$base_path}/js/xo.js"></script>
+		<script src="{$base_path}/js/xo.helpers.js"></script>
 		{block extra_scripts}{/block}
 	</body>
  </html>

views/network/index.templet

@@ -26,7 +26,6 @@
 {block title}Network Overview{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>

views/servers/index.templet

@@ -26,7 +26,6 @@
 {block title}Server overview{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>

views/servers/show.templet

@@ -26,7 +26,6 @@
 {block title}Server overview{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>
@@ -118,11 +117,15 @@
 			</div>
 			<div class="tab-pane fade" id="memory">
 				<div class="progress progress-big progress-danger">
-					<% for (var VM_uuid in memory.per_VM)
+					<%
+					var size_per_VM = _.clone(memory.per_VM);
+					size_per_VM.free = memory.free;
+					size_per_VM = xo.plop(size_per_VM, 0.5, 100);
+					for (var VM_uuid in memory.per_VM)
 					{{
 						var VM     = VMs[VM_uuid];
 						var VM_mem = memory.per_VM[VM_uuid];
-						var size   = Math.round(100*VM_mem / memory.total);
+						var size   = size_per_VM[VM_uuid];
 						if ('dom0' === VM_uuid )
 						{{
 							%><div class="bar bar-info" style="width: <%= size %>%;">

views/storage/index.templet

@@ -26,7 +26,6 @@
 {block title}Storage Overview{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>

views/templates/index.templet

@@ -26,7 +26,6 @@
 {block title}Templates{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>

views/vms/index.templet

@@ -26,7 +26,6 @@
 {block title}VMs Overview{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>

views/vms/show.templet

@@ -26,7 +26,6 @@
 {block title}VM overview{/block}
 
 {block extra_scripts}
-<script src="{$base_path}/js/underscore.js"></script>
 <script src="{$base_path}/js/backbone.js"></script>
 <script src="{$base_path}/js/marionette.js"></script>
 <script>