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

new UI - resources page - implement add pod action.

This commit is contained in:
Jessica Wang 2010-10-15 11:24:40 -07:00
parent 8555eb1913
commit 0866b8e60a
4 changed files with 175 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/new/index.jsp
View File

@ -220,11 +220,11 @@ long milliseconds = new Date().getTime();
Destroy VM</div>
</div>
</div>
<div class="actionpanel_button_wrapper" id="add_link" style="display: block; float: right;
<div class="actionpanel_button_wrapper" id="help_link" style="display: block; float: right;
background: none;">
<div class="actionpanel_button">
<div class="actionpanel_button_icons">
<img src="images/help_actionicon.png" alt="Add" /></div>
<img src="images/help_actionicon.png" alt="Help" /></div>
<div class="actionpanel_button_links">
<%=t.t("help")%></div>
</div>

48
ui/new/jsp/resource.jsp
View File

@ -674,22 +674,40 @@
</div>
</div>
<!-- END Add Zone Dialog -->
<!-- treenode template (begin) -->
<div id="treenode_template" class="tree_levelspanel" style="display: none">
<div class="tree_levelsbox" style="margin-left: 20px;">
<div id="domain_title_container" class="tree_levels">
<div id="domain_expand_icon" class="zonetree_closedarrows">
</div>
<div id="domain_name" class="tree_links">
Domain Name</div>
</div>
<div id="domain_children_container" style="display: none">
</div>
</div>
<!-- Add Pod Dialog -->
<div id="dialog_add_pod" title="Add Pod" style="display:none">
<p>Add a new pod for zone: <b><span id="add_pod_zone_name"></span></b></p>
<div class="dialog_formcontent">
<form action="#" method="post" id="form_acquire">
<ol>
<li>
<label for="user_name" style="width:115px;">Name:</label>
<input class="text" type="text" name="add_pod_name" id="add_pod_name"/>
<div id="add_pod_name_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label for="add_pod_gateway" style="width:115px;">Gateway:</label>
<input class="text" type="text" id="add_pod_gateway"/>
<div id="add_pod_gateway_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label for="user_name" style="width:115px;">CIDR:</label>
<input class="text" type="text" name="add_pod_cidr" id="add_pod_cidr"/>
<div id="add_pod_cidr_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label for="user_name" style="width:115px;">Private IP Range:</label>
<input class="text" style="width:67px" type="text" name="add_pod_startip" id="add_pod_startip"/><span>-</span>
<input class="text" style="width:67px" type="text" name="add_pod_endip" id="add_pod_endip"/>
<div id="add_pod_startip_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
<div id="add_pod_endip_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
</ol>
</form>
</div>
</div>
<!-- treenode template (end) -->
<!-- END Add Pod Dialog -->
<!-- Zonetree Template (begin) -->
<div class="zonetree_contentbox" id="zonetree" style="display: none">
<div id="zones_container">

7
ui/new/scripts/cloud.core2.js
View File

