mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-21 14:50:08 +03:00
Merge branch 'foundation5'
This commit is contained in:
Daniel Molina
commit
3442350cb2
19
install.sh
19
install.sh
@ -1456,10 +1456,8 @@ SUNSTONE_VIEWS_FILES="src/sunstone/views/index.erb \
|
||||
src/sunstone/views/_login_standard.erb \
|
||||
src/sunstone/views/_login_x509.erb"
|
||||
|
||||
SUNSTONE_PUBLIC_JS_FILES="src/sunstone/public/js/layout.js \
|
||||
src/sunstone/public/js/login.js \
|
||||
SUNSTONE_PUBLIC_JS_FILES="src/sunstone/public/js/login.js \
|
||||
src/sunstone/public/js/sunstone.js \
|
||||
src/sunstone/public/js/sunstone-util.js \
|
||||
src/sunstone/public/js/opennebula.js \
|
||||
src/sunstone/public/js/locale.js"
|
||||
|
||||
@ -1562,19 +1560,8 @@ SUNSTONE_PUBLIC_NEW_VENDOR_JGROWL="\
|
||||
src/sunstone/public/vendor/4.0/jgrowl/LICENSE"
|
||||
|
||||
SUNSTONE_PUBLIC_NEW_VENDOR_FOUNDATION="\
|
||||
src/sunstone/public/vendor/4.0/foundation/modernizr.foundation.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.reveal.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.orbit.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.forms.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.placeholder.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.tooltips.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.alerts.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.buttons.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.accordion.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.navigation.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.mediaQueryToggle.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/jquery.foundation.tabs.js \
|
||||
src/sunstone/public/vendor/4.0/foundation/app.js "
|
||||
src/sunstone/public/bower_components/foundation/js/vendor/modernizr.js \
|
||||
src/sunstone/public/bower_components/foundation/js/foundation.min.js"
|
||||
|
||||
SUNSTONE_PUBLIC_NEW_VENDOR_JQUERY="\
|
||||
src/sunstone/public/vendor/4.0/jquery-1.11.0.min.js \
|
||||
|
||||
34
src/sunstone/public/Gruntfile.js
Normal file
34
src/sunstone/public/Gruntfile.js
Normal file
@ -0,0 +1,34 @@
|
||||
module.exports = function(grunt) {
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
sass: {
|
||||
options: {
|
||||
includePaths: ['bower_components/foundation/scss']
|
||||
},
|
||||
dist: {
|
||||
options: {
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
files: {
|
||||
'css/app.css': 'scss/app.scss'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
grunt: { files: ['Gruntfile.js'] },
|
||||
|
||||
sass: {
|
||||
files: 'scss/**/*.scss',
|
||||
tasks: ['sass']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-sass');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
|
||||
grunt.registerTask('build', ['sass']);
|
||||
grunt.registerTask('default', ['build','watch']);
|
||||
}
|
||||
6
src/sunstone/public/bower.json
Normal file
6
src/sunstone/public/bower.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "foundation-libsass-template",
|
||||
"dependencies": {
|
||||
"foundation": "zurb/bower-foundation"
|
||||
}
|
||||
}
|
||||
3
src/sunstone/public/bower_components/foundation/js/foundation.min.js
vendored
Normal file
3
src/sunstone/public/bower_components/foundation/js/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
src/sunstone/public/bower_components/foundation/js/vendor/modernizr.js
vendored
Normal file
8
src/sunstone/public/bower_components/foundation/js/vendor/modernizr.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,190 +0,0 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Copyright 2002-2014, OpenNebula Project (OpenNebula.org), C12G Labs */
|
||||
/* */
|
||||
/* 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. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
var activeTab;
|
||||
var outerLayout, innerLayout;
|
||||
|
||||
function hideDialog(){
|
||||
innerLayout.close("south");
|
||||
}
|
||||
|
||||
function popDialog(content){
|
||||
$("#dialog").html(content);
|
||||
innerLayout.open("south");
|
||||
}
|
||||
|
||||
function popDialogLoading(){
|
||||
var loading = '<div style="margin-top:'+Math.round($("#dialog").height()/6)+'px; text-align: center; width: 100%"><img src="images/pbar.gif" alt="loading..." /></div>';
|
||||
popDialog(loading);
|
||||
}
|
||||
|
||||
function showTab(tabname,highlight_tab){
|
||||
//Since menu items no longer have an <a> element
|
||||
//we no longer expect #tab_id here, but simply tab_id
|
||||
//So safety check - remove # from #tab_id if present to ensure compatibility
|
||||
|
||||
//$('tbody input.check_item:checked').click();
|
||||
//$('td').removeClass('markrowchecked markrowselected');
|
||||
last_selected_row = null;
|
||||
|
||||
if (tabname.indexOf('#') == 0)
|
||||
tabname = tabname.substring(1);
|
||||
if (highlight_tab && highlight_tab.indexOf('#') == 0)
|
||||
highlight_tab == highlight.substring(1);
|
||||
|
||||
var activeTab = tabname;
|
||||
|
||||
if (!highlight_tab) highlight_tab = activeTab;
|
||||
|
||||
//clean selected menu
|
||||
$("#navigation li").removeClass("navigation-active-li");
|
||||
$("div#header ul#menutop_ul li").removeClass("navigation-active-li");
|
||||
|
||||
//select tab in left menu
|
||||
var li = $("#navigation li#li_"+highlight_tab)
|
||||
li.addClass("navigation-active-li");
|
||||
|
||||
//select tab in top menu
|
||||
var top_li = $("div#header ul#menutop_ul li#top_"+highlight_tab);
|
||||
top_li.addClass("navigation-active-li");
|
||||
|
||||
|
||||
//show tab
|
||||
$(".tab").hide();
|
||||
$('#'+activeTab).show();
|
||||
|
||||
$("#refresh_buttons button", $('#'+activeTab)).click()
|
||||
|
||||
innerLayout.close("south");
|
||||
}
|
||||
|
||||
function setupTabs(){
|
||||
|
||||
var topTabs = $(".outer-west ul li.topTab");
|
||||
var subTabs = $(".outer-west ul li.subTab");
|
||||
|
||||
subTabs.live("click",function(){
|
||||
//leave floor to topTab listener in case of tabs with both classes
|
||||
if ($(this).hasClass('topTab')) return false;
|
||||
|
||||
var tab = $(this).attr('id').substring(3);
|
||||
showTab(tab);
|
||||
return false;
|
||||
});
|
||||
|
||||
topTabs.live("click",function(e){
|
||||
var tab = $(this).attr('id').substring(3);
|
||||
//Subtabs have a class with the name of this tab
|
||||
var subtabs = $('div#menu li.'+tab);
|
||||
|
||||
//toggle subtabs only when clicking on the icon or when clicking on an
|
||||
//already selected menu
|
||||
if ($(e.target).is('span') ||
|
||||
$(this).hasClass("navigation-active-li") ||
|
||||
$(this).hasClass("tab_with_no_content")){
|
||||
//for each subtab, we hide the subsubtabs
|
||||
subtabs.each(function(){
|
||||
//for each subtab, hide its subtabs
|
||||
var subsubtabs = $(this).attr('id').substr(3);
|
||||
//subsubtabs class
|
||||
subsubtabs = $('div#menu li.'+subsubtabs);
|
||||
subsubtabs.hide();
|
||||
});
|
||||
//hide subtabs and reset icon to + position, since all subsubtabs
|
||||
//are hidden
|
||||
subtabs.fadeToggle('fast');
|
||||
$(this).removeClass('active');
|
||||
$('span',subtabs).removeClass(' fa fa-caret-down');
|
||||
$('span',subtabs).addClass(' fa fa-caret-left');
|
||||
//toggle icon on this tab
|
||||
$('span',this).toggleClass(' fa fa-caret-left fa fa-caret-down');
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
showTab(tab);
|
||||
return false;
|
||||
}
|
||||
//if we are clicking on the icon only, do not show the tab
|
||||
if ($(e.target).is('span')) return false;
|
||||
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
function setupTopMenu(){
|
||||
$('div#header ul#menutop_ul li').live('click',function(){
|
||||
var tab = "#" + $(this).attr('id').substring(4);
|
||||
showTab(tab);
|
||||
});
|
||||
};
|
||||
|
||||
function changeInnerLayout(factor){
|
||||
var dialog_height = Math.floor($(".outer-center").height()*factor);
|
||||
innerLayout.sizePane("south", dialog_height)
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$(".tab").hide();
|
||||
|
||||
setupTabs();
|
||||
setupTopMenu();
|
||||
|
||||
outerLayout = $('body').layout({
|
||||
applyDefaultStyles: false
|
||||
, center__paneSelector: ".outer-center"
|
||||
, west__paneSelector: ".outer-west"
|
||||
, west__size: 240
|
||||
, north__size: 26
|
||||
, south__size: 26
|
||||
, spacing_open: 0 // ALL panes
|
||||
, spacing_closed: 0 // ALL panes
|
||||
//, north__spacing_open: 0
|
||||
//, south__spacing_open: 0
|
||||
, west__spacing_open: 10
|
||||
, west__spacing_closed: 10
|
||||
, west__togglerContent_open: '<i class="fa fa-angle-left">'
|
||||
, west__togglerContent_closed: '<i class="fa fa-angle-right">'
|
||||
, north__maxSize: 200
|
||||
, south__maxSize: 200
|
||||
, south__closable: false
|
||||
, north__closable: false
|
||||
, west__closable: true
|
||||
, south__resizable: false
|
||||
, north__resizable: false
|
||||
, west__resizable: false
|
||||
});
|
||||
|
||||
var factor = 0.5;
|
||||
var dialog_height = Math.floor($(".outer-center").height()*factor);
|
||||
innerLayout = $('div.outer-center').layout({
|
||||
fxName: "slide"
|
||||
, initClosed: true
|
||||
, center__paneSelector: ".inner-center"
|
||||
, south__paneSelector: ".inner-south"
|
||||
, south__size: dialog_height
|
||||
, south__togglerContent_open: '<i class="fa fa-angle-down">'
|
||||
, south__togglerContent_closed: '<i class="fa fa-angle-up">'
|
||||
, south__resizable: true
|
||||
, south__spacing_open: 10
|
||||
, south__spacing_closed: 0
|
||||
, north__resizable: true
|
||||
, north__spacing_open: 10
|
||||
, spacing_open: 5 // ALL panes
|
||||
, spacing_closed: 5 // ALL panes
|
||||
});
|
||||
|
||||
});
|
||||
@ -18,104 +18,84 @@
|
||||
var dataTable_acls;
|
||||
var $create_acl_dialog;
|
||||
|
||||
var acls_tab_content = '\
|
||||
<form class="custom" id="acl_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-key"></i> '+tr("Access Control Lists")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="acl_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_acls" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Applies to")+'</th>\
|
||||
<th>'+tr("Affected resources")+'</th>\
|
||||
<th>'+tr("Resource ID / Owned by")+'</th>\
|
||||
<th>'+tr("Allowed operations")+'</th>\
|
||||
<th>'+tr("Zone")+'</th>\
|
||||
<th>'+tr("ACL String")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyaclss">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var create_acl_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Create ACL")+'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 id="create_vnet_header" class="subheader">'+tr("Create ACL")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_acl_form" action="">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="applies">'+tr("This rule applies to")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="applies">'+tr("This rule applies to")+':</label>\
|
||||
<select name="applies" id="applies"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="zones_applies">'+tr("Zones where the rule applies")+'</label>\
|
||||
<select name="zones_applies" id="zones_applies"></select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
</div>\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Affected resources")+'</legend>\
|
||||
<div class="six columns">\
|
||||
<input type="checkbox" name="res_host" class="resource_cb" value="HOST">'+tr("Hosts")+'</input><br />\
|
||||
<input type="checkbox" name="res_cluster" class="resource_cb" value="CLUSTER">'+tr("Clusters")+'</input><br />\
|
||||
<input type="checkbox" name="res_datastore" class="resource_cb" value="DATASTORE">'+tr("Datastores")+'</input><br />\
|
||||
<input type="checkbox" name="res_vm" class="resource_cb" value="VM">'+tr("Virtual Machines")+'</input><br />\
|
||||
<input type="checkbox" name="res_net" class="resource_cb" value="NET">'+tr("Virtual Networks")+'</input><br />\
|
||||
<div class="row">\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_host" name="res_host" class="resource_cb" value="HOST"><label for="res_host">'+tr("Hosts")+'</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<input type="checkbox" name="res_image" class="resource_cb" value="IMAGE">'+tr("Images")+'</input><br />\
|
||||
<input type="checkbox" name="res_template" class="resource_cb" value="TEMPLATE">'+tr("Templates")+'</input><br />\
|
||||
<input type="checkbox" name="res_user" class="resource_cb" value="USER">'+tr("Users")+'</input><br />\
|
||||
<input type="checkbox" name="res_group" class="resource_cb" value="GROUP">'+tr("Groups")+'</input><br />\
|
||||
<input type="checkbox" name="res_document" class="resource_cb" value="DOCUMENT">'+tr("Documents")+'</input><br />\
|
||||
<input type="checkbox" name="res_zone" class="resource_cb" value="ZONE">'+tr("Zones")+'</input><br />\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_cluster" name="res_cluster" class="resource_cb" value="CLUSTER"><label for="res_cluster">'+tr("Clusters")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_datastore" name="res_datastore" class="resource_cb" value="DATASTORE"><label for="res_datastore">'+tr("Datastores")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_vm" name="res_vm" class="resource_cb" value="VM"><label for="res_vm">'+tr("Virtual Machines")+'</label>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Resource subset")+'</legend>\
|
||||
<div class="six columns">\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="*" id="res_subgroup_all">'+tr("All")+'</input><br />\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="res_id" id="res_subgroup_id">'+tr("Specific ID")+'</input><br />\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="belonging_to" id="res_subgroup_group">'+tr("Owned by group")+'</input><br />\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="in_cluster" id="res_subgroup_group">'+tr("Assigned to cluster")+'</input><br />\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_net" name="res_net" class="resource_cb" value="NET"><label for="res_net">'+tr("Virtual Networks")+'</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_image" name="res_image" class="resource_cb" value="IMAGE"><label for="res_image">'+tr("Images")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_template" name="res_template" class="resource_cb" value="TEMPLATE"><label for="res_template">'+tr("Templates")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_user" name="res_user" class="resource_cb" value="USER"><label for="res_user">'+tr("Users")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_group" name="res_group" class="resource_cb" value="GROUP"><label for="res_group">'+tr("Groups")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_document" name="res_document" class="resource_cb" value="DOCUMENT"><label for="res_document">'+tr("Documents")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="res_zone" name="res_zone" class="resource_cb" value="ZONE"><label for="res_zone">'+tr("Zones")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Resource subset")+'</legend>\
|
||||
<div class="row">\
|
||||
<div class="large-3 columns">\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="*" id="res_subgroup_all"><label class="res_subgroup" for="res_subgroup_all">'+tr("All")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="res_id" id="res_subgroup_id"><label class="res_subgroup" for="res_subgroup_id">'+tr("ID")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="belonging_to" id="res_subgroup_group"><label class="res_subgroup" for="res_subgroup_group">'+tr("Group")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="radio" class="res_subgroup" name="mode_select" value="in_cluster" id="res_subgroup_cluster"><label class="res_subgroup" for="res_subgroup_cluster">'+tr("Cluster")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="res_id">\
|
||||
<label for="res_id">'+tr("Resource ID")+':</label>\
|
||||
<input type="text" name="res_id" id="res_id"></input>\
|
||||
@ -129,40 +109,36 @@ var create_acl_tmpl =
|
||||
<select name="in_cluster" id="in_cluster"></select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
</fieldset>\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Allowed operations")+'</legend>\
|
||||
<input type="checkbox" name="right_delete" class="right_cb" value="USE">'+tr("Use")+'</input>\
|
||||
<input type="checkbox" name="right_use" class="right_cb" value="MANAGE">'+tr("Manage")+'</input>\
|
||||
<input type="checkbox" name="right_manage" class="right_cb" value="ADMIN">'+tr("Administrate")+'</input>\
|
||||
<input type="checkbox" name="right_create" class="right_cb" value="CREATE">'+tr("Create")+'</input>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Zones where the rule applies")+'</legend>\
|
||||
<select name="zones_applies" id="zones_applies"></select>\
|
||||
</fieldset>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="right_delete" name="right_delete" class="right_cb" value="USE"><label for="right_delete">'+tr("Use")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="right_use" name="right_use" class="right_cb" value="MANAGE"><label for="right_use">'+ tr("Manage")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="right_manage" name="right_manage" class="right_cb" value="ADMIN"><label for="right_manage">'+tr("Administrate")+'</label>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input type="checkbox" id="right_create" name="right_create" class="right_cb" value="CREATE"><label for="right_create">'+tr("Create")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="acl_preview">'+tr("ACL String preview")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="acl_preview">'+tr("ACL String preview")+':</label>\
|
||||
<input type="text" name="acl_preview" id="acl_preview"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_acl_submit" type="submit" value="Acl.create">'+tr("Create")+'</button>\
|
||||
<button class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
@ -253,10 +229,28 @@ var acl_buttons = {
|
||||
|
||||
var acls_tab = {
|
||||
title: tr("ACLs"),
|
||||
content: acls_tab_content,
|
||||
buttons: acl_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'system-tab'
|
||||
parentTab: 'system-tab',
|
||||
search_input: '<input id="acl_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-key"></i> '+tr("Access Control Lists"),
|
||||
subheader: '<span/><small></small> ',
|
||||
table: '<table id="datatable_acls" class="dataTable">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Applies to")+'</th>\
|
||||
<th>'+tr("Affected resources")+'</th>\
|
||||
<th>'+tr("Resource ID / Owned by")+'</th>\
|
||||
<th>'+tr("Allowed operations")+'</th>\
|
||||
<th>'+tr("Zone")+'</th>\
|
||||
<th>'+tr("ACL String")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyaclss">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(acl_actions);
|
||||
@ -439,7 +433,7 @@ function updateAclsView(request,list){
|
||||
}
|
||||
|
||||
function setupCreateAclDialog(){
|
||||
dialogs_context.append('<div title=\"'+tr("Create ACL")+'\" id="create_acl_dialog"></div>');
|
||||
dialogs_context.append('<div id="create_acl_dialog"></div>');
|
||||
$create_acl_dialog = $('#create_acl_dialog',dialogs_context);
|
||||
var dialog = $create_acl_dialog;
|
||||
dialog.html(create_acl_tmpl);
|
||||
@ -451,7 +445,7 @@ function setupCreateAclDialog(){
|
||||
// width: 650,
|
||||
// height: height
|
||||
//});
|
||||
dialog.addClass("reveal-modal large max-height");
|
||||
dialog.addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
|
||||
//Default selected options
|
||||
$('#res_subgroup_all',dialog).attr('checked','checked');
|
||||
@ -464,27 +458,26 @@ function setupCreateAclDialog(){
|
||||
//Resource subset radio buttons
|
||||
$('.res_subgroup',dialog).click(function(){
|
||||
var value = $(this).val();
|
||||
var context = $(this).closest('fieldset')
|
||||
switch (value) {
|
||||
case "*":
|
||||
$('.res_id',context).hide();
|
||||
$('.belonging_to',context).hide();
|
||||
$('.in_cluster',context).hide();
|
||||
$('.res_id',dialog).hide();
|
||||
$('.belonging_to',dialog).hide();
|
||||
$('.in_cluster',dialog).hide();
|
||||
break;
|
||||
case "res_id":
|
||||
$('.res_id',context).show();
|
||||
$('.res_id',dialog).show();
|
||||
$('.belonging_to').hide();
|
||||
$('.in_cluster',context).hide();
|
||||
$('.in_cluster',dialog).hide();
|
||||
break;
|
||||
case "belonging_to":
|
||||
$('.res_id',context).hide();
|
||||
$('.belonging_to',context).show();
|
||||
$('.in_cluster',context).hide();
|
||||
$('.res_id',dialog).hide();
|
||||
$('.belonging_to',dialog).show();
|
||||
$('.in_cluster',dialog).hide();
|
||||
break;
|
||||
case "in_cluster":
|
||||
$('.res_id',context).hide();
|
||||
$('.belonging_to',context).hide();
|
||||
$('.in_cluster',context).show();
|
||||
$('.res_id',dialog).hide();
|
||||
$('.belonging_to',dialog).hide();
|
||||
$('.in_cluster',dialog).show();
|
||||
break;
|
||||
};
|
||||
});
|
||||
@ -595,7 +588,7 @@ function setupCreateAclDialog(){
|
||||
|
||||
var acl_json = { "acl" : acl_string };
|
||||
Sunstone.runAction("Acl.create",acl_json);
|
||||
$create_acl_dialog.trigger("reveal:close");
|
||||
$create_acl_dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
@ -633,7 +626,7 @@ function popUpCreateAclDialog(){
|
||||
$('#zones_applies',dialog).trigger("change");
|
||||
|
||||
|
||||
dialog.reveal();
|
||||
dialog.foundation().foundation('reveal', 'open');
|
||||
}
|
||||
|
||||
// Prepare the autorefresh of the list
|
||||
|
||||
@ -73,97 +73,100 @@ var datastore_datatable_table_tmpl='<thead>\
|
||||
</tbody>'
|
||||
|
||||
|
||||
var create_cluster_tmpl ='<div class="panel">\
|
||||
<h3 >\
|
||||
<small id="create_cluster_header">'+tr("Create Cluster")+'</small>\
|
||||
<small id="update_cluster_header">'+tr("Update Cluster")+'</small>\
|
||||
</h3>\
|
||||
var create_cluster_tmpl ='<div class="row">\
|
||||
<h3 id="create_cluster_header" class="subheader">'+tr("Create Cluster")+'</h3>\
|
||||
<h3 id="update_cluster_header" class="subheader">'+tr("Update Cluster")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="cluster_create_tabs" class="custom">\
|
||||
<div class="row centered">\
|
||||
<div class="columns eight centered">\
|
||||
<div class="two columns">\
|
||||
<label class="inline right"for="name">' + tr("Name") + ':</label>\
|
||||
</div>\
|
||||
<div class="nine columns">\
|
||||
<input type="text" name="name" id="name" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip"></div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="name">' + tr("Name") + '</label>\
|
||||
<input type="text" name="name" id="name" />\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<dl class="tabs right-info-tabs text-center right" data-tab>\
|
||||
<dd class="active"><a href="#tab-hostsTab"><i class="fa fa-hdd-o"></i><br>'+tr("Hosts")+'</a></dd>\
|
||||
<dd><a href="#tab-vnetsTab"><i class="fa fa-upload"></i><br>'+tr("VNets")+'</a></dd>\
|
||||
<dd><a href="#tab-datastoresTab"><i class="fa fa-folder-open"></i><br>'+tr("Datastores")+'</a></dd>\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<dl class="tabs">\
|
||||
<dd class="active"><a href="#tab-hosts">'+tr("Hosts")+'</a></dd>\
|
||||
<dd><a href="#tab-vnets">'+tr("Virtual Networks")+'</a></dd>\
|
||||
<dd><a href="#tab-datastores">'+tr("Datastores")+'</a></dd>\
|
||||
</dl>\
|
||||
<ul class="tabs-content">\
|
||||
<li id="tab-hostsTab" class="active">\
|
||||
<div class="row collapse">\
|
||||
<div class="seven columns">\
|
||||
<div class="tabs-content">\
|
||||
<div id="tab-hostsTab" class="active content">\
|
||||
<div class="row">\
|
||||
<div class="large-8 columns">\
|
||||
<button id="refresh_host_table_button_class" class="button small radius secondary action_button" value="ClusterHost.list"><i class="fa fa-refresh" /></button>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input id="cluster_hosts_search" type="text" placeholder="'+tr("Search")+'"/>\
|
||||
<div class="large-4 columns">\
|
||||
<input id="cluster_hosts_search" type="text" class="search" placeholder="'+tr("Search")+'"/>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="datatable_cluster_hosts_div">\
|
||||
<table id="datatable_cluster_hosts" class="datatable twelve">' + host_datatable_table_tmpl + '</table></div>\
|
||||
<br>\
|
||||
<div id="selected_hosts_div">\
|
||||
<span id="select_cluster_hosts" class="radius secondary label">'+tr("Please select one or more hosts from the list")+'</span>\
|
||||
<span id="cluster_hosts_selected" class="radius secondary label hidden">'+tr("You selected the following hosts:")+'</span>\
|
||||
<div id="datatable_cluster_hosts_div" class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<table id="datatable_cluster_hosts" class="datatable twelve">' + host_datatable_table_tmpl + '</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
<li id="tab-vnetsTab">\
|
||||
<div class="row collapse">\
|
||||
<div class="seven columns">\
|
||||
<div class="row">\
|
||||
<div id="selected_hosts_div" class="large-12 columns">\
|
||||
<span id="select_cluster_hosts" class="radius secondary label">'+tr("Please select one or more hosts from the list")+'</span>\
|
||||
<span id="cluster_hosts_selected" class="radius secondary label hidden">'+tr("You selected the following hosts:")+'</span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="tab-vnetsTab" class="content">\
|
||||
<div class="row">\
|
||||
<div class="large-8 columns">\
|
||||
<button id="refresh_vnet_table_button_class" class="button small radius secondary action_button" value="ClusterVN.list"><i class="fa fa-refresh" /></button>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input id="cluster_vnets_search" type="text" placeholder="'+tr("Search")+'"/>\
|
||||
<div class="large-4 columns">\
|
||||
<input id="cluster_vnets_search" type="text" class="search" placeholder="'+tr("Search")+'"/>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="datatable_cluster_vnets_div">\
|
||||
<table id="datatable_cluster_vnets" class="table twelve">' + vnet_datatable_table_tmpl + '</table></div>\
|
||||
<br>\
|
||||
<div id="selected_vnets_div">\
|
||||
<span id="select_cluster_vnets" class="radius secondary label">'+tr("Please select one or more vnets from the list")+'</span>\
|
||||
<span id="cluster_vnets_selected" class="radius secondary label hidden">'+tr("You selected the following vnets:")+'</span>\
|
||||
<div class="large-12 columns">\
|
||||
<table id="datatable_cluster_vnets" class="table twelve">' + vnet_datatable_table_tmpl + '</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
<li id="tab-datastoresTab">\
|
||||
<div class="row collapse">\
|
||||
<div class="seven columns">\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<div id="selected_vnets_div" class="large-12 columns">\
|
||||
<span id="select_cluster_vnets" class="radius secondary label">'+tr("Please select one or more vnets from the list")+'</span>\
|
||||
<span id="cluster_vnets_selected" class="radius secondary label hidden">'+tr("You selected the following vnets:")+'</span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="tab-datastoresTab" class="content">\
|
||||
<div class="row">\
|
||||
<div class="large-8 columns">\
|
||||
<button id="refresh_datastore_table_button_class" class="button small radius secondary action_button" value="ClusterDS.list"><i class="fa fa-refresh" /></button>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input id="cluster_datastores_search" type="text" placeholder="'+tr("Search")+'"/>\
|
||||
<div class="large-4 columns">\
|
||||
<input id="cluster_datastores_search" type="text" class="search" placeholder="'+tr("Search")+'"/>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="datatable_cluster_datastores_div">\
|
||||
<table id="datatable_cluster_datastores" class="table twelve">' + datastore_datatable_table_tmpl + '</table></div>\
|
||||
<br>\
|
||||
<div id="selected_datastores_div">\
|
||||
<span id="select_cluster_datastores" class="radius secondary label">'+tr("Please select one or more datastores from the list")+'</span>\
|
||||
<span id="cluster_datastores_selected" class="radius secondary label hidden">'+tr("You selected the following datastores:")+'</span>\
|
||||
<div class="large-12 columns">\
|
||||
<table id="datatable_cluster_datastores" class="table twelve">' + datastore_datatable_table_tmpl + '</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
</ul>\
|
||||
</form>\
|
||||
<div class="row">\
|
||||
<div id="selected_datastores_div" class="large-12 columns">\
|
||||
<span id="select_cluster_datastores" class="radius secondary label">'+tr("Please select one or more datastores from the list")+'</span>\
|
||||
<span id="cluster_datastores_selected" class="radius secondary label hidden">'+tr("You selected the following datastores:")+'</span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons row">\
|
||||
<button class="button success right radius" type="submit" id="create_cluster_submit" value="OpenNebula.Cluster.create">' + tr("Create") + '</button>\
|
||||
<button class="button right radius" type="submit" id="update_cluster_submit">' + tr("Update") + '</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>';
|
||||
</form>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons row">\
|
||||
<button class="button success right radius" type="submit" id="create_cluster_submit" value="OpenNebula.Cluster.create">' + tr("Create") + '</button>\
|
||||
<button class="button right radius" type="submit" id="update_cluster_submit">' + tr("Update") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>';
|
||||
|
||||
// Common utils for datatatables
|
||||
// Holds the selected items
|
||||
@ -184,7 +187,7 @@ function setupCreateClusterDialog(){
|
||||
dialog.html(create_cluster_tmpl);
|
||||
var height = Math.floor($(window).height()*0.8); //set height to a percentage of the window
|
||||
|
||||
dialog.addClass("reveal-modal large max-height");
|
||||
dialog.addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
|
||||
// ------- Create the dialog datatables ------------
|
||||
dataTable_cluster_hosts = $("#datatable_cluster_hosts", dialog).dataTable({
|
||||
@ -446,7 +449,7 @@ function setupCreateClusterDialog(){
|
||||
// If it is successfull we refresh the list.
|
||||
Sunstone.runAction("Cluster.create",cluster_json);
|
||||
|
||||
$create_cluster_dialog.trigger("reveal:close")
|
||||
$create_cluster_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
}
|
||||
@ -469,7 +472,7 @@ function popUpCreateClusterDialog(){
|
||||
|
||||
if ($create_cluster_dialog)
|
||||
{
|
||||
$create_cluster_dialog.remove();
|
||||
$create_cluster_dialog.html("");
|
||||
dialogs_context.append('<div title=\"'+tr("Create cluster")+'\" id="create_cluster_dialog"></div>');
|
||||
}
|
||||
|
||||
@ -487,7 +490,7 @@ function popUpCreateClusterDialog(){
|
||||
Sunstone.runAction("ClusterVN.list");
|
||||
Sunstone.runAction("ClusterDS.list");
|
||||
|
||||
$create_cluster_dialog.reveal();
|
||||
$create_cluster_dialog.foundation().foundation('reveal', 'open');
|
||||
|
||||
$("input#name",$create_cluster_dialog).focus();
|
||||
|
||||
@ -501,8 +504,8 @@ function popUpUpdateClusterDialog(){
|
||||
|
||||
if (dialog)
|
||||
{
|
||||
dialog.remove();
|
||||
dialogs_context.append('<div title=\"'+tr("Update cluster")+'\" id="create_cluster_dialog"></div>');
|
||||
dialog.html("");
|
||||
dialogs_context.append('<div id="create_cluster_dialog"></div>');
|
||||
}
|
||||
|
||||
reset_counters;
|
||||
@ -529,15 +532,18 @@ function popUpUpdateClusterDialog(){
|
||||
|
||||
setupCreateClusterDialog();
|
||||
|
||||
// Activate update button
|
||||
$('#create_cluster_submit',$create_cluster_dialog).hide();
|
||||
$('#update_cluster_submit',$create_cluster_dialog).show();
|
||||
$('#create_cluster_header',$create_cluster_dialog).hide();
|
||||
$('#update_cluster_header',$create_cluster_dialog).show();
|
||||
|
||||
Sunstone.runAction("ClusterHost.list");
|
||||
Sunstone.runAction("ClusterVN.list");
|
||||
Sunstone.runAction("ClusterDS.list");
|
||||
$create_cluster_dialog.reveal();
|
||||
|
||||
$('#create_cluster_dialog').attr('title','Update Cluster');
|
||||
$create_cluster_dialog.foundation().foundation('reveal', 'open');
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
// Fill update dialog with loaded properties
|
||||
@ -565,12 +571,6 @@ function fillPopPup(request,response){
|
||||
ds_ids = [ds_ids];
|
||||
}
|
||||
|
||||
// Activate update button
|
||||
$('#create_cluster_submit',dialog).hide();
|
||||
$('#update_cluster_submit',dialog).show();
|
||||
$('#create_cluster_header',dialog).hide();
|
||||
$('#update_cluster_header',dialog).show();
|
||||
|
||||
// Fill in the name
|
||||
$('#name',dialog).val(name);
|
||||
$('#name',dialog).attr("disabled", "disabled");
|
||||
@ -702,7 +702,7 @@ function fillPopPup(request,response){
|
||||
}
|
||||
}
|
||||
|
||||
$create_cluster_dialog.trigger("reveal:close")
|
||||
$create_cluster_dialog.trigger('close')
|
||||
|
||||
Sunstone.runAction('Cluster.list');
|
||||
|
||||
@ -869,52 +869,6 @@ function updateClusterDatastoresInfoView (request,datastore_list){
|
||||
|
||||
/* -------- End of datatables section -------- */
|
||||
|
||||
|
||||
var clusters_tab_content = '\
|
||||
<form class="custom" id="form_cluters" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-files-o"></i> '+tr("Clusters")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="cluster_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_clusters" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Hosts") + '</th>\
|
||||
<th>' + tr("VNets") + '</th>\
|
||||
<th>' + tr("Datastores") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyclusters">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var clusters_select="";
|
||||
var dataTable_clusters;
|
||||
var $create_cluster_dialog;
|
||||
@ -982,8 +936,13 @@ var cluster_actions = {
|
||||
"Cluster.refresh" : {
|
||||
type: "custom",
|
||||
call: function(){
|
||||
var tab = dataTable_clusters.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Cluster.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_clusters);
|
||||
Sunstone.runAction("Cluster.list");
|
||||
}
|
||||
},
|
||||
error: onError
|
||||
},
|
||||
@ -1114,8 +1073,7 @@ var cluster_buttons = {
|
||||
"Cluster.update_dialog" : {
|
||||
type : "action",
|
||||
layout: "main",
|
||||
text : tr("Update"),
|
||||
alwaysActive: true
|
||||
text : tr("Update")
|
||||
},
|
||||
"Cluster.delete" : {
|
||||
type: "confirm",
|
||||
@ -1126,11 +1084,28 @@ var cluster_buttons = {
|
||||
|
||||
var clusters_tab = {
|
||||
title: tr("Clusters"),
|
||||
content: clusters_tab_content,
|
||||
buttons: cluster_buttons,
|
||||
showOnTopMenu: false,
|
||||
tabClass: "subTab",
|
||||
parentTab: "infra-tab"
|
||||
parentTab: "infra-tab",
|
||||
search_input: '<input id="cluster_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-th"></i> '+tr("Clusters"),
|
||||
info_header: '<i class="fa fa-th"></i> '+tr("Cluster"),
|
||||
subheader: '<span/> <small></small> ',
|
||||
table: '<table id="datatable_clusters" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Hosts") + '</th>\
|
||||
<th>' + tr("VNets") + '</th>\
|
||||
<th>' + tr("Datastores") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyclusters">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
};
|
||||
|
||||
var cluster_info_panel = {
|
||||
@ -1256,15 +1231,14 @@ function updateClusterInfo(request,cluster){
|
||||
|
||||
//Information tab
|
||||
var info_tab = {
|
||||
title : tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content :
|
||||
'<form class="custom"><div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_cluster_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_cluster_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">' +
|
||||
tr("Cluster") +
|
||||
' - '+cluster_info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">' +tr("Information") +'</th></tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
@ -1282,7 +1256,7 @@ function updateClusterInfo(request,cluster){
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_extended_template_table(cluster_template,
|
||||
"Cluster",
|
||||
cluster_info.ID,
|
||||
@ -1293,6 +1267,7 @@ function updateClusterInfo(request,cluster){
|
||||
|
||||
var cluster_host_tab = {
|
||||
title: tr("Hosts"),
|
||||
icon: "fa-hdd-o",
|
||||
content : '<div class="columns twelve">\
|
||||
<div id="datatable_cluster_hosts_info_div">\
|
||||
<table id="datatable_cluster_hosts_info_panel" class="table twelve">' +
|
||||
@ -1303,7 +1278,8 @@ function updateClusterInfo(request,cluster){
|
||||
}
|
||||
|
||||
var cluster_vnet_tab = {
|
||||
title: tr("Virtual Networks"),
|
||||
title: tr("VNets"),
|
||||
icon: "fa-globe",
|
||||
content : '<div class="columns twelve">\
|
||||
<div id="datatable_cluster_vnets_info_div">\
|
||||
<table id="datatable_cluster_vnets_info_panel" class="table twelve">' +
|
||||
@ -1315,6 +1291,7 @@ function updateClusterInfo(request,cluster){
|
||||
|
||||
var cluster_datastore_tab = {
|
||||
title: tr("Datastores"),
|
||||
icon: "fa-folder-open",
|
||||
content : '<div class="columns twelve">\
|
||||
<div id="datatable_cluster_datastores_info_div">\
|
||||
<table id="datatable_cluster_datastores_info_panel" class="table twelve">' +
|
||||
@ -1359,7 +1336,7 @@ function updateClusterInfo(request,cluster){
|
||||
// Hosts datatable
|
||||
|
||||
dataTable_cluster_hosts_panel = $("#datatable_cluster_hosts_info_panel").dataTable({
|
||||
"sDom" : "<'H'>t<'row'<'six columns'i><'six columns'p>>",
|
||||
"sDom" : "<'H'>t<'row'<'large-6 columns'i><'large-6 columns'p>>",
|
||||
"oColVis": { //exclude checkbox column
|
||||
"aiExclude": [ 0 ]
|
||||
},
|
||||
@ -1376,8 +1353,8 @@ function updateClusterInfo(request,cluster){
|
||||
|
||||
// Virtual networks datatable
|
||||
|
||||
dataTable_cluster_vnets_panel = $("#datatable_cluster_vnets_info_panel", dialog).dataTable({
|
||||
"sDom" : "<'H'>t<'row'<'six columns'i><'six columns'p>>",
|
||||
dataTable_cluster_vnets_panel = $("#datatable_cluster_vnets_info_panel").dataTable({
|
||||
"sDom" : "<'H'>t<'row'<'large-6 columns'i><'large-6 columns'p>>",
|
||||
"oColVis": {
|
||||
"aiExclude": [ 0 ]
|
||||
},
|
||||
@ -1394,8 +1371,8 @@ function updateClusterInfo(request,cluster){
|
||||
|
||||
// Datastores datatable
|
||||
|
||||
dataTable_cluster_datastores_panel = $("#datatable_cluster_datastores_info_panel", dialog).dataTable({
|
||||
"sDom" : "<'H'>t<'row'<'six columns'i><'six columns'p>>",
|
||||
dataTable_cluster_datastores_panel = $("#datatable_cluster_datastores_info_panel").dataTable({
|
||||
"sDom" : "<'H'>t<'row'<'large-6 columns'i><'large-6 columns'p>>",
|
||||
"oColVis": {
|
||||
"aiExclude": [ 0 ]
|
||||
},
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
var user_cookie = $.cookie("one-user");
|
||||
var user_cookie = cookie["one-user"];
|
||||
|
||||
setInterval(function(){
|
||||
if (whichUI() == "sunstone") {
|
||||
@ -81,16 +81,14 @@ Config = {
|
||||
|
||||
var config_response = {};
|
||||
var config_tab_content =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="configuration_dialog">'+tr("Configuration")+'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 id="configuration_dialog" class="subheader">'+tr("Configuration")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="config_form">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<table id="user_information" class="twelve datatable extended_table">\
|
||||
<div class="large-7 columns">\
|
||||
<table id="user_information" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">' + tr("User information") +'</th></tr>\
|
||||
</thead>\
|
||||
@ -99,13 +97,10 @@ var config_tab_content =
|
||||
</table>\
|
||||
<div id="setting_user_template"></div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="large-5 columns">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="lang_sel" >' + tr("Language") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<select id="lang_sel">\
|
||||
<label for="lang_sel" >' + tr("Language") + ':\
|
||||
<select id="lang_sel">\
|
||||
<option value="en_US">English (en_US)</option>\
|
||||
<option value="ca">Catalan (ca)</option>\
|
||||
<option value="cs_CZ">Czech (cs_CZ)</option>\
|
||||
@ -124,65 +119,51 @@ var config_tab_content =
|
||||
<option value="sk_SK">Slovak (sk_SK)</option>\
|
||||
<option value="es_ES">Spanish (es_ES)</option>\
|
||||
<option value="zh_TW">Traditional Chinese (zh_TW)</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
</select>\
|
||||
</label>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="view_sel" >' + tr("Views") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<select id="view_sel">\
|
||||
</select>\
|
||||
</div>\
|
||||
<label for="view_sel" >' + tr("Views") + ':\
|
||||
<select id="view_sel">\
|
||||
</select>\
|
||||
</label>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="table_order" >' + tr("Default Table order") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<select id="table_order">\
|
||||
<option value="asc">ascending</option>\
|
||||
<option value="desc">descending</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<label for="table_order" >' + tr("Default Table order") + ':\
|
||||
<select id="table_order">\
|
||||
<option value="asc">ascending</option>\
|
||||
<option value="desc">descending</option>\
|
||||
</select>\
|
||||
</label>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="wss_checkbox" >' + tr("VNC Secure websockets") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<input id="wss_checkbox" type="checkbox" value="yes" />\
|
||||
</div>\
|
||||
<label for="wss_checkbox" >' + tr("VNC Secure websockets") + ':\
|
||||
<input id="wss_checkbox" type="checkbox" value="yes" />\
|
||||
</label>\
|
||||
</div>\
|
||||
<div class="">\
|
||||
<dl class="tabs">\
|
||||
<dl class="tabs" data-tab>\
|
||||
<dd class="active"><a href="#user_quotas">User Quotas</a></dd>\
|
||||
<dd><a href="#group_quotas">Group Quotas</a></dd>\
|
||||
</dl>\
|
||||
<ul class="tabs-content">\
|
||||
<li class="active" id="user_quotasTab"></li>\
|
||||
<li id="group_quotasTab">\
|
||||
<div class="tabs-content">\
|
||||
<div class="content active" id="user_quotas"><span>'+tr("No quotas defined")+'</span></div>\
|
||||
<div id="group_quotas" class="content">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline">' + tr("Select group") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<select id="quota_group_sel">\
|
||||
</select>\
|
||||
</div>\
|
||||
<label>' + tr("Select group") + ':\
|
||||
<select id="quota_group_sel">\
|
||||
</select>\
|
||||
</label>\
|
||||
</div>\
|
||||
<div id="group_quotasTabBody"></div>\
|
||||
</li>\
|
||||
</ul>\
|
||||
<div id="group_quotasTabBody"><span>'+tr("No quotas defined")+'</span></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="config_submit" type="button" value="">'+tr("Update config")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</form>\
|
||||
@ -197,31 +178,30 @@ var settings_update_password = '<div class="panel">\
|
||||
</div>\
|
||||
<form id="settings_update_password_form" action="">\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<div class="large-4 columns">\
|
||||
<label class="inline right" for="new_password">'+tr("New password")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-7 columns">\
|
||||
<input type="password" name="new_password" id="new_password" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="large-1 columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<div class="large-4 columns">\
|
||||
<label class="inline right" for="confirm_password">'+tr("Confirm Password")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-7 columns">\
|
||||
<input type="password" name="confirm_password" id="confirm_password" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="large-1 columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="update_pw_submit" type="submit" value="User.update">'+tr("Change")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
@ -252,10 +232,10 @@ function setupUpdatePassword() {
|
||||
var dialog = $('#settings_update_password',dialogs_context);
|
||||
dialog.html(settings_update_password);
|
||||
|
||||
dialog.addClass("reveal-modal");
|
||||
dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
|
||||
$('#update_password').live('click', function(){
|
||||
$('#settings_update_password',dialogs_context).reveal();
|
||||
$('#settings_update_password',dialogs_context).foundation().foundation('reveal', 'open');
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -274,7 +254,7 @@ function setupUpdatePassword() {
|
||||
}
|
||||
|
||||
Sunstone.runAction("UserSettings.passwd",[-1],pw);
|
||||
$('#settings_update_password',dialogs_context).trigger("reveal:close")
|
||||
$('#settings_update_password',dialogs_context).trigger('close')
|
||||
return false;
|
||||
});
|
||||
}
|
||||
@ -286,7 +266,7 @@ function setupConfigDialog() {
|
||||
var dialog = $config_dialog;
|
||||
dialog.html(config_tab_content);
|
||||
|
||||
dialog.addClass("reveal-modal xlarge max-height");
|
||||
dialog.addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
|
||||
setupTips(dialog);
|
||||
|
||||
@ -376,7 +356,7 @@ function updateUserConfigInfo(request,user_json) {
|
||||
quotas_tab_html += Quotas.network(info, default_user_quotas);
|
||||
quotas_tab_html += Quotas.datastore(info, default_user_quotas);
|
||||
|
||||
$("#user_quotasTab").html(quotas_tab_html);
|
||||
$("#user_quotas").html(quotas_tab_html);
|
||||
|
||||
$("#user_information tbody").html('<tr>\
|
||||
<td class="key_td">' + tr("ID") + '</td>\
|
||||
@ -405,7 +385,7 @@ function updateUserConfigInfo(request,user_json) {
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Password") + '</td>\
|
||||
<td class="value_td" colspan="2"><button id="update_password" type="button" class="button tiny secondary radius" >' + tr("Update password") + '</button></td>\
|
||||
<td class="value_td" colspan="2"><button id="update_password" type="button" class="button tiny radius" >' + tr("Update password") + '</button></td>\
|
||||
</tr>')
|
||||
|
||||
$("#setting_user_template").html(
|
||||
@ -493,7 +473,7 @@ $(document).ready(function(){
|
||||
setupConfigDialog();
|
||||
setupUpdatePassword();
|
||||
|
||||
$("span.user-login a.configuration").click(function(){
|
||||
$(".user-zone-info a.configuration").click(function(){
|
||||
fillUserInfo();
|
||||
|
||||
OpenNebula.Group.list(
|
||||
@ -513,6 +493,6 @@ $(document).ready(function(){
|
||||
}
|
||||
});
|
||||
|
||||
$config_dialog.reveal();
|
||||
$config_dialog.foundation().foundation('reveal', 'open');
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,161 +14,166 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
var dashboard_tab_content = '\
|
||||
<div class="dashboard">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-tachometer"></i> '+tr("Dashboard")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
var dashboard_tab_content = '<div>\
|
||||
<div id="one_per_row">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div id="three_per_row" class="row">\
|
||||
</div>\
|
||||
<div id="two_per_row" class="row">\
|
||||
</div>\
|
||||
<div id="one_per_row" class="row">\
|
||||
</div>\
|
||||
</div>\
|
||||
';
|
||||
|
||||
var widgets = {
|
||||
"storage" : '<div class="panel">\
|
||||
<div class="row">\
|
||||
<h5 class="subheader header-dashboard"><span class="span-dashboard"><i class="fa fa-upload"></i> '+tr("Storage")+'</span></h5>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns centered">\
|
||||
<h3 class="subheader">\
|
||||
<span id="total_images" class="subheader"/>\
|
||||
<small>'+tr("IMAGES")+'</small> \
|
||||
<span id="size_images" class="subheader"/>\
|
||||
"storage" : '<fieldset>\
|
||||
<legend class="span-dashboard"><i class="fa fa-upload"></i> '+tr("Storage")+'</legend>\
|
||||
<div class="row totals-info">\
|
||||
<div class="large-6 columns text-right">\
|
||||
<h4 class="subheader">\
|
||||
<span class="total_images subheader"/><br>\
|
||||
<span class="size_images subheader"/>\
|
||||
</h4>\
|
||||
</div>\
|
||||
<div class="large-6 columns text-left">\
|
||||
<h4 class="subheader">\
|
||||
<small>'+tr("IMAGES")+'</small><br>\
|
||||
<small>'+tr("USED")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>',
|
||||
"users" : '<div class="panel">\
|
||||
<div class="row">\
|
||||
<h5 class="subheader header-dashboard"><span class="span-dashboard"><i class="fa fa-user"></i> '+tr("Users")+'</span></h5>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns centered">\
|
||||
<h3 class="subheader">\
|
||||
<span id="total_users" class="subheader"/>\
|
||||
<small>'+tr("USERS")+'</small> \
|
||||
<span id="total_groups" class="subheader"/>\
|
||||
</fieldset>',
|
||||
"users" : '<fieldset>\
|
||||
<legend class="span-dashboard"><i class="fa fa-user"></i> '+tr("Users")+'</legend>\
|
||||
<div class="row totals-info">\
|
||||
<div class="large-6 columns text-right">\
|
||||
<h4 class="subheader">\
|
||||
<span class="subheader total_users"/><br>\
|
||||
<span class="subheader total_groups"/>\
|
||||
</h4>\
|
||||
</div>\
|
||||
<div class="large-6 columns text-left">\
|
||||
<h4 class="subheader">\
|
||||
<small>'+tr("USERS")+'</small><br>\
|
||||
<small>'+tr("GROUPS")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>',
|
||||
"network" : '<div class="panel">\
|
||||
<div class="row">\
|
||||
<h5 class="subheader header-dashboard"><span class="span-dashboard"><i class="fa fa-sitemap"></i> '+tr("Network")+'</span></h5>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns centered">\
|
||||
<h3 class="subheader">\
|
||||
<span id="total_vnets" class="subheader"/>\
|
||||
<small>'+tr("VNETS")+'</small> \
|
||||
<span id="addresses_vnets" class="subheader"/>\
|
||||
</fieldset>',
|
||||
"network" : '<fieldset>\
|
||||
<legend class="span-dashboard"><i class="fa fa-sitemap"></i> '+tr("Network")+'</legend>\
|
||||
<div class="row totals-info">\
|
||||
<div class="large-6 columns text-right">\
|
||||
<h4 class="subheader">\
|
||||
<span class="total_vnets subheader"/><br>\
|
||||
<span class="addresses_vnets subheader"/>\
|
||||
</h4>\
|
||||
</div>\
|
||||
<div class="large-6 columns text-left">\
|
||||
<h4 class="subheader">\
|
||||
<small>'+tr("VNETS")+'</small><br>\
|
||||
<small>'+tr("USED IPs")+'</small>\
|
||||
</h3>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>',
|
||||
"hosts" : '<fieldset class="dashboard-panel">\
|
||||
<legend class="span-dashboard"><i class="fa fa-hdd-o"></i> '+tr("Hosts")+'</legend>\
|
||||
<div class="row totals-info">\
|
||||
<div class="large-3 columns centered">\
|
||||
<div class="large-6 columns text-right">\
|
||||
<h4 class="subheader">\
|
||||
<span class="total_hosts subheader"/><br>\
|
||||
<span class="on_hosts subheader success-color"/><br>\
|
||||
<span class="off_hosts subheader"/><br>\
|
||||
<span class="error_hosts subheader alert-color"/><br>\
|
||||
</h4>\
|
||||
</div>\
|
||||
<div class="large-6 columns text-left">\
|
||||
<h4 class="subheader">\
|
||||
<small>'+tr("TOTAL")+'</small><br>\
|
||||
<small class="success-color">'+tr("ON")+'</small><br>\
|
||||
<small>'+tr("OFF")+'</small><br>\
|
||||
<small class="alert-color">'+tr("ERROR")+'</small><br>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-9 columns">\
|
||||
<div class="row graph_legend text-left">\
|
||||
<div class="large-4 columns">\
|
||||
<h4 class="subheader text-center"><small>'+tr("CPU")+'</small></h4>\
|
||||
</div>\
|
||||
<div class="large-4 columns">\
|
||||
<span class="label allocated radius">'+tr("Allocated")+'</span> \
|
||||
<span class="label real radius">'+tr("Real")+'</span> \
|
||||
<span class="label total radius">'+tr("Total")+'</span>\
|
||||
</div>\
|
||||
<div class="large-4 columns">\
|
||||
<h4 class="subheader"><small>'+tr("MEMORY")+'</small></h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="large-12 columns centered graph" id="dash_host_cpu_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="large-12 columns centered graph" id="dash_host_mem_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>',
|
||||
"hosts" : '<div class="panel dashboard-panel">\
|
||||
<div class="row">\
|
||||
<h5 class="subheader header-dashboard"><span class="span-dashboard"><i class="fa fa-hdd-o"></i> '+tr("Hosts")+'</span></h5>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns centered">\
|
||||
<h3 class="subheader">\
|
||||
<span id="total_hosts" class="subheader"/>\
|
||||
<small>'+tr("TOTAL")+'</small> \
|
||||
<span id="on_hosts" class="subheader"/>\
|
||||
<small>'+tr("ON")+'</small> \
|
||||
<span id="off_hosts" class="subheader"/>\
|
||||
<small>'+tr("OFF")+'</small> \
|
||||
<span id="error_hosts" class="subheader"/>\
|
||||
<small>'+tr("ERROR")+'</small>\
|
||||
</h3>\
|
||||
</fieldset>',
|
||||
"vms" : '<fieldset class="dashboard-panel">\
|
||||
<legend class="span-dashboard"><i class="fa fa-cloud"></i> '+tr("Virtual Machines")+'</legend>\
|
||||
<div class="row totals-info">\
|
||||
<div class="large-3 columns">\
|
||||
<div class="large-6 columns text-right">\
|
||||
<h4 class="subheader">\
|
||||
<span class="subheader total_vms"/><br>\
|
||||
<span class="subheader active_vms success-color"/><br>\
|
||||
<span class="subheader pending_vms"/><br>\
|
||||
<span class="subheader failed_vms alert-color"/>\
|
||||
</h4>\
|
||||
</div>\
|
||||
<div class="large-6 columns text-left">\
|
||||
<h4 class="subheader">\
|
||||
<small>'+tr("TOTAL")+'</small><br>\
|
||||
<small class="success-color">'+tr("ACTIVE")+'</small><br>\
|
||||
<small>'+tr("PENDING")+'</small><br>\
|
||||
<small class="alert-color">'+tr("FAILED")+'</small>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-9 columns">\
|
||||
<div class="row graph_legend text-center">\
|
||||
<div class="large-6 columns">\
|
||||
<h4 class="subheader"><small>'+tr("NET DOWNLOAD SPEED")+'</small></h4>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<h4 class="subheader"><small>'+tr("NET UPLOAD SPEED")+'</small></h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="large-12 columns centered graph" id="dash_vm_net_rx_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="large-12 columns centered graph" id="dash_vm_net_tx_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend">\
|
||||
<h3 class="subheader"><small>'+tr("CPU")+'</small></h3>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered graph" id="dash_host_cpu_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend">\
|
||||
<h3 class="subheader"><small>'+tr("MEMORY")+'</small></h3>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered graph" id="dash_host_mem_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend" style="text-align:centered">\
|
||||
<span class="label allocated radius">'+tr("Allocated")+'</span> \
|
||||
<span class="label real radius">'+tr("Real")+'</span> \
|
||||
<span class="label total radius">'+tr("Total")+'</span>\
|
||||
</div>\
|
||||
</div>',
|
||||
"vms" : '<div class="panel dashboard-panel">\
|
||||
<div class="row">\
|
||||
<h5 class="subheader header-dashboard"><span class="span-dashboard"><i class="fa fa-cloud"></i> '+tr("Virtual Machines")+'</span></h5>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns centered">\
|
||||
<h3 class="subheader">\
|
||||
<span id="total_vms" class="subheader"/>\
|
||||
<small>'+tr("TOTAL")+'</small> \
|
||||
<span id="active_vms" class="subheader"/>\
|
||||
<small>'+tr("ACTIVE")+'</small> \
|
||||
<span id="pending_vms" class="subheader"/>\
|
||||
<small>'+tr("PENDING")+'</small> \
|
||||
<span id="failed_vms" class="subheader"/>\
|
||||
<small>'+tr("FAILED")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend">\
|
||||
<h3 class="subheader"><small>'+tr("NET DOWNLOAD SPEED")+'</small></h3>\
|
||||
<div class="ten columns " id="dash_vm_net_rx_legend">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered graph" id="dash_vm_net_rx_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend">\
|
||||
<h3 class="subheader"><small>'+tr("NET UPLOAD SPEED")+'</small></h3>\
|
||||
<div class="ten columns" id="dash_vm_net_tx_legend">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered graph" id="dash_vm_net_tx_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>'
|
||||
</fieldset>'
|
||||
}
|
||||
|
||||
var dashboard_tab = {
|
||||
title: '<i class="fa fa-tachometer"></i>'+tr("Dashboard"),
|
||||
content: dashboard_tab_content,
|
||||
showOnTopMenu: false
|
||||
showOnTopMenu: false,
|
||||
list_header: '<i class="fa fa-tachometer"></i> '+tr("Dashboard")
|
||||
}
|
||||
|
||||
Sunstone.addMainTab('dashboard-tab',dashboard_tab);
|
||||
@ -183,17 +188,17 @@ $(document).ready(function(){
|
||||
$dashboard = $('#dashboard-tab', main_tabs_context);
|
||||
|
||||
$.each(Config.dashboardWidgets('widgets_three_per_row'), function(id, widget){
|
||||
var html = '<div class="four columns">'+widgets[widget]+'</div>';
|
||||
var html = '<div class="large-4 columns">'+widgets[widget]+'</div>';
|
||||
$('#three_per_row', $dashboard).append(html);
|
||||
})
|
||||
|
||||
$.each(Config.dashboardWidgets('widgets_two_per_row'), function(id, widget){
|
||||
var html = '<div class="six columns">'+widgets[widget]+'</div>';
|
||||
var html = '<div class="large-6 columns">'+widgets[widget]+'</div>';
|
||||
$('#two_per_row', $dashboard).append(html);
|
||||
})
|
||||
|
||||
$.each(Config.dashboardWidgets('widgets_one_per_row'), function(id, widget){
|
||||
var html = '<div class="twelve columns">'+widgets[widget]+'</div>';
|
||||
var html = '<div class="row"><div class="large-12 columns">'+widgets[widget]+'</div></div><br>';
|
||||
$('#one_per_row', $dashboard).append(html);
|
||||
})
|
||||
});
|
||||
|
||||
@ -14,156 +14,64 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/*Datastore tab plugin*/
|
||||
|
||||
|
||||
var datastores_tab_content = '\
|
||||
<form class="custom" id="form_datastores" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-folder-open"></i> '+tr("Datastores")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="datastore_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_datastores" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Capacity")+'</th>\
|
||||
<th>'+tr("Cluster")+'</th>\
|
||||
<th>'+tr("Basepath")+'</th>\
|
||||
<th>'+tr("TM MAD")+'</th>\
|
||||
<th>'+tr("DS MAD")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodydatastores">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var create_datastore_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_cluster_header">'+tr("Create Datastore")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_datastore_form" action="" class="creation">\
|
||||
<dl class="tabs">\
|
||||
<dd class="active"><a href="#datastore_easy">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#datastore_manual">'+tr("Advanced mode")+'</a></dd>\
|
||||
'<div class="row">'+
|
||||
'<div class="large-5 columns">'+
|
||||
'<h3 id="create_cluster_header" class="subheader">'+tr("Create Datastore")+'</h3>'+
|
||||
'</div>'+
|
||||
'<div class="large-7 columns">'+
|
||||
'<dl class="tabs right wizard_tabs" data-tab>\
|
||||
<dd class="active"><a href="#datastore_easyTab">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#datastore_manualTab">'+tr("Advanced mode")+'</a></dd>\
|
||||
</dl>\
|
||||
<ul class="tabs-content">\
|
||||
<li id="datastore_easyTab" class="active">\
|
||||
<div class="row">\
|
||||
<div class="three columns">\
|
||||
<label class="right inline" for="name" >' + tr("Name") + ':</label>\
|
||||
</div>\
|
||||
<div class="eight columns">\
|
||||
<input type="text" name="name" id="name"/>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="presets">' + tr("Presets") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select id="presets" name="presets">\
|
||||
<option value="fs">' + tr("Filesystem") + '</option>\
|
||||
<option value="vmware_vmfs">' + tr("VMware VMFS") + '</option>\
|
||||
<option value="block_lvm">' + tr("Block LVM") + '</option>\
|
||||
<option value="fs_lvm">' + tr("FS LVM") + '</option>\
|
||||
<option value="ceph">' + tr("Ceph") + '</option>\
|
||||
<option value="custom">' + tr("Custom") + '</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="cluster">' + tr("Cluster") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select id="cluster_id" name="cluster_id">\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_datastore_form" action="" class="creation">\
|
||||
<div class="tabs-content">\
|
||||
<div id="datastore_easyTab" class="active content">\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Type") + '</legend>\
|
||||
<div class="four columns">\
|
||||
<label for="image_ds_type"><input id="image_ds_type" type="radio" name="ds_type" value="IMAGE_DS" checked/>' + tr("Images") + '</label>\
|
||||
</div>\
|
||||
<div class="four columns">\
|
||||
<label for="system_ds_type"><input id="system_ds_type" type="radio" name="ds_type" value="SYSTEM_DS" />' + tr("System") + '</label>\
|
||||
</div>\
|
||||
<div class="four columns">\
|
||||
<label for="file_ds_type"><input id="file_ds_type" type="radio" name="ds_type" value="FILE_DS" />' + tr("Files") + '</label>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="disk_type">' + tr("Disk type") + ':</label>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="name" >' + tr("Name") + ':</label>\
|
||||
<input type="text" name="name" id="name"/>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select id="disk_type" name="disk_type">\
|
||||
<option value="file">' + tr("File") + '</option>\
|
||||
<option value="block">' + tr("Block") + '</option>\
|
||||
<option value="RBD">' + tr("RBD") + '</option>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="presets">' + tr("Presets") + '</label>\
|
||||
<select id="presets" name="presets">\
|
||||
<option value="fs">' + tr("Filesystem") + '</option>\
|
||||
<option value="vmware_vmfs">' + tr("VMware VMFS") + '</option>\
|
||||
<option value="block_lvm">' + tr("Block LVM") + '</option>\
|
||||
<option value="fs_lvm">' + tr("FS LVM") + '</option>\
|
||||
<option value="ceph">' + tr("Ceph") + '</option>\
|
||||
<option value="custom">' + tr("Custom") + '</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="cluster">' + tr("Cluster") + '</label>\
|
||||
<select id="cluster_id" name="cluster_id">\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Managers") + '</legend>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="ds_mad">' + tr("Datastore") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Type") + '</legend>\
|
||||
<div class="large-12 columns text-center">\
|
||||
<input id="image_ds_type" type="radio" name="ds_type" value="IMAGE_DS" checked/><label for="image_ds_type">' + tr("Images") + '</label>\
|
||||
<input id="system_ds_type" type="radio" name="ds_type" value="SYSTEM_DS" /><label for="system_ds_type">' + tr("System") + '</label>\
|
||||
<input id="file_ds_type" type="radio" name="ds_type" value="FILE_DS" /><label for="file_ds_type">' + tr("Files") + '</label>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Managers") + '</legend>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="ds_mad">' + tr("Datastore") + '</label>\
|
||||
<select id="ds_mad" name="ds_mad">\
|
||||
<option value="fs">' + tr("Filesystem") + '</option>\
|
||||
<option value="vmware">' + tr("VMware") + '</option>\
|
||||
@ -177,14 +85,8 @@ var create_datastore_tmpl =
|
||||
<input type="text" name="ds_tab_custom_ds_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="tm_mad">' + tr("Transfer") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="tm_mad">' + tr("Transfer") + ':</label>\
|
||||
<select id="tm_mad" name="tm_mad">\
|
||||
<option value="shared">' + tr("Shared") + '</option>\
|
||||
<option value="ssh">' + tr("SSH") + '</option>\
|
||||
@ -201,129 +103,101 @@ var create_datastore_tmpl =
|
||||
<input type="text" name="ds_tab_custom_tm_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="disk_type">' + tr("Disk type") + ':</label>\
|
||||
<select id="disk_type" name="disk_type">\
|
||||
<option value="file">' + tr("File") + '</option>\
|
||||
<option value="block">' + tr("Block") + '</option>\
|
||||
<option value="RBD">' + tr("RBD") + '</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="safe_dirs">' + tr("Safe Directories") +
|
||||
'<span class="tip">'+tr("If you need to un-block a directory under one of the RESTRICTED_DIRS")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="safe_dirs" id="safe_dirs" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="restricted_dirs">' + tr("Restricted Directories") +
|
||||
'<span class="tip">'+tr("Paths that can not be used to register images. A space separated list of paths. This will prevent users registering important files as VM images and accessing them thourgh their VMs. OpenNebula will automatically add its configuration directories: /var/lib/one, /etc/one and oneadmin's home ($HOME).")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="restricted_dirs" id="restricted_dirs" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="bridge_list">' + tr("Host Bridge List") +
|
||||
'<span class="tip">'+tr("Space separated list of Server names or IPs where OpenNebula will be staging the new images into. This server will act as the entry point for new inmages in the datastore.")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="bridge_list" id="bridge_list" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="base_path">' + tr("Base Path") +
|
||||
'<span class="tip">'+tr("When needed, the front-end will access the datastores using BASE_PATH (defaults to /var/lib/one/datastores).")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="base_path" id="base_path" />\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<input id="ds_use_ssh" type="checkbox" name="ds_use_ssh" value="YES" /><label for="ds_use_ssh">' + tr("Use SSH for Datastore Manager") + '</label>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<input id="tm_use_ssh" type="checkbox" name="tm_use_ssh" value="YES" /><label class="inline" for="tm_use_ssh">' + tr("Use SSH for Transfer Manager") + '</label>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="base_iqn">' + tr("Base IQN") + '</label>\
|
||||
<input type="text" name="base_iqn" id="base_iqn" />\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="vg_name">' + tr("Volume Group Name") + '</label>\
|
||||
<input type="text" name="vg_name" id="vg_name" />\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="limit_mb">' + tr("Limit") +
|
||||
'<span class="tip">'+tr("Optional limit, in MB. If set, OpenNebula will only use this amount of storage, instead of the whole free disk.")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="limit_mb" id="limit_mb" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" type="submit" id="create_datastore_submit" value="OpenNebula.Datastore.create">' + tr("Create") + '</button>\
|
||||
<button id="wizard_ds_reset_button" class="button radius secondary" type="reset" value="reset">' + tr("Reset") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="datastore_manualTab" class="content">\
|
||||
<div class="row">\
|
||||
<div class="columns large-6">\
|
||||
<label for="datastore_cluster_raw">'+tr("Cluster")+'</label>\
|
||||
<select id="datastore_cluster_raw" name="datastore_cluster_raw"></select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<textarea id="template" rows="15"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_datastore_submit_manual" value="datastore/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_ds_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="safe_dirs">' + tr("Safe Directories") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="safe_dirs" id="safe_dirs" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("If you need to un-block a directory under one of the RESTRICTED_DIRS")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="restricted_dirs">' + tr("Restricted Directories") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="restricted_dirs" id="restricted_dirs" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Paths that can not be used to register images. A space separated list of paths. This will prevent users registering important files as VM images and accessing them thourgh their VMs. OpenNebula will automatically add its configuration directories: /var/lib/one, /etc/one and oneadmin's home ($HOME).")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="base_path">' + tr("Base Path") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="base_path" id="base_path" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("When needed, the front-end will access the datastores using BASE_PATH (defaults to /var/lib/one/datastores).")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="ds_use_ssh"><input id="ds_use_ssh" type="checkbox" name="ds_use_ssh" value="YES" />' + tr("Use SSH for Datastore Manager") + '</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<label class="inline" for="tm_use_ssh"><input id="tm_use_ssh" type="checkbox" name="tm_use_ssh" value="YES" />' + tr("Use SSH for Transfer Manager") + '</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="bridge_list">' + tr("Host Bridge List") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="bridge_list" id="bridge_list" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Space separated list of Server names or IPs where OpenNebula will be staging the new images into. This server will act as the entry point for new inmages in the datastore.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="base_iqn">' + tr("Base IQN") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="base_iqn" id="base_iqn" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="vg_name">' + tr("Volume Group Name") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="vg_name" id="vg_name" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="twelve columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="limit_mb">' + tr("Limit") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="limit_mb" id="limit_mb" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Optional limit, in MB. If set, OpenNebula will only use this amount of storage, instead of the whole free disk.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" type="submit" id="create_datastore_submit" value="OpenNebula.Datastore.create">' + tr("Create") + '</button>\
|
||||
<button id="wizard_ds_reset_button" class="button radius secondary" type="reset" value="reset">' + tr("Reset") + '</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
<li id="datastore_manualTab">\
|
||||
<div class="row">\
|
||||
<div class="columns three">\
|
||||
<label class="inline left" for="datastore_cluster_raw">'+tr("Cluster")+':</label>\
|
||||
</div>\
|
||||
<div class="columns nine">\
|
||||
<select id="datastore_cluster_raw" name="datastore_cluster_raw"></select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<textarea id="template" rows="15"></textarea>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_datastore_submit_manual" value="datastore/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_ds_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
</ul>\
|
||||
</form>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form></div>';
|
||||
</div>';
|
||||
|
||||
var datastore_image_table_tmpl='<thead>\
|
||||
<tr>\
|
||||
@ -422,8 +296,13 @@ var datastore_actions = {
|
||||
"Datastore.refresh" : {
|
||||
type: "custom",
|
||||
call: function(){
|
||||
var tab = dataTable_datastores.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Datastore.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_datastores);
|
||||
Sunstone.runAction("Datastore.list");
|
||||
}
|
||||
},
|
||||
error: onError
|
||||
},
|
||||
@ -607,11 +486,32 @@ var datastore_info_panel = {
|
||||
|
||||
var datastores_tab = {
|
||||
title: tr("Datastores"),
|
||||
content: datastores_tab_content,
|
||||
buttons: datastore_buttons,
|
||||
tabClass: "subTab",
|
||||
parentTab: "infra-tab",
|
||||
showOnTopMenu: false
|
||||
search_input: '<input id="datastore_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-folder-open"></i> '+tr("Datastores"),
|
||||
info_header: '<i class="fa fa-folder-open"></i> '+tr("Datastore"),
|
||||
subheader: '<span/> <small></small> ',
|
||||
table: '<table id="datatable_datastores" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Capacity")+'</th>\
|
||||
<th>'+tr("Cluster")+'</th>\
|
||||
<th>'+tr("Basepath")+'</th>\
|
||||
<th>'+tr("TM MAD")+'</th>\
|
||||
<th>'+tr("DS MAD")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodydatastores">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(datastore_actions);
|
||||
@ -753,10 +653,10 @@ function updateDatastoreInfo(request,ds){
|
||||
var is_system_ssh = (info.TEMPLATE.SHARED == "NO")
|
||||
|
||||
var info_tab_content = '<div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_datastore_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_datastore_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">'+tr("Datastore")+' - '+info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">'+tr("Information")+'</th></tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
@ -804,7 +704,7 @@ function updateDatastoreInfo(request,ds){
|
||||
info.ID,
|
||||
"Configuration Attributes") +
|
||||
'</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_permissions_table('datastores-tab',
|
||||
"Datastore",
|
||||
info.ID,
|
||||
@ -817,13 +717,15 @@ function updateDatastoreInfo(request,ds){
|
||||
|
||||
|
||||
var info_tab = {
|
||||
title : tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content: info_tab_content
|
||||
}
|
||||
|
||||
var datastore_info_tab = {
|
||||
title: tr("Images"),
|
||||
content : '<div id="datatable_datastore_images_info_div" class="twelve columns"><table id="datatable_datastore_images_info_panel" class="table twelve">' + datastore_image_table_tmpl + '</table></div>'
|
||||
icon: "fa-upload",
|
||||
content : '<div id="datatable_datastore_images_info_div" class="large-12 columns"><table id="datatable_datastore_images_info_panel" class="table twelve">' + datastore_image_table_tmpl + '</table></div>'
|
||||
}
|
||||
|
||||
$("#div_edit_rename_link").die();
|
||||
@ -918,7 +820,7 @@ function setupCreateDatastoreDialog(){
|
||||
var dialog = $create_datastore_dialog;
|
||||
dialog.html(create_datastore_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal large max-height");
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
|
||||
setupTips(dialog);
|
||||
|
||||
@ -1037,7 +939,7 @@ function setupCreateDatastoreDialog(){
|
||||
|
||||
Sunstone.runAction("Datastore.create",ds_obj);
|
||||
|
||||
$create_datastore_dialog.trigger("reveal:close")
|
||||
$create_datastore_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -1057,13 +959,13 @@ function setupCreateDatastoreDialog(){
|
||||
"cluster_id" : cluster_id
|
||||
};
|
||||
Sunstone.runAction("Datastore.create",ds_obj);
|
||||
$create_datastore_dialog.trigger("reveal:close")
|
||||
$create_datastore_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#wizard_ds_reset_button').click(function(){
|
||||
$create_datastore_dialog.trigger('reveal:close');
|
||||
$create_datastore_dialog.remove();
|
||||
$create_datastore_dialog.trigger('close');
|
||||
$create_datastore_dialog.html("");
|
||||
setupCreateDatastoreDialog();
|
||||
|
||||
window.ds_wizard_is_not_first="false";
|
||||
@ -1072,8 +974,8 @@ function setupCreateDatastoreDialog(){
|
||||
});
|
||||
|
||||
$('#advanced_ds_reset_button').click(function(){
|
||||
$create_datastore_dialog.trigger('reveal:close');
|
||||
$create_datastore_dialog.remove();
|
||||
$create_datastore_dialog.trigger('close');
|
||||
$create_datastore_dialog.html("");
|
||||
setupCreateDatastoreDialog();
|
||||
|
||||
window.ds_wizard_is_not_first="false";
|
||||
@ -1157,7 +1059,7 @@ function select_custom(){
|
||||
function popUpCreateDatastoreDialog(){
|
||||
$('select#cluster_id',$create_datastore_dialog).html(clusters_sel());
|
||||
$('select#datastore_cluster_raw',$create_datastore_dialog).html(clusters_sel());
|
||||
$create_datastore_dialog.reveal();
|
||||
$create_datastore_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#name",$create_datastore_dialog).focus();
|
||||
if(window.ds_wizard_is_not_first != "true")
|
||||
{
|
||||
|
||||
@ -14,195 +14,117 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/*Files tab plugin*/
|
||||
|
||||
var files_tab_content = '\
|
||||
<form class="custom" id="file_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-folder-open"></i> '+tr("Files & Kernels")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span id="total_files"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span id="size_files"/> <small>'+tr("SIZE")+'</small>\
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
var create_file_tmpl ='<div class="row">\
|
||||
<div class="large-5 columns">\
|
||||
<h3 class="subheader">'+tr("Create File")+'</h3>'+
|
||||
'</div>'+
|
||||
'<div class="large-7 columns">'+
|
||||
'<dl class="tabs right" data-tab>\
|
||||
<dd class="active"><a href="#file_easyTab">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#file_manualTab">'+tr("Advanced mode")+'</a></dd>\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="file_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="">\
|
||||
<div class="twelve columns">\
|
||||
<div id="files_upload_progress_bars"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_files" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Datastore")+'</th>\
|
||||
<th>'+tr("Size")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Registration time")+'</th>\
|
||||
<th>'+tr("Persistent")+'</th>\
|
||||
<th>'+tr("Status")+'</th>\
|
||||
<th>'+tr("#VMS")+'</th>\
|
||||
<th>'+tr("Target")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyfiles">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var create_file_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3><small>'+tr("Create File")+'</small></h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_file_form_easy" action="" class="custom creation">\
|
||||
<dl class="tabs">\
|
||||
<dd class="active"><a href="#file_easy">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#file_manual">'+tr("Advanced mode")+'</a></dd>\
|
||||
</dl>\
|
||||
<ul class="tabs-content">\
|
||||
<li id="file_easyTab" class="active">\
|
||||
<div class="row vm_param">\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_name">'+tr("Name")+':</label>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_file_form_easy" action="" class="custom creation">\
|
||||
<div class="tabs-content">\
|
||||
<div id="file_easyTab" class="content active">\
|
||||
<div class="row vm_param">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="file_name">'+tr("Name")+
|
||||
'<span class="tip">'+tr("Name that the File will get. Every file must have a unique name.")+'</span>\
|
||||
</label>\
|
||||
<input type="text" name="file_name" id="file_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="img_name" id="img_name" />\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="file_desc">'+tr("Description")+
|
||||
'<span class="tip">'+tr("Human readable description of the file for other users.")+'</span>\
|
||||
</label>\
|
||||
<textarea name="file_desc" id="file_desc" rows="4"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one columns tip">'+tr("Name that the File will get. Every file must have a unique name.")+'</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_desc">'+tr("Description")+':</label>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="file_type">'+tr("Type")+
|
||||
'<span class="tip">'+tr("Type of the file, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).")+'</span>'+
|
||||
'</label>\
|
||||
<select name="file_type" id="file_type">\
|
||||
<option value="KERNEL">'+tr("Kernel")+'</option>\
|
||||
<option value="RAMDISK">'+tr("Ramdisk")+'</option>\
|
||||
<option value="CONTEXT">'+tr("Context")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<textarea name="img_desc" id="img_desc" rows="4"></textarea>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Human readable description of the file for other users.")+'</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="file_datastore">'+tr("Datastore")+
|
||||
'<span class="tip">'+tr("Select the datastore for this file")+'</span>'+
|
||||
'</label>\
|
||||
<select id="file_datastore" name="file_datastore">\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_type">'+tr("Type")+':</label>\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Image location")+':</legend>\
|
||||
<div class="row" id="src_path_select">\
|
||||
<div class="large-12 columns text-center">\
|
||||
<input type="radio" name="src_path" id="path_file" value="path"><label for="path_file">'+ tr("Provide a path")+'</label> \
|
||||
<input type="radio" name="src_path" id="upload_file" value="upload"> <label for="upload_file">'+tr("Upload")+'</label> \
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="img_type" id="img_type">\
|
||||
<option value="KERNEL">'+tr("Kernel")+'</option>\
|
||||
<option value="RAMDISK">'+tr("Ramdisk")+'</option>\
|
||||
<option value="CONTEXT">'+tr("Context")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="file_param row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="file_path">'+tr("Path")+
|
||||
'<span class="tip">'+tr("Path to the original file that will be copied to the file repository.")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="file_path" id="file_path" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Type of the file, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).")+'</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div id="files_file-uploader" class="large-12 columns text-center">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="file_datastore">'+tr("Datastore")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select id="file_datastore" name="file_datastore">\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Select the datastore for this file")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_file_submit" type="button" value="file/create">'+tr("Create")+'</button>\
|
||||
<button id="wizard_file_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("File location")+':</legend>\
|
||||
<div class="row" id="src_path_select">\
|
||||
<div class="five columns centered">\
|
||||
<input type="radio" name="src_path" id="path_img" value="path">'+ tr("Provide a path")+' </input> \
|
||||
<input type="radio" name="src_path" id="upload_img" value="upload"> '+tr("Upload")+'</input>  \
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="img_param row">\
|
||||
<div class="eight columns centered">\
|
||||
<div class="two columns">\
|
||||
<label class="right inline" for="img_path">'+tr("Path")+':</label>\
|
||||
</div>\
|
||||
<div class="nine columns">\
|
||||
<input type="text" name="img_path" id="img_path" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Path to the original file that will be copied to the file repository. If not specified for a DATABLOCK type file, an empty file will be created.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="img_param" id="files_upload_div">\
|
||||
<div class="row">\
|
||||
<div class="columns eight centered">\
|
||||
<div id="files_file-uploader"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_file_submit" value="file/create">'+tr("Create")+'</button>\
|
||||
<button class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
<li id="file_manualTab">\
|
||||
<div class="reveal-body">\
|
||||
<div class="columns three">\
|
||||
<label class="inline left" for="file_datastores_raw">'+tr("Datastore")+':</label>\
|
||||
</div>\
|
||||
<div class="columns nine">\
|
||||
</div>\
|
||||
<div id="file_manualTab" class="content">\
|
||||
<div class="reveal-body">\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<label for="file_datastores_raw">'+tr("Datastore")+':</label>\
|
||||
<select id="file_datastore_raw" name="file_datastore_raw"></select>\
|
||||
</div>\
|
||||
<textarea id="template" rows="15" style="width:100%;"></textarea>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<textarea id="template" rows="15" style="height:180px !important; width:100%;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_file_submit_manual" value="file/create">'+tr("Create")+'</button>\
|
||||
<button class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
<button id="advanced_file_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
</ul>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>\
|
||||
</div>';
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>\
|
||||
</div>';
|
||||
|
||||
var dataTable_files;
|
||||
var $create_file_dialog;
|
||||
@ -248,8 +170,13 @@ var file_actions = {
|
||||
"File.refresh" : {
|
||||
type: "custom",
|
||||
call: function () {
|
||||
var tab = dataTable_files.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("File.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_files);
|
||||
Sunstone.runAction("File.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -417,10 +344,38 @@ var file_info_panel = {
|
||||
|
||||
var files_tab = {
|
||||
title: tr("Files & Kernels"),
|
||||
content: files_tab_content,
|
||||
buttons: file_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'vresources-tab'
|
||||
parentTab: 'vresources-tab',
|
||||
content: '<div class="large-12 columns">\
|
||||
<div id="files_upload_progress_bars"></div>\
|
||||
</div>',
|
||||
search_input: '<input id="file_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-folder-open"></i> '+tr("Files & Kernels"),
|
||||
info_header: '<i class="fa fa-folder-open"></i> '+tr("File"),
|
||||
subheader: '<span class="total_files"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span class="size_files"/> <small>'+tr("SIZE")+'</small>',
|
||||
table: '<table id="datatable_files" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Datastore")+'</th>\
|
||||
<th>'+tr("Size")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Registration time")+'</th>\
|
||||
<th>'+tr("Persistent")+'</th>\
|
||||
<th>'+tr("Status")+'</th>\
|
||||
<th>'+tr("#VMS")+'</th>\
|
||||
<th>'+tr("Target")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyfiles">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(file_actions);
|
||||
@ -498,35 +453,31 @@ function updateFilesView(request, files_list){
|
||||
|
||||
var size = humanize_size_from_mb(size_files)
|
||||
|
||||
$("#total_files", $dashboard).text(file_list_array.length);
|
||||
$("#size_files", $dashboard).text(size);
|
||||
|
||||
var form = $("#file_form");
|
||||
|
||||
$("#total_files", form).text(file_list_array.length);
|
||||
$("#size_files", form).text(size);
|
||||
$(".total_files").text(file_list_array.length);
|
||||
$(".size_files").text(size);
|
||||
}
|
||||
|
||||
// Callback to update the information panel tabs and pop it up
|
||||
function updateFileInfo(request,img){
|
||||
var img_info = img.IMAGE;
|
||||
function updateFileInfo(request,file){
|
||||
var file_info = file.IMAGE;
|
||||
var info_tab = {
|
||||
title: tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content:
|
||||
'<form class="custom"><div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_img_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_file_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">'+tr("File")+' - '+img_info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">'+tr("File")+' - '+file_info.NAME+'</th></tr>\
|
||||
</thead>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("ID")+'</td>\
|
||||
<td class="value_td">'+img_info.ID+'</td>\
|
||||
<td class="value_td">'+file_info.ID+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Name")+'</td>\
|
||||
<td class="value_td_rename">'+img_info.NAME+'</td>\
|
||||
<td class="value_td_rename">'+file_info.NAME+'</td>\
|
||||
<td><div id="div_edit_rename">\
|
||||
<a id="div_edit_rename_link_files" class="edit_e" href="#"><i class="fa fa-pencil-square-o right"/></a>\
|
||||
</div>\
|
||||
@ -534,12 +485,12 @@ function updateFileInfo(request,img){
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Datastore")+'</td>\
|
||||
<td class="value_td">'+img_info.DATASTORE+'</td>\
|
||||
<td class="value_td">'+file_info.DATASTORE+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Type")+'</td>\
|
||||
<td class="value_td_type">'+OpenNebula.Helper.image_type(img_info.TYPE)+'</td>\
|
||||
<td class="value_td_type">'+OpenNebula.Helper.image_type(file_info.TYPE)+'</td>\
|
||||
<td><div id="div_edit_chg_type_files">\
|
||||
<a id="div_edit_chg_type_files_link" class="edit_e" href="#"><i class="fa fa-pencil-square-o right"/></a>\
|
||||
</div>\
|
||||
@ -547,42 +498,42 @@ function updateFileInfo(request,img){
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Register time")+'</td>\
|
||||
<td class="value_td">'+pretty_time(img_info.REGTIME)+'</td>\
|
||||
<td class="value_td">'+pretty_time(file_info.REGTIME)+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Filesystem type")+'</td>\
|
||||
<td class="value_td">'+(typeof img_info.FSTYPE === "string" ? img_info.FSTYPE : "--")+'</td>\
|
||||
<td class="value_td">'+(typeof file_info.FSTYPE === "string" ? file_info.FSTYPE : "--")+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Size")+'</td>\
|
||||
<td class="value_td">'+humanize_size_from_mb(img_info.SIZE)+'</td>\
|
||||
<td class="value_td">'+humanize_size_from_mb(file_info.SIZE)+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("State")+'</td>\
|
||||
<td class="value_td">'+OpenNebula.Helper.resource_state("file",img_info.STATE)+'</td>\
|
||||
<td class="value_td">'+OpenNebula.Helper.resource_state("file",file_info.STATE)+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Running VMS")+'</td>\
|
||||
<td class="value_td">'+img_info.RUNNING_VMS+'</td>\
|
||||
<td class="value_td">'+file_info.RUNNING_VMS+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_permissions_table('files-tab',
|
||||
"File",
|
||||
img_info.ID,
|
||||
img_info.UNAME,
|
||||
img_info.GNAME,
|
||||
img_info.UID,
|
||||
img_info.GID) +
|
||||
insert_extended_template_table(img_info.TEMPLATE,
|
||||
file_info.ID,
|
||||
file_info.UNAME,
|
||||
file_info.GNAME,
|
||||
file_info.UID,
|
||||
file_info.GID) +
|
||||
insert_extended_template_table(file_info.TEMPLATE,
|
||||
"File",
|
||||
img_info.ID,
|
||||
file_info.ID,
|
||||
"Configuration & Tags") +
|
||||
'</div>\
|
||||
</div></form>'
|
||||
@ -608,7 +559,7 @@ function updateFileInfo(request,img){
|
||||
{
|
||||
// Let OpenNebula know
|
||||
var name_template = {"name": value_str};
|
||||
Sunstone.runAction("File.rename",img_info.ID,name_template);
|
||||
Sunstone.runAction("File.rename",file_info.ID,name_template);
|
||||
}
|
||||
});
|
||||
|
||||
@ -626,8 +577,8 @@ function updateFileInfo(request,img){
|
||||
|
||||
$("#chg_type_select_files").live("change", function() {
|
||||
var new_value=$("option:selected", this).text();
|
||||
Sunstone.runAction("File.chtype", img_info.ID, new_value);
|
||||
Sunstone.runAction("File.showinfo", img_info.ID);
|
||||
Sunstone.runAction("File.chtype", file_info.ID, new_value);
|
||||
Sunstone.runAction("File.showinfo", file_info.ID);
|
||||
});
|
||||
|
||||
|
||||
@ -636,10 +587,10 @@ function updateFileInfo(request,img){
|
||||
|
||||
$("#file_info_panel_refresh", $("#file_info_panel")).click(function(){
|
||||
$(this).html(spinner);
|
||||
Sunstone.runAction('File.showinfo', img_info.ID);
|
||||
Sunstone.runAction('File.showinfo', file_info.ID);
|
||||
})
|
||||
|
||||
setPermissionsTable(img_info,'');
|
||||
setPermissionsTable(file_info,'');
|
||||
|
||||
}
|
||||
|
||||
@ -653,80 +604,33 @@ function enable_all_datastores()
|
||||
|
||||
// Prepare the file creation dialog
|
||||
function setupCreateFileDialog(){
|
||||
dialogs_context.append('<div title="'+tr("Create File")+'" id="create_file_dialog"></div>');
|
||||
dialogs_context.append('<div id="create_file_dialog"></div>');
|
||||
$create_file_dialog = $('#create_file_dialog',dialogs_context);
|
||||
|
||||
var dialog = $create_file_dialog;
|
||||
dialog.html(create_file_tmpl);
|
||||
|
||||
var height = Math.floor($(window).height()*0.8); //set height to a percentage of the window
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
|
||||
dialog.addClass("reveal-modal large max-height");
|
||||
|
||||
$('select#img_type',dialog).change(function(){
|
||||
var value = $(this).val();
|
||||
var context = $create_file_dialog;
|
||||
switch (value){
|
||||
case "DATABLOCK":
|
||||
$('#datablock_img',context).removeAttr("disabled");
|
||||
//$('#empty_datablock', context).show();
|
||||
break;
|
||||
default:
|
||||
$('#datablock_img',context).attr('disabled','disabled');
|
||||
//$('#empty_datablock', context).hide();
|
||||
$('#path_img',context).click();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#img_path,#img_fstype,#img_size,#files_file-uploader',dialog).closest('.row').hide();
|
||||
$('#files_file-uploader',dialog).closest('.row').hide();
|
||||
|
||||
$("input[name='src_path']", dialog).change(function(){
|
||||
var context = $create_file_dialog;
|
||||
var value = $(this).val();
|
||||
switch (value){
|
||||
case "path":
|
||||
$('#img_fstype,#img_size,#files_file-uploader',context).closest('.row').hide();
|
||||
$('#img_path',context).closest('.row').show();
|
||||
break;
|
||||
case "datablock":
|
||||
$('#img_path,#files_file-uploader',context).closest('.row').hide();
|
||||
$('#img_fstype,#img_size',context).closest('.row').show();
|
||||
$('#files_file-uploader',context).closest('.row').hide();
|
||||
$('#file_path',context).closest('.row').show();
|
||||
break;
|
||||
case "upload":
|
||||
$('#img_path,#img_fstype,#img_size',context).closest('.row').hide();
|
||||
$('#file_path',context).closest('.row').hide();
|
||||
$('#files_file-uploader',context).closest('.row').show();
|
||||
break;
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
$('#path_img',dialog).click();
|
||||
|
||||
|
||||
$('#add_custom_var_file_button', dialog).click(
|
||||
function(){
|
||||
var name = $('#custom_var_file_name',$create_file_dialog).val();
|
||||
var value = $('#custom_var_file_value',$create_file_dialog).val();
|
||||
if (!name.length || !value.length) {
|
||||
notifyError(tr("Custom attribute name and value must be filled in"));
|
||||
return false;
|
||||
}
|
||||
option= '<option value=\''+value+'\' name=\''+name+'\'>'+
|
||||
name+'='+value+
|
||||
'</option>';
|
||||
$('select#custom_var_file_box',$create_file_dialog).append(option);
|
||||
return false;
|
||||
}
|
||||
);
|
||||
|
||||
$('#remove_custom_var_file_button', dialog).click(
|
||||
function(){
|
||||
$('select#custom_var_file_box :selected',$create_file_dialog).remove();
|
||||
return false;
|
||||
}
|
||||
);
|
||||
$('#path_file',dialog).click();
|
||||
|
||||
$('#upload-progress',dialog).css({
|
||||
border: "1px solid #AAAAAA",
|
||||
@ -739,7 +643,7 @@ function setupCreateFileDialog(){
|
||||
});
|
||||
$('#upload-progress div',dialog).css("border","1px solid #AAAAAA");
|
||||
|
||||
var img_obj;
|
||||
var file_obj;
|
||||
|
||||
// Upload is handled by FileUploader vendor plugin
|
||||
var uploader = new qq.FileUploaderBasic({
|
||||
@ -756,31 +660,18 @@ function setupCreateFileDialog(){
|
||||
//since the body is the upload, we need the pass
|
||||
//the file info here
|
||||
uploader.setParams({
|
||||
img : JSON.stringify(img_obj),
|
||||
img : JSON.stringify(file_obj),
|
||||
file: fileName
|
||||
});
|
||||
//we pop up an upload progress dialog
|
||||
var pos_top = $(window).height() - 120;
|
||||
var pos_left = 220;
|
||||
//var pb_dialog = $('<div id="pb_dialog" title="'+
|
||||
// tr("Uploading...")+'">'+
|
||||
// '<div id="upload-progress"></div>'+
|
||||
// '</div>').dialog({
|
||||
// draggable:true,
|
||||
// modal:false,
|
||||
// resizable:false,
|
||||
// buttons:{},
|
||||
// width: 460,
|
||||
// minHeight: 50,
|
||||
// position: [pos_left, pos_top]
|
||||
// });
|
||||
|
||||
|
||||
$('#files_upload_progress_bars').append('<div id="files'+id+'progressBar" class="row" style="margin-bottom:10px">\
|
||||
<div class="two columns dataTables_info">\
|
||||
<div class="large-2 columns dataTables_info">\
|
||||
'+tr("Uploading...")+'\
|
||||
</div>\
|
||||
<div class="ten columns">\
|
||||
<div class="large-10 columns">\
|
||||
<div id="upload_progress_container" class="progress nine radius" style="height:25px !important">\
|
||||
<span class="meter" style="width:0%"></span>\
|
||||
</div>\
|
||||
@ -791,8 +682,6 @@ function setupCreateFileDialog(){
|
||||
$('#files'+id+'cancel_upload').click(function(){
|
||||
uploader.cancel();
|
||||
})
|
||||
|
||||
//$('#upload-progress',pb_dialog).progressbar({value:0});
|
||||
},
|
||||
onProgress: function(id, fileName, loaded, total){
|
||||
//update upload dialog with current progress
|
||||
@ -811,9 +700,9 @@ function setupCreateFileDialog(){
|
||||
$('#files'+id+'progressBar').remove();
|
||||
}
|
||||
|
||||
//Inform complete upload, destroy upload dialog, refresh img list
|
||||
//Inform complete upload, destroy upload dialog, refresh file list
|
||||
|
||||
$('div#pb_dialog').trigger("reveal:close")
|
||||
$('div#pb_dialog').trigger('close')
|
||||
return false;
|
||||
},
|
||||
onCancel: function(id, fileName){
|
||||
@ -825,19 +714,8 @@ function setupCreateFileDialog(){
|
||||
file_input = input; return false;
|
||||
};
|
||||
|
||||
|
||||
|
||||
$('#create_file_submit',dialog).click(function(){
|
||||
var exit = false;
|
||||
var upload = false;
|
||||
$('.img_man',this).each(function(){
|
||||
if (!$('input',this).val().length){
|
||||
notifyError(tr("There are mandatory parameters missing"));
|
||||
exit = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (exit) { return false; }
|
||||
|
||||
var ds_id = $('#file_datastore',dialog).val();
|
||||
if (!ds_id){
|
||||
@ -845,50 +723,42 @@ function setupCreateFileDialog(){
|
||||
return false;
|
||||
};
|
||||
|
||||
var img_json = {};
|
||||
var file_json = {};
|
||||
|
||||
var name = $('#img_name',dialog).val();
|
||||
img_json["NAME"] = name;
|
||||
var name = $('#file_name',dialog).val();
|
||||
file_json["NAME"] = name;
|
||||
|
||||
var desc = $('#img_desc',dialog).val();
|
||||
var desc = $('#file_desc',dialog).val();
|
||||
if (desc.length){
|
||||
img_json["DESCRIPTION"] = desc;
|
||||
file_json["DESCRIPTION"] = desc;
|
||||
}
|
||||
|
||||
var type = $('#img_type',dialog).val();
|
||||
img_json["TYPE"]= type;
|
||||
var type = $('#file_type',dialog).val();
|
||||
file_json["TYPE"]= type;
|
||||
|
||||
|
||||
switch ($('#src_path_select input:checked',dialog).val()){
|
||||
case "path":
|
||||
path = $('#img_path',dialog).val();
|
||||
if (path) img_json["PATH"] = path;
|
||||
path = $('#file_path',dialog).val();
|
||||
if (path) file_json["PATH"] = path;
|
||||
break;
|
||||
case "upload":
|
||||
upload=true;
|
||||
break;
|
||||
}
|
||||
|
||||
//Time to add custom attributes
|
||||
$('#custom_var_file_box option',$create_file_dialog).each(function(){
|
||||
var attr_name = $(this).attr('name');
|
||||
var attr_value = $(this).val();
|
||||
img_json[attr_name] = attr_value;
|
||||
});
|
||||
|
||||
img_obj = { "image" : img_json,
|
||||
file_obj = { "image" : file_json,
|
||||
"ds_id" : ds_id};
|
||||
|
||||
|
||||
//we this is an file upload we trigger FileUploader
|
||||
//to start the upload
|
||||
if (upload){
|
||||
uploader._onInputChange(file_input);
|
||||
} else {
|
||||
Sunstone.runAction("File.create", img_obj);
|
||||
Sunstone.runAction("File.create", file_obj);
|
||||
};
|
||||
|
||||
$create_file_dialog.trigger("reveal:close")
|
||||
$create_file_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -901,14 +771,14 @@ function setupCreateFileDialog(){
|
||||
return false;
|
||||
};
|
||||
|
||||
var img_obj = {
|
||||
var file_obj = {
|
||||
"image" : {
|
||||
"image_raw" : template
|
||||
},
|
||||
"ds_id" : ds_id
|
||||
};
|
||||
Sunstone.runAction("File.create",img_obj);
|
||||
$create_file_dialog.trigger("reveal:close")
|
||||
Sunstone.runAction("File.create",file_obj);
|
||||
$create_file_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -929,8 +799,8 @@ function popUpCreateFileDialog(){
|
||||
$('#file_datastore',$create_file_dialog).html(datastores_str);
|
||||
$('#file_datastore_raw',$create_file_dialog).html(datastores_str);
|
||||
|
||||
$create_file_dialog.reveal();
|
||||
$("input#img_name",$create_file_dialog).focus();
|
||||
$create_file_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#file_name",$create_file_dialog).focus();
|
||||
}
|
||||
|
||||
// Set the autorefresh interval for the datatable
|
||||
|
||||
@ -38,349 +38,138 @@ var group_acct_graphs = [
|
||||
}
|
||||
];
|
||||
|
||||
var groups_tab_content = '\
|
||||
<form class="custom" id="group_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-users"></i> '+tr("Groups")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span id="total_groups"/> <small>'+tr("TOTAL")+'</small>\
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="group_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_groups" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Users")+'</th>\
|
||||
<th style="width:18%">'+tr("VMs")+'</th>\
|
||||
<th style="width:18%">'+tr("Memory")+'</th>\
|
||||
<th style="width:18%">'+tr("CPU")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodygroups">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var create_group_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Create Group")+'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 id="create_vnet_header">'+tr("Create Group")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_group_form" action="">\
|
||||
<div class="row centered">\
|
||||
<div class="columns eight centered">\
|
||||
<div class="two columns">\
|
||||
<label class="inline right" for="name">'+tr("Name")+':</label>\
|
||||
</div>\
|
||||
<div class="nine columns">\
|
||||
<input type="text" name="name" id="name" /><br />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Resource Providers")+':</legend>\
|
||||
<dl class="tabs" id="group_zones_tabs">\
|
||||
<dt>' + tr("Zones") +':</dt>\
|
||||
</dl>\
|
||||
<ul class="tabs-content" id="group_zones_tabs_content">\
|
||||
</ul>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<br/>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Resource creation")+':</legend>\
|
||||
<div class="row">\
|
||||
<div class="eleven columns">'
|
||||
+tr("Allow users in this group to create the following resources")+
|
||||
'</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("This will create new ACL Rules to define which virtual resources this group's users will be able to create. You can set different resources for the administrator group, and decide if the administrators will be allowed to create new users.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<table class="datatable twelve extended_table" style="table-layout:fixed">\
|
||||
<thead><tr>\
|
||||
<th/>\
|
||||
<th>'+tr("Virtual Machines")+'</th>\
|
||||
<th>'+tr("Virtual Networks")+'</th>\
|
||||
<th>'+tr("Images")+'</th>\
|
||||
<th>'+tr("Templates")+'</th>\
|
||||
<th>'+tr("Documents")+'</th>\
|
||||
<th>'+tr("Users")+'</th>\
|
||||
</tr></thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
<th>'+tr("Group Users")+'</th>\
|
||||
<td><input type="checkbox" id="group_res_vm" name="group_res_vm" class="resource_cb" value="VM"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_net" name="group_res_net" class="resource_cb" value="NET"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_image" name="group_res_image" class="resource_cb" value="IMAGE"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_template" name="group_res_template" class="resource_cb" value="TEMPLATE"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_document" name="group_res_document" class="resource_cb" value="DOCUMENT"></input></td>\
|
||||
<td/>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<th>'+tr("Admin Group Users")+'</th>\
|
||||
<td><input type="checkbox" id="group_admin_res_vm" name="group_admin_res_vm" class="resource_cb" value="VM"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_net" name="group_admin_res_net" class="resource_cb" value="NET"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_image" name="group_admin_res_image" class="resource_cb" value="IMAGE"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_template" name="group_admin_res_template" class="resource_cb" value="TEMPLATE"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_document" name="group_admin_res_document" class="resource_cb" value="DOCUMENT"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_user" name="group_admin_res_user" class="resource_cb" value="USER"></input></td>\
|
||||
</tr>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<br/>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Administrators")+':</legend>\
|
||||
<div class="row">\
|
||||
<div class="one columns">\
|
||||
<input type="checkbox" id="admin_group" name="admin_group" value="YES" />\
|
||||
</div>\
|
||||
<div class="ten columns">\
|
||||
<label class="inline left" for="admin_group">'+tr("Create an administrator group")+'.</label>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("This admin group will contain users with administrative privileges for the new regular group, not for all the resources in the OpenNebula cloud as the 'oneadmin' group users have.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="admin_group_name">'+tr("Group name")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="admin_group_name" id="admin_group_name" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="one columns">\
|
||||
<input type="checkbox" id="admin_user" name="admin_user" value="YES" />\
|
||||
</div>\
|
||||
<div class="ten columns">\
|
||||
<label class="inline left" for="admin_user">'+tr("Create an administrator user")+'.</label>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("You can create now an administrator user that will be assigned to the new regular group, with the administrator group as a secondary one.")+'</div>\
|
||||
</div>\
|
||||
</div>' +
|
||||
user_creation_div + // from users-tab.js
|
||||
'</fieldset>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_group_submit" value="Group.create">'+tr("Create")+'</button>\
|
||||
<button class="button secondary radius" id="create_group_reset_button" type="reset" value="reset">'+tr("Refresh")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
<div class="columns large-6">\
|
||||
<label for="name">'+tr("Name")+':\
|
||||
<input type="text" name="name" id="name" />\
|
||||
</label>\
|
||||
</div>\
|
||||
<div class="columns large-6">\
|
||||
<dl class="tabs right-info-tabs text-center" data-tab>\
|
||||
<dd class="active"><a href="#resource_providers"><i class="fa fa-cloud"></i><br>'+tr("Resources")+'</a></dd>\
|
||||
<dd><a href="#administrators"><i class="fa fa-upload"></i><br>'+tr("Admin")+'</a></dd>\
|
||||
<dd><a href="#resource_creation"><i class="fa fa-folder-open"></i><br>'+tr("Permissions")+'</a></dd>\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>\
|
||||
</div>';
|
||||
|
||||
var group_quotas_tmpl = '<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Update Quota")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="group_quotas_form" action="">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div id="quota_types">\
|
||||
<label>'+tr("Quota type")+':</label>\
|
||||
<input type="radio" name="quota_type" value="vm">'+tr("Virtual Machine")+'</input>\
|
||||
<input type="radio" name="quota_type" value="datastore">'+tr("Datastore")+'</input>\
|
||||
<input type="radio" name="quota_type" value="image">'+tr("Image")+'</input>\
|
||||
<input type="radio" name="quota_type" value="network">'+tr("Network")+'</input>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div id="vm_quota">\
|
||||
<div class="tabs-content">\
|
||||
<div id="resource_providers" class="row content active">\
|
||||
<div class="large-12 columns">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max VMs")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="VMS"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<h5>' + tr("Zones") +'</h5>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max Memory (MB)")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="MEMORY"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<dl class="tabs" id="group_zones_tabs" data-tab>\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max CPU")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="CPU"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max Volatile Storage (MB)")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="VOLATILE_SIZE"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
<div class="tabs-content group_zones_tabs_content">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="datastore_quota">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Datastore")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="ID"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max size (MB)")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="SIZE"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max images")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="IMAGES"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="image_quota">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Image")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="ID"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max RVMs")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="RVMS"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="network_quota">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Network")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="ID"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max leases")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="LEASES"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<button class="button right small radius" id="add_quota_button" value="add_quota">'+tr("Add/edit quota")+'</button>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="current_quotas">\
|
||||
<table class="datatable twelve extended_table">\
|
||||
<thead><tr>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Quota")+'</th>\
|
||||
<th>'+tr("Edit")+'</th></tr></thead>\
|
||||
<tbody>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<div id="administrators" class="row content">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<input type="checkbox" id="admin_group" name="admin_group" value="YES" />\
|
||||
<label for="admin_group">'+tr("Create an administrator group")+'\
|
||||
<span class="tip">'+tr("This admin group will contain users with administrative privileges for the new regular group, not for all the resources in the OpenNebula cloud as the 'oneadmin' group users have.")+'</span>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="admin_group_name">'+tr("Group name")+'</label>\
|
||||
<input type="text" name="admin_group_name" id="admin_group_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<input type="checkbox" id="admin_user" name="admin_user" value="YES" />\
|
||||
<label for="admin_user">'+tr("Create an administrator user")+'\
|
||||
<span class="tip">'+tr("You can create now an administrator user that will be assigned to the new regular group, with the administrator group as a secondary one.")+'</span>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>' +
|
||||
user_creation_div + // from users-tab.js
|
||||
'</div>\
|
||||
</div>\
|
||||
<div id="resource_creation" class="content">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<p class="subheader">'
|
||||
+tr("Allow users in this group to create the following resources")+
|
||||
' <span class="tip">'+tr("This will create new ACL Rules to define which virtual resources this group's users will be able to create. You can set different resources for the administrator group, and decide if the administrators will be allowed to create new users.")+'</span>\
|
||||
</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<table class="dataTable" style="table-layout:fixed">\
|
||||
<thead><tr>\
|
||||
<th/>\
|
||||
<th>'+tr("VMs")+'</th>\
|
||||
<th>'+tr("VNets")+'</th>\
|
||||
<th>'+tr("Images")+'</th>\
|
||||
<th>'+tr("Templates")+'</th>\
|
||||
<th>'+tr("Documents")+'</th>\
|
||||
<th>'+tr("Users")+'</th>\
|
||||
</tr></thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
<th>'+tr("Users")+'</th>\
|
||||
<td><input type="checkbox" id="group_res_vm" name="group_res_vm" class="resource_cb" value="VM"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_net" name="group_res_net" class="resource_cb" value="NET"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_image" name="group_res_image" class="resource_cb" value="IMAGE"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_template" name="group_res_template" class="resource_cb" value="TEMPLATE"></input></td>\
|
||||
<td><input type="checkbox" id="group_res_document" name="group_res_document" class="resource_cb" value="DOCUMENT"></input></td>\
|
||||
<td/>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<th>'+tr("Admins")+'</th>\
|
||||
<td><input type="checkbox" id="group_admin_res_vm" name="group_admin_res_vm" class="resource_cb" value="VM"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_net" name="group_admin_res_net" class="resource_cb" value="NET"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_image" name="group_admin_res_image" class="resource_cb" value="IMAGE"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_template" name="group_admin_res_template" class="resource_cb" value="TEMPLATE"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_document" name="group_admin_res_document" class="resource_cb" value="DOCUMENT"></input></td>\
|
||||
<td><input type="checkbox" id="group_admin_res_user" name="group_admin_res_user" class="resource_cb" value="USER"></input></td>\
|
||||
</tr>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_group_submit" value="Group.create">'+tr("Create")+'</button>\
|
||||
<button class="button secondary radius" id="create_group_reset_button" type="reset" value="reset">'+tr("Refresh")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>\
|
||||
</div>';
|
||||
|
||||
var group_quotas_tmpl = '<div class="row" class="subheader">\
|
||||
<h3 id="create_vnet_header">'+tr("Update Quota")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="group_quotas_form" action="">'+
|
||||
quotas_tmpl +
|
||||
'<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_user_submit" type="submit" value="Group.set_quota">'+tr("Apply changes")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
@ -439,8 +228,13 @@ var group_actions = {
|
||||
"Group.refresh" : {
|
||||
type: "custom",
|
||||
call: function() {
|
||||
var tab = dataTable_groups.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Group.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_groups);
|
||||
Sunstone.runAction("Group.list");
|
||||
}
|
||||
},
|
||||
error: onError
|
||||
},
|
||||
@ -453,7 +247,7 @@ var group_actions = {
|
||||
Sunstone.runAction('Group.showinfo',request.request.data[0][0]);
|
||||
},
|
||||
error: onError
|
||||
},
|
||||
},
|
||||
|
||||
"Group.delete" : {
|
||||
type: "multiple",
|
||||
@ -584,8 +378,8 @@ var group_buttons = {
|
||||
},
|
||||
"Group.quotas_dialog" : {
|
||||
type : "action",
|
||||
text : tr("Update quotas"),
|
||||
layout: "more_select",
|
||||
text : tr("Quotas"),
|
||||
layout: "main",
|
||||
condition: mustBeAdmin
|
||||
},
|
||||
"Group.delete" : {
|
||||
@ -602,25 +396,35 @@ var group_info_panel = {
|
||||
|
||||
var groups_tab = {
|
||||
title: tr("Groups"),
|
||||
content: groups_tab_content,
|
||||
buttons: group_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'system-tab',
|
||||
condition: mustBeAdmin
|
||||
search_input: '<input id="group_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-users"></i> '+tr("Groups"),
|
||||
info_header: '<i class="fa fa-users"></i> '+tr("Group"),
|
||||
subheader: '<span>\
|
||||
<span class="total_groups"/> <small>'+tr("TOTAL")+'</small>\
|
||||
</span>',
|
||||
table: '<table id="datatable_groups" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Users")+'</th>\
|
||||
<th style="width:18%">'+tr("VMs")+'</th>\
|
||||
<th style="width:18%">'+tr("Memory")+'</th>\
|
||||
<th style="width:18%">'+tr("CPU")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodygroups">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
};
|
||||
|
||||
var groups_tab_non_admin = {
|
||||
title: tr("Group info"),
|
||||
content: groups_tab_content,
|
||||
buttons: group_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'dashboard_tab',
|
||||
condition: mustNotBeAdmin
|
||||
}
|
||||
|
||||
Sunstone.addActions(group_actions);
|
||||
Sunstone.addMainTab('groups-tab',groups_tab);
|
||||
Sunstone.addMainTab('groups_tab_non_admin',groups_tab_non_admin);
|
||||
Sunstone.addInfoPanel("group_info_panel",group_info_panel);
|
||||
|
||||
function groupElements(){
|
||||
@ -714,11 +518,7 @@ function updateGroupsView(request, group_list, quotas_hash){
|
||||
updateGroupSelect(group_list);
|
||||
|
||||
// Dashboard info
|
||||
$("#total_groups", $dashboard).text(group_list.length);
|
||||
|
||||
var form = $("#group_form");
|
||||
|
||||
$("#total_groups", form).text(group_list.length);
|
||||
$(".total_groups").text(group_list.length);
|
||||
}
|
||||
|
||||
function fromJSONtoProvidersTable(group_info){
|
||||
@ -740,7 +540,7 @@ function fromJSONtoProvidersTable(group_info){
|
||||
<td>' + cluster_id + '</td>\
|
||||
<td>\
|
||||
<div id="div_minus_rp">\
|
||||
<a id="div_minus_rp_a_'+provider.ZONE_ID+'" class="cluster_id_'+cluster_id+' group_id_'+group_info.ID+'" href="#"><i class="icon-trash"/></a>\
|
||||
<a id="div_minus_rp_a_'+provider.ZONE_ID+'" class="cluster_id_'+cluster_id+' group_id_'+group_info.ID+'" href="#"><i class="fa fa-trash-o"/></a>\
|
||||
</div>\
|
||||
</td>\
|
||||
</tr>';
|
||||
@ -785,13 +585,14 @@ function updateGroupInfo(request,group){
|
||||
var info = group.GROUP;
|
||||
|
||||
var info_tab = {
|
||||
title: tr("Information"),
|
||||
title: tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content:
|
||||
'<form class="custom"><div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_img_table" class="twelve datatable extended_table">\
|
||||
'<div class="">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_img_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">'+tr("Group")+' - '+info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">'+tr("Information")+'</th></tr>\
|
||||
</thead>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("ID")+'</td>\
|
||||
@ -805,45 +606,49 @@ function updateGroupInfo(request,group){
|
||||
</tr>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_extended_template_table(info.TEMPLATE,
|
||||
"Group",
|
||||
info.ID,
|
||||
"Configuration & Tags") +
|
||||
'</div>\
|
||||
</div></form>'
|
||||
</div>'
|
||||
}
|
||||
|
||||
var default_group_quotas = Quotas.default_quotas(info.DEFAULT_GROUP_QUOTAS);
|
||||
var quotas_tab_html = '<div class="three columns">' + Quotas.vms(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="three columns">' + Quotas.cpu(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="three columns">' + Quotas.memory(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="three columns">' + Quotas.volatile_size(info, default_group_quotas) + '</div>';
|
||||
var quotas_tab_html = '<div class="large-3 columns">' + Quotas.vms(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-3 columns">' + Quotas.cpu(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-3 columns">' + Quotas.memory(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-3 columns">' + Quotas.volatile_size(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<br><br>';
|
||||
quotas_tab_html += '<div class="six columns">' + Quotas.image(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="six columns">' + Quotas.network(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-6 columns">' + Quotas.image(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-6 columns">' + Quotas.network(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<br><br>';
|
||||
quotas_tab_html += '<div class="twelve columns">' + Quotas.datastore(info, default_group_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-12 columns">' + Quotas.datastore(info, default_group_quotas) + '</div>';
|
||||
|
||||
var quotas_tab = {
|
||||
title : tr("Quotas"),
|
||||
icon: "fa-align-left",
|
||||
content : quotas_tab_html
|
||||
};
|
||||
|
||||
|
||||
var providers_tab = {
|
||||
title : tr("Resource Providers"),
|
||||
title : tr("Providers"),
|
||||
icon: "fa-th",
|
||||
content :
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<button id="add_rp_button" class="button small secondary radius" >' + tr("Add Resource Provider") +'</button>\
|
||||
<br><br>\
|
||||
<table id="info_user_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_user_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th>' + tr("Zone ID") + '</th>\
|
||||
<th>' + tr("Cluster ID") + '</th>\
|
||||
<th></th>\
|
||||
<th class="text-right">\
|
||||
<button id="add_rp_button" class="button tiny success radius" >\
|
||||
<i class="fa fa-plus-circle"></i>\
|
||||
</button>\
|
||||
</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>' +
|
||||
@ -868,8 +673,8 @@ function updateGroupInfo(request,group){
|
||||
|
||||
$("#add_rp_button", $("#group_info_panel")).click(function(){
|
||||
setup_add_rp_dialog(info);
|
||||
$('#add_rp_dialog',dialogs_context).addClass("reveal-modal large max-height");
|
||||
$('#add_rp_dialog',dialogs_context).reveal();
|
||||
$('#add_rp_dialog',dialogs_context).addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
$('#add_rp_dialog',dialogs_context).foundation().foundation('reveal', 'open');
|
||||
|
||||
return false;
|
||||
})
|
||||
@ -882,30 +687,21 @@ function setup_add_rp_dialog(group){
|
||||
var dialog = $('#add_rp_dialog',dialogs_context);
|
||||
|
||||
dialog.html(
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'
|
||||
+tr("Select Resource Providers")+
|
||||
'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 id="create_vnet_header" class="subheader">'+tr("Select Resource Providers")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Resource Providers")+':</legend>\
|
||||
<dl class="tabs" id="group_zones_tabs">\
|
||||
<dt>' + tr("Zones") +':</dt>\
|
||||
<h5>' + tr("Zones") +'</h5>\
|
||||
<dl class="tabs" id="group_zones_tabs" data-tab>\
|
||||
</dl>\
|
||||
<ul class="tabs-content" id="group_zones_tabs_content">\
|
||||
</ul>\
|
||||
</fieldset>\
|
||||
<div class="tabs-content group_zones_tabs_content">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="add_rp_submit">'+tr("Add")+'</button>\
|
||||
<button class="button secondary radius" id="add_rp_reset_button" type="reset" value="reset">'+tr("Refresh")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" id="add_rp_close" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>');
|
||||
@ -985,8 +781,8 @@ function setup_add_rp_dialog(group){
|
||||
}
|
||||
});
|
||||
|
||||
dialog.trigger('reveal:close');
|
||||
dialog.remove();
|
||||
dialog.trigger('close');
|
||||
dialog.html("");
|
||||
|
||||
});
|
||||
|
||||
@ -994,14 +790,14 @@ function setup_add_rp_dialog(group){
|
||||
$("#add_rp_reset_button", dialog).live("click", function(){
|
||||
$('#add_rp_dialog',dialog).remove();
|
||||
setup_add_rp_dialog(group);
|
||||
$('#add_rp_dialog').addClass("reveal-modal large max-height");
|
||||
$('#add_rp_dialog').reveal();
|
||||
$('#add_rp_dialog').addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
$('#add_rp_dialog').foundation().foundation('reveal', 'open');
|
||||
});
|
||||
|
||||
$('#add_rp_close',dialog).die();
|
||||
$('#add_rp_close',dialog).live( "click", function() {
|
||||
dialog.trigger('reveal:close');
|
||||
dialog.remove();
|
||||
dialog.trigger('close');
|
||||
dialog.html("");
|
||||
});
|
||||
|
||||
OpenNebula.Zone.list({
|
||||
@ -1074,8 +870,8 @@ function setup_group_resource_tab_content(zone_id, zone_section, str_zone_tab_id
|
||||
selected_group_clusters[zone_id][cluster_id] = 1;
|
||||
group_clusters_row_hash[zone_id][cluster_id] = this;
|
||||
$(this).children().each(function(){$(this).addClass('markrowchecked');});
|
||||
if ($('#tag_cluster_'+aData[1], $('div#selected_group_clusters', zone_section)).length == 0 ) {
|
||||
$('div#selected_group_clusters', zone_section).append('<span id="tag_cluster_'+aData[1]+'" class="radius label">'+aData[2]+' <span class="icon-remove blue"></span></span> ');
|
||||
if ($('#tag_cluster_'+aData[1], $('.selected_group_clusters', zone_section)).length == 0 ) {
|
||||
$('.selected_group_clusters', zone_section).append('<span id="tag_cluster_'+aData[1]+'" class="radius label">'+aData[2]+' <span class="fa fa-times blue"></span></span> ');
|
||||
}
|
||||
}
|
||||
else
|
||||
@ -1083,7 +879,7 @@ function setup_group_resource_tab_content(zone_id, zone_section, str_zone_tab_id
|
||||
$('input.check_item', this).removeAttr('checked');
|
||||
delete selected_group_clusters[zone_id][cluster_id];
|
||||
$(this).children().each(function(){$(this).removeClass('markrowchecked');});
|
||||
$('div#selected_group_clusters span#tag_cluster_'+cluster_id, zone_section).remove();
|
||||
$('.selected_group_clusters span#tag_cluster_'+cluster_id, zone_section).remove();
|
||||
}
|
||||
|
||||
if ($.isEmptyObject(selected_group_clusters[zone_id])) {
|
||||
@ -1096,7 +892,8 @@ function setup_group_resource_tab_content(zone_id, zone_section, str_zone_tab_id
|
||||
return true;
|
||||
});
|
||||
|
||||
$( "#selected_group_clusters span.icon-remove", zone_section ).live( "click", function() {
|
||||
// TODOO clicking "x" does not remove the cluster
|
||||
$( ".fa-times", zone_section ).live( "click", function() {
|
||||
$(this).parent().remove();
|
||||
var id = $(this).parent().attr("ID");
|
||||
|
||||
@ -1117,50 +914,51 @@ function setup_group_resource_tab_content(zone_id, zone_section, str_zone_tab_id
|
||||
function generate_group_resource_tab_content(str_zone_tab_id, str_datatable_id, zone_id, group){
|
||||
var html =
|
||||
'<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="resources">' + tr("Assign physical resources") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns" style="text-align:center">\
|
||||
<input type="radio" name="'+str_zone_tab_id+'" id="'+str_zone_tab_id+'resources_all" value="all">'+ tr("All")+' </input> \
|
||||
<input type="radio" name="'+str_zone_tab_id+'" id="'+str_zone_tab_id+'resources_cluster" value="cluster"> '+tr("Select clusters")+'</input>  \
|
||||
<input type="radio" name="'+str_zone_tab_id+'" id="'+str_zone_tab_id+'resources_none" value="none"> '+tr("None")+'</input>  \
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("For each OpenNebula Zone, you can assign cluster resources (set of physical hosts, datastores and virtual networks) to this group.")+'</div>\
|
||||
<div class="large-12 columns">\
|
||||
<p class="subheader">' + tr("Assign physical resources") + '\
|
||||
 <span class="tip">'+tr("For each OpenNebula Zone, you can assign cluster resources (set of physical hosts, datastores and virtual networks) to this group.")+'</span>\
|
||||
</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered">\
|
||||
<div id="req_type" class="group_cluster_select hidden">\
|
||||
<div class="row collapse ">\
|
||||
<div class="seven columns">\
|
||||
<button id="refresh_group_clusters_table_button_class'+str_zone_tab_id+'" type="button" class="refresh button small radius secondary"><i class="icon-refresh" /></button>\
|
||||
<div class="large-12 columns">\
|
||||
<input type="radio" name="'+str_zone_tab_id+'" id="'+str_zone_tab_id+'resources_all" value="all"><label for="'+str_zone_tab_id+'resources_all">'+tr("All")+'</label>\
|
||||
<input type="radio" name="'+str_zone_tab_id+'" id="'+str_zone_tab_id+'resources_cluster" value="cluster"><label for="'+str_zone_tab_id+'resources_cluster">'+tr("Select clusters")+'</label>\
|
||||
<input type="radio" name="'+str_zone_tab_id+'" id="'+str_zone_tab_id+'resources_none" value="none"><label for="'+str_zone_tab_id+'resources_none">'+tr("None")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<div id="req_type" class="group_cluster_select hidden">\
|
||||
<div class="row collapse ">\
|
||||
<div class="large-9 columns">\
|
||||
<button id="refresh_group_clusters_table_button_class'+str_zone_tab_id+'" type="button" class="refresh button small radius secondary"><i class="fa fa-refresh" /></button>\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<input id="'+str_zone_tab_id+'_search" class="search" type="text" placeholder="'+tr("Search")+'"/>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input id="'+str_zone_tab_id+'_search" type="text" placeholder="'+tr("Search")+'"/>\
|
||||
<table id="'+str_datatable_id+'" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Hosts") + '</th>\
|
||||
<th>' + tr("VNets") + '</th>\
|
||||
<th>' + tr("Datastores") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyclusters">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<br>\
|
||||
<div class="selected_group_clusters">\
|
||||
<span id="select_group_clusters'+str_zone_tab_id+'" class="radius secondary label">'+tr("Please select one or more clusters from the list")+'</span> \
|
||||
<span id="you_selected_group_clusters'+str_zone_tab_id+'" class="radius secondary label hidden">'+tr("You selected the following clusters:")+'</span> \
|
||||
</div>\
|
||||
</div>\
|
||||
<table id="'+str_datatable_id+'" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Hosts") + '</th>\
|
||||
<th>' + tr("VNets") + '</th>\
|
||||
<th>' + tr("Datastores") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyclusters">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<br>\
|
||||
<div id="selected_group_clusters">\
|
||||
<span id="select_group_clusters'+str_zone_tab_id+'" class="radius secondary label">'+tr("Please select one or more clusters from the list")+'</span> \
|
||||
<span id="you_selected_group_clusters'+str_zone_tab_id+'" class="radius secondary label hidden">'+tr("You selected the following clusters:")+'</span> \
|
||||
</div>\
|
||||
<br>\
|
||||
</div\
|
||||
<br>\
|
||||
</div\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
@ -1236,18 +1034,20 @@ var add_resource_tab = function(zone_id, zone_name, dialog, id_suffix, group) {
|
||||
group_clusters_row_hash[zone_id] = {};
|
||||
|
||||
// Append the new div containing the tab and add the tab to the list
|
||||
var html_tab_content = '<li id="'+str_zone_tab_id+'Tab" style="display: block;">'+
|
||||
var html_tab_content = '<div id="'+str_zone_tab_id+'Tab" class="content" style="display: block;">'+
|
||||
generate_group_resource_tab_content(str_zone_tab_id, str_datatable_id, zone_id, group) +
|
||||
'</li>'
|
||||
$(html_tab_content).appendTo($("ul#group_zones_tabs_content", dialog));
|
||||
'</div>'
|
||||
$(html_tab_content).appendTo($(".group_zones_tabs_content", dialog));
|
||||
|
||||
var a = $("<dd>\
|
||||
<a id='zone_tab"+str_zone_tab_id+"' href='#"+str_zone_tab_id+"'>"+zone_name+"</a>\
|
||||
<a id='zone_tab"+str_zone_tab_id+"' href='#"+str_zone_tab_id+"Tab'>"+zone_name+"</a>\
|
||||
</dd>").appendTo($("dl#group_zones_tabs", dialog));
|
||||
|
||||
$(document).foundationTabs("set_tab", a);
|
||||
// TODOO
|
||||
//$(document).foundationTabs("set_tab", a);
|
||||
$('a', a).click();
|
||||
|
||||
var zone_section = $('li#' +str_zone_tab_id+'Tab', dialog);
|
||||
var zone_section = $('#' +str_zone_tab_id+'Tab', dialog);
|
||||
setup_group_resource_tab_content(zone_id, zone_section, str_zone_tab_id, str_datatable_id, id_suffix, group);
|
||||
};
|
||||
|
||||
@ -1272,13 +1072,14 @@ function setupCreateGroupDialog(){
|
||||
var dialog = $create_group_dialog;
|
||||
|
||||
dialog.html(create_group_tmpl);
|
||||
dialog.addClass("reveal-modal large max-height");
|
||||
dialog.addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
$(document).foundation();
|
||||
|
||||
setupTips($create_group_dialog);
|
||||
|
||||
$('#create_group_reset_button').click(function(){
|
||||
$create_group_dialog.trigger('reveal:close');
|
||||
$create_group_dialog.remove();
|
||||
$create_group_dialog.trigger('close');
|
||||
$create_group_dialog.html("");
|
||||
setupCreateGroupDialog();
|
||||
|
||||
popUpCreateGroupDialog();
|
||||
@ -1440,13 +1241,13 @@ function setupCreateGroupDialog(){
|
||||
|
||||
|
||||
Sunstone.runAction("Group.create",group_json);
|
||||
$create_group_dialog.trigger("reveal:close");
|
||||
$create_group_dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function popUpCreateGroupDialog(){
|
||||
$create_group_dialog.reveal();
|
||||
$create_group_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#name",$create_group_dialog).focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -18,90 +18,23 @@
|
||||
/* HOST_HISTORY_LENGTH is ignored by server */
|
||||
var HOST_HISTORY_LENGTH = 40;
|
||||
|
||||
var hosts_tab_content = '\
|
||||
<form class="custom" id="form_hosts" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-hdd-o "></i> '+tr("Hosts")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span id="total_hosts"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span id="on_hosts"/> <small>'+tr("ON")+'</small> \
|
||||
<span id="off_hosts"/> <small>'+tr("OFF")+'</small> \
|
||||
<span id="error_hosts"/> <small>'+tr("ERROR")+'</small>\
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="hosts_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_hosts" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Cluster") + '</th>\
|
||||
<th>' + tr("RVMs") + '</th>\
|
||||
<th>' + tr("Real CPU") + '</th>\
|
||||
<th>' + tr("Allocated CPU") + '</th>\
|
||||
<th>' + tr("Real MEM") + '</th>\
|
||||
<th>' + tr("Allocated MEM") + '</th>\
|
||||
<th>' + tr("Status") + '</th>\
|
||||
<th>' + tr("IM MAD") + '</th>\
|
||||
<th>' + tr("VM MAD") + '</th>\
|
||||
<th>' + tr("Last monitored on") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyhosts">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var create_host_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3 >\
|
||||
<small id="create_cluster_header">'+tr("Create Host")+'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 id="create_cluster_header" class="subheader">'+tr("Create Host")+'</h3>\
|
||||
</div>\
|
||||
<form id="create_host_form" action="" class="">\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_host_form" action="" class="">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="name">' + tr("Hostname") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="name">' + tr("Hostname") + '</label>\
|
||||
<input type="text" name="name" id="name" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Drivers")+'</legend>\
|
||||
<div class="manager clear row" id="vmm_mads">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="vmm">' + tr("Virtualization") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="vmm">' + tr("Virtualization") + '</label>\
|
||||
<select id="vmm_mad" name="vmm">\
|
||||
<option value="kvm">' + tr("KVM") + '</option>\
|
||||
<option value="xen">' + tr("XEN") + '</option>\
|
||||
@ -110,19 +43,15 @@ var create_host_tmpl =
|
||||
<option value="dummy">' + tr("Dummy") + '</option>\
|
||||
<option value="custom">' + tr("Custom") + '</option>\
|
||||
</select>\
|
||||
<div>\
|
||||
<label>' + tr("Custom VMM_MAD") + ':</label>\
|
||||
<input type="text" name="custom_vmm_mad" /></div>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip"></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>' + tr("Custom VMM_MAD") + '</label>\
|
||||
<input type="text" name="custom_vmm_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="manager clear row" id="im_mads">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="im">' + tr("Information") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="im">' + tr("Information") + '</label>\
|
||||
<select id="im_mad" name="im">\
|
||||
<option value="kvm">' + tr("KVM") + '</option>\
|
||||
<option value="xen">' + tr("XEN") + '</option>\
|
||||
@ -131,20 +60,15 @@ var create_host_tmpl =
|
||||
<option value="dummy">' + tr("Dummy") + '</option>\
|
||||
<option value="custom">' + tr("Custom") + '</option>\
|
||||
</select>\
|
||||
<div>\
|
||||
<label>' + tr("Custom IM_MAD") + ':</label>\
|
||||
<input type="text" name="custom_im_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip"></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>' + tr("Custom IM_MAD") + ':</label>\
|
||||
<input type="text" name="custom_im_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="manager clear row" id="vnm_mads">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="vn">' + tr("Virtual Network") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="vn">' + tr("Networking") + '</label>\
|
||||
<select id="vnm_mad" name="vn">\
|
||||
<option value="dummy">' + tr("Default (dummy)") +'</option>\
|
||||
<option value="fw">'+tr("Firewall")+'</option>\
|
||||
@ -154,40 +78,29 @@ var create_host_tmpl =
|
||||
<option value="vmware">'+tr("VMware")+'</option>\
|
||||
<option value="custom">' + tr("Custom") + '</option>\
|
||||
</select>\
|
||||
<div>\
|
||||
<label>' + tr("Custom VNM_MAD") + ':</label>\
|
||||
<input type="text" name="custom_vnm_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip"></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>' + tr("Custom VNM_MAD") + '</label>\
|
||||
<input type="text" name="custom_vnm_mad" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</fieldset>\
|
||||
<div class="manager clear row" id="cluster_select">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="host_cluster_id">' + tr("Cluster") + '</label>\
|
||||
<select id="host_cluster_id" name="host_cluster_id">\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="manager clear row" id="cluster_select">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="host_cluster_id">' + tr("Cluster") + ':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select id="host_cluster_id" name="host_cluster_id">\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons row">\
|
||||
<button class="button success right radius" type="submit" id="create_host_submit" value="OpenNebula.Host.create">' + tr("Create") + '</button>\
|
||||
<button id="wizard_host_reset_button" class="button secondary radius" type="reset" value="reset">' + tr("Reset") + '</button>\
|
||||
<button class="close-reveal-modal button secondary radius" action="" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons row">\
|
||||
<button class="button success right radius" type="submit" id="create_host_submit" value="OpenNebula.Host.create">' + tr("Create") + '</button>\
|
||||
<button id="wizard_host_reset_button" class="button secondary radius" type="reset" value="reset">' + tr("Reset") + '</button>\
|
||||
</div>\
|
||||
</form>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>';
|
||||
|
||||
var hosts_select="";
|
||||
var dataTable_hosts;
|
||||
@ -235,8 +148,13 @@ var host_actions = {
|
||||
"Host.refresh" : {
|
||||
type: "custom",
|
||||
call: function(){
|
||||
var tab = dataTable_hosts.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Host.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_hosts);
|
||||
Sunstone.runAction("Host.list");
|
||||
}
|
||||
},
|
||||
error: onError
|
||||
},
|
||||
@ -309,41 +227,6 @@ var host_actions = {
|
||||
},
|
||||
error: hostMonitorError
|
||||
},
|
||||
/*
|
||||
"Host.pool_monitor" : {
|
||||
type: "monitor_global",
|
||||
call : OpenNebula.Host.pool_monitor,
|
||||
callback: function(req,response) {
|
||||
var host_dashboard_graphs = [
|
||||
{
|
||||
monitor_resources : "HOST_SHARE/CPU_USAGE,HOST_SHARE/USED_CPU,HOST_SHARE/MAX_CPU",
|
||||
labels : tr("Allocated")+","+tr("Real")+","+tr("Total"),
|
||||
humanize_figures : false,
|
||||
div_graph : $("#dash_host_cpu_graph", $dashboard)
|
||||
//div_legend : $("#dash_host_cpu_legend", $dashboard)
|
||||
},
|
||||
{
|
||||
monitor_resources : "HOST_SHARE/MEM_USAGE,HOST_SHARE/USED_MEM,HOST_SHARE/MAX_MEM",
|
||||
labels : tr("Allocated")+","+tr("Real")+","+tr("Total"),
|
||||
humanize_figures : true,
|
||||
div_graph : $("#dash_host_mem_graph", $dashboard)
|
||||
}
|
||||
];
|
||||
|
||||
for(var i=0; i<host_dashboard_graphs.length; i++) {
|
||||
plot_totals(
|
||||
response,
|
||||
host_dashboard_graphs[i]
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: refresh individual info panel graphs with this new data?
|
||||
},
|
||||
|
||||
// TODO: ignore error, or set message similar to hostMonitorError?
|
||||
error: onError
|
||||
},
|
||||
*/
|
||||
"Host.update_template" : {
|
||||
type: "single",
|
||||
call: OpenNebula.Host.update,
|
||||
@ -460,11 +343,37 @@ var host_info_panel = {
|
||||
|
||||
var hosts_tab = {
|
||||
title: tr("Hosts"),
|
||||
content: hosts_tab_content,
|
||||
buttons: host_buttons,
|
||||
tabClass: "subTab",
|
||||
parentTab: "infra-tab",
|
||||
showOnTopMenu: false
|
||||
search_input: '<input id="hosts_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-hdd-o "></i> '+tr("Hosts"),
|
||||
info_header: '<i class="fa fa-hdd-o "></i> '+tr("Host"),
|
||||
subheader: '<span class="total_hosts"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span class="on_hosts"/> <small>'+tr("ON")+'</small> \
|
||||
<span class="off_hosts"/> <small>'+tr("OFF")+'</small> \
|
||||
<span class="error_hosts"/> <small>'+tr("ERROR")+'</small>',
|
||||
table: '<table id="datatable_hosts" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Cluster") + '</th>\
|
||||
<th>' + tr("RVMs") + '</th>\
|
||||
<th>' + tr("Real CPU") + '</th>\
|
||||
<th>' + tr("Allocated CPU") + '</th>\
|
||||
<th>' + tr("Real MEM") + '</th>\
|
||||
<th>' + tr("Allocated MEM") + '</th>\
|
||||
<th>' + tr("Status") + '</th>\
|
||||
<th>' + tr("IM MAD") + '</th>\
|
||||
<th>' + tr("VM MAD") + '</th>\
|
||||
<th>' + tr("Last monitored on") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyhosts">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
};
|
||||
|
||||
Sunstone.addActions(host_actions);
|
||||
@ -675,17 +584,10 @@ function updateHostsView (request,host_list){
|
||||
updateView(host_list_array,dataTable_hosts);
|
||||
updateHostSelect();
|
||||
|
||||
$("#total_hosts", $dashboard).text(host_list.length);
|
||||
$("#on_hosts", $dashboard).text(on_hosts);
|
||||
$("#off_hosts", $dashboard).text(off_hosts);
|
||||
$("#error_hosts", $dashboard).text(error_hosts);
|
||||
|
||||
var form_hosts = $("#form_hosts");
|
||||
|
||||
$("#total_hosts", form_hosts).text(host_list.length);
|
||||
$("#on_hosts", form_hosts).text(on_hosts);
|
||||
$("#off_hosts", form_hosts).text(off_hosts);
|
||||
$("#error_hosts", form_hosts).text(error_hosts);
|
||||
$(".total_hosts").text(host_list.length);
|
||||
$(".on_hosts").text(on_hosts);
|
||||
$(".off_hosts").text(off_hosts);
|
||||
$(".error_hosts").text(error_hosts);
|
||||
|
||||
if (do_host_monitoring_graphs){
|
||||
var host_dashboard_graphs = [
|
||||
@ -734,7 +636,7 @@ function insert_datastores_capacity_table(host_share) {
|
||||
var str = "";
|
||||
|
||||
if (datastores.length) {
|
||||
str += '<table id="info_host_datastore_table" class="twelve datatable extended_table">\
|
||||
str += '<table id="info_host_datastore_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th>' + tr("Datastore ID") + '</th>\
|
||||
@ -766,13 +668,14 @@ function updateHostInfo(request,host){
|
||||
|
||||
//Information tab
|
||||
var info_tab = {
|
||||
title : tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content :
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_host_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_host_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">' + tr("Host") + ' - '+host_info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">' + tr("Information") + '</th></tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
@ -837,10 +740,10 @@ function updateHostInfo(request,host){
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_datastores_capacity_table(host_info.HOST_SHARE) +
|
||||
'</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_extended_template_table(host_info.TEMPLATE,
|
||||
"Host",
|
||||
host_info.ID,
|
||||
@ -852,31 +755,32 @@ function updateHostInfo(request,host){
|
||||
|
||||
var monitor_tab = {
|
||||
title: tr("Graphs"),
|
||||
icon: "fa-bar-chart-o",
|
||||
content:
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row graph_legend">\
|
||||
<h3 class="subheader"><small>'+tr("CPU")+'</small></h3>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered graph" id="host_cpu_graph" style="height: 100px;">\
|
||||
<div class="large-10 columns centered graph" id="host_cpu_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend">\
|
||||
<div class="ten columns centered" id="host_cpu_legend">\
|
||||
<div class="large-10 columns centered" id="host_cpu_legend">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row graph_legend">\
|
||||
<h3 class="subheader"><small>'+tr("MEMORY")+'</small></h3>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns centered graph" id="host_mem_graph" style="height: 100px;">\
|
||||
<div class="large-10 columns centered graph" id="host_mem_graph" style="height: 100px;">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row graph_legend">\
|
||||
<div class="ten columns centered" id="host_mem_legend">\
|
||||
<div class="large-10 columns centered" id="host_mem_legend">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
@ -923,13 +827,13 @@ function updateHostInfo(request,host){
|
||||
|
||||
//Prepares the host creation dialog
|
||||
function setupCreateHostDialog(){
|
||||
dialogs_context.append('<div title=\"'+tr("Create host")+'\" id="create_host_dialog"></div>');
|
||||
dialogs_context.append('<div id="create_host_dialog"></div>');
|
||||
$create_host_dialog = $('div#create_host_dialog');
|
||||
var dialog = $create_host_dialog;
|
||||
|
||||
dialog.html(create_host_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal max-height");
|
||||
dialog.addClass("reveal-modal max-height").attr("data-reveal", "");
|
||||
|
||||
// Show custom driver input only when custom is selected in selects
|
||||
$('input[name="custom_vmm_mad"],'+
|
||||
@ -988,13 +892,13 @@ function setupCreateHostDialog(){
|
||||
//Create the OpenNebula.Host.
|
||||
//If it is successfull we refresh the list.
|
||||
Sunstone.runAction("Host.create",host_json);
|
||||
$create_host_dialog.trigger("reveal:close")
|
||||
$create_host_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#wizard_host_reset_button').click(function(){
|
||||
$create_host_dialog.trigger('reveal:close');
|
||||
$create_host_dialog.remove();
|
||||
$create_host_dialog.trigger('close');
|
||||
$create_host_dialog.html("");
|
||||
setupCreateHostDialog();
|
||||
|
||||
popUpCreateHostDialog();
|
||||
@ -1004,7 +908,7 @@ function setupCreateHostDialog(){
|
||||
//Open creation dialogs
|
||||
function popUpCreateHostDialog(){
|
||||
$('#host_cluster_id',$create_host_dialog).html(clusters_sel());
|
||||
$create_host_dialog.reveal();
|
||||
$create_host_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#name",$create_host_dialog).focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -18,324 +18,217 @@
|
||||
|
||||
size_images = 0;
|
||||
|
||||
var images_tab_content = '\
|
||||
<form class="custom" id="image_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-upload"></i> '+tr("Images")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span id="total_images"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span id="size_images"/> <small>'+tr("USED")+'</small>\
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
var create_image_tmpl ='<div class="row">\
|
||||
<div class="large-5 columns">\
|
||||
<h3 class="subheader">'+tr("Create Image")+'</h3>'+
|
||||
'</div>'+
|
||||
'<div class="large-7 columns">'+
|
||||
'<dl class="tabs right" data-tab>\
|
||||
<dd class="active"><a href="#img_easyTab">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#img_manualTab">'+tr("Advanced mode")+'</a></dd>\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="image_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="">\
|
||||
<div class="twelve columns">\
|
||||
<div id="upload_progress_bars"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_images" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Datastore")+'</th>\
|
||||
<th>'+tr("Size")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Registration time")+'</th>\
|
||||
<th>'+tr("Persistent")+'</th>\
|
||||
<th>'+tr("Status")+'</th>\
|
||||
<th>'+tr("#VMS")+'</th>\
|
||||
<th>'+tr("Target")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyimages">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
|
||||
var create_image_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3><small>'+tr("Create Image")+'</small></h4>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="create_image" action="" class="custom creation">\
|
||||
<dl class="tabs">\
|
||||
<dd class="active"><a href="#img_easy">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#img_manual">'+tr("Advanced mode")+'</a></dd>\
|
||||
</dl>\
|
||||
<ul class="tabs-content">\
|
||||
<li id="img_easyTab" class="active">\
|
||||
<div class="row vm_param">\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_name">'+tr("Name")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="img_name" id="img_name" />\
|
||||
</div>\
|
||||
<div class="one columns tip">'+tr("Name that the Image will get. Every image must have a unique name.")+'</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_desc">'+tr("Description")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<textarea name="img_desc" id="img_desc" rows="4"></textarea>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Human readable description of the image for other users.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_type">'+tr("Type")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="img_type" id="img_type">\
|
||||
<option value="OS">'+tr("OS")+'</option>\
|
||||
<option value="CDROM">'+tr("CDROM")+'</option>\
|
||||
<option value="DATABLOCK">'+tr("DATABLOCK")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Type of the image, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_datastore">'+tr("Datastore")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select id="img_datastore" name="img_datastore">\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Select the datastore for this image")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_persistent">'+tr("Persistent")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Persistence of the image")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="tabs-content">\
|
||||
<div id="img_easyTab" class="content active">\
|
||||
<div class="row vm_param">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_name">'+tr("Name")+
|
||||
'<span class="tip">'+tr("Name that the Image will get. Every image must have a unique name.")+'</span>\
|
||||
</label>\
|
||||
<input type="text" name="img_name" id="img_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Image location")+':</legend>\
|
||||
<div class="row centered" id="src_path_select" style="text-align:center">\
|
||||
<input type="radio" name="src_path" id="path_img" value="path">'+ tr("Provide a path")+' </input> \
|
||||
<input type="radio" name="src_path" id="upload_img" value="upload"> '+tr("Upload")+'</input>  \
|
||||
<input type="radio" name="src_path" id="datablock_img" value="datablock" disabled> '+tr("Empty datablock")+'</input>  \
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="img_param row">\
|
||||
<div class="eight columns centered">\
|
||||
<div class="two columns">\
|
||||
<label class="right inline" for="img_path">'+tr("Path")+':</label>\
|
||||
</div>\
|
||||
<div class="nine columns">\
|
||||
<input type="text" name="img_path" id="img_path" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Path to the original file that will be copied to the image repository. If not specified for a DATABLOCK type image, an empty image will be created.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns eight centered">\
|
||||
<div id="file-uploader"></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="img_size">\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_size">'+tr("Size")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="img_size" id="img_size" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Size of the datablock in MB.")+'</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_desc">'+tr("Description")+
|
||||
'<span class="tip">'+tr("Human readable description of the image for other users.")+'</span>\
|
||||
</label>\
|
||||
<textarea name="img_desc" id="img_desc" rows="4"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="img_fstype">'+tr("FS type")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="img_fstype" id="img_fstype" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Type of file system to be built.")+'<br><br>'
|
||||
+ tr(" Plain. When the disk image is used directly by the hypervisor we can format the image, and so it is ready to be used by the guest OS. Values: ext2, ext3, ext4, ntfs, reiserfs, jfs, swap. Any other fs supported by mkfs will work if no special option is needed. .")+'<br><br>'
|
||||
+ tr(" Formatted. The disk image is stored in a hypervisor specific format VMDK or Qcow2. Then we cannot really make a filesystem on the image, just create the device and let the guest OS format the disk. Use raw to not to format the new image. Values: raw, qcow2, vmdk_*.")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<div class="show_hide" id="advanced_image_create">\
|
||||
<h4><small><i class=" fa fa-caret-down"/> '+tr("Advanced options")+'<a id="add_os_boot_opts" class="icon_left" href="#"></a></small></h4>\
|
||||
</div>\
|
||||
<div class="advanced">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="img_dev_prefix">'+tr("Device prefix")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”. If omitted, the default value is the one defined in oned.conf (installation default is “hd”).")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="img_driver">'+tr("Driver")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="img_driver" id="img_driver" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Specific image mapping driver. KVM: raw, qcow2. XEN: tap:aio, file:")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="img_target">'+tr("Target")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="img_target" id="img_target" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+tr("Target on which the image will be mounted at. For example: hda, sdb...")+'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_type">'+tr("Type")+
|
||||
'<span class="tip">'+tr("Type of the image, explained in detail in the following section. If omitted, the default value is the one defined in oned.conf (install default is OS).")+'</span>'+
|
||||
'</label>\
|
||||
<select name="img_type" id="img_type">\
|
||||
<option value="OS">'+tr("OS")+'</option>\
|
||||
<option value="CDROM">'+tr("CDROM")+'</option>\
|
||||
<option value="DATABLOCK">'+tr("DATABLOCK")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Custom attributes") + '</legend>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="custom_var_image_name">'+tr("Name")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" id="custom_var_image_name" name="custom_var_image_name" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="custom_var_image_value">'+tr("Value")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" id="custom_var_image_value" name="custom_var_image_value" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<button class="add_remove_button add_button secondary button right small radius" id="add_custom_var_image_button" value="add_custom_image_var">\
|
||||
'+tr("Add")+'\
|
||||
</button>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" value="remove_custom_image_var">\
|
||||
'+tr("Remove selected")+'\
|
||||
</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="eight centered columns">\
|
||||
<select id="custom_var_image_box" name="custom_var_image_box" style="height:10em; width:100%" multiple>\
|
||||
<!-- insert leases -->\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_datastore">'+tr("Datastore")+
|
||||
'<span class="tip">'+tr("Select the datastore for this image")+'</span>'+
|
||||
'</label>\
|
||||
<select id="img_datastore" name="img_datastore">\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<input type="checkbox" id="img_persistent" name="img_persistent" value="YES" />\
|
||||
<label for="img_persistent">'+tr("Persistent")+
|
||||
'<span class="tip">'+tr("Persistence of the image")+'</span>'+
|
||||
'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Image location")+':</legend>\
|
||||
<div class="row" id="src_path_select">\
|
||||
<div class="large-12 columns text-center">\
|
||||
<input type="radio" name="src_path" id="path_image" value="path"><label for="path_image">'+ tr("Provide a path")+'</label> \
|
||||
<input type="radio" name="src_path" id="upload_image" value="upload"> <label for="upload_image">'+tr("Upload")+'</label> \
|
||||
<input type="radio" name="src_path" id="datablock_img" value="datablock" disabled> <label for="datablock_img">'+tr("Empty datablock")+'</label> \
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="img_param row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_path">'+tr("Path")+
|
||||
'<span class="tip">'+tr("Path to the original file that will be copied to the image repository. If not specified for a DATABLOCK type image, an empty image will be created.")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="img_path" id="img_path" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div id="file-uploader" class="large-12 columns text-center">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="img_size row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="img_size">'+tr("Size")+
|
||||
'<span class="tip">'+tr("Size of the datablock in MB.")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="img_size" id="img_size" />\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="img_fstype">'+tr("FS type")+
|
||||
'<span class="tip">'+tr("Type of file system to be built.")+'<br><br>'
|
||||
+ tr(" Plain. When the disk image is used directly by the hypervisor we can format the image, and so it is ready to be used by the guest OS. Values: ext2, ext3, ext4, ntfs, reiserfs, jfs, swap. Any other fs supported by mkfs will work if no special option is needed. .")+'<br><br>'
|
||||
+ tr(" Formatted. The disk image is stored in a hypervisor specific format VMDK or Qcow2. Then we cannot really make a filesystem on the image, just create the device and let the guest OS format the disk. Use raw to not to format the new image. Values: raw, qcow2, vmdk_*.")+
|
||||
'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="img_fstype" id="img_fstype" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<div class="show_hide" id="advanced_image_create">\
|
||||
<h4><small><i class=" fa fa-caret-down"/> '+tr("Advanced options")+'<a id="add_os_boot_opts" class="icon_left" href="#"></a></small></h4>\
|
||||
</div>\
|
||||
<div class="advanced">\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_dev_prefix">'+tr("Device prefix")+
|
||||
'<span class="tip">'+tr("Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”. If omitted, the default value is the one defined in oned.conf (installation default is “hd”).")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="img_dev_prefix" id="img_dev_prefix" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_driver">'+tr("Driver")+
|
||||
'<span class="tip">'+tr("Specific image mapping driver. KVM: raw, qcow2. XEN: tap:aio, file:")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="img_driver" id="img_driver" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="img_target">'+tr("Target")+
|
||||
'<span class="tip">'+tr("Target on which the image will be mounted at. For example: hda, sdb...")+'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="img_target" id="img_target" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Custom attributes") + '</legend>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="custom_var_image_name">'+tr("Name")+'</label>\
|
||||
<input type="text" id="custom_var_image_name" name="custom_var_image_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="custom_var_image_value">'+tr("Value")+'</label>\
|
||||
<input type="text" id="custom_var_image_value" name="custom_var_image_value" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<button class="add_remove_button add_button secondary button small radius" id="add_custom_var_image_button" value="add_custom_image_var">\
|
||||
'+tr("Add")+'\
|
||||
</button>\
|
||||
<button class="add_remove_button secondary button small radius" id="remove_custom_var_image_button" value="remove_custom_image_var">\
|
||||
'+tr("Remove selected")+'\
|
||||
</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="eight centered columns">\
|
||||
<select id="custom_var_image_box" name="custom_var_image_box" style="height:180px !important; width:100%" multiple>\
|
||||
<!-- insert leases -->\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_image_submit" type="button" value="image/create">'+tr("Create")+'</button>\
|
||||
<button id="wizard_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
<li id="img_manualTab">\
|
||||
<div class="reveal-body">\
|
||||
<div class="columns three">\
|
||||
<label class="inline left" for="img_datastores_raw">'+tr("Datastore")+':</label>\
|
||||
</div>\
|
||||
<div class="columns nine">\
|
||||
</div>\
|
||||
<div id="img_manualTab" class="content">\
|
||||
<div class="reveal-body">\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<label for="img_datastores_raw">'+tr("Datastore")+':</label>\
|
||||
<select id="img_datastore_raw" name="img_datastore_raw"></select>\
|
||||
</div>\
|
||||
<textarea id="template" rows="15" style="width:100%;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<textarea id="template" rows="15" style="height:380px !important; width:100%;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_image_submit_manual" value="image/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_image_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>\
|
||||
</form>\
|
||||
</div>';
|
||||
|
||||
var dataTable_images;
|
||||
@ -348,7 +241,7 @@ var image_actions = {
|
||||
call: OpenNebula.Image.create,
|
||||
callback: function(request, response){
|
||||
addImageElement(request, response);
|
||||
$create_image_dialog.trigger("reveal:close")
|
||||
$create_image_dialog.trigger('close')
|
||||
notifyCustom(tr("Image created"), " ID: " + response.IMAGE.ID, false)
|
||||
},
|
||||
error: onError
|
||||
@ -383,8 +276,13 @@ var image_actions = {
|
||||
"Image.refresh" : {
|
||||
type: "custom",
|
||||
call: function () {
|
||||
var tab = dataTable_images.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Image.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_images);
|
||||
Sunstone.runAction("Image.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -604,10 +502,38 @@ var image_info_panel = {
|
||||
|
||||
var images_tab = {
|
||||
title: tr("Images"),
|
||||
content: images_tab_content,
|
||||
buttons: image_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'vresources-tab'
|
||||
parentTab: 'vresources-tab',
|
||||
content: '<div class="large-12 columns">\
|
||||
<div id="upload_progress_bars"></div>\
|
||||
</div>',
|
||||
search_input: '<input id="image_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-upload"></i> '+tr("Images"),
|
||||
info_header: '<i class="fa fa-upload"></i> '+tr("Image"),
|
||||
subheader: '<span class="total_images"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span class="size_images"/> <small>'+tr("USED")+'</small>',
|
||||
table: '<table id="datatable_images" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Datastore")+'</th>\
|
||||
<th>'+tr("Size")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Registration time")+'</th>\
|
||||
<th>'+tr("Persistent")+'</th>\
|
||||
<th>'+tr("Status")+'</th>\
|
||||
<th>'+tr("#VMS")+'</th>\
|
||||
<th>'+tr("Target")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyimages">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(image_actions);
|
||||
@ -684,26 +610,22 @@ function updateImagesView(request, images_list){
|
||||
|
||||
var size = humanize_size_from_mb(size_images)
|
||||
|
||||
$("#total_images", $dashboard).text(image_list_array.length);
|
||||
$("#size_images", $dashboard).text(size);
|
||||
|
||||
var form = $("#image_form");
|
||||
|
||||
$("#total_images", form).text(image_list_array.length);
|
||||
$("#size_images", form).text(size);
|
||||
$(".total_images").text(image_list_array.length);
|
||||
$(".size_images").text(size);
|
||||
}
|
||||
|
||||
// Callback to update the information panel tabs and pop it up
|
||||
function updateImageInfo(request,img){
|
||||
var img_info = img.IMAGE;
|
||||
var info_tab = {
|
||||
title: tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content:
|
||||
'<form class="custom"><div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_img_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_img_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">'+tr("Image")+' - '+img_info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">'+tr("Information")+'</th></tr>\
|
||||
</thead>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("ID")+'</td>\
|
||||
@ -766,7 +688,7 @@ function updateImageInfo(request,img){
|
||||
</tr>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_permissions_table('images-tab',
|
||||
"Image",
|
||||
img_info.ID,
|
||||
@ -848,7 +770,8 @@ function updateImageInfo(request,img){
|
||||
|
||||
var vms_info_tab = {
|
||||
title: tr("VMs"),
|
||||
content : '<div id="datatable_image_vms_info_div" class="twelve columns">\
|
||||
icon: "fa-cloud",
|
||||
content : '<div id="datatable_image_vms_info_div" class="large-12 columns">\
|
||||
<table id="datatable_image_vms" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
@ -936,7 +859,7 @@ function setupCreateImageDialog(dialog){
|
||||
var dialog = $create_image_dialog;
|
||||
dialog.html(create_image_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal large max-height");
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
|
||||
initialize_create_image_dialog(dialog);
|
||||
}
|
||||
@ -959,7 +882,7 @@ function initialize_create_image_dialog(dialog) {
|
||||
break;
|
||||
default:
|
||||
$('#datablock_img',context).attr('disabled','disabled');
|
||||
$('#path_img',context).click();
|
||||
$('#path_image',context).click();
|
||||
|
||||
}
|
||||
});
|
||||
@ -986,7 +909,7 @@ function initialize_create_image_dialog(dialog) {
|
||||
});
|
||||
|
||||
|
||||
$('#path_img',dialog).click();
|
||||
$('#path_image',dialog).click();
|
||||
|
||||
|
||||
$('#add_custom_var_image_button', dialog).click(
|
||||
@ -1040,10 +963,10 @@ function initialize_create_image_dialog(dialog) {
|
||||
});
|
||||
|
||||
$('#upload_progress_bars').append('<div id="'+id+'progressBar" class="row" style="margin-bottom:10px">\
|
||||
<div class="two columns dataTables_info">\
|
||||
<div class="large-2 columns dataTables_info">\
|
||||
'+tr("Uploading...")+'\
|
||||
</div>\
|
||||
<div class="ten columns">\
|
||||
<div class="large-10 columns">\
|
||||
<div id="upload_progress_container" class="progress nine radius" style="height:25px !important">\
|
||||
<span class="meter" style="width:0%"></span>\
|
||||
</div>\
|
||||
@ -1186,7 +1109,7 @@ function initialize_create_image_dialog(dialog) {
|
||||
//we this is an image upload we trigger FileUploader
|
||||
//to start the upload
|
||||
if (upload){
|
||||
$create_image_dialog.trigger("reveal:close")
|
||||
dialog.trigger('close')
|
||||
uploader._onInputChange(file_input);
|
||||
} else {
|
||||
Sunstone.runAction("Image.create", img_obj);
|
||||
@ -1217,16 +1140,16 @@ function initialize_create_image_dialog(dialog) {
|
||||
});
|
||||
|
||||
$('#wizard_image_reset_button').click(function(){
|
||||
dialog.trigger('reveal:close');
|
||||
dialog.remove();
|
||||
dialog.trigger('close');
|
||||
//dialog.html("");
|
||||
setupCreateImageDialog();
|
||||
|
||||
popUpCreateImageDialog();
|
||||
});
|
||||
|
||||
$('#advanced_image_reset_button').click(function(){
|
||||
dialog.trigger('reveal:close');
|
||||
dialog.remove();
|
||||
dialog.trigger('close');
|
||||
dialog.html("");
|
||||
setupCreateImageDialog();
|
||||
|
||||
popUpCreateImageDialog();
|
||||
@ -1266,8 +1189,9 @@ function initialize_datastore_info_create_image_dialog(dialog) {
|
||||
}
|
||||
|
||||
function popUpCreateImageDialog(){
|
||||
$create_image_dialog = $('#create_image_dialog',dialogs_context);
|
||||
initialize_datastore_info_create_image_dialog($create_image_dialog);
|
||||
$create_image_dialog.reveal();
|
||||
$create_image_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#img_name",$create_image_dialog).focus();
|
||||
}
|
||||
|
||||
@ -1294,39 +1218,33 @@ function setupImageCloneDialog(){
|
||||
|
||||
//Put HTML in place
|
||||
|
||||
var html = '<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Clone Image")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
<form>\
|
||||
<div class="row">\
|
||||
<div class="clone_one"></div>\
|
||||
<div class="clone_several">'+tr("Several image are selected, please choose prefix to name the new copies")+':</div>\
|
||||
<br>\
|
||||
var html = '<div class="row">\
|
||||
<h3 id="create_vnet_header" class="subheader">'+tr("Clone Image")+'</h3>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns two">\
|
||||
<label class="clone_one inline right">'+tr("Name")+':</label>\
|
||||
<label class="clone_several inline right">'+tr("Prefix")+':</label>\
|
||||
<form>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<div class="clone_one"></div>\
|
||||
<div class="clone_several">'+tr("Several image are selected, please choose prefix to name the new copies")+':</div>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="columns ten">\
|
||||
<input type="text" name="name"></input>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<label class="clone_one">'+tr("Name")+':</label>\
|
||||
<label class="clone_several">'+tr("Prefix")+':</label>\
|
||||
<input type="text" name="name"></input>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="form_buttons row">\
|
||||
<button class="button radius right" id="image_clone_button" value="Image.clone">\
|
||||
'+tr("Clone")+'\
|
||||
</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
<div class="form_buttons row">\
|
||||
<button class="button radius right" id="image_clone_button" value="Image.clone">'+tr("Clone")+'</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>\
|
||||
';
|
||||
|
||||
dialog.html(html);
|
||||
dialog.addClass("reveal-modal");
|
||||
dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
|
||||
$('form',dialog).submit(function(){
|
||||
var name = $('input', this).val();
|
||||
@ -1343,7 +1261,7 @@ function setupImageCloneDialog(){
|
||||
} else {
|
||||
Sunstone.runAction('Image.clone',sel_elems[0],name)
|
||||
};
|
||||
dialog.trigger("reveal:close")
|
||||
dialog.trigger('close')
|
||||
setTimeout(function(){
|
||||
Sunstone.runAction('Image.refresh');
|
||||
}, 1500);
|
||||
@ -1366,7 +1284,7 @@ function popUpImageCloneDialog(){
|
||||
$('input',dialog).val('Copy of '+getImageName(sel_elems[0]));
|
||||
};
|
||||
|
||||
$(dialog).reveal();
|
||||
$(dialog).foundation().foundation('reveal', 'open');
|
||||
$("input[name='name']",dialog).focus();
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
var infra_tab = {
|
||||
title: '<i class="fa fa-sitemap"></i>'+tr("Infrastructure")
|
||||
title: '<i class="fa fa-sitemap"></i>'+tr("Infrastructure"),
|
||||
no_content: true
|
||||
}
|
||||
|
||||
Sunstone.addMainTab('infra-tab',infra_tab);
|
||||
|
||||
@ -32,8 +32,13 @@ var market_actions = {
|
||||
"Marketplace.refresh" : {
|
||||
type: "custom",
|
||||
call: function () {
|
||||
var tab = dataTable_marketplace.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Marketplace.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_marketplace);
|
||||
Sunstone.runAction('Marketplace.list');
|
||||
Sunstone.runAction("Marketplace.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
"Marketplace.import" : {
|
||||
@ -49,24 +54,24 @@ var market_actions = {
|
||||
}
|
||||
|
||||
if ($marketplace_import_dialog != undefined) {
|
||||
$marketplace_import_dialog.remove();
|
||||
$marketplace_import_dialog.html("");
|
||||
}
|
||||
|
||||
dialogs_context.append(marketplace_import_dialog);
|
||||
$marketplace_import_dialog = $('#marketplace_import_dialog',dialogs_context);
|
||||
$marketplace_import_dialog.addClass("reveal-modal xlarge max-height");
|
||||
$marketplace_import_dialog.reveal();
|
||||
$marketplace_import_dialog.addClass("reveal-modal large max-height").attr("data-reveal", "");
|
||||
$marketplace_import_dialog.foundation().foundation('reveal', 'open');
|
||||
|
||||
var tab_id = 1;
|
||||
|
||||
$.each(response['files'], function(index, value){
|
||||
// Append the new div containing the tab and add the tab to the list
|
||||
var image_dialog = $('<li id="'+tab_id+'Tab" class="disk wizard_internal_tab">'+
|
||||
var image_dialog = $('<div id="Tab'+tab_id+'" class="content disk wizard_internal_tab">'+
|
||||
create_image_tmpl +
|
||||
'</li>').appendTo($("ul#marketplace_import_dialog_tabs_content"));
|
||||
'</div>').appendTo($("#marketplace_import_dialog_tabs_content"));
|
||||
|
||||
var a_image_dialog = $("<dd>\
|
||||
<a id='disk_tab"+tab_id+"' href='#"+tab_id+"'>"+tr("Image")+"</a>\
|
||||
<a id='disk_tab"+tab_id+"' href='#Tab"+tab_id+"'>"+tr("Image")+"</a>\
|
||||
</dd>").appendTo($("dl#marketplace_import_dialog_tabs"));
|
||||
|
||||
initialize_create_image_dialog(image_dialog);
|
||||
@ -101,13 +106,13 @@ var market_actions = {
|
||||
$create_image_dialog = image_dialog;
|
||||
})
|
||||
|
||||
image_dialog.on("reveal:close", function(){
|
||||
a_image_dialog.remove();
|
||||
image_dialog.remove();
|
||||
image_dialog.on("close", function(){
|
||||
a_image_dialog.html("");
|
||||
image_dialog.html("");
|
||||
if ($('a', $("dl#marketplace_import_dialog_tabs")).size > 0) {
|
||||
$('a', $("dl#marketplace_import_dialog_tabs")).first().click();
|
||||
} else {
|
||||
$marketplace_import_dialog.trigger("reveal:close");
|
||||
$marketplace_import_dialog.trigger('close');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
@ -117,15 +122,15 @@ var market_actions = {
|
||||
})
|
||||
|
||||
if (response['opennebula_template'] && response['opennebula_template'] !== "CPU=1") {
|
||||
$create_template_dialog.remove();
|
||||
$create_template_dialog.html("");
|
||||
// Template
|
||||
// Append the new div containing the tab and add the tab to the list
|
||||
var template_dialog = $('<li id="'+tab_id+'Tab" class="disk wizard_internal_tab">'+
|
||||
var template_dialog = $('<div id="'+tab_id+'Tab" class="content disk wizard_internal_tab">'+
|
||||
create_template_tmpl +
|
||||
'</li>').appendTo($("ul#marketplace_import_dialog_tabs_content"));
|
||||
'</div>').appendTo($("#marketplace_import_dialog_tabs_content"));
|
||||
|
||||
var a_template_dialog = $("<dd>\
|
||||
<a id='disk_tab"+tab_id+"' href='#"+tab_id+"'>"+tr("Template")+"</a>\
|
||||
<a id='disk_tab"+tab_id+"' href='#"+tab_id+"Tab'>"+tr("Template")+"</a>\
|
||||
</dd>").appendTo($("dl#marketplace_import_dialog_tabs"));
|
||||
|
||||
initialize_create_template_dialog(template_dialog);
|
||||
@ -137,13 +142,13 @@ var market_actions = {
|
||||
$create_template_dialog = template_dialog;
|
||||
})
|
||||
|
||||
template_dialog.on("reveal:close", function(){
|
||||
a_template_dialog.remove();
|
||||
template_dialog.remove();
|
||||
template_dialog.on("close", function(){
|
||||
a_template_dialog.html("");
|
||||
template_dialog.html("");
|
||||
if ($('a', $("dl#marketplace_import_dialog_tabs")).size > 0) {
|
||||
$('a', $("dl#marketplace_import_dialog_tabs")).first().click();
|
||||
} else {
|
||||
$marketplace_import_dialog.trigger("reveal:close");
|
||||
$marketplace_import_dialog.trigger('close');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
@ -172,77 +177,49 @@ var market_buttons = {
|
||||
},
|
||||
"Marketplace.import" : {
|
||||
type: "action",
|
||||
layout: "create",
|
||||
layout: "main",
|
||||
text: tr('Import')
|
||||
}
|
||||
};
|
||||
|
||||
var marketplace_import_dialog =
|
||||
'<div id="marketplace_import_dialog">'+
|
||||
'<div class="panel">'+
|
||||
'<h3><small>'+tr("Import Appliance")+'</small></h4>'+
|
||||
'<div class="row">'+
|
||||
'<h3 class="subheader">'+tr("Import Appliance")+'</h3>'+
|
||||
'</div>'+
|
||||
'<div class="reveal-body">'+
|
||||
'<dl class="tabs" id="marketplace_import_dialog_tabs">'+
|
||||
'<dl class="tabs" id="marketplace_import_dialog_tabs" data-tab>'+
|
||||
'</dl>'+
|
||||
'<ul class="tabs-content" id="marketplace_import_dialog_tabs_content">'+
|
||||
'</ul>'+
|
||||
'<div class="tabs-content" id="marketplace_import_dialog_tabs_content">'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<a class="close-reveal-modal">×</a>'+
|
||||
'</div>';
|
||||
|
||||
var marketplace_tab_content = '\
|
||||
<form class="custom" id="marketplace_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-shopping-cart"></i> '+tr("OpenNebula Marketplace")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="marketplace_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_marketplace" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Publisher")+'</th>\
|
||||
<th>'+tr("Hypervisor")+'</th>\
|
||||
<th>'+tr("Arch")+'</th>\
|
||||
<th>'+tr("Format")+'</th>\
|
||||
<th>'+tr("Tags")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodymarketplace">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>';
|
||||
|
||||
|
||||
var marketplace_tab = {
|
||||
title: '<i class="fa fa-shopping-cart"></i>' + tr("Marketplace"),
|
||||
content: marketplace_tab_content,
|
||||
buttons: market_buttons
|
||||
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"),
|
||||
info_header: '<i class="fa fa-shopping-cart"></i> '+tr("Appliance"),
|
||||
subheader: '<span/> <small></small> ',
|
||||
table: '<table id="datatable_marketplace" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Publisher")+'</th>\
|
||||
<th>'+tr("Hypervisor")+'</th>\
|
||||
<th>'+tr("Arch")+'</th>\
|
||||
<th>'+tr("Format")+'</th>\
|
||||
<th>'+tr("Tags")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodymarketplace">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
};
|
||||
|
||||
Sunstone.addMainTab('marketplace-tab', marketplace_tab);
|
||||
@ -268,14 +245,15 @@ function marketplaceElements(){
|
||||
|
||||
function updateMarketInfo(request,app){
|
||||
var info_tab = {
|
||||
title : tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content :
|
||||
'<form class="custom"><div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_marketplace_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_marketplace_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th colspan="2">'+tr("Appliance") + ' - ' + app['name'] + '</th>\
|
||||
<th colspan="2">'+tr("Information") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
@ -314,8 +292,8 @@ function updateMarketInfo(request,app){
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<table id="info_marketplace_table2" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_marketplace_table2" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th>'+tr("Description")+'</th></tr>\
|
||||
</thead>\
|
||||
@ -345,24 +323,22 @@ function updateMarketInfo(request,app){
|
||||
$(e.target).is('select') ||
|
||||
$(e.target).is('option')) return true;
|
||||
|
||||
var aData = dataTable.fnGetData(this);
|
||||
var id =aData["_id"]["$oid"];
|
||||
if (!id) return true;
|
||||
popDialogLoading();
|
||||
Sunstone.runAction("Marketplace.showinfo",id);
|
||||
var aData = dataTable.fnGetData(this);
|
||||
var id =aData["_id"]["$oid"];
|
||||
|
||||
// Take care of the coloring business
|
||||
// (and the checking, do not forget the checking)
|
||||
$('tbody input.check_item',$(this).parents('table')).removeAttr('checked');
|
||||
$('.check_item',this).click();
|
||||
$('td',$(this).parents('table')).removeClass('markrowchecked');
|
||||
if (!id) return true;
|
||||
|
||||
if(last_selected_row)
|
||||
last_selected_row.children().each(function(){$(this).removeClass('markrowselected');});
|
||||
last_selected_row = $("td:first", this).parent();
|
||||
$("td:first", this).parent().children().each(function(){$(this).addClass('markrowselected');});
|
||||
if (e.ctrlKey || e.metaKey || $(e.target).is('input')) {
|
||||
$('.check_item',this).trigger('click');
|
||||
} else {
|
||||
var context = $(this).parents(".tab");
|
||||
popDialogLoading();
|
||||
Sunstone.runAction("Marketplace.showinfo",id);
|
||||
$(".resource-id", context).html(id);
|
||||
$('.top_button, .list_button', context).attr('disabled', false);
|
||||
}
|
||||
|
||||
return false;
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
//------------------------------------------------------------------------- //
|
||||
|
||||
var oneflow_dashboard_tab = {
|
||||
title: '<i class="fa fa-code-fork fa fa-rotate-90"></i> OneFlow'
|
||||
title: '<i class="fa fa-code-fork fa fa-rotate-90"></i> OneFlow',
|
||||
no_content: true
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -650,11 +650,11 @@ var role_actions = {
|
||||
Sunstone.addActions(role_actions);
|
||||
|
||||
function roleElements() {
|
||||
return getSelectedNodes(servicerolesDataTable);
|
||||
return getSelectedNodes(servicerolesDataTable, true);
|
||||
};
|
||||
|
||||
function roleVMElements() {
|
||||
return getSelectedNodes(serviceroleVMsDataTable);
|
||||
return getSelectedNodes(serviceroleVMsDataTable, true);
|
||||
};
|
||||
|
||||
function roleCallback() {
|
||||
@ -768,48 +768,6 @@ var role_buttons = {
|
||||
|
||||
|
||||
var role_vm_buttons = {
|
||||
// "RoleVM.chown" : {
|
||||
// type: "confirm_with_select",
|
||||
// text: tr("Change owner"),
|
||||
// select: users_sel,
|
||||
// layout: "user_select",
|
||||
// tip: tr("Select the new owner")+":",
|
||||
// condition: mustBeAdmin
|
||||
// },
|
||||
//
|
||||
// "RoleVM.chgrp" : {
|
||||
// type: "confirm_with_select",
|
||||
// text: tr("Change group"),
|
||||
// select: groups_sel,
|
||||
// layout: "user_select",
|
||||
// tip: tr("Select the new group")+":",
|
||||
// condition: mustBeAdmin
|
||||
// },
|
||||
// "RoleVM.deploy" : {
|
||||
// type: "confirm_with_select",
|
||||
// text: tr("Deploy"),
|
||||
// tip: tr("This will deploy the selected VMs on the chosen host"),
|
||||
// layout: "vmsplanification_buttons",
|
||||
// select: hosts_sel,
|
||||
// condition: mustBeAdmin
|
||||
// },
|
||||
// "RoleVM.migrate" : {
|
||||
// type: "confirm_with_select",
|
||||
// text: tr("Migrate"),
|
||||
// tip: tr("This will migrate the selected VMs to the chosen host"),
|
||||
// layout: "vmsplanification_buttons",
|
||||
// select: hosts_sel,
|
||||
// condition: mustBeAdmin
|
||||
//
|
||||
// },
|
||||
// "RoleVM.migrate_live" : {
|
||||
// type: "confirm_with_select",
|
||||
// text: tr("Migrate") + ' <span class="label secondary radius">live</span>',
|
||||
// tip: tr("This will live-migrate the selected VMs to the chosen host"),
|
||||
// layout: "vmsplanification_buttons",
|
||||
// select: hosts_sel,
|
||||
// condition: mustBeAdmin
|
||||
// },
|
||||
"RoleVM.hold" : {
|
||||
type: "action",
|
||||
text: tr("Hold"),
|
||||
@ -918,72 +876,9 @@ var role_vm_buttons = {
|
||||
text: tr("Un-Reschedule"),
|
||||
layout: "vmsplanification_buttons",
|
||||
tip: tr("This will cancel the rescheduling for the selected VMs")
|
||||
},
|
||||
// "RoleVM.recover" : {
|
||||
// type: "confirm_with_select",
|
||||
// text: tr("Recover"),
|
||||
// layout: "vmsplanification_buttons",
|
||||
// select: function(){ return '<option value="success">' + tr("success") + '</option>\
|
||||
// <option value="failure">' + tr("failure") + '</option>'},
|
||||
// tip: tr("Recovers a stuck VM that is waiting for a driver operation. \
|
||||
// The recovery may be done by failing or succeeding the pending operation. \
|
||||
// YOU NEED TO MANUALLY CHECK THE VM STATUS ON THE HOST, to decide if the operation \
|
||||
// was successful or not.")
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
var service_tab_content = '\
|
||||
<form class="custom" id="template_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-code-fork fa fa-rotate-90"></i> '+tr("OneFlow - Services")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="nine columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="three columns">\
|
||||
<input id="services_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_services" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("State")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row" id="error_message" hidden>\
|
||||
<div class="alert-box alert">'+tr("Cannot connect to OneFlow server")+'<a href="" class="close">×</a></div>\
|
||||
</div>\
|
||||
</form>';
|
||||
|
||||
var dataTable_services;
|
||||
|
||||
var service_actions = {
|
||||
@ -1016,8 +911,13 @@ var service_actions = {
|
||||
"Service.refresh" : {
|
||||
type: "custom",
|
||||
call: function () {
|
||||
var tab = dataTable_services.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Service.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_services);
|
||||
Sunstone.runAction("Service.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -1141,10 +1041,30 @@ var service_info_panel = {
|
||||
|
||||
var services_tab = {
|
||||
title: "Services",
|
||||
content: service_tab_content,
|
||||
buttons: service_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'oneflow-dashboard'
|
||||
parentTab: 'oneflow-dashboard',
|
||||
search_input: '<input id="services_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-code-fork fa fa-rotate-90"></i> '+tr("OneFlow - Services"),
|
||||
info_header: '<i class="fa fa-code-fork fa fa-rotate-90"></i> '+tr("OneFlow - Service"),
|
||||
subheader: '<span/> <small></small> ',
|
||||
content: '<div class="row" id="error_message" hidden>\
|
||||
<div class="alert-box alert radius">'+tr("Cannot connect to OneFlow server")+'</div>\
|
||||
</div>',
|
||||
table: '<table id="datatable_services" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("State")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(service_actions);
|
||||
@ -1216,13 +1136,14 @@ function updateServiceInfo(request,elem){
|
||||
var elem_info = elem.DOCUMENT;
|
||||
|
||||
var info_tab = {
|
||||
title: tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content:
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_template_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_template_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="2">'+tr("Service")+' \"'+elem_info.NAME+'\"'+'</th></tr>\
|
||||
<tr><th colspan="2">'+tr("Information")+'</th></tr>\
|
||||
</thead>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("ID")+'</td>\
|
||||
@ -1246,7 +1167,7 @@ function updateServiceInfo(request,elem){
|
||||
</tr>\
|
||||
</table>' +
|
||||
'</div>\
|
||||
<div class="six columns">' + insert_permissions_table('oneflow-services',
|
||||
<div class="large-6 columns">' + insert_permissions_table('oneflow-services',
|
||||
"Service",
|
||||
elem_info.ID,
|
||||
elem_info.UNAME,
|
||||
@ -1261,35 +1182,33 @@ function updateServiceInfo(request,elem){
|
||||
|
||||
var roles_tab = {
|
||||
title : "Roles",
|
||||
icon: "fa-wrench",
|
||||
content : '<form class="custom" id="roles_form" action="">\
|
||||
<div id="role_actions">\
|
||||
<div class="action_blocks columns eight">\
|
||||
<div class="columns large-8">\
|
||||
<h4>'+tr("Roles")+'</h4>\
|
||||
</div>\
|
||||
<div class="columns four">\
|
||||
<div class="columns large-4 right">\
|
||||
<div class="row">\
|
||||
<div class="two columns">\
|
||||
<label class="inline right" for="batch_action_period">' + tr("Period") + ':</label>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="batch_action_period">' + tr("Period") + ':\
|
||||
<span class="tip">'+ tr("Seconds between each group of actions") +'</span>\
|
||||
</label>\
|
||||
<input type="text" id="batch_action_period" name="batch_action_period"/>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Seconds between each group of actions") +'</div>\
|
||||
</div>\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="batch_action_number">' + tr("Number") + ':</label>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="batch_action_number">' + tr("Number") + '\
|
||||
<span class="tip">'+ tr("Number of VMs to apply the action to each period") +'</span>\
|
||||
:</label>\
|
||||
<input type="text" id="batch_action_number" name="batch_action_number"/>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Number of VMs to apply the action to each period") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="action_blocks columns large-12">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="roles_info" class="columns twelve">\
|
||||
<table id="datatable_service_roles" class="table twelve">\
|
||||
<div id="roles_info" class="columns large-12">\
|
||||
<table id="datatable_service_roles" class="dataTable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
@ -1315,7 +1234,7 @@ function updateServiceInfo(request,elem){
|
||||
var logs = elem_info.TEMPLATE.BODY.log
|
||||
var log_info = ''
|
||||
if (logs) {
|
||||
log_info += '<div class="twelve columns"><div class="log-tab">'
|
||||
log_info += '<div class="large-12 columns"><div class="log-tab">'
|
||||
|
||||
for (var i = 0; i < logs.length; i++) {
|
||||
var line = pretty_time(logs[i].timestamp)+' ['+logs[i].severity + '] ' + logs[i].message+ '<br>';
|
||||
@ -1330,7 +1249,8 @@ function updateServiceInfo(request,elem){
|
||||
}
|
||||
|
||||
var logs_tab = {
|
||||
title: "Logs",
|
||||
title: "Log",
|
||||
icon: "fa-file-text",
|
||||
content: log_info
|
||||
}
|
||||
|
||||
@ -1384,17 +1304,15 @@ function updateServiceInfo(request,elem){
|
||||
|
||||
updateView(role_elements ,servicerolesDataTable);
|
||||
|
||||
insertButtonsInTab("oneflow-services", "service_roles_tab", role_buttons, $('#role_actions', $("#dialog")))
|
||||
$('#role_actions', $("#dialog")).foundationButtons();
|
||||
$('#role_actions', $("#dialog")).foundationButtons();
|
||||
insertButtonsInTab("oneflow-services", "service_roles_tab", role_buttons, $('#role_actions'))
|
||||
|
||||
setupScaleDialog();
|
||||
|
||||
$('tbody input.check_item',servicerolesDataTable).die();
|
||||
$('tbody tr',servicerolesDataTable).die();
|
||||
|
||||
initCheckAllBoxes(servicerolesDataTable, $('#role_actions', $("#dialog")));
|
||||
tableCheckboxesListener(servicerolesDataTable, $('#role_actions', $("#dialog")));
|
||||
initCheckAllBoxes(servicerolesDataTable, $('#role_actions'));
|
||||
tableCheckboxesListener(servicerolesDataTable, $('#role_actions'));
|
||||
|
||||
$('tbody tr',servicerolesDataTable).die()
|
||||
$('tbody tr',servicerolesDataTable).live("click",function(e){
|
||||
@ -1430,27 +1348,14 @@ function updateServiceInfo(request,elem){
|
||||
$(this).addClass('markrowselected');
|
||||
});
|
||||
}
|
||||
|
||||
//if($(this).is(":checked"))
|
||||
//{
|
||||
// $(this).parents('tr').children().each(function(){$(this).addClass('markrowchecked');});
|
||||
//}
|
||||
//else
|
||||
//{
|
||||
// $(this).parents('tr').children().removeClass('markrowchecked');
|
||||
// $(this).parents('tr').children().removeClass('markrowselected');
|
||||
//}
|
||||
//
|
||||
//recountCheckboxes(datatable);
|
||||
});
|
||||
|
||||
var generate_role_div = function(role_index) {
|
||||
var role = roles[role_index]
|
||||
var info_str = "<form>\
|
||||
<fieldset>\
|
||||
<legend>"+tr("Role")+" - "+role.name+"</legend>\
|
||||
<div class='twelve columns'>\
|
||||
<table class='twelve datatable extended_table policies_table'>\
|
||||
<h4>"+tr("Role")+" - "+role.name+"</h4>\
|
||||
<div class='large-12 columns'>\
|
||||
<table class='dataTable extended_table policies_table'>\
|
||||
<thead>\
|
||||
<tr><th colspan='8'>"+tr("Information")+"</th></tr>\
|
||||
</thead>\
|
||||
@ -1477,7 +1382,7 @@ function updateServiceInfo(request,elem){
|
||||
</div>\
|
||||
<div class="columns twelve">\
|
||||
<br>\
|
||||
<table id="datatable_service_vms_'+role.name+'" class="table datatable twelve ">\
|
||||
<table id="datatable_service_vms_'+role.name+'" class="dataTable twelve ">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th></th>\
|
||||
@ -1501,10 +1406,10 @@ function updateServiceInfo(request,elem){
|
||||
</div>\
|
||||
</fieldset>';
|
||||
|
||||
info_str += "<div class='twelve columns'><br>";
|
||||
info_str += "<div class='large-12 columns'><br>";
|
||||
|
||||
if (role.elasticity_policies && role.elasticity_policies.length > 0) {
|
||||
info_str += '<table class="twelve datatable extended_table policies_table">\
|
||||
info_str += '<table class="dataTable extended_table policies_table">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="7">'+tr("Elasticity policies")+'</th>\
|
||||
@ -1568,7 +1473,7 @@ function updateServiceInfo(request,elem){
|
||||
}
|
||||
|
||||
if (role.scheduled_policies && role.scheduled_policies.length > 0) {
|
||||
info_str += '<table class="twelve datatable extended_table policies_table">\
|
||||
info_str += '<table class="dataTable extended_table policies_table">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="5">'+tr("Scheduled policies")+'</th>\
|
||||
@ -1629,7 +1534,6 @@ function updateServiceInfo(request,elem){
|
||||
}
|
||||
|
||||
info_str += '</div>\
|
||||
</fieldset>\
|
||||
</form>'
|
||||
|
||||
context.html(info_str);
|
||||
@ -1673,15 +1577,13 @@ function updateServiceInfo(request,elem){
|
||||
}
|
||||
|
||||
|
||||
insertButtonsInTab("oneflow-services", "service_roles_tab", role_vm_buttons, $('div#role_vms_actions', $("#dialog")))
|
||||
$('div#role_vms_actions', $("#dialog")).foundationButtons();
|
||||
$('div#role_vms_actions', $("#dialog")).foundationButtons();
|
||||
insertButtonsInTab("oneflow-services", "service_roles_tab", role_vm_buttons, $('div#role_vms_actions'))
|
||||
|
||||
$('tbody input.check_item',serviceroleVMsDataTable).die();
|
||||
$('tbody tr',serviceroleVMsDataTable).die();
|
||||
|
||||
initCheckAllBoxes(serviceroleVMsDataTable, $('div#role_vms_actions', $("#dialog")));
|
||||
tableCheckboxesListener(serviceroleVMsDataTable, $('div#role_vms_actions', $("#dialog")));
|
||||
initCheckAllBoxes(serviceroleVMsDataTable, $('div#role_vms_actions'));
|
||||
tableCheckboxesListener(serviceroleVMsDataTable, $('div#role_vms_actions'));
|
||||
|
||||
$('tbody tr',serviceroleVMsDataTable).live("click",function(e){
|
||||
if ($(e.target).is('input') ||
|
||||
@ -1713,8 +1615,8 @@ function updateServiceInfo(request,elem){
|
||||
|
||||
|
||||
//insertButtonsInTab("oneflow-services", "service_roles_tab", role_buttons)
|
||||
//$('li#service_roles_tabTab', $("#dialog")).foundationButtons();
|
||||
//$('li#service_roles_tabTab', $("#dialog")).foundationButtons();
|
||||
//$('li#service_roles_tabTab').foundationButtons();
|
||||
//$('li#service_roles_tabTab').foundationButtons();
|
||||
}
|
||||
|
||||
if(selected_row_role_id) {
|
||||
@ -1736,30 +1638,9 @@ function updateServiceInfo(request,elem){
|
||||
}
|
||||
});
|
||||
}
|
||||
//setupActionButtons($('li#service_roles_tabTab', $("#dialog")));
|
||||
//setupActionButtons($('li#service_roles_tabTab'));
|
||||
}
|
||||
|
||||
|
||||
//$('tbody tr',serviceroleVMsDataTable).click(function(e){
|
||||
// var aData = serviceroleVMsDataTable.fnGetData(this);
|
||||
// var id = aData[1];
|
||||
// if (!id) return true;
|
||||
// if ($(e.target).is('img')) return true;
|
||||
//
|
||||
// //open the Vresources submenu in case it was closed
|
||||
// var vres_menu = $('div#menu li#li_vres_tab')
|
||||
// $('li.vres_tab', vres_menu.parent()).fadeIn('fast');
|
||||
// $('span', vres_menu).removeClass('ui-fa fa-circle-plus');
|
||||
// $('span', vres_menu).addClass('ui-fa fa-circle-minus');
|
||||
//
|
||||
// showTab('vms_tab');
|
||||
//
|
||||
// popDialogLoading();
|
||||
// Sunstone.runAction("VM.showinfo", id)
|
||||
// return false;
|
||||
//});
|
||||
|
||||
|
||||
setupTips($("#roles_form"));
|
||||
}
|
||||
|
||||
@ -1768,43 +1649,32 @@ function setupScaleDialog(){
|
||||
$scale_dialog = $('#scale_dialog', dialogs_context);
|
||||
var dialog = $scale_dialog;
|
||||
|
||||
dialog.html('<div class="panel">\
|
||||
<h3>\
|
||||
<small id="">'+tr("Scale")+'</small>\
|
||||
</h3>\
|
||||
dialog.html('<div class="row">\
|
||||
<h3 class="subheader">'+tr("Scale")+'</h3>\
|
||||
</div>\
|
||||
<form id="scale_form" action="">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="cardinality">'+tr("Cardinality")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="cardinality">'+tr("Cardinality")+
|
||||
'<span class="tip">'+ tr("Number of VMs to instantiate with this role") +'</span>'+
|
||||
'</label>\
|
||||
<input type="text" name="cardinality" id="cardinality"/>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Number of VMs to instantiate with this role") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="force">'+tr("Force")+':</label>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input type="checkbox" name="force" id="force"/>\
|
||||
</div>\
|
||||
<div class="one columns pull-five">\
|
||||
<div class="tip">'+ tr("Force the new cardinality even if it is outside the limits") +'</div>\
|
||||
<div class="large-12 columns">\
|
||||
<input type="checkbox" name="force" id="force"/><label class="inline" for="force">'+tr("Force")+
|
||||
'<span class="tip">'+ tr("Force the new cardinality even if it is outside the limits") +'</span>'+
|
||||
'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="" type="submit" value="">'+tr("Scale")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form></div>')
|
||||
|
||||
dialog.addClass("reveal-modal");
|
||||
dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
setupTips(dialog);
|
||||
|
||||
$('#scale_form',dialog).submit(function(){
|
||||
@ -1820,14 +1690,14 @@ function setupScaleDialog(){
|
||||
|
||||
Sunstone.runAction('Role.update', roleElements(), obj);
|
||||
|
||||
$scale_dialog.trigger("reveal:close")
|
||||
$scale_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function popUpScaleDialog(){
|
||||
$scale_dialog.reveal();
|
||||
$scale_dialog.foundation().foundation('reveal', 'open');
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@ -64,132 +64,58 @@ var ServiceTemplate = {
|
||||
}
|
||||
}
|
||||
|
||||
var service_template_tab_content = '\
|
||||
<form class="custom" id="template_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-file-o"></i> '+tr("OneFlow - Templates")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="nine columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="three columns">\
|
||||
<input id="service_templates_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_service_templates" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row" id="error_message" hidden>\
|
||||
<div class="alert-box alert">'+tr("Cannot connect to OneFlow server")+'<a href="" class="close">×</a></div>\
|
||||
</div>\
|
||||
</form>';
|
||||
|
||||
var create_service_template_tmpl = '\
|
||||
<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_service_template_header">'+tr("Create Service Template")+'</small>\
|
||||
<small id="update_service_template_header" hidden>'+tr("Update Service Template")+'</small>\
|
||||
</h3>\
|
||||
<div class="row">\
|
||||
<h3 id="create_service_template_header" class="subheader">'+tr("Create Service Template")+'</h3>\
|
||||
<h3 id="update_service_template_header" class="subheader" hidden>'+tr("Update Service Template")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body create_form">\
|
||||
<form id="create_service_template_form" action="">\
|
||||
<div class="row">\
|
||||
<div class="service_template_param st_man six columns">\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="service_name">' + tr("Name") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<input type="text" id="service_name" name="service_name" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Name for this template") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="service_template_param st_man large-6 columns">\
|
||||
<label for="service_name">' + tr("Name") +
|
||||
'<span class="tip">'+ tr("Name for this template") +'</span>'+
|
||||
'</label>'+
|
||||
'<input type="text" id="service_name" name="service_name" />\
|
||||
</div>\
|
||||
<div class="service_template_param st_man six columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="service_template_param st_man six columns">\
|
||||
<div class="service_template_param st_man large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="deployment">' + tr("Strategy") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="service_template_param st_man large-6 columns">\
|
||||
<label for="deployment">' + tr("Strategy") +
|
||||
'<span class="tip">'+ tr("Straight strategy will instantiate each role in order: parents role will be deployed before their children. None strategy will instantiate the roles regardless of their relationships.") +'</span>'+
|
||||
'</label>\
|
||||
<select name="deployment">\
|
||||
<option value="straight">'+ tr("Straight") + '</option>\
|
||||
<option value="none">'+ tr("None") + '</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Straight strategy will instantiate each role in order: parents role will be deployed before their children. None strategy will instantiate the roles regardless of their relationships.") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="service_template_param st_man six columns">\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="vm_template">' + tr("Shutdown action") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="service_template_param st_man large-6 columns">\
|
||||
<label for="vm_template">' + tr("Shutdown action") +
|
||||
'<span class="tip">'+ tr("VM shutdown action: 'shutdown' or 'shutdown-hard'.") +'</span>'+
|
||||
'</label>\
|
||||
<select name="shutdown_action_service">\
|
||||
<option value=""></option>\
|
||||
<option value="shutdown">'+tr("Shutdown")+'</option>\
|
||||
<option value="shutdown-hard">'+tr("Shutdown hard")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("VM shutdown action: 'shutdown' or 'shutdown-hard'.") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row" id="new_role">\
|
||||
<dl class="tabs" id="roles_tabs">\
|
||||
<dt><div type="button" class="button tiny radius" id="tf_btn_roles"><span class="fa fa-plus"></span> '+tr("Add another role")+'</div></dt>\
|
||||
<br>\
|
||||
<br>\
|
||||
<div id="new_role">\
|
||||
<dl class="tabs vertical" id="roles_tabs" data-tab>\
|
||||
<dt class="text-center"><div type="button" class="button tiny radius" id="tf_btn_roles"><span class="fa fa-plus"></span> '+tr("Add another role")+'</div></dt>\
|
||||
</dl>\
|
||||
<ul class="tabs-content" id="roles_tabs_content">\
|
||||
</ul>\
|
||||
<div class="tabs-content vertical" id="roles_tabs_content">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button id="create_service_template_submit" class="button radius right success"" type="action" value="ServiceTemplate.create">' + tr("Create") + '</button>\
|
||||
<button id="update_service_template_submit" class="button radius right success"" type="action" value="ServiceTemplate.update" hidden>' + tr("Update") + '</button>\
|
||||
<button id="create_service_template_reset" class="button radius secondary" type="reset" value="reset">' + tr("Reset") + '</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
@ -197,66 +123,40 @@ var create_service_template_tmpl = '\
|
||||
</div>';
|
||||
|
||||
var role_tab_content = '\
|
||||
<div class="">\
|
||||
<div class="service_template_param service_role st_man six columns">\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="name">' + tr("Role Name") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="service_template_param service_role st_man large-6 columns">\
|
||||
<label for="name">' + tr("Role Name") +
|
||||
'<span class="tip">'+ tr("Name of the role") +'</span>'+
|
||||
'</label>\
|
||||
<input type="text" id="role_name" name="name"/>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Name of the role") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="cardinality">' + tr("Cardinality") + ':</label>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input type="text" id="cardinality" name="cardinality" value="1" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Number of VMs to instantiate with this role") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="service_template_param service_role six columns">\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="vm_template">' + tr("VM template") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="service_template_param service_role large-6 columns">\
|
||||
<label for="vm_template">' + tr("VM template") +
|
||||
'<span class="tip">'+ tr("Template associated to this role") +'</span>'+
|
||||
'</label>\
|
||||
<select name="vm_template">\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Template associated to this role") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="vm_template">' + tr("Shutdown action") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<select name="shutdown_action_role">\
|
||||
<option value=""></option>\
|
||||
<option value="shutdown">'+tr("Shutdown")+'</option>\
|
||||
<option value="shutdown-hard">'+tr("Shutdown hard")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("VM shutdown action: 'shutdown' or 'shutdown-hard'. If it is not set, the one set for the Service will be used") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="three columns">\
|
||||
<div class="service_template_param service_role large-3 columns">\
|
||||
<label for="cardinality">' + tr("Cardinality") +
|
||||
'<span class="tip">'+ tr("Number of VMs to instantiate with this role") +'</span>'+
|
||||
'</label>\
|
||||
<input type="text" id="cardinality" name="cardinality" value="1" />\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<table id="parent_roles" class="extended_table twelve">\
|
||||
<div class="service_template_param service_role large-3 columns">\
|
||||
<label for="vm_template">' + tr("Shutdown action") +
|
||||
'<span class="tip">'+ tr("VM shutdown action: 'shutdown' or 'shutdown-hard'. If it is not set, the one set for the Service will be used") +'</span>'+
|
||||
'</label>\
|
||||
<select name="shutdown_action_role">\
|
||||
<option value=""></option>\
|
||||
<option value="shutdown">'+tr("Shutdown")+'</option>\
|
||||
<option value="shutdown-hard">'+tr("Shutdown hard")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="service_template_param service_role large-6 columns">\
|
||||
<table id="parent_roles" class="extended_table dataTable">\
|
||||
<thead>\
|
||||
<tr><th colspan="2">'+tr("Parent roles")+'</th></tr>\
|
||||
</thead>\
|
||||
@ -264,157 +164,139 @@ var role_tab_content = '\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="three columns">\
|
||||
</div>\
|
||||
<br>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<h5>'+tr("Elasticity")+'</h5>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="eleven columns centered">\
|
||||
<fieldset>\
|
||||
<legend>'+tr("Elasticity")+' - <span id="role_name_text"></span></legend>\
|
||||
<div class="">\
|
||||
<div class="four columns">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="min_vms">' + tr("Min VMs") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<input type="text" id="min_vms" name="min_vms" value="" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Minimum number of VMs for elasticity adjustments") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="four columns">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="max_vms">' + tr("Max VMs") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<input type="text" id="max_vms" name="max_vms" value="" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Maximum number of VMs for elasticity adjustments") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="four columns">\
|
||||
<div class="five columns">\
|
||||
<label class="inline right" for="cooldown">' + tr("Cooldown") + ':</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<input type="text" id="cooldown" name="cooldown" value="" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="tip">'+ tr("Cooldown time after an elasticity operation (secs)") +'</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="">\
|
||||
<div class="twelve columns">\
|
||||
<br>\
|
||||
<table id="elasticity_policies_table" class="policies_table twelve">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="8">\
|
||||
'+tr("Elasticty policies")+'\
|
||||
<div type="button" class="button tiny radius right secondary" id="tf_btn_elas_policies"><span class="fa fa-plus"></span> '+tr("Add")+'</div>\
|
||||
</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th style="width:14%">'+tr("Type")+'\
|
||||
<span class="tip">'+tr("Type of adjustment.")+'<br><br>\
|
||||
'+tr("CHANGE: Add/substract the given number of VMs.")+'<br>\
|
||||
'+tr("CARDINALITY: Set the cardinality to the given number.")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: Add/substract the given percentage to the current cardinality.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:12%">'+tr("Adjust")+'\
|
||||
<span class="tip">'+tr("Positive or negative adjustment. Its meaning depends on 'type'")+'<br><br>\
|
||||
'+tr("CHANGE: -2, will substract 2 VMs from the role")+'<br>\
|
||||
'+tr("CARDINALITY: 8, will set carditanilty to 8")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: 20, will increment cardinality by 20%")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:9%">'+tr("Min")+'\
|
||||
<span class="tip">'+tr("Optional parameter for PERCENTAGE_CHANGE adjustment type. If present, the policy will change the cardinality by at least the number of VMs set in this attribute.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:20%">'+tr("Expression")+'\
|
||||
<span class="tip">'+tr("Expression to trigger the elasticity")+'<br><br>\
|
||||
'+tr("Example: ATT < 20")+'<br>\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:15%">'+tr("# Periods")+'\
|
||||
<span class="tip">'+tr("Number of periods that the expression must be true before the elasticity is triggered")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:12%">'+tr("Period")+'\
|
||||
<span class="tip">'+tr("Duration, in seconds, of each period in '# Periods'")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:15%">'+tr("Cooldown")+'\
|
||||
<span class="tip">'+tr("Cooldown period duration after a scale operation, in seconds")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:3%"></th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="elasticity_policies_tbody">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="">\
|
||||
<div class="twelve columns">\
|
||||
<br>\
|
||||
<table id="scheduled_policies_table" class="policies_table twelve">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="6">\
|
||||
'+tr("Scheduled policies")+'\
|
||||
<div type="button" class="button tiny radius right secondary" id="tf_btn_sche_policies"><span class="fa fa-plus"></span> '+tr("Add")+'</div>\
|
||||
</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th style="width:14%">'+tr("Type")+'\
|
||||
<span class="tip">'+tr("Type of adjustment.")+'<br><br>\
|
||||
'+tr("CHANGE: Add/substract the given number of VMs.")+'<br>\
|
||||
'+tr("CARDINALITY: Set the cardinality to the given number.")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: Add/substract the given percentage to the current cardinality.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:12%">'+tr("Adjust")+'\
|
||||
<span class="tip">'+tr("Positive or negative adjustment. Its meaning depends on 'type'")+'<br><br>\
|
||||
'+tr("CHANGE: -2, will substract 2 VMs from the role")+'<br>\
|
||||
'+tr("CARDINALITY: 8, will set carditanilty to 8")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: 20, will increment cardinality by 20%")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:9%">'+tr("Min")+'\
|
||||
<span class="tip">'+tr("Optional parameter for PERCENTAGE_CHANGE adjustment type. If present, the policy will change the cardinality by at least the number of VMs set in this attribute.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:28%">'+tr("Time format")+'\
|
||||
<span class="tip">'+tr("Recurrence: Time for recurring adjustements. Time is specified with the Unix cron syntax")+'<br><br>\
|
||||
'+tr("Start time: Exact time for the adjustement")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:33%">'+tr("Time expression")+'\
|
||||
<span class="tip">'+tr("Time expression depends on the the time formar selected")+'<br><br>\
|
||||
'+tr("Recurrence: Time for recurring adjustements. Time is specified with the Unix cron syntax")+'<br>\
|
||||
'+tr("Start time: Exact time for the adjustement")+'<br>\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:3%"></th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="scheduled_policies_tbody">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
<div class="large-3 columns">\
|
||||
<label for="min_vms">' + tr("Min VMs") +
|
||||
'<span class="tip">'+ tr("Minimum number of VMs for elasticity adjustments") +'</span>'+
|
||||
'</label>\
|
||||
<input type="text" id="min_vms" name="min_vms" value="" />\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<label for="max_vms">' + tr("Max VMs") +
|
||||
'<span class="tip">'+ tr("Maximum number of VMs for elasticity adjustments") +'</span>'+
|
||||
'</label>\
|
||||
<input type="text" id="max_vms" name="max_vms" value="" />\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
<label for="cooldown">' + tr("Cooldown") +
|
||||
'<span class="tip">'+ tr("Cooldown time after an elasticity operation (secs)") +'</span>'+
|
||||
'</label>\
|
||||
<input type="text" id="cooldown" name="cooldown" value="" />\
|
||||
</div>\
|
||||
<div class="large-3 columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<table id="elasticity_policies_table" class="policies_table dataTable">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="8">\
|
||||
'+tr("Elasticty policies")+'\
|
||||
<div type="button" class="button tiny radius right secondary" id="tf_btn_elas_policies"><span class="fa fa-plus"></span> '+tr("Add")+'</div>\
|
||||
</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th style="width:14%">'+tr("Type")+'\
|
||||
<br><span class="tip">'+tr("Type of adjustment.")+'<br><br>\
|
||||
'+tr("CHANGE: Add/substract the given number of VMs.")+'<br>\
|
||||
'+tr("CARDINALITY: Set the cardinality to the given number.")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: Add/substract the given percentage to the current cardinality.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:12%">'+tr("Adjust")+'\
|
||||
<br><span class="tip">'+tr("Positive or negative adjustment. Its meaning depends on 'type'")+'<br><br>\
|
||||
'+tr("CHANGE: -2, will substract 2 VMs from the role")+'<br>\
|
||||
'+tr("CARDINALITY: 8, will set carditanilty to 8")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: 20, will increment cardinality by 20%")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:9%">'+tr("Min")+'\
|
||||
<br><span class="tip">'+tr("Optional parameter for PERCENTAGE_CHANGE adjustment type. If present, the policy will change the cardinality by at least the number of VMs set in this attribute.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:30%">'+tr("Expression")+'\
|
||||
<br><span class="tip">'+tr("Expression to trigger the elasticity")+'<br><br>\
|
||||
'+tr("Example: ATT < 20")+'<br>\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:8%">#\
|
||||
<br><span class="tip">'+tr("Number of periods that the expression must be true before the elasticity is triggered")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:9%">'+tr("Period")+'\
|
||||
<br><span class="tip">'+tr("Duration, in seconds, of each period in '# Periods'")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:15%">'+tr("Cooldown")+'\
|
||||
<br><span class="tip">'+tr("Cooldown period duration after a scale operation, in seconds")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:3%"></th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="elasticity_policies_tbody">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<table id="scheduled_policies_table" class="policies_table dataTable">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="6">\
|
||||
'+tr("Scheduled policies")+'\
|
||||
<div type="button" class="button tiny radius right secondary" id="tf_btn_sche_policies"><span class="fa fa-plus"></span> '+tr("Add")+'</div>\
|
||||
</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th style="width:14%">'+tr("Type")+'\
|
||||
<br><span class="tip">'+tr("Type of adjustment.")+'<br><br>\
|
||||
'+tr("CHANGE: Add/substract the given number of VMs.")+'<br>\
|
||||
'+tr("CARDINALITY: Set the cardinality to the given number.")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: Add/substract the given percentage to the current cardinality.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:12%">'+tr("Adjust")+'\
|
||||
<br><span class="tip">'+tr("Positive or negative adjustment. Its meaning depends on 'type'")+'<br><br>\
|
||||
'+tr("CHANGE: -2, will substract 2 VMs from the role")+'<br>\
|
||||
'+tr("CARDINALITY: 8, will set carditanilty to 8")+'<br>\
|
||||
'+tr("PERCENTAGE_CHANGE: 20, will increment cardinality by 20%")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:9%">'+tr("Min")+'\
|
||||
<br><span class="tip">'+tr("Optional parameter for PERCENTAGE_CHANGE adjustment type. If present, the policy will change the cardinality by at least the number of VMs set in this attribute.")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:28%">'+tr("Time format")+'\
|
||||
<br><span class="tip">'+tr("Recurrence: Time for recurring adjustements. Time is specified with the Unix cron syntax")+'<br><br>\
|
||||
'+tr("Start time: Exact time for the adjustement")+'\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:33%">'+tr("Time expression")+'\
|
||||
<br><span class="tip">'+tr("Time expression depends on the the time formar selected")+'<br><br>\
|
||||
'+tr("Recurrence: Time for recurring adjustements. Time is specified with the Unix cron syntax")+'<br>\
|
||||
'+tr("Start time: Exact time for the adjustement")+'<br>\
|
||||
</span>\
|
||||
</th>\
|
||||
<th style="width:3%"></th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="scheduled_policies_tbody">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
@ -501,8 +383,13 @@ var service_template_actions = {
|
||||
"ServiceTemplate.refresh" : {
|
||||
type: "custom",
|
||||
call: function () {
|
||||
var tab = dataTable_service_templates.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("ServiceTemplate.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_service_templates);
|
||||
Sunstone.runAction("ServiceTemplate.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -624,10 +511,29 @@ var service_template_info_panel = {
|
||||
|
||||
var service_templates_tab = {
|
||||
title: "Templates",
|
||||
content: service_template_tab_content,
|
||||
buttons: service_template_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'oneflow-dashboard'
|
||||
parentTab: 'oneflow-dashboard',
|
||||
search_input: '<input id="service_templates_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-file-o"></i> '+tr("OneFlow - Templates"),
|
||||
info_header: '<i class="fa fa-file-o"></i> '+tr("OneFlow - Template"),
|
||||
subheader: '<span/> <small></small> ',
|
||||
content: '<div class="row" id="error_message" hidden>\
|
||||
<div class="alert-box alert radius">'+tr("Cannot connect to OneFlow server")+'</div>\
|
||||
</div>',
|
||||
table: '<table id="datatable_service_templates" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(service_template_actions);
|
||||
@ -687,13 +593,14 @@ function updateServiceTemplateInfo(request,elem){
|
||||
var elem_info = elem.DOCUMENT;
|
||||
|
||||
var info_tab = {
|
||||
title: tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content:
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_template_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_template_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="2">'+tr("Service Template")+' \"'+elem_info.NAME+'\"'+'</th></tr>\
|
||||
<tr><th colspan="2">'+tr("Information")+'</th></tr>\
|
||||
</thead>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("ID")+'</td>\
|
||||
@ -713,7 +620,7 @@ function updateServiceTemplateInfo(request,elem){
|
||||
</tr>\
|
||||
</table>' +
|
||||
'</div>\
|
||||
<div class="six columns">' + insert_permissions_table('oneflow-templates',
|
||||
<div class="large-6 columns">' + insert_permissions_table('oneflow-templates',
|
||||
"ServiceTemplate",
|
||||
elem_info.ID,
|
||||
elem_info.UNAME,
|
||||
@ -728,6 +635,7 @@ function updateServiceTemplateInfo(request,elem){
|
||||
|
||||
var roles_tab = {
|
||||
title : "Roles",
|
||||
icon: "fa-wrench",
|
||||
content : '<form class="custom" id="roles_form" action="">\
|
||||
<div id="roles_info" class="columns twelve">\
|
||||
<table id="datatable_service_template_roles" class="table twelve">\
|
||||
@ -812,8 +720,8 @@ function updateServiceTemplateInfo(request,elem){
|
||||
<fieldset>\
|
||||
<legend>'+tr("Role")+' - '+role.name+'</legend>';
|
||||
|
||||
info_str += "<div class='twelve columns'>\
|
||||
<table class='twelve datatable extended_table policies_table'>\
|
||||
info_str += "<div class='large-12 columns'>\
|
||||
<table class='dataTable extended_table policies_table'>\
|
||||
<thead>\
|
||||
<tr><th colspan='8'>"+tr("Information")+"</th></tr>\
|
||||
</thead>\
|
||||
@ -835,10 +743,10 @@ function updateServiceTemplateInfo(request,elem){
|
||||
|
||||
|
||||
info_str += "</div>\
|
||||
<div class='twelve columns'>";
|
||||
<div class='large-12 columns'>";
|
||||
|
||||
if (role.elasticity_policies && role.elasticity_policies.length > 0) {
|
||||
info_str += '<table class="twelve datatable extended_table policies_table">\
|
||||
info_str += '<table class="dataTable extended_table policies_table">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="7">'+tr("Elasticity policies")+'</th>\
|
||||
@ -902,7 +810,7 @@ function updateServiceTemplateInfo(request,elem){
|
||||
}
|
||||
|
||||
if (role.scheduled_policies && role.scheduled_policies.length > 0) {
|
||||
info_str += '<table class="twelve datatable extended_table policies_table">\
|
||||
info_str += '<table class="dataTable extended_table policies_table">\
|
||||
<thead style="background:#dfdfdf">\
|
||||
<tr>\
|
||||
<th colspan="5">'+tr("Scheduled policies")+'</th>\
|
||||
@ -1035,7 +943,7 @@ function setup_role_tab_content(role_section, html_role_id) {
|
||||
<input type="text" id="cooldown" name="cooldown"/>\
|
||||
</td>\
|
||||
<td>\
|
||||
<a href="#"><i class="fa fa-times-sign remove-tab"></i></a>\
|
||||
<a href="#"><i class="fa fa-times-circle remove-tab"></i></a>\
|
||||
</td>\
|
||||
</tr>');
|
||||
new_tr.appendTo($("#elasticity_policies_tbody", role_section));
|
||||
@ -1066,7 +974,7 @@ function setup_role_tab_content(role_section, html_role_id) {
|
||||
<input type="text" id="time" name="time"/>\
|
||||
</td>\
|
||||
<td>\
|
||||
<a href="#"><i class="fa fa-times-sign remove-tab"></i></a>\
|
||||
<a href="#"><i class="fa fa-times-circle remove-tab"></i></a>\
|
||||
</td>\
|
||||
</tr>')
|
||||
new_tr.appendTo($("#scheduled_policies_tbody", role_section))
|
||||
@ -1105,7 +1013,7 @@ function setupCreateServiceTemplateDialog(){
|
||||
|
||||
var dialog = $create_service_template_dialog;
|
||||
dialog.html(create_service_template_tmpl);
|
||||
dialog.addClass("reveal-modal xlarge max-height");
|
||||
dialog.addClass("reveal-modal xlarge max-height").attr("data-reveal", "");
|
||||
|
||||
setupTips(dialog);
|
||||
|
||||
@ -1113,18 +1021,17 @@ function setupCreateServiceTemplateDialog(){
|
||||
var html_role_id = 'role' + role_id;
|
||||
|
||||
// Append the new div containing the tab and add the tab to the list
|
||||
var role_section = $('<li id="'+html_role_id+'Tab" class="wizard_internal_tab">'+
|
||||
var role_section = $('<div id="'+html_role_id+'Tab" class="content wizard_internal_tab">'+
|
||||
role_tab_content +
|
||||
'</li>').appendTo($("ul#roles_tabs_content"));
|
||||
'</div>').appendTo($("#roles_tabs_content"));
|
||||
|
||||
var a = $("<dd>\
|
||||
<a id='"+html_role_id+"' href='#"+html_role_id+"'><span id='role_name_text'>"+tr("Role ")+role_id+" </span>\
|
||||
<i class='fa fa-times-sign remove-tab'></i>\
|
||||
<a id='"+html_role_id+"' href='#"+html_role_id+"Tab'><span id='role_name_text'>"+tr("Role ")+role_id+" </span>\
|
||||
<i class='fa fa-times-circle remove-tab'></i>\
|
||||
</a>\
|
||||
</dd>").appendTo($("dl#roles_tabs"));
|
||||
|
||||
$("#"+html_role_id, a).click();
|
||||
$(document).foundationTabs("set_tab", a);
|
||||
$("a", a).trigger("click");
|
||||
|
||||
setup_role_tab_content(role_section, html_role_id);
|
||||
|
||||
@ -1135,7 +1042,7 @@ function setupCreateServiceTemplateDialog(){
|
||||
$( "#roles_tabs i.remove-tab" ).live( "click", function() {
|
||||
var target = $(this).parent().attr("href");
|
||||
var dd = $(this).closest('dd');
|
||||
var dl = $(this).closest('dl');
|
||||
var dl = $(this).closest('.tabs-content');
|
||||
var content = $(target + 'Tab');
|
||||
|
||||
dd.remove();
|
||||
@ -1143,7 +1050,7 @@ function setupCreateServiceTemplateDialog(){
|
||||
|
||||
if (dd.attr("class") == 'active') {
|
||||
$('a', dl.children('dd').last()).click();
|
||||
dl.foundationTabs("set_tab", dl.children('dd').last());
|
||||
//TODOO dl.foundationTabs("set_tab", dl.children('dd').last());
|
||||
}
|
||||
|
||||
roles_index--;
|
||||
@ -1195,25 +1102,28 @@ function setupCreateServiceTemplateDialog(){
|
||||
$('#create_service_template_submit',dialog).click(function(){
|
||||
var json_template = generate_json_service_template_from_form();
|
||||
Sunstone.runAction("ServiceTemplate.create", json_template );
|
||||
dialog.trigger("reveal:close");
|
||||
dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#update_service_template_submit',dialog).click(function(){
|
||||
var json_template = generate_json_service_template_from_form();
|
||||
Sunstone.runAction("ServiceTemplate.update",service_template_to_update_id, JSON.stringify(json_template));
|
||||
dialog.trigger("reveal:close");
|
||||
dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#create_service_template_reset', dialog).click(function(){
|
||||
$create_service_template_dialog.trigger('reveal:close');
|
||||
$create_service_template_dialog.remove();
|
||||
$create_service_template_dialog.trigger('close');
|
||||
$create_service_template_dialog.html("");
|
||||
setupCreateServiceTemplateDialog();
|
||||
|
||||
popUpCreateServiceTemplateDialog();
|
||||
});
|
||||
|
||||
|
||||
$(document).foundation();
|
||||
|
||||
roles_index = 0;
|
||||
add_role_tab(roles_index);
|
||||
}
|
||||
@ -1271,7 +1181,7 @@ function generate_json_service_template_from_form() {
|
||||
|
||||
var roles = [];
|
||||
|
||||
$('#roles_tabs_content li', $create_service_template_dialog).each(function(){
|
||||
$('#roles_tabs_content .content', $create_service_template_dialog).each(function(){
|
||||
var role = {};
|
||||
role['name'] = $('input[name="name"]', this).val();
|
||||
role['cardinality'] = $('input[name="cardinality"]', this).val();
|
||||
@ -1365,7 +1275,7 @@ function popUpCreateServiceTemplateDialog(){
|
||||
|
||||
$("#service_name", dialog).removeAttr("disabled");
|
||||
|
||||
dialog.reveal();
|
||||
dialog.foundation().foundation('reveal', 'open');
|
||||
}
|
||||
|
||||
function popUpUpdateServiceTemplateDialog() {
|
||||
@ -1486,7 +1396,7 @@ function fillUpUpdateServiceTemplateDialog(request, response){
|
||||
|
||||
service_template_to_update_id = service_template.ID;
|
||||
|
||||
dialog.reveal();
|
||||
dialog.foundation().foundation('reveal', 'open');
|
||||
}
|
||||
|
||||
// Set the autorefresh interval for the datatable
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
var system_tab = {
|
||||
title: '<i class="fa fa-cogs"></i>'+tr("System")
|
||||
title: '<i class="fa fa-cogs"></i>'+tr("System"),
|
||||
no_content: true
|
||||
}
|
||||
|
||||
Sunstone.addMainTab('system-tab',system_tab);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -42,60 +42,6 @@ var user_acct_graphs = [
|
||||
];
|
||||
|
||||
|
||||
var users_tab_content = '\
|
||||
<form class="custom" id="user_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-user"></i> '+tr("Users")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span id="total_users"/> <small>'+tr("TOTAL")+'</small>\
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="user_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
<br>\
|
||||
<br>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_users" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Auth driver")+'</th>\
|
||||
<th>'+tr("VMs")+'</th>\
|
||||
<th>'+tr("Memory")+'</th>\
|
||||
<th>'+tr("CPU")+'</th>\
|
||||
<th>'+tr("Group ID")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyusers">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</form>';
|
||||
|
||||
// authn = "ssh,x509,ldap,server_cipher,server_x509"
|
||||
|
||||
var auth_drivers_div =
|
||||
'<select name="driver" id="driver">\
|
||||
<option value="core" selected="selected">'+tr("Core")+'</option>\
|
||||
@ -111,262 +57,182 @@ var auth_drivers_div =
|
||||
|
||||
// Used also from groups-tabs.js
|
||||
var user_creation_div =
|
||||
'<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="username">'+tr("Username")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
'<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="username">'+tr("Username")+'</label>\
|
||||
<input type="text" name="username" id="username" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="pass">'+tr("Password")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="pass">'+tr("Password")+'</label>\
|
||||
<input type="password" name="pass" id="pass" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="driver">'+tr("Authentication")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">'+auth_drivers_div+'</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="driver">'+tr("Authentication")+'</label>\
|
||||
'+auth_drivers_div+'\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
var create_user_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_user_header">'+tr("Create User")+'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 class="subheader" id="create_user_header">'+tr("Create User")+'</h3>\
|
||||
</div>\
|
||||
<form id="create_user_form" action="">'+
|
||||
user_creation_div +
|
||||
'<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_user_submit" value="user/create">'+tr("Create")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
user_creation_div +
|
||||
'<div class="form_buttons row">\
|
||||
<button class="button radius right success" id="create_user_submit" value="user/create">'+tr("Create")+'</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
|
||||
var update_pw_tmpl = '<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Update Password")+'</small>\
|
||||
</h3>\
|
||||
var update_pw_tmpl = '<div class="row">\
|
||||
<h3 id="create_vnet_header" class="subheader">'+tr("Update Password")+'</h3>\
|
||||
</div>\
|
||||
<form id="update_user_pw_form" action="">\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="new_password">'+tr("New password")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="password" name="new_password" id="new_password" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="new_password">'+tr("New password")+':\
|
||||
<input type="password" name="new_password" id="new_password" />\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="confirm_password">'+tr("Confirm Password")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="password" name="confirm_password" id="confirm_password" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="confirm_password">'+tr("Confirm Password")+':\
|
||||
<input type="password" name="confirm_password" id="confirm_password" />\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="update_pw_submit" type="submit" value="User.update">'+tr("Change")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
|
||||
var change_password_tmpl = '<div class="panel">\
|
||||
<h3>\
|
||||
<small id="change_password_header">'+tr("Change authentication")+'</small>\
|
||||
</h3>\
|
||||
var change_password_tmpl = '<div class="row">\
|
||||
<h3 id="change_password_header" class="subheader">'+tr("Change authentication")+'</h3>\
|
||||
</div>\
|
||||
<form id="change_password_form" action="">\
|
||||
<div class="row">\
|
||||
<div id="confirm_with_select_tip">'+tr("Please choose the new type of authentication for the selected users")+':\
|
||||
<div class="large-12 columns">\
|
||||
<label for="driver">'+tr("Authentication")+':\
|
||||
'+auth_drivers_div+'\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">'+auth_drivers_div+'\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="change_password_submit" type="submit" value="User.change_authentication">'+tr("Change")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
|
||||
var user_quotas_tmpl = '<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Update Quota")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="user_quotas_form" action="">\
|
||||
var quotas_tmpl = '<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<dl class="tabs right-info-tabs text-center" data-tab>\
|
||||
<dd class="active"><a href="#vm_quota"><i class="fa fa-cloud"></i><br>'+tr("VM")+'</a></dd>\
|
||||
<dd><a href="#datastore_quota"><i class="fa fa-folder-open"></i><br>'+tr("Datastore")+'</a></dd>\
|
||||
<dd><a href="#image_quota"><i class="fa fa-upload"></i><br>'+tr("Image")+'</a></dd>\
|
||||
<dd><a href="#network_quota"><i class="fa fa-globe"></i><br>'+tr("VNet")+'</a></dd>\
|
||||
</dl>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div id="quota_types">\
|
||||
<label>'+tr("Quota type")+':</label>\
|
||||
<input type="radio" name="quota_type" value="vm">'+tr("Virtual Machine")+'</input>\
|
||||
<input type="radio" name="quota_type" value="datastore">'+tr("Datastore")+'</input>\
|
||||
<input type="radio" name="quota_type" value="image">'+tr("Image")+'</input>\
|
||||
<input type="radio" name="quota_type" value="network">'+tr("Network")+'</input>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div id="vm_quota">\
|
||||
<div class="large-4 columns">\
|
||||
<div class="tabs-content">\
|
||||
<div id="vm_quota" class="content active">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max VMs")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="VMS"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max VMs")+'\
|
||||
<input type="text" name="VMS"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max Memory (MB)")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="MEMORY"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max Memory (MB)")+'\
|
||||
<input type="text" name="MEMORY"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max CPU")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="CPU"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max CPU")+'\
|
||||
<input type="text" name="CPU"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label class="inline right" >'+tr("Max Volatile Storage (MB)")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
<input type="text" name="VOLATILE_SIZE"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max Volatile Storage (MB)")+'\
|
||||
<input type="text" name="VOLATILE_SIZE"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="datastore_quota">\
|
||||
<div id="datastore_quota" class="content">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Datastore")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="ID"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Datastore")+'\
|
||||
<select name="ID"></select>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max size (MB)")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="SIZE"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max size (MB)")+'\
|
||||
<input type="text" name="SIZE"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max images")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="IMAGES"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max images")+'\
|
||||
<input type="text" name="IMAGES"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="image_quota">\
|
||||
<div id="image_quota" class="content">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Image")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="ID"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Image")+'\
|
||||
<select name="ID"></select>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max RVMs")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="RVMS"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max RVMs")+'\
|
||||
<input type="text" name="RVMS"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="network_quota">\
|
||||
<div id="network_quota" class="content">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Network")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<select name="ID"></select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Network")+'\
|
||||
<select name="ID"></select>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" >'+tr("Max leases")+'</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="LEASES"></input>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
<div class="large-12 columns">\
|
||||
<label>'+tr("Max leases")+'\
|
||||
<input type="text" name="LEASES"></input>\
|
||||
</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<br>\
|
||||
</div>\
|
||||
<button class="button right small radius" id="add_quota_button" value="add_quota">'+tr("Add/edit quota")+'</button>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="large-8 columns">\
|
||||
<div class="current_quotas">\
|
||||
<table class="datatable twelve extended_table">\
|
||||
<table class="dataTable extended_table" cellpadding="0" cellspacing="0" border="0">\
|
||||
<thead><tr>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Quota")+'</th>\
|
||||
@ -376,12 +242,16 @@ var user_quotas_tmpl = '<div class="panel">\
|
||||
</table>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
</div>'
|
||||
var user_quotas_tmpl = '<div class="row">\
|
||||
<h3 id="create_vnet_header" class="subheader">'+tr("Update Quota")+'</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<form id="user_quotas_form" action="">'+
|
||||
quotas_tmpl +
|
||||
'<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_user_submit" type="submit" value="User.set_quota">'+tr("Apply changes")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
@ -415,8 +285,13 @@ var user_actions = {
|
||||
"User.refresh" : {
|
||||
type: "custom",
|
||||
call: function () {
|
||||
var tab = dataTable_users.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("User.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_users);
|
||||
Sunstone.runAction("User.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -586,18 +461,18 @@ var user_buttons = {
|
||||
},
|
||||
"User.update_password" : {
|
||||
type : "action",
|
||||
layout: "more_select",
|
||||
text : tr("Change password")
|
||||
layout: "main_buttons",
|
||||
text : tr("Password")
|
||||
},
|
||||
"User.change_authentication" : {
|
||||
type : "action",
|
||||
layout: "more_select",
|
||||
text : tr("Change authentication")
|
||||
layout: "main_buttons",
|
||||
text : tr("Auth")
|
||||
},
|
||||
"User.quotas_dialog" : {
|
||||
type : "action",
|
||||
layout: "more_select",
|
||||
text : tr("Update quotas"),
|
||||
layout: "main_buttons",
|
||||
text : tr("Quotas"),
|
||||
condition: mustBeAdmin
|
||||
},
|
||||
"User.chgrp" : {
|
||||
@ -649,25 +524,37 @@ var user_info_panel = {
|
||||
|
||||
var users_tab = {
|
||||
title: tr("Users"),
|
||||
content: users_tab_content,
|
||||
buttons: user_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'system-tab',
|
||||
condition: mustBeAdmin
|
||||
search_input: ' <input id="user_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-user"></i> '+tr("Users"),
|
||||
info_header: '<i class="fa fa-user"></i> '+tr("User"),
|
||||
subheader: '<span>\
|
||||
<span class="total_users"/> <small>'+tr("TOTAL")+'</small>\
|
||||
</span>',
|
||||
table: '<table id="datatable_users" cellpadding="0" cellspacing="0" border="0" class="tdisplay">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Auth driver")+'</th>\
|
||||
<th>'+tr("VMs")+'</th>\
|
||||
<th>'+tr("Memory")+'</th>\
|
||||
<th>'+tr("CPU")+'</th>\
|
||||
<th>'+tr("Group ID")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyusers">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
};
|
||||
|
||||
var users_tab_non_admin = {
|
||||
title: tr("User info"),
|
||||
content: users_tab_content,
|
||||
buttons: user_buttons,
|
||||
tabClass: 'subTab',
|
||||
parentTab: 'dashboard-tab',
|
||||
condition: mustNotBeAdmin
|
||||
}
|
||||
|
||||
Sunstone.addActions(user_actions);
|
||||
Sunstone.addMainTab('users-tab',users_tab);
|
||||
Sunstone.addMainTab('users_tab_non_admin',users_tab_non_admin);
|
||||
Sunstone.addInfoPanel("user_info_panel",user_info_panel);
|
||||
|
||||
function userElements(){
|
||||
@ -767,24 +654,21 @@ function updateUsersView(request,users_list,quotas_list){
|
||||
|
||||
updateUserSelect();
|
||||
|
||||
$("#total_users", $dashboard).text(users_list.length);
|
||||
|
||||
var form = $("#user_form");
|
||||
|
||||
$("#total_users", form).text(users_list.length);
|
||||
$(".total_users").text(users_list.length);
|
||||
};
|
||||
|
||||
function updateUserInfo(request,user){
|
||||
var info = user.USER;
|
||||
|
||||
var info_tab = {
|
||||
title : tr("User information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content :
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_user_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_user_table" class="dataTable extended_table" cellpadding="0" cellspacing="0" border="0">\
|
||||
<thead>\
|
||||
<tr><th colspan="2">' + tr("User") + ' - '+info.NAME+'</th><th></th></tr>\
|
||||
<tr><th colspan="2">' + tr("Information") + '</th><th></th></tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
@ -792,6 +676,11 @@ function updateUserInfo(request,user){
|
||||
<td class="value_td">'+info.ID+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("Name") + '</td>\
|
||||
<td class="value_td">'+info.NAME+'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>' +
|
||||
insert_group_dropdown("User",info.ID,info.GNAME,info.GID) +
|
||||
'</tr>\
|
||||
@ -808,7 +697,7 @@ function updateUserInfo(request,user){
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">' +
|
||||
<div class="large-6 columns">' +
|
||||
insert_extended_template_table(info.TEMPLATE,
|
||||
"User",
|
||||
info.ID,
|
||||
@ -818,17 +707,18 @@ function updateUserInfo(request,user){
|
||||
};
|
||||
|
||||
var default_user_quotas = Quotas.default_quotas(info.DEFAULT_USER_QUOTAS)
|
||||
var quotas_tab_html = '<div class="three columns">' + Quotas.vms(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="three columns">' + Quotas.cpu(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="three columns">' + Quotas.memory(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="three columns">' + Quotas.volatile_size(info, default_user_quotas) + '</div>';
|
||||
var quotas_tab_html = '<div class="large-3 columns">' + Quotas.vms(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-3 columns">' + Quotas.cpu(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-3 columns">' + Quotas.memory(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-3 columns">' + Quotas.volatile_size(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<br><br>';
|
||||
quotas_tab_html += '<div class="six columns">' + Quotas.image(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="six columns">' + Quotas.network(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-6 columns">' + Quotas.image(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-6 columns">' + Quotas.network(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<br><br>';
|
||||
quotas_tab_html += '<div class="twelve columns">' + Quotas.datastore(info, default_user_quotas) + '</div>';
|
||||
quotas_tab_html += '<div class="large-12 columns">' + Quotas.datastore(info, default_user_quotas) + '</div>';
|
||||
var quotas_tab = {
|
||||
title : tr("Quotas"),
|
||||
icon: "fa-align-left",
|
||||
content : quotas_tab_html
|
||||
};
|
||||
|
||||
@ -879,12 +769,13 @@ function buildUserJSON(dialog){
|
||||
|
||||
// Prepare the user creation dialog
|
||||
function setupCreateUserDialog(){
|
||||
dialogs_context.append('<div title=\"'+tr("Create user")+'\" id="create_user_dialog"></div>');
|
||||
dialogs_context.append('<div id="create_user_dialog" class="reveal-modal tiny" data-reveal></div>');
|
||||
$create_user_dialog = $('#create_user_dialog',dialogs_context);
|
||||
var dialog = $create_user_dialog;
|
||||
dialog.html(create_user_tmpl);
|
||||
$(document).foundation();
|
||||
|
||||
dialog.addClass("reveal-modal");
|
||||
//dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
|
||||
//$('button',dialog).button();
|
||||
|
||||
@ -899,7 +790,7 @@ function setupCreateUserDialog(){
|
||||
}
|
||||
|
||||
Sunstone.runAction("User.create",user_json);
|
||||
$create_user_dialog.trigger("reveal:close")
|
||||
$create_user_dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
@ -910,7 +801,7 @@ function setupUpdatePasswordDialog(){
|
||||
var dialog = $update_pw_dialog;
|
||||
dialog.html(update_pw_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal");
|
||||
dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
|
||||
$('#update_user_pw_form',dialog).submit(function(){
|
||||
var pw=$('#new_password',this).val();
|
||||
@ -927,7 +818,7 @@ function setupUpdatePasswordDialog(){
|
||||
}
|
||||
|
||||
Sunstone.runAction("User.passwd",getSelectedNodes(dataTable_users),pw);
|
||||
$update_pw_dialog.trigger("reveal:close")
|
||||
$update_pw_dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
};
|
||||
@ -938,7 +829,7 @@ function setupChangeAuthenticationDialog(){
|
||||
var dialog = $change_auth_dialog;
|
||||
dialog.html(change_password_tmpl);
|
||||
|
||||
dialog.addClass("reveal-modal");
|
||||
dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
|
||||
$('input[name="custom_auth"]',dialog).parent().hide();
|
||||
$('select#driver', dialog).change(function(){
|
||||
@ -959,7 +850,7 @@ function setupChangeAuthenticationDialog(){
|
||||
}
|
||||
|
||||
Sunstone.runAction("User.chauth",getSelectedNodes(dataTable_users), driver);
|
||||
$change_auth_dialog.trigger("reveal:close")
|
||||
$change_auth_dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
};
|
||||
@ -971,6 +862,8 @@ function setupUserQuotasDialog(){
|
||||
var dialog = $user_quotas_dialog;
|
||||
dialog.html(user_quotas_tmpl);
|
||||
|
||||
$(document).foundation();
|
||||
|
||||
setupQuotasDialog(dialog);
|
||||
}
|
||||
|
||||
@ -979,20 +872,20 @@ function popUpUserQuotasDialog(){
|
||||
}
|
||||
|
||||
function popUpCreateUserDialog(){
|
||||
$create_user_dialog.reveal();
|
||||
$create_user_dialog.foundation().foundation('reveal', 'open');;
|
||||
$("input#username",$create_user_dialog).focus();
|
||||
}
|
||||
|
||||
|
||||
function popUpUpdatePasswordDialog(){
|
||||
$('#new_password',$update_pw_dialog).val("");
|
||||
$update_pw_dialog.reveal();
|
||||
$update_pw_dialog.foundation().foundation('reveal', 'open');;
|
||||
$("input#new_password",$update_pw_dialog).focus();
|
||||
}
|
||||
|
||||
function popUpChangeAuthenticationDialog(){
|
||||
$('#driver',$change_auth_dialog).val("");
|
||||
$change_auth_dialog.reveal();
|
||||
$change_auth_dialog.foundation().foundation('reveal', 'open');;
|
||||
}
|
||||
|
||||
// Prepare the autorefresh of the list
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -14,207 +14,103 @@
|
||||
/* limitations under the License. */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/*Virtual networks tab plugin*/
|
||||
|
||||
var vnets_tab_content = '\
|
||||
<form class="custom" id="virtualNetworks_form" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="fa fa-sitemap"></i> '+tr("Virtual Networks")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span id="total_vnets"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span id="addresses_vnets"/> <small>'+tr("USED IPs")+'</small>\
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="vnet_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_vnetworks" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Cluster")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Bridge")+'</th>\
|
||||
<th>'+tr("Leases")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyvnetworks">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
</form>';
|
||||
var addresses_vnets = 0;
|
||||
|
||||
var create_vn_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_vnet_header">'+tr("Create Virtual Network")+'</small>\
|
||||
</h3>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<dl class="tabs">\
|
||||
'<div class="row">'+
|
||||
'<div class="large-6 columns">'+
|
||||
'<h3 id="create_vnet_header" class="subheader">'+tr("Create Virtual Network")+'</h3>'+
|
||||
'</div>'+
|
||||
'<div class="large-6 columns">'+
|
||||
'<dl class="tabs right wizard_tabs" data-tab>\
|
||||
<dd class="active"><a href="#vnet_wizard">'+tr("Wizard")+'</a></dd>\
|
||||
<dd><a href="#vnet_advanced">'+tr("Advanced mode")+'</a></dd>\
|
||||
</dl>\
|
||||
<ul class="tabs-content">\
|
||||
<li class="active" id="vnet_wizardTab">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-body">\
|
||||
<div class="tabs-content">\
|
||||
<div class="content active" id="vnet_wizard">\
|
||||
<form id="create_vn_form_easy" action="" class="creation">\
|
||||
<div class="row">\
|
||||
<div class="three columns">\
|
||||
<label class="right inline" for="name" >' + tr("Name") + ':</label>\
|
||||
</div>\
|
||||
<div class="eight columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="name" >' + tr("Name") + ':</label>\
|
||||
<input type="text" name="name" id="name"/>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Type") + '</legend>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label for="ipv4_check" class="right"><input type="radio" name="ip_version" id="ipv4_check" value="ipv4" checked="checked"/>'+tr("IPv4")+'</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<label for="ipv6_check"><input type="radio" name="ip_version" id="ipv6_check" value="ipv6"/>'+tr("IPv6")+'</label>\
|
||||
<div class="large-12 columns">\
|
||||
<input type="radio" name="ip_version" id="ipv4_check" value="ipv4" checked="checked"/><label for="ipv4_check">'+tr("IPv4")+'</label>\
|
||||
<input type="radio" name="ip_version" id="ipv6_check" value="ipv6"/><label for="ipv6_check">'+tr("IPv6")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="net_address">'+tr("N. Address")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="net_address" id="net_address" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="net_address">'+tr("N. Address")+'</label>\
|
||||
<input type="text" name="net_address" id="net_address" />\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="net_mask">'+tr("N. Mask")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="net_mask" id="net_mask" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="net_mask">'+tr("N. Mask")+':</label>\
|
||||
<input type="text" name="net_mask" id="net_mask" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="site_prefix">'+tr("Site prefix")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="site_prefix" id="site_prefix" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="site_prefix">'+tr("Site prefix")+':</label>\
|
||||
<input type="text" name="site_prefix" id="site_prefix" />\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="global_prefix">'+tr("Global prefix")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="global_prefix" id="global_prefix" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="global_prefix">'+tr("Global prefix")+':</label>\
|
||||
<input type="text" name="global_prefix" id="global_prefix" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="net_dns">'+tr("DNS")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="net_dns" id="net_dns" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="net_dns">'+tr("DNS")+':</label>\
|
||||
<input type="text" name="net_dns" id="net_dns" />\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="net_gateway">'+tr("Gateway")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="net_gateway" id="net_gateway" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
<div class="large-6 columns">\
|
||||
<label for="net_gateway">'+tr("Gateway")+':</label>\
|
||||
<input type="text" name="net_gateway" id="net_gateway" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<label for="fixed_check" class="right"><input type="radio" name="fixed_ranged" id="fixed_check" value="fixed" checked="checked"/>'+tr("Fixed network")+'</label>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<label for="ranged_check"><input type="radio" name="fixed_ranged" id="ranged_check" value="ranged"/>'+tr("Ranged network")+'</label>\
|
||||
<div class="large-12 columns">\
|
||||
<input type="radio" name="fixed_ranged" id="fixed_check" value="fixed" checked="checked"/><label for="fixed_check">'+tr("Fixed network")+'</label>\
|
||||
<input type="radio" name="fixed_ranged" id="ranged_check" value="ranged"/><label for="ranged_check">'+tr("Ranged network")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="fixed">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="leaseip">'+tr("IP")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="leaseip">'+tr("IP")+':</label>\
|
||||
<input type="text" name="leaseip" id="leaseip" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="leasemac">'+tr("MAC")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="leasemac">'+tr("MAC")+':</label>\
|
||||
<input type="text" name="leasemac" id="leasemac" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<button class="add_remove_button add_button secondary button right small radius" id="add_lease" value="add/lease">\
|
||||
'+tr("Add")+'\
|
||||
</button>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<button class="add_remove_button secondary button small radius" id="remove_lease" value="remove/lease">\
|
||||
'+tr("Remove selected")+'\
|
||||
</button>\
|
||||
<div class="large-12 columns">\
|
||||
<button class="add_remove_button add_button secondary button small radius" id="add_lease" value="add/lease">'+tr("Add")+'</button>\
|
||||
<button class="add_remove_button secondary button small radius" id="remove_lease" value="remove/lease">'+tr("Remove selected")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="eight centered columns">\
|
||||
<select id="leases" name="leases" style="height:10em; width:100%" multiple>\
|
||||
<div class="large-12 columns">\
|
||||
<select id="leases" name="leases" style="height:10em !important; width:100%" multiple>\
|
||||
<!-- insert leases -->\
|
||||
</select>\
|
||||
</div>\
|
||||
@ -224,205 +120,152 @@ var create_vn_tmpl =
|
||||
</div>\
|
||||
<div id="ranged">\
|
||||
<div class="row">\
|
||||
<div class="four columns centered">\
|
||||
<label for="custom_pool" class="inline"><input type="checkbox" id="custom_pool"/>'+tr("Define a subnet by IP range")+'</label>\
|
||||
<div class="large-6 columns">\
|
||||
<input type="checkbox" id="custom_pool"/><label for="custom_pool" class="inline">'+tr("Define a subnet by IP range")+'</label>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="ip_start">'+tr("IP Start")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="ip_start">'+tr("IP Start")+':</label>\
|
||||
<input type="text" name="ip_start" id="ip_start" disabled="disabled" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="ip_end">'+tr("IP End")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="ip_end">'+tr("IP End")+':</label>\
|
||||
<input type="text" name="ip_end" id="ip_end" disabled="disabled" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="ranged_ipv6">\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="mac_start">'+tr("MAC Start")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="mac_start">'+tr("MAC Start")+':</label>\
|
||||
<input type="text" name="net_address" id="mac_start" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="net_size">'+tr("N. Size")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="net_size">'+tr("N. Size")+':</label>\
|
||||
<input type="text" name="net_size" id="net_size" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="six columns">\
|
||||
<label class="right inline" for="network_mode">'+tr("Network model")+':</label>\
|
||||
</div>\
|
||||
<div class="five columns">\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<label for="network_mode">'+tr("Network model")+':</label>\
|
||||
<select name="network_mode" id="network_mode">\
|
||||
<option value="default">'+tr("Default")+'</option>\
|
||||
<option value="802.1Q">'+tr("802.1Q")+'</option>\
|
||||
<option value="ebtables">'+tr("ebtables")+'</option>\
|
||||
<option value="openvswitch">'+tr("Open vSwitch")+'</option>\
|
||||
<option value="vmware">'+tr("VMware")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="bridge">'+tr("Bridge")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="bridge">'+tr("Bridge")+':</label>\
|
||||
<input type="text" name="bridge" id="bridge" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="phydev">'+tr("Physical device")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="phydev">'+tr("Physical device")+':</label>\
|
||||
<input type="text" name="phydev" id="phydev" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="vlan">'+tr("VLAN")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="vlan">'+tr("VLAN")+':</label>\
|
||||
<select name="vlan" id="vlan">\
|
||||
<option value="YES" selected="selected">'+tr("Yes")+'</option>\
|
||||
<option value="NO">'+tr("No")+'</option>\
|
||||
</select>\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="vlan_id">'+tr("VLAN ID")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="vlan_id">'+tr("VLAN ID")+':</label>\
|
||||
<input type="text" name="vlan_id" id="vlan_id" />\
|
||||
</div>\
|
||||
<div class="one columns ">\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Custom attributes") + '</legend>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="custom_var_vnet_name">'+tr("Name")+':</label>\
|
||||
<div class="large-12 columns">\
|
||||
<fieldset>\
|
||||
<legend>' + tr("Custom attributes") + '</legend>\
|
||||
<div class="row">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="custom_var_vnet_name">'+tr("Name")+':</label>\
|
||||
<input type="text" id="custom_var_vnet_name" name="custom_var_vnet_name" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" id="custom_var_vnet_name" name="custom_var_vnet_name" />\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="custom_var_vnet_value">'+tr("Value")+':</label>\
|
||||
<input type="text" id="custom_var_vnet_value" name="custom_var_vnet_value" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<button class="add_remove_button add_button secondary button small radius" id="add_custom_var_vnet_button" value="add_custom_vnet_var">'+tr("Add")+'\</button>\
|
||||
<button class="add_remove_button secondary button small radius" id="remove_custom_var_vnet_button" value="remove_custom_vnet_var">'+tr("Remove selected")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="four columns">\
|
||||
<label class="right inline" for="custom_var_vnet_value">'+tr("Value")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" id="custom_var_vnet_value" name="custom_var_vnet_value" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class="large-6 columns">\
|
||||
<div class="row">\
|
||||
<div class="large-12 columns">\
|
||||
<select id="custom_var_vnet_box" name="custom_var_vnet_box" style="height:10em !important; width:100%" multiple>\
|
||||
<!-- insert leases -->\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="six columns">\
|
||||
<button class="add_remove_button add_button secondary button right small radius" id="add_custom_var_vnet_button" value="add_custom_vnet_var">\
|
||||
'+tr("Add")+'\
|
||||
</button>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<button class="add_remove_button secondary button small radius" id="remove_custom_var_vnet_button" value="remove_custom_vnet_var">\
|
||||
'+tr("Remove selected")+'\
|
||||
</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="six columns">\
|
||||
<div class="row">\
|
||||
<div class="eight centered columns">\
|
||||
<select id="custom_var_vnet_box" name="custom_var_vnet_box" style="height:10em; width:100%" multiple>\
|
||||
<!-- insert leases -->\
|
||||
</select>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</fieldset>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success radius right" id="create_vn_submit_easy" value="vn/create">\
|
||||
'+tr("Create")+'\
|
||||
</button>\
|
||||
<button id="wizard_vnet_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</form>\
|
||||
</li>\
|
||||
<li id="vnet_advancedTab">\
|
||||
</div>\
|
||||
<div id="vnet_advanced" class="content">\
|
||||
<form id="create_vn_form_manual" action="">\
|
||||
<h4><small>'+tr("Write the Virtual Network template here")+'</small></h4>\
|
||||
<textarea id="template" rows="15" style="width:100%;"></textarea>\
|
||||
<div class="reveal-footer">\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success right radius" id="create_vn_submit_manual" value="vn/create">\
|
||||
'+tr("Create")+'\
|
||||
</button>\
|
||||
<button id="advanced_vnet_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<h4><small>'+tr("Write the Virtual Network template here")+'</small></h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="columns large-12">\
|
||||
<textarea id="template" rows="15" style="width:100%;"></textarea>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="reveal-footer">\
|
||||
<div class="form_buttons">\
|
||||
<button class="button success right radius" id="create_vn_submit_manual" value="vn/create">'+tr("Create")+'</button>\
|
||||
<button id="advanced_vnet_reset_button" class="button secondary radius" type="reset" value="reset">'+tr("Reset")+'</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</form>\
|
||||
</li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>';
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>';
|
||||
|
||||
var update_vnet_tmpl =
|
||||
'<form action="javascript:alert(\'js error!\');">\
|
||||
@ -518,8 +361,13 @@ var vnet_actions = {
|
||||
"Network.refresh" : {
|
||||
type: "custom",
|
||||
call: function(){
|
||||
var tab = dataTable_vNetworks.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Network.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_vNetworks);
|
||||
Sunstone.runAction("Network.list");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -736,11 +584,31 @@ var vnet_info_panel = {
|
||||
|
||||
var vnets_tab = {
|
||||
title: tr("Virtual Networks"),
|
||||
content: vnets_tab_content,
|
||||
buttons: vnet_buttons,
|
||||
tabClass: "subTab",
|
||||
parentTab: "infra-tab",
|
||||
showOnTopMenu: false
|
||||
search_input: '<input id="vnet_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-globe"></i> '+tr("Virtual Networks"),
|
||||
info_header: '<i class="fa fa-globe"></i> '+tr("Virtual Network"),
|
||||
subheader: '<span class="total_vnets"/> <small>'+tr("TOTAL")+'</small> \
|
||||
<span class="addresses_vnets"/> <small>'+tr("USED IPs")+'</small>',
|
||||
table: '<table id="datatable_vnetworks" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>'+tr("ID")+'</th>\
|
||||
<th>'+tr("Owner")+'</th>\
|
||||
<th>'+tr("Group")+'</th>\
|
||||
<th>'+tr("Name")+'</th>\
|
||||
<th>'+tr("Cluster")+'</th>\
|
||||
<th>'+tr("Type")+'</th>\
|
||||
<th>'+tr("Bridge")+'</th>\
|
||||
<th>'+tr("Leases")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyvnetworks">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
}
|
||||
|
||||
Sunstone.addActions(vnet_actions);
|
||||
@ -809,13 +677,8 @@ function updateVNetworksView(request, network_list){
|
||||
|
||||
updateView(network_list_array,dataTable_vNetworks);
|
||||
|
||||
$("#total_vnets", $dashboard).text(network_list.length);
|
||||
$("#addresses_vnets", $dashboard).text(addresses_vnets);
|
||||
|
||||
var form = $("#virtualNetworks_form");
|
||||
|
||||
$("#total_vnets", form).text(network_list.length);
|
||||
$("#addresses_vnets", form).text(addresses_vnets);
|
||||
$(".total_vnets").text(network_list.length);
|
||||
$(".addresses_vnets").text(addresses_vnets);
|
||||
}
|
||||
|
||||
//updates the information panel tabs and pops the panel up
|
||||
@ -823,11 +686,10 @@ function updateVNetworkInfo(request,vn){
|
||||
var vn_info = vn.VNET;
|
||||
var info_tab_content =
|
||||
'<div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_vn_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_vn_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">'+tr("Virtual Network")+' - '+vn_info.NAME+' '+
|
||||
'</th></tr>\
|
||||
<tr><th colspan="3">'+tr("Information")+'</th></tr>\
|
||||
</thead>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("ID")+'</td>\
|
||||
@ -845,29 +707,9 @@ function updateVNetworkInfo(request,vn){
|
||||
<tr>' +
|
||||
insert_cluster_dropdown("Network",vn_info.ID,vn_info.CLUSTER,vn_info.CLUSTER_ID) +
|
||||
'</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Bridge")+'</td>\
|
||||
<td class="value_td">'+ (typeof(vn_info.BRIDGE) == "object" ? "--": vn_info.BRIDGE) +'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("VLAN")+'</td>\
|
||||
<td class="value_td">'+ (vn_info.VLAN == "0" ? "no" : "yes") +'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("Physical device")+'</td>\
|
||||
<td class="value_td">'+ (typeof(vn_info.PHYDEV) == "object" ? "--": vn_info.PHYDEV) +'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td class="key_td">'+tr("VLAN ID")+'</td>\
|
||||
<td class="value_td">'+ (typeof(vn_info.VLAN_ID) == "object" ? "--": vn_info.VLAN_ID) +'</td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_permissions_table('vnets-tab',
|
||||
"Network",
|
||||
vn_info.ID,
|
||||
@ -883,12 +725,14 @@ function updateVNetworkInfo(request,vn){
|
||||
</div>';
|
||||
|
||||
var info_tab = {
|
||||
title: tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content: info_tab_content
|
||||
};
|
||||
|
||||
var leases_tab = {
|
||||
title: tr("Lease management"),
|
||||
title: tr("Leases"),
|
||||
icon: "fa-list-ul",
|
||||
content: printLeases(vn_info)
|
||||
};
|
||||
|
||||
@ -929,10 +773,10 @@ function updateVNetworkInfo(request,vn){
|
||||
// It adds the "add lease", "hold lease" fields, and each lease comes with
|
||||
// hold, release buttons etc. Listeners in setupLeasesOps()
|
||||
function printLeases(vn_info){
|
||||
var html ='<form id="leases_form" vnid="'+vn_info.ID+'"><div class="twelve columns">';
|
||||
var html ='<form id="leases_form" vnid="'+vn_info.ID+'"><div class="">';
|
||||
html +='';
|
||||
|
||||
html += '<table id="vn_leases_info_table" class="six datatable extended_table">\
|
||||
html += '<div class="large-6 columns"><table id="vn_leases_info_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="5">'+tr("Network information")+'</th></tr>\
|
||||
</thead>\
|
||||
@ -955,9 +799,9 @@ function printLeases(vn_info){
|
||||
<td></td>\
|
||||
<td></td>\
|
||||
</tr>\
|
||||
</tbody></table>';
|
||||
</tbody></table></div>';
|
||||
|
||||
html += '<table id="vn_leases_table" class="six datatable extended_table">\
|
||||
html += '<div class="large-6 columns"><table id="vn_leases_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="7">'+tr("Leases information")+'</th></tr>\
|
||||
</thead>\
|
||||
@ -991,8 +835,8 @@ function printLeases(vn_info){
|
||||
};
|
||||
|
||||
html +='</tbody>\
|
||||
</table>\
|
||||
<table class="twelve datatable extended_table">\
|
||||
</table></div></div>\
|
||||
<div class="large-12 columns"><table class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th></th>\
|
||||
@ -1004,7 +848,7 @@ function printLeases(vn_info){
|
||||
<th>'+tr("IPv6 Global")+'</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>';
|
||||
<tbody></div>';
|
||||
|
||||
var leases = vn_info.LEASES.LEASE;
|
||||
|
||||
@ -1071,6 +915,9 @@ function printLeases(vn_info){
|
||||
}
|
||||
html += '</td>'
|
||||
html += '<td>'
|
||||
if (Config.isTabActionEnabled("vnets-tab", "Network.remove_lease")) {
|
||||
html += '<a class="delete_lease" href="#"><i class="fa fa-trash-o"/></a>';
|
||||
}
|
||||
break;
|
||||
};
|
||||
html += '</td>'
|
||||
@ -1086,7 +933,7 @@ function printLeases(vn_info){
|
||||
html += '</tr>';
|
||||
};
|
||||
|
||||
html += '</tbody></table></div></form>';
|
||||
html += '</tbody></table></form>';
|
||||
|
||||
return html;
|
||||
}
|
||||
@ -1107,7 +954,7 @@ function setupCreateVNetDialog() {
|
||||
// width: 475,
|
||||
// height: height
|
||||
//});
|
||||
dialog.addClass("reveal-modal xlarge max-height");
|
||||
dialog.addClass("reveal-modal medium max-height").attr("data-reveal", "");
|
||||
|
||||
//Make the tabs look nice for the creation mode
|
||||
//$('#vn_tabs',dialog).tabs();
|
||||
@ -1449,7 +1296,7 @@ function setupCreateVNetDialog() {
|
||||
};
|
||||
|
||||
Sunstone.runAction("Network.create",network_json);
|
||||
$create_vn_dialog.trigger("reveal:close")
|
||||
$create_vn_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -1457,21 +1304,21 @@ function setupCreateVNetDialog() {
|
||||
var template=$('#template',dialog).val();
|
||||
var vnet_json = {vnet: {vnet_raw: template}};
|
||||
Sunstone.runAction("Network.create",vnet_json);
|
||||
$create_vn_dialog.trigger("reveal:close")
|
||||
$create_vn_dialog.trigger('close')
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#wizard_vnet_reset_button').click(function(){
|
||||
$create_vn_dialog.trigger('reveal:close');
|
||||
$create_vn_dialog.remove();
|
||||
$create_vn_dialog.trigger('close');
|
||||
$create_vn_dialog.html("");
|
||||
setupCreateVNetDialog();
|
||||
|
||||
popUpCreateVnetDialog();
|
||||
});
|
||||
|
||||
$('#advanced_vnet_reset_button').click(function(){
|
||||
$create_vn_dialog.trigger('reveal:close');
|
||||
$create_vn_dialog.remove();
|
||||
$create_vn_dialog.trigger('close');
|
||||
$create_vn_dialog.html("");
|
||||
setupCreateVNetDialog();
|
||||
|
||||
popUpCreateVnetDialog();
|
||||
@ -1480,7 +1327,7 @@ function setupCreateVNetDialog() {
|
||||
}
|
||||
|
||||
function popUpCreateVnetDialog() {
|
||||
$create_vn_dialog.reveal();
|
||||
$create_vn_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#name",$create_vn_dialog).focus();
|
||||
}
|
||||
|
||||
@ -1490,7 +1337,7 @@ function popUpCreateVnetDialog() {
|
||||
function setupLeasesOps(){
|
||||
if (Config.isTabActionEnabled("vnets-tab", "Network.addleases")) {
|
||||
$('button#panel_add_lease_button').live("click",function(){
|
||||
var lease = $('input#panel_add_lease', dialog).val();
|
||||
var lease = $('input#panel_add_lease').val();
|
||||
//var mac = $(this).previous().val();
|
||||
var id = $(this).parents('form').attr('vnid');
|
||||
if (lease.length){
|
||||
@ -1504,7 +1351,7 @@ function setupLeasesOps(){
|
||||
if (Config.isTabActionEnabled("vnets-tab", "Network.hold_lease")) {
|
||||
//ranged networks hold lease
|
||||
$('button#panel_hold_lease_button').live("click",function(){
|
||||
var lease = $('input#panel_hold_lease', dialog).val();
|
||||
var lease = $('input#panel_hold_lease').val();
|
||||
//var mac = $(this).previous().val();
|
||||
var id = $(this).parents('form').attr('vnid');
|
||||
if (lease.length){
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
var vres_tab = {
|
||||
title: '<i class="fa fa-cloud"></i>'+tr("Virtual Resources")
|
||||
title: '<i class="fa fa-cloud"></i>'+tr("Virtual Resources"),
|
||||
no_content: true
|
||||
}
|
||||
|
||||
Sunstone.addMainTab('vresources-tab',vres_tab);
|
||||
|
||||
@ -26,21 +26,21 @@ function setupCreateZoneDialog(){
|
||||
var dialog = $create_zone_dialog;
|
||||
|
||||
dialog.html(create_zone_tmpl);
|
||||
dialog.addClass("reveal-modal");
|
||||
dialog.addClass("reveal-modal").attr("data-reveal", "");
|
||||
|
||||
$('#create_zone_form',dialog).submit(function(){
|
||||
var name=$('#zonename',this).val();
|
||||
var endpoint=$("#endpoint",this).val();
|
||||
var zone_json = { "zone" : { "name" : name, "endpoint" : endpoint}};
|
||||
Sunstone.runAction("Zone.create",zone_json);
|
||||
$create_zone_dialog.trigger("reveal:close");
|
||||
$create_zone_dialog.trigger('close');
|
||||
return false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function popUpCreateZoneDialog(){
|
||||
$create_zone_dialog.reveal();
|
||||
$create_zone_dialog.foundation().foundation('reveal', 'open');
|
||||
$("input#name",$create_zone_dialog).focus();
|
||||
return false;
|
||||
}
|
||||
@ -52,84 +52,26 @@ function popUpCreateZoneDialog(){
|
||||
//}
|
||||
|
||||
var create_zone_tmpl =
|
||||
'<div class="panel">\
|
||||
<h3>\
|
||||
<small id="create_zone_header">'+tr("Create Zone")+'</small>\
|
||||
</h3>\
|
||||
'<div class="row">\
|
||||
<h3 id="create_zone_header" class="subheader">'+tr("Create Zone")+'</h3>\
|
||||
</div>\
|
||||
<form id="create_zone_form" action="">\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="zonename">'+tr("Zone Name")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="zonename" id="zonename" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="four columns">\
|
||||
<label class="inline right" for="endpoint">'+tr("Endpoint")+':</label>\
|
||||
</div>\
|
||||
<div class="seven columns">\
|
||||
<input type="text" name="endpoint" id="endpoint" />\
|
||||
</div>\
|
||||
<div class="one columns">\
|
||||
<div class=""></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<hr>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_zone_submit" value="zone/create">'+tr("Create")+'</button>\
|
||||
<button class="close-reveal-modal button secondary radius" type="button" value="close">' + tr("Close") + '</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
|
||||
|
||||
var zones_tab_content = '\
|
||||
<form class="custom" id="form_cluters" action="">\
|
||||
<div class="panel">\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<h4 class="subheader header">\
|
||||
<span class="header-resource">\
|
||||
<i class="icon-copy"></i> '+tr("Zones")+'\
|
||||
</span>\
|
||||
<span class="header-info">\
|
||||
<span/> <small></small> \
|
||||
</span>\
|
||||
<span class="user-login">\
|
||||
</span>\
|
||||
</h4>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="ten columns">\
|
||||
<div class="action_blocks">\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="two columns">\
|
||||
<input id="zone_search" type="text" placeholder="'+tr("Search")+'" />\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row">\
|
||||
<div class="twelve columns">\
|
||||
<table id="datatable_zones" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Endpoint") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyzones">\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<div class="large-12 columns">\
|
||||
<label for="zonename">'+tr("Zone Name")+':</label>\
|
||||
<input type="text" name="zonename" id="zonename" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="row centered">\
|
||||
<div class="large-12 columns">\
|
||||
<label for="endpoint">'+tr("Endpoint")+':</label>\
|
||||
<input type="text" name="endpoint" id="endpoint" />\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="form_buttons">\
|
||||
<button class="button radius right success" id="create_zone_submit" value="zone/create">'+tr("Create")+'</button>\
|
||||
</div>\
|
||||
<a class="close-reveal-modal">×</a>\
|
||||
</form>';
|
||||
|
||||
var zones_select="";
|
||||
@ -185,8 +127,13 @@ var zone_actions = {
|
||||
"Zone.refresh" : {
|
||||
type: "custom",
|
||||
call: function(){
|
||||
var tab = dataTable_zones.parents(".tab");
|
||||
if (Sunstone.rightInfoVisible(tab)) {
|
||||
Sunstone.runAction("Zone.showinfo", Sunstone.rightInfoResourceId(tab))
|
||||
} else {
|
||||
waitingNodes(dataTable_zones);
|
||||
Sunstone.runAction("Zone.list");
|
||||
}
|
||||
},
|
||||
error: onError
|
||||
},
|
||||
@ -266,11 +213,25 @@ var zone_buttons = {
|
||||
|
||||
var zones_tab = {
|
||||
title: tr("Zones"),
|
||||
content: zones_tab_content,
|
||||
buttons: zone_buttons,
|
||||
showOnTopMenu: false,
|
||||
tabClass: "subTab",
|
||||
parentTab: "infra-tab"
|
||||
parentTab: "infra-tab",
|
||||
search_input: '<input id="zone_search" type="text" placeholder="'+tr("Search")+'" />',
|
||||
list_header: '<i class="fa fa-files-o"></i> '+tr("Zones"),
|
||||
info_header: '<i class="fa fa-files-o"></i> '+tr("Zone"),
|
||||
subheader: '<span/> <small></small> ',
|
||||
table: '<table id="datatable_zones" class="datatable twelve">\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th class="check"><input type="checkbox" class="check_all" value=""></input></th>\
|
||||
<th>' + tr("ID") + '</th>\
|
||||
<th>' + tr("Name") + '</th>\
|
||||
<th>' + tr("Endpoint") + '</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody id="tbodyzones">\
|
||||
</tbody>\
|
||||
</table>'
|
||||
};
|
||||
|
||||
var zone_info_panel = {
|
||||
@ -358,19 +319,18 @@ function updateZoneInfo(request,zone){
|
||||
|
||||
//Information tab
|
||||
var info_tab = {
|
||||
title : tr("Information"),
|
||||
title : tr("Info"),
|
||||
icon: "fa-info-circle",
|
||||
content :
|
||||
'<form class="custom"><div class="">\
|
||||
<div class="six columns">\
|
||||
<table id="info_zone_table" class="twelve datatable extended_table">\
|
||||
<div class="large-6 columns">\
|
||||
<table id="info_zone_table" class="dataTable extended_table">\
|
||||
<thead>\
|
||||
<tr><th colspan="3">' +
|
||||
tr("Zone") +
|
||||
' - '+zone_info.NAME+'</th></tr>\
|
||||
<tr><th colspan="3">' + tr("Information") +'</th></tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
<td class="key_td">' + tr("id") + '</td>\
|
||||
<td class="key_td">' + tr("ID") + '</td>\
|
||||
<td class="value_td" colspan="2">'+zone_info.ID+'</td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
@ -384,7 +344,7 @@ function updateZoneInfo(request,zone){
|
||||
</tbody>\
|
||||
</table>\
|
||||
</div>\
|
||||
<div class="six columns">'
|
||||
<div class="large-6 columns">'
|
||||
+ insert_extended_template_table(zone_template,
|
||||
"Zone",
|
||||
zone_info.ID,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
10
src/sunstone/public/package.json
Normal file
10
src/sunstone/public/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "foundation-libsass-template",
|
||||
"version": "0.0.1",
|
||||
"devDependencies": {
|
||||
"node-sass": "~0.7.0",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-sass": "~0.8.0"
|
||||
}
|
||||
}
|
||||
1194
src/sunstone/public/scss/_settings.scss
Normal file
1194
src/sunstone/public/scss/_settings.scss
Normal file
File diff suppressed because it is too large
Load Diff
525
src/sunstone/public/scss/app.scss
Normal file
525
src/sunstone/public/scss/app.scss
Normal file
@ -0,0 +1,525 @@
|
||||
@import "settings";
|
||||
@import "foundation";
|
||||
|
||||
// Or selectively include components
|
||||
// @import
|
||||
// "foundation/components/accordion",
|
||||
// "foundation/components/alert-boxes",
|
||||
// "foundation/components/block-grid",
|
||||
// "foundation/components/breadcrumbs",
|
||||
// "foundation/components/button-groups",
|
||||
// "foundation/components/buttons",
|
||||
// "foundation/components/clearing",
|
||||
// "foundation/components/dropdown",
|
||||
// "foundation/components/dropdown-buttons",
|
||||
// "foundation/components/flex-video",
|
||||
// "foundation/components/forms",
|
||||
// "foundation/components/grid",
|
||||
// "foundation/components/inline-lists",
|
||||
// "foundation/components/joyride",
|
||||
// "foundation/components/keystrokes",
|
||||
// "foundation/components/labels",
|
||||
// "foundation/components/magellan",
|
||||
// "foundation/components/orbit",
|
||||
// "foundation/components/pagination",
|
||||
// "foundation/components/panels",
|
||||
// "foundation/components/pricing-tables",
|
||||
// "foundation/components/progress-bars",
|
||||
// "foundation/components/reveal",
|
||||
// "foundation/components/side-nav",
|
||||
// "foundation/components/split-buttons",
|
||||
// "foundation/components/sub-nav",
|
||||
// "foundation/components/switch",
|
||||
// "foundation/components/tables",
|
||||
// "foundation/components/tabs",
|
||||
// "foundation/components/thumbs",
|
||||
// "foundation/components/tooltips",
|
||||
// "foundation/components/top-bar",
|
||||
// "foundation/components/type",
|
||||
// "foundation/components/offcanvas",
|
||||
// "foundation/components/visibility";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-stretch: condensed;
|
||||
src: local('Open Sans'), local('OpenSans'), url('opensans.woff') format('woff');
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.left-footer {
|
||||
overflow:visible;
|
||||
padding:8px;
|
||||
font-size:12px
|
||||
}
|
||||
|
||||
.left-content {
|
||||
padding-left: 50px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.left-header {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
padding: 20px 50px 0px 0px;
|
||||
}
|
||||
|
||||
.right-info {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0px;
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
|
||||
|
||||
th {
|
||||
font-weight: normal !important;
|
||||
font-size: 16px !important;
|
||||
background: #fff !important;
|
||||
border-bottom: 1px solid #efefef !important;;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #555 !important;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
td, th {
|
||||
text-align: left;
|
||||
padding: 5px 10px;
|
||||
|
||||
.button {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
margin: 3px 0.5ex !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
tr.odd:hover td {
|
||||
background-color: #2ba6cb !important;
|
||||
cursor: pointer;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
tr.even:hover td {
|
||||
background-color: #2ba6cb !important;
|
||||
cursor: pointer;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
input.search {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.markrow { background-color:#cdebf5 !important; }
|
||||
.markrowselected { background-color:#2ba6cb !important; color: #FFF; }
|
||||
.markrowchecked { background-color:#cdebf5; }
|
||||
|
||||
|
||||
// User settings and zone
|
||||
.user-zone-container {
|
||||
position: relative;
|
||||
|
||||
.user-zone-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
|
||||
.button {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation side bar
|
||||
#logo {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
margin-left: 15px;
|
||||
|
||||
.topTab {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
|
||||
a {
|
||||
color: #555 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.subTab {
|
||||
margin-left: 18px;
|
||||
|
||||
a {
|
||||
color: #008cba !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-active-li {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 3px
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
// action block
|
||||
|
||||
input[type="text"],
|
||||
select {
|
||||
font-size: 14px;
|
||||
height: 33px !important;
|
||||
padding: 0px 10px;
|
||||
color: rgba(0, 0, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
margin-top: -5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
input {
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
color: #555;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
.f-dropdown {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
li {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form
|
||||
.fa-question-circle {
|
||||
color: #afafaf !important;
|
||||
}
|
||||
|
||||
.value_td {
|
||||
text-overflow:ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.key_td {
|
||||
color: #777 !important;
|
||||
}
|
||||
|
||||
.reveal-modal {
|
||||
fieldset {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.has-tip {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
// Totals
|
||||
|
||||
.totals-info {
|
||||
span {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #ACACAC;
|
||||
}
|
||||
}
|
||||
|
||||
.noUiSlider {
|
||||
border: none;
|
||||
margin-top: 12px;
|
||||
|
||||
&.horizontal {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dashboard
|
||||
|
||||
fieldset {
|
||||
margin: 0px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
legend {
|
||||
font-weight: normal !important;
|
||||
font-size: 16px !important;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.label.allocated {
|
||||
background-color: rgb(43,166,203);
|
||||
color: #fff;
|
||||
}
|
||||
.label.real {
|
||||
background-color: rgb(112,125,133);
|
||||
color: #fff;
|
||||
}
|
||||
.label.total {
|
||||
background-color: rgb(172,90,98);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.success-color {
|
||||
color: $success-color !important;
|
||||
}
|
||||
|
||||
.alert-color {
|
||||
color: rgb(172,90,98) !important;
|
||||
}
|
||||
|
||||
|
||||
// Tabs
|
||||
//.tabs.vertical {
|
||||
// dd {
|
||||
// border-right: 1px solid #dfdfdf;//
|
||||
|
||||
// }//
|
||||
|
||||
// dd.active {
|
||||
// border-left: 1px solid #dfdfdf;
|
||||
// border-top: 1px solid #dfdfdf;
|
||||
// border-bottom: 1px solid #dfdfdf;
|
||||
// border-right: 1px solid #FFFFFF;//
|
||||
|
||||
// a {
|
||||
// font-weight: bold !important;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
.tabs {
|
||||
dd {
|
||||
border: 1px solid #efefef;
|
||||
}
|
||||
|
||||
dd.active {
|
||||
border: 1px solid #dfdfdf;
|
||||
|
||||
a {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard_tabs dd {
|
||||
border: 1px solid #dfdfdf !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Right info
|
||||
|
||||
.right-info-tabs {
|
||||
dd {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #555 !important;
|
||||
padding: 10px 0px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
dd.active {
|
||||
a {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reveal
|
||||
|
||||
.reveal-modal h3 {
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
|
||||
.reveal-body {
|
||||
height:80%;
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.reveal-footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.max-height{
|
||||
max-height: 90%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form_buttons {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
// Progress bar
|
||||
|
||||
.progress-container {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #FFF;
|
||||
line-height: 18px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
height: 19px !important;
|
||||
background: #FFF;
|
||||
border: 1px solid #cfcfcf
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position:absolute;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.meter {
|
||||
background: #cdebf5 !important;
|
||||
}
|
||||
|
||||
|
||||
div.dataTables_length label,
|
||||
div.dataTables_filter label,
|
||||
div.dataTables_info {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
div.dataTables_length label {
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.dataTables_length select {
|
||||
width: 75px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.dataTables_filter label {
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
div.dataTables_filter input {
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.dataTables_info {
|
||||
padding-top: 2px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
div.dataTables_paginate {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin: 0.5em 0 !important;
|
||||
max-width: none !important;
|
||||
width: 100%;
|
||||
|
||||
tr {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
|
||||
table.dataTable thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
|
||||
table.dataTable thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }
|
||||
|
||||
table.dataTable thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
|
||||
table.dataTable thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }
|
||||
|
||||
table.dataTable th:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Scrolling */
|
||||
div.dataTables_scrollHead table {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody tbody tr:first-child th,
|
||||
div.dataTables_scrollBody tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,106 +1,288 @@
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, $.fn.dataTable.defaults, {
|
||||
"sDom": "<'H'>t<'row'<'eight columns'li><'four columns'p>>",
|
||||
"sPaginationType": "foundation",
|
||||
"sDom":
|
||||
"t"+
|
||||
"<'row'<'small-6 columns'i><'small-6 columns'p>>",
|
||||
"oLanguage": {
|
||||
"sLengthMenu": '<select><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select>  '
|
||||
"sLengthMenu": "_MENU_"
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
|
||||
/* API method to get paging information */
|
||||
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
|
||||
{
|
||||
return {
|
||||
"iStart": oSettings._iDisplayStart,
|
||||
"iEnd": oSettings.fnDisplayEnd(),
|
||||
"iLength": oSettings._iDisplayLength,
|
||||
"iTotal": oSettings.fnRecordsTotal(),
|
||||
"iFilteredTotal": oSettings.fnRecordsDisplay(),
|
||||
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
|
||||
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
|
||||
};
|
||||
};
|
||||
|
||||
/* Bootstrap style pagination control */
|
||||
$.extend( $.fn.dataTableExt.oPagination, {
|
||||
"foundation": {
|
||||
"fnInit": function( oSettings, nPaging, fnDraw ) {
|
||||
var oLang = oSettings.oLanguage.oPaginate;
|
||||
var fnClickHandler = function ( e ) {
|
||||
// In 1.10 we use the pagination renderers to draw the Bootstrap paging,
|
||||
// rather than custom plug-in
|
||||
if ( $.fn.dataTable.Api ) {
|
||||
$.fn.dataTable.defaults.renderer = 'foundation';
|
||||
$.fn.dataTable.ext.renderer.pageButton.foundation = function ( settings, host, idx, buttons, page, pages ) {
|
||||
var api = new $.fn.dataTable.Api( settings );
|
||||
var classes = settings.oClasses;
|
||||
var lang = settings.oLanguage.oPaginate;
|
||||
var btnDisplay, btnClass;
|
||||
|
||||
var attach = function( container, buttons ) {
|
||||
var i, ien, node, button;
|
||||
var clickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
|
||||
fnDraw( oSettings );
|
||||
if ( e.data.action !== 'ellipsis' ) {
|
||||
api.page( e.data.action ).draw( false );
|
||||
}
|
||||
};
|
||||
|
||||
$(nPaging).addClass('pagination').append(
|
||||
'<ul class="pagination">' +
|
||||
'<li class="prev unavailable"><a href="#"><i class="icon-double-angle-left"/></a></li>' +
|
||||
'<li class="prev unavailable"><a href="#"><i class="icon-angle-left"/></a></li>'+
|
||||
'<li class="next unavailable"><a href="#"><i class="icon-angle-right"/></a></li>' +
|
||||
'<li class="next unavailable"><a href="#"><i class="icon-double-angle-right"/></a></li>' +
|
||||
'</ul>'
|
||||
);
|
||||
var els = $('a', nPaging);
|
||||
$(els[0]).bind('click.DT', { action: "first" }, fnClickHandler);
|
||||
$(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
|
||||
$(els[2]).bind('click.DT', { action: "next" }, fnClickHandler);
|
||||
$(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);
|
||||
},
|
||||
for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
|
||||
button = buttons[i];
|
||||
|
||||
"fnUpdate": function ( oSettings, fnDraw ) {
|
||||
var iListLength = 5;
|
||||
var oPaging = oSettings.oInstance.fnPagingInfo();
|
||||
var an = oSettings.aanFeatures.p;
|
||||
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
|
||||
if ( $.isArray( button ) ) {
|
||||
attach( container, button );
|
||||
}
|
||||
else {
|
||||
btnDisplay = '';
|
||||
btnClass = '';
|
||||
|
||||
if ( oPaging.iTotalPages < iListLength) {
|
||||
iStart = 1;
|
||||
iEnd = oPaging.iTotalPages;
|
||||
}
|
||||
else if ( oPaging.iPage <= iHalf ) {
|
||||
iStart = 1;
|
||||
iEnd = iListLength;
|
||||
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
|
||||
iStart = oPaging.iTotalPages - iListLength + 1;
|
||||
iEnd = oPaging.iTotalPages;
|
||||
} else {
|
||||
iStart = oPaging.iPage - iHalf + 1;
|
||||
iEnd = iStart + iListLength - 1;
|
||||
switch ( button ) {
|
||||
case 'ellipsis':
|
||||
btnDisplay = '…';
|
||||
btnClass = 'unavailable';
|
||||
break;
|
||||
|
||||
case 'first':
|
||||
btnDisplay = lang.sFirst;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
case 'previous':
|
||||
btnDisplay = lang.sPrevious;
|
||||
btnClass = button + (page > 0 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
case 'next':
|
||||
btnDisplay = lang.sNext;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
case 'last':
|
||||
btnDisplay = lang.sLast;
|
||||
btnClass = button + (page < pages-1 ?
|
||||
'' : ' unavailable');
|
||||
break;
|
||||
|
||||
default:
|
||||
btnDisplay = button + 1;
|
||||
btnClass = page === button ?
|
||||
'current' : '';
|
||||
break;
|
||||
}
|
||||
|
||||
if ( btnDisplay ) {
|
||||
node = $('<li>', {
|
||||
'class': classes.sPageButton+' '+btnClass,
|
||||
'aria-controls': settings.sTableId,
|
||||
'tabindex': settings.iTabIndex,
|
||||
'id': idx === 0 && typeof button === 'string' ?
|
||||
settings.sTableId +'_'+ button :
|
||||
null
|
||||
} )
|
||||
.append( $('<a>', {
|
||||
'href': '#'
|
||||
} )
|
||||
.html( btnDisplay )
|
||||
)
|
||||
.appendTo( container );
|
||||
|
||||
settings.oApi._fnBindAction(
|
||||
node, {action: button}, clickHandler
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
|
||||
// Remove the middle elements
|
||||
$('li:gt(1)', an[i]).filter(':not(.next)').remove();
|
||||
attach(
|
||||
$(host).empty().html('<ul class="pagination"/>').children('ul'),
|
||||
buttons
|
||||
);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Integration for 1.9-
|
||||
$.fn.dataTable.defaults.sPaginationType = 'foundation';
|
||||
|
||||
// Add the new list items and their event handlers
|
||||
for ( j=iStart ; j<=iEnd ; j++ ) {
|
||||
sClass = (j==oPaging.iPage+1) ? 'class="current"' : '';
|
||||
$('<li '+sClass+'><a href="#">'+j+'</a></li>')
|
||||
.insertBefore( $('li.next:first', an[i])[0] )
|
||||
.bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
|
||||
fnDraw( oSettings );
|
||||
});
|
||||
/* API method to get paging information */
|
||||
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
|
||||
{
|
||||
return {
|
||||
"iStart": oSettings._iDisplayStart,
|
||||
"iEnd": oSettings.fnDisplayEnd(),
|
||||
"iLength": oSettings._iDisplayLength,
|
||||
"iTotal": oSettings.fnRecordsTotal(),
|
||||
"iFilteredTotal": oSettings.fnRecordsDisplay(),
|
||||
"iPage": oSettings._iDisplayLength === -1 ?
|
||||
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
|
||||
"iTotalPages": oSettings._iDisplayLength === -1 ?
|
||||
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/* Bootstrap style pagination control */
|
||||
$.extend( $.fn.dataTableExt.oPagination, {
|
||||
"foundation": {
|
||||
"fnInit": function( oSettings, nPaging, fnDraw ) {
|
||||
var oLang = oSettings.oLanguage.oPaginate;
|
||||
var fnClickHandler = function ( e ) {
|
||||
e.preventDefault();
|
||||
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
|
||||
fnDraw( oSettings );
|
||||
}
|
||||
};
|
||||
|
||||
$(nPaging).append(
|
||||
'<ul class="pagination">'+
|
||||
'<li class="prev arrow unavailable"><a href="">«</a></li>'+
|
||||
'<li class="next arrow unavailable"><a href="">»</a></li>'+
|
||||
'</ul>'
|
||||
);
|
||||
var els = $('a', nPaging);
|
||||
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
|
||||
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
|
||||
},
|
||||
|
||||
"fnUpdate": function ( oSettings, fnDraw ) {
|
||||
var iListLength = 5;
|
||||
var oPaging = oSettings.oInstance.fnPagingInfo();
|
||||
var an = oSettings.aanFeatures.p;
|
||||
var pages = [];
|
||||
var i, ien, klass, host;
|
||||
|
||||
// This could use some improving - however, see
|
||||
// https://github.com/DataTables/DataTables/issues/163 - this will
|
||||
// be changing in the near future, so not much point in doing too
|
||||
// much just now
|
||||
if ( oPaging.iTotalPages <= 6 ) {
|
||||
for ( i=0 ; i<oPaging.iTotalPages ; i++ ) {
|
||||
pages.push( i );
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Current page
|
||||
pages.push( oPaging.iPage );
|
||||
|
||||
// After current page
|
||||
var pagesAfter = oPaging.iPage + 2 >= oPaging.iTotalPages ?
|
||||
oPaging.iTotalPages :
|
||||
oPaging.iPage + 2;
|
||||
for ( i=oPaging.iPage+1 ; i<pagesAfter ; i++ ) {
|
||||
pages.push( i );
|
||||
}
|
||||
|
||||
// After gap
|
||||
if ( pagesAfter < oPaging.iTotalPages-2 ) {
|
||||
pages.push( null );
|
||||
}
|
||||
|
||||
// End
|
||||
if ( $.inArray( oPaging.iTotalPages-2, pages ) === -1 && oPaging.iPage < oPaging.iTotalPages-2 ) {
|
||||
pages.push( oPaging.iTotalPages-2 );
|
||||
}
|
||||
if ( $.inArray( oPaging.iTotalPages-1, pages ) === -1 ) {
|
||||
pages.push( oPaging.iTotalPages-1 );
|
||||
}
|
||||
|
||||
// Pages before
|
||||
var pagesBefore = oPaging.iPage - 2 > 0 ?
|
||||
oPaging.iPage - 2 :
|
||||
0;
|
||||
for ( i=oPaging.iPage-1 ; i>pagesBefore ; i-- ) {
|
||||
pages.unshift( i );
|
||||
}
|
||||
|
||||
// Before gap
|
||||
if ( pagesBefore > 1 ) {
|
||||
pages.unshift( null );
|
||||
}
|
||||
|
||||
// Start
|
||||
if ( $.inArray( 1, pages ) === -1 && oPaging.iTotalPages > 1 ) {
|
||||
pages.unshift( 1 );
|
||||
}
|
||||
if ( $.inArray( 0, pages ) === -1 ) {
|
||||
pages.unshift( 0 );
|
||||
}
|
||||
}
|
||||
|
||||
// Add / remove disabled classes from the static elements
|
||||
if ( oPaging.iPage === 0 ) {
|
||||
$('li.prev', an[i]).addClass('unavailable');
|
||||
} else {
|
||||
$('li.prev', an[i]).removeClass('unavailable');
|
||||
}
|
||||
for ( i=0, ien=an.length ; i<ien ; i++ ) {
|
||||
// Remove the middle elements
|
||||
host = an[i];
|
||||
$('li:gt(0)', host).filter(':not(:last)').remove();
|
||||
|
||||
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
|
||||
$('li.next', an[i]).addClass('unavailable');
|
||||
} else {
|
||||
$('li.next', an[i]).removeClass('unavailable');
|
||||
// Add the new list items and their event handlers
|
||||
$.each( pages, function( i, page ) {
|
||||
klass = page === null ? 'unavailable' :
|
||||
page === oPaging.iPage ? 'current' : '';
|
||||
$('<li class="'+klass+'"><a href="">'+(page===null? '…' : page+1)+'</a></li>')
|
||||
.insertBefore( $('li:last', host) )
|
||||
.bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
var pageNum = parseInt($('a', this).text(),10);
|
||||
if ( ! isNaN(pageNum)) {
|
||||
oSettings._iDisplayStart = (pageNum-1) * oPaging.iLength;
|
||||
fnDraw( oSettings );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
// Add / remove disabled classes from the static elements
|
||||
if ( oPaging.iPage === 0 ) {
|
||||
$('li:first', host).addClass('unavailable');
|
||||
} else {
|
||||
$('li:first', host).removeClass('unavailable');
|
||||
}
|
||||
|
||||
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
|
||||
$('li:last', host).addClass('unavailable');
|
||||
} else {
|
||||
$('li:last', host).removeClass('unavailable');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* TableTools Foundation compatibility
|
||||
* Required TableTools 2.1+
|
||||
*/
|
||||
if ( $.fn.DataTable.TableTools ) {
|
||||
// Set the classes that TableTools uses to something suitable for Foundation
|
||||
$.extend( true, $.fn.DataTable.TableTools.classes, {
|
||||
"container": "DTTT button-group",
|
||||
"buttons": {
|
||||
"normal": "button",
|
||||
"disabled": "disabled"
|
||||
},
|
||||
"collection": {
|
||||
"container": "DTTT_dropdown dropdown-menu",
|
||||
"buttons": {
|
||||
"normal": "",
|
||||
"disabled": "disabled"
|
||||
}
|
||||
},
|
||||
"select": {
|
||||
"row": "active"
|
||||
}
|
||||
} );
|
||||
|
||||
// Have the collection use a bootstrap compatible dropdown
|
||||
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
|
||||
"collection": {
|
||||
"container": "ul",
|
||||
"button": "li",
|
||||
"liner": "a"
|
||||
}
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,35 +1,215 @@
|
||||
/* Artfully masterminded by ZURB */
|
||||
div.dataTables_wrapper {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Table of Contents
|
||||
-----------------------------------------------------
|
||||
:: Shared Styles
|
||||
:: DataTables Foundation Styles
|
||||
*/
|
||||
div.dataTables_length label,
|
||||
div.dataTables_filter label,
|
||||
div.dataTables_info {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
div.dataTables_length label {
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* -----------------------------------------
|
||||
Shared Styles
|
||||
----------------------------------------- */
|
||||
div.dataTables_length select {
|
||||
width: 75px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.dataTables_filter label {
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
div.dataTables_filter input {
|
||||
display: inline-block !important;
|
||||
width: auto !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* -----------------------------------------
|
||||
DataTables Foundation Styles
|
||||
----------------------------------------- */
|
||||
form.dataTables {
|
||||
display: inline-block;
|
||||
div.dataTables_info {
|
||||
padding-top: 2px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
div.dataTables_paginate {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
margin: 0 0 18px;
|
||||
clear: both;
|
||||
margin: 0.5em 0 !important;
|
||||
max-width: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dataTables_filter input {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
.dataTables_length select {
|
||||
width: auto;
|
||||
table.dataTable thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
|
||||
table.dataTable thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
|
||||
table.dataTable thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }
|
||||
|
||||
table.dataTable thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
|
||||
table.dataTable thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }
|
||||
|
||||
table.dataTable th:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Scrolling */
|
||||
div.dataTables_scrollHead table {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody tbody tr:first-child th,
|
||||
div.dataTables_scrollBody tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.dataTables_scrollFoot table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* TableTools styles
|
||||
*/
|
||||
.table tbody tr.active td,
|
||||
.table tbody tr.active th {
|
||||
background-color: #08C;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table tbody tr.active:hover td,
|
||||
.table tbody tr.active:hover th {
|
||||
background-color: #0075b0 !important;
|
||||
}
|
||||
|
||||
.table-striped tbody tr.active:nth-child(odd) td,
|
||||
.table-striped tbody tr.active:nth-child(odd) th {
|
||||
background-color: #017ebc;
|
||||
}
|
||||
|
||||
table.DTTT_selectable tbody tr {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
div.DTTT {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.DTTT .button:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
ul.DTTT_dropdown.dropdown-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.DTTT_dropdown.dropdown-menu li:hover a {
|
||||
background-color: #0088cc;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* TableTools information display */
|
||||
.DTTT_print_info {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
margin-left: -200px;
|
||||
margin-top: -75px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
padding: 10px 30px;
|
||||
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
|
||||
|
||||
opacity: 0.95;
|
||||
|
||||
border: 1px solid black;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
-ms-border-radius: 6px;
|
||||
-o-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
-o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
div.DTTT_print_info h6 {
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div.DTTT_print_info p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* FixedColumns styles
|
||||
*/
|
||||
div.DTFC_LeftHeadWrapper table,
|
||||
div.DTFC_LeftFootWrapper table,
|
||||
table.DTFC_Cloned tr.even {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.DTFC_LeftHeadWrapper table {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.DTFC_LeftBodyWrapper table {
|
||||
border-top: none;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
|
||||
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
div.DTFC_LeftFootWrapper table {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenNebula Sunstone: Cloud Operations Center</title>
|
||||
<meta content='text/html' http-equiv='Content-Type'>
|
||||
<link href="images/favicon.ico" rel="shortcut icon"></link>
|
||||
<script src="vendor/4.0/jquery-1.11.0.min.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/jquery-migrate-1.2.1.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/jgrowl/jquery.jgrowl.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/jquery_layout/jquery.layout-latest.min.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/modernizr.foundation.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation_datatables/responsive-tables.js" type="text/javascript"></script>
|
||||
<script src="vendor/flot/jquery.flot.min.js" type="text/javascript"></script>
|
||||
<script src="vendor/flot/jquery.flot.pie.min.js" type="text/javascript"></script>
|
||||
<script src="vendor/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
|
||||
@ -21,21 +19,22 @@
|
||||
<script src="vendor/4.0/jquery.timePicker.min.js" type="text/javascript"></script>
|
||||
<link href="vendor/4.0/jgrowl/jquery.jgrowl.css" rel="stylesheet" type="text/css"></link>
|
||||
<link rel="stylesheet" href="vendor/4.0/fontawesome/css/font-awesome.min.css"></link>
|
||||
<link href="vendor/4.0/jquery_layout/layout-default-latest.css" rel="stylesheet" type="text/css"></link>
|
||||
<link href="vendor/4.0/nouislider/nouislider.css" rel="stylesheet" type="text/css"></link>
|
||||
<link href="vendor/4.0/jdpicker_1.1/jdpicker.css" rel="stylesheet" type="text/css"></link>
|
||||
<!--[if lte IE 8]
|
||||
<script src="vendor/explorercanvas/excanvas.compiled.js" type="text/javascript"></script>
|
||||
-->
|
||||
|
||||
<script src="vendor/4.0/foundation/modernizr.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/foundation.min.js" type="text/javascript"></script>
|
||||
|
||||
<% if session[:lang] %>
|
||||
<script src="locale/<%= session[:lang] %>/<%= session[:lang] %>.js?v=<%= OpenNebula::VERSION %>" type="text/javascript"></script>
|
||||
<% end %>
|
||||
<script src="vendor/4.0/foundation_datatables/datatables.foundation.js" type="text/javascript"></script>
|
||||
<link href="css/app.css?v=<%= OpenNebula::VERSION %>" media="screen, projector, print" rel="stylesheet" type="text/css"></link>
|
||||
<script src="js/opennebula.js?v=<%= OpenNebula::VERSION %>" type="text/javascript"></script>
|
||||
<script src="js/layout.js?v=<%= OpenNebula::VERSION %>" type="text/javascript"></script>
|
||||
<script src="js/sunstone.js?v=<%= OpenNebula::VERSION %>" type="text/javascript"></script>
|
||||
<script src="js/sunstone-util.js?v=<%= OpenNebula::VERSION %>" type="text/javascript"></script>
|
||||
<% view = $views_config.view(session[:user], session[:user_gname], session[:default_view]) %>
|
||||
<script>
|
||||
|
||||
@ -70,9 +69,30 @@
|
||||
<script src="js/plugins/<%= tab_name %>.js?v=<%= OpenNebula::VERSION %>" type="text/javascript"></script>
|
||||
<%- end -%>
|
||||
<!-- end tabs -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body class="antialiased">
|
||||
<div class="row">
|
||||
<div class="large-3 columns left-content">
|
||||
<div class="row left-header">
|
||||
<img src="<%= view['small_logo'] %>"/>
|
||||
</div>
|
||||
<div id="menu" class="row left-body">
|
||||
<ul class="side-nav" id="navigation"></ul>
|
||||
</div>
|
||||
<div class="row left-footer">
|
||||
<a href="http://opennebula.org" target="_blank">OpenNebula 4.5.0</a> by <a href="http://c12g.com" target="_blank">C12G Labs</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="large-9 columns right-content">
|
||||
<div class="row user-zone-container"><div class="user-zone-info"></div></div>
|
||||
<div class="row right-header">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialogs"></div>
|
||||
<!-- <div class="user-zone-container"><div class="user-zone-info"></div></div>
|
||||
|
||||
<div class="outer-center" id="tabs_content">
|
||||
<div class="inner-center"></div>
|
||||
<div class="inner-south" id="dialog"></div>
|
||||
@ -83,24 +103,15 @@
|
||||
<img src="<%= view['small_logo'] %>"/>
|
||||
</div>
|
||||
<div class="menu-navZ">
|
||||
<ul class="tabs vertical" id="navigation"></ul>
|
||||
<ul class="side-nav" id="navigation"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" style="overflow:visible;text-align:center;padding:8px;font-size:12px">
|
||||
<a href="http://opennebula.org" target="_blank">OpenNebula 4.5.80</a> by <a href="http://c12g.com" target="_blank">C12G Labs</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialogs"></div>
|
||||
<div id="plots"></div>
|
||||
<div id="info_panels"></div>
|
||||
|
||||
<script src="vendor/4.0/foundation/jquery.foundation.reveal.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/jquery.foundation.forms.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/jquery.foundation.tooltips.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/jquery.foundation.alerts.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/jquery.foundation.buttons.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/jquery.foundation.tabs.js" type="text/javascript"></script>
|
||||
<script src="vendor/4.0/foundation/app.js" type="text/javascript"></script>
|
||||
<div id="info_panels"></div>-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user