ONOS-2328 GUI -- Started work on seeing multiple links between devices on the to…

…pology view. Device links are now grouped based on what device they are between. Also minor bug fixes and investigations into other bugs. WIP.

Change-Id: I444f016268efc5c489ba6ad0282d0f7827fff462

@@ -367,6 +367,7 @@
             .classed('linkLabel', true)
             .classed('linkLabel', true)
             .attr('id', function (d) { return d.id; });
             .attr('id', function (d) { return d.id; });
 
 
+        // FIXME: x and y position calculated here, use link.position obj
         entering.each(function (d) {
         entering.each(function (d) {
             var el = d3.select(this),
             var el = d3.select(this),
                 rect,
                 rect,
@@ -410,6 +411,7 @@
         return box;
         return box;
     }
     }
 
 
+    // FIXME: x and y position calculated here
     function transformLabel(p) {
     function transformLabel(p) {
         var dx = p.x2 - p.x1,
         var dx = p.x2 - p.x1,
             dy = p.y2 - p.y1,
             dy = p.y2 - p.y1,

@@ -24,8 +24,7 @@
 
 
     // injected refs
     // injected refs
     var $log, $timeout, fs, sus, is, ts, flash, wss,
     var $log, $timeout, fs, sus, is, ts, flash, wss,
-        tis, tms, td3, tss, tts, tos, fltr, tls,
-        icfg, uplink, svg;
+        tis, tms, td3, tss, tts, tos, fltr, tls, uplink, svg;
 
 
     // configuration
     // configuration
     var linkConfig = {
     var linkConfig = {
@@ -50,6 +49,7 @@
         network = {
         network = {
             nodes: [],
             nodes: [],
             links: [],
             links: [],
+            linksByDevice: {},
             lookup: {},
             lookup: {},
             revLinkToKey: {}
             revLinkToKey: {}
         },
         },
@@ -215,6 +215,7 @@
         d = tms.createLink(data);
         d = tms.createLink(data);
         if (d) {
         if (d) {
             network.links.push(d);
             network.links.push(d);
+            aggregateLink(d, data);
             lu[d.key] = d;
             lu[d.key] = d;
             updateLinks();
             updateLinks();
             fStart();
             fStart();
@@ -241,10 +242,40 @@
 
 
     // ========================
     // ========================
 
 
+    function makeNodeKey(node1, node2) {
+        return node1 + '-' + node2;
+    }
+
+    function findNodePair(key, keyRev) {
+        if (network.linksByDevice[key]) {
+            return key;
+        } else if (network.linksByDevice[keyRev]) {
+            return keyRev;
+        } else {
+            return false;
+        }
+    }
+
+    function aggregateLink(ldata, link) {
+        var key = makeNodeKey(link.src, link.dst),
+            keyRev = makeNodeKey(link.dst, link.src),
+            found = findNodePair(key, keyRev);
+
+        if (found) {
+            network.linksByDevice[found].push(ldata);
+            ldata.devicePair = found;
+        } else {
+            network.linksByDevice[key] = [ ldata ];
+            ldata.devicePair = key;
+        }
+    }
+
     function addLinkUpdate(ldata, link) {
     function addLinkUpdate(ldata, link) {
         // add link event, but we already have the reverse link installed
         // add link event, but we already have the reverse link installed
         ldata.fromTarget = link;
         ldata.fromTarget = link;
         rlk[link.id] = ldata.key;
         rlk[link.id] = ldata.key;
+        // possible solution to el being undefined in restyleLinkElement:
+        //_updateLinks();
         restyleLinkElement(ldata);
         restyleLinkElement(ldata);
     }
     }
 
 
@@ -267,7 +298,12 @@
             delay = immediate ? 0 : 1000;
             delay = immediate ? 0 : 1000;
 
 
         // FIXME: understand why el is sometimes undefined on addLink events...
         // FIXME: understand why el is sometimes undefined on addLink events...
-        if (el) {
+        // Investigated:
+        // el is undefined when it's a reverse link that is being added.
+        // updateLinks (which sets ldata.el) isn't called before this is called.
+        // Calling _updateLinks in addLinkUpdate fixes it, but there might be
+        // a more efficient way to fix it.
+        if (el && !el.empty()) {
             el.classed('link', true);
             el.classed('link', true);
             el.classed('inactive', !online);
             el.classed('inactive', !online);
             el.classed(allLinkTypes, false);
             el.classed(allLinkTypes, false);
@@ -383,7 +419,7 @@
         d.metaUi = metaUi;
         d.metaUi = metaUi;
         wss.sendEvent('updateMeta', {
         wss.sendEvent('updateMeta', {
             id: d.id,
             id: d.id,
-            'class': d.class,
+            class: d.class,
             memento: metaUi
             memento: metaUi
         });
         });
     }
     }
@@ -503,7 +539,11 @@
             .attr({
             .attr({
                 id: function (d) { return sus.safeId(d.id); },
                 id: function (d) { return sus.safeId(d.id); },
                 class: mkSvgClass,
                 class: mkSvgClass,
-                transform: function (d) { return sus.translate(d.x, d.y); },
+                transform: function (d) {
+                    // sometimes says d.x and d.y are NaN?
+                    // I have a feeling it's a timing issue
+                    return sus.translate(d.x, d.y);
+                },
                 opacity: 0
                 opacity: 0
             })
             })
             .call(drag)
             .call(drag)
@@ -548,6 +588,9 @@
         link = linkG.selectAll('.link')
         link = linkG.selectAll('.link')
             .data(network.links, function (d) { return d.key; });
             .data(network.links, function (d) { return d.key; });
 
 
+        // This seems to do nothing? I've only triggered it on timeout errors
+        // when adding links, link var is empty because there aren't any links
+        // when removing links, link var is empty already
         // operate on existing links:
         // operate on existing links:
         link.each(function (d) {
         link.each(function (d) {
             // this is supposed to be an existing link, but we have observed
             // this is supposed to be an existing link, but we have observed
@@ -559,6 +602,7 @@
         });
         });
 
 
         // operate on entering links:
         // operate on entering links:
+        // FIXME: x and y position calculated here - calculate position and add it to the link
         var entering = link.enter()
         var entering = link.enter()
             .append('line')
             .append('line')
             .attr({
             .attr({
@@ -620,6 +664,7 @@
         nodeAttr: {
         nodeAttr: {
             transform: function (d) { return sus.translate(d.x, d.y); }
             transform: function (d) { return sus.translate(d.x, d.y); }
         },
         },
+        // FIXME: x and y position calculated here, will be deleted
         linkAttr: {
         linkAttr: {
             x1: function (d) { return d.source.x; },
             x1: function (d) { return d.source.x; },
             y1: function (d) { return d.source.y; },
             y1: function (d) { return d.source.y; },
@@ -630,6 +675,7 @@
             transform: function (d) {
             transform: function (d) {
                 var lnk = tms.findLinkById(d.key);
                 var lnk = tms.findLinkById(d.key);
                 if (lnk) {
                 if (lnk) {
+                    // FIXME: x and y position calculated here, use link.position object
                     return td3.transformLabel({
                     return td3.transformLabel({
                         x1: lnk.source.x,
                         x1: lnk.source.x,
                         y1: lnk.source.y,
                         y1: lnk.source.y,
@@ -643,9 +689,16 @@
 
 
     function tick() {
     function tick() {
         // guard against null (which can happen when our view pages out)...
         // guard against null (which can happen when our view pages out)...
-        if (node) node.attr(tickStuff.nodeAttr);
-        if (link) link.attr(tickStuff.linkAttr);
-        if (linkLabel) linkLabel.attr(tickStuff.linkLabelAttr);
+        if (node) {
+            node.attr(tickStuff.nodeAttr);
+        }
+        if (link) {
+            // FIXME: instead of tickStuff here, use link.position object
+            link.attr(tickStuff.linkAttr);
+        }
+        if (linkLabel) {
+            linkLabel.attr(tickStuff.linkLabelAttr);
+        }
     }
     }
 
 
 
 
@@ -734,7 +787,7 @@
             showHosts: function () { return showHosts; },
             showHosts: function () { return showHosts; },
             restyleLinkElement: restyleLinkElement,
             restyleLinkElement: restyleLinkElement,
             updateLinkLabelModel: updateLinkLabelModel
             updateLinkLabelModel: updateLinkLabelModel
-        }
+        };
     }
     }
 
 
     function mkSelectApi(uplink) {
     function mkSelectApi(uplink) {
@@ -755,7 +808,7 @@
             hovered: tss.hovered,
             hovered: tss.hovered,
             validateSelectionContext: tss.validateSelectionContext,
             validateSelectionContext: tss.validateSelectionContext,
             selectOrder: tss.selectOrder
             selectOrder: tss.selectOrder
-        }
+        };
     }
     }
 
 
     function mkObliqueApi(uplink, fltr) {
     function mkObliqueApi(uplink, fltr) {
@@ -797,19 +850,18 @@
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
     .factory('TopoForceService',
     .factory('TopoForceService',
-        ['$log', '$timeout', 'FnService', 'SvgUtilService', 'IconService',
+        ['$log', '$timeout', 'FnService', 'SvgUtilService',
             'ThemeService', 'FlashService', 'WebSocketService',
             'ThemeService', 'FlashService', 'WebSocketService',
             'TopoInstService', 'TopoModelService',
             'TopoInstService', 'TopoModelService',
             'TopoD3Service', 'TopoSelectService', 'TopoTrafficService',
             'TopoD3Service', 'TopoSelectService', 'TopoTrafficService',
             'TopoObliqueService', 'TopoFilterService', 'TopoLinkService',
             'TopoObliqueService', 'TopoFilterService', 'TopoLinkService',
 
 
-        function (_$log_, _$timeout_, _fs_, _sus_, _is_, _ts_, _flash_, _wss_,
+        function (_$log_, _$timeout_, _fs_, _sus_, _ts_, _flash_, _wss_,
                   _tis_, _tms_, _td3_, _tss_, _tts_, _tos_, _fltr_, _tls_) {
                   _tis_, _tms_, _td3_, _tss_, _tts_, _tos_, _fltr_, _tls_) {
             $log = _$log_;
             $log = _$log_;
             $timeout = _$timeout_;
             $timeout = _$timeout_;
             fs = _fs_;
             fs = _fs_;
             sus = _sus_;
             sus = _sus_;
-            is = _is_;
             ts = _ts_;
             ts = _ts_;
             flash = _flash_;
             flash = _flash_;
             wss = _wss_;
             wss = _wss_;
@@ -822,8 +874,6 @@
             fltr = _fltr_;
             fltr = _fltr_;
             tls = _tls_;
             tls = _tls_;
 
 
-            icfg = is.iconConfig();
-
             var themeListener = ts.addListener(function () {
             var themeListener = ts.addListener(function () {
                 updateLinks();
                 updateLinks();
                 updateNodes();
                 updateNodes();
@@ -902,12 +952,24 @@
                 // clean up internal state
                 // clean up internal state
                 network.nodes = [];
                 network.nodes = [];
                 network.links = [];
                 network.links = [];
+                network.linksByDevice = {};
                 network.lookup = {};
                 network.lookup = {};
                 network.revLinkToKey = {};
                 network.revLinkToKey = {};
 
 
                 linkG = linkLabelG = nodeG = portLabelG = null;
                 linkG = linkLabelG = nodeG = portLabelG = null;
                 link = linkLabel = node = null;
                 link = linkLabel = node = null;
                 force = drag = null;
                 force = drag = null;
+
+                // clean up $timeout promises
+                if (fTimer) {
+                    $timeout.cancel(fTimer);
+                }
+                if (fNodesTimer) {
+                    $timeout.cancel(fNodesTimer);
+                }
+                if (fLinksTimer) {
+                    $timeout.cancel(fLinksTimer);
+                }
             }
             }
 
 
             return {
             return {

@@ -104,6 +104,7 @@
             return {x:x4, y:y4};
             return {x:x4, y:y4};
         }
         }
 
 
+        // FIXME: x and y position calculated here, use link.position
         function lineSeg(d) {
         function lineSeg(d) {
             return {
             return {
                 x1: d.source.x,
                 x1: d.source.x,
@@ -200,6 +201,7 @@
         td3.applyPortLabels(data, api.portLabelG());
         td3.applyPortLabels(data, api.portLabelG());
     }
     }
 
 
+    // FIXME: x and y position calculated here somewhere
     function locatePortLabel(link, src) {
     function locatePortLabel(link, src) {
         var near = src ? 'source' : 'target',
         var near = src ? 'source' : 'target',
             far = src ? 'target' : 'source',
             far = src ? 'target' : 'source',

@@ -36,7 +36,7 @@
      */
      */
 
 
     // shorthand
     // shorthand
-    var lu, rlk, nodes, links;
+    var lu, rlk, nodes, links, linksByDevice;
 
 
     var dim;    // dimensions of layout [w,h]
     var dim;    // dimensions of layout [w,h]
 
 
@@ -185,6 +185,12 @@
             fromSource: link,
             fromSource: link,
             srcPort: link.srcPort,
             srcPort: link.srcPort,
             tgtPort: link.dstPort,
             tgtPort: link.dstPort,
+            position: {
+                x1: 0,
+                y1: 0,
+                x2: 0,
+                y2: 0
+            },
 
 
             // functions to aggregate dual link state
             // functions to aggregate dual link state
             type: function () {
             type: function () {
@@ -292,6 +298,11 @@
 
 
                 } else {
                 } else {
                     result.removeRawLink = function () {
                     result.removeRawLink = function () {
+                        // remove link out of aggregate linksByDevice list
+                        var linksForDevPair = linksByDevice[ldata.devicePair],
+                            rmvIdx = fs.find(ldata.key, linksForDevPair, 'key');
+                        linksForDevPair.splice(rmvIdx, 1);
+
                         if (link) {
                         if (link) {
                             // remove fromSource
                             // remove fromSource
                             ldata.fromSource = null;
                             ldata.fromSource = null;
@@ -393,6 +404,7 @@
                 rlk = api.network.revLinkToKey;
                 rlk = api.network.revLinkToKey;
                 nodes = api.network.nodes;
                 nodes = api.network.nodes;
                 links = api.network.links;
                 links = api.network.links;
+                linksByDevice = api.network.linksByDevice;
             }
             }
 
 
             function newDim(_dim_) {
             function newDim(_dim_) {