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

Feature #893: Improve legends/help dialog design.

Browse Source 
Addded help button and reworked legend design.
(cherry picked from commit b8fdb548248f33e72104ddabf8fb6a6855ba7249)
This commit is contained in:
Hector Sanjuan 2012-05-30 12:40:06 +02:00 committed by Ruben S. Montero
parent 5a99761749
commit 620e4a7d96
11 changed files with 262 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/sunstone/public/css/application.css
View File

@ -614,9 +614,45 @@ ul.action_list li a:hover{
font-size: 1em;
}
.legend_div {
border: 1px #A3A3A3 solid;
border-radius: 5px;
margin-top: 10px;
padding: 5px;
padding-right: 50px;
width: 40%;
min-width: 400px;
z-index: -3;
position: absolute;
bottom: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.09) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.09))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* W3C */
}
.legend_div span {
position:relative;
color: #A3A3A3;
float: right;
font-size: 3em;
left: 27px;
font-family: serif;
}
.legend {
color: #636663;
margin-left: 10px;
margin-top: 5px;
font-style: italic;
margin-top: 3px;
/* padding-bottom: 9px; */
text-align: justify;
/* border-bottom: 1px solid #A3A3A3; */
}
.legend:before {
content: '⇨ ';
}

31
src/sunstone/public/js/plugins/acls-tab.js
View File

@ -38,9 +38,12 @@ var acls_tab_content = '\
<tbody id="tbodyaclss">\
</tbody>\
</table>\
<p class="legend">\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("This table shows the ACLs rules broken down to easier the reading and meaning of each one. You can show the ACL original string by clicking on Show/Hide columns.")+'\
</p>\
</p>\
</div>\
</form>';
var create_acl_tmpl =
@ -140,6 +143,14 @@ var acl_actions = {
error: onError,
notify: true
},
"Acl.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#acls_tab div.legend_div').slideToggle();
}
},
}
var acl_buttons = {
@ -155,7 +166,13 @@ var acl_buttons = {
"Acl.delete" : {
type: "confirm",
text: tr("Delete")
},
"Acl.help" : {
type: "action",
text: '?',
alwaysActive: true
}
}
var acls_tab = {
@ -498,10 +515,10 @@ $(document).ready(function(){
{ "sWidth": "35px", "aTargets": [1] },
{ "bVisible": false, "aTargets": [6]}
],
"oLanguage": (datatable_lang != "") ?
{
sUrl: "locale/"+lang+"/"+datatable_lang
} : ""
"oLanguage": (datatable_lang != "") ?
{
sUrl: "locale/"+lang+"/"+datatable_lang
} : ""
});
dataTable_acls.fnClearTable();
addElement([
@ -518,4 +535,6 @@ $(document).ready(function(){
//shortenedInfoFields('#datatable_acls');
infoListener(dataTable_acls);
$('div#acls_tab div.legend_div').hide();
})

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

@ -46,12 +46,18 @@ var config_tab_content =
\
</div>\
</div>\
<p class="legend">\
'+tr("These options are stored in your OpenNebula user template.")+'\
</p>\
</td>\
</tr>\
</table>\
<div class="legend_div" style="position:relative;left:13px;bottom:5px;">\
<span>?</span>\
<p class="legend">\
'+tr("These options are stored in your OpenNebula user template.")+'\
</p>\
<p class="legend">\
'+tr("WSS connection requires additional configuration of Sunstone Server and that the SSL certificate is considered valid by your browser.")+'\
</p>\
</div>\
</form>';
var config_actions = {

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

@ -39,6 +39,12 @@ var datastores_tab_content = '\
<tbody id="tbodydatastores">\
</tbody>\
</table>\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("Datatables are sets of images which share a common transfer driver. i.e. Images in a SSH datastore will be copied to the hosts using SSH when deploying a Virtual Machine.")+'\
</p>\
</div>\
</form>';
var create_datastore_tmpl =
@ -265,6 +271,14 @@ var datastore_actions = {
notify:true,
},
"Datastore.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#datastores_tab div.legend_div').slideToggle();
}
},
};
var datastore_buttons = {
@ -309,6 +323,12 @@ var datastore_buttons = {
type: "confirm",
text: tr("Delete"),
condition: mustBeAdmin
},
"Datastore.help" : {
type: "action",
text: '?',
alwaysActive: true
}
}
@ -695,4 +715,6 @@ $(document).ready(function(){
$('div#menu li#li_datastores_tab').live('click',function(){
dataTable_datastores.fnFilter('',5);
});
$('div#datastores_tab div.legend_div').hide();
})

28
src/sunstone/public/js/plugins/groups-tab.js
View File

@ -35,9 +35,12 @@ var groups_tab_content = '\
<tbody id="tbodygroups">\
</tbody>\
</table>\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("Tip: Refresh the list if it only shows user ids in the user column.")+'\
'+tr("Tip: Refresh the list if it only shows user ids in the Users column.")+'\
</p>\
</div>\
</form>';
var create_group_tmpl =
@ -116,7 +119,13 @@ var group_actions = {
// error : onError,
// notify:true
// },
"Group.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#groups_tab div.legend_div').slideToggle();
}
},
}
var group_buttons = {
@ -140,6 +149,11 @@ var group_buttons = {
"Group.delete" : {
type: "confirm",
text: tr("Delete")
},
"Group.help" : {
type: "action",
text: '?',
alwaysActive: true
}
};
@ -274,10 +288,10 @@ $(document).ready(function(){
{ "sWidth": "60px", "aTargets": [0] },
{ "sWidth": "35px", "aTargets": [1] }
],
"oLanguage": (datatable_lang != "") ?
{
sUrl: "locale/"+lang+"/"+datatable_lang
} : ""
"oLanguage": (datatable_lang != "") ?
{
sUrl: "locale/"+lang+"/"+datatable_lang
} : ""
});
dataTable_groups.fnClearTable();
@ -292,4 +306,6 @@ $(document).ready(function(){
initCheckAllBoxes(dataTable_groups);
tableCheckboxesListener(dataTable_groups);
infoListener(dataTable_groups);
$('div#groups_tab div.legend_div').hide();
})

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

