From 8889d121c03e0dbe6ee8af4dabbb6f1a812fd8fc Mon Sep 17 00:00:00 2001
From: "Blake J. Harnden" <bharnden@users.noreply.github.com>
Date: Wed, 16 May 2018 15:45:46 -0700
Subject: [PATCH] web app, added emane node, got basic emane networks working
 and joining existing emane network

---
 webapp/app.py                        | 42 +++++++++++++++
 webapp/static/corenetwork.js         | 38 ++++++++++---
 webapp/static/corerest.js            |  6 ++-
 webapp/static/coreui.js              | 80 ++++++++++++++++++++++------
 webapp/templates/index.html          | 22 ++++----
 webapp/templates/nodeedit_modal.html |  2 +
 6 files changed, 157 insertions(+), 33 deletions(-)

diff --git a/webapp/app.py b/webapp/app.py
index 3e2f7b67..6cf2d622 100644
--- a/webapp/app.py
+++ b/webapp/app.py
@@ -143,6 +143,11 @@ def get_sessions():
 def create_session():
     session = coreemu.create_session()
     session.set_state(EventTypes.CONFIGURATION_STATE)
+
+    # set session location
+    session.location.setrefgeo(47.57917, -122.13232, 2.0)
+    session.location.refscale = 150.0
+
     response_data = jsonify(
         id=session.session_id,
         state=session.state,
@@ -169,6 +174,10 @@ def get_session(session_id):
 
     nodes = []
     for node in session.objects.itervalues():
+        emane_model = None
+        if nodeutils.is_node(node, NodeTypes.EMANE):
+            emane_model = node.model.name
+
         services = [x._name for x in getattr(node, "services", [])]
         nodes.append({
             "id": node.objid,
@@ -181,6 +190,7 @@ def get_session(session_id):
                 "z": node.position.z
             },
             "services": services,
+            "emane": emane_model,
             "url": "/sessions/%s/nodes/%s" % (session_id, node.objid)
         })
 
@@ -190,6 +200,21 @@ def get_session(session_id):
     )
 
 
+@app.route("/sessions/<int:session_id>/emane")
+def get_emane_models(session_id):
+    session = coreemu.sessions.get(session_id)
+    if not session:
+        return jsonify(error="session does not exist"), 404
+
+    models = []
+    for model in session.emane._modelclsmap.keys():
+        if len(model.split("_")) != 2:
+            continue
+        models.append(model)
+
+    return jsonify(models=models)
+
+
 @app.route("/sessions/<int:session_id>/nodes", methods=["POST"])
 @synchronized
 def create_node(session_id):
@@ -213,6 +238,17 @@ def create_node(session_id):
     node_options.set_position(data.get("x"), data.get("y"))
     node_options.set_location(data.get("lat"), data.get("lon"), data.get("alt"))
     node = session.add_node(_type=node_type, _id=node_id, node_options=node_options)
+
+    # configure emane if provided
+    emane_model = data.get("emane")
+    if emane_model:
+        config_data = ConfigData(
+            node=node_id,
+            object=emane_model,
+            type=2
+        )
+        session.config_object(config_data)
+
     return jsonify(
         id=node.objid,
         url="/sessions/%s/nodes/%s" % (session_id, node.objid)
@@ -278,10 +314,16 @@ def get_node(session_id, node_id):
         })
 
     services = [x._name for x in getattr(node, "services", [])]
+
+    emane_model = None
+    if nodeutils.is_node(node, NodeTypes.EMANE):
+        emane_model = node.model.name
+
     return jsonify(
         name=node.name,
         type=nodeutils.get_node_type(node.__class__).value,
         services=services,
+        emane=emane_model,
         model=node.type,
         interfaces=interfaces,
         linksurl="/sessions/%s/nodes/%s/links" % (session_id, node.objid)
diff --git a/webapp/static/corenetwork.js b/webapp/static/corenetwork.js
index 25e21755..96c4cc08 100644
--- a/webapp/static/corenetwork.js
+++ b/webapp/static/corenetwork.js
@@ -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
diff --git a/webapp/static/corerest.js b/webapp/static/corerest.js
index 85c25d9f..3de0b8f8 100644
--- a/webapp/static/corerest.js
+++ b/webapp/static/corerest.js
@@ -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) {
diff --git a/webapp/static/coreui.js b/webapp/static/coreui.js
index 4d1e7d5b..45ac6476 100644
--- a/webapp/static/coreui.js
+++ b/webapp/static/coreui.js
@@ -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) {
diff --git a/webapp/templates/index.html b/webapp/templates/index.html
index fefd8bf9..4ed777ba 100644
--- a/webapp/templates/index.html
+++ b/webapp/templates/index.html
@@ -92,6 +92,7 @@
                         <a class="dropdown-item" href="#" data-node="5">Hub</a>
                         <a class="dropdown-item" href="#" data-node="4">Switch</a>
                         <a class="dropdown-item" href="#" data-node="6">WLAN</a>
+                        <a class="dropdown-item" href="#" data-node="10">EMANE</a>
                     </div>
                 </div>
             </div>
@@ -119,20 +120,18 @@
 {% include 'services_modal.html' %}
 
 <div id="node-context" class="list-group context d-none">
-    <button type="button" class="list-group-item list-group-item-action" href="#" data-option="edit">Edit Node</button>
-    <button id="node-linkrf-button" type="button" class="list-group-item list-group-item-action d-none" href="#"
+    <button type="button" class="list-group-item list-group-item-action" data-option="edit">Edit Node</button>
+    <button id="node-linkrf-button" type="button" class="list-group-item list-group-item-action d-none"
             data-option="linkrf">Link All Routers
     </button>
-    <button type="button" class="list-group-item list-group-item-action" href="#"
-            data-option="services">Services
-    </button>
-    <button id="node-delete-button" type="button" class="list-group-item list-group-item-action" href="#"
-            data-option="delete">Delete
+    <button type="button" class="list-group-item list-group-item-action" data-option="services">Services</button>
+    <button id="node-delete-button" type="button" class="list-group-item list-group-item-action" data-option="delete">
+        Delete
     </button>
 </div>
 
 <div id="edge-context" class="list-group context d-none">
-    <button type="button" class="list-group-item list-group-item-action" href="#" data-option="edit">Edit Link</button>
+    <button type="button" class="list-group-item list-group-item-action" data-option="edit">Edit Link</button>
 </div>
 
 <script src="static/jquery-3.3.1.min.js"></script>
@@ -147,6 +146,11 @@
 <script src="static/coreui.js"></script>
 
 <script>
+    // configure global toastr
+    console.log(toastr.options);
+    toastr.options.timeOut = 2000;
+    toastr.options.positionClass = 'toast-bottom-right';
+
     const $linkButton = $('#link-button');
     const $nodeButtons = $('.node-buttons a');
     const $sessionId = $('#session-id');
@@ -177,7 +181,7 @@
     const serviceModal = new ServiceModal(coreRest);
     const servicesModal = new ServicesModal(coreRest, coreNetwork, serviceModal);
     const sessionsModal = new SessionsModal(coreRest, coreNetwork, joinSession);
-    const nodeEditModal = new NodeEditModal(coreNetwork);
+    const nodeEditModal = new NodeEditModal(coreNetwork, coreRest);
     const nodeContext = new NodeContext(coreNetwork, coreRest, nodeEditModal, servicesModal);
     const edgeEditModal = new EdgeEditModal(coreNetwork, coreRest);
     const edgeContext = new EdgeContext(coreNetwork, edgeEditModal);
diff --git a/webapp/templates/nodeedit_modal.html b/webapp/templates/nodeedit_modal.html
index 6bf0e6d1..768864ab 100644
--- a/webapp/templates/nodeedit_modal.html
+++ b/webapp/templates/nodeedit_modal.html
@@ -14,6 +14,8 @@
                         <input id="node-name" name="name" class="form-control" type="text" placeholder="Node Name"
                                required>
                     </div>
+
+                    <div id="nodeedit-custom"></div>
                 </form>
             </div>
             <div class="modal-footer">