Fixes feature #544: Improve select fields.

I have unified the select creation through a single method in
sunstone-util.js. It builds the select options taking the data from the
datatables, which are always updated, as long as we indicate which columns
have the relevant information for it.

src/sunstone/public/js/plugins/hosts-tab.js

@@ -414,23 +414,17 @@ function hostInfoListener(){
 }
 
 //updates the host select by refreshing the options in it
-function updateHostSelect(host_list){
+function updateHostSelect(){
 
-	//update select helper
-	hosts_select="";
-	hosts_select += "<option value=\"\">Select a Host</option>";
-	$.each(host_list, function(){
-		hosts_select += "<option value=\""+this.HOST.ID+"\">"+this.HOST.NAME+"</option>";
-	});
+    hosts_select = makeSelectOptions(dataTable_hosts,1,2,7,"DISABLED");
 
 }
 
 //updates the cluster select by refreshing the options in it
 function updateClusterSelect(cluster_list){
 
-	//update select helper
-	clusters_select= "";
-	clusters_select+="<option value=\"\">Select a cluster</option>";
+	//manual, as there is not dataTable for it
+	clusters_select="<option value=\"\">Select a cluster</option>";
 	$.each(cluster_list, function(){
 		clusters_select += "<option value=\""+this.CLUSTER.ID+"\">"+this.CLUSTER.NAME+"</option>";
 	});
@@ -441,19 +435,21 @@ function updateHostElement(request, host_json){
 	var id = host_json.HOST.ID;
 	var element = hostElementArray(host_json);
 	updateSingleElement(element,dataTable_hosts,'#host_'+id);
+    updateHostSelect();
 }
 
 //callback for actions deleting a host element
 function deleteHostElement(req){
 	deleteElement(dataTable_hosts,'#host_'+req.request.data);
+    updateHostSelect();
 }
 
 //call back for actions creating a host element
 function addHostElement(request,host_json){
     var id = host_json.HOST.ID;
 	var element = hostElementArray(host_json);
-    hosts_select += "<option value=\""+host_json.HOST.NAME+"\">"+host_json.HOST.NAME+"</option>";
 	addElement(element,dataTable_hosts);
+    updateHostSelect();
 }
 
 //callback to update the list of hosts.
@@ -467,7 +463,7 @@ function updateHostsView (request,host_list){
 	});
 
 	updateView(host_list_array,dataTable_hosts);
-	updateHostSelect(host_list);
+	updateHostSelect();
     //dependency with the dashboard plugin
 	updateDashboard("hosts",host_list_json);
 }

src/sunstone/public/js/plugins/images-tab.js

@@ -475,16 +475,9 @@ function imageInfoListener(){
 }
 
 //Updates the select input field with an option for each image
-function updateImageSelect(image_list){
-    images_select="";
-    images_select += "<option value=\"\">Select an image</option>";
-    $.each(image_list, function(){
-        //Only add if the state says the image is usable
-        if ((this.IMAGE.STATE < 3) && (this.IMAGE.STATE > 0)){
-            images_select += '<option id="img_sel_'+this.IMAGE.ID+'" value="'+this.IMAGE.NAME+'">'+this.IMAGE.NAME+'</option>';
-        }
-    });
-
+function updateImageSelect(){
+    images_select = makeSelectOptions(dataTable_images,1,3,8,"DISABLED");
+   
     //update static selectors:
     //in the VM section
     $('div.vm_section#disks select#IMAGE').html(images_select);
@@ -495,29 +488,13 @@ function updateImageElement(request, image_json){
     var id = image_json.IMAGE.ID;
     var element = imageElementArray(image_json);
     updateSingleElement(element,dataTable_images,'#image_'+id);
-    //Update the image select but only if the image is enabled...
-    if ((image_json.IMAGE.STATE < 3) && 
-        (image_json.IMAGE.STATE > 0) &&
-        ($('#img_sel_'+id,images_select).length == 0)){
-            images_select += '<option id="img_sel_'+id+'" value="'+image_json.IMAGE.NAME+'">'+image_json.IMAGE.NAME+'</option>';
-        }   
-    else { //delete the element if it is in the list
-        var tag = 'option#img_sel_'+id;
-        var select = $('<select>'+images_select+'</select>');
-        $(tag,select).remove();
-        images_select = $(select).html();
-    }
-    $('div.vm_section#disks select#IMAGE').html(images_select);
+    updateImageSelect();
 }
 
 // Callback to remove an element from the dataTable
 function deleteImageElement(req){
     deleteElement(dataTable_images,'#image_'+req.request.data);
-    var tag = 'option#img_sel_'+req.request.data;
-    var select = $('<select>'+images_select+'</select>');
-    $(tag,select).remove();
-    images_select = $(select).html();
-    $('div.vm_section#disks select#IMAGE').html(images_select);    
+    updateImageSelect();
 }
 
 // Callback to add an image element
@@ -537,7 +514,7 @@ function updateImagesView(request, images_list){
     });
 
     updateView(image_list_array,dataTable_images);
-    updateImageSelect(images_list);
+    updateImageSelect();
     updateDashboard("images",image_list_json);
 
 }

