frontend/dcmgr_gui/public/javascripts/dcmgr_gui/network_panel.js
DcmgrGUI.prototype.networkPanel = function(){
var total = 0;
var maxrow = 10;
var page = 1;
var list_request = {
"url" : DcmgrGUI.Util.getPagePath('/networks/list/',page),
"data" : DcmgrGUI.Util.getPagenateData(page,maxrow)
};
DcmgrGUI.List.prototype.getEmptyData = function(){
return [{
"uuid":'',
"created_at":''
}]
}
DcmgrGUI.Detail.prototype.getEmptyData = function(){
return {
"uuid" : "-",
"created_at" : "-",
"updated_at" : "-"
}
}
var c_pagenate = new DcmgrGUI.Pagenate({
row:maxrow,
total:total
});
var c_list = new DcmgrGUI.List({
element_id:'#display_networks',
template_id:'#networksListTemplate',
maxrow:maxrow,
page:page
});
c_list.setDetailTemplate({
template_id:'#networksDetailTemplate',
detail_path:'/networks/show/'
});
var create_button_name = $.i18n.prop('create_button');
var close_button_name = $.i18n.prop('close_button');
var update_button_name = $.i18n.prop('update_button');
//
// Content Update:
//
c_list.element.bind('dcmgrGUI.contentChange',function(event,params){
var network = params.data.network;
c_pagenate.changeTotal(network.total);
c_list.setData(network.results);
c_list.multiCheckList(c_list.detail_template);
c_list.element.find(".edit_network").each(function(key,value){
$(this).button({ disabled: false });
var uuid = $(value).attr('id').replace(/edit_(nw-[a-z0-9]+)/,'$1');
if( uuid ){
$(this).bind('click',function(){
bt_edit_network.open({"ids":[uuid]});
});
} else {
$(this).button({ disabled: true });
}
});
var edit_network_buttons = {};
edit_network_buttons[close_button_name] = function() { $(this).dialog("close"); };
edit_network_buttons[update_button_name] = function(event) {
var network_id = $(this).find('#network_id').val();
var display_name = $(this).find('#network_display_name').val();
var data = 'display_name=' + display_name;
var request = new DcmgrGUI.Request;
request.put({
"url": '/networks/'+ network_id +'.json',
"data": data,
success: function(json, status){
bt_refresh.element.trigger('dcmgrGUI.refresh');
}
});
$(this).dialog("close");
}
bt_edit_network = new DcmgrGUI.Dialog({
target:'.edit_network',
width:600,
height:600,
title:$.i18n.prop('edit_network_header'),
path:'/edit_network',
button: edit_network_buttons,
callback: function(){
var self = this;
var network_id = $(this).find('#network_id').val();
var display_name = $(this).find('#network_display_name').val();
var params = { 'button': bt_edit_network, 'element_id': 1 };
$(this).find('#network_display_name').bind('paste', params, DcmgrGUI.Util.availableTextField);
$(this).find('#network_display_name').bind('keyup', params, DcmgrGUI.Util.availableTextField);
var request = new DcmgrGUI.Request;
var refresh_network_services = function() {
request.get({
"url": '/networks/'+ network_id +'/services.json',
"data": "",
success: function(json,status){
var results = json[0].network_service.results;
var network_services = $(self).find('#network_services');
network_services.html('');
var delete_service_wrapper = (function(network_id, vif_id, name) {
var _network_id = network_id;
var _vif_id = vif_id;
var _name = name;
return {
call:function() { delete_service(_network_id, _vif_id, _name); }
};
});
for (var i=0; i < results.length ; i++) {
result_name = results[i].result.name;
result_vif_id = results[i].result.network_vif_id;
service_html =
'<fieldset id="network_services_field">' +
'<legend>' + $.i18n.prop('edit_network_service_header') + '</legend><legend>' +
'</legend><table cellspacing="5" cellpadding="5"><tbody>' +
'<tr><td>' + $.i18n.prop('edit_network_service_name') + ': </td><td>' + result_name + '</td></tr>' +
'<tr><td>' + $.i18n.prop('edit_network_service_vif_id') + ': </td><td>' + result_vif_id + '</td></tr>' +
'<tr><td>' + $.i18n.prop('edit_network_service_address') + ': </td><td>' + results[i].result.address + '</td></tr>' +
'<tr><td>' + $.i18n.prop('edit_network_service_mac_addr') + ': </td><td>' + results[i].result.mac_addr + '</td></tr>' +
'<tr><td>' + $.i18n.prop('edit_network_service_incoming_port') + ': </td><td>' + results[i].result.incoming_port + '</td></tr>' +
'<tr><td>' + $.i18n.prop('edit_network_service_outgoing_port') + ': </td><td>' + results[i].result.outgoing_port + '</td></tr>' +
'<tr><td><button id="service_delete_' + result_name + '" name="service_delete_' + result_name + '">' + $.i18n.prop('edit_network_service_delete') + '</button></td></tr>' +
'</tbody></table></fieldset>';
network_services.append(service_html);
network_services.find('#service_delete_' + result_name).click(delete_service_wrapper(network_id, result_vif_id, result_name).call);
}
}
});
};
var refresh_dhcp_ranges = function() {
request.get({
"url": '/networks/'+ network_id +'/dhcp_ranges.json',
"data": "",
success: function(json,status){
var select_dhcp_ranges = $(self).find('#select_dhcp_ranges');
select_dhcp_ranges.html('');
for (var i=0; i < json.length ; i++) {
var value = json[i][0] + ' - ' + json[i][1];
var html = '<option id="'+i+'" value="'+ value +'">'+ value +'</option>';
select_dhcp_ranges.append(html);
}
}
});
};
var change_dhcp_range = function(use_command){
var data =
"range_begin=" + $(self).find('#begin_dhcp_range').val() +
"&range_end=" + $(self).find('#end_dhcp_range').val();
request.put({
"url": '/networks/' + network_id + '/dhcp_ranges/' + use_command + '.json',
"data": data,
success: function(json,status) {
$(self).find('#begin_dhcp_range').val("");
$(self).find('#end_dhcp_range').val("");
refresh_dhcp_ranges();
}
});
};
function delete_service(network_id, vif_id, name) {
var data = "vif_id=" + vif_id + "&name=" + name;
request = new DcmgrGUI.Request;
request.del({
"url": '/networks/' + network_id + '/services',
"data": data,
success: function(json,status){
refresh_network_services();
}
});
}
$(self).find('#add_dhcp_range').click(function(){ change_dhcp_range('add'); });
$(self).find('#remove_dhcp_range').click(function(){ change_dhcp_range('remove'); });
$(self).find('#service_add').click(function() {
var service_name = $(self).find('#service_name').val();
var service_address = $(self).find('#service_address').val();
var service_incoming_port = $(self).find('#service_incoming_port').val();
var service_outgoing_port = $(self).find('#service_outgoing_port').val();
var data = "name=" + service_name
+ "&ipv4=" + service_address
+ "&incoming_port=" + service_incoming_port
+ "&outgoing_port=" + service_outgoing_port;
request.post({
"url": '/networks/'+ network_id +'/services.json',
"data": data,
success: function(json,status) {
refresh_network_services();
}
});
});
parallel({
// get dhcp ranges
dhcp_ranges: refresh_dhcp_ranges(),
network_services: refresh_network_services()
})
}
});
});
c_list.filter.add(function(data){
var results = data.network.results;
var size = results.length;
for(var i = 0; i < size; i++) {
results[i].result.created_at = DcmgrGUI.date.parseISO8601(results[i].result.created_at);
results[i].result.created_at = DcmgrGUI.date.setTimezone(results[i].result.created_at, dcmgrGUI.getConfig('time_zone'));
results[i].result.created_at = DcmgrGUI.date.getI18n(results[i].result.created_at);
}
return data;
});
var bt_refresh = new DcmgrGUI.Refresh();
bt_refresh.element.bind('dcmgrGUI.refresh',function(){
c_list.page = c_pagenate.current_page;
list_request.url = DcmgrGUI.Util.getPagePath('/networks/list/',c_list.page);
list_request.data = DcmgrGUI.Util.getPagenateData(c_pagenate.start,c_pagenate.row);
c_list.element.trigger('dcmgrGUI.updateList',{request:list_request})
//update detail
$.each(c_list.checked_list,function(check_id,obj){
$($('#detail').find('#'+check_id)).remove();
c_list.checked_list[check_id].c_detail.update({
url:DcmgrGUI.Util.getPagePath('/networks/show/',check_id)
},true);
});
});
c_pagenate.element.bind('dcmgrGUI.updatePagenate',function(){
c_list.clearCheckedList();
$('#detail').html('');
bt_refresh.element.trigger('dcmgrGUI.refresh');
});
//
// Create Network:
//
var create_network_buttons = {};
create_network_buttons[close_button_name] = function() { $(this).dialog("close"); };
create_network_buttons[create_button_name] = function() {
var display_name = $(this).find('#display_name').val();
var description = $(this).find('#description').val();
var domain_name = $(this).find('#domain_name').val();
var dc_network = $(this).find('#dc_network').val();
var network_mode = $(this).find('#network_mode').val();
var ipv4_network = $(this).find('#ipv4_network').val();
var ipv4_gw = $(this).find('#ipv4_gw').val();
var prefix = $(this).find('#prefix').val();
var ip_assignment = $(this).find('#ip_assignment').val();
var service_address = $(this).find('#service_address').val();
var data = "&display_name="+display_name
+"&description="+description
+"&domain_name="+domain_name
+"&dc_network="+dc_network
+"&network_mode="+network_mode
+"&ipv4_network="+ipv4_network
+"&ipv4_gw="+ipv4_gw
+"&prefix="+prefix
+"&network_mode="+network_mode
+"&ip_assignment="+ip_assignment;
$('#service_checkbox:checked').each(function() {
data = data + "&service_" + $(this).val() + "=" + service_address;
});
request = new DcmgrGUI.Request;
request.post({
"url": '/networks',
"data": data,
success: function(json,status){
bt_refresh.element.trigger('dcmgrGUI.refresh');
}
});
$(this).dialog("close");
}
var bt_create_network = new DcmgrGUI.Dialog({
target:'.create_network',
width:583,
height:600,
title:$.i18n.prop('create_network_header'),
path:'/create_network',
callback: function(){
var self = this;
var request = new DcmgrGUI.Request;
var is_ready = {
'dc_network': false,
'display_name': false
}
var ready = function(data) {
if(data['dc_network'] == true &&
data['display_name'] == true) {
bt_create_network.disabledButton(1, false);
} else {
bt_create_network.disabledButton(1, true);
}
}
$(this).find('#display_name').keyup(function(){
if( $(this).val() ) {
is_ready['display_name'] = true;
ready(is_ready);
} else {
is_ready['display_name'] = false;
ready(is_ready);
}
});
parallel({
//get dc_networks
dc_networks:
request.get({
"url": '/dc_networks/allows_new_networks.json',
"data": "",
success: function(json,status){
var create_select_item = function(name) {
var select_html = '<select id="' + name + '" name="' + name + '"></select>';
$(self).find('#select_' + name).empty().html(select_html);
return $(self).find('#' + name);
}
var append_select_item = function(select_item, name, value) {
select_item.append('<option value="'+ value +'">' + name + '</option>');
}
var create_select = function(name, results) {
var select_obj = create_select_item(name);
for (var i=0; i < results.length ; i++) {
append_select_item(select_obj, results[i].result.name, results[i].result.uuid)
}
return select_obj;
}
var results = json.dc_network.results;
var select_dc_network = create_select('dc_network', results);
var dc_offering = {};
for (var i=0; i < results.length ; i++) {
dc_offering[results[i].result.uuid] = results[i].result.offering_network_modes;
}
var update_network_modes = function(){
var select_network_mode = create_select_item('network_mode');
var current_dc_network = select_dc_network.val();
$.each(dc_offering[current_dc_network], function(key, value) {
append_select_item(select_network_mode, value, value);
});
};
update_network_modes();
select_dc_network.change(update_network_modes);
is_ready['dc_network'] = true;
ready(is_ready);
}
})
});
},
button: create_network_buttons
});
bt_create_network.target.bind('click',function(){
bt_create_network.open();
bt_create_network.disabledButton(1, true);
});
$(bt_create_network.target).button({ disabled: false });
$(bt_refresh.target).button({ disabled: false });
//list
c_list.setData(null);
c_list.update(list_request,true);
}