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

Style pie chart area; move chart box to top of panel

This commit is contained in:
Brian Federle 2013-10-07 16:44:47 -07:00
parent ad0c757b45
commit ce88d34c42
2 changed files with 88 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
ui/index.jsp
View File

@ -1226,6 +1226,54 @@ under the License.
<!-- Admin dashboard -->
<div class="dashboard admin">
<!-- Capacity / stats -->
<div class="dashboard-container head">
<div class="top">
<div class="title">
<span></span>
</div>
<div class="button fetch-latest">
<span><fmt:message key="label.fetch.latest"/></span>
</div>
<div class="selects" style="display:none;">
<div class="select">
<label><fmt:message key="label.zone"/>:</label>
<select>
</select>
</div>
<div class="select">
<label><fmt:message key="label.pods"/>:</label>
<select>
</select>
</div>
</div>
</div>
<!-- Zone stat charts -->
<div class="zone-stats">
<ul data-item="zoneCapacities">
<li concat-value="25">
<div class="label">
<fmt:message key="label.zone"/>: <span data-list-item="zoneName"></span>
</div>
<div class="pie-chart-container">
<div class="percent-label"><span data-list-item="percent"></span>%</div>
<div class="pie-chart" data-list-item="percent"></div>
</div>
<div class="info">
<div class="name" data-list-item="type"></div>
<div class="value">
<span class="used" data-list-item="used"></span>
<span class="divider">/</span>
<span class="total" data-list-item="total"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- General alerts-->
<div class="dashboard-container sub alerts first">
<div class="top">
@ -1256,55 +1304,7 @@ under the License.
</div>
</li>
</ul>
</div>
<!-- Capacity / stats -->
<div class="dashboard-container head">
<div class="top">
<div class="title">
<span></span>
</div>
<div class="button fetch-latest">
<span><fmt:message key="label.fetch.latest"/></span>
</div>
<div class="selects" style="display:none;">
<div class="select">
<label><fmt:message key="label.zone"/>:</label>
<select>
</select>
</div>
<div class="select">
<label><fmt:message key="label.pods"/>:</label>
<select>
</select>
</div>
</div>
</div>
<!-- Zone stat charts -->
<div class="zone-stats">
<ul data-item="zoneCapacities">
<li concat-value="25">
<div class="label">
<fmt:message key="label.zone"/>: <span data-list-item="zoneName"></span>
</div>
<div class="pie-chart-container">
<div class="percent-label"><span data-list-item="percent"></span>%</div>
<div class="pie-chart" data-list-item="percent"></div>
</div>
<div class="info">
<div class="name" data-list-item="type"></div>
<div class="value">
<span class="used" data-list-item="used"></span>
<span class="divider">/</span>
<span class="total" data-list-item="total"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- User dashboard-->

43
ui/stylesheets/_dashboard.scss
View File

@ -17,10 +17,19 @@
// Admin dashboard
.dashboard.admin {
padding: 10px;
.sub.alerts {
width: 50%;
float: left;
padding: 15px;
width: 48%;
margin-top: 25px;
&.first {
float: left;
}
&.last {
float: right;
}
ul {
height: 200px;
@ -72,6 +81,26 @@
}
}
.head {
float: left;
border: 1px solid #cfcfcf;
.top {
@include csui-toolbar;
.title {
float: left;
margin-top: 8px;
}
.fetch-latest {
@include csui-button;
float: right;
}
}
}
.zone-stats {
@include row;
@ -79,11 +108,13 @@
ul {
padding: 0;
max-height: 230px;
overflow: auto;
li {
width: 200px;
height: 200px;
margin: 15px;
margin: 13px;
list-style: none;
float: left;
border: 1px solid #ccc;
@ -101,6 +132,10 @@
width: 100px;
height: 100px;
canvas.overlay {
display: none;
}
.percent-label {
position: absolute;
top: 30px;