1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-30 22:50:10 +03:00

Feature #4363: Fix cloud view dashboard

This commit is contained in:
Daniel Molina 2016-04-13 17:00:59 +02:00
parent fc3ab2d7ab
commit 5455bae853
11 changed files with 101 additions and 98 deletions

View File

@ -296,7 +296,7 @@ define(function(require) {
$(".section_content").hide();
$("#provision_dashboard").fadeIn();
$("#provision_dashboard").html("");
$("#provision_dashboard").html('');
if (Config.provision.dashboard.isEnabled("vms")) {
$("#provision_dashboard").append(TemplateDashboardVms());

View File

@ -15,9 +15,9 @@
{{! -------------------------------------------------------------------------- }}
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">{{tr "Quotas"}}</h2>
<br></div>
<div class="large-12 columns">
<h4>{{tr "Quotas"}}</h2>
</div>
</div>
<div class="row">
<div class="large-10 large-centered columns">

View File

@ -13,115 +13,104 @@
{{! See the License for the specific language governing permissions and }}
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">{{tr "Virtual Machines"}}</h2>
<br></div>
</div>
<div class="row" id="provision_vms_dashboard">
<div class="large-11 large-centered columns">
<div class="large-12 columns">
<h4>{{tr "Virtual Machines"}}</h4>
<div class="row">
<div class="large-4 columns text-center">
<br>
<div class="large-3 columns text-center">
<div class="row">
<div class="large-12 columns">
<span id="provision_dashboard_total" style="font-size:80px"> <i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999;">{{tr "TOTAL"}}</span>
<h2>
<span id="provision_dashboard_total"> <i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<small class="subheader">{{tr "TOTAL"}}</small>
</h2>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-12 columns text-center">
<a href"#" class="medium button success large radius provision_create_vm_button" style="margin-left: 5px; margin-right: 5px"> <i class="fa fa-lg fa-plus-square"/></a>
<a href"#" class="medium button large radius provision_vms_list_button" style="margin-left: 5px; margin-right: 5px">
<div class="large-12 columns">
<a href"#" class="medium button success provision_create_vm_button"> <i class="fa fa-lg fa-plus-square"/></a>
<a href"#" class="medium button provision_vms_list_button">
<i class="fa fa-lg fa-th"/></a>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-2 columns">
<div class="row">
<div class="large-12 columns text-center">
<span id="provision_dashboard_running" style="font-size:40px">
<div class="large-9 columns text-center">
<div class="large-10 large-centered columns">
<div class="large-3 columns">
<h4>
<span id="provision_dashboard_running">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "RUNNING"}}</span>
</div>
</span><br>
<small class="subheader">{{tr "RUNNING"}}</small>
</h4>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center ">
<span id="provision_dashboard_deploying" style="font-size:40px">
<div class="large-3 columns ">
<h4>
<span id="provision_dashboard_deploying" >
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "DEPLOYING"}}</span>
</div>
</span><br>
<small class="subheader">{{tr "DEPLOYING"}}</small>
</h4>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center">
<span id="provision_dashboard_off" style="font-size:40px">
<div class="large-3 columns">
<h4>
<span id="provision_dashboard_off">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "OFF"}}</span>
</div>
</span><br>
<small class="subheader">{{tr "OFF"}}</small>
</h4>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center ">
<span id="provision_dashboard_error" style="font-size:40px">
<div class="large-3 columns ">
<h4>
<span id="provision_dashboard_error">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "ERROR"}}</span>
</div>
</span><br>
<small class="subheader">{{tr "ERROR"}}</small>
</h4>
</div>
</div>
<div class="large-6 columns" id="dashboard_vm_accounting">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "CPU hours"}}</small>
</h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
<hr>
</div>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "Memory GB hours"}}</small>
</h3>
<div class="large-12 columns" id="dashboard_vm_accounting">
<div class="large-4 columns text-center">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend">
<span class="subheader">
<span>{{tr "CPU hours"}}</span>
</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
<div class="large-4 columns text-center">
<div class="row">
<div class="large-12 columns graph_legend">
<span class="subheader">
<span>{{tr "Memory GB hours"}}</span>
</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "Disk MB hours"}}</small>
</h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
<div class="large-4 columns text-center">
<div class="row">
<div class="large-12 columns graph_legend">
<span class="subheader">
<span>{{tr "Disk MB hours"}}</span>
</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>

View File

@ -294,7 +294,7 @@ define(function(require) {
color: "#999",
size: 10
},
ticks: 4,
ticks: 3,
minTickSize: [1, "day"]
},
yaxis : { min: 0,

View File

@ -5,11 +5,16 @@
h3,
h4 {
margin: 2rem 0;
border-bottom: 1px solid #dfdfdf;
}
a {
padding: 0;
}
.provision_back {
margin-top: 1rem;
}
}
.provision-search-input {
@ -25,7 +30,8 @@
.right {
&.provision_list_vms_filter,
&.provision_list_flows_filter {
&.provision_list_flows_filter,
&.provision_list_templates_filter {
margin-top: -0.5rem;
}
}

View File

@ -11,6 +11,7 @@
//padding: 1rem;
//color: $black;
font-size: 1.1rem;
font-weight: bold;
}
.without-link {
@ -20,7 +21,8 @@
//color: $black;
font-size: 1.1rem;
display: block;
font-weight: normal;
font-weight: bold;
color: $bold-black;
}
}

View File

@ -1,5 +1,5 @@
fieldset {
padding: 1rem;
padding: 2rem;
legend {

View File

@ -144,8 +144,8 @@
& > li > a {
font-size: 1.1rem;
font-weight: normal;
color: $dark-gray;
font-weight: bold;
color: $medium-gray;
}
& > li.active > a {

View File

@ -0,0 +1,5 @@
#provision_dashboard,
#provision_create_vm,
#provision_create_flow {
padding: 2rem;
}

View File

@ -134,7 +134,7 @@ $header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$small-font-size: 60%;
$header-small-font-color: $dark-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;

View File

@ -31,6 +31,7 @@
@import './fieldset';
@import './boxes';
@import './vcenter';
@import './provision';
@ -51,7 +52,7 @@ h5,
h6 {
font-weight: bold;
color: #555;
padding: 1rem;
padding: 1rem 0;
/* box-shadow: 0 5px 5px -4px rgba(0,0,0,0.1); */
/* border-bottom: 1px solid #dfdfdf; */