web app can create and join sessions, updated node info panel and edge info panel
This commit is contained in:
Blake J. Harnden
parent
cd949340ac
commit
b1b05a7eaa
6 changed files with 91 additions and 24 deletions
|
|
@ -147,10 +147,9 @@ def get_session(session_id):
|
|||
},
|
||||
"url": "/sessions/%s/nodes/%s" % (session_id, node.objid)
|
||||
})
|
||||
state = EventTypes(session.state)
|
||||
|
||||
return jsonify(
|
||||
state=state.name,
|
||||
state=session.state,
|
||||
nodes=nodes
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
#info-card-table td {
|
||||
font-size: 12px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
#node-select {
|
||||
|
|
@ -11,6 +12,10 @@
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
#sessions-modal td {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -163,12 +163,24 @@ class CoreNetwork {
|
|||
async initialSession() {
|
||||
const session = await this.coreRest.retrieveSession();
|
||||
console.log('retrieved session: ', session);
|
||||
const response = await coreRest.getSession();
|
||||
console.log('session info: ', response);
|
||||
this.joinedSessionNodes(response.nodes);
|
||||
await this.joinSession(session.id);
|
||||
return session;
|
||||
}
|
||||
|
||||
async newSession() {
|
||||
const session = await this.coreRest.createSession();
|
||||
this.coreRest.currentSession = session.id;
|
||||
this.reset();
|
||||
return session;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.nodeId = 0;
|
||||
this.nodes.clear();
|
||||
this.edges.clear();
|
||||
this.links = {};
|
||||
}
|
||||
|
||||
enableNodeCreation(enabled) {
|
||||
console.log('node created enabled: ', enabled);
|
||||
this.nodesEnabled = enabled;
|
||||
|
|
@ -194,7 +206,13 @@ class CoreNetwork {
|
|||
return this.nodeId;
|
||||
}
|
||||
|
||||
joinedSessionNodes(nodes) {
|
||||
async joinSession(sessionId) {
|
||||
this.reset();
|
||||
this.coreRest.currentSession = sessionId;
|
||||
const session = await coreRest.getSession();
|
||||
console.log('session info: ', session);
|
||||
const nodes = session.nodes;
|
||||
|
||||
const self = this;
|
||||
const nodeIds = [0];
|
||||
|
||||
|
|
@ -229,6 +247,11 @@ class CoreNetwork {
|
|||
} else {
|
||||
this.nodeId = 0;
|
||||
}
|
||||
|
||||
return {
|
||||
id: sessionId,
|
||||
state: session.state
|
||||
};
|
||||
}
|
||||
|
||||
createEdgeFromLink(linkData) {
|
||||
|
|
|
|||
|
|
@ -92,15 +92,14 @@ class CoreRest {
|
|||
const session = {id: 0, state: 0};
|
||||
|
||||
if (sessions.length) {
|
||||
this.currentSession = sessions[0].id;
|
||||
session.id = sessions[0].id;
|
||||
session.state = sessions[0].state;
|
||||
} else {
|
||||
response = await this.createSession();
|
||||
this.currentSession = response.id;
|
||||
session.id = response.id;
|
||||
session.state = response.state;
|
||||
}
|
||||
|
||||
session.id = this.currentSession;
|
||||
return session;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
Sessions
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="nb-session">
|
||||
<a id="new-session-button" class="dropdown-item" href="#">New</a>
|
||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#sessions-modal">View</a>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -131,15 +132,14 @@
|
|||
const $infoCardTable = $('#info-card-table');
|
||||
const $infoCardHeader = $('#info-card-header');
|
||||
const $nodeSelect = $('#node-select');
|
||||
const $newSessionButton = $('#new-session-button');
|
||||
|
||||
// initial core setup
|
||||
const coreRest = new CoreRest();
|
||||
const coreNetwork = new CoreNetwork('core-network', coreRest);
|
||||
coreNetwork.initialSession()
|
||||
.then(function(session) {
|
||||
$sessionId.text(`Session: ${session.id}`);
|
||||
const isStartEnabled = session.state !== SessionStates.runtime;
|
||||
setRunButton(isStartEnabled);
|
||||
joinSession(session);
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.log('initial session error: ', err);
|
||||
|
|
@ -165,12 +165,16 @@
|
|||
}
|
||||
|
||||
function addInfoTable(name, value) {
|
||||
if (value) {
|
||||
let $nameCell = $('<td>', {text: name});
|
||||
let $valueCell = $('<td>', {text: value});
|
||||
const $row = $('<tr>').append([$nameCell, $valueCell]);
|
||||
$infoCardTable.find('tbody').append($row);
|
||||
}
|
||||
let $nameCell = $('<td>', {text: name});
|
||||
let $valueCell = $('<td>', {text: value});
|
||||
const $row = $('<tr>').append([$nameCell, $valueCell]);
|
||||
$infoCardTable.find('tbody').append($row);
|
||||
}
|
||||
|
||||
function joinSession(session) {
|
||||
$sessionId.text(`Session: ${session.id}`);
|
||||
const isStartEnabled = session.state !== SessionStates.runtime;
|
||||
setRunButton(isStartEnabled);
|
||||
}
|
||||
|
||||
// handle network clicks
|
||||
|
|
@ -188,6 +192,17 @@
|
|||
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) {
|
||||
const edgeId = properties.edges[0];
|
||||
const edge = coreNetwork.edges.get(edgeId);
|
||||
|
|
@ -195,7 +210,7 @@
|
|||
$infoCard.addClass('visible');
|
||||
$infoCardHeader.text('Edge');
|
||||
$infoCardTable.find('tbody tr').remove();
|
||||
addInfoTable('Source', edge.nodeOne);
|
||||
addInfoTable(edge.nodeOne, null);
|
||||
const interfaceOne = edge.interfaceOne;
|
||||
if (interfaceOne) {
|
||||
if (interfaceOne.ip4) {
|
||||
|
|
@ -205,7 +220,7 @@
|
|||
addInfoTable('IP6', `${interfaceOne.ip6}/${interfaceOne.ip6mask}`);
|
||||
}
|
||||
}
|
||||
addInfoTable('Destination', edge.nodeTwo);
|
||||
addInfoTable(edge.nodeTwo, null);
|
||||
const interfaceTwo = edge.interfaceTwo;
|
||||
if (interfaceTwo) {
|
||||
if (interfaceTwo.ip4) {
|
||||
|
|
@ -220,7 +235,33 @@
|
|||
}
|
||||
});
|
||||
|
||||
// page interactions
|
||||
$newSessionButton.click(function() {
|
||||
coreNetwork.newSession()
|
||||
.then(function(session) {
|
||||
joinSession(session);
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('error creating new session: ', err);
|
||||
});
|
||||
});
|
||||
|
||||
$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);
|
||||
$sessionsModel.modal('hide');
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('join session error: ', err);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$linkButton.click(function () {
|
||||
const linkMode = !$(this).hasClass('active');
|
||||
coreNetwork.linkMode(linkMode);
|
||||
|
|
@ -277,11 +318,12 @@
|
|||
const sessions = response.sessions;
|
||||
for (let session of sessions) {
|
||||
console.log('show sessions: ', session);
|
||||
const $idCell = $('<th>', {scope: 'row', text: session.id});
|
||||
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>').append([$idCell, $nodeCell, $stateCell]);
|
||||
const $row = $('<tr>', {class: 'session-join', 'data-session': session.id});
|
||||
$row.append([$idCell, $nodeCell, $stateCell]);
|
||||
$sessionsTable.find('tbody').append($row);
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">Join</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue