new UI - implement assign VM instance to load balancer rule.

This commit is contained in:
Jessica Wang 2010-09-19 10:32:08 -07:00
parent c49eada7bd
commit b687871463
3 changed files with 88 additions and 92 deletions

View File

@ -325,9 +325,7 @@
<img src="images/network_managevmicon.gif" /></div>
</div>
<div class="grid_row_cell" style="width: 60%;">
<select class="select" style="width: 90%;">
<option>Instance A </option>
<option>Instance B </option>
<select id="vm_select" class="select" style="width: 90%;">
</select>
</div>
<div class="grid_row_cell" style="width: 30%;">
@ -338,7 +336,7 @@
<div class="gridrow_loader">
</div>
<p>
Assigning instance to load balancer policy &hellip;</p>
Assigning instance to load balancer rule &hellip;</p>
</div>
</div>
<div id="grid_content" class="ip_description_managearea">
@ -354,10 +352,10 @@
<div class="row_celltitles">
<img src="images/network_managevmicon.gif" /></div>
</div>
<div class="grid_row_cell" style="width: 50%;">
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles" id="vm_name"></div>
</div>
<div class="grid_row_cell" style="width: 10%;">
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles" id="vm_private_ip"></div>
</div>
<div class="grid_row_cell" style="width: 30%;">

View File

