first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
This commit is contained in:
Blake J. Harnden
parent
b10c7fe502
commit
8e99af96a4
18 changed files with 1414 additions and 45 deletions
|
|
@ -1,25 +1,52 @@
|
|||
const Ip4Prefix = '10.0.0.1/24';
|
||||
const Ip6Prefix = '2001::/64';
|
||||
|
||||
const PtpNode = 12;
|
||||
const NodeTypes = {
|
||||
// default router
|
||||
0: {
|
||||
name: 'node'
|
||||
name: 'node',
|
||||
display: 'Default'
|
||||
},
|
||||
// switch
|
||||
4: {
|
||||
name: 'switch'
|
||||
name: 'switch',
|
||||
display: 'Switch'
|
||||
},
|
||||
// hub
|
||||
5: {
|
||||
name: 'hub'
|
||||
name: 'hub',
|
||||
display: 'Hub'
|
||||
},
|
||||
// wlan
|
||||
6: {
|
||||
name: 'wlan'
|
||||
name: 'wlan',
|
||||
display: 'WLAN'
|
||||
},
|
||||
12: {
|
||||
name: 'ptp',
|
||||
display: 'PTP'
|
||||
}
|
||||
};
|
||||
|
||||
function getNodeType(nodeType) {
|
||||
return NodeTypes[nodeType];
|
||||
}
|
||||
|
||||
const NodeIcons = {
|
||||
router: 'static/router.svg',
|
||||
host: 'static/host.gif',
|
||||
PC: 'static/pc.gif',
|
||||
mdr: 'static/mdr.svg',
|
||||
switch: 'static/lanswitch.svg',
|
||||
hub: 'static/hub.svg',
|
||||
wlan: 'static/wlan.gif'
|
||||
};
|
||||
|
||||
class CoreNode {
|
||||
constructor(id, name, x, y) {
|
||||
constructor(id, type, name, x, y) {
|
||||
this.id = id;
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.model = null;
|
||||
this.canvas = null;
|
||||
|
|
@ -32,35 +59,54 @@ class CoreNode {
|
|||
this.lon = null;
|
||||
this.alt = null;
|
||||
this.emulation_id = null;
|
||||
this.emulation_server = null;
|
||||
this.emulation_server = null
|
||||
this.interfaces = {};
|
||||
}
|
||||
|
||||
getNetworkNode() {
|
||||
let iconName = getNodeType(this.type).name;
|
||||
if (this.type === 0) {
|
||||
iconName = this.model;
|
||||
}
|
||||
const icon = NodeIcons[iconName];
|
||||
|
||||
return {
|
||||
id: this.id,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
label: this.name,
|
||||
node: this
|
||||
coreNode: this,
|
||||
//color: '#FFF',
|
||||
//shape: 'image',
|
||||
//shapeProperties: {
|
||||
// useBorderWithImage: true
|
||||
//},
|
||||
//image: nodeMode.image,
|
||||
//type: nodeMode.nodeType
|
||||
shape: 'image',
|
||||
image: icon
|
||||
};
|
||||
}
|
||||
|
||||
json() {
|
||||
return {
|
||||
id: this.id,
|
||||
type: this.type,
|
||||
name: this.name,
|
||||
model: this.model,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
lat: this.lat,
|
||||
lon: this.lon,
|
||||
alt: this.alt
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class CoreNetwork {
|
||||
constructor(elementId) {
|
||||
this.nodeType = NodeTypes['0'];
|
||||
this.nodeModel = null;
|
||||
constructor(elementId, coreRest) {
|
||||
this.coreRest = coreRest;
|
||||
this.nodeType = 0;
|
||||
this.nodeModel = 'router';
|
||||
this.nodeId = 0;
|
||||
this.container = document.getElementById(elementId);
|
||||
this.nodes = new vis.DataSet();
|
||||
this.edges = new vis.DataSet();
|
||||
this.links = {};
|
||||
this.networkData = {
|
||||
nodes: this.nodes,
|
||||
edges: this.edges
|
||||
|
|
@ -88,18 +134,120 @@ class CoreNetwork {
|
|||
this.edges.on('add', this.addEdge.bind(this));
|
||||
}
|
||||
|
||||
getCoreNodes() {
|
||||
const coreNodes = [];
|
||||
for (let node of this.nodes.get()) {
|
||||
coreNodes.push(node.coreNode.json());
|
||||
}
|
||||
return coreNodes;
|
||||
}
|
||||
|
||||
addCoreNode(node) {
|
||||
const position = node.position;
|
||||
const coreNode = new CoreNode(node.id, node.type, node.name, position.x, position.y);
|
||||
coreNode.model = node.model;
|
||||
this.nodes.add(coreNode.getNetworkNode());
|
||||
}
|
||||
|
||||
nextNodeId() {
|
||||
this.nodeId += 1;
|
||||
return this.nodeId;
|
||||
}
|
||||
|
||||
joinedSessions(nodes) {
|
||||
const self = this;
|
||||
for (let node of nodes) {
|
||||
if (node.type === PtpNode) {
|
||||
continue;
|
||||
}
|
||||
|
||||
this.addCoreNode(node);
|
||||
}
|
||||
|
||||
for (let node of nodes) {
|
||||
if (![4, 5, 6, 12].includes(node.type)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
this.coreRest.getLinks(node.id)
|
||||
.then(function(response) {
|
||||
console.log('link response: ', response);
|
||||
for (let linkData of response.links) {
|
||||
self.createEdgeFromLink(linkData);
|
||||
}
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('get link error: ', err);
|
||||
});
|
||||
}
|
||||
|
||||
if (nodes.length) {
|
||||
this.nodeId = Math.max.apply(Math, nodes.map(function (node) {
|
||||
return node.id
|
||||
}));
|
||||
} else {
|
||||
this.nodeId = 0;
|
||||
}
|
||||
}
|
||||
|
||||
createEdgeFromLink(linkData) {
|
||||
const fromNode = this.nodes.get(linkData.node1_id).coreNode;
|
||||
const toNode = this.nodes.get(linkData.node2_id).coreNode;
|
||||
const linkId = `${fromNode.id}-${toNode.id}`;
|
||||
|
||||
const interfaceOne = {
|
||||
id: linkData.interface1_id,
|
||||
ip4: linkData.interface1_ip4,
|
||||
ip4mask: linkData.interface1_ip4_mask,
|
||||
ip6: linkData.interface1_ip6,
|
||||
ip6mask: linkData.interface1_ip6_mask
|
||||
};
|
||||
fromNode.interfaces[linkData.interface1_id] = interfaceOne;
|
||||
|
||||
const interfaceTwo = {
|
||||
id: linkData.interface2_id,
|
||||
ip4: linkData.interface2_ip4,
|
||||
ip4mask: linkData.interface2_ip4_mask,
|
||||
ip6: linkData.interface2_ip6,
|
||||
ip6mask: linkData.interface2_ip6_mask
|
||||
};
|
||||
toNode.interfaces[linkData.interface2_id] = interfaceTwo;
|
||||
|
||||
this.links[linkId] = {
|
||||
node_one: fromNode.id,
|
||||
node_two: toNode.id,
|
||||
interface_one: interfaceOne,
|
||||
interface_two: interfaceTwo
|
||||
};
|
||||
|
||||
const edge = {from: fromNode.id, to: toNode.id};
|
||||
this.edges.add(edge);
|
||||
}
|
||||
|
||||
async start() {
|
||||
const nodes = coreNetwork.getCoreNodes();
|
||||
for (let node of nodes) {
|
||||
const response = await coreRest.createNode(node);
|
||||
console.log('created node: ', response);
|
||||
}
|
||||
|
||||
for (let linkId in this.links) {
|
||||
const link = this.links[linkId];
|
||||
const response = await coreRest.createLink(link);
|
||||
console.log('created link: ', response);
|
||||
}
|
||||
|
||||
return await coreRest.setSessionState(SessionStates.instantiation);
|
||||
}
|
||||
|
||||
addNode(properties) {
|
||||
console.log('add node event: ', properties);
|
||||
if (properties.nodes.length === 0) {
|
||||
const {x, y} = properties.pointer.canvas;
|
||||
const nodeId = this.nextNodeId();
|
||||
const name = `${this.nodeType.name}${nodeId}`;
|
||||
const coreNode = new CoreNode(nodeId, name, x, y);
|
||||
const nodeTypeData = getNodeType(this.nodeType);
|
||||
const name = `${nodeTypeData.name}${nodeId}`;
|
||||
const coreNode = new CoreNode(nodeId, this.nodeType, name, x, y);
|
||||
coreNode.model = this.nodeModel;
|
||||
this.nodes.add(coreNode.getNetworkNode());
|
||||
console.log('added node: ', coreNode.getNetworkNode());
|
||||
|
|
@ -115,10 +263,55 @@ class CoreNetwork {
|
|||
this.edges.remove(edge.id);
|
||||
}
|
||||
|
||||
const fromNode = this.nodes.get(edge.from).coreNode;
|
||||
const toNode = this.nodes.get(edge.to).coreNode;
|
||||
|
||||
this.addEdgeLink(edge, fromNode, toNode)
|
||||
.then(function() {
|
||||
console.log('create edge link success!');
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('create link error: ', err);
|
||||
});
|
||||
|
||||
// keep edge mode enabled
|
||||
setTimeout(() => this.network.addEdgeMode(), 250);
|
||||
}
|
||||
|
||||
async addEdgeLink(edge, fromNode, toNode) {
|
||||
const fromIps = await this.coreRest.getNodeIps(fromNode.id, Ip4Prefix, Ip6Prefix);
|
||||
const toIps = await this.coreRest.getNodeIps(toNode.id, Ip4Prefix, Ip6Prefix);
|
||||
console.log('link ips: ', fromIps, toIps);
|
||||
|
||||
const linkId = `${fromNode.id}-${toNode.id}`;
|
||||
const interfaceOneId =Object.keys(fromNode.interfaces).length;
|
||||
const interfaceOne = {
|
||||
id: interfaceOneId,
|
||||
ip4: fromIps.ip4,
|
||||
ip4mask: fromIps.ip4mask,
|
||||
ip6: fromIps.ip6,
|
||||
ip6mask: fromIps.ip6mask
|
||||
};
|
||||
fromNode.interfaces[interfaceOneId] = interfaceOne;
|
||||
|
||||
const interfaceTwoId = Object.keys(toNode.interfaces).length;
|
||||
const interfaceTwo = {
|
||||
id: interfaceTwoId,
|
||||
ip4: toIps.ip4,
|
||||
ip4mask: toIps.ip4mask,
|
||||
ip6: toIps.ip6,
|
||||
ip6mask: toIps.ip6mask
|
||||
};
|
||||
toNode.interfaces[interfaceTwoId] = interfaceTwo;
|
||||
|
||||
this.links[linkId] = {
|
||||
node_one: fromNode.id,
|
||||
node_two: toNode.id,
|
||||
interface_one: interfaceOne,
|
||||
interface_two: interfaceTwo
|
||||
};
|
||||
}
|
||||
|
||||
linkMode(enabled) {
|
||||
console.log('link mode:', enabled);
|
||||
if (enabled) {
|
||||
|
|
@ -129,7 +322,7 @@ class CoreNetwork {
|
|||
}
|
||||
|
||||
setNodeMode(nodeType, model) {
|
||||
this.nodeType = NodeTypes[nodeType];
|
||||
this.nodeType = nodeType;
|
||||
this.nodeModel = model || null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue