1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-20 10:50:08 +03:00
* Zoom graphs

* activated zoom and pan in graphs

* F #4359 Added auth panel to user settings

* F #2347 Added new section to VMTemplate for select a vmgroup

* F #2347 Added new checkbox for select vmgroup

* Removed conflict HEAD

* F #2347 Added possibility of select a vmgroup when:
  - Instantiate a VM
  - Create or Update a TEMPLATE

* Added new actions

* Added UID, GID and REQUEST_ID to placement into vm tab

* remove binding.pry()

* Updated vmgroup

* F #2347 changed checkbox per select when fill the vmgroup

* F #2347 Checking same group values
This commit is contained in:
juanmont 2017-02-28 11:55:45 +01:00 committed by Tino Vázquez
parent 859bf7ee41
commit cd4e926a2b
18 changed files with 438 additions and 32 deletions

View File

@ -308,12 +308,6 @@ define(function(require) {
'SL_PRIMARYIPADDRESS'
];
var MIGRATE_REASON = [
"NONE",
"ERROR",
"USER"
];
var MIGRATE_ACTION_STR = [
"none", // NONE_ACTION = 0
"migrate", // MIGRATE_ACTION = 1
@ -344,7 +338,22 @@ define(function(require) {
"snap-delete", // DISK_SNAPSHOT_DELETE_ACTION = 26
"terminate", // TERMINATE_ACTION = 27
"terminate-hard", // TERMINATE_HARD_ACTION = 28
"disk-resize" // DISK_RESIZE_ACTION = 29
"disk-resize", // DISK_RESIZE_ACTION = 29
"deploy", // DEPLOY_ACTION = 30
"chown", // CHOWN_ACTION = 31
"chmod", // CHMOD_ACTION = 32
"updateconf", // UPDATECONF_ACTION = 33
"rename", // RENAME_ACTION = 34
"resize", // RESIZE_ACTION = 35
"update", // UPDATE_ACTION = 36
"snapshot-create", // SNAPSHOT_CREATE_ACTION = 37
"snapshot-delete", // SNAPSHOT_DELETE_ACTION = 38
"snapshot-revert", // SNAPSHOT_REVERT_ACTION = 39
"disk-saveas", // DISK_SAVEAS_ACTION = 40
"disk-snapshot-revert",// DISK_SNAPSHOT_REVERT_ACTION = 41
"recover", // RECOVER_ACTION = 42
"retry", // RETRY_ACTION = 43
"monitor", // MONITOR_ACTION = 44
];
var VM = {
@ -622,9 +631,6 @@ define(function(require) {
"migrateActionStr": function(stateId) {
return MIGRATE_ACTION_STR[stateId];
},
"migrateReasonStr": function(stateId) {
return MIGRATE_REASON[stateId];
},
"ipsStr": ipsStr,
"retrieveExternalIPs": retrieveExternalIPs,
"retrieveExternalNetworkAttrs": retrieveExternalNetworkAttrs,

View File

@ -129,6 +129,12 @@
<label for="res_marketplaceapp">{{tr "MarketPlace Apps"}}</label>
</div>
</div>
<div class="row">
<div class="large-3 medium-6 columns">
<input type="checkbox" id="res_vm_group" name="res_vm_group" class="resource_cb" value="VMGROUP">
<label for="res_vm_group">{{tr "VM Group"}}</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>{{tr "Resource subset"}}</legend>

View File

@ -38,7 +38,8 @@ define(function(require) {
require('tabs/settings-tab/panels/quotas'),
require('tabs/settings-tab/panels/group-quotas'),
require('tabs/settings-tab/panels/accounting'),
require('tabs/settings-tab/panels/showback')
require('tabs/settings-tab/panels/showback'),
require('tabs/settings-tab/panels/auth')
];
var _formPanels = [

View File

@ -0,0 +1,46 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require) {
/*
DEPENDENCIES
*/
var BasePanel = require('tabs/users-tab/panels/auth-common');
/*
CONSTANTS
*/
var TAB_ID = require('../tabId');
var PANEL_ID = require('./auth/panelId');
/*
CONSTRUCTOR
*/
function Panel(info) {
this.tabId = TAB_ID;
return BasePanel.call(this, info);
};
Panel.PANEL_ID = PANEL_ID;
Panel.prototype = Object.create(BasePanel.prototype);
Panel.prototype.constructor = Panel;
return Panel;
});

View File

@ -0,0 +1,19 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require){
return 'settings_auth_tab';
})

View File

@ -46,6 +46,7 @@ define(function(require) {
require('./create/wizard-tabs/context'),
require('./create/wizard-tabs/scheduling'),
require('./create/wizard-tabs/hybrid'),
require('./create/wizard-tabs/vmgroup'),
require('./create/wizard-tabs/other')
]

View File

@ -0,0 +1,92 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require) {
/*
DEPENDENCIES
*/
// require('foundation.tab');
var Config = require('sunstone-config');
var Locale = require('utils/locale');
var Tips = require('utils/tips');
var WizardFields = require('utils/wizard-fields');
var UniqueId = require('utils/unique-id');
var vmgroupSection = require('utils/vmgroup-section')
var VMGroupsTable = require('tabs/vmgroup-tab/datatable');
/*
CONSTANTS
*/
var WIZARD_TAB_ID = require('./vmgroup/wizardTabId');
/*
CONSTRUCTOR
*/
function WizardTab(opts) {
if (!Config.isTemplateCreationTabEnabled(opts.tabId, 'vmgroup')) {
throw "Wizard Tab not enabled";
}
this.wizardTabId = WIZARD_TAB_ID + UniqueId.id();
this.icon = 'fa-folder-open-o';
this.title = Locale.tr("VM Group");
this.classes = "hypervisor only_kvm only_vcenter"
}
WizardTab.prototype.constructor = WizardTab;
WizardTab.prototype.html = _html;
WizardTab.prototype.setup = _setup;
WizardTab.prototype.onShow = _onShow;
WizardTab.prototype.retrieve = _retrieve;
WizardTab.prototype.fill = _fill;
return WizardTab;
/*
FUNCTION DEFINITIONS
*/
function _html() {
this.vmGroupTable = new VMGroupsTable('vmgroups_table'+UniqueId.id(), { 'select': true });
return vmgroupSection.html(this.vmGroupTable);
}
function _onShow(context, panelForm) {
vmgroupSection.onShow(context,this.vmGroupTable);
}
function _setup(context) {
this.vmGroupTable.initialize();
this.vmGroupTable.refreshResourceTableSelect();
vmgroupSection.setup(context, this.vmGroupTable);
}
function _retrieve(context) {
return vmgroupSection.retrieve(context);
}
function _fill(context, templateJSON) {
vmgroupSection.fill(context, templateJSON, this.vmGroupTable);
if (templateJSON.VMGROUP) {
delete templateJSON.VMGROUP;
}
}
});

View File

@ -0,0 +1,19 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require){
return 'vmgroupTab';
});

View File

@ -31,6 +31,7 @@ define(function(require) {
var WizardFields = require('utils/wizard-fields');
var DisksResize = require('utils/disks-resize');
var NicsSection = require('utils/nics-section');
var VMGroupSection = require('utils/vmgroup-section');
var DeployFolder = require('utils/deploy-folder');
var CapacityInputs = require('tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs');
var Config = require('sunstone-config');
@ -165,6 +166,12 @@ define(function(require) {
var networks = NicsSection.retrieve($(".nicsContext" + template_id, context));
var vmgroup = VMGroupSection.retrieve($(".vmgroupContext"+ template_id));
if(vmgroup){
$.extend(tmp_json, vmgroup);
}
var nics = [];
var pcis = [];
@ -218,12 +225,11 @@ define(function(require) {
$.extend(tmp_json, CapacityInputs.retrieveChanges(capacityContext));
extra_info['template'] = tmp_json;
for (var i = 0; i < n_times_int; i++) {
extra_info['vm_name'] = vm_name.replace(/%i/gi, i); // replace wildcard
for (var i = 0; i < n_times_int; i++) {
extra_info['vm_name'] = vm_name.replace(/%i/gi, i); // replace wildcard
Sunstone.runAction("Template."+action, [template_id], extra_info);
}
Sunstone.runAction("Template."+action, [template_id], extra_info);
}
});
return false;
@ -270,6 +276,9 @@ define(function(require) {
'securityGroups': Config.isFeatureEnabled("secgroups")
});
VMGroupSection.insert(template_json,
$(".vmgroupContext"+ template_json.VMTEMPLATE.ID, context));
deployFolderContext = $(".deployFolderContext" + template_json.VMTEMPLATE.ID, context);
DeployFolder.setup(deployFolderContext);
DeployFolder.fill(deployFolderContext, template_json.VMTEMPLATE);

View File

@ -50,6 +50,22 @@
<div class="provision_network_selector">
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns vmgroupContext{{element.ID}}">
<fieldset>
<legend>
<i class="fa fa-globe"></i> {{tr "VM Group"}}
</legend>
<div>
<a class="button small provision_add_vmgroup">
<i class="fa fa-lg fa-plus-circle add_vmgroup"></i> {{tr "VM Group"}}
</a>
</div>
<div class="provision_vmgroup_selector">
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="medium-6 small-12 columns deployFolderContext{{element.ID}}">

View File

@ -63,9 +63,9 @@ define(function(require) {
this.columns = [
Locale.tr("ID"),
Locale.tr("Name"),
Locale.tr("Owner"),
Locale.tr("Group"),
Locale.tr("Name"),
Locale.tr("Labels"),
"search_data"
];
@ -110,9 +110,9 @@ define(function(require) {
element.ID + '" name="selected_items" value="' +
element.ID + '"/>',
element.ID,
element.NAME,
element.UNAME,
element.GNAME,
element.NAME,
(LabelsUtils.labelsStr(element[TEMPLATE_ATTR])||''),
btoa(unescape(encodeURIComponent(JSON.stringify(search))))
];

View File

@ -238,6 +238,7 @@ define(function(require) {
}
function _fill(context, element) {
$("#new_role", context)[0].parentElement.remove();
var that = this;
this.setHeader(element);
this.resourceId = element.ID;
@ -253,16 +254,20 @@ define(function(require) {
$.each(element.ROLES.ROLE, function(index, value){
var name = value.NAME;
if(name){
var html = "<input id="+ name +" type='checkbox' class='roles' value="+name+" />\
<label for="+ name+">"+name+"</label>\
<br />";
var html = "<option id='" + name + "' class='roles' value=" + name + "> " + name + "</option>";
$("#list_roles_select").append(html);
$("select #" + name).mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
}
});
this.affinity_role_tab.fill(context, element);
$("#btn_refresh_roles", context).remove();
$("#affinity",context).show();
$("#new_role", context).remove();
//Remove row of roles------------------------------------------------------------------
/*var role_context_first = $('.role_content', context).first();

View File

@ -108,6 +108,7 @@ define(function(require) {
}
function _fill(context, element) {
var that = this;
var group_roles_index = 0;
$.each(element.TEMPLATE, function(affinity, value){
if(affinity == "AFFINED" || affinity == "ANTI_AFFINED"){
@ -184,6 +185,12 @@ define(function(require) {
}
function _add_group_affinity_box(rolesSt, context, group_roles_index, group_roles_affinity, affinity){
for(group in group_roles_affinity){
if(group_roles_affinity[group].retrieve(context) == rolesSt){
Notifier.notifyError(Locale.tr("Already exist a group role with this vaues."));
return false;
}
}
var that = this;
var index = group_roles_index;
var group_roles_id = 'group_role_' + group_roles_index;

View File

@ -58,6 +58,7 @@ define(function(require) {
this.hostsTable.initialize();
return TemplateHTML({
'idRole': this.html_role_id,
'hostsTableHTML': this.hostsTable.dataTableHTML,
'value_host_affinity': "value_host_affinity_"+this.html_role_id,
'tf_btn_host_affined': "btn_host_vm_roles_affined"+this.html_role_id,
@ -150,7 +151,7 @@ define(function(require) {
var text = "";
role['NAME'] = $('input[name="name"]', context).val();
role['VIRTUAL_MACHINES'] = $('input[name="cardinality"]', context).val();
role['POLICY'] = $('input[name="protocol"]:checked', context).val();
role['POLICY'] = $('input[name="protocol_'+this.html_role_id+'"]:checked', context).val();
if(this.host_affined.length > 0){
for(data in this.host_affined)
text += this.host_affined[data] + ", ";
@ -174,10 +175,7 @@ define(function(require) {
$("#role_name", context).val(value.NAME);
$("#role_name", context).change();
$("#role_cardinality", context).val(value.VIRTUAL_MACHINES);
if(value.POLICY)
$("#role_protocol", context).val(value.POLICY);
else
$("#role_protocol", context).val("NONE");
$('input[name="protocol_'+this.html_role_id+', value='+value.POLICY+']', context).attr("checked", true);
if(value.HOST_AFFINED)
_generateBox("AFFINED",value.HOST_AFFINED, this);
if(value.HOST_ANTI_AFFINED)

View File

@ -31,9 +31,9 @@
<span style="font-weight: 700; color: #7d7c7c;">
{{tr "VM-VM Affinity"}}
</span>
<input type="radio" id="role_protocol" name="protocol" value="NONE" style="margin-left: 15%" checked>{{tr "None"}}
<input type="radio" id="role_protocol" name="protocol" value="AFFINED" style="margin-left: 10%">{{tr "Affined"}}
<input type="radio" id="role_protocol" name="protocol" value="ANTI_AFFINED" style="margin-left: 10%">{{tr "Anti Affined"}}
<input type="radio" name="protocol_{{idRole}}" value="NONE" style="margin-left: 15%" checked>{{tr "None"}}
<input type="radio" name="protocol_{{idRole}}" value="AFFINED" style="margin-left: 10%">{{tr "Affined"}}
<input type="radio" name="protocol_{{idRole}}" value="ANTI_AFFINED" style="margin-left: 10%">{{tr "Anti Affined"}}
</label>
</div>
</div>

View File

@ -68,7 +68,9 @@ define(function(require) {
<th>' + Locale.tr("Host") + '</th>\
<th>' + Locale.tr("Datastore") + '</th>\
<th>' + Locale.tr("Action") + '</th>\
<th>' + Locale.tr("Reason") + '</th>\
<th>' + Locale.tr("UID") + '</th>\
<th>' + Locale.tr("GID") + '</th>\
<th>' + Locale.tr("ReqID") + '</th>\
<th>' + Locale.tr("Change time") + '</th>\
<th>' + Locale.tr("Total time") + '</th>\
<th colspan="2">' + Locale.tr("Prolog time") + '</th>\
@ -110,6 +112,10 @@ define(function(require) {
etime2 = ptime2 == 0 ? now : ptime2;
var dtime2 = etime2 - stime2;
var uid = history[i].UID == -1 ? "-":history[i].UID;
var gid = history[i].UID == -1 ? "-":history[i].GID;
var req_id = history[i].UID == -1 ? "-":history[i].REQUEST_ID;
//end :PTIME
html += ' <tr>\
@ -117,7 +123,9 @@ define(function(require) {
<td style="width:15%">' + Navigation.link(history[i].HOSTNAME, "hosts-tab", history[i].HID) + '</td>\
<td style="width:5%">' + Navigation.link(OpenNebula.Datastore.getName(history[i].DS_ID), "datastores-tab", history[i].DS_ID) + '</td>\
<td style="width:16%">' + OpenNebula.VM.migrateActionStr(parseInt(history[i].ACTION, 10)) + '</td>\
<td style="width:10%">' + OpenNebula.VM.migrateReasonStr(parseInt(history[i].REASON, 10)) + '</td>\
<td style="width:3%">' + uid + '</td>\
<td style="width:3%">' + gid + '</td>\
<td style="width:3%">' + req_id + '</td>\
<td style="width:16%">' + Humanize.prettyTime(history[i].STIME) + '</td>\
<td style="width:16%">' + Humanize.prettyDuration(dtime) + '</td>\
<td style="width:16%">' + Humanize.prettyDuration(dtime2) + '</td>\

View File

@ -0,0 +1,155 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2016, OpenNebula Project, OpenNebula Systems */
/* */
/* 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. */
/* -------------------------------------------------------------------------- */
define(function(require) {
var Locale = require('utils/locale');
var Tips = require('utils/tips');
var Notifier = require('utils/notifier');
var OpenNebula = require('opennebula');
var OpenNebulaTemplate = require('opennebula/template');
var TemplateSection = require('hbs!./vmgroup-section/html');
var VMGroupsTable = require('tabs/vmgroup-tab/datatable');
var UniqueId = require('utils/unique-id');
//var RoleTable = require('./vmgroup-section/datatable');
//var roleTable = undefined;
return {
'onShow': _onShow,
'setup': _setup,
'html': _html,
'fill': _fill,
'insert': _insert,
'retrieve': _retrieve
}
function _setup(context, vmGroupTable){
var templateVmgroup = null;
vmGroupTable.idInput().on("change", function(){
_generate_provision_role_table(context, $(this).val());
});
$("#role_section",context).hide();
$(".role_table_section", context).prop('required', false);
$(".clear_vmgroup_select",context).bind("click", function(){
vmGroupTable.initSelectResourceTableSelect();
$("#role_section",context).hide();
$(".role_table_section", context).prop('required', false);
$(".role_table_section > option").removeAttr('selected');
});
}
function _html(vmGroupTable){
return TemplateSection({
vmGroupTableHTML: vmGroupTable.dataTableHTML
});
}
function _onShow(context,vmGroupTable=undefined){
if(vmGroupTable)
vmGroupTable.refreshResourceTableSelect();
$("#role_section",context).hide();
$(".role_table_section", context).prop('required', false);
}
function _insert(template_json, context) {
var templateVmgroup = null;
this.vmGroupTable = new VMGroupsTable('vmgroups_table'+UniqueId.id(), { 'select': true });
var that = this;
var templateVmgroup = $(TemplateSection({
vmGroupTableHTML: this.vmGroupTable.dataTableHTML,
})).appendTo($(".provision_vmgroup_selector",context));
this.vmGroupTable.initialize();
this.vmGroupTable.refreshResourceTableSelect();
$("#vmgroup_section_tables", context).hide();
$(".provision_add_vmgroup",context).bind("click", function(){
$("#vmgroup_section_tables", context).show();
$(".provision_add_vmgroup",context).hide();
});
$(".clear_vmgroup_select",context).bind("click", function(){
$("#vmgroup_section_tables",context).hide();
$(".provision_add_vmgroup",context).show();
that.vmGroupTable.initSelectResourceTableSelect();
$(".role_table_section", context).prop('required', false);
$(".role_table_section > option").removeAttr('selected');
});
this.vmGroupTable.idInput().on("change", function(){
_generate_provision_role_table(context, $(this).val());
});
$("#role_section",context).hide();
$(".role_table_section", context).prop('required', false);
}
function _fill(context, templateJSON, vmGroupTable=undefined){
var element = templateJSON.VMGROUP;
vmGroupTable.selectResourceTableSelect({ids:element.VMGROUP_ID});
_generate_provision_role_table(context,element.VMGROUP_ID, element.ROLE);
}
function _retrieve(context, vmGroupTable=undefined) {
var role_selected = $('.role_table_section').val();
var vmgroup_selected = undefined;
if(this.vmGroupTable)
this.vmGroupTable.retrieveResourceTableSelect();
if(vmGroupTable)
vmgroup_selected = vmGroupTable.retrieveResourceTableSelect();
if(vmgroup_selected){
if(role_selected){
var vmgroup_json = {
"VMGROUP_ID": vmgroup_selected,
"ROLE": role_selected
}
vmgroup_json = {
"VMGROUP" : vmgroup_json
}
return vmgroup_json;
}
}else return undefined;
return false;
}
function _generate_provision_role_table(context, idvmgroup, fill=undefined) {
OpenNebula.VMGroup.show({
data : {
id: idvmgroup,
},
success: function (request, template_json) {
$(".role_table_section",context).empty();
var roles = template_json["VM_GROUP"].ROLES.ROLE;
$(".title_roles",context).text(Locale.tr("Roles")+" "+ template_json["VM_GROUP"].NAME);
if(roles){
if(Array.isArray(roles)){
$.each(roles, function(){
$("<option value='"+this.NAME+"'><label>"+ this.NAME + "</label></option><br/>").appendTo(".role_table_section",context);
});
}
else{
$("<option value='"+roles.NAME+"'><label>"+ roles.NAME + "</label></option>").appendTo(".role_table_section",context);
}
$("#role_section",context).show();
$(".role_table_section", context).prop('required', true);
if(fill){
$('.role_table_section option[value='+fill+']').attr("selected",true);
}
}
},
error: function(request, error_json, container) {
Notifier.notifyError(Locale.tr("Internal server error."));
}
});
}
})

View File

@ -0,0 +1,18 @@
<div class="row" id="vmgroup_section_tables">
<div class="medium-12 columns">
<a class="button secondary small clear_vmgroup_select" style="float:right">
<i class="fa fa-lg fa-times-circle"></i> {{tr "Clear"}}
</a>
</div>
<div class="medium-8 columns">
{{{vmGroupTableHTML}}}
</div>
<div class="medium-4 columns" id="role_section">
<div>
<h6 class="title_roles">{{tr "Roles"}}</h6>
<select name="roles" class="role_table_section" size="5" style="height: auto;">
</select>
</div>
</div>
</div>