@ -75,7 +75,7 @@ $(document).ready(function() {
listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", afterLoadAccountJSP, accountToMidmenu, accountToRigntPanel);
listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel);
listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel);
listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ip_address.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId);
listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId);
listMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel);
listMidMenuItems("leftmenu_submenu_my_template", "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);

View File

@ -89,7 +89,7 @@ function afterLoadIpJSP() {
$("#tab_content_load_balancer #grid_content").append($template.show());
var $spinningWheel = $template.find("#row_container").find("#spinning_wheel");
$spinningWheel.find("#description").text("Adding....");
$spinningWheel.find("#description").text("Adding load balancer rule....");
$spinningWheel.show();
var ipObj = $("#right_panel_content #tab_content_details").data("jsonObj");
@ -220,20 +220,20 @@ function listPortForwardingRules(ipObj) {
}
//var portForwardingIndex = 0;
function portForwardingJsonToTemplate(jsonObj, template) {
//(portForwardingIndex++ % 2 == 0)? template.find("#row_container").addClass("smallrow_even"): template.find("#row_container").addClass("smallrow_odd");
template.attr("id", "portForwarding_" + jsonObj.id).data("portForwardingId", jsonObj.id);
function portForwardingJsonToTemplate(jsonObj, $template) {
//(portForwardingIndex++ % 2 == 0)? $template.find("#row_container").addClass("smallrow_even"): $template.find("#row_container").addClass("smallrow_odd");
$template.attr("id", "portForwarding_" + jsonObj.id).data("portForwardingId", jsonObj.id);
template.find("#row_container #public_port").text(jsonObj.publicport);
template.find("#row_container_edit #public_port").text(jsonObj.publicport);
$template.find("#row_container #public_port").text(jsonObj.publicport);
$template.find("#row_container_edit #public_port").text(jsonObj.publicport);
template.find("#row_container #private_port").text(jsonObj.privateport);
template.find("#row_container_edit #private_port").val(jsonObj.privateport);
$template.find("#row_container #private_port").text(jsonObj.privateport);
$template.find("#row_container_edit #private_port").val(jsonObj.privateport);
template.find("#row_container #protocol").text(jsonObj.protocol);
template.find("#row_container_edit #protocol").text(jsonObj.protocol);
$template.find("#row_container #protocol").text(jsonObj.protocol);
$template.find("#row_container_edit #protocol").text(jsonObj.protocol);
template.find("#row_container #vm_name").text(jsonObj.vmname);
$template.find("#row_container #vm_name").text(jsonObj.vmname);
var virtualMachineId = jsonObj.virtualmachineid;
var $detailsTab = $("#right_panel_content #tab_content_details");
@ -247,7 +247,7 @@ function portForwardingJsonToTemplate(jsonObj, template) {
dataType: "json",
success: function(json) {
var instances = json.listvirtualmachinesresponse.virtualmachine;
var vmSelect = template.find("#row_container_edit #vm").empty();
var vmSelect = $template.find("#row_container_edit #vm").empty();
if (instances != null && instances.length > 0) {
for (var i = 0; i < instances.length; i++) {
var html = $("<option value='" + instances[i].id + "'>" + getVmName(instances[i].name, instances[i].displayname) + "</option>");
@ -258,10 +258,10 @@ function portForwardingJsonToTemplate(jsonObj, template) {
}
});
var $rowContainer = template.find("#row_container");
var $rowContainerEdit = template.find("#row_container_edit");
var $rowContainer = $template.find("#row_container");
var $rowContainerEdit = $template.find("#row_container_edit");
template.find("#delete_link").unbind("click").bind("click", function(event){
$template.find("#delete_link").unbind("click").bind("click", function(event){
var $spinningWheel = $rowContainer.find("#spinning_wheel");
$spinningWheel.find("#description").text("Deleting....");
$spinningWheel.show();
@ -269,7 +269,7 @@ function portForwardingJsonToTemplate(jsonObj, template) {
data: createURL("command=deletePortForwardingRule&id="+jsonObj.id),
dataType: "json",
success: function(json) {
template.slideUp("slow", function(){
$template.slideUp("slow", function(){
$(this).remove();
});
},
@ -281,17 +281,17 @@ function portForwardingJsonToTemplate(jsonObj, template) {
return false;
});
template.find("#edit_link").unbind("click").bind("click", function(event){
$template.find("#edit_link").unbind("click").bind("click", function(event){
$rowContainer.hide();
$rowContainerEdit.show();
});
template.find("#cancel_link").unbind("click").bind("click", function(event){
$template.find("#cancel_link").unbind("click").bind("click", function(event){
$rowContainer.show();
$rowContainerEdit.hide();
});
template.find("#save_link").unbind("click").bind("click", function(event){
$template.find("#save_link").unbind("click").bind("click", function(event){
// validate values
var isValid = true;
isValid &= validateNumber("Private Port", $rowContainerEdit.find("#private_port"), $rowContainerEdit.find("#private_port_errormsg"), 1, 65535);
@ -332,7 +332,7 @@ function portForwardingJsonToTemplate(jsonObj, template) {
$("body").stopTime(timerKey);
if (result.jobstatus == 1) { // Succeeded
var items = result.portforwardingrule;
portForwardingJsonToTemplate(items[0],template);
portForwardingJsonToTemplate(items[0],$template);
$spinningWheel.hide();
$rowContainerEdit.hide();
$rowContainer.show();
@ -402,38 +402,38 @@ function listLoadBalancerRules(ipObj) {
loadBalancerGrid.empty();
if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) {
var template = $("#load_balancer_template").clone(true);
loadBalancerJsonToTemplate(items[i], template);
loadBalancerGrid.append(template.show());
var $template = $("#load_balancer_template").clone(true);
loadBalancerJsonToTemplate(items[i], $template);
loadBalancerGrid.append($template.show());
}
}
}
});
}
function loadBalancerJsonToTemplate(jsonObj, template) {
//(loadBalancerIndex++ % 2 == 0)? template.find("#row_container").addClass("smallrow_even"): template.find("#row_container").addClass("smallrow_odd");
function loadBalancerJsonToTemplate(jsonObj, $template) {
//(loadBalancerIndex++ % 2 == 0)? $template.find("#row_container").addClass("smallrow_even"): $template.find("#row_container").addClass("smallrow_odd");
var loadBalancerId = jsonObj.id;
template.attr("id", "loadBalancer_" + loadBalancerId).data("loadBalancerId", loadBalancerId);
$template.attr("id", "loadBalancer_" + loadBalancerId).data("loadBalancerId", loadBalancerId);
template.find("#row_container #name").text(jsonObj.name);
template.find("#row_container_edit #name").val(jsonObj.name);
$template.find("#row_container #name").text(jsonObj.name);
$template.find("#row_container_edit #name").val(jsonObj.name);
template.find("#row_container #public_port").text(jsonObj.publicport);
template.find("#row_container_edit #public_port").text(jsonObj.publicport);
$template.find("#row_container #public_port").text(jsonObj.publicport);
$template.find("#row_container_edit #public_port").text(jsonObj.publicport);
template.find("#row_container #private_port").text(jsonObj.privateport);
template.find("#row_container_edit #private_port").val(jsonObj.privateport);
$template.find("#row_container #private_port").text(jsonObj.privateport);
$template.find("#row_container_edit #private_port").val(jsonObj.privateport);
template.find("#row_container #algorithm").text(jsonObj.algorithm);
template.find("#row_container_edit #algorithm").val(jsonObj.algorithm);
$template.find("#row_container #algorithm").text(jsonObj.algorithm);
$template.find("#row_container_edit #algorithm").val(jsonObj.algorithm);
template.find("#manage_link").unbind("click").bind("click", function(event){
var managementArea = template.find("#management_area");
var vmSubgrid = managementArea.find("#grid_content");
if(managementArea.css("display") == "none") {
vmSubgrid.empty();
$template.find("#manage_link").unbind("click").bind("click", function(event){
var $managementArea = $template.find("#management_area");
var $vmSubgrid = $managementArea.find("#grid_content");
if($managementArea.css("display") == "none") {
$vmSubgrid.empty();
$.ajax({
cache: false,
data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId),
@ -442,28 +442,28 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
var instances = json.listloadbalancerruleinstancesresponse.loadbalancerruleinstance;
if (instances != null && instances.length > 0) {
for (var i = 0; i < instances.length; i++) {
var lbVmTemplate = $("#load_balancer_vm_template").clone();
var $lbVmTemplate = $("#load_balancer_vm_template").clone();
var obj = {"loadBalancerId": loadBalancerId, "vmId": instances[i].id, "vmName": getVmName(instances[i].name, instances[i].displayname), "vmPrivateIp": instances[i].privateip};
lbVmObjToTemplate(obj, lbVmTemplate);
vmSubgrid.append(lbVmTemplate.show());
lbVmObjToTemplate(obj, $lbVmTemplate);
$vmSubgrid.append($lbVmTemplate.show());
}
}
}
});
managementArea.show();
$managementArea.show();
}
else {
managementArea.hide();
$managementArea.hide();
}
return false;
});
//???
var loadingContainer = template.find("#loading_container");
var rowContainer = template.find("#row_container");
var rowContainerEdit = template.find("#row_container_edit");
var loadingContainer = $template.find("#loading_container");
var rowContainer = $template.find("#row_container");
var rowContainerEdit = $template.find("#row_container_edit");
template.find("#delete_link").unbind("click").bind("click", function(event){
$template.find("#delete_link").unbind("click").bind("click", function(event){
loadingContainer.find(".adding_text").text("Deleting....");
loadingContainer.show();
rowContainer.hide();
@ -487,7 +487,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
} else {
$("body").stopTime(timerKey);
if (result.jobstatus == 1) { // Succeeded
template.slideUp("slow", function() {
$template.slideUp("slow", function() {
$(this).remove();
});
} else if (result.jobstatus == 2) { // Failed
@ -511,24 +511,24 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
return false;
});
template.find("#edit_link").unbind("click").bind("click", function(event){
$template.find("#edit_link").unbind("click").bind("click", function(event){
rowContainer.hide();
rowContainerEdit.show();
});
template.find("#cancel_link").unbind("click").bind("click", function(event){
$template.find("#cancel_link").unbind("click").bind("click", function(event){
rowContainer.show();
rowContainerEdit.hide();
});
template.find("#save_link").unbind("click").bind("click", function(event){
$template.find("#save_link").unbind("click").bind("click", function(event){
// validate values
var isValid = true;
isValid &= validateString("Name", rowContainerEdit.find("#name"), rowContainerEdit.find("#name_errormsg"));
isValid &= validateNumber("Private Port", rowContainerEdit.find("#private_port"), rowContainerEdit.find("#private_port_errormsg"), 1, 65535);
if (!isValid) return;
var loadingContainer = template.find(".adding_loading");
var loadingContainer = $template.find(".adding_loading");
loadingContainer.find(".adding_text").text("Saving....");
loadingContainer.show();
rowContainerEdit.hide();
@ -562,7 +562,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
$("body").stopTime(timerKey);
if (result.jobstatus == 1) { // Succeeded
var items = result.loadbalancer;
loadBalancerJsonToTemplate(items[0],template);
loadBalancerJsonToTemplate(items[0],$template);
loadingContainer.hide();
rowContainer.show();
} else if (result.jobstatus == 2) { //Fail
@ -589,57 +589,56 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
});
});
refreshLbVmSelect(template, jsonObj.id);
refreshLbVmSelect($template, jsonObj.id);
template.find("#add_vm_to_lb_row #add_link").unbind("click").bind("click", function(event){
var vmOption = template.find("#add_vm_to_lb_row #vm_select option:selected");
$template.find("#add_vm_to_lb_row #assign_link").unbind("click").bind("click", function(event){
var vmOption = $template.find("#add_vm_to_lb_row #vm_select option:selected");
var vmId = vmOption.val();
var vmName = vmOption.data("vmName");
var vmPrivateIp = vmOption.data("vmPrivateIp");
if(vmId == null || vmId.length == 0)
return;
var loading = template.find("#adding_loading").show();
var rowContainer = template.find("#adding_row_container").hide();
var $spinningWheel = $template.find("#add_vm_to_lb_row #spinning_wheel");
$spinningWheel.show();
$.ajax({
data: createURL("command=assignToLoadBalancerRule&id="+loadBalancerId+"&virtualmachineid="+vmId),
dataType: "json",
success: function(json) {
var lbInstanceJSON = jsonObj.assigntoloadbalancerruleresponse;
var timerKey = "lbInstanceNew"+lbInstancejsonObj.jobid;
var lbInstanceJSON = json.assigntoloadbalancerruleresponse;
var jobId = lbInstanceJSON.jobid;
var timerKey = "assignToLoadBalancerRuleJob_"+jobId;
$("body").everyTime(
5000,
timerKey,
function() {
$.ajax({
data: createURL("command=queryAsyncJobResult&jobId="+lbInstancejsonObj.jobid),
data: createURL("command=queryAsyncJobResult&jobId="+jobId),
dataType: "json",
success: function(json) {
var result = jsonObj.queryasyncjobresultresponse;
var result = json.queryasyncjobresultresponse;
if (result.jobstatus == 0) {
return; //Job has not completed
} else {
$("body").stopTime(timerKey);
if (result.jobstatus == 1) { // Succeeded
var lbVmTemplate = $("#load_balancer_vm_template").clone();
var $lbVmTemplate = $("#load_balancer_vm_template").clone();
var obj = {"loadBalancerId": loadBalancerId, "vmId": vmId, "vmName": vmName, "vmPrivateIp": vmPrivateIp};
lbVmObjToTemplate(obj, lbVmTemplate);
template.find("#management_area #grid_content").append(lbVmTemplate.show());
refreshLbVmSelect(template, loadBalancerId);
loading.hide();
rowContainer.show();
lbVmObjToTemplate(obj, $lbVmTemplate);
$template.find("#management_area #grid_content").append($lbVmTemplate.show());
refreshLbVmSelect($template, loadBalancerId);
$spinningWheel.hide();
} else if (result.jobstatus == 2) { // Failed
$("#dialog_error").html("<p style='color:red'><b>Operation error:</b></p><br/><p style='color:red'>"+ sanitizeXSS(result.jobresult)+"</p>").dialog("open");
loading.hide();
rowContainer.show();
$spinningWheel.hide();
}
}
},
error: function(XMLHttpResponse) {
handleError(XMLHttpResponse);
$("body").stopTime(timerKey);
loading.hide();
rowContainer.show();
$spinningWheel.hide();
}
});
},
@ -648,8 +647,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
},
error: function(XMLHttpResponse) {
handleError(XMLHttpResponse);
loading.hide();
rowContainer.show();
$spinningWheel.hide();
}
});
return false;
@ -666,15 +664,15 @@ function refreshCreateLoadBalancerRow() {
}
function lbVmObjToTemplate(obj, template) {
template.find("#vm_name").text(obj.vmName);
template.find("#vm_private_ip").text(obj.vmPrivateIp);
template.find("#remove_link").bind("click", function(event){
function lbVmObjToTemplate(obj, $template) {
$template.find("#vm_name").text(obj.vmName);
$template.find("#vm_private_ip").text(obj.vmPrivateIp);
$template.find("#remove_link").bind("click", function(event){
var $spinningWheel = $template.find("#row_container").find("#spinning_wheel");
$spinningWheel.show();
//var loading = template.find("#deleting_loading").show();
//var rowContainer = template.find("#deleting_row_container").hide();
//var loading = $template.find("#deleting_loading").show();
//var rowContainer = $template.find("#deleting_row_container").hide();
$.ajax({
data: createURL("command=removeFromLoadBalancerRule&id="+obj.loadBalancerId+"&virtualmachineid="+obj.vmId),
@ -697,7 +695,7 @@ function lbVmObjToTemplate(obj, template) {
$("body").stopTime(timerKey);
if (result.jobstatus == 1) { // Succeeded
refreshLbVmSelect($("#loadBalancer_" + obj.loadBalancerId), obj.loadBalancerId);
template.fadeOut("slow", function(event) {
$template.fadeOut("slow", function(event) {
$(this).remove();
});
} else if (result.jobstatus == 2) { // Failed
@ -725,8 +723,8 @@ function lbVmObjToTemplate(obj, template) {
});
}
function refreshLbVmSelect(template, loadBalancerId) {
var vmSelect = template.find("#add_vm_to_lb_row #vm_select");
function refreshLbVmSelect($template, loadBalancerId) {
var vmSelect = $template.find("#add_vm_to_lb_row #vm_select");
// Load the select box with the VMs that haven't been applied a LB rule to.
$.ajax({
cache: false,