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

Bug #4544 #4691: Refactor code

Browse Source
This commit is contained in:
Carlos Martín 2016-09-08 18:39:12 +02:00
parent 8ac2871f64
commit 5680c1d494
16 changed files with 568 additions and 916 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
src/sunstone/public/app/utils/vcenter/clusters.js
View File

@ -23,15 +23,19 @@ define(function(require) {
var DomDataTable = require('utils/dom-datatable');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var VCenterCommon = require('./vcenter-common');
var TemplateHTML = require('hbs!./clusters/html');
var TemplateHTML = require('hbs!./common/html');
var RowTemplate = require('hbs!./clusters/row');
var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset');
var FieldsetTableHTML = require('hbs!./common/fieldset-table');
function VCenterClusters() {
return this;
}
VCenterClusters.prototype = {
'html': _html,
'html': VCenterCommon.html,
'insert': _fillVCenterClusters,
'import': _import
};
@ -39,10 +43,6 @@ define(function(require) {
return VCenterClusters;
function _html() {
return '<div class="vcenter_import" hidden></div>';
}
/*
opts = {
container: Jquery div to inject the html,
@ -77,83 +77,32 @@ define(function(require) {
$.each(response, function(datacenter_name, elements) {
var content;
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li>' +
'<span>' +
Locale.tr("No new clusters found in this DataCenter") +
'</span>' +
'</li>' +
'</ul>' +
'</legend>' +
'</fieldset>';
content = EmptyFieldsetHTML({
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
message : Locale.tr("No new clusters found in this DataCenter")
});
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported DataCenters") +
'</button>' +
'</li>' +
'</ul>' +
'</legend>' +
'<div class="row">' +
'<div class="large-12 columns text-center">' +
'<p>' +
'<span class="vcenter-table-header-text">' +
'</span> ' +
'<a class="vcenter-table-select-all">' +
'</a>' +
'<a class="vcenter-table-deselect-all">' +
Locale.tr("Clear selection") +
'</a>' +
'</p>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="large-12 columns">' +
'<table class="dataTable vcenter_import_table hover" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Name") + '</th>' +
'<th/>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
content = FieldsetTableHTML({
tableId : tableId,
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
clearImported : Locale.tr("Clear Imported DataCenters"),
toggleAdvanced : false,
columns : [
'<input type="checkbox" class="check_all"/>',
Locale.tr("Name"),
""
]
});
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
$.each(elements, function(id, cluster_name) {
var trow = $(
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>' + cluster_name + '</td>' +
'<td>' +
'<span class="vcenter_import_result">' +
'</span>&nbsp;' +
'<span class="vcenter_import_response">' +
'</span>' +
'</td>' +
'</tr>').appendTo(tbody);
var opts = { name: cluster_name };
var trow = $(RowTemplate(opts)).appendTo(tbody);
$(".check_item", trow).data("cluster_name", cluster_name);
});
@ -180,31 +129,10 @@ define(function(require) {
$("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s DataCenters", elements.length));
_recountCheckboxes($('table', newdiv));
newdiv.on("change", '.check_all', function() {
var table = $(this).closest('table');
if ($(this).is(":checked")) { //check all
$('tbody input.check_item', table).prop('checked', true).change();
} else { //uncheck all
$('tbody input.check_item', table).prop('checked', false).change();
}
});
$('table', newdiv).on('draw.dt', function() {
_recountCheckboxes(this);
});
$(newdiv).on('change', ".check_item", function() {
_recountCheckboxes($('table', newdiv));
});
$(".vcenter-table-select-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change();
});
$(".vcenter-table-deselect-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change();
VCenterCommon.setupTable({
context : newdiv,
allSelected : Locale.tr("All %1$s DataCenters selected."),
selected: Locale.tr("%1$s DataCenters selected.")
});
context.off('click', '.clear_imported');
@ -226,36 +154,6 @@ define(function(require) {
});
}
function _recountCheckboxes(table) {
// Counters for the whole table, all pages
var dt = $(table).DataTable();
var total = dt.$(".check_item").length;
var selected = dt.$(".check_item:checked").length;
if (selected == total){
$(".vcenter-table-header-text").text(Locale.tr("All %1$s DataCenters selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").hide();
$("a.vcenter-table-deselect-all").show();
} else if (selected == 0){
$(".vcenter-table-header-text").hide();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
} else {
$(".vcenter-table-header-text").text(Locale.tr("%1$s DataCenters selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
}
// Counters for the current visible page
var total_length = $('input.check_item', table).length;
var checked_length = $('input.check_item:checked', table).length;
$('.check_all', table).prop('checked', (total_length == checked_length));
}
function _import(context, cluster_id) {
var that = this;
@ -263,11 +161,7 @@ define(function(require) {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".vcenter_import_result:not(.success)", row_context).html(
'<span class="fa-stack" 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>');
VCenterCommon.importLoading({context : row_context});
var host_json = {
"host": {
@ -283,14 +177,10 @@ define(function(require) {
timeout: true,
data: host_json,
success: function(request, response) {
$(".vcenter_import_result", row_context).addClass("success").html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x running-color"></i>' +
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Host created successfully") + '. ID: ' + response.HOST.ID);
VCenterCommon.importSuccess({
context : row_context,
message : Locale.tr("Host created successfully. ID: %1$s", response.HOST.ID)
});
var template_raw =
"VCENTER_USER=\"" + that.opts.vcenter_user + "\"\n" +
@ -300,14 +190,10 @@ define(function(require) {
Sunstone.runAction("Host.update_template", response.HOST.ID, template_raw);
},
error: function (request, error_json) {
$(".vcenter_import_result", row_context).html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x error-color"></i>' +
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
VCenterCommon.importFailure({
context : row_context,
message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))
});
}
});
});

18
src/sunstone/public/app/utils/vcenter/datastores/html.hbs → src/sunstone/public/app/utils/vcenter/clusters/row.hbs
View File

@ -14,9 +14,15 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="vcenter_datacenter_list">
<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>
</div>
<tr>
<td>
<input type="checkbox" class="check_item"/>
</td>
<td>{{name}}</td>
<td>
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</td>
</tr>

20
src/sunstone/public/app/utils/vcenter/networks/html.hbs → src/sunstone/public/app/utils/vcenter/common/empty-fieldset.hbs
View File

@ -14,9 +14,17 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="vcenter_datacenter_list">
<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>
</div>
<fieldset>
<legend>
<ul class="menu simple">
<li>
{{title}}
</li>
<li>
<span>
{{message}}
</span>
</li>
</ul>
</legend>
</fieldset>

67
src/sunstone/public/app/utils/vcenter/common/fieldset-table.hbs Normal file
View File

@ -0,0 +1,67 @@
{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems }}
{{! }}
{{! 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. }}
{{! -------------------------------------------------------------------------- }}
<fieldset>
<legend>
<ul class="menu simple">
<li>
{{title}}
</li>
{{#if clearImported}}
<li>
<button class="button small secondary clear_imported">
{{clearImported}}
</button>
</li>
{{/if}}
</ul>
</legend>
<div class="row">
<div class="large-12 columns text-center">
<p>
<span class="vcenter-table-header-text">
</span>
<a class="vcenter-table-select-all">
</a>
<a class="vcenter-table-deselect-all">
{{tr "Clear selection"}}
</a>
{{#if toggleAdvanced}}
&emsp;|&emsp;
<a class="vcenter-table-toggle-advanced">
{{tr "Toggle advanced sections"}}
</a>
{{/if}}
</p>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<table class="dataTable vcenter_import_table
{{#unless toggleAdvanced}}
hover
{{/unless}}" id="{{tableId}}">
<thead>
{{#each columns}}
<th>{{{this}}}</th>
{{/each}}
</thead>
<tbody/>
</table>
</div>
</div>
</fieldset>

0
src/sunstone/public/app/utils/vcenter/clusters/html.hbs → src/sunstone/public/app/utils/vcenter/common/html.hbs
View File

190
src/sunstone/public/app/utils/vcenter/datastores.js
View File

@ -22,15 +22,19 @@ define(function(require) {
var DomDataTable = require('utils/dom-datatable');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var VCenterCommon = require('./vcenter-common');
var TemplateHTML = require('hbs!./datastores/html');
var TemplateHTML = require('hbs!./common/html');
var RowTemplate = require('hbs!./datastores/row');
var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset');
var FieldsetTableHTML = require('hbs!./common/fieldset-table');
function VCenterDatastores() {
return this;
}
VCenterDatastores.prototype = {
'html': _html,
'html': VCenterCommon.html,
'insert': _fillVCenterDatastores,
'import': _import
};
@ -38,10 +42,6 @@ define(function(require) {
return VCenterDatastores;
function _html() {
return '<div class="vcenter_import hidden"></div>';
}
/*
Retrieve the list of Datastores from vCenter and fill the container with them
@ -60,7 +60,6 @@ define(function(require) {
var context = $(".vcenter_import", opts.container);
context.html( TemplateHTML({}) );
context.show();
$.ajax({
@ -79,85 +78,33 @@ define(function(require) {
$.each(response, function(datacenter_name, elements){
var content;
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li>' +
'<span>' +
Locale.tr("No new datastores found in this DataCenter") +
'</span>' +
'</li>' +
'</ul>' +
'</legend>' +
'</fieldset>';
content = EmptyFieldsetHTML({
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
message : Locale.tr("No new datastores found in this DataCenter")
});
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_import_table" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Datastores") +
'</button>' +
'</li>' +
'</ul>' +
'</legend>' +
'<div class="row">' +
'<div class="large-12 columns text-center">' +
'<p>' +
'<span class="vcenter-table-header-text">' +
'</span> ' +
'<a class="vcenter-table-select-all">' +
'</a>' +
'<a class="vcenter-table-deselect-all">' +
Locale.tr("Clear selection") +
'</a>' +
'</p>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="large-12 columns">' +
'<table class="dataTable vcenter_import_table hover" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Name") + '</th>' +
'<th>' + Locale.tr("Datacenter") + '</th>' +
'<th/>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
content = FieldsetTableHTML({
tableId : tableId,
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
clearImported : Locale.tr("Clear Imported Datastores"),
toggleAdvanced : false,
columns : [
'<input type="checkbox" class="check_all"/>',
Locale.tr("Name"),
Locale.tr("Datacenter"),
""
]
});
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
$.each(elements, function(id, element){
var trow = $(
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>' + element.name + '</td>' +
'<td>' + element.cluster + '</td>' +
'<td>' +
'<span class="vcenter_import_result">' +
'</span>&nbsp;' +
'<span class="vcenter_import_response">' +
'</span>' +
'</td>' +
'</tr>').appendTo(tbody);
var opts = { name: element.name, cluster: element.cluster };
var trow = $(RowTemplate(opts)).appendTo(tbody);
$(".check_item", trow).data("one_template", element.one)
});
@ -185,31 +132,10 @@ define(function(require) {
$("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Datastores", elements.length));
_recountCheckboxes($('table', newdiv));
newdiv.on("change", '.check_all', function() {
var table = $(this).closest('table');
if ($(this).is(":checked")) { //check all
$('tbody input.check_item', table).prop('checked', true).change();
} else { //uncheck all
$('tbody input.check_item', table).prop('checked', false).change();
}
});
$('table', newdiv).on('draw.dt', function(){
_recountCheckboxes(this);
});
$(newdiv).on('change', ".check_item", function() {
_recountCheckboxes($('table', newdiv));
});
$(".vcenter-table-select-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change();
});
$(".vcenter-table-deselect-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change();
VCenterCommon.setupTable({
context : newdiv,
allSelected : Locale.tr("All %1$s Datastores selected."),
selected: Locale.tr("%1$s Datastores selected.")
});
context.off('click', '.clear_imported');
@ -227,46 +153,12 @@ define(function(require) {
});
}
function _recountCheckboxes(table) {
// Counters for the whole table, all pages
var dt = $(table).DataTable();
var total = dt.$(".check_item").length;
var selected = dt.$(".check_item:checked").length;
if (selected == total){
$(".vcenter-table-header-text").text(Locale.tr("All %1$s Datastores selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").hide();
$("a.vcenter-table-deselect-all").show();
} else if (selected == 0){
$(".vcenter-table-header-text").hide();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
} else {
$(".vcenter-table-header-text").text(Locale.tr("%1$s Datastores selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
}
// Counters for the current visible page
var total_length = $('input.check_item', table).length;
var checked_length = $('input.check_item:checked', table).length;
$('.check_all', table).prop('checked', (total_length == checked_length));
}
function _import(context) {
$.each($("table.vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".vcenter_import_result:not(.success)", row_context).html(
'<span class="fa-stack" 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>');
VCenterCommon.importLoading({context : row_context});
var datastore_json = {
"datastore": {
@ -279,24 +171,16 @@ define(function(require) {
timeout: true,
data: datastore_json,
success: function(request, response) {
$(".vcenter_import_result", row_context).addClass("success").html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x running-color"></i>' +
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Datastore created successfully") + '. ID: ' + response.DATASTORE.ID);
VCenterCommon.importSuccess({
context : row_context,
message : Locale.tr("Datastore created successfully. ID: %1$s", response.DATASTORE.ID)
});
},
error: function (request, error_json) {
$(".vcenter_import_result", row_context).html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x error-color"></i>' +
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
VCenterCommon.importFailure({
context : row_context,
message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))
});
}
});
});

19
src/sunstone/public/app/utils/vcenter/images/html.hbs → src/sunstone/public/app/utils/vcenter/datastores/row.hbs
View File

@ -14,9 +14,16 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="vcenter_datacenter_list">
<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>
</div>
<tr>
<td>
<input type="checkbox" class="check_item"/>
</td>
<td>{{name}}</td>
<td>{{cluster}}</td>
<td>
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</td>
</tr>

195
src/sunstone/public/app/utils/vcenter/images.js
View File

@ -23,15 +23,19 @@ define(function(require) {
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var Humanize = require('utils/humanize');
var VCenterCommon = require('./vcenter-common');
var TemplateHTML = require('hbs!./images/html');
var TemplateHTML = require('hbs!./common/html');
var RowTemplate = require('hbs!./images/row');
var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset');
var FieldsetTableHTML = require('hbs!./common/fieldset-table');
function VCenterImages() {
return this;
}
VCenterImages.prototype = {
'html': _html,
'html': VCenterCommon.html,
'insert': _fillVCenterImages,
'import': _import
};
@ -39,10 +43,6 @@ define(function(require) {
return VCenterImages;
function _html() {
return '<div class="vcenter_import hidden"></div>';
}
/*
Retrieve the list of images from a vCenter DS and fill
the container with them
@ -78,89 +78,37 @@ define(function(require) {
$(".vcenter_datacenter_list", context).html("");
var content;
if (response.length == 0) {
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
opts.vcenter_datastore + ' ' + Locale.tr("Datastore") +
'</li>' +
'<li>' +
'<span>' +
Locale.tr("No new images found in this datastore") +
'</span>' +
'</li>' +
'</ul>' +
'</legend>' +
'</fieldset>';
content = EmptyFieldsetHTML({
title : opts.vcenter_datastore + ' ' + Locale.tr("Datastore"),
message : Locale.tr("No new images found in this datastore")
});
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
opts.vcenter_datastore + ' ' + Locale.tr("Datastore") +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Images") +
'</button>' +
'</li>' +
'</ul>' +
'</legend>' +
'<div class="row">' +
'<div class="large-12 columns text-center">' +
'<p>' +
'<span class="vcenter-table-header-text">' +
'</span> ' +
'<a class="vcenter-table-select-all">' +
'</a>' +
'<a class="vcenter-table-deselect-all">' +
Locale.tr("Clear selection") +
'</a>' +
'</p>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="large-12 columns">' +
'<table class="dataTable vcenter_import_table hover" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Name") + '</th>' +
'<th>' + Locale.tr("Size") + '</th>' +
'<th/>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
content = FieldsetTableHTML({
tableId : tableId,
title : opts.vcenter_datastore + ' ' + Locale.tr("Datastore"),
clearImported : Locale.tr("Clear Imported Images"),
toggleAdvanced : false,
columns : [
'<input type="checkbox" class="check_all"/>',
Locale.tr("Name"),
Locale.tr("Size"),
""
]
});
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
$.each(response, function(id, element) {
var trow = $(
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>' + element.name + '</td>' +
'<td>' + Humanize.sizeFromMB(element.size) + '</td>' +
'<td>' +
'<span class="vcenter_import_result">' +
'</span>&nbsp;' +
'<span class="vcenter_import_response">' +
'</span>' +
'</td>' +
'</tr>').appendTo(tbody);
var opts = { name: element.name, size: element.size };
var trow = $(RowTemplate(opts)).appendTo(tbody);
$(".check_item", trow).data("datastore_id", element.dsid);
$(".check_item", trow).data("one_template", element.one);
});
$(".check_item", trow).data("datastore_id", element.dsid);
$(".check_item", trow).data("one_template", element.one);
});
var elementsTable = new DomDataTable(
tableId,
@ -184,31 +132,10 @@ define(function(require) {
$("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Images", response.length));
_recountCheckboxes($('table', newdiv));
newdiv.on("change", '.check_all', function() {
var table = $(this).closest('table');
if ($(this).is(":checked")) { //check all
$('tbody input.check_item', table).prop('checked', true).change();
} else { //uncheck all
$('tbody input.check_item', table).prop('checked', false).change();
}
});
$('table', newdiv).on('draw.dt', function() {
_recountCheckboxes(this);
});
$(newdiv).on('change', ".check_item", function() {
_recountCheckboxes($('table', newdiv));
});
$(".vcenter-table-select-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change();
});
$(".vcenter-table-deselect-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change();
VCenterCommon.setupTable({
context : newdiv,
allSelected : Locale.tr("All %1$s Images selected."),
selected: Locale.tr("%1$s Images selected.")
});
context.off('click', '.clear_imported');
@ -225,46 +152,12 @@ define(function(require) {
});
}
function _recountCheckboxes(table) {
// Counters for the whole table, all pages
var dt = $(table).DataTable();
var total = dt.$(".check_item").length;
var selected = dt.$(".check_item:checked").length;
if (selected == total){
$(".vcenter-table-header-text").text(Locale.tr("All %1$s Images selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").hide();
$("a.vcenter-table-deselect-all").show();
} else if (selected == 0){
$(".vcenter-table-header-text").hide();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
} else {
$(".vcenter-table-header-text").text(Locale.tr("%1$s Images selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
}
// Counters for the current visible page
var total_length = $('input.check_item', table).length;
var checked_length = $('input.check_item:checked', table).length;
$('.check_all', table).prop('checked', (total_length == checked_length));
}
function _import(context) {
$.each($("table.vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".vcenter_import_result:not(.success)", row_context).html(
'<span class="fa-stack" 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>');
VCenterCommon.importLoading({context : row_context});
var image_json = {
"image": {
@ -277,22 +170,12 @@ define(function(require) {
timeout: true,
data: image_json,
success: function(request, response) {
$(".vcenter_import_result", row_context).addClass("success").html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x running-color"></i>' +
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Image created successfully") + '. ID: ' + response.IMAGE.ID);
VCenterCommon.importSuccess({
context : row_context,
message : Locale.tr("Image created successfully. ID: %1$s", response.IMAGE.ID)
});
},
error: function (request, error_json) {
$(".vcenter_import_result", row_context).html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x error-color"></i>' +
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>' +
'</span>');
var error_message_str = error_json.error.message
if(error_message_str=="[ImageAllocate] Not enough space in datastore"){
@ -300,8 +183,10 @@ define(function(require) {
Locale.tr("Please disable DATASTORE_CAPACITY_CHECK in /etc/one/oned.conf and restart OpenNebula");
}
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_message_str || Locale.tr("Cannot contact server: is it running and reachable?")));
VCenterCommon.importFailure({
context : row_context,
message : (error_message_str || Locale.tr("Cannot contact server: is it running and reachable?"))
});
}
});
});

20
src/sunstone/public/app/utils/vcenter/templates/html.hbs → src/sunstone/public/app/utils/vcenter/images/row.hbs
View File

@ -14,10 +14,16 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="vcenter_datacenter_list">
<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>
</div>
<tr>
<td>
<input type="checkbox" class="check_item"/>
</td>
<td>{{name}}</td>
<td>{{humanizeSize "KB" size}}</td>
<td>
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</td>
</tr>

191
src/sunstone/public/app/utils/vcenter/networks.js
View File

@ -22,16 +22,19 @@ define(function(require) {
var DomDataTable = require('utils/dom-datatable');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var VCenterCommon = require('./vcenter-common');
var TemplateHTML = require('hbs!./networks/html');
var TemplateHTML = require('hbs!./common/html');
var RowTemplate = require('hbs!./networks/row');
var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset');
var FieldsetTableHTML = require('hbs!./common/fieldset-table');
function VCenterNetworks() {
return this;
}
VCenterNetworks.prototype = {
'html': _html,
'html': VCenterCommon.html,
'insert': _fillVCenterNetworks,
'import': _import
};
@ -39,10 +42,6 @@ define(function(require) {
return VCenterNetworks;
function _html() {
return '<div class="vcenter_import" hidden></div>';
}
/*
Retrieve the list of networks from vCenter and fill the container with them
@ -78,80 +77,31 @@ define(function(require) {
$.each(response, function(datacenter_name, elements) {
var content;
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li>' +
'<span>' +
Locale.tr("No new networks found in this DataCenter") +
'</span>' +
'</li>' +
'</ul>' +
'</legend>' +
'</fieldset>';
content = EmptyFieldsetHTML({
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
message : Locale.tr("No new networks found in this DataCenter")
});
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Networks") +
'</button>' +
'</li>' +
'</ul>' +
'</legend>' +
'<div class="row">' +
'<div class="large-12 columns text-center">' +
'<p>' +
'<span class="vcenter-table-header-text">' +
'</span> ' +
'<a class="vcenter-table-select-all">' +
'</a>' +
'<a class="vcenter-table-deselect-all">' +
Locale.tr("Clear selection") +
'</a>' +
'&emsp;|&emsp;<a class="vcenter-table-toggle-advanced">' +
Locale.tr("Toggle advanced sections") +
'</a>' +
'</p>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="large-12 columns">' +
'<table class="dataTable vcenter_import_table" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Network") + '</th>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
content = FieldsetTableHTML({
tableId : tableId,
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
clearImported : Locale.tr("Clear Imported Networks"),
toggleAdvanced : true,
columns : [
'<input type="checkbox" class="check_all"/>',
Locale.tr("Network")
]
});
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
$.each(elements, function(id, element) {
var opts = { data: element };
var trow = $(
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>'+RowTemplate(opts)+'</td>' +
'</tr>').appendTo(tbody);
var trow = $(RowTemplate(opts)).appendTo(tbody);
$('.check_item', trow).data("import_data", element);
});
@ -177,41 +127,10 @@ define(function(require) {
$("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Networks", elements.length));
_recountCheckboxes($('table', newdiv));
newdiv.on("change", '.check_all', function() {
var table = $(this).closest('table');
if ($(this).is(":checked")) { //check all
$('tbody input.check_item', table).prop('checked', true).change();
} else { //uncheck all
$('tbody input.check_item', table).prop('checked', false).change();
}
});
$('table', newdiv).on('draw.dt', function() {
_recountCheckboxes(this);
});
$(newdiv).on('change', ".check_item", function() {
_recountCheckboxes($('table', newdiv));
});
$(".vcenter-table-select-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change();
});
$(".vcenter-table-deselect-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change();
});
$(".vcenter-table-toggle-advanced", newdiv).on("click", function(){
var unactive_n = $(".accordion_advanced_toggle:not(.active)", newdiv).length;
if (unactive_n > 0){
$(".accordion_advanced_toggle:not(.active)", newdiv).click();
} else {
$(".accordion_advanced_toggle", newdiv).click();
}
VCenterCommon.setupTable({
context : newdiv,
allSelected : Locale.tr("All %1$s Networks selected."),
selected: Locale.tr("%1$s Networks selected.")
});
context.off('click', '.clear_imported');
@ -281,48 +200,12 @@ define(function(require) {
});
}
function _recountCheckboxes(table) {
// Counters for the whole table, all pages
var dt = $(table).DataTable();
var total = dt.$(".check_item").length;
var selected = dt.$(".check_item:checked").length;
if (selected == total){
$(".vcenter-table-header-text").text(Locale.tr("All %1$s Networks selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").hide();
$("a.vcenter-table-deselect-all").show();
} else if (selected == 0){
$(".vcenter-table-header-text").hide();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
} else {
$(".vcenter-table-header-text").text(Locale.tr("%1$s Networks selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
}
// Counters for the current visible page
var total_length = $('input.check_item', table).length;
var checked_length = $('input.check_item:checked', table).length;
$('.check_all', table).prop('checked', (total_length == checked_length));
}
function _import(context) {
$.each($(".vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".vcenter_import_result:not(.success)", row_context).html(
'<span class="fa-stack" 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>');
$(".vcenter_import_result_row", row_context).show();
VCenterCommon.importLoading({context : row_context});
var network_size = $(".netsize", row_context).val();
var network_tmpl = $(this).data("import_data").one;
@ -391,24 +274,16 @@ define(function(require) {
timeout: true,
data: vnet_json,
success: function(request, response) {
$(".vcenter_import_result", row_context).addClass("success").html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x running-color"></i>' +
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Virtual Network created successfully") + '. ID: ' + response.VNET.ID);
VCenterCommon.importSuccess({
context : row_context,
message : Locale.tr("Virtual Network created successfully. ID: %1$s", response.VNET.ID)
});
},
error: function (request, error_json) {
$(".vcenter_import_result", row_context).html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x error-color"></i>' +
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
VCenterCommon.importFailure({
context : row_context,
message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))
});
}
});
});

98
src/sunstone/public/app/utils/vcenter/networks/row.hbs
View File

@ -13,52 +13,60 @@
{{! See the License for the specific language governing permissions and }}
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="accordion_advanced vcenter_row">
<div class="row">
<div class="large-12 columns">
<label class="inline">
<a href="#{{data.uuid}}Advanced" class="accordion_advanced_toggle"> <i class="fa fa-fw fa-chevron-down"/><i class="fa fa-fw fa-chevron-up"/>
</a>
{{data.name}}
- <i>{{data.type}}</i>
{{#if data.vlan}} - <i>VLAN: <span class="vlaninfo">{{data.vlan}}</span></i>{{/if}}
</label>
</div>
</div>
<div id="{{data.uuid}}Advanced" class="content row" hidden>
<div class="large-2 medium-3 small-6 columns">
<label>
{{tr "Size"}}
<input type="text" class="netsize" value="255"/>
</label>
</div>
<div class="large-2 medium-3 small-6 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="large-6 medium-12 small-12 columns end">
<div class="row net_options">
<div class="large-4 medium-3 small-12 columns end">
<label>
{{tr "MAC"}}
<input type="text" class="eth_mac_net" placeholder="{{tr "Optional"}}"/>
<tr>
<td>
<input type="checkbox" class="check_item"/>
</td>
<td>
<div class="accordion_advanced vcenter_row">
<div class="row">
<div class="large-12 columns">
<label class="inline">
<a href="#{{data.uuid}}Advanced" class="accordion_advanced_toggle"> <i class="fa fa-fw fa-chevron-down"/><i class="fa fa-fw fa-chevron-up"/>
</a>
{{data.name}}
- <i>{{data.type}}</i>
{{#if data.vlan}} - <i>VLAN: <span class="vlaninfo">{{data.vlan}}</span></i>{{/if}}
</label>
</div>
</div>
<div id="{{data.uuid}}Advanced" class="content row" hidden>
<div class="large-2 medium-3 small-6 columns">
<label>
{{tr "Size"}}
<input type="text" class="netsize" value="255"/>
</label>
</div>
<div class="large-2 medium-3 small-6 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="large-6 medium-12 small-12 columns end">
<div class="row net_options">
<div class="large-4 medium-3 small-12 columns end">
<label>
{{tr "MAC"}}
<input type="text" class="eth_mac_net" placeholder="{{tr "Optional"}}"/>
</label>
</div>
</div>
</div>
</div>
<div class="row vcenter_import_result_row" style="display:none">
<div class="large-11 large-centered columns">
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</div>
</div>
</div>
</div>
<div class="row vcenter_import_result_row" style="display:none">
<div class="large-11 large-centered columns">
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</div>
</div>
</div>
</td>
</tr>

191
src/sunstone/public/app/utils/vcenter/templates.js
View File

@ -23,16 +23,19 @@ define(function(require) {
var UserInputs = require('utils/user-inputs');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var VCenterCommon = require('./vcenter-common');
var TemplateHTML = require('hbs!./templates/html');
var TemplateHTML = require('hbs!./common/html');
var RowTemplate = require('hbs!./templates/row');
var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset');
var FieldsetTableHTML = require('hbs!./common/fieldset-table');
function VCenterTemplates() {
return this;
}
VCenterTemplates.prototype = {
'html': _html,
'html': VCenterCommon.html,
'insert': _fillVCenterTemplates,
'import': _import
};
@ -40,10 +43,6 @@ define(function(require) {
return VCenterTemplates;
function _html() {
return '<div class="vcenter_import" hidden></div>';
}
/*
Retrieve the list of templates from vCenter and fill the container with them
@ -79,69 +78,24 @@ define(function(require) {
$.each(response, function(datacenter_name, elements){
var content;
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li>' +
'<span>' +
Locale.tr("No new templates found in this DataCenter") +
'</span>' +
'</li>' +
'</ul>' +
'</legend>' +
'</fieldset>';
content = EmptyFieldsetHTML({
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
message : Locale.tr("No new templates found in this DataCenter")
});
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
'<ul class="menu simple">' +
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Templates") +
'</button>' +
'</li>' +
'</ul>' +
'</legend>' +
'<div class="row">' +
'<div class="large-12 columns text-center">' +
'<p>' +
'<span class="vcenter-table-header-text">' +
'</span> ' +
'<a class="vcenter-table-select-all">' +
'</a>' +
'<a class="vcenter-table-deselect-all">' +
Locale.tr("Clear selection") +
'</a>' +
'&emsp;|&emsp;<a class="vcenter-table-toggle-advanced">' +
Locale.tr("Toggle advanced sections") +
'</a>' +
'</p>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="large-12 columns">' +
'<table class="dataTable vcenter_import_table" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Template") + '</th>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
content = FieldsetTableHTML({
tableId : tableId,
title : datacenter_name + ' ' + Locale.tr("DataCenter"),
clearImported : Locale.tr("Clear Imported Templates"),
toggleAdvanced : true,
columns : [
'<input type="checkbox" class="check_all"/>',
Locale.tr("Template")
]
});
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
@ -158,11 +112,7 @@ define(function(require) {
opts.data = element;
var trow = $(
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>'+RowTemplate(opts)+'</td>' +
'</tr>').appendTo(tbody);
var trow = $(RowTemplate(opts)).appendTo(tbody);
$('.check_item', trow).data("import_data", element);
});
@ -188,41 +138,10 @@ define(function(require) {
$("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Templates", elements.length));
_recountCheckboxes($('table', newdiv));
newdiv.on("change", '.check_all', function() {
var table = $(this).closest('table');
if ($(this).is(":checked")) { //check all
$('tbody input.check_item', table).prop('checked', true).change();
} else { //uncheck all
$('tbody input.check_item', table).prop('checked', false).change();
}
});
$('table', newdiv).on('draw.dt', function() {
_recountCheckboxes(this);
});
$(newdiv).on('change', ".check_item", function() {
_recountCheckboxes($('table', newdiv));
});
$(".vcenter-table-select-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change();
});
$(".vcenter-table-deselect-all", newdiv).on("click", function(){
$("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change();
});
$(".vcenter-table-toggle-advanced", newdiv).on("click", function(){
var unactive_n = $(".accordion_advanced_toggle:not(.active)", newdiv).length;
if (unactive_n > 0){
$(".accordion_advanced_toggle:not(.active)", newdiv).click();
} else {
$(".accordion_advanced_toggle", newdiv).click();
}
VCenterCommon.setupTable({
context : newdiv,
allSelected : Locale.tr("All %1$s Networks selected."),
selected: Locale.tr("%1$s Networks selected.")
});
context.off('click', '.clear_imported');
@ -240,48 +159,12 @@ define(function(require) {
});
}
function _recountCheckboxes(table) {
// Counters for the whole table, all pages
var dt = $(table).DataTable();
var total = dt.$(".check_item").length;
var selected = dt.$(".check_item:checked").length;
if (selected == total){
$(".vcenter-table-header-text").text(Locale.tr("All %1$s Templates selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").hide();
$("a.vcenter-table-deselect-all").show();
} else if (selected == 0){
$(".vcenter-table-header-text").hide();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
} else {
$(".vcenter-table-header-text").text(Locale.tr("%1$s Templates selected.", selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
}
// Counters for the current visible page
var total_length = $('input.check_item', table).length;
var checked_length = $('input.check_item:checked', table).length;
$('.check_all', table).prop('checked', (total_length == checked_length));
}
function _import(context) {
$.each($(".vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".vcenter_import_result:not(.success)", row_context).html(
'<span class="fa-stack" 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>');
$(".vcenter_import_result_row", row_context).show();
VCenterCommon.importLoading({context : row_context});
var attrs = [];
var userInputs = [];
@ -349,24 +232,16 @@ define(function(require) {
timeout: true,
data: template_json,
success: function(request, response) {
$(".vcenter_import_result", row_context).addClass("success").html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x running-color"></i>' +
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Template created successfully") + '. ID: ' + response.VMTEMPLATE.ID);
VCenterCommon.importSuccess({
context : row_context,
message : Locale.tr("Template created successfully. ID: %1$s", response.VMTEMPLATE.ID)
});
},
error: function (request, error_json) {
$(".vcenter_import_result", row_context).html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x error-color"></i>' +
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
VCenterCommon.importFailure({
context : row_context,
message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))
});
}
});
});

148
src/sunstone/public/app/utils/vcenter/templates/row.hbs
View File

@ -13,78 +13,86 @@
{{! See the License for the specific language governing permissions and }}
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="accordion_advanced vcenter_row">
<div class="row">
<div class="large-12 columns">
<label class="inline">
<a href="#{{data.uuid}}Advanced" class="accordion_advanced_toggle"> <i class="fa fa-fw fa-chevron-down"/><i class="fa fa-fw fa-chevron-up"/>
</a>
{{data.name}}
</label>
</div>
</div>
<div class="row">
<div class="large-11 large-centered columns">
<div id="{{data.uuid}}Advanced" class="content" hidden>
{{#if datastore}}
<div class="vcenter_datastore_input row">
<div class="medium-3 columns">
<label>
{{tr "Default Datastore"}}
<input type="text" class="initial_datastore" value="{{datastore.initial}}"/>
</label>
</div>
<div class="medium-3 columns">
<label>
{{tr "Type"}}
<select class="modify_datastore">
<option value="fixed">{{tr "Fixed"}}</option>
<option value="list">{{tr "Provide on instantiation"}}</option>
</select>
</label>
</div>
<div class="medium-4 columns end">
<label>
{{tr "Available Datastores"}}
<input type="text" class="available_datastores" value="{{datastore.params}}"/>
</label>
<tr>
<td>
<input type="checkbox" class="check_item"/>
</td>
<td>
<div class="accordion_advanced vcenter_row">
<div class="row">
<div class="large-12 columns">
<label class="inline">
<a href="#{{data.uuid}}Advanced" class="accordion_advanced_toggle"> <i class="fa fa-fw fa-chevron-down"/><i class="fa fa-fw fa-chevron-up"/>
</a>
{{data.name}}
</label>
</div>
</div>
<div class="row">
<div class="large-11 large-centered columns">
<div id="{{data.uuid}}Advanced" class="content" hidden>
{{#if datastore}}
<div class="vcenter_datastore_input row">
<div class="medium-3 columns">
<label>
{{tr "Default Datastore"}}
<input type="text" class="initial_datastore" value="{{datastore.initial}}"/>
</label>
</div>
<div class="medium-3 columns">
<label>
{{tr "Type"}}
<select class="modify_datastore">
<option value="fixed">{{tr "Fixed"}}</option>
<option value="list">{{tr "Provide on instantiation"}}</option>
</select>
</label>
</div>
<div class="medium-4 columns end">
<label>
{{tr "Available Datastores"}}
<input type="text" class="available_datastores" value="{{datastore.params}}"/>
</label>
</div>
</div>
{{/if}}
{{#if resourcePool}}
<div class="vcenter_rp_input row">
<div class="medium-3 columns">
<label>
{{tr "Default Resource Pool"}}
<input type="text" class="initial_rp" value="{{resourcePool.initial}}"/>
</label>
</div>
<div class="medium-3 columns">
<label>
{{tr "Type"}}
<select class="modify_rp">
<option value="fixed">{{tr "Fixed"}}</option>
<option value="list">{{tr "Provide on instantiation"}}</option>
</select>
</label>
</div>
<div class="medium-4 columns end">
<label>
{{tr "Available Resource Pools"}}
<input type="text" class="available_rps" value="{{resourcePool.params}}"/>
</label>
</div>
</div>
{{/if}}
</div>
</div>
{{/if}}
{{#if resourcePool}}
<div class="vcenter_rp_input row">
<div class="medium-3 columns">
<label>
{{tr "Default Resource Pool"}}
<input type="text" class="initial_rp" value="{{resourcePool.initial}}"/>
</label>
</div>
<div class="medium-3 columns">
<label>
{{tr "Type"}}
<select class="modify_rp">
<option value="fixed">{{tr "Fixed"}}</option>
<option value="list">{{tr "Provide on instantiation"}}</option>
</select>
</label>
</div>
<div class="medium-4 columns end">
<label>
{{tr "Available Resource Pools"}}
<input type="text" class="available_rps" value="{{resourcePool.params}}"/>
</label>
</div>
</div>
<div class="row vcenter_import_result_row" style="display:none">
<div class="large-11 large-centered columns">
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</div>
{{/if}}
</div>
</div>
</div>
<div class="row vcenter_import_result_row" style="display:none">
<div class="large-11 large-centered columns">
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</div>
</div>
</div>
</td>
</tr>

134
src/sunstone/public/app/utils/vcenter/vcenter-common.js Normal file
View File

@ -0,0 +1,134 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require) {
var sprintf = require("sprintf").sprintf
function _html() {
return '<div class="vcenter_import"></div>';
}
function _setupTable(opts){
var table = $("table.vcenter_import_table", opts.context);
opts.table = table;
_recountCheckboxes(opts);
opts.table.on("change", '.check_all', function() {
if ($(this).is(":checked")) { //check all
$('tbody input.check_item', opts.table).prop('checked', true).change();
} else { //uncheck all
$('tbody input.check_item', opts.table).prop('checked', false).change();
}
});
opts.table.on('draw.dt', function() {
_recountCheckboxes(opts);
});
opts.table.on('change', ".check_item", function() {
_recountCheckboxes(opts);
});
$(".vcenter-table-select-all", opts.context).on("click", function(){
table.DataTable().$(".check_item").prop("checked", true).change();
});
$(".vcenter-table-deselect-all", opts.context).on("click", function(){
table.DataTable().$(".check_item").prop("checked", false).change();
});
$(".vcenter-table-toggle-advanced", opts.context).on("click", function(){
var unactive_n = $(".accordion_advanced_toggle:not(.active)", opts.context).length;
if (unactive_n > 0){
$(".accordion_advanced_toggle:not(.active)", opts.context).click();
} else {
$(".accordion_advanced_toggle", opts.context).click();
}
});
}
function _recountCheckboxes(opts) {
// Counters for the whole table, all pages
var dt = $(opts.table).DataTable();
var total = dt.$(".check_item").length;
var selected = dt.$(".check_item:checked").length;
if (selected == total){
$(".vcenter-table-header-text").text(sprintf(opts.allSelected, selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").hide();
$("a.vcenter-table-deselect-all").show();
} else if (selected == 0){
$(".vcenter-table-header-text").hide();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
} else {
$(".vcenter-table-header-text").text(sprintf(opts.selected, selected));
$(".vcenter-table-header-text").show();
$("a.vcenter-table-select-all").show();
$("a.vcenter-table-deselect-all").hide();
}
// Counters for the current visible page
var total_length = $('input.check_item', opts.table).length;
var checked_length = $('input.check_item:checked', opts.table).length;
$('.check_all', opts.table).prop('checked', (total_length == checked_length));
}
function _importLoading(opts) {
$(".vcenter_import_result:not(.success)", opts.context).html(
'<span class="fa-stack" 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>');
$(".vcenter_import_result_row", opts.context).show();
}
function _importSuccess(opts) {
$(".vcenter_import_result", opts.context).addClass("success").html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x running-color"></i>' +
'<i class="fa fa-check fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", opts.context).html(opts.message);
}
function _importFailure(opts) {
$(".vcenter_import_result", opts.context).html(
'<span class="fa-stack" style="color: #dfdfdf">' +
'<i class="fa fa-cloud fa-stack-2x error-color"></i>' +
'<i class="fa fa-warning fa-stack-1x fa-inverse"></i>' +
'</span>');
$(".vcenter_import_response", opts.context).addClass("error-color").html(
opts.message);
}
return {
'html': _html,
'setupTable': _setupTable,
'importLoading': _importLoading,
'importSuccess': _importSuccess,
'importFailure': _importFailure
};
});

5
src/sunstone/routes/vcenter.rb
View File

@ -96,8 +96,9 @@ end
get '/vcenter/networks' do
begin
networks = vcenter_client.vcenter_networks(
$cloud_auth.client(session[:user], session[:active_zone_endpoint]))
networks = YAML.load_file('/home/cmartin/trabajo/opennebula/one/test/vcenter-networks.yaml')
#networks = vcenter_client.vcenter_networks(
# $cloud_auth.client(session[:user], session[:active_zone_endpoint]))
if networks.nil?
msg = "No datacenter found"
logger.error("[vCenter] " + msg)

2
src/vmm_mad/remotes/vcenter/vcenter_driver.rb
View File

@ -559,6 +559,8 @@ class VIClient
vcenter_networks[dc.name] = one_nets
}
File.open("/tmp/vcenter.txt", "w"){|f| f.puts vcenter_networks.to_yaml }
return vcenter_networks
end