mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-22 18:50:08 +03:00
feature #992: Centralize all customizable strings in one file: custom.js
This allows easy customization of the interface, offering the possibility of replacing all standard texts and images.
This commit is contained in:
Hector Sanjuan
parent
b5ccbb2c8f
commit
a4c2f06d53
101
src/cloud/occi/lib/ui/public/customize/custom.js
Normal file
101
src/cloud/occi/lib/ui/public/customize/custom.js
Normal file
@ -0,0 +1,101 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Copyright 2002-2011, OpenNebula Project Leads (OpenNebula.org) */
|
||||
/* */
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License"); you may */
|
||||
/* not use this file except in compliance with the License. You may obtain */
|
||||
/* a copy of the License at */
|
||||
/* */
|
||||
/* http://www.apache.org/licenses/LICENSE-2.0 */
|
||||
/* */
|
||||
/* Unless required by applicable law or agreed to in writing, software */
|
||||
/* distributed under the License is distributed on an "AS IS" BASIS, */
|
||||
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
|
||||
/* See the License for the specific language governing permissions and */
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
//OpenNebula Self-Service customization file.
|
||||
//Use tr("String") to enable text translation.
|
||||
//You can use HTML and the following variables.
|
||||
var $vm_count = '<span class="vm_count" />';
|
||||
var $storage_count = '<span class="storage_count" />';
|
||||
var $network_count = '<span class="network_count" />';
|
||||
|
||||
|
||||
|
||||
//Login logo 591x43px - not implemented
|
||||
var logo_big = "images/opennebula-selfservice-big.png";
|
||||
//Top left logo 179x14px - not implemented
|
||||
var logo_small = "images/opennebula-selfservice-small.png";
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// Dashboard tab customization
|
||||
////////////////////////////////////////////////////////////////
|
||||
|
||||
////
|
||||
//Dashboard Welcome box
|
||||
////
|
||||
var dashboard_welcome_title = tr("Welcome to OpenNebula Self-Service");
|
||||
var dashboard_welcome_image = "images/opennebula-selfservice-icon.png"
|
||||
var dashboard_welcome_html = '<p>'+tr("OpenNebula Self-Service is a simplified user interface to manage OpenNebula compute, storage and network resources. It is focused on easiness and usability and features a limited set of operations directed towards end-users.")+'</p>\
|
||||
<p>'+tr("Additionally, OpenNebula Self-Service allows easy customization of the interface (e.g. this text) and brings multi-language support.")+'</p>\
|
||||
<p>'+tr("Have a cloudy experience!")+'</p>';
|
||||
|
||||
////
|
||||
//Dashboard useful links box
|
||||
//Array of { href: "address", text: "text" },...
|
||||
////
|
||||
var dashboard_links = [
|
||||
{ href: "http://opennebula.org/documentation:documentation",
|
||||
text: tr("Documentation")
|
||||
},
|
||||
{ href: "http://opennebula.org/support:support",
|
||||
text: tr("Support")
|
||||
},
|
||||
{ href: "http://opennebula.org/community:community",
|
||||
text: tr("Community")
|
||||
}
|
||||
];
|
||||
|
||||
////
|
||||
//Dashboard right-side boxes
|
||||
////
|
||||
var compute_box_title = tr("Compute");
|
||||
var compute_box_image = "images/server_icon.png"; //scaled to 100px width
|
||||
var compute_box_html = '<p>'+tr("Compute resources are Virtual Machines attached to storage and network resources. OpenNebula Self-Service allows you to easily create, remove and manage them, including the possibility of pausing a Virtual Machine or taking a snapshot of one of their disks.")+'</p>';
|
||||
|
||||
var storage_box_title = tr("Storage");
|
||||
var storage_box_image = "images/storage_icon.png"; //scaled to 100px width
|
||||
var storage_box_html = '<p>'+tr("Storage pool is formed by several images. These images can contain from full operating systems to be used as base for compute resources, to simple data. OpenNebula Self-Service offers you the possibility to create or upload your own images.")+'</p>';
|
||||
|
||||
var network_box_title = tr("Network");
|
||||
var network_box_image = "images/network_icon.png";
|
||||
var network_box_html = '<p>'+tr("Your compute resources connectivity is performed using pre-defined virtual networks. You can create and manage these networks using OpenNebula Self-Service.")+'</p>';
|
||||
|
||||
|
||||
///////////////////////////////////////////////////////////
|
||||
//Compute tab
|
||||
///////////////////////////////////////////////////////////
|
||||
var compute_dashboard_image = "images/one-compute.png";
|
||||
var compute_dashboard_html = '<p>' + tr("This is a list of your current compute resources. Virtual Machines use previously defined images and networks. You can easily create a new compute element by cliking \"new\" and filling-in an easy wizard.")+'</p>\
|
||||
<p>'+tr("You can also manage compute resources and perform actions such as stop, resume, shutdown or cancel.")+'</p>\
|
||||
<p>'+tr("Additionally, you can take a \"snapshot\" of the storage attached to these resources. They will be saved as new resources, visible from the Storage view and re-usable.")+'</p>\
|
||||
<p>'+tr("There are currently")+' <b>'+$vm_count+'</b> '+tr("virtual machines")+'.</p>';
|
||||
|
||||
///////////////////////////////////////////////////////////
|
||||
//Storage tab
|
||||
///////////////////////////////////////////////////////////
|
||||
var storage_dashboard_image = "images/one-storage.png";
|
||||
var storage_dashboard_html = '<p>'+tr("The Storage view offers you an overview of your current images. Storage elements are attached to compute resources at creation time. They can also be extracted from running virtual machines by taking an snapshot.")+'</p>\
|
||||
<p>'+tr("You can add new storages by clicking \"new\". Image files will be uploaded to OpenNebula and set ready to be used.")+'</p>\
|
||||
<p>'+tr("Additionally, you can run several operations on defined storages, such as defining their persistance. Persistent images can only be used by 1 virtual machine, and the changes made by it have effect on the base image. Non-persistent images are cloned before being used in a Virtual Machine, therefore changes are lost unless a snapshot is taken prior to Virtual Machine shutdown.")+'</p>\
|
||||
<p>'+tr("There are currently")+' <b>'+$storage_count+'</b> '+tr("images")+'.</p>';
|
||||
|
||||
///////////////////////////////////////////////////////////
|
||||
//Network tab
|
||||
///////////////////////////////////////////////////////////
|
||||
var network_dashboard_image = "image/one-network.png";
|
||||
var network_dashboard_html = '<p>'+tr("In this view you can easily manage OpenNebula Network resources. You can add, remove, publish or unpublish virtual networks.")+'</p>\
|
||||
<p>'+tr("Compute resources can be attached to these networks at creation time. Virtual machines will be provided with an IP and the correct parameters to ensure connectivity.")+'</p>\
|
||||
<p>'+tr("There are currently")+' <b>'+$network_count+'</b> '+tr("networks")+'.</p>';
|
||||
@ -101,12 +101,9 @@ var create_vm_tmpl ='<form id="create_vm_form" action="">\
|
||||
</form>';
|
||||
|
||||
var vm_dashboard = '<div class="dashboard_p">\
|
||||
<img src="images/one-compute.png" alt="one-compute" />\
|
||||
<p>'+tr("This is a list of your current compute resources. Virtual Machines use previously defined images and networks. You can easily create a new compute element by cliking \"new\" and filling-in an easy wizard.")+'</p>\
|
||||
<p>'+tr("You can also manage compute resources and perform actions such as stop, resume, shutdown or cancel.")+'</p>\
|
||||
<p>'+tr("Additionally, you can take a \"snapshot\" of the storage attached to these resources. They will be saved as new resources, visible from the Storage view and re-usable.")+'</p>\
|
||||
<p>'+tr("There are currently")+' <b><span id="vm_dashboard_count" /></b> '+tr("virtual machines")+'.</p>\
|
||||
</div>';
|
||||
<img src="images/one-compute.png" alt="one-compute" />'
|
||||
+ compute_dashboard_html +
|
||||
'</div>';
|
||||
|
||||
|
||||
var dataTable_vMachines;
|
||||
@ -871,7 +868,7 @@ function saveasDisksCallback(req,response){
|
||||
function popUpVMDashboard(){
|
||||
var count = dataTable_vMachines.fnGetNodes().length;
|
||||
popDialog(vm_dashboard);
|
||||
$('#dialog #vm_dashboard_count').text(count);
|
||||
$('#dialog .vm_count').text(count);
|
||||
};
|
||||
|
||||
//Prepares autorefresh
|
||||
|
||||
@ -22,11 +22,11 @@ var dashboard_tab_content =
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Welcome to OpenNebula Self-Service") + '</h3>\
|
||||
<h3>' + dashboard_welcome_title + '</h3>\
|
||||
<div class="panel_info dashboard_p">\
|
||||
<p><img style="float:left;width:100px;" src="images/opennebula-selfservice-icon.png" />'+tr("OpenNebula Self-Service is a simplified user interface to manage OpenNebula compute, storage and network resources. It is focused on easiness and usability and features a limited set of operations directed towards end-users.")+'</p>\
|
||||
<p>'+tr("Additionally, OpenNebula Self-Service allows easy customization of the interface (e.g. this text) and brings multi-language support.")+'</p>\
|
||||
<p>'+tr("Have a cloudy experience!")+'</p>\
|
||||
<img style="float:left;width:100px;" src="'+
|
||||
dashboard_welcome_image+'" />'+
|
||||
dashboard_welcome_html+'\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
@ -40,15 +40,15 @@ var dashboard_tab_content =
|
||||
<table class="info_table">\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Compute")+'</td>\
|
||||
<td class="value_td"><span id="total_vms"></span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Network") + '</td>\
|
||||
<td class="value_td"><span id="total_vnets"></span></td>\
|
||||
<td class="value_td">'+$vm_count+'</span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Storage") + '</td>\
|
||||
<td class="value_td"><span id="total_images"></span></td>\
|
||||
<td class="value_td">'+$storage_count+'</span></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Network") + '</td>\
|
||||
<td class="value_td">'+$network_count+'</span></td>\
|
||||
</tr>\
|
||||
</table>\
|
||||
\
|
||||
@ -60,10 +60,8 @@ var dashboard_tab_content =
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Useful links") + '</h3>\
|
||||
<div class="panel_info dashboard_p">\
|
||||
<ul><li><a href="http://opennebula.org/documentation:documentation" target="_blank">Documentation</a></li>\
|
||||
<li><a href="http://opennebula.org/support:support" target="_blank">Support</a></li>\
|
||||
<li><a href="http://opennebula.org/community:community" target="_blank">Community</a></li></ul>\
|
||||
<div class="panel_info dashboard_p">'+
|
||||
generateDashboardLinks() +'\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
@ -75,10 +73,12 @@ var dashboard_tab_content =
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Compute") + '</h3>\
|
||||
<h3>' + compute_box_title + '</h3>\
|
||||
<div class="panel_info dashboard_p">\
|
||||
<p><img style="float:right;width:100px;" src="images/server_icon.png" />'+tr("Compute resources are Virtual Machines attached to storage and network resources. OpenNebula Self-Service allows you to easily create, remove and manage them, including the possibility of pausing a Virtual Machine or taking a snapshot of one of their disks.")+'</p>\
|
||||
<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vms_tab" action="VM.create_dialog">Create new compute resource</a><br />\
|
||||
<img style="float:right;width:100px;" src="'+
|
||||
compute_box_image + '" />'+
|
||||
compute_box_html +
|
||||
'<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vms_tab" action="VM.create_dialog">Create new compute resource</a><br />\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#vms_tab">See more</a></p>\
|
||||
</div>\
|
||||
</div>\
|
||||
@ -87,10 +87,12 @@ var dashboard_tab_content =
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Storage") + '</h3>\
|
||||
<h3>' + storage_box_title + '</h3>\
|
||||
<div class="panel_info dashboard_p">\
|
||||
<p><img style="float:right;width:100px;" src="images/storage_icon.png" />'+tr("Storage pool is formed by several images. These images can contain from full operating systems to be used as base for compute resources, to simple data. OpenNebula Self-Service offers you the possibility to create or upload your own images.")+'</p>\
|
||||
<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#images_tab" action="Image.create_dialog">Create new storage resource</a><br />\
|
||||
<img style="float:right;width:100px;" src="'+
|
||||
storage_box_image +'" />' +
|
||||
storage_box_html +
|
||||
'<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#images_tab" action="Image.create_dialog">Create new storage resource</a><br />\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#images_tab">See more</a></p>\
|
||||
</div>\
|
||||
</div>\
|
||||
@ -99,10 +101,12 @@ var dashboard_tab_content =
|
||||
<tr>\
|
||||
<td>\
|
||||
<div class="panel">\
|
||||
<h3>' + tr("Network") + '</h3>\
|
||||
<h3>' + network_box_title + '</h3>\
|
||||
<div class="panel_info dashboard_p">\
|
||||
<p><img style="float:right;width:100px;" src="images/network_icon.png" />'+tr("Your compute resources connectivity is performed using pre-defined virtual networks. You can create and manage these networks using OpenNebula Self-Service.")+'</p>\
|
||||
<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vnets_tab" action="Network.create_dialog">Create new network resource</a><br />\
|
||||
<p><img style="float:right;width:100px;" src="' +
|
||||
network_box_image +'" />' +
|
||||
network_box_html +
|
||||
'<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vnets_tab" action="Network.create_dialog">Create new network resource</a><br />\
|
||||
<span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#vnets_tab">See more</a><br /></p>\
|
||||
</div>\
|
||||
</div>\
|
||||
@ -124,7 +128,17 @@ function quickstart_setup(){
|
||||
$('#dashboard_table #quickstart_form input',main_tabs_context).click(function(){
|
||||
Sunstone.runAction($(this).val());
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function generateDashboardLinks(){
|
||||
var links="<ul>";
|
||||
for (var i=0; i<dashboard_links.length;i++){
|
||||
links+='<li><a href="'+dashboard_links[i].href+'" target="_blank">'+dashboard_links[i].text+'</a></li>';
|
||||
};
|
||||
links+="</ul>";
|
||||
return links;
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
//Dashboard link listener
|
||||
@ -172,15 +186,15 @@ function updateDashboard(what,json_info){
|
||||
switch (what){
|
||||
case "vms":
|
||||
var total_vms=json_info.length;
|
||||
$('#total_vms',db).html(total_vms);
|
||||
$('.vm_count',db).html(total_vms);
|
||||
break;
|
||||
case "vnets":
|
||||
var total_vnets=json_info.length;
|
||||
$('#total_vnets',db).html(total_vnets);
|
||||
$('.network_count',db).html(total_vnets);
|
||||
break;
|
||||
case "images":
|
||||
var total_images=json_info.length;
|
||||
$('#total_images',db).html(total_images);
|
||||
$('.storage_count',db).html(total_images);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,11 +63,9 @@ var create_vn_tmpl =
|
||||
|
||||
|
||||
var vnet_dashboard = '<div class="dashboard_p">\
|
||||
<img src="images/one-network.png" alt="one-network" />\
|
||||
<p>'+tr("In this view you can easily manage OpenNebula Network resources. You can add, remove, publish or unpublish virtual networks.")+'</p>\
|
||||
<p>'+tr("Compute resources can be attached to these networks at creation time. Virtual machines will be provided with an IP and the correct parameters to ensure connectivity.")+'</p>\
|
||||
<p>'+tr("There are currently")+' <b><span id="vnet_dashboard_count" /></b> '+tr("networks")+'.</p>\
|
||||
</div>';
|
||||
<img src="images/one-network.png" alt="one-network" />' +
|
||||
network_dashboard_html +
|
||||
'</div>';
|
||||
|
||||
var dataTable_vNetworks;
|
||||
var $create_vn_dialog;
|
||||
@ -379,7 +377,7 @@ function popUpCreateVnetDialog() {
|
||||
function popUpVNetDashboard(){
|
||||
var count = dataTable_vNetworks.fnGetNodes().length;
|
||||
popDialog(vnet_dashboard);
|
||||
$('#dialog #vnet_dashboard_count').text(count);
|
||||
$('#dialog .network_count').text(count);
|
||||
}
|
||||
|
||||
function setVNetAutorefresh() {
|
||||
|
||||
@ -102,12 +102,9 @@ var create_image_tmpl =
|
||||
</div>';
|
||||
|
||||
var image_dashboard = '<div class="dashboard_p">\
|
||||
<img src="images/one-storage.png" alt="one-storage" />\
|
||||
<p>'+tr("The Storage view offers you an overview of your current images. Storage elements are attached to compute resources at creation time. They can also be extracted from running virtual machines by taking an snapshot.")+'</p>\
|
||||
<p>'+tr("You can add new storages by clicking \"new\". Image files will be uploaded to OpenNebula and set ready to be used.")+'</p>\
|
||||
<p>'+tr("Additionally, you can run several operations on defined storages, such as defining their persistance. Persistent images can only be used by 1 virtual machine, and the changes made by it have effect on the base image. Non-persistent images are cloned before being used in a Virtual Machine, therefore changes are lost unless a snapshot is taken prior to Virtual Machine shutdown.")+'</p>\
|
||||
<p>'+tr("There are currently")+' <b><span id="image_dashboard_count" /></b> '+tr("images")+'.</p>\
|
||||
</div>';
|
||||
<img src="'+storage_dashboard_image+'" alt="one-storage" />'+
|
||||
storage_dashboard_html +
|
||||
'</div>';
|
||||
|
||||
var dataTable_images;
|
||||
var $create_image_dialog;
|
||||
@ -572,7 +569,7 @@ function popUpCreateImageDialog(){
|
||||
function popUpImageDashboard(){
|
||||
var count = dataTable_images.fnGetNodes().length;
|
||||
popDialog(image_dashboard);
|
||||
$('#dialog #image_dashboard_count').text(count);
|
||||
$('#dialog .storage_count').text(count);
|
||||
};
|
||||
|
||||
// Set the autorefresh interval for the datatable
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
<script type="text/javascript" src="js/occi.js"></script>
|
||||
<script type="text/javascript" src="js/sunstone.js"></script>
|
||||
<script type="text/javascript" src="js/sunstone-util.js"></script>
|
||||
<script type="text/javascript" src="customize/custom.js"></script>
|
||||
|
||||
<!--Base plugins-->
|
||||
|
||||
@ -43,6 +44,7 @@
|
||||
<script type="text/javascript" src="js/plugins/network.js"></script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer-center">
|
||||
@ -63,11 +65,13 @@
|
||||
<div id="login-info">
|
||||
Welcome <span id="user"></span> | <a href="#" id="logout">Sign Out</a>
|
||||
</div>
|
||||
<!--
|
||||
<div id="links">
|
||||
<a href="http://opennebula.org/documentation:documentation" target="_blank">Documentation</a> |
|
||||
<a href="http://opennebula.org/support:support" target="_blank">Support</a> |
|
||||
<a href="http://opennebula.org/community:community" target="_blank">Community</a>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="footer" class="ui-layout-south">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user