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 - resources page - implement details tab for System VM.

Browse Source
This commit is contained in:
Jessica Wang 2010-10-13 16:24:16 -07:00
parent 354590d018
commit e9ef7a1eb0
3 changed files with 213 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/WEB-INF/classes/resources/resource.properties
View File

@ -73,6 +73,12 @@ guestcidraddress = Guest CIDR
private.cidr = Private CIDR private.cidr = Private CIDR
private.ip.range = Private IP Range private.ip.range = Private IP Range
gateway = Gateway gateway = Gateway
state = State
system.vm.type = System VM Type
active.sessions = Active Sessions
public.ip = Public IP
private.ip = Private IP
host = Host
disk.offering = Disk Offering disk.offering = Disk Offering
copy.ISO.to = Copy ISO to copy.ISO.to = Copy ISO to

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

@ -12,8 +12,7 @@
<div class="main_titleicon"> <div class="main_titleicon">
<img src="images/title_snapshoticon.gif" alt="Instance" /></div> <img src="images/title_snapshoticon.gif" alt="Instance" /></div>
--> -->
<h1> <h1 id="label">
Resources
</h1> </h1>
</div> </div>
<div class="contentbox" id="right_panel_content"> <div class="contentbox" id="right_panel_content">
@ -53,7 +52,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid_rows even"> <div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;"> <div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles"> <div class="row_celltitles">
<%=t.t("dns1")%>:</div> <%=t.t("dns1")%>:</div>
@ -73,7 +72,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid_rows even"> <div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;"> <div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles"> <div class="row_celltitles">
<%=t.t("internaldns1")%>:</div> <%=t.t("internaldns1")%>:</div>
@ -93,7 +92,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid_rows even"> <div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;"> <div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles"> <div class="row_celltitles">
<%=t.t("vlan")%>:</div> <%=t.t("vlan")%>:</div>
@ -220,7 +219,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid_rows even"> <div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;"> <div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles"> <div class="row_celltitles">
<%=t.t("private.cidr")%>:</div> <%=t.t("private.cidr")%>:</div>
@ -240,7 +239,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid_rows even"> <div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;"> <div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles"> <div class="row_celltitles">
<%=t.t("gateway")%>:</div> <%=t.t("gateway")%>:</div>
@ -264,8 +263,128 @@
<div id="primarystorage_page" style="display:none"> <div id="primarystorage_page" style="display:none">
Primary Storage Page Primary Storage Page
</div> </div>
<div id="systemvm_page" style="display:none"> <div id="systemvm_page" style="display:none">
System VM Page <div class="tabbox" style="margin-top: 15px;">
<div class="content_tabs on" id="tab_details">
<%=t.t("details")%></div>
</div>
<!-- Details tab (start)-->
<div id="tab_content_details">
<div class="grid_container">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("state")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="state">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("system.vm.type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="systemvmtype">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("zone")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="zonename">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("ID")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="id">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("active.sessions")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="activeviewersessions">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("public.ip")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="publicip">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("private.ip")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="privateip">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("host")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="hostname">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("gateway")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="gateway">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("created")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
</div>
</div>
<!-- Details tab (end)-->
</div> </div>
</div> </div>
<!-- domain detail panel (end) --> <!-- domain detail panel (end) -->

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

@ -1,4 +1,6 @@
function afterLoadResourceJSP() { function afterLoadResourceJSP() {
var $rightPanelHeaderLabel = $("#right_panel_header").find("#label");
var $rightPanelConent = $("#right_panel_content"); var $rightPanelConent = $("#right_panel_content");
var $zonePage = $rightPanelConent.find("#zone_page"); var $zonePage = $rightPanelConent.find("#zone_page");
var $podPage = $rightPanelConent.find("#pod_page"); var $podPage = $rightPanelConent.find("#pod_page");
@ -8,13 +10,17 @@ function afterLoadResourceJSP() {
var $systemvmPage = $rightPanelConent.find("#systemvm_page"); var $systemvmPage = $rightPanelConent.find("#systemvm_page");
var pageArray = [$zonePage, $podPage, $clusterPage, $hostPage, $primarystoragePage, $systemvmPage]; var pageArray = [$zonePage, $podPage, $clusterPage, $hostPage, $primarystoragePage, $systemvmPage];
var pageLabelArray = ["Zone", "Pod", "Cluster", "Host", "Primary Storage", "System VM"];
function showPage($pageToShow) { function showPage($pageToShow) {
for(var i=0; i<pageArray.length; i++) { for(var i=0; i<pageArray.length; i++) {
if(pageArray[i].attr("id") == $pageToShow.attr("id")) if(pageArray[i].attr("id") == $pageToShow.attr("id")) {
$rightPanelHeaderLabel.text(pageLabelArray[i]);
pageArray[i].show(); pageArray[i].show();
else }
else {
pageArray[i].hide(); pageArray[i].hide();
}
} }
} }
@ -32,30 +38,29 @@ function afterLoadResourceJSP() {
if (items != null && items.length > 0) { if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var template = $("#zone_template").clone(true).attr("id", "zone_"+items[i].id); var template = $("#zone_template").clone(true).attr("id", "zone_"+items[i].id);
zoneJSONToTemplate(items[i], template); zoneJSONToTreeNode(items[i], template);
container.append(template.show()); container.append(template.show());
} }
} }
} }
}); });
function zoneJSONToTemplate(json, template) { function zoneJSONToTreeNode(json, template) {
var zoneid = json.id; var zoneid = json.id;
template.attr("id", "zone_" + zoneid); template.attr("id", "zone_" + zoneid);
template.data("id", zoneid).data("name", fromdb(json.name)); template.data("id", zoneid).data("name", fromdb(json.name));
template.find("#zone_name") var zoneName = template.find("#zone_name").text(fromdb(json.name));
.text(fromdb(json.name)) zoneName.data("id", zoneid);
.data("id", zoneid) zoneName.data("name", fromdb(json.name));
.data("name", fromdb(json.name)) zoneName.data("dns1", json.dns1)
.data("dns1", json.dns1) zoneName.data("internaldns1", json.internaldns1)
.data("internaldns1", json.internaldns1) zoneName.data("guestcidraddress", json.guestcidraddress);
.data("guestcidraddress", json.guestcidraddress);
if (json.dns2 != null) if (json.dns2 != null)
template.find("#zone_name").data("dns2", json.dns2); zoneName.data("dns2", json.dns2);
if (json.internaldns2 != null) if (json.internaldns2 != null)
template.find("#zone_name").data("internaldns2", json.internaldns2); zoneName.data("internaldns2", json.internaldns2);
if (json.vlan != null) if (json.vlan != null)
template.find("#zone_name").data("vlan", json.vlan); zoneName.data("vlan", json.vlan);
$.ajax({ $.ajax({
data: createURL("command=listPods&zoneid="+zoneid+maxPageSize), data: createURL("command=listPods&zoneid="+zoneid+maxPageSize),
@ -66,7 +71,7 @@ function afterLoadResourceJSP() {
if (items != null && items.length > 0) { if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var podTemplate = $("#pod_template").clone(true).attr("id", "pod_"+items[i].id); var podTemplate = $("#pod_template").clone(true).attr("id", "pod_"+items[i].id);
podJSONToTemplate(items[i], podTemplate); podJSONToTreeNode(items[i], podTemplate);
container.append(podTemplate.show()); container.append(podTemplate.show());
forceLogout = false; // We don't force a logout if pod(s) exit. forceLogout = false; // We don't force a logout if pod(s) exit.
} }
@ -83,7 +88,7 @@ function afterLoadResourceJSP() {
if (items != null && items.length > 0) { if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var systemvmTemplate = $("#systemvm_template").clone(true).attr("id", "systemvm_"+items[i].id); var systemvmTemplate = $("#systemvm_template").clone(true).attr("id", "systemvm_"+items[i].id);
systemvmJSONToTemplate(items[i], systemvmTemplate); systemvmJSONToTreeNode(items[i], systemvmTemplate);
container.append(systemvmTemplate.show()); container.append(systemvmTemplate.show());
} }
} }
@ -91,7 +96,7 @@ function afterLoadResourceJSP() {
}); });
} }
function podJSONToTemplate(json, template) { function podJSONToTreeNode(json, template) {
var podid = json.id; var podid = json.id;
template.attr("id", "pod_" + podid); template.attr("id", "pod_" + podid);
@ -117,7 +122,7 @@ function afterLoadResourceJSP() {
if (items != null && items.length > 0) { if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var clusterTemplate = $("#cluster_template").clone(true).attr("id", "cluster_"+items[i].id); var clusterTemplate = $("#cluster_template").clone(true).attr("id", "cluster_"+items[i].id);
clusterJSONToTemplate(items[i], clusterTemplate); clusterJSONToTreeNode(items[i], clusterTemplate);
container.append(clusterTemplate.show()); container.append(clusterTemplate.show());
} }
} }
@ -125,24 +130,25 @@ function afterLoadResourceJSP() {
}); });
} }
function systemvmJSONToTemplate(json, template) { function systemvmJSONToTreeNode(json, template) {
var systemvmid = json.id; var systemvmid = json.id;
template.attr("id", "systemvm_"+systemvmid); template.attr("id", "systemvm_"+systemvmid);
template.data("id", systemvmid).data("name", json.name); template.data("id", systemvmid).data("name", json.name);
var systeymvmName = template.find("#systemvm_name").text(json.name); var systeymvmName = template.find("#systemvm_name").text(json.name);
systeymvmName.data("state", json.state);
systeymvmName.data("systemvmtype", json.systemvmtype); systeymvmName.data("systemvmtype", json.systemvmtype);
systeymvmName.data("name", json.name); systeymvmName.data("zonename", fromdb(json.zonename));
systeymvmName.data("zonename", json.zonename); systeymvmName.data("id", json.id);
systeymvmName.data("name", fromdb(json.name));
systeymvmName.data("activeviewersessions", json.activeviewersessions); systeymvmName.data("activeviewersessions", json.activeviewersessions);
systeymvmName.data("publicip", json.publicip); systeymvmName.data("publicip", json.publicip);
systeymvmName.data("privateip", json.privateip); systeymvmName.data("privateip", json.privateip);
systeymvmName.data("hostname", json.hostname); systeymvmName.data("hostname", fromdb(json.hostname));
systeymvmName.data("gateway", json.gateway); systeymvmName.data("gateway", json.gateway);
systeymvmName.data("created", json.created); systeymvmName.data("created", json.created);
systeymvmName.data("state", json.state);
} }
function clusterJSONToTemplate(json, template) { function clusterJSONToTreeNode(json, template) {
template.data("id", json.id).data("name", fromdb(json.name)); template.data("id", json.id).data("name", fromdb(json.name));
var systeymvmName = template.find("#cluster_name").text(fromdb(json.name)); var systeymvmName = template.find("#cluster_name").text(fromdb(json.name));
@ -156,7 +162,7 @@ function afterLoadResourceJSP() {
if (items != null && items.length > 0) { if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var hostTemplate = $("#host_template").clone(true).attr("id", "host_"+items[i].id); var hostTemplate = $("#host_template").clone(true).attr("id", "host_"+items[i].id);
hostJSONToTemplate(items[i], hostTemplate); hostJSONToTreeNode(items[i], hostTemplate);
container.append(hostTemplate.show()); container.append(hostTemplate.show());
} }
} }
@ -172,7 +178,7 @@ function afterLoadResourceJSP() {
if (items != null && items.length > 0) { if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
var primaryStorageTemplate = $("#primarystorage_template").clone(true).attr("id", "primary_storage_"+items[i].id); var primaryStorageTemplate = $("#primarystorage_template").clone(true).attr("id", "primary_storage_"+items[i].id);
primaryStorageJSONToTemplate(items[i], primaryStorageTemplate); primaryStorageJSONToTreeNode(items[i], primaryStorageTemplate);
container.append(primaryStorageTemplate.show()); container.append(primaryStorageTemplate.show());
} }
} }
@ -180,13 +186,13 @@ function afterLoadResourceJSP() {
}); });
} }
function hostJSONToTemplate(json, template) { function hostJSONToTreeNode(json, template) {
template.data("id", json.id).data("name", fromdb(json.name)); template.data("id", json.id).data("name", fromdb(json.name));
var hostName = template.find("#host_name").text(fromdb(json.name)); var hostName = template.find("#host_name").text(fromdb(json.name));
} }
function primaryStorageJSONToTemplate(json, template) { function primaryStorageJSONToTreeNode(json, template) {
template.data("id", json.id).data("name", fromdb(json.name)); template.data("id", json.id).data("name", fromdb(json.name));
var primaryStorageName = template.find("#primarystorage_name").text(fromdb(json.name)); var primaryStorageName = template.find("#primarystorage_name").text(fromdb(json.name));
@ -297,8 +303,20 @@ function afterLoadResourceJSP() {
$zoneetree1.find(".selected").removeClass("selected"); $zoneetree1.find(".selected").removeClass("selected");
target.parent().parent().parent().addClass("selected"); target.parent().parent().parent().addClass("selected");
showPage($systemvmPage); showPage($systemvmPage);
//var obj = {"id": target.data("id"), "zoneid": target.data("zoneid"), "name": target.data("name"), "cidr": target.data("cidr"), "startip": target.data("startip"), "endip": target.data("endip"), "ipRange": target.data("ipRange"), "gateway": target.data("gateway")}; var obj = {
//systemvmObjectToRightPanel(obj); "id": target.data("id"),
"name": target.data("name"),
"systemvmtype": target.data("systemvmtype"),
"zonename": target.data("zonename"),
"activeviewersessions": target.data("activeviewersessions"),
"publicip": target.data("publicip"),
"privateip": target.data("privateip"),
"hostname": target.data("hostname"),
"gateway": target.data("gateway"),
"created": target.data("created"),
"state": target.data("state")
};
systemvmJsonToDetailsTab(obj);
break; break;
@ -341,7 +359,7 @@ function afterLoadResourceJSP() {
//***** zone page (end) ******************************************************************************************************* //***** zone page (end) *******************************************************************************************************
//***** pod page (begin) ****************************************************************************************************** //***** pod page (begin) ******************************************************************************************************
function podJsonToDetailsTab(jsonObj) { function podJsonToDetailsTab(jsonObj) {
var $detailsTab = $podPage.find("#tab_content_details"); var $detailsTab = $podPage.find("#tab_content_details");
$detailsTab.data("jsonObj", jsonObj); $detailsTab.data("jsonObj", jsonObj);
$detailsTab.find("#id").text(fromdb(jsonObj.id)); $detailsTab.find("#id").text(fromdb(jsonObj.id));
@ -354,5 +372,33 @@ function afterLoadResourceJSP() {
// $("#submenu_content_zones #action_add_directip_vlan").data("type", "pod").data("id", obj.id).data("name", obj.name).data("zoneid", obj.zoneid).show(); // $("#submenu_content_zones #action_add_directip_vlan").data("type", "pod").data("id", obj.id).data("name", obj.name).data("zoneid", obj.zoneid).show();
} }
//***** pod page (end) ******************************************************************************************************** //***** pod page (end) ********************************************************************************************************
//***** systemVM page (begin) *************************************************************************************************
function systemvmJsonToDetailsTab(jsonObj) {
var $detailsTab = $systemvmPage.find("#tab_content_details");
$detailsTab.data("jsonObj", jsonObj);
$detailsTab.find("#state").text(fromdb(jsonObj.state));
$detailsTab.find("#systemvmtype").text(toSystemVMTypeText(jsonObj.systemvmtype));
$detailsTab.find("#zonename").text(fromdb(jsonObj.zonename));
$detailsTab.find("#id").text(fromdb(jsonObj.id));
$detailsTab.find("#name").text(fromdb(jsonObj.name));
$detailsTab.find("#activeviewersessions").text(fromdb(jsonObj.activeviewersessions));
$detailsTab.find("#publicip").text(fromdb(jsonObj.publicip));
$detailsTab.find("#privateip").text(fromdb(jsonObj.privateip));
$detailsTab.find("#hostname").text(fromdb(jsonObj.hostname));
$detailsTab.find("#gateway").text(fromdb(jsonObj.gateway));
$detailsTab.find("#created").text(fromdb(jsonObj.created));
}
function toSystemVMTypeText(value) {
var text = "";
if(value == "consoleproxy")
text = "Console Proxy VM";
else if(value == "secondarystoragevm")
text = "Secondary Storage VM";
return text;
}
//***** systemVM page (end) ***************************************************************************************************
} }