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

web app, further cleanup to javascript ui

Browse source
This commit is contained in:
Blake J. Harnden 2018-05-16 08:47:41 -07:00
parent c989d809cb
commit b15b838555
2 changed files with 88 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webapp/app.py
View file

@ -169,6 +169,7 @@ def get_session(session_id):
nodes = [] nodes = []
for node in session.objects.itervalues(): for node in session.objects.itervalues():
services = [x._name for x in getattr(node, "services", [])]
nodes.append({ nodes.append({
"id": node.objid, "id": node.objid,
"name": node.name, "name": node.name,
@ -179,7 +180,7 @@ def get_session(session_id):
"y": node.position.y, "y": node.position.y,
"z": node.position.z "z": node.position.z
}, },
"services": [x._name for x in node.services], "services": services,
"url": "/sessions/%s/nodes/%s" % (session_id, node.objid) "url": "/sessions/%s/nodes/%s" % (session_id, node.objid)
}) })
@ -276,10 +277,11 @@ def get_node(session_id, node_id):
"flowid": interface.flow_id "flowid": interface.flow_id
}) })
services = [x._name for x in getattr(node, "services", [])]
return jsonify( return jsonify(
name=node.name, name=node.name,
type=nodeutils.get_node_type(node.__class__).value, type=nodeutils.get_node_type(node.__class__).value,
services=[x._name for x in node.services], services=services,
model=node.type, model=node.type,
interfaces=interfaces, interfaces=interfaces,
linksurl="/sessions/%s/nodes/%s/links" % (session_id, node.objid) linksurl="/sessions/%s/nodes/%s/links" % (session_id, node.objid)

115
webapp/static/coreui.js
View file

@ -173,8 +173,8 @@ class NodeContext {
this.coreRest = coreRest; this.coreRest = coreRest;
this.nodeEditModal = nodeEditModal; this.nodeEditModal = nodeEditModal;
this.servicesModal = servicesModal; this.servicesModal = servicesModal;
this.$nodeContext = $('#node-context'); this.$context = $('#node-context');
this.$nodeContext.click(this.onClick.bind(this)); this.$context.click(this.onClick.bind(this));
this.$linkRfButton = $('#node-linkrf-button'); this.$linkRfButton = $('#node-linkrf-button');
this.$deleteButton = $('#node-delete-button'); this.$deleteButton = $('#node-delete-button');
} }
@ -195,23 +195,23 @@ class NodeContext {
this.$linkRfButton.addClass('d-none'); this.$linkRfButton.addClass('d-none');
} }
this.$nodeContext.data('node', nodeId); this.$context.data('node', nodeId);
this.$nodeContext.css({ this.$context.css({
position: 'absolute', position: 'absolute',
left: x, left: x,
top: y top: y
}); });
this.$nodeContext.removeClass('d-none'); this.$context.removeClass('d-none');
} }
hide() { hide() {
this.$nodeContext.addClass('d-none'); this.$context.addClass('d-none');
} }
async onClick(event) { async onClick(event) {
this.$nodeContext.addClass('d-none'); this.$context.addClass('d-none');
console.log('node context click: ', event); console.log('node context click: ', event);
const nodeId = this.$nodeContext.data('node'); const nodeId = this.$context.data('node');
const $target = $(event.target); const $target = $(event.target);
const option = $target.data('option'); const option = $target.data('option');
console.log('node context: ', nodeId, option); console.log('node context: ', nodeId, option);
@ -238,34 +238,31 @@ class NodeContext {
class NodeEditModal { class NodeEditModal {
constructor(coreNetwork) { constructor(coreNetwork) {
this.coreNetwork = coreNetwork; this.coreNetwork = coreNetwork;
this.$nodeEditModal = $('#nodeedit-modal'); this.$modal = $('#nodeedit-modal');
this.$nodeEditButton = $('#nodeedit-button'); this.$editButton = $('#nodeedit-button');
this.onClick(); this.$editButton.click(this.onClick.bind(this));
} }
show(nodeId) { show(nodeId) {
const node = this.coreNetwork.getCoreNode(nodeId); const node = this.coreNetwork.getCoreNode(nodeId);
this.$nodeEditModal.data('node', nodeId); this.$modal.data('node', nodeId);
this.$nodeEditModal.find('.modal-title').text(`Edit Node: ${node.name}`); this.$modal.find('.modal-title').text(`Edit Node: ${node.name}`);
this.$nodeEditModal.find('#node-name').val(node.name); this.$modal.find('#node-name').val(node.name);
this.$nodeEditModal.modal('show'); this.$modal.modal('show');
} }
onClick() { onClick() {
const self = this; const $form = this.$modal.find('form');
this.$nodeEditButton.click(function () {
const $form = self.$nodeEditModal.find('form');
const formData = formToJson($form); const formData = formToJson($form);
console.log('node edit data: ', formData); console.log('node edit data: ', formData);
const nodeId = self.$nodeEditModal.data('node'); const nodeId = this.$modal.data('node');
const node = self.coreNetwork.nodes.get(nodeId); const node = this.coreNetwork.nodes.get(nodeId);
if (formData.name) { if (formData.name) {
node.label = formData.name; node.label = formData.name;
node.coreNode.name = formData.name; node.coreNode.name = formData.name;
self.coreNetwork.nodes.update(node); this.coreNetwork.nodes.update(node);
} }
self.$nodeEditModal.modal('hide'); this.$modal.modal('hide');
});
} }
} }
@ -273,39 +270,36 @@ class EdgeContext {
constructor(coreNetwork, edgeEditModal) { constructor(coreNetwork, edgeEditModal) {
this.coreNetwork = coreNetwork; this.coreNetwork = coreNetwork;
this.edgeEditModal = edgeEditModal; this.edgeEditModal = edgeEditModal;
this.$edgeContext = $('#edge-context'); this.$context = $('#edge-context');
this.onClick(); this.$context.click(this.onClick.bind(this));
} }
show(edgeId, x, y) { show(edgeId, x, y) {
const edge = this.coreNetwork.edges.get(edgeId); const edge = this.coreNetwork.edges.get(edgeId);
console.log('context edge: ', edge); console.log('context edge: ', edge);
this.$edgeContext.data('edge', edgeId); this.$context.data('edge', edgeId);
this.$edgeContext.css({ this.$context.css({
position: 'absolute', position: 'absolute',
left: x, left: x,
top: y top: y
}); });
this.$edgeContext.removeClass('d-none'); this.$context.removeClass('d-none');
} }
hide() { hide() {
this.$edgeContext.addClass('d-none'); this.$context.addClass('d-none');
} }
onClick() { onClick(event) {
const self = this; this.$context.addClass('d-none');
this.$edgeContext.click(function (event) {
self.$edgeContext.addClass('d-none');
console.log('edge context click: ', event); console.log('edge context click: ', event);
const edgeId = self.$edgeContext.data('edge'); const edgeId = this.$context.data('edge');
const $target = $(event.target); const $target = $(event.target);
const option = $target.data('option'); const option = $target.data('option');
console.log('edge context: ', edgeId, option); console.log('edge context: ', edgeId, option);
if (option === 'edit') { if (option === 'edit') {
self.edgeEditModal.show(edgeId); this.edgeEditModal.show(edgeId);
} }
});
} }
} }
@ -313,31 +307,29 @@ class EdgeEditModal {
constructor(coreNetwork, coreRest) { constructor(coreNetwork, coreRest) {
this.coreNetwork = coreNetwork; this.coreNetwork = coreNetwork;
this.coreRest = coreRest; this.coreRest = coreRest;
this.$linkEditButton = $('#linkedit-button'); this.$modal = $('#linkedit-modal');
this.$linkEditModal = $('#linkedit-modal'); this.$editButton = $('#linkedit-button');
this.onClick(); this.$editButton.click(this.onClick.bind(this));
} }
show(edgeId) { show(edgeId) {
// populate form with current link data // populate form with current link data
const edge = this.coreNetwork.edges.get(edgeId); const edge = this.coreNetwork.edges.get(edgeId);
const link = edge.link; const link = edge.link;
this.$linkEditModal.data('link', edgeId); this.$modal.data('link', edgeId);
this.$linkEditModal.find('#link-bandwidth').val(link.bandwidth); this.$modal.find('#link-bandwidth').val(link.bandwidth);
this.$linkEditModal.find('#link-delay').val(link.delay); this.$modal.find('#link-delay').val(link.delay);
this.$linkEditModal.find('#link-per').val(link.loss); this.$modal.find('#link-per').val(link.loss);
this.$linkEditModal.find('#link-dup').val(link.duplicate); this.$modal.find('#link-dup').val(link.duplicate);
this.$linkEditModal.find('#link-jitter').val(link.jitter); this.$modal.find('#link-jitter').val(link.jitter);
// set modal name and show // set modal name and show
this.$linkEditModal.find('.modal-title').text('Edit Edge'); this.$modal.find('.modal-title').text('Edit Edge');
this.$linkEditModal.modal('show'); this.$modal.modal('show');
} }
onClick() { async onClick(event) {
const self = this; const $form = this.$modal.find('form');
this.$linkEditButton.click(function () {
const $form = self.$linkEditModal.find('form');
const formData = {}; const formData = {};
$form.serializeArray().map(function (x) { $form.serializeArray().map(function (x) {
let value = x.value; let value = x.value;
@ -349,8 +341,8 @@ class EdgeEditModal {
formData[x.name] = value; formData[x.name] = value;
}); });
console.log('link edit data: ', formData); console.log('link edit data: ', formData);
const edgeId = self.$linkEditModal.data('link'); const edgeId = this.$modal.data('link');
const edge = self.coreNetwork.edges.get(edgeId); const edge = this.coreNetwork.edges.get(edgeId);
const link = edge.link; const link = edge.link;
link.bandwidth = formData.bandwidth; link.bandwidth = formData.bandwidth;
@ -359,24 +351,15 @@ class EdgeEditModal {
link.loss = formData.loss; link.loss = formData.loss;
link.jitter = formData.jitter; link.jitter = formData.jitter;
coreRest.isRunning() if (await coreRest.isRunning()) {
.then(function (isRunning) {
if (isRunning) {
const linkEdit = link.json(); const linkEdit = link.json();
linkEdit.interface_one = linkEdit.interface_one.id; linkEdit.interface_one = linkEdit.interface_one.id;
linkEdit.interface_two = linkEdit.interface_two.id; linkEdit.interface_two = linkEdit.interface_two.id;
return self.coreRest.editLink(linkEdit); await this.coreRest.editLink(linkEdit);
}
})
.then(function (response) {
console.log('link edit success'); console.log('link edit success');
}) }
.catch(function (err) {
console.log('error editing link: ', err);
});
self.$linkEditModal.modal('hide'); this.$modal.modal('hide');
});
} }
} }