mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
UI for Dashboard
This commit is contained in:
NIKITA
parent
74bd85a3c0
commit
6b22e51221
@ -1731,6 +1731,13 @@ a:visited {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.main_contentarea_dashboard {
|
||||
width:auto;
|
||||
min-height:1000px;
|
||||
height:auto;
|
||||
margin:0 0 0 10px;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.main_title {
|
||||
width:100%;
|
||||
@ -1765,7 +1772,7 @@ a:visited {
|
||||
width:98%;
|
||||
height:auto;
|
||||
float:left;
|
||||
margin:20px 0 0 10px;
|
||||
margin:10px 0 0 10px;
|
||||
display:inline;
|
||||
padding:0;
|
||||
}
|
||||
@ -1814,7 +1821,7 @@ a:visited {
|
||||
height:auto;
|
||||
float:left;
|
||||
border:1px solid #CCC;
|
||||
margin:10px 0 0 0;
|
||||
margin:7px 0 0 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
@ -1922,6 +1929,29 @@ a:visited {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.row_celltitles.alert {
|
||||
width:100%;
|
||||
height:auto;
|
||||
float:left;
|
||||
color:#a90000;
|
||||
text-align:left;
|
||||
font-size:11px;
|
||||
font-weight:bold;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.row_celltitles.alertdetails {
|
||||
width:100%;
|
||||
height:auto;
|
||||
float:left;
|
||||
color:#5c5c5c;
|
||||
text-align:left;
|
||||
font-size:11px;
|
||||
font-weight:normal;
|
||||
margin:6px 0 0 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
.row_celltitles a{
|
||||
@ -2277,6 +2307,22 @@ a:visited {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.gridheader_morebutt {
|
||||
width:41px;
|
||||
height:17px;
|
||||
float:left;
|
||||
background:url(../images/more_button.png) no-repeat top left;
|
||||
margin:1px 10px 0 0;
|
||||
cursor:pointer;
|
||||
cursor:hand;
|
||||
display:inline;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.gridheader_morebutt:hover {
|
||||
background:url(../images/more_button_hover.png) no-repeat top left;
|
||||
}
|
||||
|
||||
.gridheader_message {
|
||||
width:auto;
|
||||
height:20px;
|
||||
@ -2457,7 +2503,7 @@ a:visited {
|
||||
}
|
||||
|
||||
.dbgraph_title_usedbox {
|
||||
width:170px;
|
||||
width:187px;
|
||||
height:16px;
|
||||
float:left;
|
||||
background:url(../images/db_usedbox.gif) no-repeat top left;
|
||||
@ -2479,4 +2525,36 @@ a:visited {
|
||||
|
||||
.dbgraph_title_usedbox span {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.db_barbox {
|
||||
height:17px;
|
||||
float:left;
|
||||
margin:12px 0 0 0;
|
||||
border:1px solid #666;
|
||||
border-left:none;
|
||||
}
|
||||
|
||||
.db_barbox.low {
|
||||
background:url(../images/dbbar_low.gif) repeat-x top left;
|
||||
}
|
||||
|
||||
.db_barbox.mid {
|
||||
background:url(../images/dbbar_mid.gif) repeat-x top left;
|
||||
}
|
||||
|
||||
.db_barbox.high {
|
||||
background:url(../images/dbbar_high.gif) repeat-x top left;
|
||||
}
|
||||
|
||||
.db_totaltitle {
|
||||
width:auto;
|
||||
height:auto;
|
||||
float:right;
|
||||
text-align:right;
|
||||
color:#333;
|
||||
font-size:16px;
|
||||
font-weight:bold;
|
||||
margin:14px 15px 0 0;
|
||||
padding:0;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 529 B After Width: | Height: | Size: 537 B |
BIN
ui/new/images/dbbar_high.gif
Normal file
BIN
ui/new/images/dbbar_high.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 B |
BIN
ui/new/images/dbbar_low.gif
Normal file
BIN
ui/new/images/dbbar_low.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 B |
BIN
ui/new/images/dbbar_mid.gif
Normal file
BIN
ui/new/images/dbbar_mid.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 B |
BIN
ui/new/images/more_button.png
Normal file
BIN
ui/new/images/more_button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
ui/new/images/more_button_hover.png
Normal file
BIN
ui/new/images/more_button_hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow even">
|
||||
<div class="dbrow_cell" style="width:40%;">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>Public IP Addresses</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
@ -43,11 +43,295 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:50%; border:none;"></div>
|
||||
<div class="dbrow_cell" style="width:9%; border:none;"></div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox low" style="width:18%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">18.2 %</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow odd"></div>
|
||||
|
||||
<div class="dbrow odd">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>Private IP Addresses</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
<p>Used: <span> 2 / 10 </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox low" style="width:20%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">20 %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dbrow even">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>Memory Allocated</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
<p>Used: <span> 2.12 GB / 3.22 GB </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox mid" style="width:66%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">65.8 %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dbrow odd">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>CPU</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
<p>Used: <span> 8 MHZ / 9.60 MHZ </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox high" style="width:83%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">83.3 %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dbrow even">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>Primary Storage Allocated</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
<p>Used: <span> Used: 4.00 GB / 3.50 TB </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox low" style="width:15%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">15.2 %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dbrow odd">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>Primary Storage Used</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
<p>Used: <span> 999.17 GB / 1.75 TB </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox low" style="width:40%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">40.12 %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dbrow even">
|
||||
<div class="dbrow_cell" style="width:29%;">
|
||||
<div class="dbgraph_titlebox">
|
||||
<h2>Secondary Storage Used</h2>
|
||||
<div class="dbgraph_title_usedbox">
|
||||
<p>Used: <span> 599.17 GB / 1.75 TB </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:58%; border:none;">
|
||||
<div class="db_barbox low" style="width:20%;"></div>
|
||||
</div>
|
||||
<div class="dbrow_cell" style="width:12%; border:none;">
|
||||
<div class="db_totaltitle">20.12 %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--General Alerts-->
|
||||
<div class="grid_container" style="width:49%; margin-top:15px;">
|
||||
<div class="grid_header">
|
||||
<div class="grid_header_cell" style="width:60%; border:none;">
|
||||
<div class="grid_header_title">General Alerts</div>
|
||||
</div>
|
||||
<div class="grid_header_cell" style="width:40%; border:none;">
|
||||
<div class="grid_header_formbox">
|
||||
<div class="gridheader_morebutt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Host Alerts-->
|
||||
<div class="grid_container" style="width:48%; margin-top:15px; float:right;">
|
||||
<div class="grid_header">
|
||||
<div class="grid_header_cell" style="width:60%; border:none;">
|
||||
<div class="grid_header_title">General Alerts</div>
|
||||
</div>
|
||||
<div class="grid_header_cell" style="width:40%; border:none;">
|
||||
<div class="grid_header_formbox">
|
||||
<div class="gridheader_morebutt"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width:10%;">
|
||||
<div class="row_celltitles"><img src="images/alert_icon.png" /></div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:70%;">
|
||||
<div class="row_celltitles alert">Alerts name</div>
|
||||
<div class="row_celltitles alertdetails">Details about the alert will appear here</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_row_cell" style="width:19%;">
|
||||
<div class="row_celltitles">09/17/2010 14:33:49</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user