@ -483,7 +483,12 @@ function clearLeftMenu() {
function clearMiddleMenu() {
$("#midmenu_container").empty();
$("#midmenu_action_link").hide();
$("#midmenu_add_link").hide();
$("#midmenu_add_link").unbind("click").hide();
$("#midmenu_add2_link").unbind("click").hide();
$("#midmenu_startvm_link").unbind("click").hide();
$("#midmenu_stopvm_link").unbind("click").hide();
$("#midmenu_rebootvm_link").unbind("click").hide();
$("#midmenu_destoryvm_link").unbind("click").hide();
}
function clearRightPanel() {

150
ui/new/scripts/cloud.core2.resource.js
View File

@ -12,7 +12,7 @@ function afterLoadResourceJSP() {
var pageArray = [$zonePage, $podPage, $clusterPage, $hostPage, $primarystoragePage, $systemvmPage];
var pageLabelArray = ["Zone", "Pod", "Cluster", "Host", "Primary Storage", "System VM"];
function showPage($pageToShow) {
function showPage($pageToShow, jsonObj) {
for(var i=0; i<pageArray.length; i++) {
if(pageArray[i].attr("id") == $pageToShow.attr("id")) {
$rightPanelHeaderLabel.text(pageLabelArray[i]);
@ -21,7 +21,124 @@ function afterLoadResourceJSP() {
else {
pageArray[i].hide();
}
}
$pageToShow.data("jsonObj", jsonObj);
}
if($pageToShow.attr("id") == "zone_page") {
//***** Add Pod (begin) *****
$("#midmenu_add_link").find("#label").text("Add Pod");
$("#midmenu_add_link").data("jsonObj", jsonObj).show();
$("#midmenu_add_link").unbind("click").bind("click", function(event) {
var zoneObj = $(this).data("jsonObj");
$("#dialog_add_pod").find("#add_pod_zone_name").text(fromdb(zoneObj.name));
$("#dialog_add_pod #add_pod_name, #dialog_add_pod #add_pod_cidr, #dialog_add_pod #add_pod_startip, #dialog_add_pod #add_pod_endip, #add_pod_gateway").val("");
$("#dialog_add_pod")
.dialog('option', 'buttons', {
"Add": function() {
var thisDialog = $(this);
// validate values
var isValid = true;
isValid &= validateString("Name", thisDialog.find("#add_pod_name"), thisDialog.find("#add_pod_name_errormsg"));
isValid &= validateCIDR("CIDR", thisDialog.find("#add_pod_cidr"), thisDialog.find("#add_pod_cidr_errormsg"));
isValid &= validateIp("Start IP Range", thisDialog.find("#add_pod_startip"), thisDialog.find("#add_pod_startip_errormsg")); //required
isValid &= validateIp("End IP Range", thisDialog.find("#add_pod_endip"), thisDialog.find("#add_pod_endip_errormsg"), true); //optional
isValid &= validateIp("Gateway", thisDialog.find("#add_pod_gateway"), thisDialog.find("#add_pod_gateway_errormsg")); //required when creating
if (!isValid)
return;
thisDialog.dialog("close");
var name = trim(thisDialog.find("#add_pod_name").val());
var cidr = trim(thisDialog.find("#add_pod_cidr").val());
var startip = trim(thisDialog.find("#add_pod_startip").val());
var endip = trim(thisDialog.find("#add_pod_endip").val()); //optional
var gateway = trim(thisDialog.find("#add_pod_gateway").val());
var array1 = [];
array1.push("&zoneId="+zoneObj.id);
array1.push("&name="+todb(name));
array1.push("&cidr="+encodeURIComponent(cidr));
array1.push("&startIp="+encodeURIComponent(startip));
if (endip != null && endip.length > 0)
array1.push("&endIp="+encodeURIComponent(endip));
array1.push("&gateway="+encodeURIComponent(gateway));
var template = $("#pod_template").clone(true);
var loadingImg = template.find(".adding_loading");
var row_container = template.find("#row_container");
$("#zone_" + zoneObj.id + " #zone_content").show();
$("#zone_" + zoneObj.id + " #pods_container").prepend(template.show());
$("#zone_" + zoneObj.id + " #zone_expand").removeClass().addClass("zonetree_openarrows");
loadingImg.show();
row_container.hide();
template.fadeIn("slow");
$.ajax({
data: createURL("command=createPod&response=json"+array1.join("")),
dataType: "json",
success: function(json) {
var item = json.createpodresponse;
podJSONToTreeNode(item, template);
loadingImg.hide();
row_container.show();
forceLogout = false; // We don't force a logout if pod(s) exit.
if (forceLogout) {
$("#dialog_confirmation")
.html("<p>You have successfully added your first Zone and Pod. After clicking 'OK', this UI will automatically refresh to give you access to the rest of cloud features.</p>")
.dialog('option', 'buttons', {
"OK": function() {
$(this).dialog("close");
window.location.reload();
}
}).dialog("open");
}
},
error: function(XMLHttpResponse) {
handleError(XMLHttpResponse);
template.slideUp("slow", function() {
$(this).remove();
});
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}).dialog("open");
return false;
});
//***** Add Pod (end) *****
$("#midmenu_add2_link").unbind("click").hide();
}
else if($pageToShow.attr("id") == "pod_page") {
//***** Add Host (begin) *****
$("#midmenu_add_link").find("#label").text("Add Host");
$("#midmenu_add_link").data("jsonObj", jsonObj).show();
$("#midmenu_add_link").unbind("click").bind("click", function(event) {
return false;
});
//***** Add Host (end) *****
//***** Add Primary Storage (begin) *****
$("#midmenu_add2_link").find("#label").text("Add Primary Storage");
$("#midmenu_add2_link").data("jsonObj", jsonObj).show();
$("#midmenu_add2_link").unbind("click").bind("click", function(event) {
return false;
});
//***** Add Primary Storage (end) *****
}
else {
$("#midmenu_add_link").unbind("click").hide();
$("#midmenu_add2_link").unbind("click").hide();
}
}
//***** build zone tree (begin) ***********************************************************************************************
@ -91,9 +208,9 @@ function afterLoadResourceJSP() {
template.attr("id", "pod_" + podid);
var ipRange = getIpRange(json.startip, json.endip);
template.data("id", podid).data("name", json.name);
template.data("id", podid).data("name", fromdb(json.name));
var podName = template.find("#pod_name").text(json.name);
var podName = template.find("#pod_name").text(fromdb(json.name));
podName.data("jsonObj", json);
$.ajax({
@ -194,8 +311,8 @@ function afterLoadResourceJSP() {
case "zone_name":
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
showPage($zonePage);
var jsonObj = target.data("jsonObj");
var jsonObj = target.data("jsonObj");
showPage($zonePage, jsonObj);
zoneJsonToDetailsTab(jsonObj);
zoneJsonToNetworkTab(jsonObj);
break;
@ -213,8 +330,8 @@ function afterLoadResourceJSP() {
case "pod_name" :
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
showPage($podPage);
var jsonObj = target.data("jsonObj");
showPage($podPage, jsonObj);
podJsonToDetailsTab(jsonObj);
break;
@ -231,9 +348,9 @@ function afterLoadResourceJSP() {
break;
case "cluster_name" :
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
showPage($clusterPage);
target.parent().parent().parent().addClass("selected");
var jsonObj = target.data("jsonObj");
showPage($clusterPage, jsonObj);
clusterJsonToDetailsTab(jsonObj);
break;
@ -250,9 +367,9 @@ function afterLoadResourceJSP() {
break;
case "host_name" :
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
showPage($hostPage);
target.parent().parent().parent().addClass("selected");
var jsonObj = target.data("jsonObj");
showPage($hostPage, jsonObj);
hostJsonToDetailsTab(jsonObj);
break;
@ -269,18 +386,18 @@ function afterLoadResourceJSP() {
break;
case "primarystorage_name" :
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
showPage($primarystoragePage);
target.parent().parent().parent().addClass("selected");
var jsonObj = target.data("jsonObj");
showPage($primarystoragePage, jsonObj);
primarystorageJsonToDetailsTab(jsonObj);
break;
case "systemvm_name" :
$zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected");
showPage($systemvmPage);
var jsonObj = target.data("jsonObj");
target.parent().parent().parent().addClass("selected");
var jsonObj = target.data("jsonObj");
showPage($systemvmPage, jsonObj);
systemvmJsonToDetailsTab(jsonObj);
break;
@ -450,6 +567,7 @@ function afterLoadResourceJSP() {
//dialogs
initDialog("dialog_add_zone");
initDialog("dialog_add_pod", 320);
//add button ***
$("#midmenu_add_link").find("#label").text("Add Zone");