apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

new UI - load balancer - implement manage link. Clicking manage link will expand a subgrid of instances assigned to this load balancer policy.

Browse Source
This commit is contained in:
Jessica Wang 2010-09-19 00:00:00 -07:00
parent 91c7947b33
commit ea4062ca0a
2 changed files with 139 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/new/jsp/ip_address.jsp
View File

@ -278,9 +278,7 @@
<a id="delete_link" href="#">Delete</a></div> <a id="delete_link" href="#">Delete</a></div>
<div class="row_celltitles"> <div class="row_celltitles">
<a id="edit_link" href="#">Edit</a></div> <a id="edit_link" href="#">Edit</a></div>
</div> </div>
<div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel"> <div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
<div class="gridrow_loader"> <div class="gridrow_loader">
</div> </div>
@ -288,10 +286,36 @@
Waiting &hellip; Waiting &hellip;
</p> </p>
</div> </div>
</div>
<div class="grid_rows odd" id="row_container_edit" style="display:none">
</div> <div class="grid_row_cell" style="width: 25%;">
<div class="grid_detailspanel" id="vm_subgrid" style="display: none;"> <input id="name" class="text" style="width: 90%;" type="text" />
<div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
</div>
<div class="grid_row_cell" style="width: 15%;">
<div class="row_celltitles" id="public_port">8080</div>
</div>
<div class="grid_row_cell" style="width: 15%;">
<input id="private_port" class="text" style="width: 90%;" type="text" />
<div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
</div>
<div class="grid_row_cell" style="width: 15%;">
<select id="algorithm_select" class="select" style="width: 90%;">
<option value="roundrobin">roundrobin</option>
<option value="leastconn">leastconn</option>
<option value="source">source</option>
</select>
</div>
<div class="grid_row_cell" style="width: 29%;">
<div class="row_celltitles">
<a id="save_link" href="#">Save</a>
</div>
<div class="row_celltitles">
<a id="cancel_link" href="#">Cancel</a>
</div>
</div>
</div>
<div class="grid_detailspanel" id="management_area" style="display: none;">
<div class="grid_details_pointer"> <div class="grid_details_pointer">
</div> </div>
<div class="grid_detailsbox"> <div class="grid_detailsbox">
@ -317,7 +341,7 @@
Assigning instance to load balancer policy &hellip;</p> Assigning instance to load balancer policy &hellip;</p>
</div> </div>
</div> </div>
<div id="vm_subgrid" class="ip_description_managearea" style="display: none;"> <div id="grid_content" class="ip_description_managearea">
</div> </div>
</div> </div>
</div> </div>
@ -325,14 +349,16 @@
<!-- Load Balancer Template (end) --> <!-- Load Balancer Template (end) -->
<!-- Load Balancer's VM subgrid template (begin) --> <!-- Load Balancer's VM subgrid template (begin) -->
<div class="grid_details_row odd" style="display:none"> <div id="load_balancer_vm_template" class="grid_details_row odd" style="display:none">
<div class="grid_row_cell" style="width: 9%;"> <div class="grid_row_cell" style="width: 9%;">
<div class="row_celltitles"> <div class="row_celltitles">
<img src="images/network_managevmicon.gif" /></div> <img src="images/network_managevmicon.gif" /></div>
</div> </div>
<div class="grid_row_cell" style="width: 60%;"> <div class="grid_row_cell" style="width: 50%;">
<div class="row_celltitles"> <div class="row_celltitles" id="vm_name"></div>
1-2-2-TEST</div> </div>
<div class="grid_row_cell" style="width: 10%;">
<div class="row_celltitles" id="vm_private_ip"></div>
</div> </div>
<div class="grid_row_cell" style="width: 30%;"> <div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles"> <div class="row_celltitles">

123
ui/new/scripts/cloud.core2.ipaddress.js
View File

@ -122,8 +122,7 @@ function afterLoadIpJSP() {
$(this).remove(); $(this).remove();
}); });
} }
}); });
return false; return false;
}); });
@ -429,40 +428,37 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
template.find("#row_container #algorithm").text(jsonObj.algorithm); template.find("#row_container #algorithm").text(jsonObj.algorithm);
template.find("#row_container_edit #algorithm").val(jsonObj.algorithm); template.find("#row_container_edit #algorithm").val(jsonObj.algorithm);
/* template.find("#manage_link").unbind("click").bind("click", function(event){
template.find("#manage_link").unbind("click").bind("click", function(event){ var managementArea = template.find("#management_area");
var vmSubgrid = template.find("#vm_subgrid"); var vmSubgrid = managementArea.find("#grid_content");
if(vmSubgrid.css("display") == "none") { if(managementArea.css("display") == "none") {
vmSubgrid.empty(); vmSubgrid.empty();
$.ajax({ $.ajax({
cache: false, cache: false,
data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId), data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
var instances = jsonObj.listloadbalancerruleinstancesresponse.loadbalancerruleinstance; var instances = json.listloadbalancerruleinstancesresponse.loadbalancerruleinstance;
if (instances != null && instances.length > 0) { if (instances != null && instances.length > 0) {
for (var i = 0; i < instances.length; i++) { 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}; var obj = {"loadBalancerId": loadBalancerId, "vmId": instances[i].id, "vmName": getVmName(instances[i].name, instances[i].displayname), "vmPrivateIp": instances[i].privateip};
lbVmObjToTemplate(obj, lbVmTemplate); lbVmObjToTemplate(obj, lbVmTemplate);
template.find("#vm_subgrid").append(lbVmTemplate.show()); vmSubgrid.append(lbVmTemplate.show());
} }
} }
} }
}); });
vmSubgrid.show(); managementArea.show();
} }
else { else {
vmSubgrid.hide(); managementArea.hide();
} }
var addVmToLbRow = template.find("#add_vm_to_lb_row");
(addVmToLbRow.css("display") == "none")?addVmToLbRow.show():addVmToLbRow.hide();
return false; return false;
}); });
//???
var loadingContainer = template.find("#loading_container"); var loadingContainer = template.find("#loading_container");
var rowContainer = template.find("#row_container"); var rowContainer = template.find("#row_container");
var rowContainerEdit = template.find("#row_container_edit"); var rowContainerEdit = template.find("#row_container_edit");
@ -548,7 +544,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
array1.push("&algorithm=" + algorithm); array1.push("&algorithm=" + algorithm);
$.ajax({ $.ajax({
data: createURL("command=updateLoadBalancerRule"+array1.join("")), data: createURL("command=updateLoadBalancerRule"+array1.join("")),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
var jobId = jsonObj.updateloadbalancerruleresponse.jobid; var jobId = jsonObj.updateloadbalancerruleresponse.jobid;
@ -606,7 +602,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
var rowContainer = template.find("#adding_row_container").hide(); var rowContainer = template.find("#adding_row_container").hide();
$.ajax({ $.ajax({
data: createURL("command=assignToLoadBalancerRule&id="+loadBalancerId+"&virtualmachineid="+vmId), data: createURL("command=assignToLoadBalancerRule&id="+loadBalancerId+"&virtualmachineid="+vmId),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
var lbInstanceJSON = jsonObj.assigntoloadbalancerruleresponse; var lbInstanceJSON = jsonObj.assigntoloadbalancerruleresponse;
@ -628,7 +624,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
var lbVmTemplate = $("#load_balancer_vm_template").clone(); var lbVmTemplate = $("#load_balancer_vm_template").clone();
var obj = {"loadBalancerId": loadBalancerId, "vmId": vmId, "vmName": vmName, "vmPrivateIp": vmPrivateIp}; var obj = {"loadBalancerId": loadBalancerId, "vmId": vmId, "vmName": vmName, "vmPrivateIp": vmPrivateIp};
lbVmObjToTemplate(obj, lbVmTemplate); lbVmObjToTemplate(obj, lbVmTemplate);
template.find("#vm_subgrid").append(lbVmTemplate.show()); template.find("#management_area #grid_content").append(lbVmTemplate.show());
refreshLbVmSelect(template, loadBalancerId); refreshLbVmSelect(template, loadBalancerId);
loading.hide(); loading.hide();
rowContainer.show(); rowContainer.show();
@ -658,7 +654,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
}); });
return false; return false;
}); });
*/ //???
} }
function refreshCreateLoadBalancerRow() { function refreshCreateLoadBalancerRow() {
@ -670,4 +666,87 @@ 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){
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();
$.ajax({
data: createURL("command=removeFromLoadBalancerRule&id="+obj.loadBalancerId+"&virtualmachineid="+obj.vmId),
dataType: "json",
success: function(json) {
var lbJSON = json.removefromloadbalancerruleresponse;
var timerKey = "removeVmFromLb"+obj.vmId;
$("body").everyTime(
5000,
timerKey,
function() {
$.ajax({
data: createURL("command=queryAsyncJobResult&jobId="+lbJSON.jobid),
dataType: "json",
success: function(json) {
var result = json.queryasyncjobresultresponse;
if (result.jobstatus == 0) {
return; //Job has not completed
} else {
$("body").stopTime(timerKey);
if (result.jobstatus == 1) { // Succeeded
refreshLbVmSelect($("#loadBalancer_" + obj.loadBalancerId), obj.loadBalancerId);
template.fadeOut("slow", function(event) {
$(this).remove();
});
} else if (result.jobstatus == 2) { // Failed
$("#dialog_error").html("<p style='color:red'>We were unable to remove the Virtual Instance: "+vmName + " from your load balancer policy. Please try again.").dialog("open");
$spinningWheel.hide();
}
}
},
error: function(XMLHttpResponse) {
$("body").stopTime(timerKey);
handleError(XMLHttpResponse);
$spinningWheel.hide();
}
});
},
0
);
},
error: function(XMLHttpResponse) {
handleError(XMLHttpResponse);
$spinningWheel.hide();
}
});
return false;
});
}
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,
data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId+"&applied=false"),
dataType: "json",
success: function(json) {
var instances = json.listloadbalancerruleinstancesresponse.loadbalancerruleinstance;
vmSelect.empty();
if (instances != null && instances.length > 0) {
for (var i = 0; i < instances.length; i++) {
var vmName = getVmName(instances[i].name, instances[i].displayname);
html = $("<option value='" + instances[i].id + "'>" + vmName + "</option>")
html.data("vmPrivateIp", instances[i].privateip).data("vmName", vmName);
vmSelect.append(html);
}
} else {
vmSelect.append("<option value=''>None Available</option>");
}
}
});
}
//***** Load Balancer tab (end) ************************************************************************************************************ //***** Load Balancer tab (end) ************************************************************************************************************