shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-21 14:50:08 +03:00
Code Releases Wiki Activity

Improve buttons layout and add Description for vnets and templates

Browse Source
This commit is contained in:
Daniel Molina 2014-04-10 17:11:03 +02:00
parent 17fb254de5
commit a82b92ea57
14 changed files with 190 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/sunstone/public/css/app.css
View File

File diff suppressed because one or more lines are too long

53
src/sunstone/public/js/plugins/config-tab.js
View File

@ -109,8 +109,19 @@ var config_tab_content =
</div>\
</div>\
<div class="row">\
<div id="setting_user_template" class="large-12 columns">\
</div>\
<div id="setting_user_template" class="large-12 columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<br>'+
'<span style="font-size: 18px; color: #999">'+
tr("")+
'</span>'+
'</div>'+
'</div>\
</div>\
</div>\
<div id="conf_configuration" class="row content">\
@ -151,9 +162,22 @@ var config_tab_content =
</dl>\
<div class="tabs-content">\
<div class="content active" id="user_quotas">\
<div class="large-12 columns">\
<p class="subheader">'+tr("No quotas defined")+'</p>\
</div>\
<div class="large-12 columns">'+
'<div class="row">'+
'<div class="large-8 large-centered columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<p style="font-size: 18px; color: #999">'+
tr("There are no quotas defined")+
'</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>\
</div>\
<div id="group_quotas" class="content">\
<div class="row">\
@ -165,9 +189,22 @@ var config_tab_content =
</div>\
</div>\
<div id="group_quotasTabBody" class="row">\
<div class="large-12 columns">\
<p class="subheader">'+tr("No quotas defined")+'</p>\
</div>\
<div class="large-12 columns">'+
'<div class="row">'+
'<div class="large-8 large-centered columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<p style="font-size: 18px; color: #999">'+
tr("There are no quotas defined")+
'</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>\
</div>\
</div>\
</div>\

124
src/sunstone/public/js/plugins/dashboard-tab.js
View File

