web app refactored service modal code and added proper support for sending current node services

webapp/app.py

@@ -179,6 +179,7 @@ def get_session(session_id):
                 "y": node.position.y,
                 "z": node.position.z
             },
+            "services": [x._name for x in node.services],
             "url": "/sessions/%s/nodes/%s" % (session_id, node.objid)
         })
 
@@ -278,6 +279,7 @@ def get_node(session_id, node_id):
     return jsonify(
         name=node.name,
         type=nodeutils.get_node_type(node.__class__).value,
+        services=[x._name for x in node.services],
         model=node.type,
         interfaces=interfaces,
         linksurl="/sessions/%s/nodes/%s/links" % (session_id, node.objid)

webapp/static/corenetwork.js

@@ -259,6 +259,7 @@ class CoreNetwork {
         const position = node.position;
         const coreNode = new CoreNode(node.id, node.type, node.name, position.x, position.y);
         coreNode.model = node.model;
+        coreNode.services = node.services;
         this.nodes.add(coreNode.getNetworkNode());
     }
 

webapp/static/coreui.js

@@ -3,8 +3,8 @@ class ServiceModal {
         this.coreRest = coreRest;
         this.$modal = $('#service-modal');
         this.$title = this.$modal.find('.modal-title');
-        this.$button = $('#service-button');
+        this.$saveButton = $('#service-button');
-        this.$button.click(this.onClick.bind(this));
+        this.$saveButton.click(this.onClick.bind(this));
     }
 
     async show(service) {
@@ -22,11 +22,14 @@ class ServicesModal {
         this.coreRest = coreRest;
         this.coreNetwork = coreNetwork;
         this.serviceModal = serviceModal;
-        this.$servicesModal = $('#services-modal');
+        this.$modal = $('#services-modal');
-        this.$servicesForm = this.$servicesModal.find('form');
+        this.$modal.on('click', '.service-button', this.editService.bind(this));
+        this.$form = this.$modal.find('form');
         this.$serviceGroup = $('#service-group');
+        this.$serviceGroup.on('change', this.groupChange.bind(this));
         this.$servicesList = $('#services-list');
-        this.$servicesButton = $('#services-button');
+        this.$saveButton = $('#services-button');
+        this.$saveButton.click(this.saveClicked.bind(this));
         this.defaultServices = {
             mdr: new Set(["zebra", "OSPFv3MDR", "IPForward"]),
             PC: new Set(["DefaultRoute"]),
@@ -39,9 +42,6 @@ class ServicesModal {
         this.serviceGroups = null;
         this.serviceOptions = new Map();
         this.$currentGroup = null;
-        this.groupChange();
-        this.saveClicked();
-        this.$servicesModal.on('click', '.service-button', this.editService.bind(this));
     }
 
     editService(event) {
@@ -49,18 +49,21 @@ class ServicesModal {
         const $target = $(event.target);
         const service = $target.parent().parent().find('label').text();
         console.log('edit service: ', service);
-        this.$servicesModal.modal('hide');
+        this.$modal.modal('hide');
         this.serviceModal.show(service);
         return false;
     }
 
     async show(nodeId) {
+        // get node and set default services for node type
         this.node = this.coreNetwork.getCoreNode(nodeId);
         if (this.node.services.length) {
             this.nodeDefaults = new Set(this.node.services);
         } else {
             this.nodeDefaults = this.defaultServices[this.node.model] || new Set();
         }
+
+        // retrieve service groups
         this.serviceGroups = await coreRest.getServices(nodeId);
 
         // clear data
@@ -68,8 +71,10 @@ class ServicesModal {
         this.$servicesList.html('');
         this.serviceOptions.clear();
 
-        this.$servicesModal.find('.modal-title').text(`Services: ${this.node.name}`);
+        // set title
+        this.$modal.find('.modal-title').text(`Services: ${this.node.name}`);
 
+        // generate service form options
         for (let group in this.serviceGroups) {
             const $option = $('<option>', {value: group, text: group});
             this.$serviceGroup.append($option);
@@ -100,30 +105,24 @@ class ServicesModal {
         }
 
         this.$serviceGroup.change();
-        this.$servicesModal.modal('show');
+        this.$modal.modal('show');
     }
 
-    groupChange() {
+    groupChange(event) {
-        const self = this;
+        const group = $(event.target).val();
-        this.$serviceGroup.on('change', function () {
+        if (this.$currentGroup) {
-            const group = $(this).val();
+            this.$currentGroup.addClass('d-none');
-            if (self.$currentGroup) {
+        }
-                self.$currentGroup.addClass('d-none');
+        this.$currentGroup = this.serviceOptions.get(group);
-            }
+        this.$currentGroup.removeClass('d-none');
-            self.$currentGroup = self.serviceOptions.get(group);
-            self.$currentGroup.removeClass('d-none');
-        });
     }
 
     saveClicked() {
-        const self = this;
+        let services = this.$form.serializeArray();
-        this.$servicesButton.click(function () {
+        services = services.map(x => x.value);
-            let services = self.$servicesForm.serializeArray();
+        console.log('services save clicked: ', services);
-            services = services.map(x => x.value);
+        this.node.services = services;
-            console.log('services save clicked: ', services);
+        this.$modal.modal('hide');
-            self.node.services = services;
-            self.$servicesModal.modal('hide');
-        });
     }
 }