mirror of https://github.com/apache/cloudstack.git
new UI - resources page - draw a zone tree in middle menu.
This commit is contained in:
Jessica Wang
parent
ab43d706fb
commit
c09dc082b7
|
|
@ -3222,3 +3222,218 @@ a:hover.search_button {
|
|||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 2010-10-10 */
|
||||
|
||||
.adding_loading {
|
||||
width:100%;
|
||||
float:left;
|
||||
margin:0;
|
||||
padding:0;
|
||||
background: #e7f7fc repeat-x top left;
|
||||
border-bottom:1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.adding_animation {
|
||||
width:16px;
|
||||
height:16px;
|
||||
margin:3px 0 0 10px;
|
||||
float:left;
|
||||
display:inline;
|
||||
background:url(../images/ajax-loader.gif) no-repeat top left;
|
||||
}
|
||||
|
||||
.adding_text {
|
||||
width:auto;
|
||||
height:auto;
|
||||
float:left;
|
||||
margin:8px 0 0 10px;
|
||||
display:inline;
|
||||
color:#333;
|
||||
font-size:11px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
|
||||
/* zonetree (begin) */
|
||||
|
||||
.zonetree_contentbox {
|
||||
width:530px;
|
||||
height:590px;
|
||||
float:left;
|
||||
margin:15px 0 0 0;
|
||||
overflow-x:hidden;
|
||||
overflow-y:scroll;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.zonetree_contentbox p {
|
||||
width:auto;
|
||||
height:auto;
|
||||
float:left;
|
||||
text-align:left;
|
||||
margin:5px 0 0 10px;
|
||||
padding:0;
|
||||
font-size:12px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.zonetree_addbox {
|
||||
width:510px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zonetree_addicon {
|
||||
width:16px;
|
||||
height:16px;
|
||||
float:left;
|
||||
background:url(../images/zone_addicon.png) no-repeat top left;
|
||||
margin:5px 0 0 5px;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.tree_minusicon {
|
||||
width:18px;
|
||||
height:16px;
|
||||
float:left;
|
||||
background:url(../images/tree_minusopen_icon.png) no-repeat top left;
|
||||
margin:5px 5px 0 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zonetree_firstlevel {
|
||||
width:510px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_firstlevel_selected {
|
||||
width:510px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 0;
|
||||
background:#eaf3f5 repeat top left;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_secondlevel {
|
||||
width:455px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 55px;
|
||||
display:inline;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_secondlevel_selected {
|
||||
width:475px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 55px;
|
||||
background:#eaf3f5 repeat top left;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_thirdlevel {
|
||||
width:400px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 110px;
|
||||
display:inline;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_thirdlevel_selected {
|
||||
width:400px;
|
||||
height:25px;
|
||||
float:left;
|
||||
margin:0 0 5px 110px;
|
||||
background:#eaf3f5 repeat top left;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_closedarrows {
|
||||
width:12px;
|
||||
height:14px;
|
||||
background:url(../images/zone_sidearrow.png) no-repeat top left;
|
||||
float:left;
|
||||
margin:5px 5px 0 8px;
|
||||
display:inline;
|
||||
padding:0;
|
||||
cursor:pointer;
|
||||
cursor:hand;
|
||||
}
|
||||
|
||||
.zonetree_openarrows {
|
||||
width:12px;
|
||||
height:14px;
|
||||
background:url(../images/zone_openarrow.png) no-repeat top left;
|
||||
float:left;
|
||||
margin:10px 5px 0 8px;
|
||||
display:inline;
|
||||
padding:0;
|
||||
cursor:pointer;
|
||||
cursor:hand;
|
||||
}
|
||||
|
||||
.zonetree_zoneicon {
|
||||
width:18px;
|
||||
height:18px;
|
||||
float:left;
|
||||
background:url(../images/zone_zoneicon.png) no-repeat top left;
|
||||
font-weight:bold;
|
||||
margin:3px 0 0 5px;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.zonetree_podicon {
|
||||
width:22px;
|
||||
height:18px;
|
||||
float:left;
|
||||
background:url(../images/zone_podicon.png) no-repeat top left;
|
||||
font-weight:bold;
|
||||
margin:3px 0 0 5px;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
.zonetree_links {
|
||||
width:auto;
|
||||
height:auto;
|
||||
float:left;
|
||||
color:#2c8bbc;
|
||||
text-decoration:none;
|
||||
font-size:12px;
|
||||
text-align:left;
|
||||
margin:5px 0 0 10px;
|
||||
display:inline;
|
||||
padding:0;
|
||||
cursor:pointer;
|
||||
cursor:hand;
|
||||
}
|
||||
.zonetree_links:hover {
|
||||
width:auto;
|
||||
height:auto;
|
||||
float:left;
|
||||
color:#333;
|
||||
text-decoration:underline;
|
||||
font-size:12px;
|
||||
text-align:left;
|
||||
margin:5px 0 0 10px;
|
||||
padding:0;
|
||||
cursor:pointer;
|
||||
cursor:hand;
|
||||
}
|
||||
/* zonetree (begin) */
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
Binary file not shown.
|
After Width: | Height: | Size: 880 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -266,4 +266,56 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- admin account tab template (end) -->
|
||||
<!-- admin account tab template (end) -->
|
||||
|
||||
<!-- Zonetree Template (begin) -->
|
||||
<div class="zonetree_contentbox" id="zonetree" style="display:none">
|
||||
<div class="zonetree_addbox">
|
||||
<div class="zonetree_addicon">
|
||||
</div>
|
||||
<div class="zonetree_links" id="action_add_zone">
|
||||
Add a Zone</div>
|
||||
</div>
|
||||
<div id="zones_container">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Zonetree Template (end) -->
|
||||
|
||||
<!-- Zone Template (begin) -->
|
||||
<div id="zone_template" style="display:none">
|
||||
<div class="adding_loading" style="height:25px;display:none" id="loading_container">
|
||||
<div class="adding_animation"></div>
|
||||
<div class="adding_text">Adding a zone … </div>
|
||||
</div>
|
||||
<div id="row_container">
|
||||
<div class="zonetree_firstlevel">
|
||||
<div class="zonetree_closedarrows" id="zone_expand"></div>
|
||||
<div class="zonetree_zoneicon"></div>
|
||||
<p>Zone:<div class="zonetree_links" id="zone_name">Zone 1</div></p>
|
||||
</div>
|
||||
<div id="zone_content" style="display:none">
|
||||
<div id="pods_container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Zone Template (end) -->
|
||||
|
||||
<!-- Pod Template (begin) -->
|
||||
<div id="pod_template" style="display:none">
|
||||
<div class="adding_loading" style="height:25px;display:none" id="loading_container">
|
||||
<div class="adding_animation"></div>
|
||||
<div class="adding_text">Adding a pod … </div>
|
||||
</div>
|
||||
<div id="row_container">
|
||||
<div class="zonetree_secondlevel">
|
||||
<div class="zonetree_podicon"></div>
|
||||
<p>Pod:<div class="zonetree_links" id="pod_name">Name of the Pod</div></p>
|
||||
</div>
|
||||
<div id="pod_content">
|
||||
<div id="directip_ranges_container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pod Template (end) -->
|
||||
|
|
|
|||
|
|
@ -4,5 +4,61 @@ function afterLoadResourceJSP() {
|
|||
var tabContentArray = ["tab_content_details", "tab_content_network", "tab_content_secondary_storage"];
|
||||
switchBetweenDifferentTabs(tabArray, tabContentArray);
|
||||
//***** switch between different tabs (end) **********************************************************************
|
||||
|
||||
}
|
||||
|
||||
var forceLogout = true; // We force a logout only if the user has first added a POD for the very first time
|
||||
$("#midmenu_container").append($("#zonetree").clone().attr("id", "zonetree1").show());
|
||||
|
||||
$.ajax({
|
||||
data: createURL("command=listZones&available=true&response=json"+maxPageSize),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var zones = json.listzonesresponse.zone;
|
||||
var grid = $("#zonetree1 #zones_container").empty();
|
||||
if (zones != null && zones.length > 0) {
|
||||
for (var i = 0; i < zones.length; i++) {
|
||||
var template = $("#zone_template").clone(true).attr("id", "zone_"+zones[i].id);
|
||||
zoneJSONToTemplate(zones[i], template);
|
||||
grid.append(template.show());
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function zoneJSONToTemplate(json, template) {
|
||||
var zoneid = json.id;
|
||||
template.data("id", zoneid).data("name", fromdb(json.name));
|
||||
template.find("#zone_name")
|
||||
.text(fromdb(json.name))
|
||||
.data("id", zoneid)
|
||||
.data("name", fromdb(json.name))
|
||||
.data("dns1", json.dns1)
|
||||
.data("internaldns1", json.internaldns1)
|
||||
.data("guestcidraddress", json.guestcidraddress);
|
||||
if (json.dns2 != null)
|
||||
template.find("#zone_name").data("dns2", json.dns2);
|
||||
if (json.internaldns2 != null)
|
||||
template.find("#zone_name").data("internaldns2", json.internaldns2);
|
||||
if (json.vlan != null)
|
||||
template.find("#zone_name").data("vlan", json.vlan);
|
||||
|
||||
$.ajax({
|
||||
data: createURL("command=listPods&zoneid="+zoneid+"&response=json"),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var pods = json.listpodsresponse.pod;
|
||||
var grid = template.find("#pods_container").empty();
|
||||
if (pods != null && pods.length > 0) {
|
||||
for (var i = 0; i < pods.length; i++) {
|
||||
var podTemplate = $("#pod_template").clone(true).attr("id", "pod_"+pods[i].id);
|
||||
podJSONToTemplate(pods[i], podTemplate);
|
||||
grid.append(podTemplate.show());
|
||||
forceLogout = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function podJSONToTemplate(json, template) {}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue