Added reference and NeXt diagram

connector.py

@@ -0,0 +1,39 @@
+#!/usr/bin/python3
+
+from ipaddress import *
+from enum import Enum
+
+class ConnType(Enum):
+   NONE = 0
+   ROUTED = 1
+   BRIDGED = 2
+
+class Connector:
+   id = None
+   node = None
+   intf = None
+   type = ConnType.NONE
+   ipv4 = None
+   hostmask4 = None
+   ipv6 = None
+   hostmask6 = None
+   bridge_id = None
+
+   def __init__(self, id = None, node = None, intf = None, type = None,
+                      ipv4 = None, hostmask4 = None,
+                      ipv6 = None, hostmask6 = None, bridge_id = None):
+      self.id = id
+      self.node = node
+      self.intf = intf
+      self.type = type
+      self.ipv4 = ipv4
+      self.hostmask4 = hostmask4
+      self.ipv6 = ipv6
+      self.hostmask6 = hostmask6
+      self.bridge_id = bridge_id
+
+   def toString(self):
+      return ("con[%s]=%s@%s" ) % (self.id, self.node, self.intf)
+
+   def toDot(self):
+      return ('%s [ label="%s" ]' % (self.node.upper(), self.node.upper()) )

docs/app/main.js

@@ -0,0 +1,34 @@
+(function(nx){
+
+	// instantiate NeXt app
+	var app = new nx.ui.Application();
+
+	// instantiate Topology class
+	var topology = new MyTopology();
+
+    var topologyData;
+
+    var referrer = document.referrer.replace(/\/$/, '');;
+
+    const tstcase = referrer.split("/").pop();
+
+    const api_url =`../json/${tstcase}.json`;
+
+	// load topology data from REST API
+    async function getTopology() {
+        const response = await fetch(api_url);
+        topologyData = await response.json();
+        console.log(topologyData);
+        topology.data(topologyData);
+    }
+
+       getTopology();
+
+
+	// bind the topology object to the app
+	topology.attach(app);
+
+	// app must run inside a specific container. In our case this is the one with id="topology-container"
+	app.container(document.getElementById("topology-container"));
+
+})(nx);

docs/app/rare_link.js

@@ -0,0 +1,84 @@
+(function (nx) {
+nx.define('RARELinkClass', nx.graphic.Topology.Link, {
+    properties: {
+        taillabel: null,
+         midlabel: null,
+        headlabel: null,
+    },
+    view: function(view) {
+        view.content.push({
+            name: 'source',
+            type: 'nx.graphic.Text',
+            props: {
+                'class': 'taillabel',
+                'alignment-baseline': 'text-after-edge',
+                'text-anchor': 'start',
+            }
+        },{
+            name: 'midlabel',
+            type: 'nx.graphic.Text',
+            props: {
+                'class': 'midlabel',
+                'alignment-baseline': 'text-after-edge',
+                'text-anchor': 'center'
+            }
+        }, {
+            name: 'target',
+            type: 'nx.graphic.Text',
+            props: {
+                'class': 'headlabel',
+                'alignment-baseline': 'text-after-edge',
+                'text-anchor': 'end'
+            }
+        });
+        return view;
+    },
+    methods: {
+        update: function() {
+            this.inherited();
+            var el, point;
+            var line = this.line();
+            var angle = line.angle();
+            var stageScale = this.stageScale();
+	        //var lenMidLabel = 0;
+            line = line.pad(18 * stageScale, 18 * stageScale);
+            if (this.taillabel()) {
+                el = this.view('source');
+                point = line.start;
+                el.set('x', point.x);
+                el.set('y', point.y);
+                el.set('text', this.taillabel());
+                el.set('transform', 'rotate(' + angle + ' ' + point.x + ',' + point.y + ')');
+                el.setStyle('font-size', 12 * stageScale);
+                el.setStyle('font-family', 'Cisco Sans Reg');
+                el.setStyle('fill', '#00ff00');
+            }
+            if (this.headlabel()) {
+                el = this.view('target');
+                point = line.end;
+                el.set('x', point.x);
+                el.set('y', point.y);
+                el.set('text', this.headlabel());
+                el.set('transform', 'rotate(' + angle + ' ' + point.x + ',' + point.y + ')');
+                el.setStyle('font-size', 12 * stageScale);
+                el.setStyle('font-family', 'Cisco Sans Reg');
+                el.setStyle('fill', '#00ff00');
+            }
+            if (this.midlabel()) {
+                el = this.view('midlabel');
+                point = line.center();
+                //console.log(point.x ,point.y);
+                //console.log(`length ${lenMidLabel}`);
+                el.set('x', point.x - 30 );
+                el.set('y', point.y + 10 );
+                el.set('text', this.midlabel());
+                //console.log(`WIDTH: ${el.getBound().width}`);
+                el.set('transform', 'rotate(' + angle + ' ' + point.x + ',' + point.y + ')');
+                el.setStyle('font-size', 12 * stageScale);
+                el.setStyle('font-family', 'Cisco Sans Reg');
+                el.setStyle('fill', '#00ff00');
+            }
+        }
+    }
+});
+})(nx);

