web app refactoring javascript into class based components representing ui elements
This commit is contained in:
Blake J. Harnden
parent
d9db4a427a
commit
8c31b75c39
2 changed files with 341 additions and 236 deletions
|
|
@ -90,3 +90,329 @@ class ServicesModal {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class SessionsModal {
|
||||||
|
constructor(coreRest, coreNetwork, onJoin) {
|
||||||
|
this.coreRest = coreRest;
|
||||||
|
this.coreNetwork = coreNetwork;
|
||||||
|
this.onJoin = onJoin;
|
||||||
|
this.$sessionsModal = $('#sessions-modal');
|
||||||
|
this.$sessionsTable = $('#sessions-table');
|
||||||
|
this.onShow();
|
||||||
|
this.onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
const self = this;
|
||||||
|
this.$sessionsTable.on('click', 'td', function (event) {
|
||||||
|
const sessionId = $(this).parent('tr').data('session');
|
||||||
|
console.log('clicked session to join: ', sessionId);
|
||||||
|
if (sessionId === self.coreRest.currentSession) {
|
||||||
|
console.log('same session, not changing');
|
||||||
|
} else {
|
||||||
|
self.coreNetwork.joinSession(sessionId)
|
||||||
|
.then(function (session) {
|
||||||
|
self.onJoin(session);
|
||||||
|
self.$sessionsModal.modal('hide');
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
console.log('join session error: ', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
const self = this;
|
||||||
|
this.$sessionsModal.on('shown.bs.modal', function () {
|
||||||
|
console.log('show sessions');
|
||||||
|
self.$sessionsTable.find('tbody tr').remove();
|
||||||
|
self.coreRest.getSessions()
|
||||||
|
.then(function (response) {
|
||||||
|
const sessions = response.sessions;
|
||||||
|
for (let session of sessions) {
|
||||||
|
console.log('show sessions: ', session);
|
||||||
|
const $idCell = $('<td>', {text: session.id});
|
||||||
|
const $nodeCell = $('<td>', {text: session.nodes});
|
||||||
|
const stateName = self.coreRest.getStateName(session.state);
|
||||||
|
const $stateCell = $('<td>', {text: stateName});
|
||||||
|
const $row = $('<tr>', {class: 'session-join', 'data-session': session.id});
|
||||||
|
$row.append([$idCell, $nodeCell, $stateCell]);
|
||||||
|
self.$sessionsTable.find('tbody').append($row);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
console.log('error getting sessions: ', err);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class NodeContext {
|
||||||
|
constructor(coreNetwork, nodeEditModal, servicesModal) {
|
||||||
|
this.coreNetwork = coreNetwork;
|
||||||
|
this.nodeEditModal = nodeEditModal;
|
||||||
|
this.servicesModal = servicesModal;
|
||||||
|
this.$nodeContext = $('#node-context');
|
||||||
|
this.onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
show(nodeId, x, y) {
|
||||||
|
const node = this.coreNetwork.nodes.get(nodeId);
|
||||||
|
console.log('context node: ', node);
|
||||||
|
this.$nodeContext.data('node', nodeId);
|
||||||
|
this.$nodeContext.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: x,
|
||||||
|
top: y
|
||||||
|
});
|
||||||
|
this.$nodeContext.removeClass('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.$nodeContext.addClass('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
const self = this;
|
||||||
|
this.$nodeContext.click(function (event) {
|
||||||
|
self.$nodeContext.addClass('d-none');
|
||||||
|
console.log('node context click: ', event);
|
||||||
|
const nodeId = self.$nodeContext.data('node');
|
||||||
|
const $target = $(event.target);
|
||||||
|
const option = $target.data('option');
|
||||||
|
console.log('node context: ', nodeId, option);
|
||||||
|
if (option === 'edit') {
|
||||||
|
self.nodeEditModal.show(nodeId);
|
||||||
|
} else if (option === 'services') {
|
||||||
|
self.servicesModal.show(nodeId)
|
||||||
|
.catch(function (err) {
|
||||||
|
console.log('error showing services modal: ', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class NodeEditModal {
|
||||||
|
constructor(coreNetwork) {
|
||||||
|
this.coreNetwork = coreNetwork;
|
||||||
|
this.$nodeEditModal = $('#nodeedit-modal');
|
||||||
|
this.$nodeEditButton = $('#nodeedit-button');
|
||||||
|
this.onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
show(nodeId) {
|
||||||
|
const node = this.coreNetwork.getCoreNode(nodeId);
|
||||||
|
this.$nodeEditModal.data('node', nodeId);
|
||||||
|
this.$nodeEditModal.find('.modal-title').text(`Edit Node: ${node.name}`);
|
||||||
|
this.$nodeEditModal.find('#node-name').val(node.name);
|
||||||
|
this.$nodeEditModal.modal('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
const self = this;
|
||||||
|
this.$nodeEditButton.click(function () {
|
||||||
|
const $form = self.$nodeEditModal.find('form');
|
||||||
|
const formData = formToJson($form);
|
||||||
|
console.log('node edit data: ', formData);
|
||||||
|
const nodeId = self.$nodeEditModal.data('node');
|
||||||
|
const node = self.coreNetwork.nodes.get(nodeId);
|
||||||
|
if (formData.name) {
|
||||||
|
node.label = formData.name;
|
||||||
|
node.coreNode.name = formData.name;
|
||||||
|
self.coreNetwork.nodes.update(node);
|
||||||
|
}
|
||||||
|
self.$nodeEditModal.modal('hide');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class EdgeContext {
|
||||||
|
constructor(coreNetwork, edgeEditModal) {
|
||||||
|
this.coreNetwork = coreNetwork;
|
||||||
|
this.edgeEditModal = edgeEditModal;
|
||||||
|
this.$edgeContext = $('#edge-context');
|
||||||
|
this.onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
show(edgeId, x, y) {
|
||||||
|
const edge = this.coreNetwork.edges.get(edgeId);
|
||||||
|
console.log('context edge: ', edge);
|
||||||
|
this.$edgeContext.data('edge', edgeId);
|
||||||
|
this.$edgeContext.css({
|
||||||
|
position: 'absolute',
|
||||||
|
left: x,
|
||||||
|
top: y
|
||||||
|
});
|
||||||
|
this.$edgeContext.removeClass('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.$edgeContext.addClass('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
const self = this;
|
||||||
|
this.$edgeContext.click(function (event) {
|
||||||
|
self.$edgeContext.addClass('d-none');
|
||||||
|
console.log('edge context click: ', event);
|
||||||
|
const edgeId = self.$edgeContext.data('edge');
|
||||||
|
const $target = $(event.target);
|
||||||
|
const option = $target.data('option');
|
||||||
|
console.log('edge context: ', edgeId, option);
|
||||||
|
if (option === 'edit') {
|
||||||
|
self.edgeEditModal.show(edgeId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class EdgeEditModal {
|
||||||
|
constructor(coreNetwork, coreRest) {
|
||||||
|
this.coreNetwork = coreNetwork;
|
||||||
|
this.coreRest = coreRest;
|
||||||
|
this.$linkEditButton = $('#linkedit-button');
|
||||||
|
this.$linkEditModal = $('#linkedit-modal');
|
||||||
|
this.onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
show(edgeId) {
|
||||||
|
// populate form with current link data
|
||||||
|
const edge = this.coreNetwork.edges.get(edgeId);
|
||||||
|
const link = edge.link;
|
||||||
|
this.$linkEditModal.data('link', edgeId);
|
||||||
|
this.$linkEditModal.find('#link-bandwidth').val(link.bandwidth);
|
||||||
|
this.$linkEditModal.find('#link-delay').val(link.delay);
|
||||||
|
this.$linkEditModal.find('#link-per').val(link.loss);
|
||||||
|
this.$linkEditModal.find('#link-dup').val(link.duplicate);
|
||||||
|
this.$linkEditModal.find('#link-jitter').val(link.jitter);
|
||||||
|
|
||||||
|
// set modal name and show
|
||||||
|
this.$linkEditModal.find('.modal-title').text('Edit Edge');
|
||||||
|
this.$linkEditModal.modal('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
const self = this;
|
||||||
|
this.$linkEditButton.click(function () {
|
||||||
|
const $form = self.$linkEditModal.find('form');
|
||||||
|
const formData = {};
|
||||||
|
$form.serializeArray().map(function (x) {
|
||||||
|
let value = x.value;
|
||||||
|
if (value === '') {
|
||||||
|
value = null;
|
||||||
|
} else if (!isNaN(value)) {
|
||||||
|
value = parseInt(value);
|
||||||
|
}
|
||||||
|
formData[x.name] = value;
|
||||||
|
});
|
||||||
|
console.log('link edit data: ', formData);
|
||||||
|
const edgeId = self.$linkEditModal.data('link');
|
||||||
|
const edge = self.coreNetwork.edges.get(edgeId);
|
||||||
|
const link = edge.link;
|
||||||
|
|
||||||
|
link.bandwidth = formData.bandwidth;
|
||||||
|
link.delay = formData.delay;
|
||||||
|
link.duplicate = formData.duplicate;
|
||||||
|
link.loss = formData.loss;
|
||||||
|
link.jitter = formData.jitter;
|
||||||
|
|
||||||
|
coreRest.isRunning()
|
||||||
|
.then(function (isRunning) {
|
||||||
|
if (isRunning) {
|
||||||
|
const linkEdit = link.json();
|
||||||
|
linkEdit.interface_one = linkEdit.interface_one.id;
|
||||||
|
linkEdit.interface_two = linkEdit.interface_two.id;
|
||||||
|
return self.coreRest.editLink(linkEdit);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
console.log('link edit success');
|
||||||
|
})
|
||||||
|
.catch(function (err) {
|
||||||
|
console.log('error editing link: ', err);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.$linkEditModal.modal('hide');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class InfoPanel {
|
||||||
|
constructor(coreNetwork) {
|
||||||
|
this.coreNetwork = coreNetwork;
|
||||||
|
this.$infoCard = $('#info-card');
|
||||||
|
this.$infoCardTable = $('#info-card-table');
|
||||||
|
this.$infoCardHeader = $('#info-card-header');
|
||||||
|
}
|
||||||
|
|
||||||
|
addInfoTable(name, value) {
|
||||||
|
const $nameCell = $('<td>', {text: name});
|
||||||
|
const $valueCell = $('<td>', {text: value});
|
||||||
|
const $row = $('<tr>').append([$nameCell, $valueCell]);
|
||||||
|
this.$infoCardTable.find('tbody').append($row);
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
this.$infoCard.removeClass('visible invisible');
|
||||||
|
this.$infoCard.addClass('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.$infoCard.removeClass('visible invisible');
|
||||||
|
this.$infoCard.addClass('invisible');
|
||||||
|
}
|
||||||
|
|
||||||
|
addInterfaceInfo(nodeInterface) {
|
||||||
|
this.addInfoTable('Interface', `eth${nodeInterface.id}`);
|
||||||
|
if (nodeInterface.ip4) {
|
||||||
|
this.addInfoTable('IP4', `${nodeInterface.ip4}/${nodeInterface.ip4mask}`);
|
||||||
|
}
|
||||||
|
if (nodeInterface.ip6) {
|
||||||
|
this.addInfoTable('IP6', `${nodeInterface.ip6}/${nodeInterface.ip6mask}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showNode(nodeId) {
|
||||||
|
const node = coreNetwork.getCoreNode(nodeId);
|
||||||
|
this.$infoCardHeader.text(node.name);
|
||||||
|
this.$infoCardTable.find('tbody tr').remove();
|
||||||
|
this.addInfoTable('Model', node.model);
|
||||||
|
this.addInfoTable('X', node.x);
|
||||||
|
this.addInfoTable('Y', node.y);
|
||||||
|
for (let interfaceId in node.interfaces) {
|
||||||
|
const nodeInterface = node.interfaces[interfaceId];
|
||||||
|
console.log('node interface: ', nodeInterface);
|
||||||
|
this.addInterfaceInfo(nodeInterface);
|
||||||
|
}
|
||||||
|
this.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
showEdge(edgeId) {
|
||||||
|
const edge = coreNetwork.edges.get(edgeId);
|
||||||
|
const link = edge.link;
|
||||||
|
const nodeOne = coreNetwork.getCoreNode(link.nodeOne);
|
||||||
|
const nodeTwo = coreNetwork.getCoreNode(link.nodeTwo);
|
||||||
|
console.log('clicked edge: ', link);
|
||||||
|
this.$infoCard.addClass('visible');
|
||||||
|
this.$infoCardHeader.text('Edge');
|
||||||
|
this.$infoCardTable.find('tbody tr').remove();
|
||||||
|
this.addInfoTable(nodeOne.name, null);
|
||||||
|
const interfaceOne = link.interfaceOne;
|
||||||
|
if (interfaceOne) {
|
||||||
|
this.addInterfaceInfo(interfaceOne);
|
||||||
|
}
|
||||||
|
this.addInfoTable(nodeTwo.name, null);
|
||||||
|
const interfaceTwo = link.interfaceTwo;
|
||||||
|
if (interfaceTwo) {
|
||||||
|
this.addInterfaceInfo(interfaceTwo);
|
||||||
|
}
|
||||||
|
this.addInfoTable('Bandwidth', edge.link.bandwidth);
|
||||||
|
this.addInfoTable('Delay', edge.link.delay);
|
||||||
|
this.addInfoTable('Duplicate', edge.link.duplicate);
|
||||||
|
this.addInfoTable('Loss', edge.link.loss);
|
||||||
|
this.addInfoTable('Jitter', edge.link.jitter);
|
||||||
|
this.show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -138,20 +138,9 @@
|
||||||
const $nodeButtons = $('.node-buttons a');
|
const $nodeButtons = $('.node-buttons a');
|
||||||
const $sessionId = $('#session-id');
|
const $sessionId = $('#session-id');
|
||||||
const $nodeDisplay = $('#node-display');
|
const $nodeDisplay = $('#node-display');
|
||||||
const $sessionsModal = $('#sessions-modal');
|
|
||||||
const $sessionsTable = $('#sessions-table');
|
|
||||||
const $runButton = $('#run-button');
|
const $runButton = $('#run-button');
|
||||||
const $infoCard = $('#info-card');
|
|
||||||
const $infoCardTable = $('#info-card-table');
|
|
||||||
const $infoCardHeader = $('#info-card-header');
|
|
||||||
const $nodeSelect = $('#node-select');
|
const $nodeSelect = $('#node-select');
|
||||||
const $newSessionButton = $('#new-session-button');
|
const $newSessionButton = $('#new-session-button');
|
||||||
const $nodeContext = $('#node-context');
|
|
||||||
const $edgeContext = $('#edge-context');
|
|
||||||
const $nodeEditModal = $('#nodeedit-modal');
|
|
||||||
const $nodeEditButton = $('#nodeedit-button');
|
|
||||||
const $linkEditModal = $('#linkedit-modal');
|
|
||||||
const $linkEditButton = $('#linkedit-button');
|
|
||||||
|
|
||||||
function formToJson($form) {
|
function formToJson($form) {
|
||||||
const formData = {};
|
const formData = {};
|
||||||
|
|
@ -171,6 +160,12 @@
|
||||||
const coreRest = new CoreRest();
|
const coreRest = new CoreRest();
|
||||||
const coreNetwork = new CoreNetwork('core-network', coreRest);
|
const coreNetwork = new CoreNetwork('core-network', coreRest);
|
||||||
const servicesModal = new ServicesModal(coreRest, coreNetwork);
|
const servicesModal = new ServicesModal(coreRest, coreNetwork);
|
||||||
|
const sessionsModal = new SessionsModal(coreRest, coreNetwork, joinSession);
|
||||||
|
const nodeEditModal = new NodeEditModal(coreNetwork);
|
||||||
|
const nodeContext = new NodeContext(coreNetwork, nodeEditModal, servicesModal);
|
||||||
|
const edgeEditModal = new EdgeEditModal(coreNetwork, coreRest);
|
||||||
|
const edgeContext = new EdgeContext(coreNetwork, edgeEditModal);
|
||||||
|
const infoPanel = new InfoPanel(coreNetwork);
|
||||||
|
|
||||||
coreNetwork.initialSession()
|
coreNetwork.initialSession()
|
||||||
.then(function (session) {
|
.then(function (session) {
|
||||||
|
|
@ -199,13 +194,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addInfoTable(name, value) {
|
|
||||||
let $nameCell = $('<td>', {text: name});
|
|
||||||
let $valueCell = $('<td>', {text: value});
|
|
||||||
const $row = $('<tr>').append([$nameCell, $valueCell]);
|
|
||||||
$infoCardTable.find('tbody').append($row);
|
|
||||||
}
|
|
||||||
|
|
||||||
function joinSession(session) {
|
function joinSession(session) {
|
||||||
$sessionId.text(`Session: ${session.id}`);
|
$sessionId.text(`Session: ${session.id}`);
|
||||||
const isStartEnabled = session.state !== SessionStates.runtime;
|
const isStartEnabled = session.state !== SessionStates.runtime;
|
||||||
|
|
@ -215,77 +203,25 @@
|
||||||
// handle network clicks
|
// handle network clicks
|
||||||
coreNetwork.network.on('click', function (properties) {
|
coreNetwork.network.on('click', function (properties) {
|
||||||
console.log('click properties: ', properties);
|
console.log('click properties: ', properties);
|
||||||
$nodeContext.addClass('d-none');
|
nodeContext.hide();
|
||||||
$edgeContext.addClass('d-none');
|
edgeContext.hide();
|
||||||
|
|
||||||
$infoCard.removeClass('visible invisible');
|
|
||||||
if (properties.nodes.length === 1) {
|
if (properties.nodes.length === 1) {
|
||||||
const nodeId = properties.nodes[0];
|
const nodeId = properties.nodes[0];
|
||||||
const node = coreNetwork.getCoreNode(nodeId);
|
infoPanel.showNode(nodeId);
|
||||||
$infoCardHeader.text(node.name);
|
|
||||||
$infoCard.addClass('visible');
|
|
||||||
$infoCardTable.find('tbody tr').remove();
|
|
||||||
addInfoTable('Model', node.model);
|
|
||||||
addInfoTable('X', node.x);
|
|
||||||
addInfoTable('Y', node.y);
|
|
||||||
for (let interfaceId in node.interfaces) {
|
|
||||||
const interface = node.interfaces[interfaceId];
|
|
||||||
console.log('node interface: ', interface);
|
|
||||||
addInfoTable('Interface', `eth${interface.id}`);
|
|
||||||
if (interface.ip4) {
|
|
||||||
addInfoTable('IP4', `${interface.ip4}/${interface.ip4mask}`);
|
|
||||||
}
|
|
||||||
if (interface.ip6) {
|
|
||||||
addInfoTable('IP6', `${interface.ip6}/${interface.ip6mask}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (properties.edges.length === 1) {
|
} else if (properties.edges.length === 1) {
|
||||||
const edgeId = properties.edges[0];
|
const edgeId = properties.edges[0];
|
||||||
const edge = coreNetwork.edges.get(edgeId);
|
infoPanel.showEdge(edgeId);
|
||||||
const link = edge.link;
|
|
||||||
const nodeOne = coreNetwork.getCoreNode(link.nodeOne);
|
|
||||||
const nodeTwo = coreNetwork.getCoreNode(link.nodeTwo);
|
|
||||||
console.log('clicked edge: ', link);
|
|
||||||
$infoCard.addClass('visible');
|
|
||||||
$infoCardHeader.text('Edge');
|
|
||||||
$infoCardTable.find('tbody tr').remove();
|
|
||||||
addInfoTable(nodeOne.name, null);
|
|
||||||
const interfaceOne = link.interfaceOne;
|
|
||||||
if (interfaceOne) {
|
|
||||||
addInfoTable('Interface', `eth${interfaceOne.id}`);
|
|
||||||
if (interfaceOne.ip4) {
|
|
||||||
addInfoTable('IP4', `${interfaceOne.ip4}/${interfaceOne.ip4mask}`);
|
|
||||||
}
|
|
||||||
if (interfaceOne.ip6) {
|
|
||||||
addInfoTable('IP6', `${interfaceOne.ip6}/${interfaceOne.ip6mask}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
addInfoTable(nodeTwo.name, null);
|
|
||||||
const interfaceTwo = link.interfaceTwo;
|
|
||||||
if (interfaceTwo) {
|
|
||||||
addInfoTable('Interface', `eth${interfaceTwo.id}`);
|
|
||||||
if (interfaceTwo.ip4) {
|
|
||||||
addInfoTable('IP4', `${interfaceTwo.ip4}/${interfaceTwo.ip4mask}`);
|
|
||||||
}
|
|
||||||
if (interfaceTwo.ip6) {
|
|
||||||
addInfoTable('IP6', `${interfaceTwo.ip6}/${interfaceTwo.ip6mask}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
addInfoTable('Bandwidth', edge.link.bandwidth);
|
|
||||||
addInfoTable('Delay', edge.link.delay);
|
|
||||||
addInfoTable('Duplicate', edge.link.duplicate);
|
|
||||||
addInfoTable('Loss', edge.link.loss);
|
|
||||||
addInfoTable('Jitter', edge.link.jitter);
|
|
||||||
} else {
|
} else {
|
||||||
$infoCard.addClass('invisible');
|
infoPanel.hide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
coreNetwork.network.on('oncontext', function (properties) {
|
coreNetwork.network.on('oncontext', function (properties) {
|
||||||
console.log('context event: ', properties);
|
console.log('context event: ', properties);
|
||||||
properties.event.preventDefault();
|
properties.event.preventDefault();
|
||||||
$nodeContext.addClass('d-none');
|
nodeContext.hide();
|
||||||
$edgeContext.addClass('d-none');
|
edgeContext.hide();
|
||||||
|
|
||||||
const location = properties.pointer.DOM;
|
const location = properties.pointer.DOM;
|
||||||
const x = properties.event.pageX;
|
const x = properties.event.pageX;
|
||||||
|
|
@ -293,132 +229,15 @@
|
||||||
|
|
||||||
const nodeId = coreNetwork.network.getNodeAt(location);
|
const nodeId = coreNetwork.network.getNodeAt(location);
|
||||||
if (nodeId) {
|
if (nodeId) {
|
||||||
const node = coreNetwork.nodes.get(nodeId);
|
nodeContext.show(nodeId, x, y);
|
||||||
console.log('context node: ', node);
|
|
||||||
$nodeContext.data('node', nodeId);
|
|
||||||
$nodeContext.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: x,
|
|
||||||
top: y
|
|
||||||
});
|
|
||||||
$nodeContext.removeClass('d-none');
|
|
||||||
} else {
|
} else {
|
||||||
const edgeId = coreNetwork.network.getEdgeAt(location);
|
const edgeId = coreNetwork.network.getEdgeAt(location);
|
||||||
if (edgeId) {
|
if (edgeId) {
|
||||||
const edge = coreNetwork.edges.get(edgeId);
|
edgeContext.show(edgeId, x, y);
|
||||||
console.log('context edge: ', edge);
|
|
||||||
$edgeContext.data('edge', edgeId);
|
|
||||||
$edgeContext.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: x,
|
|
||||||
top: y
|
|
||||||
});
|
|
||||||
$edgeContext.removeClass('d-none');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$nodeContext.click(function (event) {
|
|
||||||
$nodeContext.addClass('d-none');
|
|
||||||
console.log('node context click: ', event);
|
|
||||||
const nodeId = $nodeContext.data('node');
|
|
||||||
const node = coreNetwork.nodes.get(nodeId).coreNode;
|
|
||||||
const $target = $(event.target);
|
|
||||||
const option = $target.data('option');
|
|
||||||
console.log('node context: ', nodeId, option);
|
|
||||||
if (option === 'edit') {
|
|
||||||
$nodeEditModal.data('node', nodeId);
|
|
||||||
$nodeEditModal.find('.modal-title').text(`Edit Node: ${node.name}`);
|
|
||||||
$nodeEditModal.find('#node-name').val(node.name);
|
|
||||||
$nodeEditModal.modal('show');
|
|
||||||
} else if (option === 'services') {
|
|
||||||
servicesModal.show(nodeId)
|
|
||||||
.catch(function(err) {
|
|
||||||
console.log('error showing services modal: ', err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$nodeEditButton.click(function () {
|
|
||||||
const $form = $nodeEditModal.find('form');
|
|
||||||
const formData = formToJson($form);
|
|
||||||
console.log('node edit data: ', formData);
|
|
||||||
const nodeId = $nodeEditModal.data('node');
|
|
||||||
const node = coreNetwork.nodes.get(nodeId);
|
|
||||||
if (formData.name) {
|
|
||||||
node.label = formData.name;
|
|
||||||
node.coreNode.name = formData.name;
|
|
||||||
coreNetwork.nodes.update(node);
|
|
||||||
}
|
|
||||||
$nodeEditModal.modal('hide');
|
|
||||||
});
|
|
||||||
|
|
||||||
$edgeContext.click(function (event) {
|
|
||||||
$edgeContext.addClass('d-none');
|
|
||||||
console.log('edge context click: ', event);
|
|
||||||
const edgeId = $edgeContext.data('edge');
|
|
||||||
const edge = coreNetwork.edges.get(edgeId);
|
|
||||||
const link = edge.link;
|
|
||||||
const $target = $(event.target);
|
|
||||||
const option = $target.data('option');
|
|
||||||
console.log('edge context: ', edgeId, option);
|
|
||||||
if (option === 'edit') {
|
|
||||||
// populate form with current link data
|
|
||||||
$linkEditModal.data('link', edgeId);
|
|
||||||
$linkEditModal.find('#link-bandwidth').val(link.bandwidth);
|
|
||||||
$linkEditModal.find('#link-delay').val(link.delay);
|
|
||||||
$linkEditModal.find('#link-per').val(link.loss);
|
|
||||||
$linkEditModal.find('#link-dup').val(link.duplicate);
|
|
||||||
$linkEditModal.find('#link-jitter').val(link.jitter);
|
|
||||||
|
|
||||||
// set modal name and show
|
|
||||||
$linkEditModal.find('.modal-title').text('Edit Edge');
|
|
||||||
$linkEditModal.modal('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$linkEditButton.click(function () {
|
|
||||||
const $form = $linkEditModal.find('form');
|
|
||||||
const formData = {};
|
|
||||||
$form.serializeArray().map(function (x) {
|
|
||||||
let value = x.value;
|
|
||||||
if (value === '') {
|
|
||||||
value = null;
|
|
||||||
} else if (!isNaN(value)) {
|
|
||||||
value = parseInt(value);
|
|
||||||
}
|
|
||||||
formData[x.name] = value;
|
|
||||||
});
|
|
||||||
console.log('link edit data: ', formData);
|
|
||||||
const edgeId = $linkEditModal.data('link');
|
|
||||||
const edge = coreNetwork.edges.get(edgeId);
|
|
||||||
const link = edge.link;
|
|
||||||
|
|
||||||
link.bandwidth = formData.bandwidth;
|
|
||||||
link.delay = formData.delay;
|
|
||||||
link.duplicate = formData.duplicate;
|
|
||||||
link.loss = formData.loss;
|
|
||||||
link.jitter = formData.jitter;
|
|
||||||
|
|
||||||
coreRest.isRunning()
|
|
||||||
.then(function (isRunning) {
|
|
||||||
if (isRunning) {
|
|
||||||
const linkEdit = link.json();
|
|
||||||
linkEdit.interface_one = linkEdit.interface_one.id;
|
|
||||||
linkEdit.interface_two = linkEdit.interface_two.id;
|
|
||||||
return coreRest.editLink(linkEdit);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(function (response) {
|
|
||||||
console.log('link edit success');
|
|
||||||
})
|
|
||||||
.catch(function (err) {
|
|
||||||
console.log('error editing link: ', err);
|
|
||||||
});
|
|
||||||
|
|
||||||
$linkEditModal.modal('hide');
|
|
||||||
});
|
|
||||||
|
|
||||||
$newSessionButton.click(function () {
|
$newSessionButton.click(function () {
|
||||||
coreNetwork.newSession()
|
coreNetwork.newSession()
|
||||||
.then(function (session) {
|
.then(function (session) {
|
||||||
|
|
@ -429,23 +248,6 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$sessionsTable.on('click', 'td', function (event) {
|
|
||||||
const sessionId = $(this).parent('tr').data('session');
|
|
||||||
console.log('clicked session to join: ', sessionId);
|
|
||||||
if (sessionId === coreRest.currentSession) {
|
|
||||||
console.log('same session, not changing');
|
|
||||||
} else {
|
|
||||||
coreNetwork.joinSession(sessionId)
|
|
||||||
.then(function (session) {
|
|
||||||
joinSession(session);
|
|
||||||
$sessionsModal.modal('hide');
|
|
||||||
})
|
|
||||||
.catch(function (err) {
|
|
||||||
console.log('join session error: ', err);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$linkButton.click(function () {
|
$linkButton.click(function () {
|
||||||
const linkMode = !$(this).hasClass('active');
|
const linkMode = !$(this).hasClass('active');
|
||||||
coreNetwork.linkMode(linkMode);
|
coreNetwork.linkMode(linkMode);
|
||||||
|
|
@ -492,29 +294,6 @@
|
||||||
$nodeSelect.attr('src', icon);
|
$nodeSelect.attr('src', icon);
|
||||||
});
|
});
|
||||||
|
|
||||||
// show sessions
|
|
||||||
$sessionsModal.on('shown.bs.modal', function () {
|
|
||||||
console.log('show sessions');
|
|
||||||
$sessionsTable.find('tbody tr').remove();
|
|
||||||
coreRest.getSessions()
|
|
||||||
.then(function (response) {
|
|
||||||
const sessions = response.sessions;
|
|
||||||
for (let session of sessions) {
|
|
||||||
console.log('show sessions: ', session);
|
|
||||||
const $idCell = $('<td>', {text: session.id});
|
|
||||||
const $nodeCell = $('<td>', {text: session.nodes});
|
|
||||||
const stateName = coreRest.getStateName(session.state);
|
|
||||||
const $stateCell = $('<td>', {text: stateName});
|
|
||||||
const $row = $('<tr>', {class: 'session-join', 'data-session': session.id});
|
|
||||||
$row.append([$idCell, $nodeCell, $stateCell]);
|
|
||||||
$sessionsTable.find('tbody').append($row);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(function (err) {
|
|
||||||
console.log('error getting sessions: ', err);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('connecting to ws');
|
console.log('connecting to ws');
|
||||||
const ws = io.connect();
|
const ws = io.connect();
|
||||||
ws.on('connection', function () {
|
ws.on('connection', function () {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue