mirror of
https://github.com/OpenNebula/one.git
synced 2024-12-25 23:21:29 +03:00
Merge branch 'feature-507'
Conflicts: src/sunstone/public/js/one-ui_views.js src/sunstone/public/js/one-ui_views.templates.js
This commit is contained in:
Jaime Melis
commit
bafa380a29
@ -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;
|
||||
|
||||
@ -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");
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -182,8 +182,8 @@ var OpenNebula = {
|
||||
var password = params.data.password;
|
||||
var remember = params.remember;
|
||||
|
||||
var resource = this.resource;
|
||||
var request = OpenNebula.Helper.request(this.resource,"login");
|
||||
var resource = OpenNebula.Auth.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"logout");
|
||||
var resource = OpenNebula.Auth.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.Config.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.Host.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"show", id);
|
||||
var resource = OpenNebula.Host.resource;
|
||||
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 = this.resource;
|
||||
var request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.Network.resource;
|
||||
|
||||
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 request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.VM.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.Cluster.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.User.resource;
|
||||
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 request = OpenNebula.Helper.request(this.resource,"list");
|
||||
var resource = OpenNebula.Image.resource;
|
||||
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",
|
||||
|
||||
241
src/sunstone/public/js/plugins/dashboard-tab.js
Normal file
241
src/sunstone/public/js/plugins/dashboard-tab.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
689
src/sunstone/public/js/plugins/hosts-tab.js
Normal file
689
src/sunstone/public/js/plugins/hosts-tab.js
Normal file
@ -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 & 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();
|
||||
|
||||
});
|
||||
870
src/sunstone/public/js/plugins/images-tab.js
Normal file
870
src/sunstone/public/js/plugins/images-tab.js
Normal file
@ -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();
|
||||
|
||||
})
|
||||
252
src/sunstone/public/js/plugins/users-tab.js
Normal file
252
src/sunstone/public/js/plugins/users-tab.js
Normal file
@ -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);
|
||||
}
|
||||
})
|
||||
1823
src/sunstone/public/js/plugins/vms-tab.js
Normal file
1823
src/sunstone/public/js/plugins/vms-tab.js
Normal file
File diff suppressed because it is too large
Load Diff
594
src/sunstone/public/js/plugins/vnets-tab.js
Normal file
594
src/sunstone/public/js/plugins/vnets-tab.js
Normal file
@ -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();
|
||||
|
||||
|
||||
});
|
||||
373
src/sunstone/public/js/sunstone-util.js
Normal file
373
src/sunstone/public/js/sunstone-util.js
Normal file
@ -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 + " " + 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;
|
||||
}
|
||||
654
src/sunstone/public/js/sunstone.js
Normal file
654
src/sunstone/public/js/sunstone.js
Normal file
@ -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");
|
||||
}
|
||||
|
||||
|
||||
@ -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 & 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user