mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-22 18:50:08 +03:00
Small Sunstone fixes
This commit contains small improvement and fixes in Sunstone javascript client code: - Columns widths in some tables have been adjusted - Login form submission is handled in a better way - Login error message fade in on top of the login box - Login screen compacts in screens with smaller resolution - +/- icon toggle in the create template dialog has been improved - Dashboards left table expands to take 100% of available width - Host/VM plots have a bit less width, so no scroll bar appears - Page title changed to "OpenNebula Sunstone"
This commit is contained in:
Hector Sanjuan
Ruben S. Montero
parent
6d66dac27b
commit
66baf1d053
@ -52,8 +52,7 @@ div#logo_sunstone {
|
||||
top: 80px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: url(../images/opennebula-sunstone-big.png) no-repeat center ;
|
||||
|
||||
background: url(../images/opennebula-sunstone-big.png) no-repeat center;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
@ -135,7 +134,7 @@ div#login input#login_btn:hover {
|
||||
.error_message {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 150px;
|
||||
top: 80px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color:red;
|
||||
font-size:1.6em;
|
||||
|
||||
@ -23,15 +23,15 @@ function auth_error(req, error){
|
||||
var status = error.error.http_status;
|
||||
|
||||
switch (status){
|
||||
case 401:
|
||||
$("#one_error").hide();
|
||||
$("#auth_error").show();
|
||||
break;
|
||||
case 500:
|
||||
$("#auth_error").hide();
|
||||
$("#one_error").show();
|
||||
break;
|
||||
}
|
||||
case 401:
|
||||
$("#one_error").hide();
|
||||
$("#auth_error").fadeIn("slow");
|
||||
break;
|
||||
case 500:
|
||||
$("#auth_error").hide();
|
||||
$("#one_error").fadeIn("slow");
|
||||
break;
|
||||
};
|
||||
}
|
||||
|
||||
function authenticate(){
|
||||
@ -47,21 +47,18 @@ function authenticate(){
|
||||
});
|
||||
}
|
||||
|
||||
function logout(){
|
||||
OpenNebula.Auth.logout();
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$("#login_btn").click(function () {
|
||||
$("#login_form").submit(function (){
|
||||
authenticate();
|
||||
return false;
|
||||
});
|
||||
|
||||
$("input").keydown(function (e){
|
||||
if (e.keyCode == 13) {
|
||||
authenticate();
|
||||
}
|
||||
});
|
||||
//compact login elements according to screen height
|
||||
if (screen.height <= 600){
|
||||
$('div#logo_sunstone').css("top","15px");
|
||||
$('div#login').css("top","10px");
|
||||
$('.error_message').css("top","10px");
|
||||
};
|
||||
|
||||
$("input#username.box").get(0).focus();
|
||||
$("input#username.box").focus();
|
||||
});
|
||||
|
||||
@ -46,7 +46,7 @@ var dashboard_tab_content =
|
||||
'<table id="dashboard_table">\
|
||||
<tr>\
|
||||
<td style="width:40%">\
|
||||
<table id="information_table">\
|
||||
<table id="information_table" style="width:100%">\
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
|
||||
@ -46,7 +46,7 @@ var dashboard_tab_content =
|
||||
'<table id="dashboard_table">\
|
||||
<tr>\
|
||||
<td style="width:40%">\
|
||||
<table id="information_table">\
|
||||
<table id="information_table" style="width:100%;">\
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
|
||||
@ -594,6 +594,7 @@ $(document).ready(function(){
|
||||
{ "bSortable": false, "aTargets": ["check"] },
|
||||
{ "sWidth": "60px", "aTargets": [0,3] },
|
||||
{ "sWidth": "35px", "aTargets": [1] },
|
||||
{ "sWidth": "100px", "aTargets": [6] },
|
||||
{ "sWidth": "200px", "aTargets": [4,5] }
|
||||
]
|
||||
});
|
||||
|
||||
@ -32,7 +32,7 @@ var images_tab_content =
|
||||
<th>Registration time</th>\
|
||||
<th>Public</th>\
|
||||
<th>Persistent</th>\
|
||||
<th>State</th>\
|
||||
<th>Status</th>\
|
||||
<th>#VMS</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
@ -750,9 +750,10 @@ $(document).ready(function(){
|
||||
"sPaginationType": "full_numbers",
|
||||
"aoColumnDefs": [
|
||||
{ "bSortable": false, "aTargets": ["check"] },
|
||||
{ "sWidth": "60px", "aTargets": [0,3] },
|
||||
{ "sWidth": "35px", "aTargets": [1] },
|
||||
{ "sWidth": "100px", "aTargets": [2,3,4] }
|
||||
{ "sWidth": "60px", "aTargets": [0,2,3,5,7,8,9] },
|
||||
{ "sWidth": "35px", "aTargets": [1,10] },
|
||||
{ "sWidth": "100px", "aTargets": [9] },
|
||||
{ "sWidth": "150px", "aTargets": [6] }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
@ -1259,15 +1259,35 @@ function setupCreateTemplateDialog(){
|
||||
|
||||
//Toggles the icon when a section is folded/unfolded
|
||||
var iconToggle = function(){
|
||||
$('.icon_right',dialog).toggle(
|
||||
function(e){
|
||||
$('span',e.currentTarget).removeClass("ui-icon-plusthick");
|
||||
$('span',e.currentTarget).addClass("ui-icon-minusthick");
|
||||
},function(e){
|
||||
$('span',e.currentTarget).removeClass("ui-icon-minusthick");
|
||||
$('span',e.currentTarget).addClass("ui-icon-plusthick");
|
||||
$('.icon_left',$create_template_dialog).click(function(e){
|
||||
if ($('span',e.currentTarget).hasClass("ui-icon-plus")){
|
||||
$('span',e.currentTarget).removeClass("ui-icon-plus");
|
||||
$('span',e.currentTarget).addClass("ui-icon-minus");
|
||||
} else {
|
||||
$('span',e.currentTarget).removeClass("ui-icon-minus");
|
||||
$('span',e.currentTarget).addClass("ui-icon-plus");
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
//Fold/unfold all sections button
|
||||
var foldUnfoldToggle = function() {
|
||||
$('#fold_unfold_vm_params',$create_template_dialog).toggle(
|
||||
function(){
|
||||
$('.vm_section fieldset',$create_template_dialog).show();
|
||||
$('.icon_left span',$create_template_dialog).removeClass("ui-icon-plus");
|
||||
$('.icon_left span',$create_template_dialog).addClass("ui-icon-minus");
|
||||
return false;
|
||||
},
|
||||
function(){
|
||||
$('.vm_section fieldset',$create_template_dialog).hide();
|
||||
//Show capacity opts
|
||||
$('.vm_section fieldset',$create_template_dialog).first().show();
|
||||
$('.icon_left span',$create_template_dialog).removeClass("ui-icon-minus");
|
||||
$('.icon_left span',$create_template_dialog).addClass("ui-icon-plus");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Set ups the capacity section
|
||||
var capacity_setup = function(){
|
||||
@ -1795,18 +1815,7 @@ filled in");
|
||||
|
||||
vmTabChange(0,{index : 0}); //enable kvm
|
||||
|
||||
//Fold/unfold all sections button
|
||||
$('#fold_unfold_vm_params',dialog).toggle(
|
||||
function(){
|
||||
$('.vm_section fieldset',$create_template_dialog).show();
|
||||
return false;
|
||||
},
|
||||
function(){
|
||||
$('.vm_section fieldset',$create_template_dialog).hide();
|
||||
//Show capacity opts
|
||||
$('.vm_section fieldset',$create_template_dialog).first().show();
|
||||
return false;
|
||||
});
|
||||
foldUnfoldToggle();
|
||||
|
||||
//initialise all sections
|
||||
capacity_setup();
|
||||
@ -1969,9 +1978,10 @@ $(document).ready(function(){
|
||||
"sPaginationType": "full_numbers",
|
||||
"aoColumnDefs": [
|
||||
{ "bSortable": false, "aTargets": ["check"] },
|
||||
{ "sWidth": "60px", "aTargets": [0] },
|
||||
{ "sWidth": "60px", "aTargets": [0,6] },
|
||||
{ "sWidth": "35px", "aTargets": [1] },
|
||||
{ "sWidth": "100px", "aTargets": [2,3,4] }
|
||||
{ "sWidth": "150px", "aTargets": [5] },
|
||||
{ "sWidth": "100px", "aTargets": [2,3] }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
@ -1075,9 +1075,10 @@ $(document).ready(function(){
|
||||
"bAutoWidth":false,
|
||||
"aoColumnDefs": [
|
||||
{ "bSortable": false, "aTargets": ["check"] },
|
||||
{ "sWidth": "60px", "aTargets": [0] },
|
||||
{ "sWidth": "35px", "aTargets": [1,9] },
|
||||
{ "sWidth": "100px", "aTargets": [2,3,4] }
|
||||
{ "sWidth": "60px", "aTargets": [0,6,7] },
|
||||
{ "sWidth": "35px", "aTargets": [1,10] },
|
||||
{ "sWidth": "150px", "aTargets": [5,9] },
|
||||
{ "sWidth": "100px", "aTargets": [2,3] }
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ var vnets_tab_content =
|
||||
<th>Name</th>\
|
||||
<th>Type</th>\
|
||||
<th>Bridge</th>\
|
||||
<th>Public?</th>\
|
||||
<th>Public</th>\
|
||||
<th>Total Leases</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
|
||||
@ -511,9 +511,9 @@ function escapeDoubleQuotes(string){
|
||||
//of plotting comes, we can put the data in the right place.
|
||||
function generateMonitoringDivs(graphs, id_prefix){
|
||||
var str = "";
|
||||
//42% of the width of the screen minus
|
||||
//43% of the width of the screen minus
|
||||
//129px (left menu size)
|
||||
var width = ($(window).width()-129)*42/100;
|
||||
var width = ($(window).width()-129)*40/100;
|
||||
var id_suffix="";
|
||||
var label="";
|
||||
var id="";
|
||||
@ -614,7 +614,7 @@ function setupTemplateUpdateDialog(){
|
||||
//Put HTML in place
|
||||
dialog.html(
|
||||
'<form action="javascript:alert(\'js error!\');">\
|
||||
<h3 style="margin-bottom:10px;">Update the template here:</h3>\
|
||||
<h3 style="margin-bottom:10px;">Please, choose and modify the template you want to update:</h3>\
|
||||
<fieldset style="border-top:none;">\
|
||||
<label for="template_update_select">Select a template:</label>\
|
||||
<select id="template_update_select" name="template_update_select"></select>\
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>OpenNebula Admin Console Login</title>
|
||||
<title>OpenNebula Sunstone Login</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/login.css" />
|
||||
|
||||
<!-- Vendor Libraries -->
|
||||
@ -24,6 +24,14 @@
|
||||
<div id="wrapper">
|
||||
<div id="logo_sunstone">
|
||||
</div>
|
||||
|
||||
<div id="auth_error" class="error_message">
|
||||
Invalid username or password
|
||||
</div>
|
||||
<div id="one_error" class="error_message">
|
||||
OpenNebula is not running
|
||||
</div>
|
||||
|
||||
<form id="login_form">
|
||||
<div class="border" id="login">
|
||||
<div class="content">
|
||||
@ -32,20 +40,13 @@
|
||||
Password
|
||||
<input type="password" size="15" name="password" id="password" class="box"/>
|
||||
<br />
|
||||
<input type="checkbox" id="check_remember">
|
||||
<input type="checkbox" id="check_remember" />
|
||||
<label id="label_remember" for="check_remember">Remember me</label>
|
||||
<input type="button" id="login_btn" value="" />
|
||||
<input type="submit" id="login_btn" value="" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="auth_error" class="error_message">
|
||||
Invalid username or password
|
||||
</div>
|
||||
<div id="one_error" class="error_message">
|
||||
OpenNebula is not running
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenNebula Admin Console</title>
|
||||
<title>OpenNebula Sunstone: Cloud Operations Center</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
|
||||
|
||||
<!-- Vendor Libraries -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user