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: Improve usability for vcenter import tables

Browse Source
This commit is contained in:
Carlos Martín 2016-09-08 16:31:49 +02:00
parent a34fd0599e
commit 8ac2871f64
11 changed files with 716 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/sunstone/public/app/utils/custom-layout-table.js
View File

@ -1,92 +0,0 @@
/* -------------------------------------------------------------------------- */
/* 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) {
/*
DEPENDENCIES
*/
require('datatables.net');
require('datatables.foundation');
/*
CONSTRUCTOR
*/
/**
* Create a new table with custom layout for each row
* @param {Object} opts - Options
* @param {string} opts.tableId - Unique identifier for the table
* @param {Array} opts.columns - List of properties that will be selected from the JSON data.
* Properties that need to be filtered or ordered must be included
* in this list.
* @param {Object} opts.preDrawCallback
* @param {Object} opts.rowCallback
*/
function Table(opts) {
// Initialize
this.table = $(opts.tableId).DataTable({
columns: _generateDataTableColumns(opts.columns),
preDrawCallback: opts.preDrawCallback,
rowCallback: opts.rowCallback
});
var tableContext = $(opts.tableId).closest('fieldset');
tableContext.on("change", '.check_all', function() {
if ($(this).is(":checked")) { //check all
$('.check_item', tableContext).prop('checked', true).change();
} else { //uncheck all
$('.check_item', tableContext).prop('checked', false).change();
}
});
tableContext.on("change", '.expand_all', function() {
if ($(this).is(":checked")) { //check all
$('.accordion_advanced_toggle:not(.active)', tableContext).click();
} else { //uncheck all
$('.accordion_advanced_toggle.active', tableContext).click();
}
});
}
Table.prototype.addData = _addData;
return Table;
/**
* Add data to the table, the rows will be generated
* @param {Array} data - Array with the information for each row
*/
function _addData(data) {
this.table.rows.add(data).draw();
}
/**
* Generate the datatable columns from the properties array
* @param {Array} columns - List of properties
* @returns {Array} Datatable columns
*/
function _generateDataTableColumns(columns) {
var dtColumns = [];
var arrayLength = columns.length;
for (var i = 0; i < arrayLength; i++) {
dtColumns.push({"data": columns[i]})
}
return dtColumns
}
});

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

