From 1d4df9ef55af776224bcb60027be8e3831357873 Mon Sep 17 00:00:00 2001
From: Hector Sanjuan <hsanjuan@opennebula.org>
Date: Fri, 8 Jul 2011 16:27:25 +0200
Subject: [PATCH] Feature #696: Sunstone client side update to support new
 graphic data format

---
 src/sunstone/models/SunstoneServer.rb         |  3 +-
 .../public/js/plugins/dashboard-tab.js        | 17 +++++----
 src/sunstone/public/js/sunstone-util.js       | 36 ++++++++++++++-----
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/sunstone/models/SunstoneServer.rb b/src/sunstone/models/SunstoneServer.rb
index 4d4f81ce9f..835c5d8779 100644
--- a/src/sunstone/models/SunstoneServer.rb
+++ b/src/sunstone/models/SunstoneServer.rb
@@ -298,7 +298,8 @@ class SunstoneServer
                     watch_client.host_total(columns)
                 end
             else
-                return [200, nil]
+                 error = Error.new("Monitoring not supported for this resource: #{resource}")
+                return [200, error.to_json]
             end
 
         if rc.nil?
diff --git a/src/sunstone/public/js/plugins/dashboard-tab.js b/src/sunstone/public/js/plugins/dashboard-tab.js
index ac5b375c36..623fb3a18b 100644
--- a/src/sunstone/public/js/plugins/dashboard-tab.js
+++ b/src/sunstone/public/js/plugins/dashboard-tab.js
@@ -168,30 +168,33 @@ Sunstone.addMainTab('dashboard_tab',dashboard_tab);
 
 function plot_global_graph(data,info){
     var id = info.title;
-    var labels_arr = info.monitor_resources.split(',');
+    var monitoring = data.monitoring;
     var serie;
     var series = [];
     var width = ($(window).width()-129)*45/100;
+    var mon_count = 0;
 
     $('#'+id).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px"><div>');
 
-    for (var i = 0; i< labels_arr.length; i++) {
+    for (var label in monitoring) {
         serie = {
-            label: labels_arr[i],
-            data: data[i]
+            label: label,
+            data: monitoring[label]
         };
         series.push(serie);
+        mon_count++;
     };
 
     var options = {
         legend : {
             show : true,
-            noColumns: labels_arr.length,
+            noColumns: mon_count,
             container: $('#'+id+'_legend')
         },
         xaxis : {
-            mode: "time",
-            timeformat: "%h:%M"
+            tickFormatter: function(val,axis){
+                return pretty_time_axis(val);
+            },
         },
         yaxis : { labelWidth: 40 }
     }
diff --git a/src/sunstone/public/js/sunstone-util.js b/src/sunstone/public/js/sunstone-util.js
index 8c43b26883..37087f89f4 100644
--- a/src/sunstone/public/js/sunstone-util.js
+++ b/src/sunstone/public/js/sunstone-util.js
@@ -46,6 +46,20 @@ function pretty_time(time_seconds)
     return hour + ":" + mins +":" + secs + "&nbsp;" + month + "/" + day + "/" + year;
 }
 
+function pretty_time_axis(time){
+    var d = new Date();
+    d.setTime(time*1000);
+
+    var secs = pad(d.getSeconds(),2);
+    var hour = pad(d.getHours(),2);
+    var mins = pad(d.getMinutes(),2);
+    var day = pad(d.getDate(),2);
+    var month = pad(d.getMonth()+1,2); //getMonths returns 0-11
+    var year = d.getFullYear();
+
+    return hour + ":" + mins + ":" + secs;// + "&nbsp;" + month + "/" + day;
+}
+
 //returns a human readable size in Kilo, Mega, Giga or Tera bytes
 function humanize_size(value) {
     if (typeof(value) === "undefined") {
@@ -512,27 +526,31 @@ function plot_graph(data,context,id_prefix,info){
     var labels = info.monitor_resources;
     var humanize = info.humanize_figures ?
         humanize_size : function(val){ return val };
-    var labels_arr = labels.split(',');
     var id_suffix = labels.replace(/,/g,'_');
+    var monitoring = data.monitoring
     var series = [];
-    var serie = null;
+    var serie;
+    var mon_count = 0;
 
-    for (var i = 0; i< labels_arr.length; i++) {
+    for (var label in monitoring) {
         serie = {
-            label: labels_arr[i],
-            data: data[i]
+            label: label,
+            data: monitoring[label]
         };
         series.push(serie);
+        mon_count++;
     };
 
     var options = {
         legend : { show : true,
-                   noColumns: labels_arr.length,
+                   noColumns: mon_count++,
                    container: $('#legend_'+id_suffix)
                  },
-        xaxis : { mode: "time",
-                  timeformat: "%h:%M"
-                },
+        xaxis : {
+            tickFormatter: function(val,axis){
+                return pretty_time_axis(val);
+            },
+        },
         yaxis : { labelWidth: 40,
                   tickFormatter: function(val, axis) {
                       return humanize(val);