mirror of https://github.com/apache/cloudstack.git
new UI - add Resources page
This commit is contained in:
Jessica Wang
parent
ff4ba0958d
commit
c95a634a9b
|
|
@ -23,6 +23,15 @@ account = Account
|
|||
domain = Domain
|
||||
event = Event
|
||||
alert = Alert
|
||||
system = System
|
||||
global.settings = Global Settings
|
||||
resources = Resources
|
||||
service.offerings = Service Offerings
|
||||
disk.offerings = Disk Offerings
|
||||
|
||||
details = Details
|
||||
network = Network
|
||||
secondary.storage = Secondary Storage
|
||||
|
||||
no.available.actions = No available actions
|
||||
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ long milliseconds = new Date().getTime();
|
|||
|
||||
<script type="text/javascript" src="scripts/cloud.core2.domain.js?t=<%=milliseconds%>"></script>
|
||||
|
||||
<script type="text/javascript" src="scripts/cloud.core2.resource.js?t=<%=milliseconds%>"></script>
|
||||
|
||||
<title>Cloud.com CloudStack</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -507,38 +509,38 @@ long milliseconds = new Date().getTime();
|
|||
<div class="leftmenu_arrows close" id="arrowIcon">
|
||||
</div>
|
||||
<div class="leftmenu_list_icons">
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Configuration" /></div>
|
||||
Configuration
|
||||
<img src="images/configuration_leftmenuicon.png" alt="System" /></div>
|
||||
<%=t.t("system")%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_list">
|
||||
<div class="leftmenu_content" id="leftmenu_global_setting">
|
||||
<div class="leftmenu_list">
|
||||
<div class="leftmenu_content" id="leftmenu_resource">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_list_icons">
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Configuration" /></div>
|
||||
Global Settings
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_content" id="leftmenu_zone">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_list_icons">
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Configuration" /></div>
|
||||
Zones
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Resources" /></div>
|
||||
<%=t.t("resources")%>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_content" id="leftmenu_service_offering">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_list_icons">
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Configuration" /></div>
|
||||
Service Offerings
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Service Offerings" /></div>
|
||||
<%=t.t("service.offerings")%>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_content" id="leftmenu_disk_offering">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_list_icons">
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Configuration" /></div>
|
||||
Disk Offerings
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Disk Offerings" /></div>
|
||||
<%=t.t("disk.offerings")%>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_content" id="leftmenu_global_setting">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_list_icons">
|
||||
<img src="images/configuration_leftmenuicon.png" alt="Global Settings" /></div>
|
||||
<%=t.t("global.settings")%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,212 @@
|
|||
<%@ page import="java.util.*" %>
|
||||
<%@ page import="com.cloud.utils.*" %>
|
||||
|
||||
<%
|
||||
Locale browserLocale = request.getLocale();
|
||||
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
|
||||
%>
|
||||
|
||||
<!-- domain detail panel (begin) -->
|
||||
<div class="main_title" id="right_panel_header">
|
||||
<!--
|
||||
<div class="main_titleicon">
|
||||
<img src="images/title_snapshoticon.gif" alt="Instance" /></div>
|
||||
-->
|
||||
<h1>
|
||||
Resources
|
||||
</h1>
|
||||
</div>
|
||||
<div class="contentbox" id="right_panel_content">
|
||||
<div class="info_detailbox errorbox" id="after_action_info_container" style="display: none">
|
||||
<p id="after_action_info">
|
||||
</p>
|
||||
</div>
|
||||
<div class="tabbox" style="margin-top: 15px;">
|
||||
<div class="content_tabs on" id="tab_details">
|
||||
<%=t.t("details")%></div>
|
||||
<div class="content_tabs off" id="tab_network">
|
||||
<%=t.t("network")%></div>
|
||||
<div class="content_tabs off" id="tab_secondary_storage">
|
||||
<%=t.t("secondary.storage")%></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("ID")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="id">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<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 odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Accounts")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="redirect_to_account_page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Instances")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="redirect_to_instance_page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Volume")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="redirect_to_volume_page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details tab (end)-->
|
||||
|
||||
<!-- Network tab (start)-->
|
||||
<div style="display: none;" id="tab_content_network">
|
||||
</div>
|
||||
<!-- Network tab (end)-->
|
||||
|
||||
<!-- Secondary Storage tab (start)-->
|
||||
<div id="tab_content_secondary_storage" style="display:none">
|
||||
</div>
|
||||
<!-- Secondary Storage tab (end)-->
|
||||
</div>
|
||||
<!-- domain detail panel (end) -->
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
<!-- treenode template (end) -->
|
||||
|
||||
<!-- admin account tab template (begin) -->
|
||||
<div class="grid_container" id="admin_account_tab_template" style="display: none">
|
||||
<div class="grid_header">
|
||||
<div class="grid_header_title" id="title">
|
||||
</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("Role")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="role">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Account")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="account">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Domain")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="domain">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("VMs")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="vm_total">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("IPs")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="ip_total">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Bytes.Received")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="bytes_received">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Bytes.Sent")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="bytes_sent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<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>
|
||||
<!-- admin account tab template (end) -->
|
||||
|
|
@ -121,6 +121,24 @@ $(document).ready(function() {
|
|||
return false;
|
||||
});
|
||||
|
||||
$("#leftmenu_resource").bind("click", function(event) {
|
||||
if(selected_leftmenu_id != null && selected_leftmenu_id.length > 0)
|
||||
$("#"+selected_leftmenu_id).removeClass("selected");
|
||||
selected_leftmenu_id = "leftmenu_resource";
|
||||
$(this).addClass("selected");
|
||||
|
||||
showMiddleMenuWithoutSearch();
|
||||
disableMultipleSelectionInMidMenu();
|
||||
|
||||
clearLeftMenu();
|
||||
clearMiddleMenu();
|
||||
|
||||
$("#right_panel").load("jsp/resource.jsp", function(){
|
||||
afterLoadResourceJSP();
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$("#midmenu_action_link").bind("mouseover", function(event) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
function afterLoadResourceJSP() {
|
||||
//***** switch between different tabs (begin) ********************************************************************
|
||||
var tabArray = ["tab_details", "tab_network", "tab_secondary_storage"];
|
||||
var tabContentArray = ["tab_content_details", "tab_content_network", "tab_content_secondary_storage"];
|
||||
switchBetweenDifferentTabs(tabArray, tabContentArray);
|
||||
//***** switch between different tabs (end) **********************************************************************
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue