Merge branch 'feature-507'

Conflicts:
	src/sunstone/public/js/one-ui_views.js
	src/sunstone/public/js/one-ui_views.templates.js

src/sunstone/public/css/application.css

@@ -407,7 +407,7 @@ tr.even:hover{
 .top_button {
     font-size: 0.8em;
     height: 25px;
-    margin: 3px 0;
+    margin: 3px 2px;
     vertical-align: middle;
     /*width: 89px;*/
 }
@@ -417,6 +417,13 @@ tr.even:hover{
 	vertical-align: middle;
 }
 
+.image_button {
+  font-size: 0.8em;
+  margin: 3px 2px;
+  vertical-align: middle;
+  border:0;
+}
+
 /*
 .multi_action_slct{
 	font-size: 0.7em;

src/sunstone/public/js/layout.js

@@ -57,7 +57,7 @@ function showTab(tabname){
 $(document).ready(function () {
     $(".tab").hide();
 
-    $(".outer-west ul li a").click(function(){
+    $(".outer-west ul li a").live("click",function(){
         var tab = $(this).attr('href');
         showTab(tab);
         return false;
@@ -97,6 +97,5 @@ $(document).ready(function () {
     ,	spacing_closed:			12 // ALL panes
     });
 
-    showTab("#dashboard");
 });
 

src/sunstone/public/js/opennebula.js

@@ -182,8 +182,8 @@ var OpenNebula = {
             var password = params.data.password;
             var remember = params.remember;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Auth.resource;            
-            var request = OpenNebula.Helper.request(this.resource,"login");
+            var request = OpenNebula.Helper.request(resource,"login");
 
             $.ajax({
                 url: "/login",
@@ -216,8 +216,8 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Auth.resource;
-            var request = OpenNebula.Helper.request(this.resource,"logout");
+            var request = OpenNebula.Helper.request(resource,"logout");
 
             $.ajax({
                 url: "/logout",
@@ -248,8 +248,8 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Config.resource;
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/config",
@@ -281,8 +281,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var data = params.data;
+            var resource = OpenNebula.Host.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"create", data);
+            var request = OpenNebula.Helper.request(resource,"create", data);
 
             $.ajax({
                 url: "/host",
@@ -311,9 +312,10 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Host.resource;
 
 
-            var request = OpenNebula.Helper.request(this.resource,"delete", id);
+            var request = OpenNebula.Helper.request(resource,"delete", id);
 
             $.ajax({
                 url: "/host/" + id,
@@ -341,8 +343,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var timeout = params.timeout || false;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Host.resource;
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/host",
@@ -374,8 +376,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var id = params.data.id;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Host.resource;
-            var request = OpenNebula.Helper.request(this.resource,"show", id);
+            var request = OpenNebula.Helper.request(resource,"show", id);
 
             $.ajax({
                 url: "/host/" + id,
@@ -403,10 +405,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Host.resource;
 
             var method = "enable";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/host/" + id + "/action",
@@ -434,10 +437,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Host.resource;
 
             var method = "disable";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/host/" + id + "/action",
@@ -469,8 +473,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var data = params.data;
+            var resource = OpenNebula.Network.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"create",data);
+            var request = OpenNebula.Helper.request(resource,"create",data);
 
             $.ajax({
                 url: "/vnet",
@@ -499,8 +504,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Network.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"delete", id);
+            var request = OpenNebula.Helper.request(resource,"delete", id);
 
             $.ajax({
                 url: "/vnet/" + id,
@@ -527,9 +533,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var timeout = params.timeout || false;
-
+            var resource = OpenNebula.Network.resource;
-            var resource = this.resource;
+            
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/vnet",
@@ -559,8 +565,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Network.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"show", id);
+            var request = OpenNebula.Helper.request(resource,"show", id);
 
             $.ajax({
                 url: "/vnet/" + id,
@@ -588,10 +595,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Network.resource;
 
             var method = "publish";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vnet/" + id + "/action",
@@ -619,10 +627,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Network.resource;
 
             var method = "unpublish";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vnet/" + id + "/action",
@@ -654,8 +663,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var data = params.data;
+            var resource = OpenNebula.VM.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"create",data);
+            var request = OpenNebula.Helper.request(resource,"create",data);
 
             $.ajax({
                 url: "/vm",
@@ -684,8 +694,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Network.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"delete", id);
+            var request = OpenNebula.Helper.request(resource,"delete", id);
 
             $.ajax({
                 url: "/vm/" + id,
@@ -713,8 +724,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var timeout = params.timeout || false;
 
-            var resource = this.resource;
+            var resource = OpenNebula.VM.resource;
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/vm",
@@ -744,8 +755,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"log", id);
+            var request = OpenNebula.Helper.request(resource,"log", id);
 
             $.ajax({
                 url: "/vm/" + id + "/log",
@@ -772,8 +784,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"show", id);
+            var request = OpenNebula.Helper.request(resource,"show", id);
 
             $.ajax({
                 url: "/vm/" + id,
@@ -801,11 +814,12 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
-            var host = params.data.host_id;
+            var host = params.data.extra_param;
+            var resource = OpenNebula.VM.resource;
 
             var method = "deploy";
             var action = OpenNebula.Helper.action(method, {"host_id": host});
-            var request = OpenNebula.Helper.request(this.resource,method, [id, host]);
+            var request = OpenNebula.Helper.request(resource,method, [id, host]);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -833,10 +847,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "shutdown";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -864,11 +879,12 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
-            var host = params.data.host_id;
+            var host = params.data.extra_param;
+            var resource = OpenNebula.VM.resource;
 
             var method = "livemigrate";
             var action = OpenNebula.Helper.action(method,{"host_id": host});
-            var request = OpenNebula.Helper.request(this.resource,method, [id, host]);
+            var request = OpenNebula.Helper.request(resource,method, [id, host]);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -896,11 +912,12 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
-            var host = params.data.host_id;
+            var host = params.data.extra_param;
+            var resource = OpenNebula.VM.resource;
 
             var method = "migrate";
             var action = OpenNebula.Helper.action(method,{"host_id": host});
-            var request = OpenNebula.Helper.request(this.resource,method, [id, host]);
+            var request = OpenNebula.Helper.request(resource,method, [id, host]);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -928,10 +945,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "hold";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -959,10 +977,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "release";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -990,10 +1009,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "stop";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -1021,10 +1041,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "cancel";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -1052,10 +1073,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
-
+            var resource = OpenNebula.VM.resource;
+            
             var method = "suspend";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -1083,10 +1105,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "resume";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -1125,8 +1148,10 @@ var OpenNebula = {
                 "image_name": image_name,
                 "type"      : type
             }
+            var resource = OpenNebula.VM.resource;
+            
             var action = OpenNebula.Helper.action(method,saveas_params)
-            var request = OpenNebula.Helper.request(this.resource,method, [vm_id, disk_id, image_name, type]);
+            var request = OpenNebula.Helper.request(resource,method, [vm_id, disk_id, image_name, type]);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -1154,10 +1179,11 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.VM.resource;
 
             var method = "restart";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/vm/" + id + "/action",
@@ -1189,8 +1215,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var data = params.data;
+            var resource = OpenNebula.Cluster.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"create", name);
+            var request = OpenNebula.Helper.request(resource,"create", name);
 
             $.ajax({
                 url: "/cluster",
@@ -1219,8 +1246,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Cluster.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"delete", id);
+            var request = OpenNebula.Helper.request(resource,"delete", id);
 
             $.ajax({
                 url: "/cluster/" + id,
@@ -1248,8 +1276,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var timeout = params.timeout || false;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Cluster.resource;
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/cluster",
@@ -1279,13 +1307,14 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var host_id = params.data.id;
-            var cluster_id = params.data.cluster_id;
+            var cluster_id = params.data.extra_param;
+            var resource = OpenNebula.Cluster.resource;
 
             var method = "add_host";
             var action = OpenNebula.Helper.action(method, {
                                                 "host_id"   : host_id
                                                 });
-            var request = OpenNebula.Helper.request(this.resource,method, [host_id, cluster_id]);
+            var request = OpenNebula.Helper.request(resource,method, [host_id, cluster_id]);
 
             $.ajax({
                 url: "/cluster/" + cluster_id + "/action",
@@ -1313,13 +1342,15 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var host_id = params.data.id;
-            var cluster_id = params.data.cluster_id;
+            var cluster_id = params.data.extra_param;
 
             var method = "remove_host";
             var action = OpenNebula.Helper.action(method,  {
                                                 "host_id"   : host_id
                                                 });
-            var request = OpenNebula.Helper.request(this.resource,method, [host_id, cluster_id]);
+            var resource = OpenNebula.Cluster.resource;
+                                                
+            var request = OpenNebula.Helper.request(resource,method, [host_id, cluster_id]);
 
             $.ajax({
                 url: "/cluster/" + cluster_id + "/action",
@@ -1351,8 +1382,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var data = params.data;
+            var resource = OpenNebula.User.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"create",data);
+            var request = OpenNebula.Helper.request(resource,"create",data);
 
             $.ajax({
                 url: "/user",
@@ -1381,8 +1413,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.User.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"delete", id);
+            var request = OpenNebula.Helper.request(resource,"delete", id);
 
             $.ajax({
                 url: "/user/" + id,
@@ -1410,8 +1443,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var timeout = params.timeout || false;
 
-            var resource = this.resource;
+            var resource = OpenNebula.User.resource;
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/user",
@@ -1447,7 +1480,9 @@ var OpenNebula = {
             var action = OpenNebula.Helper.action(method,  {
                                                 "password"   : passwd
                                                 });
-            var request = OpenNebula.Helper.request(this.resource,method, passwd);
+                                                
+            var resource = OpenNebula.User.resource;
+            var request = OpenNebula.Helper.request(resource,method, passwd);
 
             $.ajax({
                 url: "/user/" + id + "/action",
@@ -1479,8 +1514,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var data = params.data;
+            var resource = OpenNebula.Image.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"register",data);
+            var request = OpenNebula.Helper.request(resource,"register",data);
 
             $.ajax({
                 url: "/image",
@@ -1509,8 +1545,9 @@ var OpenNebula = {
             var callback = params.success;
             var callback_error = params.error;
             var id = params.data.id;
+            var resource = OpenNebula.Image.resource;
 
-            var request = OpenNebula.Helper.request(this.resource,"delete", id);
+            var request = OpenNebula.Helper.request(resource,"delete", id);
 
             $.ajax({
                 url: "/image/" + id,
@@ -1538,8 +1575,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var timeout = params.timeout || false;
 
-            var resource = this.resource;
+            var resource = OpenNebula.Image.resource;
-            var request = OpenNebula.Helper.request(this.resource,"list");
+            var request = OpenNebula.Helper.request(resource,"list");
 
             $.ajax({
                 url: "/image",
@@ -1570,7 +1607,8 @@ var OpenNebula = {
             var callback_error = params.error;
             var id = params.data.id;
 
-            var request = OpenNebula.Helper.request(this.resource,"show", id);
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,"show", id);
 
             $.ajax({
                 url: "/image/" + id,
@@ -1606,7 +1644,9 @@ var OpenNebula = {
                                                 "name"      : name,
                                                 "value"     : value
                                                 });
-            var request = OpenNebula.Helper.request(this.resource,method, [id, name, value]);
+                                                
+            var resource = OpenNebula.Image.resource;                                                
+            var request = OpenNebula.Helper.request(resource,method, [id, name, value]);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1641,7 +1681,9 @@ var OpenNebula = {
             var action = OpenNebula.Helper.action(method,  {
                                                 "name"      : name
                                                 });
-            var request = OpenNebula.Helper.request(this.resource,method, [id, name]);
+                                                
+            var resource = OpenNebula.Image.resource;                                        
+            var request = OpenNebula.Helper.request(resource,method, [id, name]);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1672,7 +1714,9 @@ var OpenNebula = {
 
             var method = "enable";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1703,7 +1747,8 @@ var OpenNebula = {
 
             var method = "disable";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1734,7 +1779,8 @@ var OpenNebula = {
 
             var method = "publish";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1765,7 +1811,8 @@ var OpenNebula = {
 
             var method = "unpublish";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1796,7 +1843,9 @@ var OpenNebula = {
 
             var method = "persistent";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/image/" + id + "/action",
@@ -1827,7 +1876,9 @@ var OpenNebula = {
 
             var method = "nonpersistent";
             var action = OpenNebula.Helper.action(method);
-            var request = OpenNebula.Helper.request(this.resource,method, id);
+            
+            var resource = OpenNebula.Image.resource;
+            var request = OpenNebula.Helper.request(resource,method, id);
 
             $.ajax({
                 url: "/image/" + id + "/action",

src/sunstone/public/js/plugins/dashboard-tab.js

@@ -0,0 +1,241 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+var dashboard_tab_content =
+'<table id="dashboard_table">\
+  <tr>\
+      <td>\
+      <div class="panel">\
+        <h3><a href="#hosts_tab">Hosts</a>\
+        <div class="new-resource">\
+                <a class="action_button" href="#hosts_tab" value="Host.create_dialog">+</a>\
+            </div>\
+        </h3>\
+        <div class="panel_info">\
+            <table class="info_table">\
+                <tr>\
+                    <td class="key_td">Total</td>\
+                    <td class="value_td"><span id="total_hosts"></span></td>\
+                </tr>\
+                <tr>\
+                    <td class="key_td key_td_green">Active</td>\
+                    <td class="value_td"><span id="active_hosts"></span></td>\
+                </tr>\
+            </table>\
+        </div>\
+      </div>\
+    </td>\
+    <td>\
+      <div class="panel">\
+        <h3><a href="#hosts_tab">Clusters</a>\
+            <div class="new-resource">\
+                <a class="action_button" href="#hosts_tab" value="Cluster.create_dialog">+</a>\
+            </div>\
+        </h3>\
+        <div class="panel_info">\
+            <table class="info_table">\
+                <tr>\
+                    <td class="key_td">Total</td>\
+                    <td class="value_td"><span id="total_clusters"></span></td>\
+                </tr>\
+            </table>\
+        </div>\
+      </div>\
+    </td>\
+  </tr>\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3><a href="#vms_tab">Virtual Machines</a>\
+            <div class="new-resource">\
+                <a class="action_button" href="#vms_tab" value="VM.create_dialog">+</a>\
+            </div>\
+        </h3>\
+        <div class="panel_info">\
+            <table class="info_table">\
+                <tr>\
+                    <td class="key_td">Total</td>\
+                    <td class="value_td"><span id="total_vms"></span></td>\
+                </tr>\
+                <tr>\
+                    <td class="key_td key_td_green">Running</td>\
+                    <td class="value_td"><span id="running_vms"></span></td>\
+                </tr>\
+                <tr>\
+                    <td class="key_td key_td_red">Failed</td>\
+                    <td class="value_td"><span id="failed_vms"></span></td>\
+                </tr>\
+            </table>\
+        </div>\
+      </div>\
+    </td>\
+    <td>\
+      <div class="panel">\
+        <h3><a href="#vnets_tab">Virtual Networks</a>\
+            <div class="new-resource">\
+                <a class="action_button" href="#vnets_tab" value="Network.create_dialog">+</a>\
+            </div>\
+        </h3>\
+        <div class="panel_info">\
+            <table class="info_table">\
+                <tr>\
+                    <td class="key_td">Total</td>\
+                    <td class="value_td"><span id="total_vnets"></span></td>\
+                </tr>\
+                <tr>\
+                    <td class="key_td">Public</td>\
+                    <td class="value_td"><span id="public_vnets"></span></td>\
+                </tr>\
+            </table>\
+        </div>\
+      </div>\
+      </div>\
+    </td>\
+  </tr>\
+  <tr>\
+    <td>\
+      <div class="panel">\
+        <h3>\
+            <a href="#images_tab">Images</a>\
+            <div class="new-resource">\
+                <a class="action_button" href="#images_tab" value="Image.create_dialog">+</a>\
+            </div>\
+        </h3>\
+        <div class="panel_info">\
+            <table class="info_table">\
+                <tr>\
+                    <td class="key_td">Total</td>\
+                    <td class="value_td"><span id="total_images"></span></td>\
+                </tr>\
+                <tr>\
+                    <td class="key_td">Public</td>\
+                    <td class="value_td"><span id="public_images"></span></td>\
+                </tr>\
+            </table>\
+        </div>\
+      </div>\
+    </td>\
+    <td class="oneadmin">\
+      <div class="panel">\
+       <h3><a href="#users_tab">Users</a>\
+       <div class="new-resource">\
+                <a class="action_button" href="#users_tab" value="User.create_dialog">+</a>\
+            </div>\
+        </h3>\
+        <div class="panel_info">\
+            <table class="info_table">\
+                <tr>\
+                    <td class="key_td">Total</td>\
+                    <td class="value_td"><span id="total_users"></span></td>\
+                </tr>\
+            </table>\
+        </div>\
+      </div>\
+    </td>\
+  </tr>\
+</table>';
+
+
+var dashboard_tab = {
+    title: 'Dashboard',
+    content: dashboard_tab_content,
+    condition : True
+}
+
+Sunstone.addMainTab('dashboard_tab',dashboard_tab);
+
+$(document).ready(function(){
+    //Dashboard link listener
+    $("#dashboard_table h3 a").live("click", function (){
+        var tab = $(this).attr('href');
+        showTab(tab);
+        return false;
+    });
+    
+    emptyDashboard();
+    if (uid!=0) {
+        $("td.oneadmin").hide();
+    }
+    
+    
+});
+
+//puts the dashboard values into "retrieving"
+function emptyDashboard(){
+    $("#dashboard_tab .value_td span").html(spinner);
+}
+
+
+function updateDashboard(what,json_info){
+	db = $('#dashboard_tab');
+	switch (what){
+		case "hosts":
+			total_hosts=json_info.length;
+			active_hosts=0;
+			$.each(json_info,function(){
+				if (parseInt(this.HOST.STATE) < 3){
+					active_hosts++;}
+			});
+			$('#total_hosts',db).html(total_hosts);
+			$('#active_hosts',db).html(active_hosts);
+			break;
+		case "clusters":
+			total_clusters=json_info.length;
+			$('#total_clusters',db).html(total_clusters);
+			break;
+		case "vms":
+			total_vms=json_info.length;
+			running_vms=0;
+            failed_vms=0;
+			$.each(json_info,function(){
+                vm_state = parseInt(this.VM.STATE);
+				if (vm_state == 3){
+					running_vms++;
+                }
+                else if (vm_state == 7) {
+                    failed_vms++;
+                }
+			});
+			$('#total_vms',db).html(total_vms);
+			$('#running_vms',db).html(running_vms);
+			$('#failed_vms',db).html(failed_vms);
+			break;
+		case "vnets":
+			public_vnets=0;
+			total_vnets=json_info.length;
+			$.each(json_info,function(){
+				if (parseInt(this.VNET.PUBLIC)){
+					public_vnets++;}
+			});
+			$('#total_vnets',db).html(total_vnets);
+			$('#public_vnets',db).html(public_vnets);
+			break;
+		case "users":
+			total_users=json_info.length;
+			$('#total_users',db).html(total_users);
+			break;
+        case "images":
+            total_images=json_info.length;
+            public_images=0;
+            $.each(json_info,function(){
+				if (parseInt(this.IMAGE.PUBLIC)){
+					public_images++;}
+			});
+            $('#total_images',db).html(total_images);
+			$('#public_images',db).html(public_images);
+            break;
+	}
+}

src/sunstone/public/js/plugins/hosts-tab.js

@@ -0,0 +1,689 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+/*Host tab plugin*/
+
+var hosts_tab_content = 
+'<form id="form_hosts" action="javascript:alert(\'js errors?!\')">\
+  <div class="action_blocks">\
+  </div>\
+<table id="datatable_hosts" class="display">\
+  <thead>\
+    <tr>\
+      <th class="check"><input type="checkbox" class="check_all" value="">All</input></th>\
+      <th>ID</th>\
+      <th>Name</th>\
+      <th>Cluster</th>\
+      <th>Running VMs</th>\
+      <th>CPU Use</th>\
+      <th>Memory use</th>\
+      <th>Status</th>\
+    </tr>\
+  </thead>\
+  <tbody id="tbodyhosts">\
+  </tbody>\
+</table>\
+</form>';
+
+var create_host_tmpl =
+'<div class="create_form"><form id="create_host_form" action="">\
+  <fieldset>\
+  <legend style="display:none;">Host parameters</legend>\
+  <label for="name">Name: </label><input type="text" name="name" id="name" />\
+  </fieldset>\
+  <h3>Drivers</h3>\
+  <fieldset>\
+    <div class="manager clear" id="vmm_mads">\
+	  <label>Virtualization Manager:</label>\
+	  <select id="vmm_mad" name="vmm">\
+	    <option value="vmm_kvm">KVM</option>\
+		<option value="vmm_xen">XEN</option>\
+		<option value="vmm_ec2">EC2</option>\
+		<option value="vmm_dummy">Dummy</option>\
+	  </select>\
+    </div>\
+    <div class="manager clear" id="im_mads">\
+      <label>Information Manager:</label>\
+      <select id="im_mad" name="im">\
+	    <option value="im_kvm">KVM</option>\
+		<option value="im_xen">XEN</option>\
+		<option value="im_ec2">EC2</option>\
+		<option value="im_dummy">Dummy</option>\
+	  </select>\
+    </div>\
+    <div class="manager clear" id="tm_mads">\
+      <label>Transfer Manager:</label>\
+       <select id="tm_mad" name="tm">\
+	    <option value="tm_nfs">NFS</option>\
+		<option value="tm_ssh">SSH</option>\
+		<option value="tm_dummy">Dummy</option>\
+	  </select>\
+    </div>\
+    </fieldset>\
+    <fieldset>\
+    <div class="form_buttons">\
+		<div><button class="button" id="create_host_submit" value="OpenNebula.Host.create">Create</button>\
+		<button class="button" type="reset" value="reset">Reset</button></div>\
+	</div>\
+  </fieldset>\
+</form></div>';
+
+var create_cluster_tmpl =
+'<form id="create_cluster_form" action="">\
+  <fieldset style="border:none;">\
+	<div>\
+		<label for="name">Cluster name:</label>\
+		<input type="text" name="name" id="name" /><br />\
+	</div>\
+  </fieldset>\
+  <fieldset>\
+	<div class="form_buttons">\
+		<button class="button" id="create_cluster_submit" value="cluster/create">Create</button>\
+		<button class="button" type="reset" value="reset">Reset</button>\
+	</div>\
+  </fieldset>\
+</form>';
+
+var hosts_select="";
+var clusters_select="";
+var host_list_json = {};
+var cluster_list_json = {};
+var dataTable_hosts;
+
+//Setup actions
+var host_actions = {
+    
+            "Host.create" : {
+                type: "create",
+                call : OpenNebula.Host.create,
+                callback : addHostElement,
+                error : onError,
+                notify: true
+            },
+            
+            "Host.create_dialog" : {
+                type: "custom",
+                call: popUpCreateHostDialog
+            },
+            
+            //Custom below
+            //~ "Host.list" : {
+                //~ type: "list",
+                //~ call: OpenNebula.Host.list,
+                //~ callback: updateHostsView,
+                //~ error: onError,
+                //~ notify:False
+            //~ },
+            
+            "Host.show" : {
+                type: "single",
+                call: OpenNebula.Host.show,
+                callback: updateHostElement,
+                error: onError
+            },
+            
+            "Host.showinfo" : {
+                type: "single",
+                call: OpenNebula.Host.show,
+                callback: updateHostInfo,
+                error: onError
+            },
+            
+            "Host.refresh" : {
+                type: "custom",
+                call: function(){
+                    waitingNodes(dataTable_hosts);
+                    Sunstone.runAction("Host.list");
+                },
+                callback: function(){},
+                error: onError,
+                notify:true
+            },
+            
+            "Host.autorefresh" : {
+                type: "custom",
+                call : function() {
+                    OpenNebula.Host.list({timeout: true, success: updateHostsView,error: onError});
+                }
+            },
+            
+            "Host.enable" : {
+                type: "multiple",
+                call : OpenNebula.Host.enable,
+                callback : function (req) {
+                    Sunstone.runAction("Host.show",req.request.data[0]);
+                },
+                elements: function() { return getSelectedNodes(dataTable_hosts); },
+                error : onError,
+                notify: true
+            },
+            
+            "Host.disable" : {
+                type: "multiple",
+                call : OpenNebula.Host.disable,
+                callback : function (req) {
+                    Sunstone.runAction("Host.show",req.request.data[0]);
+                },
+                elements: function() { return getSelectedNodes(dataTable_hosts); },
+                error : onError,
+                notify:true
+            },
+            
+            "Host.delete" : {
+                type: "multiple",
+                call : OpenNebula.Host.delete,
+                callback : deleteHostElement,
+                elements: function() { return getSelectedNodes(dataTable_hosts); },
+                error : onError,
+                notify:true
+            },
+            
+            "Host.list" : {
+                type: "custom",
+                call : function() {
+                    OpenNebula.Host.list({success: updateHostsView, error: onError});
+                    OpenNebula.Cluster.list({success: updateClustersView, error: onError});
+                    }
+            },
+                        
+            "Cluster.create" : {
+                type: "create",
+                call : OpenNebula.Cluster.create,
+                callback : function(){
+                    Sunstone.runAction("Cluster.list");
+                },
+                error : onError,
+                notify: true
+            },
+            
+            "Cluster.create_dialog" : {
+                type: "custom",
+                call: popUpCreateClusterDialog
+            },
+            
+            "Cluster.list" : {
+                type: "list",
+                call: OpenNebula.Cluster.list,
+                callback: updateClustersView,
+                error: onError,
+            },
+            
+            "Cluster.autorefresh" : {
+                type: "custom",
+                call: function () {
+                    OpenNebula.Cluster.list({timeout: true, success: updateClustersView,error: onError});
+                }
+            },
+            
+            "Cluster.delete" : {
+                type: "single",
+                call : OpenNebula.Cluster.delete,
+                callback : function(){
+                    //OpenNebula.Cluster.list({success: updateClustersView, error: onError});
+                    Sunstone.runAction("Cluster.list");
+                },
+                error : onError,
+                notify:true
+            },
+            
+            "Cluster.addhost" : {
+                type: "multiple",
+                call : OpenNebula.Cluster.addhost,
+                callback : function(req){
+                    Sunstone.runAction("Host.show",req.request.data);
+					},
+                elements: function() { return getSelectedNodes(dataTable_hosts); },
+                error : onError,
+                notify:true
+            },
+            
+            "Cluster.removehost" : {
+                type: "multiple",
+                call : OpenNebula.Cluster.removehost,
+                callback : deleteHostElement,
+                error : onError,
+                notify:true
+            }
+        };
+
+var host_buttons = {
+        "Host.refresh" : {
+            type: "image",
+            text: "Refresh list",
+            img: "/images/Refresh-icon.png",
+            condition: True
+        },
+        "Host.create_dialog" : {
+            type: "create_dialog",
+            text: "+ New",
+            condition :True
+        },
+        "Host.enable" : {
+            type: "action",
+            text: "Enable",
+            condition : True
+        },
+        "Host.disable" : {
+            type: "action",
+            text: "Disable",
+            condition : True
+        },
+        "Cluster.create_dialog" : {
+            type: "create_dialog",
+            text: "+ New Cluster",
+            condition : True
+        },
+        "Cluster.delete" : {
+            type: "confirm_with_select",
+            text: "Delete cluster",
+            select: function(){return clusters_select},
+            tip: "Select the cluster you want to remove",
+            condition : True
+        },
+                
+        "action_list" : { //Special button
+            type: "select",
+            actions: { "Cluster.addhost": { 
+                            type: "confirm_with_select",
+                            text: "Add host to cluster", 
+                            select: function(){return clusters_select;},
+                            tip: "Select the cluster in which you would like to place the hosts",
+                            condition: True
+                        },
+                        "Cluster.removehost" : {
+                            type: "action",
+                            text: "Remove host from cluster",
+                            condition: True
+                        }},
+            condition : True
+        },
+        "Host.delete" : {
+            type: "action",
+            text: "Delete host",
+            condition : True
+        }
+        };
+            
+var host_info_panel = {
+    "host_info_tab" : {
+        title: "Host information",
+        content:""
+    },
+    
+    "host_template_tab" : {
+        title: "Host template",
+        content: ""
+    }
+};
+
+
+var hosts_tab = {
+    title: 'Hosts &amp; Clusters',
+    content: hosts_tab_content,
+    buttons: host_buttons,
+    condition: True
+}            
+
+Sunstone.addActions(host_actions);
+Sunstone.addMainTab('hosts_tab',hosts_tab);
+Sunstone.addInfoPanel("host_info_panel",host_info_panel);
+
+
+
+//Creates an array to be added to the dataTable from the JSON of a host.
+function hostElementArray(host_json){
+    
+	var host = host_json.HOST;
+	
+    //Calculate some values
+    var acpu = parseInt(host.HOST_SHARE.MAX_CPU);
+		if (!acpu) {acpu=100};
+	acpu = acpu - parseInt(host.HOST_SHARE.CPU_USAGE);
+
+    var total_mem = parseInt(host.HOST_SHARE.MAX_MEM);
+    var free_mem = parseInt(host.HOST_SHARE.FREE_MEM);
+
+    var ratio_mem = 0;
+    if (total_mem) {
+        ratio_mem = Math.round(((total_mem - free_mem) / total_mem) * 100);
+    }
+
+
+    var total_cpu = parseInt(host.HOST_SHARE.MAX_CPU);
+    var used_cpu = Math.max(total_cpu - parseInt(host.HOST_SHARE.USED_CPU),acpu);
+
+    var ratio_cpu = 0;
+    if (total_cpu){
+        ratio_cpu = Math.round(((total_cpu - used_cpu) / total_cpu) * 100);
+    }
+
+
+    //progressbars html code - hardcoded jquery html result
+     var pb_mem =
+'<div style="height:10px" class="ratiobar ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="'+ratio_mem+'">\
+    <div class="ui-progressbar-value ui-widget-header ui-corner-left ui-corner-right" style="width: '+ratio_mem+'%;"/>\
+    <span style="position:relative;left:45px;top:-4px;font-size:0.6em">'+ratio_mem+'%</span>\
+    </div>\
+</div>';
+
+    var pb_cpu =
+'<div style="height:10px" class="ratiobar ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="'+ratio_cpu+'">\
+    <div class="ui-progressbar-value ui-widget-header ui-corner-left ui-corner-right" style="width: '+ratio_cpu+'%;"/>\
+    <span style="position:relative;left:45px;top:-4px;font-size:0.6em">'+ratio_cpu+'%</span>\
+    </div>\
+</div>';
+
+
+    return [ '<input type="checkbox" id="host_'+host.ID+'" name="selected_items" value="'+host.ID+'"/>',
+			host.ID,
+			host.NAME,
+			host.CLUSTER,
+			host.HOST_SHARE.RUNNING_VMS, //rvm
+            pb_cpu,
+			pb_mem,
+			OpenNebula.Helper.resource_state("host",host.STATE) ];
+
+}
+
+//Listen to clicks on the tds of the tables and shows the info dialogs.
+function hostInfoListener(){
+	$('#tbodyhosts tr').live("click",function(e){
+
+		//do nothing if we are clicking a checkbox!
+		if ($(e.target).is('input')) {return true;}
+        popDialogLoading();
+		var aData = dataTable_hosts.fnGetData(this);
+		var id = $(aData[0]).val();
+        Sunstone.runAction("Host.showinfo",id);
+		return false;
+	});
+}
+
+//updates the host select by refreshing the options in it
+function updateHostSelect(host_list){
+
+	//update select helper
+	hosts_select="";
+	hosts_select += "<option value=\"\">Select a Host</option>";
+	$.each(host_list, function(){
+		hosts_select += "<option value=\""+this.HOST.ID+"\">"+this.HOST.NAME+"</option>";
+	});
+
+}
+
+//updates the cluster select by refreshing the options in it
+function updateClusterSelect(cluster_list){
+
+	//update select helper
+	clusters_select= "";
+	clusters_select+="<option value=\"\">Select a cluster</option>";
+	$.each(cluster_list, function(){
+		clusters_select += "<option value=\""+this.CLUSTER.ID+"\">"+this.CLUSTER.NAME+"</option>";
+	});
+}
+
+//callback for an action affecting a host element
+function updateHostElement(request, host_json){
+	var id = host_json.HOST.ID;
+	var element = hostElementArray(host_json);
+	updateSingleElement(element,dataTable_hosts,'#host_'+id);
+}
+
+//callback for actions deleting a host element
+function deleteHostElement(req){
+	deleteElement(dataTable_hosts,'#host_'+req.request.data);
+}
+
+//call back for actions creating a host element
+function addHostElement(request,host_json){
+    var id = host_json.HOST.ID;
+	var element = hostElementArray(host_json);
+    hosts_select += "<option value=\""+host_json.HOST.NAME+"\">"+host_json.HOST.NAME+"</option>";
+	addElement(element,dataTable_hosts);
+}
+
+//callback to update the list of hosts.
+function updateHostsView (request,host_list){
+	host_list_json = host_list;
+	var host_list_array = []
+
+	$.each(host_list,function(){
+	//Grab table data from the host_list
+		host_list_array.push(hostElementArray(this));
+	});
+
+	updateView(host_list_array,dataTable_hosts);
+	updateHostSelect(host_list);
+    //dependency with the dashboard plugin
+	updateDashboard("hosts",host_list_json);
+}
+
+//updates the list of clusters
+function updateClustersView(request, cluster_list){
+	cluster_list_json = cluster_list;
+	updateClusterSelect(cluster_list);
+	updateDashboard("clusters",cluster_list);
+}
+
+//Updates the host info panel tab's content and pops it up
+function updateHostInfo(request,host){
+	var host_info = host.HOST;
+    
+    //Information tab
+    var info_tab = {
+        title : "Host information",
+        content :
+    '<table id="info_host_table" class="info_table">\
+			<thead>\
+				<tr><th colspan="2">Host information - '+host_info.NAME+'</th></tr>\
+			</thead>\
+			<tr>\
+				<td class="key_td">ID</td>\
+				<td class="value_td">'+host_info.ID+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">State</td>\
+				<td class="value_td">'+OpenNebula.Helper.resource_state("host",host_info.STATE)+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Cluster</td>\
+				<td class="value_td">'+host_info.CLUSTER+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">IM MAD</td>\
+				<td class="value_td">'+host_info.IM_MAD+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">VM MAD</td>\
+				<td class="value_td">'+host_info.VM_MAD+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">TM MAD</td>\
+				<td class="value_td">'+host_info.TM_MAD+'</td>\
+			</tr>\
+		</table>\
+		<table id="host_shares_table" class="info_table">\
+			<thead>\
+				<tr><th colspan="2">Host shares</th></tr>\
+			</thead>\
+			<tr>\
+				<td class="key_td">Max Mem</td>\
+				<td class="value_td">'+humanize_size(host_info.HOST_SHARE.MAX_MEM)+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Used Mem (real)</td>\
+				<td class="value_td">'+humanize_size(host_info.HOST_SHARE.USED_MEM)+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Used Mem (allocated)</td>\
+				<td class="value_td">'+humanize_size(host_info.HOST_SHARE.MAX_USAGE)+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Used CPU (real)</td>\
+				<td class="value_td">'+host_info.HOST_SHARE.USED_CPU+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Used CPU(allocated)</td>\
+				<td class="value_td">'+host_info.HOST_SHARE.CPU_USAGE+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Running VMs</td>\
+				<td class="value_td">'+host_info.HOST_SHARE.RUNNING_VMS+'</td>\
+			</tr>\
+		</table>'
+    }
+    
+    //Template tab
+    var template_tab = {
+        title : "Host template",
+        content : 
+    	'<table id="host_template_table" class="info_table">\
+		<thead><tr><th colspan="2">Host template</th></tr></thead>'+
+		prettyPrintJSON(host_info.TEMPLATE)+
+		'</table>'
+    }
+    
+    //Sunstone.updateInfoPanelTab(info_panel_name,tab_name, new tab object);
+    Sunstone.updateInfoPanelTab("host_info_panel","host_info_tab",info_tab);
+    Sunstone.updateInfoPanelTab("host_info_panel","host_template_tab",template_tab);
+    Sunstone.popUpInfoPanel("host_info_panel");
+
+}
+
+//Prepares the host creation dialog
+function setupCreateHostDialog(){
+    $('div#dialogs').append('<div title="Create host" id="create_host_dialog"></div>');
+    $('div#create_host_dialog').html(create_host_tmpl);
+    $('#create_host_dialog').dialog({
+		autoOpen: false,
+		modal: true,
+		width: 500
+	});
+    
+    $('#create_host_dialog button').button();
+    
+    //Handle the form submission
+	$('#create_host_form').submit(function(){
+        if (!($('#name',this).val().length)){
+            notifyError("Host name missing!");
+            return false;
+        }
+		var host_json = { "host": { "name": $('#name',this).val(),
+							"tm_mad": $('#tm_mad :selected',this).val(),
+							"vm_mad": $('#vmm_mad :selected',this).val(),
+							"im_mad": $('#im_mad :selected',this).val()}}
+
+		//Create the OpenNebula.Host.
+		//If it's successfull we refresh the list.
+        Sunstone.runAction("Host.create",host_json);
+		//OpenNebula.Host.create({data: host_json, success: addHostElement, error: onError});
+		$('#create_host_dialog').dialog('close');
+		return false;
+	});
+    
+}
+
+//Prepares the dialog to create a cluster
+function setupCreateClusterDialog(){
+    $('div#dialogs').append('<div title="Create cluster" id="create_cluster_dialog"></div>');
+    $('#create_cluster_dialog').html(create_cluster_tmpl);
+
+    $('#create_cluster_dialog').dialog({
+		autoOpen: false,
+		modal: true,
+		width: 400
+	});
+    
+    $('#create_cluster_dialog button').button();
+    
+    $('#create_cluster_form').submit(function(){
+		var name=$('#name',this).val();
+		var cluster_json = { "cluster" : { "name" : name }};
+        Sunstone.runAction("Cluster.create",cluster_json);
+		$('#create_cluster_dialog').dialog('close');
+		return false;
+	});
+
+}
+
+
+//Open creation dialogs
+function popUpCreateHostDialog(){
+    $('#create_host_dialog').dialog('open');
+    return false;
+}
+
+function popUpCreateClusterDialog(){
+    $('#create_cluster_dialog').dialog('open');
+    return false;
+}
+
+//Prepares the autorefresh for hosts
+function setHostAutorefresh() {
+     setInterval(function(){
+		var checked = $('input:checked',dataTable_hosts.fnGetNodes());
+        var  filter = $("#datatable_hosts_filter input").attr("value");
+		if (!checked.length && !filter.length){
+			Sunstone.runAction("Host.autorefresh");
+		}
+	},INTERVAL+someTime());
+}
+
+//Prepares the autorefresh for clusters
+function setClusterAutorefresh(){
+    setInterval(function(){
+        Sunstone.runAction("Cluster.autorefresh");
+	},INTERVAL+someTime());
+}
+
+//This is executed after the sunstone.js ready() is run.
+//Here we can basicly init the host datatable, preload it 
+//and add specific listeners
+$(document).ready(function(){
+    
+    //prepare host datatable
+    dataTable_hosts = $("#datatable_hosts").dataTable({
+      "bJQueryUI": true,
+      "bSortClasses": false,
+      "bAutoWidth":false,
+      "sPaginationType": "full_numbers",
+      "aoColumnDefs": [
+                        { "bSortable": false, "aTargets": ["check"] },
+                        { "sWidth": "60px", "aTargets": [0,4] },
+                        { "sWidth": "35px", "aTargets": [1] },
+                        { "sWidth": "120px", "aTargets": [5,6] }
+                       ]
+    });
+    
+    //preload it
+    dataTable_hosts.fnClearTable();
+    addElement([
+        spinner,
+        '','','','','','',''],dataTable_hosts);
+    Sunstone.runAction("Host.list");
+    Sunstone.runAction("Cluster.list");
+    
+    setupCreateHostDialog();
+    setupCreateClusterDialog();
+    
+    setHostAutorefresh();
+    setClusterAutorefresh();
+    
+    initCheckAllBoxes(dataTable_hosts);
+    tableCheckboxesListener(dataTable_hosts);
+    hostInfoListener();
+    
+});

src/sunstone/public/js/plugins/images-tab.js

@@ -0,0 +1,870 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+/*Images tab plugin*/
+
+var images_tab_content = 
+'<form id="image_form" action="" action="javascript:alert(\'js error!\');">\
+  <div class="action_blocks">\
+  </div>\
+<table id="datatable_images" class="display">\
+  <thead>\
+    <tr>\
+      <th class="check"><input type="checkbox" class="check_all" value="">All</input></th>\
+      <th>ID</th>\
+      <th>User</th>\
+      <th>Name</th>\
+      <th>Type</th>\
+      <th>Registration time</th>\
+      <th>Public</th>\
+      <th>Persistent</th>\
+      <th>State</th>\
+      <th>#VMS</th>\
+    </tr>\
+  </thead>\
+  <tbody id="tbodyimages">\
+  </tbody>\
+</table>\
+</form>';
+
+var create_image_tmpl =
+'<div id="img_tabs">\
+	<ul><li><a href="#img_easy">Wizard</a></li>\
+		<li><a href="#img_manual">Advanced mode</a></li>\
+	</ul>\
+	<div id="img_easy">\
+		<form id="create_image_form_easy" action="">\
+			<p style="font-size:0.8em;text-align:right;"><i>Fields marked with <span style="display:inline-block;" class="ui-icon ui-icon-alert" /> are mandatory</i><br />\
+			<fieldset>\
+					<div class="img_param img_man">\
+						<label for="img_name">Name:</label>\
+						<input type="text" name="img_name" id="img_name" />\
+						<div class="tip">Name that the Image will get. Every image must have a unique name.</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_desc">Description:</label>\
+						<input type="text" name="img_desc" id="img_desc" />\
+						<div class="tip">Human readable description of the image for other users.</div>\
+					</div>\
+			</fieldset>\
+			<fieldset>\
+					<div class="img_param">\
+						<label for="img_type">Type:</label>\
+						<select name="img_type" id="img_type">\
+							<option value="OS">OS</option>\
+							<option value="CDROM">CD-ROM</option>\
+							<option value="DATABLOCK">Datablock</option>\
+						</select>\
+						<div class="tip">Type of the image, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_public">Public:</label>\
+						<input type="checkbox" id="img_public" name="img_public" value="YES" />\
+						<div class="tip">Public scope of the image</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_persistent">Persistent:</label>\
+						<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
+						<div class="tip">Persistence of the image</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_dev_prefix">Device prefix:</label>\
+						<input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
+						<div class="tip">Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”. If omitted, the default value is the one defined in oned.conf (installation default is “hd”).</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_bus">Bus:</label>\
+						<select name="img_bus" id="img_bus">\
+							<option value="IDE">IDE</option>\
+							<option value="SCSI">SCSI</option>\
+							<option value="virtio">Virtio (KVM)</option>\
+						</select>\
+						<div class="tip">Type of disk device to emulate.</div>\
+					</div>\
+			</fieldset>\
+			<fieldset>\
+					<div class="" id="src_path_select">\
+						<label style="height:3em;">Path vs. source:</label>\
+						<input type="radio" name="src_path" id="path_img" value="path" />\
+                        <label style="float:none">Provide a path</label><br />\
+						<input type="radio" name="src_path" id="source_img" value="source" />\
+                        <label style="float:none">Provide a source</label><br />\
+						<input type="radio" name="src_path" id="datablock_img" value="datablock" />\
+                        <label style="float:none;vertical-align:top">Create an empty datablock</label>\
+						<div class="tip">Please choose path if you have a file-based image. Choose source otherwise or create an empty datablock disk.</div><br />\
+					</div>\
+					<div class="img_param">\
+						<label for="img_path">Path:</label>\
+						<input type="text" name="img_path" id="img_path" />\
+						<div class="tip">Path to the original file that will be copied to the image repository. If not specified for a DATABLOCK type image, an empty image will be created.</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_source">Source:</label>\
+						<input type="text" name="img_source" id="img_source" />\
+						<div class="tip">Source to be used in the DISK attribute. Useful for not file-based images.</div>\
+					</div>\
+					<div class="img_size">\
+						<label for="img_size">Size:</label>\
+						<input type="text" name="img_size" id="img_size" />\
+						<div class="tip">Size of the datablock in MB.</div>\
+					</div>\
+					<div class="img_param">\
+						<label for="img_fstype">FS type:</label>\
+						<input type="text" name="img_fstype" id="img_fstype" />\
+						<div class="tip">Type of file system to be built. This can be any value understood by mkfs unix command.</div>\
+					</div>\
+			</fieldset>\
+			<fieldset>\
+				<div class="form_buttons">\
+					<button class="button" id="create_image_submit" value="user/create">Create</button>\
+					<button class="button" type="reset" value="reset">Reset</button>\
+				</div>\
+			</fieldset>\
+		</form>\
+	</div>\
+	<div id="img_manual">\
+		<form id="create_image_form_manual" action="">\
+		  <fieldset style="border-top:none;">\
+			<h3 style="margin-bottom:10px;">Write the image template here</h3>\
+		    <textarea id="template" rows="15" style="width:100%;">\
+	     	</textarea>\
+	     </fieldset>\
+	     <fieldset>\
+	     <div class="form_buttons">\
+	    	<button class="button" id="create_vn_submit_manual" value="vn/create">\
+		    Create\
+		    </button>\
+		    <button class="button" type="reset" value="reset">Reset</button>\
+		   </div>\
+		  </fieldset>\
+		 </form>\
+	</div>\
+</div>';
+
+var images_select = "";
+var image_list_json = {};
+var dataTable_images;
+
+var image_actions = {
+    
+    "Image.register" : {
+        type: "create",
+        call: OpenNebula.Image.register,
+        callback: addImageElement,
+        error: onError,
+        notify:true
+    },
+    
+    "Image.create_dialog" : {
+        type: "custom",
+        call: popUpCreateImageDialog
+    },
+    
+    "Image.list" : {
+        type: "list",
+        call: OpenNebula.Image.list,
+        callback: updateImagesView,
+        error: onError
+    },
+    
+    "Image.show" : {
+        type : "single",
+        call: OpenNebula.Image.show,
+        callback: updateImageElement,
+        error: onError
+    },
+    
+    "Image.showinfo" : {
+        type: "single",
+        call: OpenNebula.Image.show,
+        callback: updateImageInfo,
+        error: onError
+    },
+    
+    "Image.refresh" : {
+        type: "custom",
+        call: function () {
+            waitingNodes(dataTable_images);
+            Sunstone.runAction("Image.list");
+        },
+    },
+    
+    "Image.autorefresh" : {
+        type: "custom",
+        call: function() {
+            OpenNebula.Image.list({timeout: true, success: updateImagesView, error: onError});
+        }
+    },
+    
+    "Image.addattr" : {
+        type: "multiple",
+        call: function(obj){
+            var id_attr = obj.data.id;
+            var name = $('#img_attr_name').val();
+            var value = $('#img_attr_value').val();
+            OpenNebula.Image.addattr(
+                {data: {
+                    id: id_attr,
+                    name: name,
+                    value: value
+                    },
+                success: obj.success,
+                error: obj.error
+            });
+        },
+        callback : function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+    },
+    
+    "Image.addattr_dialog" : {
+        type: "custom",
+        call: popUpImageAddattrDialog
+    },
+    
+    "Image.updateattr_dialog" : {
+        type: "custom",
+        call: popUpImageAddattrDialog
+    },
+    
+    "Image.rmattr" : {
+        type: "multiple",
+        call: function(obj){
+            var id_attr = obj.data.id;
+            var name = $('#img_attr_name').val();
+            OpenNebula.Image.rmattr(
+                {data: {
+                    id: id_attr,
+                    name: name
+                    },
+                success: obj.success,
+                error: obj.error
+            });
+        },
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+    },
+    
+    "Image.rmattr_dialog" : {
+        type: "custom",
+        call: popUpImageRmattrDialog,
+    },
+    
+    "Image.enable" : {
+        type: "multiple",
+        call: OpenNebula.Image.enable,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     },
+            
+     "Image.disable" : {
+        type: "multiple",
+        call: OpenNebula.Image.disable,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     },
+            
+     "Image.persistent" : {
+        type: "multiple",
+        call: OpenNebula.Image.persistent,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     },
+            
+     "Image.nonpersistent" : {
+        type: "multiple",
+        call: OpenNebula.Image.nonpersistent,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     },
+            
+     "Image.publish" : {
+        type: "multiple",
+        call: OpenNebula.Image.publish,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     },
+            
+     "Image.unpublish" : {
+        type: "multiple",
+        call: OpenNebula.Image.unpublish,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     },
+            
+     "Image.delete" : {
+        type: "multiple",
+        call: OpenNebula.Image.delete,
+        callback: function (req) {
+            Sunstone.runAction("Image.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_images); },
+        error: onError,
+        notify: true
+     }
+}
+
+
+var image_buttons = {
+    "Image.refresh" : {
+        type: "image",
+        text: "Refresh list",
+        img: "/images/Refresh-icon.png",
+        condition: True
+    },
+    "Image.create_dialog" : {
+        type: "create_dialog",
+        text: "+ New",
+        condition: True
+    },
+    "Image.addattr_dialog" : {
+        type: "action",
+        text: "Add attribute",
+        condition: True
+    },
+    "Image.updateattr_dialog" : {
+        type: "action",
+        text: "Update attribute",
+        condition: True
+    },
+    "Image.rmattr_dialog" : {
+        type: "action",
+        text: "Remove attribute",
+        condition: True
+    },
+    "action_list" : {
+        type: "select",
+        condition: True,
+        actions: {
+            "Image.enable" : {
+                type: "action",
+                text: "Enable",
+                condition: True
+            },
+            "Image.disable" : {
+                type: "action",
+                text: "Disable",
+                condition: True                
+            },
+            "Image.publish" : {
+                type: "action",
+                text: "Publish",
+                condition: True                
+            },
+            "Image.unpublish" : {
+                type: "action",
+                text: "Unpublish",
+                condition: True                
+            },
+            "Image.persistent" : {
+                type: "action",
+                text: "Make persistent",
+                condition: True                
+            },
+            "Image.nonpersistent" : {
+                type: "action",
+                text: "Make non persistent",
+                condition: True                
+            }
+        }
+    },
+    "Image.delete" : {
+        type: "action",
+        text: "Delete",
+        condition: True
+    }
+}
+
+var image_info_panel = {
+    "image_info_tab" : {
+        title: "Image information",
+        content: ""
+    },
+    
+    "image_template_tab" : {
+        title: "Image template",
+        content: ""
+    }
+    
+}
+
+var images_tab = {
+    title: "Images",
+    content: images_tab_content,
+    buttons: image_buttons,
+    condition: True
+}
+
+Sunstone.addActions(image_actions);
+Sunstone.addMainTab('images_tab',images_tab);
+Sunstone.addInfoPanel('image_info_panel',image_info_panel);
+
+// Returns an array containing the values of the image_json and ready
+// to be inserted in the dataTable
+function imageElementArray(image_json){
+    var image = image_json.IMAGE;
+    return [
+        '<input type="checkbox" id="image_'+image.ID+'" name="selected_items" value="'+image.ID+'"/>',
+        image.ID,
+        image.USERNAME ? image.USERNAME : getUserName(image.UID),
+        image.NAME,
+        OpenNebula.Helper.image_type(image.TYPE),
+        pretty_time(image.REGTIME),
+        parseInt(image.PUBLIC) ? "yes" : "no",
+        parseInt(image.PERSISTENT) ? "yes" : "no",
+        OpenNebula.Helper.resource_state("image",image.STATE),
+        image.RUNNING_VMS
+        ];
+}
+
+// Set up the listener on the table TDs to show the info panel
+function imageInfoListener(){
+
+    $('#tbodyimages tr').live("click",function(e){
+        if ($(e.target).is('input')) {return true;}
+        popDialogLoading();
+        var aData = dataTable_images.fnGetData(this);
+        var id = $(aData[0]).val();
+        Sunstone.runAction("Image.showinfo",id);
+        return false;
+    });
+}
+
+//Updates the select input field with an option for each image
+function updateImageSelect(image_list){
+    images_select="";
+    images_select += "<option value=\"\">Select an image</option>";
+    $.each(image_list, function(){
+        //Only add if the state says the image is usable
+        if ((this.IMAGE.STATE < 3) && (this.IMAGE.STATE > 0)){
+            images_select += '<option id="img_sel_'+this.IMAGE.ID+'" value="'+this.IMAGE.NAME+'">'+this.IMAGE.NAME+'</option>';
+        }
+    });
+
+    //update static selectors:
+    //in the VM section
+    $('div.vm_section#disks select#IMAGE').html(images_select);
+}
+
+// Callback to update an element in the dataTable
+function updateImageElement(request, image_json){
+    var id = image_json.IMAGE.ID;
+    var element = imageElementArray(image_json);
+    updateSingleElement(element,dataTable_images,'#image_'+id);
+    //Update the image select but only if the image is enabled...
+    if ((image_json.IMAGE.STATE < 3) && 
+        (image_json.IMAGE.STATE > 0) &&
+        ($('#img_sel_'+id,images_select).length == 0)){
+            images_select += '<option id="img_sel_'+id+'" value="'+image_json.IMAGE.NAME+'">'+image_json.IMAGE.NAME+'</option>';
+        }   
+    else { //delete the element if it is in the list
+        var tag = 'option#img_sel_'+id;
+        var select = $('<select>'+images_select+'</select>');
+        $(tag,select).remove();
+        images_select = $(select).html();
+    }
+    $('div.vm_section#disks select#IMAGE').html(images_select);
+}
+
+// Callback to remove an element from the dataTable
+function deleteImageElement(req){
+    deleteElement(dataTable_images,'#image_'+req.request.data);
+    var tag = 'option#img_sel_'+req.request.data;
+    var select = $('<select>'+images_select+'</select>');
+    $(tag,select).remove();
+    images_select = $(select).html();
+    $('div.vm_section#disks select#IMAGE').html(images_select);    
+}
+
+// Callback to add an image element
+function addImageElement(request, image_json){
+    var element = imageElementArray(image_json);
+    addElement(element,dataTable_images);
+    //NOTE that the select is not updated because newly added images
+    //are disabled by default
+}
+
+// Callback to refresh the list of images
+function updateImagesView(request, images_list){
+    image_list_json = images_list;
+    var image_list_array = [];
+    $.each(image_list_json,function(){
+       image_list_array.push(imageElementArray(this));
+    });
+
+    updateView(image_list_array,dataTable_images);
+    updateImageSelect(images_list);
+    updateDashboard("images",image_list_json);
+
+}
+
+// Prepare the dialog to add/remove/update image attributes
+function setupImageAttributesDialogs(){
+    
+    //Append to DOM
+    $('div#dialogs').append('<div id="image_attributes_dialog" title="Image attributes"></div>');
+
+    //Put HTML in place
+    $('#image_attributes_dialog').html(
+        '<form action="javascript:alert(\'js error!\');">\
+            <fieldset>\
+            <div id="img_attr_action_desc">\
+            </div>\
+            <div>\
+                <label for="img_attr_name">Name:</label>\
+                <input type="text" id="img_attr_name" name="img_attr_name" value="" />\
+            </div>\
+            <div>\
+                <label for="img_attr_value">Value:</label>\
+               <input type="text" id="img_attr_value" name="img_attr_value" value="" />\
+            </div>\
+			<div class="form_buttons">\
+			  <button class="action_button" id="img_attr_proceed" value="">OK</button>\
+			  <button id="img_attr_cancel" value="">Cancel</button>\
+			</div>\
+            </fieldset>\
+        </form>');
+
+    $('#image_attributes_dialog').dialog({
+        autoOpen:false,
+        width:400,
+        modal:true,
+        height:220,
+        resizable:false,
+    });
+
+    $('#image_attributes_dialog button').button();
+
+    //Upcase variable names
+    $('#img_attr_name').keyup(function(){
+       $(this).val($(this).val().toUpperCase());
+    });
+
+    $('#image_attributes_dialog #img_attr_cancel').click(function(){
+        $('#image_attributes_dialog').dialog('close');
+        return false;
+    });
+
+}
+
+// Popup a dialog to add/update an attribute
+function popUpImageAddattrDialog(){
+
+        //Show value field and label
+        $('#img_attr_value').show();
+        $('#img_attr_value').prev().show();
+        var desc = "Please write the name and value of the attribute. It will be added or updated in all selected images:";
+        $('#img_attr_proceed').val("Image.addattr");
+        $('#img_attr_action_desc').html(desc);
+        $('#image_attributes_dialog').dialog('open');
+        return false;
+}
+
+// Popup a dialog to remove an attribute
+function popUpImageRmattrDialog(){
+    
+        //Hide value field and label
+        $('#img_attr_value').hide();
+        $('#img_attr_value').prev().hide();
+        var desc = "Please type the attribute you want to remove:";
+        $('#img_attr_proceed').val("Image.rmattr");
+        $('#img_attr_action_desc').html(desc);
+        $('#image_attributes_dialog').dialog('open');
+        return false;
+}
+
+// Callback to update the information panel tabs and pop it up
+function updateImageInfo(request,img){
+    var img_info = img.IMAGE;
+    var info_tab = {
+        title: "Image information",
+        content:        
+        '<table id="info_img_table" class="info_table">\
+			<thead>\
+				<tr><th colspan="2">Image "'+img_info.NAME+'" information</th></tr>\
+			</thead>\
+			<tr>\
+				<td class="key_td">ID</td>\
+				<td class="value_td">'+img_info.ID+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Name</td>\
+				<td class="value_td">'+img_info.NAME+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Type</td>\
+				<td class="value_td">'+OpenNebula.Helper.image_type(img_info.TYPE)+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Register time</td>\
+				<td class="value_td">'+pretty_time(img_info.REGTIME)+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Public</td>\
+				<td class="value_td">'+(parseInt(img_info.PUBLIC) ? "yes" : "no")+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Persistent</td>\
+				<td class="value_td">'+(parseInt(img_info.PERSISTENT) ? "yes" : "no")+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Source</td>\
+				<td class="value_td">'+img_info.SOURCE+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">State</td>\
+				<td class="value_td">'+OpenNebula.Helper.resource_state("image",img_info.STATE)+'</td>\
+			</tr>\
+		</table>'
+    }
+    
+    var template_tab = {
+        title: "Image template",
+        content: '<table id="img_template_table" class="info_table">\
+		<thead><tr><th colspan="2">Image template</th></tr></thead>'+
+		prettyPrintJSON(img_info.TEMPLATE)+
+		'</table>'
+    }
+    
+    Sunstone.updateInfoPanelTab("image_info_panel","image_info_tab",info_tab);
+    Sunstone.updateInfoPanelTab("image_info_panel","image_template_tab",template_tab);
+        
+    Sunstone.popUpInfoPanel("image_info_panel");
+
+}
+
+// Prepare the image creation dialog
+function setupCreateImageDialog(){
+     $('div#dialogs').append('<div title="Create Image" id="create_image_dialog"></div>');
+     
+      //Insert HTML in place
+    $('#create_image_dialog').html(create_image_tmpl);
+
+    //Prepare jquery dialog
+    $('#create_image_dialog').dialog({
+		autoOpen: false,
+		modal:true,
+		width: 520
+	});
+    
+    $('#img_tabs').tabs();
+    $('#create_image_dialog button').button();
+    $('#img_type option').first().attr("selected","selected");
+    $('#datablock_img').attr("disabled","disabled");
+
+   //Chrome workaround
+    $('select#img_type').change(function(){
+        $(this).trigger("click");
+    });
+
+    $('select#img_type').click(function(){
+        var value = $(this).val();
+        switch (value){
+            case "DATABLOCK":
+                $('#datablock_img').removeAttr("disabled");
+                break;
+            default:
+                $('#datablock_img').attr("disabled","disabled");
+                $('#path_img').attr("checked","checked");
+                $('#img_source,#img_fstype,#img_size').parent().hide();
+                $('#img_path').parent().show();
+        }
+    });
+
+    $('#img_source,#img_fstype,#img_size').parent().hide();
+    $('#path_img').attr("checked","checked");
+    $('#img_path').parent().addClass("img_man");
+
+    $('#img_public').click(function(){
+       $('#img_persistent').removeAttr("checked");
+    });
+
+    $('#img_persistent').click(function(){
+       $('#img_public').removeAttr("checked");
+    });
+
+
+
+    $('#src_path_select input').click(function(){
+        var value = $(this).val();
+        switch (value){
+            case "path":
+                $('#img_source,#img_fstype,#img_size').parent().hide();
+                $('#img_source,#img_fstype,#img_size').parent().removeClass("img_man");
+                $('#img_path').parent().show();
+                $('#img_path').parent().addClass("img_man");
+                break;
+            case "source":
+                $('#img_path,#img_fstype,#img_size').parent().hide();
+                $('#img_path,#img_fstype,#img_size').parent().removeClass("img_man");
+                $('#img_source').parent().show();
+                 $('#img_source').parent().addClass("img_man");
+                break;
+            case "datablock":
+                $('#img_source,#img_path').parent().hide();
+                $('#img_source,#img_path').parent().removeClass("img_man");
+                $('#img_fstype,#img_size').parent().show();
+                $('#img_fstype,#img_size').parent().addClass("img_man");
+                break;
+        }
+    });
+
+
+    $('#create_image_form_easy').submit(function(){
+        var exit = false;
+        $('.img_man',this).each(function(){
+           if (!$('input',this).val().length){
+               notifyError("There are mandatory missing parameters");
+               exit = true;
+               return false;
+           }
+        });
+        if (exit) { return false; }
+        var img_json = {};
+
+        var name = $('#img_name').val();
+        img_json["NAME"] = name;
+
+        var desc = $('#img_desc').val();
+        if (desc.length){
+            img_json["DESCRIPTION"] = desc;
+        }
+
+        var type = $('#img_type').val();
+        img_json["TYPE"]= type;
+
+        img_json["PUBLIC"] = $('#img_public:checked').length ? "YES" : "NO";
+
+        img_json["PERSISTENT"] = $('#img_persistent:checked').length ? "YES" : "NO";
+
+        var dev_prefix = $('#img_dev_prefix').val();
+        if (dev_prefix.length){
+            img_json["DEV_PREFIX"] = dev_prefix;
+        }
+
+        var bus = $('#img_bus').val();
+        img_json["BUS"] = bus;
+
+        switch ($('#src_path_select input:checked').val()){
+            case "path":
+                path = $('#img_path').val();
+                img_json["PATH"] = path;
+                break;
+            case "source":
+                source = $('#img_source').val();
+                img_json["SOURCE"] = source;
+                break;
+            case "datablock":
+                size = $('#img_size').val();
+                fstype = $('#img_fstype').val();
+                img_json["SIZE"] = size;
+                img_json["FSTYPE"] = fstype;
+                break;
+        }
+        var obj = { "image" : img_json };
+        Sunstone.runAction("Image.register", obj);
+
+        $('#create_image_dialog').dialog('close');
+       return false;
+    });
+
+    $('#create_image_form_manual').submit(function(){
+		var template=$('#template',this).val();
+        Sunstone.runAction("Image.register",template);
+		$('#create_image_dialog').dialog('close');
+       return false;
+    });
+
+}
+
+function popUpCreateImageDialog(){
+    $('#create_image_dialog').dialog('open');
+}
+
+// Set the autorefresh interval for the datatable
+function setImageAutorefresh() {
+     setInterval(function(){
+		var checked = $('input:checked',dataTable_images.fnGetNodes());
+        var filter = $("#datatable_images_filter input").attr("value");
+		if (!checked.length && !filter.length){
+            Sunstone.runAction("Image.autorefresh");
+		}
+	},INTERVAL+someTime());
+}
+
+//The DOM is ready at this point
+$(document).ready(function(){
+    
+   dataTable_images = $("#datatable_images").dataTable({
+        "bJQueryUI": true,
+        "bSortClasses": false,
+        "bAutoWidth":false,
+        "sPaginationType": "full_numbers",
+        "aoColumnDefs": [
+                        { "bSortable": false, "aTargets": ["check"] },
+                        { "sWidth": "60px", "aTargets": [0,3] },
+                        { "sWidth": "35px", "aTargets": [1] },
+                        { "sWidth": "100px", "aTargets": [2,3] }
+                       ]
+    });
+    
+    dataTable_images.fnClearTable();
+    addElement([
+        spinner,
+        '','','','','','','','',''],dataTable_images);
+    Sunstone.runAction("Image.list");
+    
+    setupCreateImageDialog();
+    setupImageAttributesDialogs();
+    setupTips($('#create_image_dialog'));
+    setImageAutorefresh();
+    
+    initCheckAllBoxes(dataTable_images);
+    tableCheckboxesListener(dataTable_images);
+    imageInfoListener();
+    
+})

src/sunstone/public/js/plugins/users-tab.js

@@ -0,0 +1,252 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+/*Users tab plugin*/
+
+var users_tab_content = 
+'<form id="user_form" action="" action="javascript:alert(\'js error!\');">\
+  <div class="action_blocks">\
+  </div>\
+<table id="datatable_users" class="display">\
+  <thead>\
+    <tr>\
+      <th class="check"><input type="checkbox" class="check_all" value="">All</input></th>\
+      <th>ID</th>\
+      <th>Name</th>\
+    </tr>\
+  </thead>\
+  <tbody id="tbodyusers">\
+  </tbody>\
+</table>\
+</form>';
+
+var create_user_tmpl =
+'<form id="create_user_form" action="">\
+  <fieldset>\
+	<div>\
+		<label for="username">Username:</label>\
+		<input type="text" name="username" id="username" /><br />\
+		<label for="pass">Password:</label>\
+		<input type="password" name="pass" id="pass" />\
+	</div>\
+	</fieldset>\
+	<fieldset>\
+	<div class="form_buttons">\
+		<button class="button" id="create_user_submit" value="user/create">Create</button>\
+		<button class="button" type="reset" value="reset">Reset</button>\
+	</div>\
+</fieldset>\
+</form>';
+
+var user_list_json = {};
+var dataTable_users;
+
+var user_actions = {
+    "User.create" : {
+        type: "create",
+        call: OpenNebula.User.create,
+        callback: addUserElement,
+        error: onError,
+        notify: true
+    },
+    
+    "User.create_dialog" : {
+        type: "custom",
+        call: popUpCreateUserDialog
+    },
+    
+    "User.list" : {
+        type: "list",
+        call: OpenNebula.User.list,
+        callback: updateUsersView,
+        error: onError
+    },
+    
+    "User.refresh" : {
+        type: "custom",
+        call: function () {
+            waitingNodes(dataTable_users);
+            Sunstone.runAction("User.list");
+        },
+    },
+    
+    "User.autorefresh" : {
+        type: "custom",
+        call: function(){
+            OpenNebula.User.list({timeout: true, success: updateUsersView, error: onError});
+        },
+        condition: function(){ uid == 0 },
+        notify: false
+    },
+    
+    "User.delete" : {
+        type: "multiple",
+        call: OpenNebula.User.delete,
+        callback: deleteUserElement,
+        elements: function() { return getSelectedNodes(dataTable_users); },
+        error: onError,
+        notify: true
+    },
+}
+
+var user_buttons = {
+    "User.refresh" : {
+        type: "image",
+        text: "Refresh list",
+        img: "/images/Refresh-icon.png",
+        condition: True
+    },
+    "User.create_dialog" : {
+        type: "create_dialog",
+        text: "+ New",
+        condition: True
+    },
+    "User.delete" : {
+        type: "action",
+        text: "Delete",
+        condition: True
+    }
+}
+
+var users_tab = {
+    title: "Users",
+    content: users_tab_content,
+    buttons: user_buttons,
+    condition: function(){ return uid == 0; }
+}
+
+Sunstone.addActions(user_actions);
+Sunstone.addMainTab('users_tab',users_tab);
+
+// Returns an array with the values from the user_json ready to be
+// added to the dataTable
+function userElementArray(user_json){
+	var user = user_json.USER;
+    if (!user.NAME || user.NAME == {}){
+        name = "";
+    } else {
+        name = user.NAME;
+    }
+        
+	return [
+		'<input type="checkbox" id="user_'+user.ID+'" name="selected_items" value="'+user.ID+'"/>',
+		user.ID,
+		name
+		]
+}
+
+
+// Callback to refresh a single element from the dataTable
+function updateUserElement(request, user_json){
+	var id = user_json.USER.ID;
+	var element = userElementArray(user_json);
+	updateSingleElement(element,dataTable_users,'#user_'+id);
+}
+
+// Callback to delete a single element from the dataTable
+function deleteUserElement(req){
+	deleteElement(dataTable_users,'#user_'+req.request.data);
+}
+
+// Callback to add a single user element
+function addUserElement(request,user_json){
+	var element = userElementArray(user_json);
+	addElement(element,dataTable_users);
+}
+
+// Callback to update the list of users
+function updateUsersView(request,users_list){
+	user_list_json = users_list;
+	var user_list_array = [];
+
+	$.each(user_list_json,function(){
+		user_list_array.push(userElementArray(this));
+	});
+	updateView(user_list_array,dataTable_users);
+	updateDashboard("users",user_list_json);
+}
+
+// Prepare the user creation dialog
+function setupCreateUserDialog(){
+     $('div#dialogs').append('<div title="Create user" id="create_user_dialog"></div>');
+     $('#create_user_dialog').html(create_user_tmpl);
+
+	//Prepare jquery dialog
+	$('#create_user_dialog').dialog({
+		autoOpen: false,
+		modal:true,
+		width: 400
+	});
+    
+    $('#create_user_dialog button').button();
+    
+    $('#create_user_form').submit(function(){
+		var user_name=$('#username',this).val();
+		var user_password=$('#pass',this).val();
+		var user_json = { "user" :
+						{ "name" : user_name,
+						  "password" : user_password }
+					  };
+		Sunstone.runAction("User.create",user_json);
+		$('#create_user_dialog').dialog('close');
+		return false;
+	});
+}
+
+function popUpCreateUserDialog(){
+    $('#create_user_dialog').dialog('open');
+}
+
+// Prepare the autorefresh of the list
+function setUserAutorefresh(){
+    setInterval(function(){
+		var checked = $('input:checked',dataTable_users.fnGetNodes());
+        var filter = $("#datatable_users_filter input").attr("value");
+		if (!checked.length && !filter.length){
+            Sunstone.runAction("User.autorefresh");
+		}
+    },INTERVAL+someTime());
+}
+
+$(document).ready(function(){
+    
+    //if we are not oneadmin, our tab will not even be in the DOM.
+    if (uid==0) {
+        dataTable_users = $("#datatable_users").dataTable({
+            "bJQueryUI": true,
+            "bSortClasses": false,
+            "sPaginationType": "full_numbers",
+            "bAutoWidth":false,
+            "aoColumnDefs": [
+                                { "bSortable": false, "aTargets": ["check"] },
+                                { "sWidth": "60px", "aTargets": [0] },
+                                { "sWidth": "35px", "aTargets": [1] }
+                            ]
+        });    
+        dataTable_users.fnClearTable();
+        addElement([
+            spinner,
+            '',''],dataTable_users);
+            
+        Sunstone.runAction("User.list");
+    
+        setupCreateUserDialog();
+        setUserAutorefresh();
+        
+        initCheckAllBoxes(dataTable_users);
+        tableCheckboxesListener(dataTable_users);
+    }
+})

src/sunstone/public/js/plugins/vnets-tab.js

@@ -0,0 +1,594 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+/*Virtual networks tab plugin*/
+
+var vnets_tab_content = 
+'<form id="virtualNetworks_form" action="javascript:alert(\'js error!\');">\
+  <div class="action_blocks">\
+  </div>\
+<table id="datatable_vnetworks" class="display">\
+  <thead>\
+    <tr>\
+      <th class="check"><input type="checkbox" class="check_all" value="">All</input></th>\
+      <th>ID</th>\
+      <th>User</th>\
+      <th>Name</th>\
+      <th>Type</th>\
+      <th>Bridge</th>\
+      <th>Public?</th>\
+      <th>Total Leases</th>\
+    </tr>\
+  </thead>\
+  <tbody id="tbodyvnetworks">\
+  </tbody>\
+</table>\
+</form>';
+
+var create_vn_tmpl =
+'<div id="vn_tabs">\
+	<ul>\
+		<li><a href="#easy">Wizard</a></li>\
+		<li><a href="#manual">Advanced mode</a></li>\
+	</ul>\
+	<div id="easy">\
+		<form id="create_vn_form_easy" action="">\
+			<fieldset>\
+				<label for="name">Name:</label>\
+				<input type="text" name="name" id="name" /><br />\
+			</fieldset>\
+			<fieldset>\
+				<label for="bridge">Bridge:</label>\
+				<input type="text" name="bridge" id="bridge" /><br />\
+			</fieldset>\
+			<fieldset>\
+				<label style="height:2em;">Network type:</label>\
+				<input type="radio" name="fixed_ranged" id="fixed_check" value="fixed" checked="checked">Fixed network</input><br />\
+				<input type="radio" name="fixed_ranged" id="ranged_check" value="ranged">Ranged network</input><br />\
+			</fieldset>\
+			<div class="clear"></div>\
+			<div id="easy_tabs">\
+					<div id="fixed">\
+					<fieldset>\
+						<label for="leaseip">Lease IP:</label>\
+						<input type="text" name="leaseip" id="leaseip" /><br />\
+						<label for="leasemac">Lease MAC (opt):</label>\
+						<input type="text" name="leasemac" id="leasemac" />\
+						<div class="clear"></div>\
+						<button class="add_remove_button add_button" id="add_lease" value="add/lease">\
+						Add\
+						</button>\
+						<button class="add_remove_button" id="remove_lease" value="remove/lease">\
+						Remove selected\
+						</button>\
+						<label for="leases">Current leases:</label>\
+						<select id="leases" name="leases" size="10" style="width:150px" multiple>\
+						<!-- insert leases -->\
+						</select><br />\
+					</fieldset>\
+					</div>\
+					<div id="ranged">\
+					<fieldset>\
+						<label for="net_address">Network Address:</label>\
+						<input type="text" name="net_address" id="net_address" /><br />\
+						<label for="net_size">Network size:</label>\
+						<input type="text" name="net_size" id="net_size" />\
+					</fieldset>\
+					</div>\
+				</div>\
+			<div class="clear"></div>\
+			</fieldset>\
+			<fieldset>\
+			<div class="form_buttons">\
+					<button class="button" id="create_vn_submit_easy" value="vn/create">\
+					Create\
+					</button>\
+					<button class="button" type="reset" value="reset">Reset</button>\
+				</div>\
+			</fieldset>\
+		</form>\
+	</div>\
+	<div id="manual">\
+		<form id="create_vn_form_manual" action="">\
+		  <h3 style="margin-bottom:10px;">Write the Virtual Network template here</h3>\
+		  <fieldset style="border-top:none;">\
+		    <textarea id="template" rows="15" style="width:100%;"></textarea>\
+	     	<div class="clear"></div>\
+	     </fieldset>\
+	     <fieldset>\
+	     	<div class="form_buttons">\
+	    	<button class="button" id="create_vn_submit_manual" value="vn/create">\
+		    Create\
+		    </button>\
+		    <button class="button" type="reset" value="reset">Reset</button>\
+		    </div>\
+		  </fieldset>\
+		</form>\
+	</div>\
+</div>';
+
+var vnetworks_select="";
+var network_list_json = {};
+var dataTable_vNetworks;
+
+//Setup actions
+
+var vnet_actions = {
+    "Network.create" : {
+        type: "create",
+        call: OpenNebula.Network.create,
+        callback: addVNetworkElement,
+        error: onError,
+        notify: true
+    },
+    
+    "Network.create_dialog" : {
+        type: "custom",
+        call: popUpCreateVnetDialog
+    },
+    
+    "Network.list" : {
+        type: "list",
+        call: OpenNebula.Network.list,
+        callback: updateVNetworksView,
+        error: onError
+    },
+    
+    "Network.show" : {
+        type: "single",
+        call: OpenNebula.Network.show,
+        callback: updateVNetworkElement,
+        error: onError
+    },
+    
+    "Network.showinfo" : {
+        type: "single",
+        call: OpenNebula.Network.show,
+        callback: updateVNetworkInfo,
+        error: onError
+        
+    },
+    
+    "Network.refresh" : {
+        type: "custom",
+        call: function(){
+            waitingNodes(dataTable_vNetworks);
+            Sunstone.runAction("Network.list");
+        }
+    },
+    
+    "Network.autorefresh" : {
+        type: "custom",
+        call: function() {
+            OpenNebula.Network.list({timeout: true, success: updateVNetworksView, error: onError});
+        }
+    },
+    
+    "Network.publish" : {
+        type: "multiple",
+        call: OpenNebula.Network.publish,
+        callback: function (req) {
+            Sunstone.runAction("Network.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_vNetworks); },
+        error: onError,
+        notify: true
+    },
+            
+    "Network.unpublish" : {
+        type: "multiple",
+        call: OpenNebula.Network.unpublish,
+        callback:  function (req) {
+            Sunstone.runAction("Network.show",req.request.data[0]);
+        },
+        elements: function() { return getSelectedNodes(dataTable_vNetworks); },
+        error: onError,
+        notify: true
+    },
+            
+    "Network.delete" : {
+        type: "multiple",
+        call: OpenNebula.Network.delete,
+        callback: deleteVNetworkElement,
+        elements: function() { return getSelectedNodes(dataTable_vNetworks); },
+        error: onError,
+        notify: true
+    }
+    
+}
+
+
+var vnet_buttons = {
+    "Network.refresh" : {
+        type: "image",
+        text: "Refresh list",
+        img: "/images/Refresh-icon.png",
+        condition: True
+    },
+    
+    "Network.create_dialog" : {
+        type: "create_dialog",
+        text: "+ New",
+        condition: True
+    },
+    
+    "Network.publish" : {
+        type: "action",
+        text: "Publish",
+        condition: True
+    },
+    
+    "Network.unpublish" : {
+        type: "action",
+        text: "Unpublish",
+        condition: True
+    },
+    
+    "Network.delete" : {
+        type: "action",
+        text: "Delete",
+        condition: True
+    }
+}
+
+var vnet_info_panel = {
+    "vnet_info_tab" : {
+        title: "Virtual network information",
+        content: ""
+    },
+    "vnet_template_tab" : {
+        title: "Virtual network template",
+        content: ""
+    }
+}
+
+var vnets_tab = {
+    title: "Virtual Networks",
+    content: vnets_tab_content,
+    buttons: vnet_buttons,
+    condition: True
+}
+
+Sunstone.addActions(vnet_actions);
+Sunstone.addMainTab('vnets_tab',vnets_tab);
+Sunstone.addInfoPanel('vnet_info_panel',vnet_info_panel);
+
+//returns an array with the VNET information fetched from the JSON object
+function vNetworkElementArray(vn_json){
+	var network = vn_json.VNET;
+    var total_leases = "0";
+    
+    if (network.TOTAL_LEASES){
+        total_leases = network.TOTAL_LEASES;
+    } else if (network.LEASES && network.LEASES.LEASE){
+        total_leases = network.LEASES.LEASE.length ? network.LEASES.LEASE.length : "1";
+    }
+    
+    //Does the JSON bring a username field? Otherwise try
+    //to get it from the users dataTable
+	var username = network.USERNAME? network.USERNAME : getUserName(network.UID)
+	
+    
+    return ['<input type="checkbox" id="vnetwork_'+network.ID+'" name="selected_items" value="'+network.ID+'"/>',
+		network.ID,
+		username,
+		network.NAME,
+		parseInt(network.TYPE) ? "FIXED" : "RANGED",
+		network.BRIDGE,
+		parseInt(network.PUBLIC) ? "yes" : "no",
+		total_leases ];
+}
+
+
+//Adds a listener to show the extended info when clicking on a row
+function vNetworkInfoListener(){
+
+	$('#tbodyvnetworks tr').live("click", function(e){
+		if ($(e.target).is('input')) {return true;}
+        popDialogLoading();
+		var aData = dataTable_vNetworks.fnGetData(this);
+		var id = $(aData[0]).val();
+		Sunstone.runAction("Network.showinfo",id);
+		return false;
+	});
+}
+
+//updates the vnet select different options
+function updateNetworkSelect(network_list){
+	vnetworks_select="";
+	vnetworks_select += "<option id=\"no_network\" value=\"\">Select a network</option>";
+	$.each(network_list, function(){
+		vnetworks_select += "<option value=\""+this.VNET.NAME+"\">"+this.VNET.NAME+"</option>";
+
+	});
+
+	//update static selectors:
+    //in the VM creation dialog
+	$('div.vm_section#networks select#NETWORK').html(vnetworks_select);
+}
+
+//Callback to update a vnet element after an action on it
+function updateVNetworkElement(request, vn_json){
+	id = vn_json.VNET.ID;
+	element = vNetworkElementArray(vn_json);
+	updateSingleElement(element,dataTable_vNetworks,'#vnetwork_'+id);
+}
+
+//Callback to delete a vnet element from the table
+function deleteVNetworkElement(req){
+	deleteElement(dataTable_vNetworks,'#vnetwork_'+req.request.data);
+    //TODO: Delete vNetwork select option here?
+}
+
+//Callback to add a new element
+function addVNetworkElement(request,vn_json){
+	var element = vNetworkElementArray(vn_json);
+	addElement(element,dataTable_vNetworks);
+    
+    //update select variable and 
+    vnetworks_select += "<option value=\""+vn_json.VNET.NAME+"\">"+vn_json.VNET.NAME+"</option>";
+    $('div.vm_section#networks select#NETWORK').html(vnetworks_select);
+}
+
+//updates the list of virtual networks
+function updateVNetworksView(request, network_list){
+	network_list_json = network_list;
+	var network_list_array = [];
+
+	$.each(network_list,function(){
+		network_list_array.push(vNetworkElementArray(this));
+	});
+
+	updateView(network_list_array,dataTable_vNetworks);
+	updateNetworkSelect(network_list);
+    //dependency with dashboard
+	updateDashboard("vnets",network_list_json);
+
+}
+
+//updates the information panel tabs and pops the panel up
+function updateVNetworkInfo(request,vn){
+	var vn_info = vn.VNET;
+    var info_tab_content = 
+    '<table id="info_vn_table" class="info_table">\
+			<thead>\
+				<tr><th colspan="2">Virtual Network '+vn_info.ID+' information</th></tr>\
+			</thead>\
+			<tr>\
+				<td class="key_td">ID</td>\
+				<td class="value_td">'+vn_info.ID+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">UID</td>\
+				<td class="value_td">'+vn_info.UID+'</td>\
+			</tr>\
+			<tr>\
+				<td class="key_td">Public</td>\
+				<td class="value_td">'+(parseInt(vn_info.PUBLIC) ? "yes" : "no" )+'</td>\
+			</tr>\
+		</table>';
+    
+    //if it is a fixed VNET we can add leases information  
+    if (vn_info.TEMPLATE.TYPE == "FIXED"){
+		info_tab_content += '<table id="vn_leases_info_table" class="info_table">\
+			<thead>\
+				<tr><th colspan="2">Leases information</th></tr>\
+			</thead>'+
+			prettyPrintJSON(vn_info.LEASES)+
+		'</table>';
+    }
+    
+    
+	var info_tab = {
+        title: "Virtual Network information",
+        content: info_tab_content
+    }
+    
+    var template_tab = {
+        title: "Virtual Network template",
+        content: '<table id="vn_template_table" class="info_table">\
+		<thead><tr><th colspan="2">Virtual Network template</th></tr></thead>'+
+		prettyPrintJSON(vn_info.TEMPLATE)+
+		'</table>'
+    }
+    
+    Sunstone.updateInfoPanelTab("vnet_info_panel","vnet_info_tab",info_tab);
+    Sunstone.updateInfoPanelTab("vnet_info_panel","vnet_template_tab",template_tab);
+        
+    Sunstone.popUpInfoPanel("vnet_info_panel");
+
+}
+
+
+//Prepares the vnet creation dialog
+function setupCreateVNetDialog() {
+     
+    $('div#dialogs').append('<div title="Create Virtual Network" id="create_vn_dialog"></div>');
+     $('#create_vn_dialog').html(create_vn_tmpl);
+    
+    
+    //Prepare the jquery-ui dialog. Set style options here.
+	$('#create_vn_dialog').dialog({
+		autoOpen: false,
+		modal: true,
+		width: 475,
+        height: 500
+	});
+
+	//Make the tabs look nice for the creation mode
+	$('#vn_tabs').tabs();
+    $('div#ranged').hide();
+    $('#fixed_check').click(function(){
+       $('div#fixed').show();
+       $('div#ranged').hide();
+    });
+    $('#ranged_check').click(function(){
+        $('div#fixed').hide();
+        $('div#ranged').show();
+    });
+	$('#create_vn_dialog button').button();
+    
+    
+	//When we hit the add lease button...
+	$('#add_lease').click(function(){
+		var create_form = $('#create_vn_form_easy'); //this is our scope
+
+		//Fetch the interesting values
+		var lease_ip = $('#leaseip',create_form).val();
+		var lease_mac = $('#leasemac',create_form).val();
+
+		//We don't add anything to the list if there is nothing to add
+		if (lease_ip == null) {
+			notifyError("Please provide a lease IP");
+			return false;
+		};
+
+
+		var lease = ""; //contains the HTML to be included in the select box
+		if (lease_mac == "") {
+			lease='<option value="' + lease_ip + '">' + lease_ip + '</option>';
+		} else {
+			lease='<option value="' +
+			lease_ip + ',' +
+			lease_mac + '">' +
+			lease_ip + ',' + lease_mac +
+			'</option>';
+		};
+
+		//We append the HTML into the select box.
+		$('select#leases').append(lease);
+		return false;
+	});
+
+	$('#remove_lease').click(function(){
+		$('select#leases :selected').remove();
+		return false;
+	});
+
+	//Handle submission of the easy mode
+	$('#create_vn_form_easy').submit(function(){
+		//Fetch values
+		var name = $('#name',this).val();
+        if (!name.length){
+            notifyError("Virtual Network name missing!");
+            return false;
+        }
+		var bridge = $('#bridge',this).val();
+		var type = $('input:checked',this).val();
+
+		//TODO: Name and bridge provided?!
+
+		var network_json = null;
+		if (type == "fixed") {
+			var leases = $('#leases option', this);
+			var leases_obj=[];
+
+			//for each specified lease we prepare the JSON object
+			$.each(leases,function(){
+				leases_obj.push({"ip": $(this).val() });
+			});
+
+			//and construct the final data for the request
+			network_json = {
+				"vnet" : {
+					"type" : "FIXED",
+					"leases" : leases_obj,
+					"bridge" : bridge,
+					"name" : name }};
+			}
+		else { //type ranged
+
+			var network_addr = $('#net_address',this).val();
+			var network_size = $('#net_size',this).val();
+			if (!network_addr.length){
+				notifyError("Please provide a network address");
+				return false;
+			};
+
+			//we form the object for the request
+			network_json = {
+				"vnet" : {
+					"type" : "RANGED",
+					"bridge" : bridge,
+					"network_size" : network_size,
+					"network_address" : network_addr,
+					"name" : name }
+				};
+		};
+
+		//Create the VNetwork.
+        
+        Sunstone.runAction("Network.create",network_json);
+		$('#create_vn_dialog').dialog('close');
+		return false;
+	});
+
+	$('#create_vn_form_manual').submit(function(){
+		var template=$('#template',this).val();
+        var vnet_json = {vnet: {vnet_raw: template}};
+        Sunstone.runAction("Network.create",vnet_json);
+        $('#create_vn_dialog').dialog('close');
+		return false;
+	});
+}
+
+function popUpCreateVnetDialog() {
+    $('#create_vn_dialog').dialog('open');
+}
+
+function setVNetAutorefresh() {
+    setInterval(function(){
+		var checked = $('input:checked',dataTable_vNetworks.fnGetNodes());
+        var filter = $("#datatable_vnetworks_filter input").attr("value");
+		if (!checked.length && !filter.length){
+			Sunstone.runAction("Network.autorefresh");
+		}
+	},INTERVAL+someTime());
+}
+
+//The DOM is ready and the ready() from sunstone.js 
+//has been executed at this point. 
+$(document).ready(function(){
+    
+   dataTable_vNetworks = $("#datatable_vnetworks").dataTable({
+      "bJQueryUI": true,
+      "bSortClasses": false,
+      "bAutoWidth":false,
+      "sPaginationType": "full_numbers",
+      "aoColumnDefs": [
+                        { "bSortable": false, "aTargets": ["check"] },
+                        { "sWidth": "60px", "aTargets": [0,4,5,6,7] },
+                        { "sWidth": "35px", "aTargets": [1] },
+                        { "sWidth": "100px", "aTargets": [2] }
+                       ]
+    });
+    
+    dataTable_vNetworks.fnClearTable();
+    addElement([
+        spinner,
+        '','','','','','',''],dataTable_vNetworks);
+    Sunstone.runAction("Network.list");
+    
+    
+    setupCreateVNetDialog();
+    setVNetAutorefresh();
+    
+    initCheckAllBoxes(dataTable_vNetworks);
+    tableCheckboxesListener(dataTable_vNetworks);
+    vNetworkInfoListener();
+    
+    
+});

src/sunstone/public/js/sunstone-util.js

@@ -0,0 +1,373 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+
+/* Some useful functions for Sunstone default plugins */
+var INTERVAL=60000;
+
+function someTime(){
+    return Math.floor(Math.random()*30000);
+}
+
+//introduces 0s before a number until in reaches 'length'.
+function pad(number,length) {
+    var str = '' + number;
+    while (str.length < length)
+        str = '0' + str;
+    return str;
+}
+
+//turns a Unix-formatted time into a human readable string
+function pretty_time(time_seconds)
+{
+    var d = new Date();
+    d.setTime(time_seconds*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(),2);
+    var year = d.getFullYear();
+
+    return hour + ":" + mins +":" + secs + "&nbsp;" + month + "/" + day + "/" + year;
+}
+
+//returns a human readable size in Kilo, Mega, Giga or Tera bytes
+function humanize_size(value) {
+    if (typeof(value) === "undefined") {
+        value = 0;
+    }
+    var binarySufix = ["K", "M", "G", "T" ];
+    var i=0;
+    while (value > 1024 && i < 3){
+        value = value / 1024;
+        i++;
+    }
+    value = Math.round(value * 10) / 10;
+
+    if (value - Math.round(value) == 0) {
+        value = Math.round(value);
+    }
+
+    var st = value + binarySufix[i];
+    return st;
+}
+
+//Wrapper to add an element to a dataTable
+function addElement(element,data_table){
+	data_table.fnAddData(element);
+}
+
+//deletes an element with id 'tag' from a dataTable
+function deleteElement(data_table,tag){
+	var tr = $(tag).parents('tr')[0];
+	data_table.fnDeleteRow(tr);
+    $('input',data_table).trigger("change");
+}
+
+//Listens to the checkboxes of the datatable. This function is used
+//by standard sunstone plugins to enable/disable certain action buttons
+//according to the number of elements checked in the dataTables.
+//It also checks the "check-all" box when all elements are checked
+function tableCheckboxesListener(dataTable){
+
+    //Initialization - disable all buttons
+    var context = dataTable.parents('form');
+    var last_action_b = $('.last_action_button',context);
+    $('.top_button, .list_button',context).button("disable");
+    if (last_action_b.length && last_action_b.val().length){
+        last_action_b.button("disable");
+    };
+    $('.create_dialog_button',context).button("enable");
+
+    //listen to changes
+    $('input',dataTable).live("change",function(){
+        var dataTable = $(this).parents('table').dataTable();
+        var context = dataTable.parents('form');
+        var last_action_b = $('.last_action_button',context);
+        var nodes = dataTable.fnGetNodes();
+        var total_length = nodes.length;
+        var checked_length = $('input:checked',nodes).length;
+        
+        //if all elements are checked we check the check-all box
+        if (total_length == checked_length && total_length != 0){
+            $('.check_all',dataTable).attr("checked","checked");
+        } else {
+            $('.check_all',dataTable).removeAttr("checked");
+        }
+
+        //if some element is checked, we enable buttons, otherwise
+        //we disable them.
+        if (checked_length){
+            $('.top_button, .list_button',context).button("enable");
+            //check if the last_action_button should be enabled
+            if (last_action_b.length && last_action_b.val().length){
+                last_action_b.button("enable");
+            };
+        } else {
+            $('.top_button, .list_button',context).button("disable");
+            last_action_b.button("disable");
+        }
+        
+        //any case the create dialog buttons should always be enabled.
+        $('.create_dialog_button',context).button("enable");
+    });
+
+}
+
+// Updates a data_table, with a 2D array containing the new values
+// Does a partial redraw, so the filter and pagination are kept
+function updateView(item_list,data_table){
+	if (data_table!=null) {
+		data_table.fnClearTable();
+		data_table.fnAddData(item_list);
+		data_table.fnDraw(false);
+	};
+}
+
+//replaces an element with id 'tag' in a dataTable with a new one
+function updateSingleElement(element,data_table,tag){
+	var tr = $(tag).parents('tr')[0];
+	var position = data_table.fnGetPosition(tr);
+	data_table.fnUpdate(element,position,0);
+    $('input',data_table).trigger("change");
+
+}
+
+// Returns an string in the form key=value key=value ...
+// Does not explore objects in depth.
+function stringJSON(json){
+	var str = ""
+	for (field in json) {
+		str+= field + '=' + json[field] + ' ';
+	}
+	return str;
+}
+
+//Notifications
+//Notification of submission of action
+function notifySubmit(action, args, extra_param){
+    var action_text = action.replace(/OpenNebula\./,'').replace(/\./,' ');
+
+    var msg = "<h1>Submitted</h1>";
+    msg += action_text + ": " + args;
+    if (extra_param != null)
+        msg += " >> " + extra_param;
+
+    $.jGrowl(msg, {theme: "jGrowl-notify-submit"});
+}
+
+//Notification on error
+function notifyError(msg){
+    msg = "<h1>Error</h1>" + msg;
+
+    $.jGrowl(msg, {theme: "jGrowl-notify-error", sticky: true });
+}
+
+// Returns an HTML string with the json keys and values in the form
+// key: value<br />
+// It recursively explores objects, and flattens their contents in
+// the result.
+function prettyPrintJSON(template_json){
+	var str = ""
+	for (field in template_json) {
+		if (typeof template_json[field] == 'object'){
+			str += prettyPrintJSON(template_json[field]) + '<tr><td></td><td></td></tr>';
+		} else {
+			str += '<tr><td class="key_td">'+field+'</td><td class="value_td">'+template_json[field]+'</td></tr>';
+		};
+	};
+	return str;
+}
+
+//Add a listener to the check-all box of a datatable, enabling it to
+//check and uncheck all the checkboxes of its elements.
+function initCheckAllBoxes(datatable){
+	//not showing nice in that position
+	//$('.check_all').button({ icons: {primary : "ui-icon-check" },
+	//							text : true});
+    
+    //small css hack
+	$('.check_all',datatable).css({"border":"2px"});
+	$('.check_all',datatable).click(function(){
+		if ($(this).attr("checked")) {
+			$('tbody input:checkbox',
+				$(this).parents("table")).each(function(){
+					$(this).attr("checked","checked");
+			});
+
+		} else {
+			$('tbody input:checkbox',
+				$(this).parents("table")).each(function(){
+					$(this).removeAttr("checked");
+			});			}
+	});
+}
+
+//standard handling for the server errors on ajax requests.
+//Pops up a message with the information.
+function onError(request,error_json) {
+    var method;
+    var action;
+    var object;
+    var id;
+    var reason;
+    var m;
+    var message = error_json.error.message;
+
+    //redirect to login if unauthenticated
+    if (error_json.error.http_status=="401") {
+      window.location.href = "/login";
+    };
+
+    //Parse known errors:
+    var action_error = /^\[(\w+)\] Error trying to (\w+) (\w+) \[(\w+)\].*Reason: (.*)\.$/;
+    var action_error_noid = /^\[(\w+)\] Error trying to (\w+) (\w+) (.*)\.$/;
+    var get_error = /^\[(\w+)\] Error getting (\w+) \[(\w+)\]\.$/;
+    var auth_error = /^\[(\w+)\] User \[.\] not authorized to perform (\w+) on (\w+) \[?(\w+)\]?\.?$/;
+
+    if (m = message.match(action_error)) {
+        method  = m[1];
+        action  = m[2];
+        object  = m[3];
+        id      = m[4];
+        reason  = m[5];
+    } else if (m = message.match(action_error_noid)) {
+        method  = m[1];
+        action  = m[2];
+        object  = m[3];
+        reason  = m[4];
+    } else if (m = message.match(get_error)) {
+        method  = m[1];
+        action  = "SHOW";
+        object  = m[2];
+        id      = m[3];
+    } else if (m = message.match(auth_error)) {
+        method = m[1];
+        action = m[2];
+        object = m[3];
+        id     = m[4];
+    }
+
+    if (m) {
+        var rows;
+        var i;
+        var value;
+        rows = ["method","action","object","id","reason"];
+        message = "";
+        for (i in rows){
+            key = rows[i];
+            value = eval(key);
+            if (value)
+                message += "<tr><td class=\"key_error\">"+key+"</td><td>"+value+"</td></tr>";
+        }
+        message = "<table>" + message + "</table>";
+    }
+
+    notifyError(message);
+    return true;
+}
+
+//Replaces the checkboxes of a datatable with a ajax-loading spinner.
+//Used when refreshing elements of a datatable.
+function waitingNodes(dataTable){
+    var nodes = dataTable.fnGetData();
+    for (var i=0;i<nodes.length;i++){
+       dataTable.fnUpdate(spinner,i,0);
+    }
+};
+
+
+//given a user ID, returns an string with the user name.
+//To do this it finds the user name in the user dataTable. If it is
+//not defined then it returns "uid UID".
+//TODO not very nice to hardcode a dataTable here...
+function getUserName(uid){
+    var user = "uid "+uid;
+    if (typeof(dataTable_users) == "undefined") {
+        return user;
+        } 
+    var nodes = dataTable_users.fnGetData();
+    
+    $.each(nodes,function(){
+       if (uid == this[1]) {
+           user = this[2];
+           return false;
+       }
+    });
+    return user;
+
+}
+
+
+//Replaces all class"tip" divs with an information icon that
+//displays the tip information on mouseover.
+function setupTips(context){
+    
+        //For each tip in this context
+		$('div.tip',context).each(function(){
+                //store the text
+				var tip = $(this).html();
+                //replace the text with an icon and spans
+				$(this).html('<span class="ui-icon ui-icon-info info_icon"></span>');
+                $(this).append('<span class="tipspan"></span>');
+
+                $(this).append('<span class="ui-icon ui-icon-alert man_icon" />');
+
+                //add the text to .tipspan
+				$('span.tipspan',this).html(tip);
+                //make sure it is not floating in the wrong place
+                $(this).parent().append('<div class="clear"></div>');
+                //hide the text
+				$('span.tipspan',this).hide();
+                
+                //When the mouse is hovering on the icon we fadein/out
+                //the tip text
+				$('span.info_icon',this).hover(function(e){
+                    var top, left;
+                    top = e.pageY - 15;// - $(this).parents('#create_vm_dialog').offset().top - 15;
+                    left = e.pageX + 15;// - $(this).parents('#create_vm_dialog').offset().left;
+                    $(this).next().css(
+                        {"top":top+"px",
+                        "left":left+"px"});
+					$(this).next().fadeIn();
+				},function(){
+					$(this).next().fadeOut();
+				});
+		});
+}
+
+//returns an array of ids of selected elements in a dataTable
+function getSelectedNodes(dataTable){
+    var selected_nodes = [];
+    if (dataTable != null){
+            //Which rows of the datatable are checked?
+            var nodes = $('input:checked',dataTable.fnGetNodes());
+            $.each(nodes,function(){
+                selected_nodes.push($(this).val());
+            });
+    }
+    return selected_nodes;
+}
+
+//functions that used as true and false conditions for testing mainly
+function True(){
+    return true;
+}
+function False(){
+    return false;
+}    

src/sunstone/public/js/sunstone.js

@@ -0,0 +1,654 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org)             */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+var cookie = {};
+var username = '';
+var uid = '';
+var spinner = '<img src="/images/ajax-loader.gif" alt="retrieving" class="loading_img"/>';
+
+
+//Sunstone configuration is formed by predifined "actions", main tabs
+//and "info_panels". Each tab has "content" and "buttons". Each 
+//"info_panel" has "tabs" with "content".
+var SunstoneCfg = {
+    "actions" : {},
+     "tabs" : {},
+     "info_panels" : {}
+};
+
+/* Public plugin interface */
+
+var Sunstone = {
+    
+    //Adds a predifined action
+    "addAction" : function (action_name,action_obj) {
+        SunstoneCfg["actions"][action_name] = action_obj;
+    },
+    
+    //Replaces a predefined action
+    "updateAction" : function(action_name,action_obj) {
+         SunstoneCfg["actions"][action_name] = action_obj;
+    },
+    
+    //Deletes a predefined action.
+    "removeAction" : function(action_name) {
+         delete SunstoneCfg["actions"][action_name];
+    },
+    
+    //Adds several actions encapsulated in an js object.
+    "addActions" : function(actions) {
+        for (action in actions){
+            Sunstone.addAction(action,actions[action]);
+        }  
+    },
+    
+    //Adds a new main tab. Refreshes the dom if wanted.
+    "addMainTab" : function(tab_id,tab_obj,refresh) {
+        SunstoneCfg["tabs"][tab_id] = tab_obj;
+        if (refresh){
+            insertTab(tab_id);
+        }
+    },
+    
+    //Updates the content of an info tab and refreshes the DOM if wanted.
+    "updateMainTabContent" : function(tab_id,content_arg,refresh){
+        SunstoneCfg["tabs"][tab_id]["content"]=content_arg;
+        if (refresh){ //if not present it won't be updated
+            $('div#'+tab_id).html(content_arg);
+        }
+    },
+    
+    //Replaces the buttons of an info tab and regenerates them if wanted.
+    "updateMainTabButtons" : function(tab_id,buttons_arg,refresh){
+        SunstoneCfg["tabs"][tab_id]["buttons"]=buttons_arg;
+        if (refresh){
+            $('div#'+tab_id+' .action_blocks').empty();
+            insertButtonsInTab(tab_id);
+        }
+    },
+    
+    //Removes a tab and refreshes the DOM
+    "removeMainTab" : function(tab_id,refresh) {
+         delete SunstoneCfg["tabs"][tab_id];
+         if (refresh) {
+             $('div#'+tab_id).remove();
+              $('ul#navigation li#li_'+tab_id).remove();
+         }
+    },
+    
+    //Adds a new info panel
+    "addInfoPanel" : function(panel_name, panel_obj){
+        SunstoneCfg["info_panels"][panel_name]=panel_obj;
+    },
+    
+    //Replaces an existing info panel
+    "updateInfoPanel" : function(panel_name,panel_obj){
+        SunstoneCfg["info_panels"][panel_name]=panel_obj;
+    },
+    
+    //Removes an info panel
+    "removeInfoPanel" : function(panel_name){
+        delete SunstoneCfg["info_panels"][panel_name];
+    },
+    
+    //Makes an info panel content pop up in the screen.
+    "popUpInfoPanel" : function(panel_name, selected_tab){
+        popDialog(Sunstone.getInfoPanelHTML(panel_name, selected_tab));
+    },
+    
+    //Generates and returns the HTML div element for an info panel, with
+    //Jquery tabs.
+    "getInfoPanelHTML" : function(panel_name,selected_tab){
+        var info_panel = $('<div id="'+panel_name+'"><ul></ul></div>');
+        var tabs = SunstoneCfg["info_panels"][panel_name];
+        var tab=null;
+        for (tab_name in tabs){
+              tab=tabs[tab_name];
+              $('ul',info_panel).append('<li><a href="#'+tab_name+'">'+tab.title+'</a></li>');
+              info_panel.append('<div id="'+tab_name+'">'+tab.content+'</div>');
+        }
+        if (selected_tab){
+            return info_panel.tabs({selected: selected_tab});
+        }
+        return info_panel.tabs({selected: 0});
+        
+    },
+    
+    //adds a tab to an info panel.
+    "addInfoPanelTab" : function(panel_name, panel_tab_id, panel_tab_obj){
+        SunstoneCfg["info_panels"][panel_name][panel_tab_id] = panel_tab_obj;
+    },
+    
+    //Replaces a tab from an info panel. Refreshes the DOM if wanted.
+    "updateInfoPanelTab" : function(panel_name, panel_tab_id, 
+                                        panel_tab_obj, refresh){
+        SunstoneCfg["info_panels"][panel_name][panel_tab_id] = panel_tab_obj;
+        if (refresh){
+            var tab_content = panel_tab_obj.content;
+            $('div#'+panel_name+' div#'+panel_tab_id).html(tab_content);
+        }
+    },
+    
+    //Removes a tab from an info panel configuration.
+    "removeInfoPanelTab" : function(panel_name,panel_tab_id){
+        delete SunstoneCfg["info_panels"][panel_name][panel_tab_id];
+    },
+    
+    //Runs a predefined action. Wraps the calls to opennebula.js and
+    //can be use to run action depending on conditions and notify them
+    //if desired.
+    "runAction" : function(action, data_arg, extra_param){
+    
+        var actions = SunstoneCfg["actions"];
+        if (!actions[action]){
+            notifyError("Action "+action+" not defined");
+            return;
+        }
+        
+        var action_cfg = actions[action];
+        var notify = action_cfg.notify;
+        
+        var condition = action_cfg["condition"];
+        
+        //Is the condition to run the action met?
+        //Should we inform if it is not met?
+        if (condition && !condition()){
+            if (notify) {
+            notifyError("This action cannot be run");
+            }
+            return;
+        }
+        
+        var call = action_cfg["call"];
+        var callback = action_cfg["callback"];
+        var err = action_cfg["error"];
+       
+        
+        //Time to close any confirmation dialogs, as the execution may have
+        //come from them.
+        $('div#confirm_with_select_dialog').dialog("close");
+        $('div#confirm_dialog').dialog("close");
+        
+        
+        //We ease the use of:
+        // * "create" calls to opennebula.js
+        // * "single" element calls to opennebula.js
+        // * "list" (get the pool of elements) calls to opennebula.js
+        // * "multiple" - actions to be run on a given list of elements
+        //      (with maybe an extra parameter).
+        // * The default actions. Simple call the the pre-defined "call"
+        //      function with an extraparam if defined.
+        switch (action_cfg.type){
+            
+            case "create":
+            case "register":
+                call({data:data_arg, success: callback, error:err});
+                break;
+            case "single":
+                call({data:{id:data_arg}, success: callback,error:err});
+                break;
+            case "list":
+                call({success: callback, error:err});
+                break;
+            case "multiple":
+                //run on the list of nodes that come on the data
+                $.each(data_arg,function(){
+                    if (extra_param){
+                        call({data:{id:this,extra_param:extra_param}, success: callback, error: err});
+                    } else {
+                        call({data:{id:this}, success: callback, error:err});
+                    }
+                });
+                break;
+            default: 
+                //This action is complemente handled by the "call" function.
+                //we pass any data if present.
+                if (data_arg && extra_param) {call(data_arg,extra_param);}
+                else if (data_arg) {call(data_arg);}
+                else {call();}
+        }
+        //notify submission
+        if (notify) {
+            notifySubmit(action,data_arg,extra_param);
+        }
+        
+        
+    },
+    
+    //Runs a predefined action on the selected nodes of a datatable.
+    //Optionally they are run with an extra_parameter.
+    //If no datatable is provided, it simply runs the action.
+    //~ "runActionOnDatatableNodes": function(action,dataTable,extra_param){
+        //~ if (dataTable != null){
+            //~ 
+            //~ //Which rows of the datatable are checked?
+            //~ var nodes = $('input:checked',dataTable.fnGetNodes());
+            //~ var data = [];
+            //~ $.each(nodes,function(){
+                //~ data.push($(this).val());
+            //~ });
+            //~ Sunstone.runAction(action,data,extra_param);
+            //~ 
+        //~ } else {
+            //~ Sunstone.runAction(action,extra_param);
+        //~ };
+    //~ },
+    //~ 
+    //returns a button object from the desired tab
+    "getButton" : function(tab_id,button_name){
+            var button = null;
+            var buttons = SunstoneCfg["tabs"][tab_id]["buttons"];
+            button = buttons[button_name];
+            //not found, is it in the list then?
+            if (!button && buttons["action_list"]) 
+            {
+                button = buttons["action_list"]["actions"][button_name];
+            }
+            return button;            
+    } //end sunstone methods
+    
+};
+        
+    
+
+
+
+//Plugins have done their pre-ready jobs when we execute this. That means
+//all startup configuration is in place regarding tabs, info panels etc.
+$(document).ready(function(){
+    readCookie();
+    setLogin();
+    
+    //Insert the tabs in the DOM and their buttons.
+    insertTabs();
+    insertButtons();
+    
+    //Enhace the look of select buttons
+    initListButtons();
+    
+    //Prepare the standard confirmation dialogs
+    setupConfirmDialogs();
+    
+    //Listen for .action_buttons
+    //An action buttons runs a predefined action. If it has type 
+    //"multiple" it runs that action on the elements of a datatable.
+    $('.action_button').live("click",function(){
+        
+        var table = null;
+        var value = $(this).attr("value");
+        var action = SunstoneCfg["actions"][value];
+        if (!action) { notifyError("Action "+value+" not defined."); return false;};
+        switch (action.type){
+            case "multiple": //find the datatable
+                var nodes = action.elements();
+                Sunstone.runAction(value,nodes);
+                break;
+            default:
+                Sunstone.runAction(value);
+        }
+        return false;
+    });
+    
+    
+    //Listen .confirm_buttons. These buttons show a confirmation dialog
+    //before running the action.
+    $('.confirm_button').live("click",function(){
+        popUpConfirmDialog(this);
+        return false;
+    });
+    
+    //Listen .confirm_buttons. These buttons show a confirmation dialog
+    //with a select box before running the action.
+    $('.confirm_with_select_button').live("click",function(){
+        popUpConfirmWithSelectDialog(this);
+        return false;
+    });
+    
+    //Jquery-enhace the buttons in the DOM
+    $('button').button();
+    
+    //Close overlay dialogs when clicking outside of them.
+    $(".ui-widget-overlay").live("click", function (){
+        $("div:ui-dialog:visible").dialog("close");
+    });
+
+    //Close select lists when clicking somewhere else.
+    $('*:not(.action_list,.list_button)').click(function(){
+       $('.action_list:visible').hide();
+    });
+    
+    //Start with the dashboard (supposing we have one).
+    showTab('#dashboard_tab');
+    
+});
+
+
+
+
+//reads the cookie and places its info in the 'cookie' var
+function readCookie(){
+    $.each(document.cookie.split("; "), function(i,e){
+        var e_split = e.split("=");
+        var key = e_split[0];
+        var value = e_split[1];
+        cookie[key] = value;
+    });
+}
+
+//sets the user info in the top bar and creates a listner in the 
+//signout button
+function setLogin(){
+    //This two variables can be used anywhere
+    username = cookie["one-user"];
+    uid = cookie["one-user_id"];
+
+    $("#user").html(username);
+    $("#logout").click(function(){
+        OpenNebula.Auth.logout({success:function(){
+                                    window.location.href = "/login";
+                                    }
+                                });
+        return false;
+    });
+}
+
+//Inserts all main tabs in the DOM
+function insertTabs(){
+    var tab_info;
+    for (tab in SunstoneCfg["tabs"]){
+        insertTab(tab);
+    }
+}
+
+
+//Inserts a main tab in the DOM. This is done by
+//adding the content to the proper div and by adding a list item
+//link to the navigation menu
+function insertTab(tab_name){
+    var tab_info = SunstoneCfg["tabs"][tab_name];
+    var condition = tab_info["condition"];
+    //skip this tab if we do not meet the condition
+    if (condition && !condition()) {return;}
+    $("div.inner-center").append('<div id="'+tab_name+'" class="tab"></div>');
+    $('div#'+tab_name).html(tab_info.content);
+       
+    $('ul#navigation').append('<li id="li_'+tab_name+'"><a href="#'+tab_name+'">'+tab_info.title+'</a></li>');
+}
+
+
+//Inserts the buttons of all tabs.
+function insertButtons(){
+     for (tab in SunstoneCfg["tabs"]){
+        insertButtonsInTab(tab)
+    }
+}
+
+//If we have defined a block of action buttons in a tab,
+//this function takes care of inserting them in the DOM.
+function insertButtonsInTab(tab_name){
+    var buttons = SunstoneCfg["tabs"][tab_name]["buttons"];
+    var button_code="";
+    var sel_obj=null;
+    var condition=null;
+    
+    //Check if we have included an appropiate space our tab to
+    //insert them (an .action_blocks div)
+    if ($('div#'+tab_name+' div.action_blocks').length){
+        
+        //for every button defined for this tab...
+        for (button_name in buttons){
+            button_code = "";
+            button = buttons[button_name];
+            condition = button.condition;
+            //if we meet the condition we proceed. Otherwise we skip it.
+            if (condition && !condition()) { continue; }
+                
+            //depending on the type of button we generate different
+            //code. There are 4 possible types:
+            /*
+             * select: We need to create a select element with actions inside.
+             * image: a button consisting of a link with an image inside.
+             * create: we make sure they have the "action_button" class.
+             * default: generally buttons have the "<type>_button" class.
+             */
+            switch (button.type) {
+              case "select":
+                button_code = '<select class="multi_action_slct">';
+                //for each subbutton in the list we add an option to the select.
+                for (sel_name in button.actions){
+                    sel_obj = button["actions"][sel_name];
+                    condition = sel_obj.condition;
+                    //only add if we meet the condition
+                    if (condition && !condition()){ continue; };
+                    button_code += '<option class="'+sel_obj.type+'_button" value="'+sel_name+'">'+sel_obj.text+'</option>';
+                };
+                button_code += '</select>';
+                break;
+              case "image":
+                button_code = '<a href="#" class="action_button" value="'+button_name+'"><img class="image_button" src="'+button.img+'" alt="'+button.text+'" /></a>';
+                break;
+              case "create_dialog":
+                button_code = '<button class="'+button.type+'_button action_button top_button" value="'+button_name+'">'+button.text+'</button>';
+                break;
+              default:
+                button_code = '<button class="'+button.type+'_button top_button" value="'+button_name+'">'+button.text+'</button>';
+            
+            }
+            
+            $('div#'+tab_name+' .action_blocks').append(button_code);
+                
+        }//for each button in tab
+        $('.top_button').button();
+    }//if tab exists
+}
+
+//Converts selects into buttons which show a list of actions when 
+//clicked. This lists have two parts, one for the last action run, and 
+//another containing a list of actions that can be folded/unfolded.
+function initListButtons(){
+
+        //for each multi_action select
+        $('.multi_action_slct').each(function(){
+             //prepare replacement buttons
+            var buttonset = $('<div style="display:inline-block;" class="top_button"></div');
+            var button1 = $('<button class="last_action_button action_button confirm_button confirm_with_select_button" value="">Previous action</button>').button();
+            button1.attr("disabled","disabled");
+            var button2 = $('<button class="list_button" value="">See more</button>').button({
+                text:false,
+                icons: { primary: "ui-icon-triangle-1-s" }
+                });
+            buttonset.append(button1);
+            buttonset.append(button2);
+            buttonset.buttonset();
+
+            //prepare list
+            var options = $('option', $(this));
+            var list = $('<ul class="action_list"></ul>');
+            $.each(options,function(){
+                var classes = $(this).attr("class");
+                var item = $('<li></li>');
+                var a = $('<a href="#" class="'+classes+'" value="'+$(this).val()+'">'+$(this).text()+'</a>');
+                a.val($(this).val());
+                item.html(a);
+                list.append(item);
+            });
+            list.css({
+                "display":"none"
+            });
+
+
+            //replace the select and insert the buttons
+            $(this).before(buttonset);
+            $(this).parents('.action_blocks').append(list);
+            $(this).remove();
+            //$(this).replaceWith(list);
+
+        });
+
+
+        //below the listeners for events on these buttons and list
+
+        //enable run the last action button
+        $('.action_list li a').click(function(){
+                //enable run last action button
+                var prev_action_button = $('.last_action_button',$(this).parents('.action_blocks'));
+                prev_action_button.val($(this).val());
+                prev_action_button.removeClass("confirm_with_select_button");
+                prev_action_button.removeClass("confirm_button");
+                prev_action_button.removeClass("action_button");
+                prev_action_button.addClass($(this).attr("class"));
+                prev_action_button.button("option","label",$(this).text());
+                prev_action_button.button("enable");
+                $(this).parents('ul').hide("blind",100);
+                //return false;
+        });
+
+
+        //Show the list of actions in place
+        $('.list_button').click(function(){
+            $('.action_list',$(this).parents('.action_blocks')).css({
+                "left": $(this).prev().position().left,
+                "top": $(this).prev().position().top+13,
+                "width": $(this).parent().outerWidth()-11
+            });
+            $('.action_list',$(this).parents('.action_blocks')).toggle("blind",100);
+            return false;
+        });
+}
+
+//Prepares the standard confirm dialogs
+function setupConfirmDialogs(){
+    
+    //add div to the main body if it isn't present.
+    if (!($('div#confirm_dialog').length)){
+        $('div#dialogs').append('<div id="confirm_dialog" title="Confirmation of action"></div>');
+    };
+
+    //add the HTML with the standard question and buttons.
+	$('div#confirm_dialog').html(
+			'<form action="javascript:alert(\'js error!\');">\
+			<div id="confirm_tip">You have to confirm this action.</div>\
+			<br />\
+			<div id="question">Do you want to proceed?</div>\
+			<br />\
+			<div class="form_buttons">\
+			  <button id="confirm_proceed" class="action_button" value="">OK</button>\
+			  <button class="confirm_cancel" value="">Cancel</button>\
+			</div>\
+			</form>');
+            
+    //prepare the jquery dialog
+	$('div#confirm_dialog').dialog({
+			resizable:false,
+			modal:true,
+			width:300,
+			heigth:200,
+			autoOpen:false
+		});
+
+    //enhace the button look
+    $('div#confirm_dialog button').button();
+    
+    //same for the confirm with select dialog.
+    if (!($('div#confirm_with_select_dialog').length)){
+        $('div#dialogs').append('<div id="confirm_with_select_dialog" title="Confirmation of action"></div>');
+    };
+
+	$('div#confirm_with_select_dialog').html(
+			'<form action="javascript:alert(\'js error!\');">\
+			<div id="confirm_with_select_tip">You need to select something.</div>\
+			<select style="margin: 10px 0;" id="confirm_select">\
+			</select>\
+			<div class="form_buttons">\
+			  <button id="confirm_with_select_proceed" class="" value="">OK</button>\
+			  <button class="confirm_cancel" value="">Cancel</button>\
+			</div>\
+			</form>');
+            
+    
+    //prepare the jquery dialog
+	$('div#confirm_with_select_dialog').dialog({
+			resizable:false,
+			modal:true,
+			width:300,
+			heigth:300,
+			autoOpen:false
+		});
+        
+    $('div#confirm_with_select_dialog button').button();
+    
+    //if a cancel button is pressed, we close the dialog.
+    $('button.confirm_cancel').click(function(){
+		$('div#confirm_with_select_dialog').dialog("close");
+        $('div#confirm_dialog').dialog("close");
+		return false;
+	});
+    
+    //when we proceed with a "confirm with select" we need to
+    //find out if we are running an action with a parametre on a datatable
+    //items or if its just an action 
+    $('button#confirm_with_select_proceed').click(function(){
+        var value = $(this).val();
+        var action = SunstoneCfg["actions"][value];
+        var param = $('select#confirm_select').val();
+        if (!action) { notifyError("Action "+value+" not defined."); return false;};
+        switch (action.type){
+            case "multiple": //find the datatable
+                var nodes = action.elements();
+                Sunstone.runAction(value,nodes,param);
+                break;
+            default:
+                Sunstone.runAction(value,param);
+                break;
+        }
+        return false;
+        
+    });
+    
+}
+
+//Popup a confirmation dialog.
+//In order to find out the dialog action and
+//tip for the user we need to access the clicked button
+//configuration. We do this by discovering the name of the parent tab
+//and with the value of the clicked element.
+function popUpConfirmDialog(target_elem){
+    var value = $(target_elem).val();
+    var tab_id = $(target_elem).parents('.tab').attr('id');
+    var button = Sunstone.getButton(tab_id,value);
+    var tip = button.tip;
+    $('button#confirm_proceed').val(value);
+    $('div#confirm_tip').text(tip);
+    $('div#confirm_dialog').dialog("open");
+}
+
+//Same as previous. This time we need as well to access the updated
+//select list, which is done through the pointer of found in the
+//config of the button (a function returning the select options).
+function popUpConfirmWithSelectDialog(target_elem){
+    var value = $(target_elem).val();
+    var tab_id = $(target_elem).parents('.tab').attr('id');
+    var button = Sunstone.getButton(tab_id,value);
+    var tip = button.tip;
+    var select_var = button.select();
+    $('select#confirm_select').html(select_var);
+    $('div#confirm_with_select_tip').text(tip);
+    
+    $('button#confirm_with_select_proceed').val(value);
+    $('div#confirm_with_select_dialog').dialog("open");
+}
+
+

src/sunstone/templates/index.html

@@ -20,31 +20,28 @@
     <link rel="stylesheet" type="text/css" href="/css/application.css" />
     <link rel="stylesheet" type="text/css" href="/css/layout.css" />
     <script type="text/javascript" src="/js/opennebula.js"></script>
-    <script type="text/javascript" src="/js/one-ui_views.templates.js"></script>
-    <script type="text/javascript" src="/js/one-ui_views.js"></script>
     <script type="text/javascript" src="/js/layout.js"></script>
+    <script type="text/javascript" src="/js/sunstone.js"></script>
+    <script type="text/javascript" src="/js/sunstone-util.js"></script>
+    <script type="text/javascript" src="/js/plugins/dashboard-tab.js"></script>
+    <script type="text/javascript" src="/js/plugins/hosts-tab.js"></script>
+    <script type="text/javascript" src="/js/plugins/vms-tab.js"></script>
+    <script type="text/javascript" src="/js/plugins/vnets-tab.js"></script>
+    <script type="text/javascript" src="/js/plugins/images-tab.js"></script>
+    <script type="text/javascript" src="/js/plugins/users-tab.js"></script>
+    
+    <!--<script type="text/javascript" src="/js/plugins/dummy-plugin.js"></script>-->
+    
 </head>
 <body>
 <div class="outer-center">
     <div class="inner-center">
-        <div id="dashboard" class="tab"></div>
-        <div id="hosts" class="tab"></div>
-        <div id="virtualMachines" class="tab"></div>
-        <div id="virtualNetworks" class="tab"></div>
-        <div id="images" class="tab"></div>
-        <div id="users" class="tab"></div>
     </div>
     <div id="dialog" class="inner-south"></div>
 </div>
 
 <div id="menu" class="outer-west">
     <ul id="navigation">
-        <li><a href="#dashboard">Dashboard</a></li>
-        <li><a href="#hosts">Hosts &amp; Clusters</a></li>
-        <li><a href="#virtualMachines">Virtual Machines</a></li>
-        <li><a href="#virtualNetworks">Virtual Networks</a></li>
-        <li><a href="#images">Images</a></li>
-        <li class="oneadmin"><a href="#users">Users</a></li>
     </ul>
 </div>
 
@@ -67,32 +64,8 @@
 
 
 <div id="dialogs">
-    <div id="create_host_dialog" title="Create a new host">
-    </div>
 
-    <div id="create_cluster_dialog" title="Create a new cluster">
-    </div>
-
-    <div id="create_vn_dialog" title="Create a new Virtual Network">
-    </div>
-
-    <div id="create_vm_dialog" title="Create a new Virtual Machine">
-    </div>
-
-    <div id="create_user_dialog" title="Create a new user">
-    </div>
-
-    <div id="create_image_dialog" title="Create a new image">
-    </div>
-
-    <div id="host_info_dialog" title="Host Information">
-    </div>
-
-    <div id="vm_info_dialog" title="Virtual Machine Information">
-    </div>
-
-    <div id="vn_info_dialog" title="Virtual Network Information">
-    </div>
 </div>
+<div id="info_panels"></div>
 </body>
 </html>