@ -199,38 +199,55 @@ var widgets = {
</div>\
</div>\
</fieldset>',
"quotas" : '<fieldset>\
<legend class="span-dashboard"><i class="fa fa-align-left"></i> '+tr("Quotas")+'</legend>\
<div class="row totals-info">\
<div class="large-12 columns">\
<dl class="tabs" data-tab>\
<dd class="active"><a href="#quotas_tab_user">User Quotas</a></dd>\
<dd><a href="#quotas_tab_group">'+tr("Group Quotas")+'</a></dd>\
</dl>\
<div class="tabs-content">\
<div class="content active" id="quotas_tab_user">\
<div class="large-12 columns">\
<p class="subheader">'+tr("No quotas defined")+'</p>\
"user_quotas" : '<fieldset>\
<legend class="span-dashboard"><i class="fa fa-align-left"></i> '+tr("User Quotas")+'</legend>\
<div class="row" id="quotas_tab_user">\
<div class="large-12 columns">'+
'<div class="row">'+
'<div class="large-8 large-centered columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<p style="font-size: 18px; color: #999">'+
tr("There are no quotas defined")+
'</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>\
</div>\
</fieldset>',
"group_quotas" : '<fieldset>\
<legend class="span-dashboard"><i class="fa fa-align-left"></i> '+tr("Group Quotas")+'</legend>\
<div id="quotas_tab_group_TabBody" class="row">\
<div class="large-12 columns">'+
'<div class="row">'+
'<div class="large-8 large-centered columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<p style="font-size: 18px; color: #999">'+
tr("There are no quotas defined")+
'</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>\
</div>\
<div class="row">\
<div class="large-12 columns">\
<label>' + tr("Select group") + ':\
<div id="quotas_tab_group_sel">\
</div>\
</div>\
<div id="quotas_tab_group" class="content">\
<div class="row">\
<div class="large-6 columns">\
<label>' + tr("Select group") + ':\
<div id="quotas_tab_group_sel">\
</div>\
</label>\
</div>\
</div>\
<div id="quotas_tab_group_TabBody" class="row">\
<div class="large-12 columns">\
<p class="subheader">'+tr("No quotas defined")+'</p>\
</div>\
</div>\
</div>\
</label>\
</div>\
</div>\
</div>\
</fieldset>'
}
@ -250,7 +267,8 @@ var widget_refresh = {
"vms" : function(){
Sunstone.runAction("VM.list");
},
"quotas" : refreshDashboardQuotas
"user_quotas" : refreshDashboardUserQuotas,
"group_quotas" : refreshDashboardGroupQuotas
}
var dashboard_tab_actions = {
@ -278,7 +296,7 @@ var quotas_tab_buttons = {
}
var dashboard_tab = {
title: '<i class="fa fa-tachometer"></i>'+tr("Dashboard"),
title: '<i class="fa fa-lg fa-fw fa-tachometer"></i>&emsp;'+tr("Dashboard"),
buttons: quotas_tab_buttons,
content: dashboard_tab_content,
showOnTopMenu: false,
@ -318,10 +336,20 @@ function updateUserQuotasInfo(request,user_json) {
quotas_tab_html += Quotas.datastore(info, default_user_quotas);
if (quotas_tab_html == ""){
quotas_tab_html =
'<div class="large-12 columns">\
<p class="subheader">'+tr("No quotas defined")+'</p>\
</div>'
quotas_tab_html = '<div class="row">'+
'<div class="large-8 large-centered columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<p style="font-size: 18px; color: #999">'+
tr("There are no quotas defined")+
'</p>'+
'</div>'+
'</div>'+
'</div>'
}
$("#quotas_tab_user", $dashboard).html(quotas_tab_html);
@ -350,18 +378,30 @@ function updateGroupQuotasInfo(request,group_json){
quotas_tab_html += Quotas.datastore(info, default_group_quotas);
if (quotas_tab_html == ""){
quotas_tab_html =
'<div class="large-12 columns">\
<p class="subheader">'+tr("No quotas defined")+'</p>\
</div>'
quotas_tab_html = '<div class="row">'+
'<div class="large-8 large-centered columns">'+
'<div class="text-center">'+
'<span class="fa-stack fa-5x" style="color: #dfdfdf">'+
'<i class="fa fa-cloud fa-stack-2x"></i>'+
'<i class="fa fa-align-left fa-stack-1x fa-inverse"></i>'+
'</span>'+
'<br>'+
'<p style="font-size: 18px; color: #999">'+
tr("There are no quotas defined")+
'</p>'+
'</div>'+
'</div>'+
'</div>'
}
$("#quotas_tab_group_TabBody", $dashboard).html(quotas_tab_html);
}
function refreshDashboardQuotas(){
function refreshDashboardUserQuotas(){
fillUserQuotasInfo();
}
function refreshDashboardGroupQuotas(){
gid = $("#quotas_tab_group_sel .resource_list_select", $dashboard).val();
if (gid == "" || gid == undefined){
@ -401,12 +441,12 @@ $(document).ready(function(){
})
$.each(Config.dashboardWidgets('widgets_one_per_row'), function(id, widget){
var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div><br>';
var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div>';
$('#one_per_row', $dashboard).append(html);
})
$.each(Config.dashboardWidgets('widgets_one_footer'), function(id, widget){
var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div><br>';
var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div>';
$('#one_footer', $dashboard).append(html);
});

2
src/sunstone/public/js/plugins/datastores-tab.js
View File

@ -470,7 +470,7 @@ var datastore_buttons = {
type: "confirm_with_select",
text: tr("Select cluster"),
select: "Cluster",
layout: "more_select",
layout: "main",
tip: tr("Select the destination cluster:"),
condition: mustBeAdmin
},

6
src/sunstone/public/js/plugins/hosts-tab.js
View File

@ -299,19 +299,19 @@ var host_buttons = {
text: tr("Select cluster"),
select: "Cluster",
tip: tr("Select the destination cluster:"),
layout: "more_select",
layout: "main",
condition: mustBeAdmin
},
"Host.enable" : {
type: "action",
text: tr("Enable"),
layout: "more_select",
layout: "main",
condition: mustBeAdmin
},
"Host.disable" : {
type: "action",
text: tr("Disable"),
layout: "more_select",
layout: "main",
condition: mustBeAdmin
},
"Host.delete" : {

2
src/sunstone/public/js/plugins/infra-tab.js
View File

@ -15,7 +15,7 @@
/* -------------------------------------------------------------------------- */
var infra_tab = {
title: '<i class="fa fa-sitemap"></i>'+tr("Infrastructure"),
title: '<i class="fa fa-lg fa-fw fa-sitemap"></i>&emsp;'+tr("Infrastructure"),
no_content: true
}

2
src/sunstone/public/js/plugins/marketplace-tab.js
View File

@ -224,7 +224,7 @@ var marketplace_import_dialog =
var marketplace_tab = {
title: '<i class="fa fa-shopping-cart"></i>' + tr("Marketplace"),
title: '<i class="fa fa-lg fa-fw fa-shopping-cart"></i>&emsp;' + tr("Marketplace"),
buttons: market_buttons,
search_input: '<input id="marketplace_search" type="text" placeholder="'+tr("Search")+'" />',
list_header: '<i class="fa fa-shopping-cart"></i> '+tr("OpenNebula Marketplace"),

2
src/sunstone/public/js/plugins/oneflow-dashboard.js
View File

@ -15,7 +15,7 @@
//------------------------------------------------------------------------- //
var oneflow_dashboard_tab = {
title: '<i class="fa fa-code-fork fa fa-rotate-90"></i> OneFlow',
title: '<i class="fa fa-lg fa-fw fa-code-fork fa-rotate-90"></i>&emsp;OneFlow',
no_content: true
}

2
src/sunstone/public/js/plugins/system-tab.js
View File

@ -15,7 +15,7 @@
/* -------------------------------------------------------------------------- */
var system_tab = {
title: '<i class="fa fa-cogs"></i>'+tr("System"),
title: '<i class="fa fa-lg fa-fw fa-cogs"></i>&emsp;'+tr("System"),
no_content: true
}

18
src/sunstone/public/js/plugins/templates-tab.js
View File

@ -471,7 +471,7 @@ var template_buttons = {
},
"Template.update_dialog" : {
type: "action",
layout: "more_select",
layout: "main",
text: tr("Update")
},
"Template.instantiate_vms" : {
@ -497,13 +497,12 @@ var template_buttons = {
},
"Template.clone_dialog" : {
type: "action",
layout: "more_select",
layout: "main",
text: tr("Clone")
},
"Template.delete" : {
type: "confirm",
layout: "del",
text: tr("Delete")
layout: "del"
},
//"Template.help" : {
@ -604,13 +603,19 @@ function updateTemplatesView(request, templates_list){
}
function generate_capacity_tab_content() {
var html = '<div id="template_name_form" class="row vm_param">'+
'<div class="large-6 columns">'+
var html = '<div class="row vm_param">'+
'<div id="template_name_form" class="large-6 columns">'+
'<label for="NAME">'+tr("Name")+'\
<span class="tip">'+tr("Name that the VM will get for description purposes.")+'</span>\
</label>'+
'<input type="text" id="NAME" name="name"/>'+
'</div>'+
'<div class="large-6 columns">'+
'<label for="DESCRIPTION">'+tr("Description")+'\
<span class="tip">'+tr("Description of the template")+'</span>\
</label>'+
'<textarea type="text" id="DESCRIPTION" name="DESCRIPTION"/>'+
'</div>'+
'</div>'+
'<div class="vm_param">'+
'<input type="hidden" id="MEMORY" name="memory" />'+
@ -3927,6 +3932,7 @@ function fillTemplatePopUp(template, dialog){
var capacity_section = $('#capacityTab', dialog);
autoFillInputs(template, capacity_section);
$("#DESCRIPTION", capacity_section).val(template["DESCRIPTION"]);
//

9
src/sunstone/public/js/plugins/vnets-tab.js
View File

@ -37,6 +37,10 @@ var create_vn_tmpl =
<label for="name" >' + tr("Name") + ':</label>\
<input type="text" name="name" id="name"/>\
</div>\
<div class="large-6 columns">\
<label for="DESCRIPTION" >' + tr("Description") + ':</label>\
<textarea type="text" id="DESCRIPTION" name="DESCRIPTION"/>\
</div>\
</div>\
<div class="row">\
<div class="large-12 columns">\
@ -531,7 +535,7 @@ var vnet_buttons = {
"Network.addtocluster" : {
type: "confirm_with_select",
text: tr("Select cluster"),
layout: "more_select",
layout: "main",
select: "Cluster",
tip: tr("Select the destination cluster:"),
condition: mustBeAdmin
@ -1091,7 +1095,8 @@ function setupCreateVNetDialog() {
return false;
}
var network_json = {"name" : name};
var description = $('#DESCRIPTION',dialog).val();
var network_json = {"name" : name, "description" : description};
var network_mode = $('select#network_mode',dialog).val();
var bridge = $('#bridge',dialog).val();

2
src/sunstone/public/js/plugins/vresources-tab.js
View File

@ -15,7 +15,7 @@
/* -------------------------------------------------------------------------- */
var vres_tab = {
title: '<i class="fa fa-cloud"></i>'+tr("Virtual Resources"),
title: '<i class="fa fa-lg fa-fw fa-cloud"></i>&emsp;'+tr("Virtual Resources"),
no_content: true
}

27
src/sunstone/public/js/sunstone.js
View File

@ -411,13 +411,13 @@ function setLogin(){
};
var user_login_content = '<a href="#" data-dropdown="drop1" class="button small radius secondary dropdown" id="logout">\
<i class="fa fa-user header-icon"></i> '+ config['display_name'] + '</a>\
<i class="fa fa-user fa-lg fa-fw header-icon"></i> '+ config['display_name'] + '</a>\
<ul id="drop1" data-dropdown-content class="f-dropdown">\
<li><a href="#" class="configuration"><i class="fa fa-cog"></i> Settings</a></li>\
<li><a href="#" class="logout"><i class="fa fa-power-off"></i> Sign Out</a></li>\
</ul>\
<a href="#" data-dropdown="drop2" class="button small radius secondary dropdown" id="zonelector">\
<i class="fa fa-home header-icon"></i> '+ config['zone_name'] + '</a>\
<i class="fa fa-home fa-lg fa-fw header-icon"></i> '+ config['zone_name'] + '</a>\
<ul id="drop2" data-dropdown-content class="zone-ul f-dropdown"></ul>';
$(".user-zone-info").html(user_login_content);
@ -661,7 +661,8 @@ function insertButtonsInTab(tab_name, panel_name, panel_buttons, custom_context)
'<span id="'+custom_id+'main_buttons">'+
"</span>"+
"<a href='#' data-dropdown='"+custom_id+"more_buttons' class='top_button small button secondary dropdown radius'> " + tr("More")+
"<a href='#' data-dropdown='"+custom_id+"more_buttons' class='top_button small button secondary dropdown radius'> " +
"<i class='fa fa-ellipsis-v'/>"+
"</a>"+
"<ul id='"+custom_id+"more_buttons' class='f-dropdown' data-dropdown-content>"+
"</ul>"+
@ -728,15 +729,21 @@ function insertButtonsInTab(tab_name, panel_name, panel_buttons, custom_context)
break;
case "refresh":
context = $("#"+custom_id+"refresh_buttons", buttons_row);
text = '<i class="fa fa-refresh"/>';
str_class.push("refresh", "secondary", "button", "small", "radius");
button_code = '<button class="'+str_class.join(' ')+'" href="'+button_name+'">'+text+'</button>';
text = '<span class="fa-stack">'+
'<i class="fa fa-refresh fa-stack-2x"></i>'+
//'<i class="fa fa-play fa-stack-1x"></i>'+
'</span>';
str_class.push("white_button", "refresh", "secondary", "button", "small", "radius");
button_code = '<a class="'+str_class.join(' ')+'" href="'+button_name+'">'+text+'</a>';
break;
case "top":
context = $("#"+custom_id+"refresh_buttons", buttons_row);
text = '<i class="fa fa-eye"/>';
str_class.push("toggle_top_button", "only-right-list","secondary", "button", "small", "radius");
button_code = '<button class="'+str_class.join(' ')+'">'+text+'</button>';
text = '<span class="fa-stack">'+
'<i class="fa fa-refresh fa-stack-2x" style="color: #dfdfdf"></i>'+
'<i class="fa fa-play fa-stack-1x"></i>'+
'</span>';
str_class.push("white_button", "toggle_top_button", "only-right-list","secondary", "button", "small", "radius");
button_code = '<a class="'+str_class.join(' ')+'" style="padding-left:0px; margin-right: 20px">'+text+'</a>';
break;
case "main":
context = $("#"+custom_id+"main_buttons", buttons_row);
@ -787,7 +794,7 @@ function insertButtonsInTab(tab_name, panel_name, panel_buttons, custom_context)
break;
case "del":
context = $("#"+custom_id+"delete_buttons", buttons_row);
text = '<i class=" fa fa-trash-o"/> ' + tr("Delete");
text = '<i class=" fa fa-trash-o"/> ';
str_class.push("alert", "button", "small", "radius");
button_code = '<button class="'+str_class.join(' ')+'" href="'+button_name+'">'+text+'</button>';
break;

23
src/sunstone/public/scss/app.scss
View File

@ -82,7 +82,7 @@
.right-content {
padding-top: 20px;
padding-left: 20px;
padding-left: 30px;
padding-right: 20px;
}
@ -144,13 +144,13 @@ table.dataTable {
}
tr.odd:hover td {
tr.odd:hover td:not(.dataTables_empty) {
background-color: #2ba6cb !important;
cursor: pointer;
color: #FFF !important;
}
tr.even:hover td {
tr.even:hover td:not(.dataTables_empty) {
background-color: #2ba6cb !important;
cursor: pointer;
color: #FFF !important;
@ -185,6 +185,15 @@ input.search {
}
}
.white_button {
background-color: #fff !important;
&:hover {
color: $primary-color !important;
}
}
// Navigation side bar
#logo {
margin-top: 10px;
@ -197,7 +206,7 @@ input.search {
margin-top: 15px;
a {
color: #333 !important;
color: #555 !important;
}
}
@ -251,7 +260,6 @@ select {
// Dropdown
.f-dropdown {
width: auto;
text-align: left;
li {
padding: 0px 10px;
@ -315,9 +323,11 @@ select {
// Dashboard
fieldset {
margin: 0px;
margin-top: 0px;
margin-bottom: 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 15px;
legend {
font-weight: normal !important;
@ -819,3 +829,4 @@ div.dataTables_scrollFoot table {
hr {
border-color: #dfdfdf;
}