From 41fd29f546a24f4f0509cac5d15959dbf3ea42e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Mart=C3=ADn?= Date: Fri, 24 Oct 2014 13:07:30 +0200 Subject: [PATCH] Bug #3251: Use generic sunstone.js DS table for Clusters --- .../public/js/plugins/clusters-tab.js | 296 +++--------------- src/sunstone/public/js/sunstone.js | 62 +++- 2 files changed, 108 insertions(+), 250 deletions(-) diff --git a/src/sunstone/public/js/plugins/clusters-tab.js b/src/sunstone/public/js/plugins/clusters-tab.js index 5c2342bbe1..fe80b545d3 100644 --- a/src/sunstone/public/js/plugins/clusters-tab.js +++ b/src/sunstone/public/js/plugins/clusters-tab.js @@ -18,25 +18,6 @@ /* ------------ Cluster creation dialog ------------ */ -var datastore_datatable_table_tmpl='\ - \ - \ - '+tr("ID")+'\ - '+tr("Owner")+'\ - '+tr("Group")+'\ - '+tr("Name")+'\ - '+tr("Capacity")+'\ - '+tr("Cluster")+'\ - '+tr("Basepath")+'\ - '+tr("TM MAD")+'\ - '+tr("DS MAD")+'\ - '+tr("Type")+'\ - \ - \ - \ - ' - - var create_cluster_tmpl ='
\
\

'+tr("Create Cluster")+'