@ -57,15 +57,18 @@ var hosts_tab_content = '\
<tbody id="tbodyhosts">\
</tbody>\
</table>\
<p class="legend">\
'+tr("CPU Use is calculated as the maximum between (total CPU - real CPU usage) and (allocated CPU). Real CPU usage is provided by the hosts monitoring driver. Available CPU is calculated using the information from the CPU setting of the VMs running on that host (allocated CPU)")+'\
</p>\
<p class="legend">\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("CPU Use is calculated as the minimum between (total CPU - real CPU usage) and (allocated CPU). Real CPU usage is provided by the hosts monitoring driver. Available CPU is calculated using the information from the CPU setting of the VMs running on that host (allocated CPU)")+'\
</p>\
<p class="legend">\
'+tr("Memory use is calculated according to the information provided by the host monitoring driver.")+'\
</p>\
<p class="legend">\
</p>\
<p class="legend">\
'+tr("You can get monitoring graphs by clicking in the desired host and visiting the monitoring information tab. Note that oneacctd must be running for this information to be updated/available.")+'\
</p>\
</p>\
</div>\
</form>';
var create_host_tmpl =
@ -111,7 +114,7 @@ var create_host_tmpl =
<option value="dummy">' + tr("Default (dummy)") +'</option>\
<option value="fw">'+tr("Firewall")+'</option>\
<option value="802.1Q">'+tr("802.1Q")+'</option>\
<option value="ebtables">'+tr("Ebtables")+'</option>\
<option value="ebtables">'+tr("ebtables")+'</option>\
<option value="ovswitch">'+tr("Open vSwitch")+'</option>\
<option value="vmware">'+tr("VMware")+'</option>\
<option value="custom">' + tr("Custom") + '</option>\
@ -288,6 +291,14 @@ var host_actions = {
notify:true,
},
"Host.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#hosts_tab div.legend_div').slideToggle();
}
}
};
var host_buttons = {
@ -328,6 +339,11 @@ var host_buttons = {
type: "confirm",
text: tr("Delete host"),
condition: mustBeAdmin
},
"Host.help" : {
type: "action",
text: '?',
alwaysActive: true
}
};
@ -732,4 +748,6 @@ $(document).ready(function(){
$('div#menu li#li_hosts_tab').live('click',function(){
dataTable_hosts.fnFilter('',3);
});
$('div#hosts_tab div.legend_div',main_tabs_context).hide();
});

