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

web app, added emane node, got basic emane networks working and joining existing emane network

Browse source
This commit is contained in:
Blake J. Harnden 2018-05-16 15:45:46 -07:00
parent b15b838555
commit 8889d121c0
6 changed files with 157 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

38
webapp/static/corenetwork.js
View file

@ -25,6 +25,12 @@ class NodeHelper {
name: 'wlan',
display: 'WLAN'
},
// emane
10: {
name: 'emane',
display: 'EMANE'
},
// ptp
12: {
name: 'ptp',
display: 'PTP'
@ -38,16 +44,31 @@ class NodeHelper {
mdr: 'static/mdr.svg',
switch: 'static/lanswitch.svg',
hub: 'static/hub.svg',
wlan: 'static/wlan.svg'
wlan: 'static/wlan.svg',
emane: 'static/wlan.svg'
};
this.defaultNode = 0;
this.ptpNode = 12;
this.switchNode = 4;
this.hubNode = 5;
this.wlanNode = 6;
this.emaneNode = 10;
this.ptpNode = 12;
this.controlNet = 13;
}
isNetworkNode(node) {
return [4, 5, 6, 12].includes(node.type);
return [
this.switchNode,
this.hubNode,
this.wlanNode,
this.emaneNode,
this.ptpNode
].includes(node.type);
}
isSkipNode(node) {
return [CoreNodeHelper.ptpNode, CoreNodeHelper.controlNet].includes(node.type);
}
getDisplay(nodeType) {
@ -82,6 +103,7 @@ class CoreNode {
this.emulation_id = null;
this.emulation_server = null;
this.interfaces = {};
this.emane = null;
}
getNetworkNode() {
@ -93,7 +115,6 @@ class CoreNode {
y: this.y,
label: this.name,
coreNode: this,
//color: '#FFF',
shape: 'image',
image: icon
};
@ -110,7 +131,8 @@ class CoreNode {
lat: this.lat,
lon: this.lon,
alt: this.alt,
services: this.services
services: this.services,
emane: this.emane
}
}
}
@ -194,6 +216,7 @@ class CoreNetwork {
const session = await this.coreRest.createSession();
this.coreRest.currentSession = session.id;
this.reset();
toastr.success(`Created ${session.id}`, 'Session');
return session;
}
@ -260,6 +283,7 @@ class CoreNetwork {
const coreNode = new CoreNode(node.id, node.type, node.name, position.x, position.y);
coreNode.model = node.model;
coreNode.services = node.services;
coreNode.emane = node.emane;
this.nodes.add(coreNode.getNetworkNode());
}
@ -286,7 +310,7 @@ class CoreNetwork {
const nodeIds = [0];
for (let node of nodes) {
if (node.type === CoreNodeHelper.ptpNode) {
if (CoreNodeHelper.isSkipNode(node)) {
continue;
}
@ -319,6 +343,8 @@ class CoreNetwork {
this.network.fit();
toastr.success(`Joined ${sessionId}`, 'Session');
return {
id: sessionId,
state: session.state

6
webapp/static/corerest.js
View file

@ -62,7 +62,11 @@ class CoreRest {
}
async setSessionState(state) {
return await putJson(`/sessions/${this.currentSession}/state`, {state})
return await putJson(`/sessions/${this.currentSession}/state`, {state});
}
async getEmaneModels() {
return await $.getJSON(`/sessions/${this.currentSession}/emane`);
}
async createNode(node) {

80
webapp/static/coreui.js
View file

@ -1,3 +1,32 @@
function createRadio(name, value, label, checked = false) {
const $formCheck = $('<div>', {class: 'form-check'});
const $input = $('<input>', {
class: 'form-check-input',
type: 'radio',
name: name,
checked,
value
});
const $label = $('<label>', {class: 'form-check-label', text: label});
$formCheck.append([$input, $label]);
return $formCheck;
}
function createCheckbox(name, value, label, checked = false) {
const $formCheck = $('<div>', {class: 'form-check col'});
const $input = $('<input>', {
class: 'form-check-input',
type: 'checkbox',
value,
name,
checked
});
const $label = $('<label>', {class: 'form-check-label', text: label});
$formCheck.append([$input, $label]);
return $formCheck;
}
class ServiceModal {
constructor(coreRest) {
this.coreRest = coreRest;
@ -45,7 +74,6 @@ class ServicesModal {
}
editService(event) {
//event.preventDefault();
const $target = $(event.target);
const service = $target.parent().parent().find('label').text();
console.log('edit service: ', service);
@ -89,17 +117,8 @@ class ServicesModal {
const $row = $('<div>', {class: 'row mb-1'});
const $button = $('<div>', {class: 'col-1'})
.append($('<a>', {text: 'Edit', href: '#', class: 'btn btn-primary btn-sm service-button'}));
const $formCheck = $('<div>', {class: 'form-check col'});
const $input = $('<input>', {
class: 'form-check-input',
type: 'checkbox',
value: service,
name: service,
checked
});
const $label = $('<label>', {class: 'form-check-label', text: service});
$formCheck.append([$input, $label]);
$row.append([$button, $formCheck]);
const $checkbox = createCheckbox(service, service, service, checked);
$row.append([$button, $checkbox]);
$formGroup.append($row);
}
}
@ -189,7 +208,7 @@ class NodeContext {
}
console.log('node type: ', node.type);
if (node.type === CoreNodeHelper.wlanNode) {
if (node.type === CoreNodeHelper.emaneNode || node.type === CoreNodeHelper.wlanNode) {
this.$linkRfButton.removeClass('d-none');
} else {
this.$linkRfButton.addClass('d-none');
@ -217,7 +236,7 @@ class NodeContext {
console.log('node context: ', nodeId, option);
switch (option) {
case 'edit':
this.nodeEditModal.show(nodeId);
await this.nodeEditModal.show(nodeId);
break;
case 'services':
await this.servicesModal.show(nodeId);
@ -236,18 +255,35 @@ class NodeContext {
}
class NodeEditModal {
constructor(coreNetwork) {
constructor(coreNetwork, coreRest) {
this.coreNetwork = coreNetwork;
this.coreRest = coreRest;
this.$modal = $('#nodeedit-modal');
this.$form = this.$modal.find('form');
this.$formCustom = $('#nodeedit-custom');
this.$editButton = $('#nodeedit-button');
this.$editButton.click(this.onClick.bind(this));
}
show(nodeId) {
async show(nodeId) {
const node = this.coreNetwork.getCoreNode(nodeId);
this.$modal.data('node', nodeId);
this.$modal.find('.modal-title').text(`Edit Node: ${node.name}`);
this.$modal.find('#node-name').val(node.name);
this.$formCustom.html('');
if (node.type === CoreNodeHelper.emaneNode) {
const response = await this.coreRest.getEmaneModels();
this.$formCustom.append($('<label>', {class: 'form-label', text: 'EMANE Model'}));
console.log('emane models: ', response);
for (let model of response.models) {
const checked = node.emane === model;
const label = model.split('_')[1];
const $radio = createRadio('emane', model, label, checked);
this.$formCustom.append($radio);
}
}
this.$modal.modal('show');
}
@ -262,6 +298,11 @@ class NodeEditModal {
node.coreNode.name = formData.name;
this.coreNetwork.nodes.update(node);
}
if (formData.emane !== undefined) {
node.coreNode.emane = formData.emane;
}
this.$modal.modal('hide');
}
}
@ -427,7 +468,12 @@ class InfoPanel {
this.$infoCard.data('node', nodeId);
this.$infoCardHeader.text(node.name);
this.$infoCardTable.find('tbody tr').remove();
this.addInfoTable('Model', node.model);
if (node.model) {
this.addInfoTable('Model', node.model);
}
if (node.emane) {
this.addInfoTable('EMANE', node.emane);
}
this.addInfoTable('X', node.x);
this.addInfoTable('Y', node.y);
for (let interfaceId in node.interfaces) {