src/sunstone/public/js/plugins/vnets-tab.js

@@ -307,13 +307,8 @@ function vNetworkInfoListener(){
 }
 
 //updates the vnet select different options
-function updateNetworkSelect(network_list){
-	vnetworks_select="";
-	vnetworks_select += "<option id=\"no_network\" value=\"\">Select a network</option>";
-	$.each(network_list, function(){
-		vnetworks_select += "<option value=\""+this.VNET.NAME+"\">"+this.VNET.NAME+"</option>";
-
-	});
+function updateNetworkSelect(){
+	vnetworks_select= makeSelectOptions(dataTable_vNetworks,1,3,6,"no")
 
 	//update static selectors:
     //in the VM creation dialog
@@ -325,22 +320,20 @@ function updateVNetworkElement(request, vn_json){
 	id = vn_json.VNET.ID;
 	element = vNetworkElementArray(vn_json);
 	updateSingleElement(element,dataTable_vNetworks,'#vnetwork_'+id);
+    updateNetworkSelect();
 }
 
 //Callback to delete a vnet element from the table
 function deleteVNetworkElement(req){
 	deleteElement(dataTable_vNetworks,'#vnetwork_'+req.request.data);
-    //TODO: Delete vNetwork select option here?
+    updateNetworkSelect();
 }
 
 //Callback to add a new element
 function addVNetworkElement(request,vn_json){
 	var element = vNetworkElementArray(vn_json);
 	addElement(element,dataTable_vNetworks);
-    
-    //update select variable and 
-    vnetworks_select += "<option value=\""+vn_json.VNET.NAME+"\">"+vn_json.VNET.NAME+"</option>";
-    $('div.vm_section#networks select#NETWORK').html(vnetworks_select);
+    updateNetworkSelect();
 }
 
 //updates the list of virtual networks
@@ -353,7 +346,7 @@ function updateVNetworksView(request, network_list){
 	});
 
 	updateView(network_list_array,dataTable_vNetworks);
-	updateNetworkSelect(network_list);
+	updateNetworkSelect();
     //dependency with dashboard
 	updateDashboard("vnets",network_list_json);
 

src/sunstone/public/js/sunstone-util.js

@@ -376,6 +376,23 @@ function getSelectedNodes(dataTable){
     return selected_nodes;
 }
 
+//returns a HTML string with a select input code generated from
+//a dataTable
+function makeSelectOptions(dataTable,id_col,name_col,status_col,status_bad){
+    var nodes = dataTable.fnGetData();
+    var select = "<option value=\"\">Please select</option>";
+    var array;
+    $.each(nodes,function(){
+        var id = this[id_col];
+        var name = this[name_col];
+        var status = this[status_col];
+        if (status != status_bad){
+            select +='<option value="'+id+'">'+name+'</option>';
+        }
+    });
+    return select;
+}
+
 //functions that used as true and false conditions for testing mainly
 function True(){
     return true;