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

Network new UI

This commit is contained in:
NIKITA 2010-09-08 17:49:44 -07:00
parent 413ec914ed
commit c987e84398
10 changed files with 357 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,8 +15,7 @@ html,body{
background:#00374e url(../images/login_bg.gif) repeat-x top left;
margin:0;
padding:0;
overflow-x:hidden;
overflow-y:auto;
overflow:auto;
}
<!--[if IE 6]>
@ -1795,7 +1794,7 @@ a:visited {
}
.content_tabs {
width:78px;
width:101px;
height:13px;
float:left;
font-size:11px;
@ -2095,6 +2094,14 @@ a:visited {
padding:0;
}
.grid_header_cell {
height:20px;
float:left;
margin:0;
padding:0;
border-right:1px solid #CCC;
}
.grid_header_title {
width:auto;
height:auto;
@ -2144,4 +2151,47 @@ a:visited {
.grid_editbox:hover {
background:url(../images/grid_editicon_hover.png) no-repeat top left;
}
.grid_detailspanel {
width:90%;
height:auto;
float:left;
margin:5px 0 0 45px;
display:inline;
padding:0;
}
.grid_details_pointer {
width:15px;
height:9px;
float:left;
background:url(../images/grid_detailspointer.png) no-repeat top left;
margin:0 0 0 10px;
display:inline;
padding:0;
}
.grid_detailsbox {
width:100%;
height:auto;
float:left;
border:1px solid #d5d5d5;
margin:0;
padding:0;
}
.grid_details_row {
width:100%;
height:auto;
border-bottom:1px dashed #a2bcce;
background:#e3eaef repeat top left;
float:left;
margin:0;
padding:4px 0 4px 0;
}
.grid_details_row.odd {
background:#f0f3f5 repeat top left;
}

BIN
ui/new/images/contenttab_selected.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 258 B

After

Width:  |  Height:  |  Size: 265 B

BIN
ui/new/images/contenttab_unselected.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 551 B

After

Width:  |  Height:  |  Size: 509 B

BIN
ui/new/images/contenttab_unselected_hover.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 505 B

After

Width:  |  Height:  |  Size: 509 B

BIN
ui/new/images/gird_editicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 913 B

BIN
ui/new/images/gird_editicon_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 973 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 B

BIN
ui/new/images/grid_detailspointer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 680 B

304
ui/new/jsp/network.jsp Normal file
View File

@ -0,0 +1,304 @@
<!--
<script type="text/javascript" src="scripts/cloud.core.event.js"></script>
-->
<%@ page import="java.util.*" %>
<%@ page import="com.cloud.utils.*" %>
<%
Locale browserLocale = request.getLocale();
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
%>
<!-- event detail panel (begin) -->
<div class="main_title" id="right_panel_header">
<div class="main_titleicon">
<img src="images/iptitle_icons.gif" alt="Network" /></div>
<h1>Event
</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">
<%=t.t("Details")%></div>
<div class="content_tabs off">
<%=t.t("Port Forwarding")%></div>
<div class="content_tabs off">
<%=t.t("Load Balancer")%></div>
</div>
<div class="grid_actionpanel">
<div class="grid_actionbox"></div>
<div class="grid_editbox"></div>
</div>
<!-- Network Details start here-->
<div class="grid_container">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
IP:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Zone:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
VLAN:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Level")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="level">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Source NAT:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Network Type:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Domain:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Account:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Allocated:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
</div>
<!-- Network Details ends here-->
<!-- Port Forwarding start here-->
<div class="grid_container">
<div class="grid_header">
<div class="grid_header_cell" style="width:20%">
<div class="grid_header_title">Public Port</div>
</div>
<div class="grid_header_cell" style="width:20%">
<div class="grid_header_title">Private Port</div>
</div>
<div class="grid_header_cell" style="width:29%">
<div class="grid_header_title">Protocol</div>
</div>
<div class="grid_header_cell" style="width:30%; border:none;">
<div class="grid_header_title">Instance</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">8080</div>
</div>
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">80</div>
</div>
<div class="grid_row_cell" style="width: 29%;">
<div class="row_celltitles">8 GB</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">Instance Name</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">8080</div>
</div>
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">80</div>
</div>
<div class="grid_row_cell" style="width: 29%;">
<div class="row_celltitles">8 GB</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">Instance Name</div>
</div>
</div>
</div>
<!-- Port Forwarding ends here-->
<!-- Load Balancer start here-->
<div class="grid_container">
<div class="grid_header">
<div class="grid_header_cell" style="width:29%">
<div class="grid_header_title">Name</div>
</div>
<div class="grid_header_cell" style="width:20%">
<div class="grid_header_title">Public Port</div>
</div>
<div class="grid_header_cell" style="width:20%">
<div class="grid_header_title">Private Port</div>
</div>
<div class="grid_header_cell" style="width:30%; border:none;">
<div class="grid_header_title">Algorithm</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 29%;">
<div class="row_celltitles">LB#1</div>
</div>
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">8080</div>
</div>
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">80</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">Source</div>
</div>
<div class="grid_detailspanel" style="display:block;">
<div class="grid_details_pointer"></div>
<div class="grid_detailsbox">
<div class="grid_details_row">
<div class="grid_row_cell" style="width: 9%;">
<div class="row_celltitles"><img src="images/network_managevmicon.gif" /></div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">1-2-2-TEST</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">10.23.231.230</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles"><a href="#">Remove</a></div>
</div>
</div>
<div class="grid_details_row odd">
<div class="grid_row_cell" style="width: 9%;">
<div class="row_celltitles"><img src="images/network_managevmicon.gif" /></div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">1-2-2-TEST</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">10.23.231.230</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles"><a href="#">Remove</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 29%;">
<div class="row_celltitles">LB#1</div>
</div>
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">8080</div>
</div>
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">80</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">Source</div>
</div>
<div class="grid_detailspanel" style="display:none;">
<div class="grid_details_pointer"></div>
<div class="grid_detailsbox">
<div class="grid_details_row">
<div class="grid_row_cell" style="width: 9%;">
<div class="row_celltitles"><img src="images/network_managevmicon.gif" /></div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">1-2-2-TEST</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">10.23.231.230</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles"><a href="#">Remove</a></div>
</div>
</div>
<div class="grid_details_row odd">
<div class="grid_row_cell" style="width: 9%;">
<div class="row_celltitles"><img src="images/network_managevmicon.gif" /></div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">1-2-2-TEST</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles">10.23.231.230</div>
</div>
<div class="grid_row_cell" style="width: 30%;">
<div class="row_celltitles"><a href="#">Remove</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load Balancer ends here-->
</div>
<!-- event detail panel (end) -->