diff --git a/src/sunstone/public/app/utils/vcenter/clusters.js b/src/sunstone/public/app/utils/vcenter/clusters.js index 07fd38e62d..9d0954c483 100644 --- a/src/sunstone/public/app/utils/vcenter/clusters.js +++ b/src/sunstone/public/app/utils/vcenter/clusters.js @@ -23,15 +23,19 @@ define(function(require) { var DomDataTable = require('utils/dom-datatable'); var Notifier = require('utils/notifier'); var UniqueId = require('utils/unique-id'); + var VCenterCommon = require('./vcenter-common'); - var TemplateHTML = require('hbs!./clusters/html'); + var TemplateHTML = require('hbs!./common/html'); + var RowTemplate = require('hbs!./clusters/row'); + var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset'); + var FieldsetTableHTML = require('hbs!./common/fieldset-table'); function VCenterClusters() { return this; } VCenterClusters.prototype = { - 'html': _html, + 'html': VCenterCommon.html, 'insert': _fillVCenterClusters, 'import': _import }; @@ -39,10 +43,6 @@ define(function(require) { return VCenterClusters; - function _html() { - return ''; - } - /* opts = { container: Jquery div to inject the html, @@ -77,83 +77,32 @@ define(function(require) { $.each(response, function(datacenter_name, elements) { var content; if (elements.length == 0) { - content = - '
' + - '' + - '' + - '' + - '
'; + content = EmptyFieldsetHTML({ + title : datacenter_name + ' ' + Locale.tr("DataCenter"), + message : Locale.tr("No new clusters found in this DataCenter") + }); $(".vcenter_datacenter_list", context).append(content); } else { var tableId = "vcenter_import_table_" + UniqueId.id(); - content = - '
' + - '' + - '' + - '' + - '
' + - '
' + - '

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

' + - '
' + - '
' + - '
' + - '
' + - '' + - '' + - '' + - '' + - '' + - '' + - '
' + - '' + - '' + Locale.tr("Name") + '' + - '
' + - '
' + - '
'; - '
'; + content = FieldsetTableHTML({ + tableId : tableId, + title : datacenter_name + ' ' + Locale.tr("DataCenter"), + clearImported : Locale.tr("Clear Imported DataCenters"), + toggleAdvanced : false, + columns : [ + '', + Locale.tr("Name"), + "" + ] + }); var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context)); var tbody = $('#' + tableId + ' tbody', context); $.each(elements, function(id, cluster_name) { - var trow = $( - '' + - '' + - '' + cluster_name + '' + - '' + - '' + - ' ' + - '' + - '' + - '' + - '').appendTo(tbody); + var opts = { name: cluster_name }; + var trow = $(RowTemplate(opts)).appendTo(tbody); $(".check_item", trow).data("cluster_name", cluster_name); }); @@ -180,31 +129,10 @@ define(function(require) { $("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s DataCenters", elements.length)); - _recountCheckboxes($('table', newdiv)); - - newdiv.on("change", '.check_all', function() { - var table = $(this).closest('table'); - if ($(this).is(":checked")) { //check all - $('tbody input.check_item', table).prop('checked', true).change(); - } else { //uncheck all - $('tbody input.check_item', table).prop('checked', false).change(); - } - }); - - $('table', newdiv).on('draw.dt', function() { - _recountCheckboxes(this); - }); - - $(newdiv).on('change', ".check_item", function() { - _recountCheckboxes($('table', newdiv)); - }); - - $(".vcenter-table-select-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change(); - }); - - $(".vcenter-table-deselect-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change(); + VCenterCommon.setupTable({ + context : newdiv, + allSelected : Locale.tr("All %1$s DataCenters selected."), + selected: Locale.tr("%1$s DataCenters selected.") }); context.off('click', '.clear_imported'); @@ -226,36 +154,6 @@ define(function(require) { }); } - function _recountCheckboxes(table) { - // Counters for the whole table, all pages - var dt = $(table).DataTable(); - var total = dt.$(".check_item").length; - var selected = dt.$(".check_item:checked").length; - - if (selected == total){ - $(".vcenter-table-header-text").text(Locale.tr("All %1$s DataCenters selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").hide(); - $("a.vcenter-table-deselect-all").show(); - } else if (selected == 0){ - $(".vcenter-table-header-text").hide(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } else { - $(".vcenter-table-header-text").text(Locale.tr("%1$s DataCenters selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } - - // Counters for the current visible page - var total_length = $('input.check_item', table).length; - var checked_length = $('input.check_item:checked', table).length; - $('.check_all', table).prop('checked', (total_length == checked_length)); - } - function _import(context, cluster_id) { var that = this; @@ -263,11 +161,7 @@ define(function(require) { $.each($(this).DataTable().$(".check_item:checked"), function() { var row_context = $(this).closest("tr"); - $(".vcenter_import_result:not(.success)", row_context).html( - '' + - '' + - '' + - ''); + VCenterCommon.importLoading({context : row_context}); var host_json = { "host": { @@ -283,14 +177,10 @@ define(function(require) { timeout: true, data: host_json, success: function(request, response) { - $(".vcenter_import_result", row_context).addClass("success").html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).html( - Locale.tr("Host created successfully") + '. ID: ' + response.HOST.ID); + VCenterCommon.importSuccess({ + context : row_context, + message : Locale.tr("Host created successfully. ID: %1$s", response.HOST.ID) + }); var template_raw = "VCENTER_USER=\"" + that.opts.vcenter_user + "\"\n" + @@ -300,14 +190,10 @@ define(function(require) { Sunstone.runAction("Host.update_template", response.HOST.ID, template_raw); }, error: function (request, error_json) { - $(".vcenter_import_result", row_context).html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).addClass("error-color").html( - (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))); + VCenterCommon.importFailure({ + context : row_context, + message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) + }); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/datastores/html.hbs b/src/sunstone/public/app/utils/vcenter/clusters/row.hbs similarity index 84% rename from src/sunstone/public/app/utils/vcenter/datastores/html.hbs rename to src/sunstone/public/app/utils/vcenter/clusters/row.hbs index 0893d61e32..088d0928bb 100644 --- a/src/sunstone/public/app/utils/vcenter/datastores/html.hbs +++ b/src/sunstone/public/app/utils/vcenter/clusters/row.hbs @@ -14,9 +14,15 @@ {{! limitations under the License. }} {{! -------------------------------------------------------------------------- }} -
- - - - -
+ + + + + {{name}} + + +   + + + + \ No newline at end of file diff --git a/src/sunstone/public/app/utils/vcenter/networks/html.hbs b/src/sunstone/public/app/utils/vcenter/common/empty-fieldset.hbs similarity index 84% rename from src/sunstone/public/app/utils/vcenter/networks/html.hbs rename to src/sunstone/public/app/utils/vcenter/common/empty-fieldset.hbs index de44dbe7fe..a17a96a94e 100644 --- a/src/sunstone/public/app/utils/vcenter/networks/html.hbs +++ b/src/sunstone/public/app/utils/vcenter/common/empty-fieldset.hbs @@ -14,9 +14,17 @@ {{! limitations under the License. }} {{! -------------------------------------------------------------------------- }} -
- - - - -
\ No newline at end of file +
+ + + +
\ No newline at end of file diff --git a/src/sunstone/public/app/utils/vcenter/common/fieldset-table.hbs b/src/sunstone/public/app/utils/vcenter/common/fieldset-table.hbs new file mode 100644 index 0000000000..1f91ce7326 --- /dev/null +++ b/src/sunstone/public/app/utils/vcenter/common/fieldset-table.hbs @@ -0,0 +1,67 @@ +{{! -------------------------------------------------------------------------- }} +{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems }} +{{! }} +{{! Licensed under the Apache License, Version 2.0 (the "License"); you may }} +{{! not use this file except in compliance with the License. You may obtain }} +{{! a copy of the License at }} +{{! }} +{{! http://www.apache.org/licenses/LICENSE-2.0 }} +{{! }} +{{! Unless required by applicable law or agreed to in writing, software }} +{{! distributed under the License is distributed on an "AS IS" BASIS, }} +{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. }} +{{! See the License for the specific language governing permissions and }} +{{! limitations under the License. }} +{{! -------------------------------------------------------------------------- }} + + +
+ + + +
+
+

+ + + + + + {{tr "Clear selection"}} + + {{#if toggleAdvanced}} +  |  + + {{tr "Toggle advanced sections"}} + + {{/if}} +

+
+
+
+
+ + + {{#each columns}} + + {{/each}} + + +
{{{this}}}
+
+
+
\ No newline at end of file diff --git a/src/sunstone/public/app/utils/vcenter/clusters/html.hbs b/src/sunstone/public/app/utils/vcenter/common/html.hbs similarity index 100% rename from src/sunstone/public/app/utils/vcenter/clusters/html.hbs rename to src/sunstone/public/app/utils/vcenter/common/html.hbs diff --git a/src/sunstone/public/app/utils/vcenter/datastores.js b/src/sunstone/public/app/utils/vcenter/datastores.js index c47da4e137..7232a3bbd8 100644 --- a/src/sunstone/public/app/utils/vcenter/datastores.js +++ b/src/sunstone/public/app/utils/vcenter/datastores.js @@ -22,15 +22,19 @@ define(function(require) { var DomDataTable = require('utils/dom-datatable'); var Notifier = require('utils/notifier'); var UniqueId = require('utils/unique-id'); + var VCenterCommon = require('./vcenter-common'); - var TemplateHTML = require('hbs!./datastores/html'); + var TemplateHTML = require('hbs!./common/html'); + var RowTemplate = require('hbs!./datastores/row'); + var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset'); + var FieldsetTableHTML = require('hbs!./common/fieldset-table'); function VCenterDatastores() { return this; } VCenterDatastores.prototype = { - 'html': _html, + 'html': VCenterCommon.html, 'insert': _fillVCenterDatastores, 'import': _import }; @@ -38,10 +42,6 @@ define(function(require) { return VCenterDatastores; - function _html() { - return ''; - } - /* Retrieve the list of Datastores from vCenter and fill the container with them @@ -60,7 +60,6 @@ define(function(require) { var context = $(".vcenter_import", opts.container); context.html( TemplateHTML({}) ); - context.show(); $.ajax({ @@ -79,85 +78,33 @@ define(function(require) { $.each(response, function(datacenter_name, elements){ var content; if (elements.length == 0) { - content = - '
' + - '' + - '' + - '' + - '
'; + content = EmptyFieldsetHTML({ + title : datacenter_name + ' ' + Locale.tr("DataCenter"), + message : Locale.tr("No new datastores found in this DataCenter") + }); $(".vcenter_datacenter_list", context).append(content); } else { var tableId = "vcenter_import_table" + UniqueId.id(); - content = - '
' + - '' + - '' + - '' + - '
' + - '
' + - '

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

' + - '
' + - '
' + - '
' + - '
' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
' + - '' + - '' + Locale.tr("Name") + '' + Locale.tr("Datacenter") + '' + - '
' + - '
' + - '
'; - '
'; + content = FieldsetTableHTML({ + tableId : tableId, + title : datacenter_name + ' ' + Locale.tr("DataCenter"), + clearImported : Locale.tr("Clear Imported Datastores"), + toggleAdvanced : false, + columns : [ + '', + Locale.tr("Name"), + Locale.tr("Datacenter"), + "" + ] + }); var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context)); var tbody = $('#' + tableId + ' tbody', context); $.each(elements, function(id, element){ - var trow = $( - '' + - '' + - '' + element.name + '' + - '' + element.cluster + '' + - '' + - '' + - ' ' + - '' + - '' + - '' + - '').appendTo(tbody); + var opts = { name: element.name, cluster: element.cluster }; + var trow = $(RowTemplate(opts)).appendTo(tbody); $(".check_item", trow).data("one_template", element.one) }); @@ -185,31 +132,10 @@ define(function(require) { $("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Datastores", elements.length)); - _recountCheckboxes($('table', newdiv)); - - newdiv.on("change", '.check_all', function() { - var table = $(this).closest('table'); - if ($(this).is(":checked")) { //check all - $('tbody input.check_item', table).prop('checked', true).change(); - } else { //uncheck all - $('tbody input.check_item', table).prop('checked', false).change(); - } - }); - - $('table', newdiv).on('draw.dt', function(){ - _recountCheckboxes(this); - }); - - $(newdiv).on('change', ".check_item", function() { - _recountCheckboxes($('table', newdiv)); - }); - - $(".vcenter-table-select-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change(); - }); - - $(".vcenter-table-deselect-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change(); + VCenterCommon.setupTable({ + context : newdiv, + allSelected : Locale.tr("All %1$s Datastores selected."), + selected: Locale.tr("%1$s Datastores selected.") }); context.off('click', '.clear_imported'); @@ -227,46 +153,12 @@ define(function(require) { }); } - function _recountCheckboxes(table) { - // Counters for the whole table, all pages - var dt = $(table).DataTable(); - var total = dt.$(".check_item").length; - var selected = dt.$(".check_item:checked").length; - - if (selected == total){ - $(".vcenter-table-header-text").text(Locale.tr("All %1$s Datastores selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").hide(); - $("a.vcenter-table-deselect-all").show(); - } else if (selected == 0){ - $(".vcenter-table-header-text").hide(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } else { - $(".vcenter-table-header-text").text(Locale.tr("%1$s Datastores selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } - - // Counters for the current visible page - var total_length = $('input.check_item', table).length; - var checked_length = $('input.check_item:checked', table).length; - $('.check_all', table).prop('checked', (total_length == checked_length)); - } - function _import(context) { $.each($("table.vcenter_import_table", context), function() { $.each($(this).DataTable().$(".check_item:checked"), function() { var row_context = $(this).closest("tr"); - $(".vcenter_import_result:not(.success)", row_context).html( - '' + - '' + - '' + - ''); + VCenterCommon.importLoading({context : row_context}); var datastore_json = { "datastore": { @@ -279,24 +171,16 @@ define(function(require) { timeout: true, data: datastore_json, success: function(request, response) { - $(".vcenter_import_result", row_context).addClass("success").html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).html( - Locale.tr("Datastore created successfully") + '. ID: ' + response.DATASTORE.ID); + VCenterCommon.importSuccess({ + context : row_context, + message : Locale.tr("Datastore created successfully. ID: %1$s", response.DATASTORE.ID) + }); }, error: function (request, error_json) { - $(".vcenter_import_result", row_context).html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).addClass("error-color").html( - (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))); + VCenterCommon.importFailure({ + context : row_context, + message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) + }); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/images/html.hbs b/src/sunstone/public/app/utils/vcenter/datastores/row.hbs similarity index 83% rename from src/sunstone/public/app/utils/vcenter/images/html.hbs rename to src/sunstone/public/app/utils/vcenter/datastores/row.hbs index 0893d61e32..0bd5843878 100644 --- a/src/sunstone/public/app/utils/vcenter/images/html.hbs +++ b/src/sunstone/public/app/utils/vcenter/datastores/row.hbs @@ -14,9 +14,16 @@ {{! limitations under the License. }} {{! -------------------------------------------------------------------------- }} -
- - - - -
+ + + + + {{name}} + {{cluster}} + + +   + + + + \ No newline at end of file diff --git a/src/sunstone/public/app/utils/vcenter/images.js b/src/sunstone/public/app/utils/vcenter/images.js index 96a2c87458..eef98b48ff 100644 --- a/src/sunstone/public/app/utils/vcenter/images.js +++ b/src/sunstone/public/app/utils/vcenter/images.js @@ -23,15 +23,19 @@ define(function(require) { var Notifier = require('utils/notifier'); var UniqueId = require('utils/unique-id'); var Humanize = require('utils/humanize'); + var VCenterCommon = require('./vcenter-common'); - var TemplateHTML = require('hbs!./images/html'); + var TemplateHTML = require('hbs!./common/html'); + var RowTemplate = require('hbs!./images/row'); + var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset'); + var FieldsetTableHTML = require('hbs!./common/fieldset-table'); function VCenterImages() { return this; } VCenterImages.prototype = { - 'html': _html, + 'html': VCenterCommon.html, 'insert': _fillVCenterImages, 'import': _import }; @@ -39,10 +43,6 @@ define(function(require) { return VCenterImages; - function _html() { - return ''; - } - /* Retrieve the list of images from a vCenter DS and fill the container with them @@ -78,89 +78,37 @@ define(function(require) { $(".vcenter_datacenter_list", context).html(""); var content; if (response.length == 0) { - content = - '
' + - '' + - '' + - '' + - '
'; + content = EmptyFieldsetHTML({ + title : opts.vcenter_datastore + ' ' + Locale.tr("Datastore"), + message : Locale.tr("No new images found in this datastore") + }); $(".vcenter_datacenter_list", context).append(content); } else { var tableId = "vcenter_import_table_" + UniqueId.id(); - content = - '
' + - '' + - '' + - '' + - '
' + - '
' + - '

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

' + - '
' + - '
' + - '
' + - '
' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
' + - '' + - '' + Locale.tr("Name") + '' + Locale.tr("Size") + '' + - '
' + - '
' + - '
'; - '
'; + content = FieldsetTableHTML({ + tableId : tableId, + title : opts.vcenter_datastore + ' ' + Locale.tr("Datastore"), + clearImported : Locale.tr("Clear Imported Images"), + toggleAdvanced : false, + columns : [ + '', + Locale.tr("Name"), + Locale.tr("Size"), + "" + ] + }); var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context)); var tbody = $('#' + tableId + ' tbody', context); $.each(response, function(id, element) { - var trow = $( - '' + - '' + - '' + element.name + '' + - '' + Humanize.sizeFromMB(element.size) + '' + - '' + - '' + - ' ' + - '' + - '' + - '' + - '').appendTo(tbody); + var opts = { name: element.name, size: element.size }; + var trow = $(RowTemplate(opts)).appendTo(tbody); - $(".check_item", trow).data("datastore_id", element.dsid); - $(".check_item", trow).data("one_template", element.one); - }); + $(".check_item", trow).data("datastore_id", element.dsid); + $(".check_item", trow).data("one_template", element.one); + }); var elementsTable = new DomDataTable( tableId, @@ -184,31 +132,10 @@ define(function(require) { $("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Images", response.length)); - _recountCheckboxes($('table', newdiv)); - - newdiv.on("change", '.check_all', function() { - var table = $(this).closest('table'); - if ($(this).is(":checked")) { //check all - $('tbody input.check_item', table).prop('checked', true).change(); - } else { //uncheck all - $('tbody input.check_item', table).prop('checked', false).change(); - } - }); - - $('table', newdiv).on('draw.dt', function() { - _recountCheckboxes(this); - }); - - $(newdiv).on('change', ".check_item", function() { - _recountCheckboxes($('table', newdiv)); - }); - - $(".vcenter-table-select-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change(); - }); - - $(".vcenter-table-deselect-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change(); + VCenterCommon.setupTable({ + context : newdiv, + allSelected : Locale.tr("All %1$s Images selected."), + selected: Locale.tr("%1$s Images selected.") }); context.off('click', '.clear_imported'); @@ -225,46 +152,12 @@ define(function(require) { }); } - function _recountCheckboxes(table) { - // Counters for the whole table, all pages - var dt = $(table).DataTable(); - var total = dt.$(".check_item").length; - var selected = dt.$(".check_item:checked").length; - - if (selected == total){ - $(".vcenter-table-header-text").text(Locale.tr("All %1$s Images selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").hide(); - $("a.vcenter-table-deselect-all").show(); - } else if (selected == 0){ - $(".vcenter-table-header-text").hide(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } else { - $(".vcenter-table-header-text").text(Locale.tr("%1$s Images selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } - - // Counters for the current visible page - var total_length = $('input.check_item', table).length; - var checked_length = $('input.check_item:checked', table).length; - $('.check_all', table).prop('checked', (total_length == checked_length)); - } - function _import(context) { $.each($("table.vcenter_import_table", context), function() { $.each($(this).DataTable().$(".check_item:checked"), function() { var row_context = $(this).closest("tr"); - $(".vcenter_import_result:not(.success)", row_context).html( - '' + - '' + - '' + - ''); + VCenterCommon.importLoading({context : row_context}); var image_json = { "image": { @@ -277,22 +170,12 @@ define(function(require) { timeout: true, data: image_json, success: function(request, response) { - $(".vcenter_import_result", row_context).addClass("success").html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).html( - Locale.tr("Image created successfully") + '. ID: ' + response.IMAGE.ID); + VCenterCommon.importSuccess({ + context : row_context, + message : Locale.tr("Image created successfully. ID: %1$s", response.IMAGE.ID) + }); }, error: function (request, error_json) { - $(".vcenter_import_result", row_context).html( - '' + - '' + - '' + - ''); - var error_message_str = error_json.error.message if(error_message_str=="[ImageAllocate] Not enough space in datastore"){ @@ -300,8 +183,10 @@ define(function(require) { Locale.tr("Please disable DATASTORE_CAPACITY_CHECK in /etc/one/oned.conf and restart OpenNebula"); } - $(".vcenter_import_response", row_context).addClass("error-color").html( - (error_message_str || Locale.tr("Cannot contact server: is it running and reachable?"))); + VCenterCommon.importFailure({ + context : row_context, + message : (error_message_str || Locale.tr("Cannot contact server: is it running and reachable?")) + }); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/templates/html.hbs b/src/sunstone/public/app/utils/vcenter/images/row.hbs similarity index 82% rename from src/sunstone/public/app/utils/vcenter/templates/html.hbs rename to src/sunstone/public/app/utils/vcenter/images/row.hbs index a23eb391b5..c97b181b18 100644 --- a/src/sunstone/public/app/utils/vcenter/templates/html.hbs +++ b/src/sunstone/public/app/utils/vcenter/images/row.hbs @@ -14,10 +14,16 @@ {{! limitations under the License. }} {{! -------------------------------------------------------------------------- }} -
- - - - -
- + + + + + {{name}} + {{humanizeSize "KB" size}} + + +   + + + + \ No newline at end of file diff --git a/src/sunstone/public/app/utils/vcenter/networks.js b/src/sunstone/public/app/utils/vcenter/networks.js index f289fec400..ec71e6fe5b 100644 --- a/src/sunstone/public/app/utils/vcenter/networks.js +++ b/src/sunstone/public/app/utils/vcenter/networks.js @@ -22,16 +22,19 @@ define(function(require) { var DomDataTable = require('utils/dom-datatable'); var Notifier = require('utils/notifier'); var UniqueId = require('utils/unique-id'); + var VCenterCommon = require('./vcenter-common'); - var TemplateHTML = require('hbs!./networks/html'); + var TemplateHTML = require('hbs!./common/html'); var RowTemplate = require('hbs!./networks/row'); + var EmptyFieldsetHTML = require('hbs!./common/empty-fieldset'); + var FieldsetTableHTML = require('hbs!./common/fieldset-table'); function VCenterNetworks() { return this; } VCenterNetworks.prototype = { - 'html': _html, + 'html': VCenterCommon.html, 'insert': _fillVCenterNetworks, 'import': _import }; @@ -39,10 +42,6 @@ define(function(require) { return VCenterNetworks; - function _html() { - return ''; - } - /* Retrieve the list of networks from vCenter and fill the container with them @@ -78,80 +77,31 @@ define(function(require) { $.each(response, function(datacenter_name, elements) { var content; if (elements.length == 0) { - content = - '
' + - '' + - '' + - '' + - '
'; + content = EmptyFieldsetHTML({ + title : datacenter_name + ' ' + Locale.tr("DataCenter"), + message : Locale.tr("No new networks found in this DataCenter") + }); $(".vcenter_datacenter_list", context).append(content); } else { var tableId = "vcenter_import_table_" + UniqueId.id(); - content = - '
' + - '' + - '' + - '' + - '
' + - '
' + - '

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

' + - '
' + - '
' + - '
' + - '
' + - '' + - '' + - '' + - '' + - '' + - '' + - '
' + - '' + - '' + Locale.tr("Network") + '
' + - '
' + - '
'; - '
'; + content = FieldsetTableHTML({ + tableId : tableId, + title : datacenter_name + ' ' + Locale.tr("DataCenter"), + clearImported : Locale.tr("Clear Imported Networks"), + toggleAdvanced : true, + columns : [ + '', + Locale.tr("Network") + ] + }); var newdiv = $(content).appendTo($(".vcenter_datacenter_list", context)); var tbody = $('#' + tableId + ' tbody', context); $.each(elements, function(id, element) { var opts = { data: element }; - var trow = $( - '' + - '' + - ''+RowTemplate(opts)+'' + - '').appendTo(tbody); + var trow = $(RowTemplate(opts)).appendTo(tbody); $('.check_item', trow).data("import_data", element); }); @@ -177,41 +127,10 @@ define(function(require) { $("a.vcenter-table-select-all").text(Locale.tr("Select all %1$s Networks", elements.length)); - _recountCheckboxes($('table', newdiv)); - - newdiv.on("change", '.check_all', function() { - var table = $(this).closest('table'); - if ($(this).is(":checked")) { //check all - $('tbody input.check_item', table).prop('checked', true).change(); - } else { //uncheck all - $('tbody input.check_item', table).prop('checked', false).change(); - } - }); - - $('table', newdiv).on('draw.dt', function() { - _recountCheckboxes(this); - }); - - $(newdiv).on('change', ".check_item", function() { - _recountCheckboxes($('table', newdiv)); - }); - - $(".vcenter-table-select-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", true).change(); - }); - - $(".vcenter-table-deselect-all", newdiv).on("click", function(){ - $("table.vcenter_import_table", newdiv).DataTable().$(".check_item").prop("checked", false).change(); - }); - - $(".vcenter-table-toggle-advanced", newdiv).on("click", function(){ - var unactive_n = $(".accordion_advanced_toggle:not(.active)", newdiv).length; - - if (unactive_n > 0){ - $(".accordion_advanced_toggle:not(.active)", newdiv).click(); - } else { - $(".accordion_advanced_toggle", newdiv).click(); - } + VCenterCommon.setupTable({ + context : newdiv, + allSelected : Locale.tr("All %1$s Networks selected."), + selected: Locale.tr("%1$s Networks selected.") }); context.off('click', '.clear_imported'); @@ -281,48 +200,12 @@ define(function(require) { }); } - function _recountCheckboxes(table) { - // Counters for the whole table, all pages - var dt = $(table).DataTable(); - var total = dt.$(".check_item").length; - var selected = dt.$(".check_item:checked").length; - - if (selected == total){ - $(".vcenter-table-header-text").text(Locale.tr("All %1$s Networks selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").hide(); - $("a.vcenter-table-deselect-all").show(); - } else if (selected == 0){ - $(".vcenter-table-header-text").hide(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } else { - $(".vcenter-table-header-text").text(Locale.tr("%1$s Networks selected.", selected)); - - $(".vcenter-table-header-text").show(); - $("a.vcenter-table-select-all").show(); - $("a.vcenter-table-deselect-all").hide(); - } - - // Counters for the current visible page - var total_length = $('input.check_item', table).length; - var checked_length = $('input.check_item:checked', table).length; - $('.check_all', table).prop('checked', (total_length == checked_length)); - } - function _import(context) { $.each($(".vcenter_import_table", context), function() { $.each($(this).DataTable().$(".check_item:checked"), function() { var row_context = $(this).closest("tr"); - $(".vcenter_import_result:not(.success)", row_context).html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_result_row", row_context).show(); + VCenterCommon.importLoading({context : row_context}); var network_size = $(".netsize", row_context).val(); var network_tmpl = $(this).data("import_data").one; @@ -391,24 +274,16 @@ define(function(require) { timeout: true, data: vnet_json, success: function(request, response) { - $(".vcenter_import_result", row_context).addClass("success").html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).html( - Locale.tr("Virtual Network created successfully") + '. ID: ' + response.VNET.ID); + VCenterCommon.importSuccess({ + context : row_context, + message : Locale.tr("Virtual Network created successfully. ID: %1$s", response.VNET.ID) + }); }, error: function (request, error_json) { - $(".vcenter_import_result", row_context).html( - '' + - '' + - '' + - ''); - - $(".vcenter_import_response", row_context).addClass("error-color").html( - (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?"))); + VCenterCommon.importFailure({ + context : row_context, + message : (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) + }); } }); }); diff --git a/src/sunstone/public/app/utils/vcenter/networks/row.hbs b/src/sunstone/public/app/utils/vcenter/networks/row.hbs index 75691036dd..eae5fae067 100644 --- a/src/sunstone/public/app/utils/vcenter/networks/row.hbs +++ b/src/sunstone/public/app/utils/vcenter/networks/row.hbs @@ -13,52 +13,60 @@ {{! See the License for the specific language governing permissions and }} {{! limitations under the License. }} {{! -------------------------------------------------------------------------- }} -
-
-
- -
-
-