diff --git a/src/sunstone/public/app/utils/custom-layout-table.js b/src/sunstone/public/app/utils/custom-layout-table.js deleted file mode 100644 index f5bb221c22..0000000000 --- a/src/sunstone/public/app/utils/custom-layout-table.js +++ /dev/null @@ -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 - } -}); diff --git a/src/sunstone/public/app/utils/vcenter/clusters.js b/src/sunstone/public/app/utils/vcenter/clusters.js index e21222eef7..07fd38e62d 100644 --- a/src/sunstone/public/app/utils/vcenter/clusters.js +++ b/src/sunstone/public/app/utils/vcenter/clusters.js @@ -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 ''; + return ''; } /* @@ -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 = '
' + '' + @@ -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 = '
' + '' + @@ -104,39 +105,106 @@ define(function(require) { '' + '
  • ' + '' + '
  • ' + '' + '
    ' + '
    ' + - '
    ' + + '
    ' + + '

    ' + + '' + + ' ' + + '' + + '' + + '' + + Locale.tr("Clear selection") + + '' + + '

    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '' + + '' + + '' + + '' + + '' + + '' + + '
    ' + + '' + + '' + Locale.tr("Name") + '' + + '
    ' + '
    ' + '
    '; - '
    '; + '
    '; - $(".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 = $( + '' + + '' + + '' + cluster_name + '' + + '' + + '' + + ' ' + + '' + + '' + + '' + + '').appendTo(tbody); - $.each(clusters, function(id, cluster_name) { - var row = $('
    ' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '
    ').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('' + + $.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( + '' + '' + '' + ''); - 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( - '' + - '' + - '' + + OpenNebulaHost.create({ + timeout: true, + data: host_json, + success: function(request, response) { + $(".vcenter_import_result", row_context).addClass("success").html( + '' + + '' + + '' + ''); - $(".vcenter_host_response", cluster_context).html('

    ' + - Locale.tr("Host created successfully") + ' ID:' + response.HOST.ID + - '

    '); + $(".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('' + - '' + - '' + + Sunstone.runAction("Host.update_template", response.HOST.ID, template_raw); + }, + error: function (request, error_json) { + $(".vcenter_import_result", row_context).html( + '' + + '' + + '' + ''); - $(".vcenter_host_response", cluster_context).html('

    ' + - (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) + - '

    '); - } + $(".vcenter_import_response", row_context).addClass("error-color").html( + (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))); + } + }); }); }); } diff --git a/src/sunstone/public/app/utils/vcenter/datastores.js b/src/sunstone/public/app/utils/vcenter/datastores.js index b1f106d631..c47da4e137 100644 --- a/src/sunstone/public/app/utils/vcenter/datastores.js +++ b/src/sunstone/public/app/utils/vcenter/datastores.js @@ -39,7 +39,7 @@ define(function(require) { return VCenterDatastores; function _html() { - return ''; + return ''; } /* @@ -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 = '
    ' + '' + @@ -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 = '
    ' + '' + @@ -114,9 +112,22 @@ define(function(require) { '' + '' + '' + + '
    ' + + '
    ' + + '

    ' + + '' + + ' ' + + '' + + '' + + '' + + Locale.tr("Clear selection") + + '' + + '

    ' + + '
    ' + + '
    ' + '
    ' + '
    ' + - '' + + '
    ' + '' + '' + '' + '' + '' + '
    ' + '' + @@ -124,7 +135,6 @@ define(function(require) { '' + Locale.tr("Name") + '' + Locale.tr("Datacenter") + '' + - '' + '
    ' + @@ -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 = $( - '' + + '' + '' + - '' + datastore.name + '' + - '' + datastore.cluster + '' + - '
    ' + - '
    ' + + '' + element.name + '' + + '' + element.cluster + '' + + '' + + '' + + ' ' + + '' + + '' + + '' + '').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( '' + '' + '' + @@ -233,25 +279,24 @@ define(function(require) { timeout: true, data: datastore_json, success: function(request, response) { - $(".vcenter_datastore_result", datastore_context).addClass("success").html( - '' + - '' + - '' + - ''); + $(".vcenter_import_result", row_context).addClass("success").html( + '' + + '' + + '' + + ''); - $(".vcenter_datastore_result", datastore_context).html('

    ' + - Locale.tr("Datastore created successfully") + ' ID:' + response.DATASTORE.ID + - '

    '); + $(".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('' + - '' + - '' + - ''); + $(".vcenter_import_result", row_context).html( + '' + + '' + + '' + + ''); - $(".vcenter_datastore_result", datastore_context).html('

    ' + - (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) + - '

    '); + $(".vcenter_import_response", row_context).addClass("error-color").html( + (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/images.js b/src/sunstone/public/app/utils/vcenter/images.js index 80f2a34617..96a2c87458 100644 --- a/src/sunstone/public/app/utils/vcenter/images.js +++ b/src/sunstone/public/app/utils/vcenter/images.js @@ -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 ''; + return ''; } /* @@ -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 = '
    ' + @@ -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 = '
    ' + '' + @@ -110,9 +111,22 @@ define(function(require) { '' + '' + '' + + '
    ' + + '
    ' + + '

    ' + + '' + + ' ' + + '' + + '' + + '' + + Locale.tr("Clear selection") + + '' + + '

    ' + + '
    ' + + '
    ' + '
    ' + '
    ' + - '' + + '
    ' + '' + '' + '' + '' + '' + '
    ' + '' + @@ -120,33 +134,35 @@ define(function(require) { '' + Locale.tr("Name") + '' + Locale.tr("Size") + '' + - '' + '
    ' + '
    ' + '
    '; - '
    '; + '
    '; 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 = $( - '' + + '' + '' + - '' + image.name + '' + - '' + image.size + ' MB' + - '
    ' + - '
    ' + + '' + element.name + '' + + '' + Humanize.sizeFromMB(element.size) + '' + + '' + + '' + + ' ' + + '' + + '' + + '' + '').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( '' + '' + '' + @@ -222,32 +277,31 @@ define(function(require) { timeout: true, data: image_json, success: function(request, response) { - $(".vcenter_image_result", image_context).addClass("success").html( - '' + - '' + - '' + - ''); + $(".vcenter_import_result", row_context).addClass("success").html( + '' + + '' + + '' + + ''); - $(".vcenter_image_result", image_context).html('

    ' + - Locale.tr("Image created successfully") + ' ID:' + response.IMAGE.ID + - '

    '); + $(".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('' + - '' + - '' + - ''); + $(".vcenter_import_result", row_context).html( + '' + + '' + + '' + + ''); - 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('

    ' + - (error_message_str || Locale.tr("Cannot contact server: is it running and reachable?")) + - '

    '); + $(".vcenter_import_response", row_context).addClass("error-color").html( + (error_message_str || Locale.tr("Cannot contact server: is it running and reachable?"))); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/networks.js b/src/sunstone/public/app/utils/vcenter/networks.js index af1cc0e797..f289fec400 100644 --- a/src/sunstone/public/app/utils/vcenter/networks.js +++ b/src/sunstone/public/app/utils/vcenter/networks.js @@ -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 ''; + return ''; } /* @@ -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 = '
    ' + '' + @@ -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 = '
    ' + '' + @@ -106,18 +104,6 @@ define(function(require) { '
  • ' + datacenter_name + ' ' + Locale.tr("DataCenter") + '
  • ' + - '
  • ' + - '' + - '
  • ' + - '
  • ' + - '' + - '
  • ' + '
  • ' + '
  • ' + '' + '
    ' + + '
    ' + + '
    ' + + '

    ' + + '' + + ' ' + + '' + + '' + + '' + + Locale.tr("Clear selection") + + '' + + ' | ' + + Locale.tr("Toggle advanced sections") + + '' + + '

    ' + + '
    ' + + '
    ' + '
    ' + '
    ' + - '' + + '
    ' + '' + - '' + + '' + + '' + '' + '' + '
    ' + Locale.tr("Name") + '' + + '' + + '' + Locale.tr("Network") + '
    ' + '
    ' + '
    '; - '
    '; + '
    '; - $(".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 = $( + '' + + '' + + ''+RowTemplate(opts)+'' + + '').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) { '' + '' + '
    ' + - '
    ' + + '
    ' + '' + @@ -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( - '' + - '' + - '' + - ''); + $(".vcenter_import_result:not(.success)", row_context).html( + '' + + '' + + '' + + ''); - 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( - '' + - '' + - '' + - ''); + $(".vcenter_import_result", row_context).addClass("success").html( + '' + + '' + + '' + + ''); - $(".vcenter_network_response", network_context).html('

    ' + - Locale.tr("Virtual Network created successfully") + ' ID:' + response.VNET.ID + - '

    '); + $(".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('' + - '' + - '' + - ''); + $(".vcenter_import_result", row_context).html( + '' + + '' + + '' + + ''); - $(".vcenter_network_response", network_context).html('

    ' + - (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) + - '

    '); + $(".vcenter_import_response", row_context).addClass("error-color").html( + (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/networks/empty-table.hbs b/src/sunstone/public/app/utils/vcenter/networks/empty-table.hbs deleted file mode 100644 index ed64b1a025..0000000000 --- a/src/sunstone/public/app/utils/vcenter/networks/empty-table.hbs +++ /dev/null @@ -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. }} -{{! -------------------------------------------------------------------------- }} - -
    -
    -
    -
    \ No newline at end of file diff --git a/src/sunstone/public/app/utils/vcenter/networks/row.hbs b/src/sunstone/public/app/utils/vcenter/networks/row.hbs index 0ee94f6b02..75691036dd 100644 --- a/src/sunstone/public/app/utils/vcenter/networks/row.hbs +++ b/src/sunstone/public/app/utils/vcenter/networks/row.hbs @@ -16,58 +16,49 @@
    - +
    -
    -
    -