etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

resource page - implement add cluster dialog.

This commit is contained in:
Jessica Wang 2010-12-30 11:46:47 -08:00
parent 225f15899d
commit 236261c0a5
2 changed files with 271 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
ui/jsp/resource.jsp
View File

@ -65,7 +65,7 @@
</div>
</div>
<div class="dbrow_cell" style="width: 10%; border: none;">
<div id="add_pod_shortcut" class="resadd_button" title="Add Cluster"></div>
<div id="add_cluster_shortcut" class="resadd_button" title="Add Cluster"></div>
</div>
</div>
@ -595,6 +595,106 @@
</div>
<!-- Add Pod Dialog in resource page (end) -->
<!-- Add Cluster Dialog in resource page (begin) -->
<div id="dialog_add_external_cluster_in_resource_page" title="Add Cluster" style="display: none">
<p>
Add a hypervisor managed cluster for zone <b><span id="zone_name"></span></b>
</p>
<div class="dialog_formcontent">
<form action="#" method="post" id="form_acquire">
<ol>
<li>
<label for="cluster_hypervisor">Hypervisor:</label>
<select class="select" id="cluster_hypervisor">
<option value="XenServer" SELECTED>Xen Server</option>
<option value="KVM">KVM</option>
<option value="VmWare">VMware</option>
</select>
</li>
<li input_group="vmware">
<label>
Cluster Type:</label>
<select class="select" id="type_dropdown">
<option value="CloudManaged">Cloud.com Managed</option>
<option value="ExternalManaged" SELECTED>vSphere Managed</option>
</select>
<div id="pod_dropdown_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li>
<label>
Zone:</label>
<select class="select" id="zone_dropdown">
</select>
<div id="zone_dropdown_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li>
<label>
Pod:</label>
<select class="select" id="pod_dropdown">
</select>
<div id="pod_dropdown_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li input_group="vmware" input_sub_group="external">
<label for="cluster_hostname">
vCenter Server:</label>
<input class="text" type="text" name="cluster_hostname" id="cluster_hostname" />
<div id="cluster_hostname_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li input_group="vmware" input_sub_group="external">
<label for="cluster_username">
vCenter User:</label>
<input class="text" type="text" name="cluster_username" id="cluster_username" />
<div id="cluster_username_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li input_group="vmware" input_sub_group="external">
<label for="cluster_password">
Password:</label>
<input class="text" type="password" name="cluster_password" id="cluster_password" autocomplete="off" />
<div id="cluster_password_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li input_group="vmware" input_sub_group="external">
<label for="cluster_datacenter">
vCenter Datacenter:</label>
<input class="text" type="text" name="cluster_datacenter" id="cluster_datacenter" />
<div id="cluster_datacenter_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li>
<label for="cluster_name" id="cluster_name_label">
vCenter Cluster:</label>
<input class="text" type="text" name="cluster_name" id="cluster_name" />
<div id="cluster_name_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
</ol>
</form>
</div>
<!--Loading box-->
<div id="spinning_wheel" class="ui_dialog_loaderbox" style="display: none;">
<div class="ui_dialog_loader">
</div>
<p>
Adding....</p>
</div>
<!--Confirmation msg box-->
<!--Note: for error msg, just have to add error besides everything for eg. add error(class) next to ui_dialog_messagebox error, ui_dialog_msgicon error, ui_dialog_messagebox_text error. -->
<div id="info_container" class="ui_dialog_messagebox error" style="display: none;">
<div id="icon" class="ui_dialog_msgicon error">
</div>
<div id="info" class="ui_dialog_messagebox_text error">
(info)</div>
</div>
</div>
<!-- Add Cluster Dialog in resource page (end) -->
<!-- Add Host Dialog in resource page (begin) -->
<div id="dialog_add_host_in_resource_page" title="Add Host" style="display: none">
<div class="dialog_formcontent">

170
ui/scripts/cloud.core.resource.js
View File