\ @@ -66,25 +47,7 @@ var create_cluster_tmpl ='
\ '+generateVNetTableSelect("cluster_wizard_vnets")+'\
\
\ -
\ -
\ - \ -
\ -
\ - \ -
\ -
\ -
\ -
\ - ' + datastore_datatable_table_tmpl + '
\ -
\ -
\ -
\ -
\ - '+tr("Please select one or more datastores from the list")+'\ - \ -
\ -
\ + '+generateDatastoreTableSelect("cluster_wizard_datastores")+'\
\
\ \ @@ -97,17 +60,9 @@ var create_cluster_tmpl ='
\
\ ×'; -// Common utils for datatatables - // Holds the selected items -selected_datastore_list = {}; - -datastore_row_hash = {}; - // Prepares the cluster creation dialog function setupCreateClusterDialog(){ - reset_counters(); - $("#create_cluster_dialog").remove(); dialogs_context.append('
'); @@ -124,98 +79,12 @@ function setupCreateClusterDialog(){ }; setupHostTableSelect(dialog, "cluster_wizard_hosts", opts); - setupVNetTableSelect(dialog, "cluster_wizard_vnets", opts); - - dataTable_cluster_datastores = $("#datatable_cluster_datastores", dialog).dataTable({ - "sDom" : '<"H">t<"F"p>', - "oColVis": { - "aiExclude": [ 0 ] - }, - "bSortClasses" : false, - "bDeferRender": true, - "aoColumnDefs": [ - { "sWidth": "35px", "aTargets": [1] }, - { "bVisible": false, "aTargets": [0,7,8,9] } - ] - }); - - - $('#cluster_datastores_search', dialog).keyup(function(){ - dataTable_cluster_datastores.fnFilter( $(this).val() ); - }) - - - // ------- End of create the dialog datatables ------------ - - $('#datatable_cluster_datastores tbody', dialog).delegate("tr", "click", function(e){ - if ($(e.target).is('input') || - $(e.target).is('select') || - $(e.target).is('option')) return true; - - var aData = dataTable_cluster_datastores.fnGetData(this); - var ds_id = aData[1]; - var name = aData[4]; - - if ($.isEmptyObject(selected_datastore_list)) { - $('#cluster_datastores_selected', dialog).show(); - $('#select_cluster_datastores', dialog).hide(); - } - - if(!$("td:first", this).hasClass('markrowchecked')) - { - selected_datastore_list[ds_id]=1; - datastore_row_hash[ds_id]=this; - $(this).children().each(function(){$(this).addClass('markrowchecked');}); - $('div#selected_datastores_div', dialog).append(''+name+' '); - } - else - { - delete selected_datastore_list[ds_id]; - $(this).children().each(function(){$(this).removeClass('markrowchecked');}); - $('div#selected_datastores_div span#tag_datastores_'+ds_id, dialog).remove(); - } - - if ($.isEmptyObject(selected_datastore_list)) { - $('#cluster_datastores_selected', dialog).hide(); - $('#select_cluster_datastores', dialog).show(); - } - - return false; - }); - - // Add tag listeners - $( "#cluster_create_tabs span.fa.fa-times",$create_cluster_dialog).die(); - $( "#cluster_create_tabs span.fa.fa-times" ).live( "click", function() { - // Remove the tag - $(this).parent().remove(); - - // Unselect row - var id = $(this).parent().attr("ID"); - - if (id.match(/datastore/g)) - { - var datastore_id=id.substring(15,id.length); - delete selected_datastore_list[datastore_id]; - $("td:first", datastore_row_hash[datastore_id]).parent().children().each(function(){$(this).removeClass('markrowchecked');}); - - if ($.isEmptyObject(selected_datastore_list)) { - $('#cluster_datastores_selected', dialog).hide(); - $('#select_cluster_datastores', dialog).show(); - } - } - }); - - $("#refresh_datastore_table_button_class", dialog).click( function(){ - Sunstone.runAction("ClusterDS.list"); - return false; - } - ); + setupDatastoreTableSelect(dialog, "cluster_wizard_datastores", opts); // Handle the Create button $('#create_cluster_submit').click(function(){ - if (!($('input#name',dialog).val().length)){ notifyError(tr("Cluster name missing!")); return false; @@ -235,12 +104,19 @@ function setupCreateClusterDialog(){ selected_vnets_list[e] = 1; }); + var selected_datastores_arr = retrieveDatastoreTableSelect(dialog, "cluster_wizard_datastores"); + var selected_datastores_list = {}; + + $.each(selected_datastores_arr, function(i,e){ + selected_datastores_list[e] = 1; + }); + var cluster_json = { "cluster": { "name": $('#name',dialog).val(), "hosts": selected_hosts_list, "vnets": selected_vnets_list, - "datastores": selected_datastore_list + "datastores": selected_datastores_list } }; @@ -250,14 +126,6 @@ function setupCreateClusterDialog(){ }); } -function reset_counters(){ - selected_datastore_list = {}; - - original_datastores_list = {}; - - datastore_row_hash = {}; -} - // Open creation dialogs function popUpCreateClusterDialog(){ if (!$create_cluster_dialog || $create_cluster_dialog.html() == "") { @@ -274,7 +142,7 @@ function popUpCreateClusterDialog(){ refreshHostTableSelect($create_cluster_dialog, "cluster_wizard_hosts"); refreshVNetTableSelect($create_cluster_dialog, "cluster_wizard_vnets"); - Sunstone.runAction("ClusterDS.list"); + refreshDatastoreTableSelect($create_cluster_dialog, "cluster_wizard_datastores"); $create_cluster_dialog.foundation().foundation('reveal', 'open'); @@ -376,32 +244,17 @@ function fillPopPup(request,response){ selectVNetTableSelect(dialog, "cluster_wizard_vnets", opts); } + var original_datastores_list = []; + + // Select datastores belonging to the cluster if (ds_ids) { - dataTable_cluster_datastores.on('draw', function(){ - dataTable_cluster_datastores.unbind('draw'); - var rows = dataTable_cluster_datastores.fnGetNodes(); - // Select datastores belonging to the cluster - for (var i = 0; i < ds_ids.length; i++) - { - for(var j=0;j\
\ - ' + - datastore_datatable_table_tmpl + - '
\ + '+generateDatastoreTableSelect("cluster_info_datastores")+'\
\
' } @@ -977,23 +776,22 @@ function updateClusterInfo(request,cluster){ // Datastores datatable - dataTable_cluster_datastores_panel = $("#datatable_cluster_datastores_info_panel").dataTable({ - "sDom" : "<'H'>t<'row'<'large-6 columns'i><'large-6 columns'p>>", - "oColVis": { - "aiExclude": [ 0 ] - }, - "bSortClasses" : false, - "bDeferRender": true, - "aoColumnDefs": [ - { "sWidth": "35px", "aTargets": [1] }, - { "bVisible": false, "aTargets": [0,7,8,9] } - ] - }); + var datastore_ids = cluster_info.DATASTORES.ID; - infoListener(dataTable_cluster_datastores_panel,'Datastore.show','datastores-tab'); + if (typeof datastore_ids == 'string'){ + datastore_ids = [datastore_ids]; + } else if (datastore_ids == undefined){ + datastore_ids = []; + } - // initialize datatables values - Sunstone.runAction("ClusterDSInfo.list"); + var opts = { + read_only: true, + fixed_ids: datastore_ids + } + + setupDatastoreTableSelect($("#cluster_info_panel"), "cluster_info_datastores", opts); + + refreshDatastoreTableSelect($("#cluster_info_panel"), "cluster_info_datastores"); } //This is executed after the sunstone.js ready() is run. diff --git a/src/sunstone/public/js/sunstone.js b/src/sunstone/public/js/sunstone.js index 62dbb48c2b..0d0118d40f 100644 --- a/src/sunstone/public/js/sunstone.js +++ b/src/sunstone/public/js/sunstone.js @@ -5986,7 +5986,9 @@ function generateDatastoreTableSelect(context_id){ "name_index": 4, "uname_index": 2, "select_resource": tr("Please select a datastore from the list"), - "you_selected": tr("You selected the following datastore:") + "you_selected": tr("You selected the following datastore:"), + "select_resource_multiple": tr("Please select one or more datastores from the list"), + "you_selected_multiple": tr("You selected the following datastores:") }; return generateResourceTableSelect(context_id, columns, options); @@ -5995,6 +5997,11 @@ function generateDatastoreTableSelect(context_id){ // opts.bVisible: dataTable bVisible option. If not set, the .yaml visibility will be used // opts.filter_fn: boolean function to filter which elements to show // opts.select_callback(aData, options): function called after a row is selected +// opts.multiple_choice: boolean true to enable multiple element selection +// opts.read_only: boolean true so user is not asked to select elements +// opts.fixed_ids: Array of IDs to show. Any other ID will be filtered out. If +// an ID is not returned by the pool, it will be included as a +// blank row function setupDatastoreTableSelect(section, context_id, opts){ if(opts == undefined){ @@ -6013,6 +6020,18 @@ function setupDatastoreTableSelect(section, context_id, opts){ opts.bVisible = config; } + if(opts.multiple_choice == undefined){ + opts.multiple_choice = false; + } + + var fixed_ids_map_orig = {}; + + if(opts.fixed_ids != undefined){ + $.each(opts.fixed_ids,function(){ + fixed_ids_map_orig[this] = true; + }); + } + var options = { "dataTable_options": { "bAutoWidth":false, @@ -6029,6 +6048,10 @@ function setupDatastoreTableSelect(section, context_id, opts){ ] }, + "multiple_choice": opts.multiple_choice, + "read_only": opts.read_only, + "fixed_ids": opts.fixed_ids, + "id_index": 1, "name_index": 4, "uname_index": 2, @@ -6039,6 +6062,8 @@ function setupDatastoreTableSelect(section, context_id, opts){ success: function (request, resource_list){ var list_array = []; + var fixed_ids_map = $.extend({}, fixed_ids_map_orig); + $.each(resource_list,function(){ var add = true; @@ -6046,11 +6071,31 @@ function setupDatastoreTableSelect(section, context_id, opts){ add = opts.filter_fn(this.DATASTORE); } + if(opts.fixed_ids != undefined){ + add = (add && fixed_ids_map[this.DATASTORE.ID]); + } + if(add){ list_array.push(datastoreElementArray(this)); + + delete fixed_ids_map[this.DATASTORE.ID]; } }); + var n_columns = 11; // SET FOR EACH RESOURCE + + $.each(fixed_ids_map, function(id,v){ + var empty = []; + + for(var i=0; i<=n_columns; i++){ + empty.push(""); + } + + empty[1] = id; // SET FOR EACH RESOURCE, id_index + + list_array.push(empty); + }); + updateView(list_array, datatable); }, error: onError @@ -6063,6 +6108,21 @@ function setupDatastoreTableSelect(section, context_id, opts){ return setupResourceTableSelect(section, context_id, options); } +// Clicks the refresh button +function refreshDatastoreTableSelect(section, context_id){ + return refreshResourceTableSelect(section, context_id); +} + +// Returns an ID, or an array of IDs for opts.multiple_choice +function retrieveDatastoreTableSelect(section, context_id){ + return retrieveResourceTableSelect(section, context_id); +} + +// Clears the current selection, and selects the given IDs +// opts.ids must be a single ID, or an array of IDs for options.multiple_choice +function selectDatastoreTableSelect(section, context_id, opts){ + return selectResourceTableSelect(section, context_id, opts); +} function generateImageTableSelect(context_id){