New Ui for Dashboard

ui/new/css/main.css

@@ -2158,6 +2158,26 @@ a:visited {
 	border-right:1px solid #CCC;
 }
 
+.grid_header_formbox {
+	width:auto;
+	height:auto;
+	float:right;
+	margin:0;
+	padding:0;
+}
+
+.grid_header_cell .select {
+	height:15px;
+	float:left;
+	margin:2px 10px 0 0;
+	display:inline;
+	padding:0;
+	border:1px solid #999;
+	background:#e7e7e7;
+	color:#333;
+	font-size:11px;
+}
+
 .grid_header_title {
 	width:auto;
 	height:auto;
@@ -2389,4 +2409,74 @@ a:visited {
 	margin:0;
 	padding:0;
 	z-index:1002;
+}
+
+.dbrow {
+	width:100%;
+	height:44px;
+	float:left;
+	border-bottom:1px solid #e2e2e2;
+	margin:0;
+	padding:0;
+}
+
+.dbrow.even {
+	background:url(../images/dbrow_even.gif) repeat-x top left;
+}
+
+.dbrow.odd {
+	background:url(../images/dbrow_odd.gif) repeat-x top left;
+}
+
+.dbrow_cell {
+	height:44px;
+	float:left;
+	border-right:1px solid #e2e2e2;
+	margin:0;
+	padding:0;
+}
+
+.dbgraph_titlebox {
+	width:95%;
+	height:auto;
+	float:left;
+	margin:5px 0 0 10px;
+	padding:0;
+}
+
+.dbgraph_titlebox h2{
+	width:80%;
+	height:auto;
+	float:left;
+	color:#333;
+	font-size:11px;
+	font-weight:normal;
+	text-align:left;
+	margin:0;
+	padding:0;
+}
+
+.dbgraph_title_usedbox {
+	width:170px;
+	height:16px;
+	float:left;
+	background:url(../images/db_usedbox.gif) no-repeat top left;
+	margin:3px 0 0 0;
+	padding:0;
+}
+
+.dbgraph_title_usedbox p {
+	width: auto;
+	height:auto;
+	float:left;
+	color:#FFF;
+	font-size:11px;
+	font-weight:normal;
+	text-align:left;
+	margin:2px 0 0 5px;
+	padding:0;
+}
+
+.dbgraph_title_usedbox span {
+	font-weight:bold;
 }

ui/new/jsp/dashboard.jsp

@@ -0,0 +1,53 @@
+<%@ 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/title_dashboardicon.gif" alt="Event" /></div>
+   
+    <h1>Dashboard
+    </h1>
+</div>
+
+<!--Dashboard-->
+<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="grid_container">
+       <div class="grid_header">
+       		<div class="grid_header_cell" style="width:60%; border:none;">
+            	<div class="grid_header_title">System Wide Capacity</div>
+            </div>
+            <div class="grid_header_cell" style="width:40%; border:none;">
+            	<div class="grid_header_formbox">
+                    <select class="select" style="width:70px; "><option value="opt1">Op1</option> <option value="opt2">Op2</option></select>
+                    <select class="select" style="width:70px;"><option value="opt1">All</option> <option value="opt2">Op2</option></select>
+                    </div>
+            </div>
+       </div>
+       <div class="dbrow even">
+       		<div class="dbrow_cell" style="width:40%;">
+            	<div class="dbgraph_titlebox">
+                	<h2>Public IP Addresses</h2>
+                    <div class="dbgraph_title_usedbox">
+                    	<p>Used: <span> 2 / 11 </span></p>
+                    </div>
+                </div>
+            </div>
+            <div class="dbrow_cell" style="width:50%; border:none;"></div>
+            <div class="dbrow_cell" style="width:9%; border:none;"></div>
+       </div>
+       <div class="dbrow odd"></div>
+    </div>
+</div>
+
+