17
src/sunstone/public/js/plugins/images-tab.js
View File

@ -42,9 +42,12 @@ var images_tab_content = '\
<tbody id="tbodyimages">\
</tbody>\
</table>\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("Size and registration time are hidden colums. Note that persistent images can only be used by 1 VM. To change image datastore, please re-register the image.")+'\
</p>\
</div>\
</form>';
var create_image_tmpl =
@ -432,6 +435,13 @@ var image_actions = {
elements: imageElements,
error: onError,
notify: true
},
"Image.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#images_tab div.legend_div').slideToggle();
}
}
};
@ -489,6 +499,11 @@ var image_buttons = {
"Image.delete" : {
type: "confirm",
text: tr("Delete")
},
"Image.help" : {
type: "action",
text: '?',
alwaysActive: true
}
}
@ -1163,4 +1178,6 @@ $(document).ready(function(){
initCheckAllBoxes(dataTable_images);
tableCheckboxesListener(dataTable_images);
infoListener(dataTable_images,'Image.showinfo');
$('div#images_tab div.legend_div').hide();
});

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

@ -35,6 +35,15 @@ var templates_tab_content = '\
<tbody id="tbodytemplates">\
</tbody>\
</table>\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("Clicking `instantiate` will instantly create new Virtual Machines from the selected templates and name one-id. If you want to assign a specific name to a new VM, or launch several instances at once, use Virtual Machines->New button.")+'\
</p>\
<p class="legend">\
'+tr("You can clone a template to obtain a copy from an existing template. This copy will be owned by you.")+'\
</p>\
</div>\
</form>';
var create_template_tmpl = '<div id="template_create_tabs">\
@ -772,6 +781,14 @@ var template_actions = {
error: onError,
notify: true
},
"Template.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#templates_tab div.legend_div').slideToggle();
}
},
}
var template_buttons = {
@ -811,6 +828,12 @@ var template_buttons = {
"Template.delete" : {
type: "confirm",
text: tr("Delete")
},
"Template.help" : {
type: "action",
text: '?',
alwaysActive: true
}
}
@ -2134,6 +2157,9 @@ $(document).ready(function(){
"bSortClasses": false,
"bAutoWidth":false,
"sDom" : '<"H"lfrC>t<"F"ip>',
"oColVis": {
"aiExclude": [ 0 ]
},
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["check"] },
@ -2161,4 +2187,6 @@ $(document).ready(function(){
initCheckAllBoxes(dataTable_templates);
tableCheckboxesListener(dataTable_templates);
infoListener(dataTable_templates,'Template.showinfo');
$('div#templates_tab div.legend_div').hide();
});

32
src/sunstone/public/js/plugins/users-tab.js
View File

@ -39,11 +39,19 @@ var users_tab_content = '\
<tbody id="tbodyusers">\
</tbody>\
</table>\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
<!--'+
tr("Tip: select Core authentication for new Sunstone/Self-Service regular users.")+
'-->\
'+
tr("Tip: You can save any information in the user template, in the form of VAR=VAL.")+
'\
</p>\
<p class="legend">\
'+
tr("Tip: SSH authentication method is not available for web UI access.")+
'\
</p>\
</div>\
</form>';
var create_user_tmpl =
@ -244,7 +252,15 @@ var user_actions = {
notifyMessage(tr("Template updated correctly"));
},
error: onError
}
},
"User.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#users_tab div.legend_div').slideToggle();
}
},
}
@ -301,7 +317,13 @@ var user_buttons = {
"User.delete" : {
type: "confirm",
text: tr("Delete")
},
"User.help" : {
type: "action",
text: '?',
alwaysActive: true
}
};
var user_info_panel = {
@ -558,4 +580,6 @@ $(document).ready(function(){
tableCheckboxesListener(dataTable_users);
//shortenedInfoFields('#datatable_users');
infoListener(dataTable_users,'User.showinfo');
$('div#users_tab div.legend_div').hide();
});

28
src/sunstone/public/js/plugins/vms-tab.js
View File

@ -72,12 +72,15 @@ var vms_tab_content = '\
<tbody id="tbodyvmachines">\
</tbody>\
</table>\
<p class="legend">\
'+tr("CPU, Memory and Start time are hidden columns by default. You can get monitoring graphs by clicking on the desired VM and visiting the monitoring information tab (oneacctd needs to be running for this information to be up to date)")+'\
</p>\
<p class="legend">\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("CPU, Memory and Start time are hidden columns by default. You can get monitoring graphs by clicking on the desired VM and visiting the monitoring information tab.")+'\
</p>\
<p class="legend">\
'+tr("VNC console requires previous install of the noVNC addon. Check Sunstone documentation for more information.")+'\
</p>\
</p>\
</div>\
</form>';
var create_vm_tmpl ='<form id="create_vm_form" action="">\
@ -468,6 +471,13 @@ var vm_actions = {
error: onError,
notify: true
},
"VM.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#vms_tab div.legend_div').slideToggle();
}
},
};
@ -599,6 +609,12 @@ var vm_buttons = {
type: "confirm",
text: tr("Delete"),
tip: tr("This will delete the selected VMs from the database")
},
"VM.help" : {
type: "action",
text: '?',
alwaysActive: true
}
}
@ -1409,4 +1425,6 @@ $(document).ready(function(){
initCheckAllBoxes(dataTable_vMachines);
tableCheckboxesListener(dataTable_vMachines);
infoListener(dataTable_vMachines,'VM.showinfo');
$('div#vms_tab div.legend_div').hide();
})

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

@ -38,9 +38,12 @@ var vnets_tab_content = '\
<tbody id="tbodyvnetworks">\
</tbody>\
</table>\
<p class="legend">\
<div class="legend_div">\
<span>?</span>\
<p class="legend">\
'+tr("Tip: edit the leases of a network by clicking on one and going to the lease management tab.")+'\
</p>\
</p>\
</div>\
</form>';
var create_vn_tmpl =
@ -61,7 +64,7 @@ var create_vn_tmpl =
<select name="network_mode" id="network_mode">\
<option value="default">'+tr("Default")+'</option>\
<option value="802.1Q">'+tr("802.1Q")+'</option>\
<option value="etables">'+tr("Etables")+'</option>\
<option value="ebtables">'+tr("ebtables")+'</option>\
<option value="openvswitch">'+tr("Open vSwitch")+'</option>\
<option value="vmware">'+tr("VMware")+'</option>\
</select><br />\
@ -398,6 +401,14 @@ var vnet_actions = {
notify:true,
},
"Network.help" : {
type: "custom",
call: function() {
hideDialog();
$('div#vnets_tab div.legend_div').slideToggle();
}
},
};
@ -444,6 +455,12 @@ var vnet_buttons = {
"Network.delete" : {
type: "confirm",
text: tr("Delete")
},
"Network.help" : {
type: "action",
text: '?',
alwaysActive: true
}
}
@ -760,7 +777,7 @@ function setupCreateVNetDialog() {
$('select#vlan,label[for="vlan"]',$create_vn_dialog).show();
$('input#vlan_id,label[for="vlan_id"]',$create_vn_dialog).show();
break;
case "etables":
case "ebtables":
$('input#bridge,label[for="bridge"]',$create_vn_dialog).show();
break;
case "openvswitch":
@ -887,7 +904,7 @@ function setupCreateVNetDialog() {
network_json['vlan_id']=vlan_id;
};
break;
case "etables":
case "ebtables":
if (!bridge){
notifyError("Bridge must be specified");
return false;
@ -1197,4 +1214,6 @@ $(document).ready(function(){
$('div#menu li#li_vnets_tab').live('click',function(){
dataTable_vNetworks.fnFilter('',5);
});
$('div#vnets_tab div.legend_div').hide();
});