afonso/core-extra
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

web app refactored service modal code and added proper support for sending current node services

Browse source
This commit is contained in:
Blake J. Harnden 2018-05-15 16:28:41 -07:00
parent d4c05dab09
commit e11798bae5
3 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/app.py
View file

@ -179,6 +179,7 @@ def get_session(session_id):
"y": node.position.y,
"z": node.position.z
},
"services": [x._name for x in node.services],
"url": "/sessions/%s/nodes/%s" % (session_id, node.objid)
})
@ -278,6 +279,7 @@ def get_node(session_id, node_id):
return jsonify(
name=node.name,
type=nodeutils.get_node_type(node.__class__).value,
services=[x._name for x in node.services],
model=node.type,
interfaces=interfaces,
linksurl="/sessions/%s/nodes/%s/links" % (session_id, node.objid)

1
webapp/static/corenetwork.js
View file

@ -259,6 +259,7 @@ class CoreNetwork {
const position = node.position;
const coreNode = new CoreNode(node.id, node.type, node.name, position.x, position.y);
coreNode.model = node.model;
coreNode.services = node.services;
this.nodes.add(coreNode.getNetworkNode());
}

57
webapp/static/coreui.js
View file

@ -3,8 +3,8 @@ class ServiceModal {
this.coreRest = coreRest;
this.$modal = $('#service-modal');
this.$title = this.$modal.find('.modal-title');
this.$button = $('#service-button');
this.$button.click(this.onClick.bind(this));
this.$saveButton = $('#service-button');
this.$saveButton.click(this.onClick.bind(this));
}
async show(service) {
@ -22,11 +22,14 @@ class ServicesModal {
this.coreRest = coreRest;
this.coreNetwork = coreNetwork;
this.serviceModal = serviceModal;
this.$servicesModal = $('#services-modal');
this.$servicesForm = this.$servicesModal.find('form');
this.$modal = $('#services-modal');
this.$modal.on('click', '.service-button', this.editService.bind(this));
this.$form = this.$modal.find('form');
this.$serviceGroup = $('#service-group');
this.$serviceGroup.on('change', this.groupChange.bind(this));
this.$servicesList = $('#services-list');
this.$servicesButton = $('#services-button');
this.$saveButton = $('#services-button');
this.$saveButton.click(this.saveClicked.bind(this));
this.defaultServices = {
mdr: new Set(["zebra", "OSPFv3MDR", "IPForward"]),
PC: new Set(["DefaultRoute"]),
@ -39,9 +42,6 @@ class ServicesModal {
this.serviceGroups = null;
this.serviceOptions = new Map();
this.$currentGroup = null;
this.groupChange();
this.saveClicked();
this.$servicesModal.on('click', '.service-button', this.editService.bind(this));
}
editService(event) {
@ -49,18 +49,21 @@ class ServicesModal {
const $target = $(event.target);
const service = $target.parent().parent().find('label').text();
console.log('edit service: ', service);
this.$servicesModal.modal('hide');
this.$modal.modal('hide');
this.serviceModal.show(service);
return false;
}
async show(nodeId) {
// get node and set default services for node type
this.node = this.coreNetwork.getCoreNode(nodeId);
if (this.node.services.length) {
this.nodeDefaults = new Set(this.node.services);
} else {
this.nodeDefaults = this.defaultServices[this.node.model] || new Set();
}
// retrieve service groups
this.serviceGroups = await coreRest.getServices(nodeId);
// clear data
@ -68,8 +71,10 @@ class ServicesModal {
this.$servicesList.html('');
this.serviceOptions.clear();
this.$servicesModal.find('.modal-title').text(`Services: ${this.node.name}`);
// set title
this.$modal.find('.modal-title').text(`Services: ${this.node.name}`);
// generate service form options
for (let group in this.serviceGroups) {
const $option = $('<option>', {value: group, text: group});
this.$serviceGroup.append($option);
@ -100,30 +105,24 @@ class ServicesModal {
}
this.$serviceGroup.change();
this.$servicesModal.modal('show');
this.$modal.modal('show');
}
groupChange() {
const self = this;
this.$serviceGroup.on('change', function () {
const group = $(this).val();
if (self.$currentGroup) {
self.$currentGroup.addClass('d-none');
}
self.$currentGroup = self.serviceOptions.get(group);
self.$currentGroup.removeClass('d-none');
});
groupChange(event) {
const group = $(event.target).val();
if (this.$currentGroup) {
this.$currentGroup.addClass('d-none');
}
this.$currentGroup = this.serviceOptions.get(group);
this.$currentGroup.removeClass('d-none');
}
saveClicked() {
const self = this;
this.$servicesButton.click(function () {
let services = self.$servicesForm.serializeArray();
services = services.map(x => x.value);
console.log('services save clicked: ', services);
self.node.services = services;
self.$servicesModal.modal('hide');
});
let services = this.$form.serializeArray();
services = services.map(x => x.value);
console.log('services save clicked: ', services);
this.node.services = services;
this.$modal.modal('hide');
}
}