ONOS-4646: Provide temp. mechanism for topology overlays to modify link details data.

Change-Id: I00b78b1da1580883e09af87ed470e6142a1ec19b
(cherry picked from commit 4f732d2)
diff --git a/web/gui/src/main/webapp/app/view/topo/topoLink.js b/web/gui/src/main/webapp/app/view/topo/topoLink.js
index 7a9ad1d..95a9daa 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoLink.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoLink.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // injected refs
-    var $log, fs, sus, ts, flash, tss, tps;
+    var $log, fs, sus, ts, flash, tss, tps, tov;
 
     // internal state
     var api,
@@ -238,7 +238,7 @@
 
         d.el.classed('selected', true);
 
-        tps.displayLink(d);
+        tps.displayLink(d, tov.hooks.modifyLinkData);
         tps.displaySomething();
     }
 
@@ -300,9 +300,9 @@
     angular.module('ovTopo')
         .factory('TopoLinkService',
         ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 'FlashService',
-            'TopoSelectService', 'TopoPanelService',
+            'TopoSelectService', 'TopoPanelService', 'TopoOverlayService',
 
-        function (_$log_, _fs_, _sus_, _ts_, _flash_, _tss_, _tps_) {
+        function (_$log_, _fs_, _sus_, _ts_, _flash_, _tss_, _tps_, _tov_) {
             $log = _$log_;
             fs = _fs_;
             sus = _sus_;
@@ -310,6 +310,7 @@
             flash = _flash_;
             tss = _tss_;
             tps = _tps_;
+            tov = _tov_;
 
             function initLink(_api_, _td3_) {
                 api = _api_;
diff --git a/web/gui/src/main/webapp/app/view/topo/topoModel.js b/web/gui/src/main/webapp/app/view/topo/topoModel.js
index d8f279b..d104449 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoModel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoModel.js
@@ -230,7 +230,8 @@
                     ws = (s && s.linkWidth) || 0,
                     wt = (t && t.linkWidth) || 0;
                 return lnk.position.multiLink ? 5 : Math.max(ws, wt);
-            }
+            },
+            extra: link.extra
         });
         return lnk;
     }
diff --git a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
index 0add26c..b04bd53 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
@@ -277,6 +277,13 @@
         cb && cb();
     }
 
+    // Temporary function to allow overlays to modify link detail data
+    // in the client. (In the near future, this will be done on the server).
+    function modifyLinkDataHook(data, extra) {
+        var cb = _hook('modifylinkdata');
+        return cb && extra ? cb(data, extra) : data;
+    }
+
     // === -----------------------------------------------------
     //  Event (from server) Handlers
 
@@ -427,7 +434,8 @@
                     singleSelect: singleSelectHook,
                     multiSelect: multiSelectHook,
                     mouseOver: mouseOverHook,
-                    mouseOut: mouseOutHook
+                    mouseOut: mouseOutHook,
+                    modifyLinkData: modifyLinkDataHook
                 },
 
                 showHighlights: showHighlights
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index f5730dd..edea27b 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -309,7 +309,7 @@
     var coreOrder = [
             'Type', 'Expected', '-',
             'A_type', 'A_id', 'A_label', 'A_port', '-',
-            'B_type', 'B_id', 'B_label', 'B_port', '-'
+            'B_type', 'B_id', 'B_label', 'B_port'
         ],
         edgeOrder = [
             'Type', '-',
@@ -317,7 +317,7 @@
             'B_type', 'B_id', 'B_label', 'B_port'
         ];
 
-    function displayLink(data) {
+    function displayLink(data, modifyCb) {
         detail.setup();
 
         var svg = detail.appendHeader('div')
@@ -332,9 +332,8 @@
         gs.addGlyph(svg, 'ports', 40);
         title.text('Link');
 
-
-        listProps(tbody, {
-            propOrder: order,
+        var linkData = {
+            propOrder: order.slice(0),      // makes a copy of the array
             props: {
                 Type: linkType(data),
                 Expected: linkExpected(data),
@@ -349,9 +348,11 @@
                 B_label: friendly(data.target),
                 B_port: data.tgtPort
             }
-        });
+        };
+        listProps(tbody, modifyCb(linkData, data.extra));
 
         if (!edgeLink) {
+            addSep(tbody);
             addProp(tbody, 'A → B', linkSummary(data.fromSource));
             addProp(tbody, 'B → A', linkSummary(data.fromTarget));
         }