shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-23 22:50:09 +03:00
Code Releases Wiki Activity

Feature #3532: Add separate dialogs for importing vCenter VM Templates and Networks

Browse Source
This commit is contained in:
Tino Vazquez 2015-04-13 18:18:59 +02:00
parent 0fca49cf51
commit e79e25757d
6 changed files with 624 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/sunstone/etc/sunstone-views/admin.yaml
View File

@ -213,6 +213,7 @@ tabs:
actions:
Template.refresh: true
Template.create_dialog: true
Template.import_dialog: false
Template.update_dialog: true
Template.instantiate_vms: true
Template.chown: true

1
src/sunstone/etc/sunstone-views/admin_vcenter.yaml
View File

@ -213,6 +213,7 @@ tabs:
actions:
Template.refresh: true
Template.create_dialog: true
Template.import_dialog: true
Template.update_dialog: true
Template.instantiate_vms: true
Template.chown: true

1
src/sunstone/etc/sunstone-views/user.yaml
View File

@ -214,6 +214,7 @@ tabs:
actions:
Template.refresh: true
Template.create_dialog: true
Template.import_dialog: false
Template.update_dialog: true
Template.instantiate_vms: true
Template.chown: false

237
src/sunstone/public/js/plugins/templates-tab.js
View File

@ -1387,6 +1387,13 @@ var template_actions = {
}
},
"Template.import_dialog" : {
type: "create",
call: function(){
popUpTemplateImportDialog();
}
},
"Template.update_dialog" : {
type: "custom",
call: function(){
@ -1611,6 +1618,15 @@ var template_buttons = {
type: "create_dialog",
layout: "create"
},
"Template.import_dialog" : {
type: "create_dialog",
layout: "create",
text: tr("Import"),
icon: '<i class="fa fa-download">',
alwaysActive: true
},
"Template.update_dialog" : {
type: "action",
layout: "main",
@ -4995,6 +5011,227 @@ function popUpTemplateCloneDialog(){
$("input[name='name']",dialog).focus();
}
function popUpTemplateImportDialog(){
setupTemplateImportDialog();
var dialog = $('#template_import_dialog');
$(dialog).foundation().foundation('reveal', 'open');
}
// Template import dialog
function setupTemplateImportDialog(){
//Append to DOM
dialogs_context.append('<div id="template_import_dialog"></div>');
var dialog = $('#template_import_dialog',dialogs_context);
//Put HTML in place
var html = '<div class="row">\
<h3 id="import_template_header" class="subheader">'+tr("Import vCenter VM Templates")+'</h3>\
</div>\
<div class="row vcenter_credentials">\
<fieldset>\
<legend>'+tr("vCenter")+'</legend>\
<div class="row">\
<div class="large-6 columns">\
<label for="vcenter_user">' + tr("User") + '</label>\
<input type="text" name="vcenter_user" id="vcenter_user" />\
</div>\
<div class="large-6 columns">\
<label for="vcenter_host">' + tr("Hostname") + '</label>\
<input type="text" name="vcenter_host" id="vcenter_host" />\
</div>\
</div>\
<div class="row">\
<div class="large-6 columns">\
<label for="vcenter_password">' + tr("Password") + '</label>\
<input type="password" name="vcenter_password" id="vcenter_password" />\
</div>\
<div class="large-6 columns">\
<br>\
<a class="button radius small right" id="get_vcenter_templates">'+tr("Get VM Templates")+'</a>\
</div>\
</div>\
<div class="vcenter_templates">\
</div>\
<br>\
<div class="row">\
<div class="large-12 columns">\
<br>\
<a class="button radius small right success" id="import_vcenter_templates">'+tr("Import")+'</a>\
</div>\
</div>\
</fieldset>\
<a class="close-reveal-modal">&#215;</a>\
</div>\
';
dialog.html(html);
dialog.addClass("reveal-modal medium").attr("data-reveal", "");
$("#get_vcenter_templates", dialog).on("click", function(){
var templates_container = $(".vcenter_templates", dialog);
var vcenter_user = $("#vcenter_user", dialog).val();
var vcenter_password = $("#vcenter_password", dialog).val();
var vcenter_host = $("#vcenter_host", dialog).val();
fillVCenterTemplates({
container: templates_container,
vcenter_user: vcenter_user,
vcenter_password: vcenter_password,
vcenter_host: vcenter_host
});
return false;
})
$("#import_vcenter_templates", dialog).on("click", function(){
$(this).hide();
$.each($(".template_name:checked", dialog), function(){
var template_context = $(this).closest(".vcenter_template");
$(".vcenter_template_result:not(.success)", template_context).html(
'<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
'</span>');
var template_json = {
"vmtemplate": {
"template_raw": $(this).data("one_template")
}
};
OpenNebula.Template.create({
timeout: true,
data: template_json,
success: function(request, response) {
OpenNebula.Helper.clear_cache("VMTEMPLATE");
$(".vcenter_template_result", template_context).addClass("success").html(
'<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>'+
'</span>');
$(".vcenter_template_response", template_context).html('<p style="font-size:12px" class="running-color">'+
tr("Template created successfully")+' ID:'+response.VMTEMPLATE.ID+
'</p>');
Sunstone.runAction('Template.refresh');
},
error: function (request, error_json){
$(".vcenter_template_result", template_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>'+
'</span>');
$(".vcenter_template_response", template_context).html('<p style="font-size:12px" class="error-color">'+
(error_json.error.message || tr("Cannot contact server: is it running and reachable?"))+
'</p>');
Sunstone.runAction('Template.refresh');
}
});
})
});
}
/*
Retrieve the list of templates from vCenter and fill the container with them
opts = {
datacenter: "Datacenter Name",
cluster: "Cluster Name",
container: Jquery div to inject the html,
vcenter_user: vCenter Username,
vcenter_password: vCenter Password,
vcenter_host: vCenter Host
}
*/
function fillVCenterTemplates(opts) {
var path = '/vcenter/templates';
opts.container.html(generateAdvancedSection({
html_id: path,
title: tr("Templates"),
content: '<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
'</span>'
}))
$('a', opts.container).trigger("click")
$.ajax({
url: path,
type: "GET",
data: {timeout: false},
dataType: "json",
headers: {
"X_VCENTER_USER": opts.vcenter_user,
"X_VCENTER_PASSWORD": opts.vcenter_password,
"X_VCENTER_HOST": opts.vcenter_host
},
success: function(response){
$(".content", opts.container).html("");
$('<div class="row">' +
'<div class="large-12 columns">' +
'<p style="color: #999">' + tr("Please select the vCenter Templates to be imported to OpenNebula.") + '</p>' +
'</div>' +
'</div>').appendTo($(".content", opts.container))
$.each(response, function(datacenter_name, templates){
$('<div class="row">' +
'<div class="large-12 columns">' +
'<h5>' +
datacenter_name + ' ' + tr("DataCenter") +
'</h5>' +
'</div>' +
'</div>').appendTo($(".content", opts.container))
if (templates.length == 0) {
$('<div class="row">' +
'<div class="large-12 columns">' +
'<label>' +
tr("No new templates found in this DataCenter") +
'</label>' +
'</div>' +
'</div>').appendTo($(".content", opts.container))
} else {
$.each(templates, function(id, template){
var trow = $('<div class="vcenter_template">' +
'<div class="row">' +
'<div class="large-10 columns">' +
'<label>' +
'<input type="checkbox" class="template_name" checked/> ' +
template.name + '&emsp;<span style="color: #999">' + template.host + '</span>' +
'</label>' +
'<div class="large-12 columns vcenter_template_response">'+
'</div>'+
'</div>' +
'<div class="large-2 columns vcenter_template_result">'+
'</div>'+
'</div>'+
'</div>').appendTo($(".content", opts.container))
$(".template_name", trow).data("template_name", template.name)
$(".template_name", trow).data("one_template", template.one)
});
};
});
},
error: function(response){
opts.container.html("");
onError({}, OpenNebula.Error(response));
}
});
return false;
}
// Instantiate dialog
// Sets up the instiantiate template dialog and all the processing associated to it
function setupInstantiateTemplateDialog(){

382
src/sunstone/public/js/plugins/vnets-tab.js
View File

@ -256,6 +256,13 @@ var vnet_actions = {
}
},
"Network.import_dialog" : {
type: "create",
call: function(){
popUpNetworkImportDialog();
}
},
"Network.list" : {
type: "list",
call: OpenNebula.Network.list,
@ -556,6 +563,13 @@ var vnet_buttons = {
type: "create_dialog",
layout: "create"
},
"Network.import_dialog" : {
type: "create_dialog",
layout: "create",
text: tr("Import"),
icon: '<i class="fa fa-download">',
alwaysActive: true
},
"Network.update_dialog" : {
type: "action",
layout: "main",
@ -2336,6 +2350,374 @@ function setupARTableSelect(section, context_id, vnet_id_fn){
return setupResourceTableSelect(section, context_id, options);
}
function popUpNetworkImportDialog(){
setupNetworkImportDialog();
var dialog = $('#network_import_dialog');
$(dialog).foundation().foundation('reveal', 'open');
}
// Netowrk import dialog
function setupNetworkImportDialog(){
//Append to DOM
dialogs_context.append('<div id="network_import_dialog"></div>');
var dialog = $('#network_import_dialog',dialogs_context);
//Put HTML in place
var html = '<div class="row">\
<h3 id="import_network_header" class="subheader">'+tr("Import vCenter Networks")+'</h3>\
</div>\
<div class="row vcenter_credentials">\
<fieldset>\
<legend>'+tr("vCenter")+'</legend>\
<div class="row">\
<div class="large-6 columns">\
<label for="vcenter_user">' + tr("User") + '</label>\
<input type="text" name="vcenter_user" id="vcenter_user" />\
</div>\
<div class="large-6 columns">\
<label for="vcenter_host">' + tr("Hostname") + '</label>\
<input type="text" name="vcenter_host" id="vcenter_host" />\
</div>\
</div>\
<div class="row">\
<div class="large-6 columns">\
<label for="vcenter_password">' + tr("Password") + '</label>\
<input type="password" name="vcenter_password" id="vcenter_password" />\
</div>\
<div class="large-6 columns">\
<br>\
<a class="button radius small right" id="get_vcenter_networks">'+tr("Get Networks")+'</a>\
</div>\
</div>\
<div class="vcenter_networks">\
</div>\
<br>\
<div class="row">\
<div class="large-12 columns">\
<br>\
<a class="button radius small right success" id="import_vcenter_networks">'+tr("Import")+'</a>\
</div>\
</div>\
</fieldset>\
<a class="close-reveal-modal">&#215;</a>\
</div>\
';
dialog.html(html);
dialog.addClass("reveal-modal medium").attr("data-reveal", "");
$("#get_vcenter_networks", dialog).on("click", function(){
var networks_container = $(".vcenter_networks", dialog);
var vcenter_user = $("#vcenter_user", dialog).val();
var vcenter_password = $("#vcenter_password", dialog).val();
var vcenter_host = $("#vcenter_host", dialog).val();
fillVCenterNetworks({
container: networks_container,
vcenter_user: vcenter_user,
vcenter_password: vcenter_password,
vcenter_host: vcenter_host
});
return false;
})
$("#import_vcenter_networks", dialog).on("click", function(){
$(this).hide();
$.each($(".network_name:checked", dialog), function(){
var network_context = $(this).closest(".vcenter_network");
$(".vcenter_network_result:not(.success)", network_context).html(
'<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
'</span>');
var network_size = $(".netsize", network_context).val();
var network_tmpl = $(this).data("one_network");
var netname = $(this).data("network_name");
var type = $('.type_select', network_context).val();
var ar_array = [];
ar_array.push("TYPE=" + type);
ar_array.push("SIZE=" + network_size);
switch(type) {
case 'ETHER':
var mac = $('.eth_mac_net', network_context).val();
if (mac){
ar_array.push("MAC=" + mac);
}
break;
case 'IP4':
var mac = $('.four_mac_net', network_context).val();
var ip = $('.four_ip_net', network_context).val();
if (mac){
ar_array.push("MAC=" + mac);
}
if (ip) {
ar_array.push("IP=" + ip);
}
break;
case 'IP6':
var mac = $('.six_mac_net', network_context).val();
var gp = $('.six_global_net', network_context).val();
var ula = $('.six_mac_net', network_context).val();
if (mac){
ar_array.push("MAC=" + mac);
}
if (gp) {
ar_array.push("GLOBAL_PREFIX=" + gp);
}
if (ula){
ar_array.push("ULA_PREFIX=" + ula);
}
break;
}
network_tmpl += "\nAR=["
network_tmpl += ar_array.join(",\n")
network_tmpl += "]"
if($(".vlaninfo", network_context))
{
network_tmpl += "VLAN=\"YES\"\n";
network_tmpl += "VLAN_ID="+$(".vlaninfo", network_context).val()+"\n";
}
var vnet_json = {
"vnet": {
"vnet_raw": network_tmpl
}
};
OpenNebula.Network.create({
timeout: true,
data: vnet_json,
success: function(request, response) {
OpenNebula.Helper.clear_cache("VNET");
$(".vcenter_network_result", network_context).addClass("success").html(
'<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>'+
'</span>');
$(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="running-color">'+
tr("Virtual Network created successfully")+' ID:'+response.VNET.ID+
'</p>');
Sunstone.runAction("Network.refresh");
},
error: function (request, error_json){
$(".vcenter_network_result", network_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>'+
'</span>');
$(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="error-color">'+
(error_json.error.message || tr("Cannot contact server: is it running and reachable?"))+
'</p>');
Sunstone.runAction("Network.refresh");
}
});
});
});
}
/*
Retrieve the list of networks from vCenter and fill the container with them
opts = {
datacenter: "Datacenter Name",
cluster: "Cluster Name",
container: Jquery div to inject the html,
vcenter_user: vCenter Username,
vcenter_password: vCenter Password,
vcenter_host: vCenter Host
}
*/
function fillVCenterNetworks(opts) {
var path = '/vcenter/networks';
opts.container.html(generateAdvancedSection({
html_id: path,
title: tr("Networks"),
content: '<span class="fa-stack fa-2x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
'</span>'
}))
$('a', opts.container).trigger("click")
$.ajax({
url: path,
type: "GET",
data: {timeout: false},
dataType: "json",
headers: {
"X_VCENTER_USER": opts.vcenter_user,
"X_VCENTER_PASSWORD": opts.vcenter_password,
"X_VCENTER_HOST": opts.vcenter_host
},
success: function(response){
$(".content", opts.container).html("");
$('<div class="row">' +
'<div class="large-12 columns">' +
'<p style="color: #999">' + tr("Please select the vCenter Networks to be imported to OpenNebula.") + '</p>' +
'</div>' +
'</div>').appendTo($(".content", opts.container))
$.each(response, function(datacenter_name, networks){
$('<div class="row">' +
'<div class="large-12 columns">' +
'<h5>' +
datacenter_name + ' ' + tr("DataCenter") +
'</h5>' +
'</div>' +
'</div>').appendTo($(".content", opts.container))
if (networks.length == 0) {
$('<div class="row">' +
'<div class="large-12 columns">' +
'<label>' +
tr("No new networks found in this DataCenter") +
'</label>' +
'</div>' +
'</div>').appendTo($(".content", opts.container))
} else {
$.each(networks, function(id, network){
var netname = network.name.replace(" ","_");
var vlan_info = ""
if (network.vlan)
{
var vlan_info = '<div class="vlan_info">' +
'<div class="large-4 columns">'+
'<label>' + tr("VLAN") +
'<input type="text" class="vlaninfo" value="'+network.vlan+'" disabled/>' +
'</label>'+
'</div>'+
'</div>';
}
var trow = $('<div class="vcenter_network">' +
'<div class="row">' +
'<div class="large-10 columns">' +
'<div class="large-12 columns">' +
'<label>' +
'<input type="checkbox" class="network_name" checked/> ' +
network.name + '&emsp;<span style="color: #999">' + network.type + '</span>' +
'</label>' +
'</div>'+
'<div class="large-2 columns">'+
'<label>' + tr("SIZE") +
'<input type="text" class="netsize" value="255"/>' +
'</label>' +
'</div>'+
'<div class="large-2 columns">'+
'<label>' + tr("TYPE") +
'<select class="type_select">'+
'<option value="ETHER">eth</option>' +
'<option value="IP4">ipv4</option>'+
'<option value="IP6">ipv6</option>' +
'</select>' +
'</label>' +
'</div>'+
'<div class="net_options">' +
'<div class="large-4 columns">'+
'<label>' + tr("MAC") +
'<input type="text" class="eth_mac_net" placeholder="'+tr("Optional")+'"/>' +
'</label>'+
'</div>'+
'</div>'+
vlan_info +
'<div class="large-12 columns vcenter_network_response">'+
'</div>'+
'</div>' +
'<div class="large-2 columns vcenter_network_result">'+
'</div>'+
'</div>'+
'</div>').appendTo($(".content", opts.container))
$('.type_select', trow).on("change",function(){
var network_context = $(this).closest(".vcenter_network");
var type = $(this).val();
var net_form_str = ''
switch(type) {
case 'ETHER':
net_form_str =
'<div class="large-4 columns">'+
'<label>' + tr("MAC") +
'<input type="text" class="eth_mac_net" placeholder="'+tr("Optional")+'"/>' +
'</label>'+
'</div>';
break;
case 'IP4':
net_form_str =
'<div class="large-4 columns">'+
'<label>' + tr("IP START") +
'<input type="text" class="four_ip_net"/>' +
'</label>'+
'</div>'+
'<div class="large-4 columns">'+
'<label>' + tr("MAC") +
'<input type="text" class="eth_mac_net" placeholder="'+tr("Optional")+'"/>' +
'</label>'+
'</div>';
break;
case 'IP6':
net_form_str =
'<div class="large-4 columns">'+
'<label>' + tr("MAC") +
'<input type="text" class="eth_mac_net"/>' +
'</label>'+
'</div>'+
'<div class="large-6 columns">'+
'<label>' + tr("GLOBAL PREFIX") +
'<input type="text" class="six_global_net" placeholder="'+tr("Optional")+'"/>' +
'</label>'+
'</div>'+
'<div class="large-6 columns">'+
'<label>' + tr("ULA_PREFIX") +
'<input type="text" class="six_ula_net" placeholder="'+tr("Optional")+'"/>' +
'</label>'+
'</div>';
break;
}
$('.net_options', network_context).html(net_form_str);
});
$(".network_name", trow).data("network_name", netname)
$(".network_name", trow).data("one_network", network.one)
});
};
});
},
error: function(response){
opts.container.html("");
onError({}, OpenNebula.Error(response));
}
});
return false;
}
//The DOM is ready and the ready() from sunstone.js
//has been executed at this point.
$(document).ready(function(){

3
src/sunstone/public/js/sunstone.js
View File

@ -868,7 +868,8 @@ function insertButtonsInTab(tab_name, panel_name, panel_buttons, custom_context)
switch (button.layout) {
case "create":
button_context = $("#"+custom_id+"create_buttons", buttons_row);
text = button.text ? '<i class="fa fa-plus"/> ' + button.text : '<i class="fa fa-plus"/>';
icon = button.icon ? button.icon : '<i class="fa fa-plus"/>';
text = button.text ? icon + ' ' + button.text : icon;
str_class.push("success", "button", "small", "radius");
button_code = '<button class="'+str_class.join(' ')+'" href="'+button_name+'">'+text+'</button>';
break;