docs/app/topology.js

@@ -0,0 +1,47 @@
+(function (nx) {
+	nx.define('MyTopology', nx.graphic.Topology, {
+		methods: {
+			"init": function(){
+				this.inherited({
+					// width 100% if true
+					'adaptive': true,
+					// show icons' nodes, otherwise display dots
+					'showIcon': true,
+					// special configuration for nodes
+					'nodeConfig': {
+						'label': 'model.name',
+						'iconType': 'router',
+						'color': '#00ff00' //'#0how00'
+					},
+					// special configuration for links
+					'linkConfig': {
+						'linkType': 'curve',
+						'color': '#00ff00', //'#0how00'
+						'taillabel': 'model.taillabel',
+						'midlabel': 'model.midlabel',
+				        'headlabel': 'model.headlabel',
+					},
+					'theme': 'rare',
+					// property name to identify unique nodes
+					'identityKey': 'name', // helps to link source and target
+					// canvas size
+					//'width': 640,
+					'height': '600',
+					// "engine" that process topology prior to rendering
+					'dataProcessor': 'force',
+					// moves the labels in order to avoid overlay
+					'enableSmartLabel': true,
+					// smooth scaling. may slow down, if true
+					'enableGradualScaling': true,
+					// if true, two nodes can have more than one link
+					'supportMultipleLink': true,
+					// enable scaling
+					"scalable": true,
+					"linkInstanceClass": 'RARELinkClass',
+					"showNavigation": false
+				});
+			}
+		}
+	});
+})(nx);
+

docs/app/topology_data.js

@@ -0,0 +1,68 @@
+
+//let url = 'http://10.233.108.88:8080/api/topology';
+//const url = 'http://192.168.113.101:8080/api/topology';
+//var url = 'http://127.0.0.1:8080/api/topology';
+//let topologyData;
+//topologyData = await (await fetch(url)).json();
+
+//async function getTopology() {
+//  const response = await fetch(url);
+//  const data = await response.json();
+  //console.log(data);
+//  return(data); 
+//}
+
+//async function dosomething() {
+//    var test = await getTopology();
+//    return (test);
+//}
+
+//topologyData = dosomething();
+
+//console.log(topologyData);
+
+
+//console.log(topologyData);
+
+/*
+topologyData = fetch(url)
+  .then((response) => {
+    return response.json()
+  })
+  .then(function (data) {
+    // Work with JSON data here
+    //console.log(data);
+    return(data);
+  })
+  .catch((err) => {
+    // Do something for an error here
+  });
+*/
+
+/*
+topologyPromise = fetch(url)
+  .then((response) => response.json())
+  .then((result) => {
+    topologyData=result;
+    return (result);
+  });
+
+const printAddress = () => {
+  topologyData.then((a) => {
+    console.log(a);
+  });
+};
+
+const getTopologyData = () => {
+  topologyPromise.then((a) => {
+    console.log(a);
+    topologyData = a;
+  });
+};
+
+getTopologyData();
+
+//printAddress();
+console.log(topologyData)
+*/
+

docs/app/topology_data.js.save

@@ -0,0 +1,52 @@
+var topologyData = {
+	"nodes": [
+		{
+			"id": 0,
+			"name": "HQ"
+		},
+		{
+			"id": 1,
+			"name": "Mars"
+		},
+		{
+			"id": 2,
+			"name": "Saturn"
+		},
+		{
+			"id": 3,
+			"name": "Pluto"
+		}
+	],
+	"links": [
+		{
+			"id": 0,
+			"source": 0,
+			"destination": 1
+		},
+		{
+			"id": 1,
+			"source": 0,
+			"destination": 2
+		},
+		{
+			"id": 2,
+			"source": 0,
+			"destination": 3
+		},
+		{
+			"id": 3,
+			"source": 1,
+			"destination": 2
+		},
+		{
+			"id": 4,
+			"source": 2,
+			"destination": 3
+		},
+		{
+			"id": 5,
+			"source": 3,
+			"destination": 1
+		}
+	]
+};

docs/bower_components/next-bower/.bower.json

@@ -0,0 +1,31 @@
+{
+  "name": "next-bower",
+  "homepage": "http://next-ui.com",
+  "authors": [
+    "Aikepaer Abuduweili <[email protected]>"
+  ],
+  "description": "NeXt UI Toolkit bower and npm distribution.",
+  "main": [
+    "js/next.js",
+    "css/next.css"
+  ],
+  "moduleType": [],
+  "keywords": [
+    "NeXt",
+    "topology",
+    "SDN"
+  ],
+  "ignore": [],
+  "version": "1.0.1",
+  "license": "EPL-1.0",
+  "_release": "1.0.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.0.1",
+    "commit": "ef4a23267d0e4d5cac86260e7f5fcec5ef677403"
+  },
+  "_source": "https://github.com/NeXt-UI/next-bower.git",
+  "_target": "^1.0.1",
+  "_originalSource": "NeXt",
+  "_direct": true
+}

docs/bower_components/next-bower/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+.idea/