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

New UI for Network tab

This commit is contained in:
NIKITA 2010-10-08 17:09:03 -07:00
parent 6ef5a83217
commit 5a4e75ebcd
14 changed files with 491 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
ui/new/css/main.css
View File

@ -1986,6 +1986,14 @@ a:hover.search_button {
cursor:hand;
}
.text_container {
width:100%;
height:auto;
float:left;
margin:7px 0 0 0;
padding:0;
}
.grid_container {
width:100%;
height:auto;
@ -2999,4 +3007,218 @@ a:hover.search_button {
margin:0;
padding:5px 0 5px 0;
border-bottom:1px solid #999;
}
}
.network_dgbox {
width:440px;
height:auto;
float:left;
margin:20px 0 0 10px;
display:inline;
padding:0;
}
.networkdg_zonepanel {
width:440px;
height:75px;
float:left;
margin:0;
padding:0;
}
.networkdg_zonecloud {
width:127px;
height:71px;
float:left;
background:url(../images/network_zonecloud.gif) no-repeat top left;
margin:0 0 0 109px;
display:inline;
padding:0;
}
.networkdg_zonecloud p {
width:125px;
height:auto;
float:left;
text-align:center;
font-size:11px;
font-weight:bold;
color:#002451;
margin:30px 0 0 0;
padding:0;
}
.networkdg_zoneconnect {
width:171px;
height:32px;
float:left;
background:url(../images/network_zoneconnect.gif) no-repeat top left;
margin:38px 0 0 0;
padding:0;
}
.networkswitchpanel {
width:440px;
height:auto;
float:left;
margin:0;
padding:0;
}
.networkswitch_titlebox {
width:370px;
height:19px;
float:left;
background:#fefbdc repeat top left;
border:1px solid #d3cc8a;
border-bottom:none;
margin:7px 0 0 10px;
padding:0;
}
.networkswitch_titlebox p{
width:300px;
height:auto;
float:left;
color:#333;
text-align:left;
font-size:11px;
font-weight:normal;
margin:3px 0 0 10px;
padding:0;
}
.networkswitch_top {
width:38px;
height:27px;
float:left;
background:url(../images/switch_top.gif) no-repeat top left;
margin:0;
padding:0;
overflow:hidden;
}
.networkswitch_midpanel {
width:420px;
height:auto;
float:left;
background:url(../images/vlan_barbg.gif) repeat-y top left;
border-top:1px dashed #333;
border-bottom:1px dashed #333;
margin:0;
padding:0 0 60px 0;
}
.networkswitch_vlanpanel {
width:404px;
height:auto;
float:left;
margin:35px 0 0 16px;
display:inline;
padding:0;
}
.networkswitch_vlanconnect {
width:404px;
height:12px;
float:left;
background:url(../images/vlan_connect.gif) no-repeat top left;
margin:26px 0 0 0;
padding:0;
}
.networkswitch_vlan_infoicon {
width:12px;
height:15px;
float:left;
background:url(../images/networkswitch_infoicon.gif) no-repeat top left;
margin:-12px 0 0 20px;
display:inline;
padding:0;
cursor:pointer;
cursor:hand;
}
.networkswitch_vlan_infoicon:hover {
background:url(../images/networkswitch_infoicon_hover.gif) no-repeat top left;
}
.networkswitch_vlan_detailsbox {
width:167px;
height:auto;
float:left;
background:#e9e9e9 url(../images/networkswitch_detailsbox.gif) repeat-x top left;
border-top:2px solid #d1d1d1;
border-right:2px solid #d1d1d1;
border-left:1px solid #dedede;
border-bottom:1px solid #dedede;
margin:-20px 0 0 30px;
display:inline;
padding:0 0 8px 0;
}
.networkswitch_vlan_detailsbox_textbox {
width:150px;
height:auto;
float:left;
margin:6px 0 0 8px;
padding:0;
}
.networkswitch_vlan_detailsbox_textbox_label {
width:60px;
height:auto;
float:left;
color:#333;
font-size:11px;
font-weight:normal;
text-align:left;
margin:0;
padding:0;
}
.networkswitch_vlan_detailsbox_textbox span {
width:auto;
height:auto;
float:left;
color:#09426e;
font-size:11px;
font-weight:bold;
text-align:left;
margin:0;
padding:0;
}
.networkswitch_typeicon {
width:45px;
height:21px;
float:left;
margin:-22px 0 0 38px;
padding:0;
}
.networkswitch_typeicon.direct {
background:url(../images/networkswitch_directicon.gif) no-repeat top left;
}
.networkswitch_typeicon.virtual {
background:url(../images/networkswitch_virtualicon.gif) no-repeat top left;
}
.networkswitch_end {
width:43px;
height:54px;
float:right;
background:url(../images/switch_end.gif) no-repeat top left;
margin:0 18px 0 0;
display:inline;
padding:0;
}

BIN
ui/new/images/network_zonecloud.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
ui/new/images/network_zoneconnect.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 282 B

BIN
ui/new/images/networkswitch_detailsbox.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 B

BIN
ui/new/images/networkswitch_directicon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 772 B

BIN
ui/new/images/networkswitch_infoicon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 B

BIN
ui/new/images/networkswitch_infoicon_hover.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 B

BIN
ui/new/images/networkswitch_virtualicon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 B

BIN
ui/new/images/switch_end.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
ui/new/images/switch_mid.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 B

BIN
ui/new/images/switch_top.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
ui/new/images/vlan_barbg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 B

BIN
ui/new/images/vlan_connect.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -1,212 +1,269 @@
<%@ 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>
<%@ 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 class="text_container">
<div class="network_dgbox">
<div class="networkdg_zonepanel">
<div class="networkdg_zonebox">
<div class="networkdg_zonecloud">
<p>Zone 1</p>
</div>
<div class="networkdg_zoneconnect"></div>
</div>
<div class="networkswitchpanel">
<div class="networkswitch_titlebox"><p>Guest VLAN 1000 -1001</p></div>
<div class="networkswitch_top"></div>
<div class="networkswitch_midpanel">
<div class="networkswitch_vlanpanel">
<div class="networkswitch_vlanconnect">
<div class="networkswitch_vlan_infoicon"></div>
<div class="networkswitch_vlan_detailsbox">
<div class="networkswitch_vlan_detailsbox_textbox">
<div class="networkswitch_vlan_detailsbox_textbox_label">VM Group:</div> <span>VLAN 10</span>
</div>
<div class="networkswitch_vlan_detailsbox_textbox">
<div class="networkswitch_vlan_detailsbox_textbox_label">IP:</div> <span>10.101.24.231</span>
</div>
</div>
<div class="networkswitch_typeicon direct"></div>
</div>
</div>
<div class="networkswitch_vlanpanel">
<div class="networkswitch_vlanconnect">
<div class="networkswitch_vlan_infoicon"></div>
<div class="networkswitch_vlan_detailsbox">
<div class="networkswitch_vlan_detailsbox_textbox">
<div class="networkswitch_vlan_detailsbox_textbox_label">VM Group:</div> <span>VLAN 10</span>
</div>
<div class="networkswitch_vlan_detailsbox_textbox">
<div class="networkswitch_vlan_detailsbox_textbox_label">IP:</div> <span>10.101.24.231</span>
</div>
</div>
<div class="networkswitch_typeicon virtual"></div>
</div>
</div>
</div>
<div class="networkswitch_end"></div>
</div>
</div>
</div>
</div>
</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) -->