@ -507,10 +507,12 @@ function afterLoadResourceJSP() {
initDialog("dialog_update_cert", 450);
initDialog("dialog_add_pod_in_resource_page", 370);
initDialog("dialog_add_external_cluster_in_resource_page", 320);
initDialog("dialog_add_host_in_resource_page");
initDialog("dialog_add_pool_in_resource_page");
initAddPodShortcut();
initAddClusterShortcut();
initAddHostShortcut();
initAddPrimaryStorageShortcut();
@ -679,6 +681,174 @@ function initAddPodShortcut() {
});
}
//???
function initAddClusterShortcut() {
var $dialogAddCluster = $("#dialog_add_external_cluster_in_resource_page");
var $zoneDropdown = $dialogAddCluster.find("#zone_dropdown");
var $podDropdown = $dialogAddCluster.find("#pod_dropdown");
$.ajax({
data: createURL("command=listZones&available=true"),
dataType: "json",
async: false,
success: function(json) {
var items = json.listzonesresponse.zone;
if (items != null && items.length > 0) {
for(var i=0; i<items.length; i++)
$zoneDropdown.append("<option value='" + items[i].id + "'>" + fromdb(items[i].name) + "</option>");
}
}
});
$zoneDropdown.bind("change", function(event) {
var zoneId = $(this).val();
if(zoneId == null)
return;
$.ajax({
data: createURL("command=listZones&id="+zoneId),
dataType: "json",
success: function(json) {
var zoneObj = json.listzonesresponse.zone[0];
if(zoneObj.networktype == "Basic") { //basic-mode network (pod-wide VLAN)
$dialogAddCluster.find("#guestip_container, #guestnetmask_container, #guestgateway_container").show();
}
else if(zoneObj.networktype == "Advanced") { //advanced-mode network (zone-wide VLAN)
$dialogAddCluster.find("#guestip_container, #guestnetmask_container, #guestgateway_container").hide();
}
}
});
$.ajax({
data: createURL("command=listPods&zoneid="+zoneId),
dataType: "json",
async: false,
success: function(json) {
var pods = json.listpodsresponse.pod;
$podDropdown.empty();
if(pods != null && pods.length > 0) {
for(var i=0; i<pods.length; i++)
$podDropdown.append("<option value='" + pods[i].id + "'>" + fromdb(pods[i].name) + "</option>");
}
}
});
});
var $hypervisorDropdown = $dialogAddCluster.find("#cluster_hypervisor");
$hypervisorDropdown.change(function() {
if($(this).val() == "VmWare") {
$('li[input_group="vmware"]', $dialogAddCluster).show();
$dialogAddCluster.find("#type_dropdown").change();
} else {
$('li[input_group="vmware"]', $dialogAddCluster).hide();
$("#cluster_name_label", $dialogAddCluster).text("Cluster:");
}
});
$dialogAddCluster.find("#type_dropdown").change(function() {
if($(this).val() == "ExternalManaged") {
$('li[input_sub_group="external"]', $dialogAddCluster).show();
$("#cluster_name_label", $dialogAddCluster).text("vCenter Cluster:");
} else {
$('li[input_sub_group="external"]', $dialogAddCluster).hide();
$("#cluster_name_label", $dialogAddCluster).text("Cluster:");
}
});
$("#add_cluster_shortcut").unbind("click").bind("click", function(event) {
$dialogAddCluster.find("#info_container").hide();
$zoneDropdown.change();
$hypervisorDropdown.change();
$dialogAddCluster.dialog('option', 'buttons', {
"Add": function() {
var $thisDialog = $(this);
// validate values
var hypervisor = $thisDialog.find("#cluster_hypervisor").val();
var clusterType="CloudManaged";
if(hypervisor == "VmWare")
clusterType = $thisDialog.find("#type_dropdown").val();
var isValid = true;
if(hypervisor == "VmWare" && clusterType != "CloudManaged") {
isValid &= validateString("vCenter Server", $thisDialog.find("#cluster_hostname"), $thisDialog.find("#cluster_hostname_errormsg"));
isValid &= validateString("vCenter user", $thisDialog.find("#cluster_username"), $thisDialog.find("#cluster_username_errormsg"));
isValid &= validateString("Password", $thisDialog.find("#cluster_password"), $thisDialog.find("#cluster_password_errormsg"));
isValid &= validateString("Datacenter", $thisDialog.find("#cluster_datacenter"), $thisDialog.find("#cluster_datacenter_errormsg"));
}
isValid &= validateString("Cluster name", $thisDialog.find("#cluster_name"), $thisDialog.find("#cluster_name_errormsg"));
if (!isValid)
return;
$thisDialog.find("#spinning_wheel").show();
var array1 = [];
array1.push("&hypervisor="+hypervisor);
array1.push("&clustertype=" + clusterType);
var zoneId = $thisDialog.find("#zone_dropdown").val();;
array1.push("&zoneId="+zoneId);
//expand zone in left menu tree (to show pod, cluster under the zone)
var $zoneNode = $("#leftmenu_zone_tree").find("#tree_container").find("#zone_" + zoneId);
if($zoneNode.find("#zone_arrow").hasClass("expanded_close"))
$zoneNode.find("#zone_arrow").click();
var podId = $thisDialog.find("#pod_dropdown").val();
array1.push("&podId="+podId);
var clusterName = trim($thisDialog.find("#cluster_name").val());
if(hypervisor == "VmWare" && clusterType != "CloudManaged") {
var username = trim($thisDialog.find("#cluster_username").val());
array1.push("&username="+todb(username));
var password = trim($thisDialog.find("#cluster_password").val());
array1.push("&password="+todb(password));
var hostname = trim($thisDialog.find("#cluster_hostname").val());
var dcName = trim($thisDialog.find("#cluster_datacenter").val());
var url;
if(hostname.indexOf("http://")==-1)
url = "http://" + todb(hostname);
else
url = hostname;
url += "/" + todb(dcName) + "/" + todb(clusterName);
array1.push("&url=" + todb(url));
clusterName = hostname + "/" + dcName + "/" + clusterName
}
array1.push("&clustername=" + todb(clusterName));
$.ajax({
data: createURL("command=addCluster" + array1.join("")),
dataType: "json",
success: function(json) {
$thisDialog.find("#spinning_wheel").hide();
$thisDialog.dialog("close");
var clusterTotal = parseInt($("#cluster_total").text());
clusterTotal++;
$("#cluster_total").text(clusterTotal.toString());
//clickClusterNodeAfterAddHost("new_cluster_radio", podId, clusterName, null, $thisDialog);
},
error: function(XMLHttpResponse) {
handleError(XMLHttpResponse, function() {
handleErrorInDialog(XMLHttpResponse, $thisDialog);
});
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}).dialog("open");
return false;
});
}
function initAddHostShortcut() {
var $dialogAddHost = $("#dialog_add_host_in_resource_page");