@ -20,6 +20,7 @@ define(function(require) {
var Sunstone = require('sunstone');
var OpenNebulaHost = require('opennebula/host');
var OpenNebulaError = require('opennebula/error');
var DomDataTable = require('utils/dom-datatable');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
@ -39,7 +40,7 @@ define(function(require) {
return VCenterClusters;
function _html() {
return '<div class="vcenter_clusters" hidden></div>';
return '<div class="vcenter_import" hidden></div>';
}
/*
@ -56,7 +57,7 @@ define(function(require) {
var path = '/vcenter';
var context = $(".vcenter_clusters", opts.container);
var context = $(".vcenter_import", opts.container);
context.html( TemplateHTML({}) );
context.show();
@ -73,9 +74,9 @@ define(function(require) {
success: function(response){
$(".vcenter_datacenter_list", context).html("");
$.each(response, function(datacenter_name, clusters) {
$.each(response, function(datacenter_name, elements) {
var content;
if (clusters.length == 0) {
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
@ -94,7 +95,7 @@ define(function(require) {
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_cluster_table_" + UniqueId.id();
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
@ -104,39 +105,106 @@ define(function(require) {
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Datastores") +
Locale.tr("Clear Imported DataCenters") +
'</button>' +
'</li>' +
'</ul>' +
'</legend>' +
'<div class="row">' +
'<div class="large-12 columns" id="' + tableId + '">' +
'<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>';
'</fieldset>';
$(".vcenter_datacenter_list", context).append(content);
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
var tableDiv = $('#' + tableId, 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);
$.each(clusters, function(id, cluster_name) {
var row = $('<div class="vcenter_cluster">' +
'<div class="row">' +
'<div class="large-10 columns">' +
'<label>' +
'<input type="checkbox" class="cluster_name"/> ' +
cluster_name +
'</label>' +
'<div class="large-12 columns vcenter_host_response">' +
'</div>' +
'</div>' +
'<div class="large-2 columns vcenter_host_result">' +
'</div>' +
'</div>' +
'</div>').appendTo(tableDiv);
$(".check_item", trow).data("cluster_name", cluster_name);
});
$(".cluster_name", row).data("cluster_name", cluster_name);
//$(".cluster_name", row).data("datacenter_name", datacenter_name);
var elementsTable = new DomDataTable(
tableId,
{
actions: false,
info: false,
dataTableOptions: {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": false,
//"ordering": false,
"aoColumnDefs": [
{"sWidth": "35px", "aTargets": [0]},
{"bSortable": false, "aTargets": [0,2]},
{"bSortable": true, "aTargets": [1]},
],
}
});
elementsTable.initialize();
$("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();
});
context.off('click', '.clear_imported');
@ -158,57 +226,90 @@ 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;
$.each($(".cluster_name:checked", context), function() {
var cluster_context = $(this).closest(".vcenter_cluster");
$(".vcenter_host_result:not(.success)", cluster_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
$.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>');
var host_json = {
"host": {
"name": $(this).data("cluster_name"),
"vm_mad": "vcenter",
"vnm_mad": "dummy",
"im_mad": "vcenter",
"cluster_id": cluster_id
}
};
var host_json = {
"host": {
"name": $(this).data("cluster_name"),
"vm_mad": "vcenter",
"vnm_mad": "dummy",
"im_mad": "vcenter",
"cluster_id": cluster_id
}
};
OpenNebulaHost.create({
timeout: true,
data: host_json,
success: function(request, response) {
$(".vcenter_host_result", cluster_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>' +
OpenNebulaHost.create({
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_host_response", cluster_context).html('<p style="font-size:12px" class="running-color">' +
Locale.tr("Host created successfully") + ' ID:' + response.HOST.ID +
'</p>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Host created successfully") + '. ID: ' + response.HOST.ID);
var template_raw =
"VCENTER_USER=\"" + that.opts.vcenter_user + "\"\n" +
"VCENTER_PASSWORD=\"" + that.opts.vcenter_password + "\"\n" +
"VCENTER_HOST=\"" + that.opts.vcenter_host + "\"\n";
var template_raw =
"VCENTER_USER=\"" + that.opts.vcenter_user + "\"\n" +
"VCENTER_PASSWORD=\"" + that.opts.vcenter_password + "\"\n" +
"VCENTER_HOST=\"" + that.opts.vcenter_host + "\"\n";
Sunstone.runAction("Host.update_template", response.HOST.ID, template_raw);
},
error: function (request, error_json) {
$(".vcenter_host_result", cluster_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>' +
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_host_response", cluster_context).html('<p style="font-size:12px" class="error-color">' +
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
'</p>');
}
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
}
});
});
});
}

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

@ -39,7 +39,7 @@ define(function(require) {
return VCenterDatastores;
function _html() {
return '<div class="vcenter_datastores hidden"></div>';
return '<div class="vcenter_import hidden"></div>';
}
/*
@ -57,14 +57,12 @@ define(function(require) {
function _fillVCenterDatastores(opts) {
var path = '/vcenter/datastores';
var context = $(".vcenter_datastores", opts.container);
var context = $(".vcenter_import", opts.container);
context.html( TemplateHTML({}) );
context.show();
$(".accordion_advanced_toggle", context).trigger("click");
$.ajax({
url: path,
type: "GET",
@ -78,9 +76,9 @@ define(function(require) {
success: function(response){
$(".vcenter_datacenter_list", context).html("");
$.each(response, function(datacenter_name, datastores){
$.each(response, function(datacenter_name, elements){
var content;
if (datastores.length == 0) {
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
@ -99,7 +97,7 @@ define(function(require) {
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_datastore_table" + UniqueId.id();
var tableId = "vcenter_import_table" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
@ -114,9 +112,22 @@ define(function(require) {
'</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_datastore_table" id="' + tableId + '">' +
'<table class="dataTable vcenter_import_table hover" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
@ -124,7 +135,6 @@ define(function(require) {
'<th>' + Locale.tr("Name") + '</th>' +
'<th>' + Locale.tr("Datacenter") + '</th>' +
'<th/>' +
'<th/>' +
'</thead>' +
'<tbody/>' +
'</table>' +
@ -135,21 +145,24 @@ define(function(require) {
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
$.each(datastores, function(id, datastore){
$.each(elements, function(id, element){
var trow = $(
'<tr class="vcenter_datastore">' +
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>' + datastore.name + '</td>' +
'<td>' + datastore.cluster + '</td>' +
'<td><div class="vcenter_datastore_response"/></td>' +
'<td><div class="vcenter_datastore_result"/></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);
$(".check_item", trow).data("datastore_name", datastore.name)
$(".check_item", trow).data("one_template", datastore.one)
$(".check_item", trow).data("one_template", element.one)
});
var tmplDataTable = new DomDataTable(
var elementsTable = new DomDataTable(
tableId,
{
actions: false,
@ -161,17 +174,18 @@ define(function(require) {
//"ordering": true,
"order": [],
"aoColumnDefs": [
{"bSortable": false, "aTargets": [0]},
{"bSortable": false, "aTargets": [0,3]},
{"bSortable": true, "aTargets": [1,2]},
{"sWidth": "35px", "aTargets": [0]},
]
},
customTrListener: function(tableObj, tr){
$("input.check_item", tr).click();
}
});
tmplDataTable.initialize();
elementsTable.initialize();
$("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');
@ -186,10 +200,18 @@ define(function(require) {
_recountCheckboxes(this);
});
$(".check_item", newdiv).on('change', function(){
$(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();
});
context.off('click', '.clear_imported');
context.on('click', '.clear_imported', function() {
_fillVCenterDatastores(opts);
@ -206,17 +228,41 @@ 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_datastore_table", context), function() {
$.each($("table.vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var datastore_context = $(this).closest(".vcenter_datastore");
var row_context = $(this).closest("tr");
$(".vcenter_datastore_result:not(.success)", datastore_context).html(
$(".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>' +
@ -233,25 +279,24 @@ define(function(require) {
timeout: true,
data: datastore_json,
success: function(request, response) {
$(".vcenter_datastore_result", datastore_context).addClass("success").html(
'<span class="fa-stack" 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_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_datastore_result", datastore_context).html('<p style="font-size:12px" class="running-color">' +
Locale.tr("Datastore created successfully") + ' ID:' + response.DATASTORE.ID +
'</p>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Datastore created successfully") + '. ID: ' + response.DATASTORE.ID);
},
error: function (request, error_json) {
$(".vcenter_datastore_result", datastore_context).html('<span class="fa-stack" 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_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_datastore_result", datastore_context).html('<p style="font-size:12px" class="error-color">' +
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
'</p>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
}
});
});

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

@ -22,6 +22,7 @@ define(function(require) {
var DomDataTable = require('utils/dom-datatable');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var Humanize = require('utils/humanize');
var TemplateHTML = require('hbs!./images/html');
@ -39,7 +40,7 @@ define(function(require) {
return VCenterImages;
function _html() {
return '<div class="vcenter_images hidden"></div>';
return '<div class="vcenter_import hidden"></div>';
}
/*
@ -59,7 +60,7 @@ define(function(require) {
function _fillVCenterImages(opts) {
var path = '/vcenter/images/' + opts.vcenter_datastore;
var context = $(".vcenter_images", opts.container);
var context = $(".vcenter_import", opts.container);
context.html(TemplateHTML({}));
context.show();
@ -75,7 +76,7 @@ define(function(require) {
},
success: function(response) {
$(".vcenter_datacenter_list", context).html("");
var content;
if (response.length == 0) {
content =
'<fieldset>' +
@ -95,7 +96,7 @@ define(function(require) {
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_image_table_" + UniqueId.id();
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
@ -110,9 +111,22 @@ define(function(require) {
'</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_image_table" id="' + tableId + '">' +
'<table class="dataTable vcenter_import_table hover" id="' + tableId + '">' +
'<thead>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
@ -120,33 +134,35 @@ define(function(require) {
'<th>' + Locale.tr("Name") + '</th>' +
'<th>' + Locale.tr("Size") + '</th>' +
'<th/>' +
'<th/>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
'</fieldset>';
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
$.each(response, function(id, image) {
$.each(response, function(id, element) {
var trow = $(
'<tr class="vcenter_image">' +
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>' + image.name + '</td>' +
'<td>' + image.size + ' MB</td>' +
'<td><div class="vcenter_image_response"/></td>' +
'<td><div class="vcenter_image_result"/></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);
$(".check_item", trow).data("datastore_id", image.dsid)
$(".check_item", trow).data("one_template", image.one)
$(".check_item", trow).data("datastore_id", element.dsid);
$(".check_item", trow).data("one_template", element.one);
});
var imageDataTable = new DomDataTable(
var elementsTable = new DomDataTable(
tableId,
{
actions: false,
@ -155,13 +171,20 @@ define(function(require) {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": false,
"ordering": false,
//"ordering": false,
"aoColumnDefs": [
{"bSortable": false, "aTargets": [0,2,3]},
{"bSortable": true, "aTargets": [1]},
{"sWidth": "35px", "aTargets": [0]},
]
}
});
imageDataTable.initialize();
elementsTable.initialize();
$("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');
@ -176,10 +199,18 @@ define(function(require) {
_recountCheckboxes(this);
});
$(".check_item", newdiv).on('change', function() {
$(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();
});
context.off('click', '.clear_imported');
context.on('click', '.clear_imported', function() {
_fillVCenterImages(opts);
@ -195,17 +226,41 @@ 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_image_table", context), function() {
$.each($("table.vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var image_context = $(this).closest(".vcenter_image");
var row_context = $(this).closest("tr");
$(".vcenter_image_result:not(.success)", image_context).html(
$(".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>' +
@ -222,32 +277,31 @@ define(function(require) {
timeout: true,
data: image_json,
success: function(request, response) {
$(".vcenter_image_result", image_context).addClass("success").html(
'<span class="fa-stack" 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_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_image_result", image_context).html('<p style="font-size:12px" class="running-color">' +
Locale.tr("Image created successfully") + ' ID:' + response.IMAGE.ID +
'</p>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Image created successfully") + '. ID: ' + response.IMAGE.ID);
},
error: function (request, error_json) {
$(".vcenter_image_result", image_context).html('<span class="fa-stack" 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_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>');
error_message_str = error_json.error.message
var error_message_str = error_json.error.message
if(error_message_str=="[ImageAllocate] Not enough space in datastore")
{
error_message_str = error_message_str + ". Please disable DATASTORE_CAPACITY_CHECK in /etc/one/oned.conf and restart OpenNebula "
if(error_message_str=="[ImageAllocate] Not enough space in datastore"){
error_message_str = error_message_str + ". "+
Locale.tr("Please disable DATASTORE_CAPACITY_CHECK in /etc/one/oned.conf and restart OpenNebula");
}
$(".vcenter_image_result", image_context).html('<p style="font-size:12px" class="error-color">' +
(error_message_str || Locale.tr("Cannot contact server: is it running and reachable?")) +
'</p>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_message_str || Locale.tr("Cannot contact server: is it running and reachable?")));
}
});
});

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

@ -20,12 +20,10 @@ define(function(require) {
var OpenNebulaNetwork = require('opennebula/network');
var OpenNebulaError = require('opennebula/error');
var DomDataTable = require('utils/dom-datatable');
var CustomLayoutDataTable = require('utils/custom-layout-table');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var TemplateHTML = require('hbs!./networks/html');
var EmptyTableTemplate = require('hbs!./networks/empty-table');
var RowTemplate = require('hbs!./networks/row');
function VCenterNetworks() {
@ -42,7 +40,7 @@ define(function(require) {
return VCenterNetworks;
function _html() {
return '<div class="vcenter_networks" hidden></div>';
return '<div class="vcenter_import" hidden></div>';
}
/*
@ -60,7 +58,7 @@ define(function(require) {
function _fillVCenterNetworks(opts) {
var path = '/vcenter/networks';
var context = $(".vcenter_networks", opts.container);
var context = $(".vcenter_import", opts.container);
context.html(TemplateHTML());
context.show();
@ -77,9 +75,9 @@ define(function(require) {
success: function(response) {
$(".vcenter_datacenter_list", context).html("");
$.each(response, function(datacenter_name, networks) {
$.each(response, function(datacenter_name, elements) {
var content;
if (networks.length == 0) {
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
@ -98,7 +96,7 @@ define(function(require) {
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_network_table_" + UniqueId.id();
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
@ -106,18 +104,6 @@ define(function(require) {
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li> ' +
'<label class="inline">' +
'<input type="checkbox" class="check_all"/>' +
Locale.tr("Select All") +
'</label>' +
'</li>' +
'<li> ' +
'<label class="inline">' +
'<input type="checkbox" class="expand_all"/>' +
Locale.tr("Expand Advanced Sections") +
'</label>' +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Networks") +
@ -125,41 +111,108 @@ define(function(require) {
'</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_network_table" id="' + tableId + '">' +
'<table class="dataTable vcenter_import_table" id="' + tableId + '">' +
'<thead>' +
'<th>' + Locale.tr("Name") + '</th>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Network") + '</th>' +
'</thead>' +
'<tbody/>' +
'</table>' +
'</div>' +
'</div>';
'</fieldset>';
'</fieldset>';
$(".vcenter_datacenter_list", context).append(content);
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
var preDrawCallback = function (settings) {
$('#' + tableId).html(EmptyTableTemplate());
}
var rowCallback = function(row, data, index) {
opts.data = data;
$.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 networkRow = $(RowTemplate(opts)).appendTo($('#' + tableId));
$('.check_item', networkRow).data("network_name", data.name)
$('.check_item', networkRow).data("one_network", data.one);
$('.check_item', trow).data("import_data", element);
});
return row;
}
var networksTable = new CustomLayoutDataTable({
tableId: '#' + tableId,
columns: ['name'],
preDrawCallback: preDrawCallback,
rowCallback: rowCallback
var elementsTable = new DomDataTable(
tableId,
{
actions: false,
info: false,
dataTableOptions: {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": false,
"ordering": false,
"aoColumnDefs": [
{"sWidth": "35px", "aTargets": [0]},
],
},
"customTrListener": function(tableObj, tr){ return false; }
});
networksTable.addData(networks);
elementsTable.initialize();
$("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();
}
});
context.off('click', '.clear_imported');
context.on('click', '.clear_imported', function() {
@ -169,7 +222,7 @@ define(function(require) {
context.off('change', '.type_select');
context.on("change", '.type_select', function() {
var network_context = $(this).closest(".vcenter_row");
var row_context = $(this).closest(".vcenter_row");
var type = $(this).val();
var net_form_str = ''
@ -203,7 +256,7 @@ define(function(require) {
'<input type="text" class="six_global_net" placeholder="' + Locale.tr("Optional") + '"/>' +
'</label>' +
'</div>' +
'<div class="large-4 medium-6 columns end">' +
'<div class="large-4 medium-6 columns">' +
'<label>' + Locale.tr("MAC") +
'<input type="text" class="eth_mac_net"/>' +
'</label>' +
@ -216,7 +269,7 @@ define(function(require) {
break;
}
$('.net_options', network_context).html(net_form_str);
$('.net_options', row_context).html(net_form_str);
});
}
});
@ -228,20 +281,52 @@ 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_network_table", context), function() {
$.each($(".check_item:checked", this), function() {
var network_context = $(this).closest(".vcenter_row");
$.each($(".vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".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>');
$(".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>');
var network_size = $(".netsize", network_context).val();
var network_tmpl = $(this).data("one_network");
var type = $('.type_select', network_context).val();
$(".vcenter_import_result_row", row_context).show();
var network_size = $(".netsize", row_context).val();
var network_tmpl = $(this).data("import_data").one;
var type = $('.type_select', row_context).val();
var ar_array = [];
ar_array.push("TYPE=" + type);
@ -249,7 +334,7 @@ define(function(require) {
switch (type) {
case 'ETHER':
var mac = $('.eth_mac_net', network_context).val();
var mac = $('.eth_mac_net', row_context).val();
if (mac) {
ar_array.push("MAC=" + mac);
@ -257,8 +342,8 @@ define(function(require) {
break;
case 'IP4':
var mac = $('.four_mac_net', network_context).val();
var ip = $('.four_ip_net', network_context).val();
var mac = $('.four_mac_net', row_context).val();
var ip = $('.four_ip_net', row_context).val();
if (mac) {
ar_array.push("MAC=" + mac);
@ -269,9 +354,9 @@ define(function(require) {
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();
var mac = $('.six_mac_net', row_context).val();
var gp = $('.six_global_net', row_context).val();
var ula = $('.six_mac_net', row_context).val();
if (mac) {
ar_array.push("MAC=" + mac);
@ -290,7 +375,7 @@ define(function(require) {
network_tmpl += ar_array.join(",\n")
network_tmpl += "]"
var vlaninfo = $(".vlaninfo", network_context).text();
var vlaninfo = $(".vlaninfo", row_context).text();
if ( vlaninfo != undefined && vlaninfo != "" ) {
network_tmpl += "\nVLAN_ID=" + vlaninfo + "\n";
@ -306,25 +391,24 @@ define(function(require) {
timeout: true,
data: vnet_json,
success: function(request, response) {
$(".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_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_network_response", network_context).html('<p style="font-size:12px" class="running-color">' +
Locale.tr("Virtual Network created successfully") + ' ID:' + response.VNET.ID +
'</p>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Virtual Network created successfully") + '. ID: ' + response.VNET.ID);
},
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_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_network_response", network_context).html('<p style="font-size:12px" class="error-color">' +
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
'</p>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
}
});
});

20
src/sunstone/public/app/utils/vcenter/networks/empty-table.hbs
View File

@ -1,20 +0,0 @@
{{! -------------------------------------------------------------------------- }}
{{! 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. }}
{{! -------------------------------------------------------------------------- }}
<div class="row">
<div class="large-12 columns">
</div>
</div>

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

@ -16,58 +16,49 @@
<div class="accordion_advanced vcenter_row">
<div class="row">
<div class="large-12 columns">
<ul class="menu simple">
<li>
<label class="inline">
<input type="checkbox" class="check_item"/>
<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>
</li>
</ul>
<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 class="row">
<div class="large-11 large-centered columns">
<div id="{{data.uuid}}Advanced" class="content" hidden>
<div class="row">
<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-8 medium-6 small-12 columns net_options">
<div class="large-4 medium-6 columns end">
<label>
{{tr "MAC"}}
<input type="text" class="eth_mac_net" placeholder="{{tr "Optional"}}"/>
</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">
<div class="row vcenter_import_result_row" style="display:none">
<div class="large-11 large-centered columns">
<div class="large-1 columns vcenter_network_result">
</div>
<div class="large-11 columns vcenter_network_response">
</div>
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</div>
</div>
</div>

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

@ -20,13 +20,11 @@ define(function(require) {
var OpenNebulaTemplate = require('opennebula/template');
var OpenNebulaError = require('opennebula/error');
var DomDataTable = require('utils/dom-datatable');
var CustomLayoutDataTable = require('utils/custom-layout-table');
var UserInputs = require('utils/user-inputs');
var Notifier = require('utils/notifier');
var UniqueId = require('utils/unique-id');
var TemplateHTML = require('hbs!./templates/html');
var EmptyTableTemplate = require('hbs!./templates/empty-table');
var RowTemplate = require('hbs!./templates/row');
function VCenterTemplates() {
@ -43,7 +41,7 @@ define(function(require) {
return VCenterTemplates;
function _html() {
return '<div class="vcenter_templates" hidden></div>';
return '<div class="vcenter_import" hidden></div>';
}
/*
@ -61,7 +59,7 @@ define(function(require) {
function _fillVCenterTemplates(opts) {
var path = '/vcenter/templates';
var context = $(".vcenter_templates", opts.container);
var context = $(".vcenter_import", opts.container);
context.html(TemplateHTML());
context.show();
@ -78,9 +76,9 @@ define(function(require) {
success: function(response){
$(".vcenter_datacenter_list", context).html("");
$.each(response, function(datacenter_name, templates){
$.each(response, function(datacenter_name, elements){
var content;
if (templates.length == 0) {
if (elements.length == 0) {
content =
'<fieldset>' +
'<legend>' +
@ -99,7 +97,7 @@ define(function(require) {
$(".vcenter_datacenter_list", context).append(content);
} else {
var tableId = "vcenter_template_table_" + UniqueId.id();
var tableId = "vcenter_import_table_" + UniqueId.id();
content =
'<fieldset>' +
'<legend>' +
@ -107,18 +105,6 @@ define(function(require) {
'<li> ' +
datacenter_name + ' ' + Locale.tr("DataCenter") +
'</li>' +
'<li> ' +
'<label class="inline">' +
'<input type="checkbox" class="check_all"/>' +
Locale.tr("Select All") +
'</label>' +
'</li>' +
'<li> ' +
'<label class="inline">' +
'<input type="checkbox" class="expand_all"/>' +
Locale.tr("Expand Advanced Sections") +
'</label>' +
'</li>' +
'<li> ' +
'<button class="button small secondary clear_imported">' +
Locale.tr("Clear Imported Templates") +
@ -126,11 +112,30 @@ define(function(require) {
'</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_template_table" id="' + tableId + '">' +
'<table class="dataTable vcenter_import_table" id="' + tableId + '">' +
'<thead>' +
'<th>' + Locale.tr("Name") + '</th>' +
'<th class="check">' +
'<input type="checkbox" class="check_all"/>' +
'</th>' +
'<th>' + Locale.tr("Template") + '</th>' +
'</thead>' +
'<tbody/>' +
'</table>' +
@ -138,38 +143,87 @@ define(function(require) {
'</div>';
'</fieldset>';
$(".vcenter_datacenter_list", context).append(content);
var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context));
var tbody = $('#' + tableId + ' tbody', context);
var preDrawCallback = function (settings) {
$('#' + tableId).html(EmptyTableTemplate());
}
var rowCallback = function(row, data, index) {
var opts = {};
if (data.ds && data.ds !== '') {
opts.datastore = UserInputs.unmarshall(data.ds);
}
if (data.rp && data.rp !== '') {
opts.resourcePool = UserInputs.unmarshall(data.rp);
}
opts.data = data;
var templateRow = $(RowTemplate(opts)).appendTo($('#' + tableId));
$('.check_item', templateRow).data("template_name", data.name)
$('.check_item', templateRow).data("one_template", data.one);
return row;
$.each(elements, function(id, element) {
var opts = {};
if (element.ds && element.ds !== '') {
opts.datastore = UserInputs.unmarshall(element.ds);
}
var templatesTable = new CustomLayoutDataTable({
tableId: '#' + tableId,
columns: ['name'],
preDrawCallback: preDrawCallback,
rowCallback: rowCallback
if (element.rp && element.rp !== '') {
opts.resourcePool = UserInputs.unmarshall(element.rp);
}
opts.data = element;
var trow = $(
'<tr>' +
'<td><input type="checkbox" class="check_item"/></td>' +
'<td>'+RowTemplate(opts)+'</td>' +
'</tr>').appendTo(tbody);
$('.check_item', trow).data("import_data", element);
});
var elementsTable = new DomDataTable(
tableId,
{
actions: false,
info: false,
dataTableOptions: {
"bAutoWidth": false,
"bSortClasses" : false,
"bDeferRender": false,
"ordering": false,
"aoColumnDefs": [
{"sWidth": "35px", "aTargets": [0]},
],
},
"customTrListener": function(tableObj, tr){ return false; }
});
templatesTable.addData(templates);
elementsTable.initialize();
$("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();
}
});
context.off('click', '.clear_imported');
context.on('click', '.clear_imported', function() {
@ -187,28 +241,53 @@ 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_template_table", context), function() {
$.each($(".check_item:checked", this), function() {
var template_context = $(this).closest(".vcenter_row");
$.each($(".vcenter_import_table", context), function() {
$.each($(this).DataTable().$(".check_item:checked"), function() {
var row_context = $(this).closest("tr");
$(".vcenter_template_result:not(.success)", template_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: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();
var attrs = [];
var userInputs = [];
// Retrieve Datastore Attribute
var dsInput = $(".vcenter_datastore_input", template_context);
var dsInput = $(".vcenter_datastore_input", row_context);
if (dsInput.length > 0) {
var dsModify = $('.modify_datastore', dsInput).val();
var dsInitial = $('.initial_datastore', dsInput).val();
@ -229,7 +308,7 @@ define(function(require) {
}
// Retrieve Resource Pool Attribute
var rpInput = $(".vcenter_rp_input", template_context);
var rpInput = $(".vcenter_rp_input", row_context);
if (rpInput.length > 0) {
var rpModify = $('.modify_rp', rpInput).val();
var rpInitial = $('.initial_rp', rpInput).val();
@ -250,7 +329,7 @@ define(function(require) {
}
// Append new attrs and user inputs if necessary
var template = $(this).data("one_template");
var template = $(this).data("import_data").one;
if (attrs.length > 0) {
template += "\n" + attrs.join("\n");
@ -270,25 +349,24 @@ define(function(require) {
timeout: true,
data: template_json,
success: function(request, response) {
$(".vcenter_template_result", template_context).addClass("success").html(
'<span class="fa-stack" 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_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_template_response", template_context).html('<p style="font-size:12px" class="running-color">' +
Locale.tr("Template created successfully") + ' ID:' + response.VMTEMPLATE.ID +
'</p>');
$(".vcenter_import_response", row_context).html(
Locale.tr("Template created successfully") + '. ID: ' + response.VMTEMPLATE.ID);
},
error: function (request, error_json) {
$(".vcenter_template_result", template_context).html('<span class="fa-stack" 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_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_template_response", template_context).html('<p style="font-size:12px" class="error-color">' +
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
'</p>');
$(".vcenter_import_response", row_context).addClass("error-color").html(
(error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")));
}
});
});

20
src/sunstone/public/app/utils/vcenter/templates/empty-table.hbs
View File

@ -1,20 +0,0 @@
{{! -------------------------------------------------------------------------- }}
{{! 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. }}
{{! -------------------------------------------------------------------------- }}
<div class="row">
<div class="large-12 columns">
</div>
</div>

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

@ -16,16 +16,11 @@
<div class="accordion_advanced vcenter_row">
<div class="row">
<div class="large-12 columns">
<ul class="menu simple">
<li>
<label class="inline">
<input type="checkbox" class="check_item"/>
<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>
</li>
</ul>
<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">
@ -33,13 +28,13 @@
<div id="{{data.uuid}}Advanced" class="content" hidden>
{{#if datastore}}
<div class="vcenter_datastore_input row">
<div class="large-3 medium-6 columns">
<div class="medium-3 columns">
<label>
{{tr "Default Datastore"}}
<input type="text" class="initial_datastore" value="{{datastore.initial}}"/>
</label>
</div>
<div class="large-3 medium-6 columns">
<div class="medium-3 columns">
<label>
{{tr "Type"}}
<select class="modify_datastore">
@ -48,7 +43,7 @@
</select>
</label>
</div>
<div class="large-6 medium-12 columns">
<div class="medium-4 columns end">
<label>
{{tr "Available Datastores"}}
<input type="text" class="available_datastores" value="{{datastore.params}}"/>
@ -56,15 +51,15 @@
</div>
</div>
{{/if}}
{{#if resourcePool}}
{{#if resourcePool}}
<div class="vcenter_rp_input row">
<div class="large-3 medium-6 columns">
<div class="medium-3 columns">
<label>
{{tr "Default Resource Pool"}}
<input type="text" class="initial_rp" value="{{resourcePool.initial}}"/>
</label>
</div>
<div class="large-3 medium-6 columns">
<div class="medium-3 columns">
<label>
{{tr "Type"}}
<select class="modify_rp">
@ -73,7 +68,7 @@
</select>
</label>
</div>
<div class="large-6 medium-12 columns">
<div class="medium-4 columns end">
<label>
{{tr "Available Resource Pools"}}
<input type="text" class="available_rps" value="{{resourcePool.params}}"/>
@ -84,12 +79,12 @@
</div>
</div>
</div>
<div class="row">
<div class="row vcenter_import_result_row" style="display:none">
<div class="large-11 large-centered columns">
<div class="large-1 columns vcenter_template_result">
</div>
<div class="large-11 columns vcenter_template_response">
</div>
<span class="vcenter_import_result">
</span>&nbsp;
<span class="vcenter_import_response">
</span>
</div>
</div>
</div>

4
src/sunstone/public/scss/_vcenter.scss
View File

@ -7,7 +7,9 @@
}
.vcenter_row {
margin-bottom: 0.7rem;
.content {
margin-bottom: 0.7rem;
}
a.accordion_advanced_toggle {
display: initial;