GUI -- Added handling of hosts and links. (Still WIP).

Change-Id: I0ad3b16d47b264b6812f732f220230a2ae92de02

@@ -20,7 +20,7 @@
 (function () {
     'use strict';
 
-    var $log, fs, gs;
+    var $log, fs, gs, sus;
 
     var vboxSize = 50,
         cornerSize = vboxSize / 10,
@@ -144,8 +144,21 @@
         return g;
     }
 
-    function addHostIcon(elem, glyphId) {
-        // TODO:
+    function addHostIcon(elem, radius, glyphId) {
+        var dim = radius * 1.5,
+            xlate = -dim / 2,
+            g = elem.append('g')
+                .attr('class', 'svgIcon hostIcon');
+
+        g.append('circle').attr('r', radius);
+
+        g.append('use').attr({
+            'xlink:href': '#' + glyphId,
+            width: dim,
+            height: dim,
+            transform: sus.translate(xlate,xlate)
+        });
+        return g;
     }
 
 
@@ -154,10 +167,13 @@
 
     angular.module('onosSvg')
         .factory('IconService', ['$log', 'FnService', 'GlyphService',
-        function (_$log_, _fs_, _gs_) {
+            'SvgUtilService',
+
+        function (_$log_, _fs_, _gs_, _sus_) {
             $log = _$log_;
             fs = _fs_;
             gs = _gs_;
+            sus = _sus_;
 
             return {
                 loadIcon: loadIcon,

@@ -325,19 +325,121 @@
 /* Host Nodes */
 
 #ov-topo svg .node.host {
-    stroke: #000;
 }
 
 #ov-topo svg .node.host text {
-    fill: #846;
     stroke: none;
     font: 9pt sans-serif;
 }
+.light #ov-topo svg .node.host text {
+    fill: #846;
+}
+.dark #ov-topo svg .node.host text {
+    fill: #BB809D;
+}
 
-svg .node.host circle {
+.light svg .node.host circle {
     stroke: #000;
     fill: #edb;
 }
+.dark svg .node.host circle {
+    stroke: #eee;
+    fill: #B2A180;
+}
+
+.light svg .node.host .svgIcon {
+    fill: #444;
+}
+.dark svg .node.host .svgIcon {
+    fill: #222;
+}
+
+/* --- Topo Links --- */
+
+#ov-topo svg .link {
+    opacity: .9;
+}
+
+#ov-topo svg .link.inactive {
+    opacity: .5;
+    stroke-dasharray: 8 4;
+}
+
+#ov-topo svg .link.secondary {
+    stroke-width: 3px;
+}
+.light #ov-topo svg .link.secondary {
+    stroke: rgba(0,153,51,0.5);
+}
+.dark #ov-topo svg .link.secondary {
+    stroke: rgba(121,231,158,0.5);
+}
+
+#ov-topo svg .link.primary {
+    stroke-width: 4px;
+}
+.light #ov-topo svg .link.primary {
+    stroke: #ffA300;
+}
+.dark #ov-topo svg .link.primary {
+    stroke: #D58E0F;
+}
+
+.light #ov-topo svg .link.animated {
+    stroke: #ffA300;
+}
+.dark #ov-topo svg .link.animated {
+    stroke: #D58E0F;
+}
+
+#ov-topo svg .link.secondary.optical {
+    stroke-width: 4px;
+}
+.light #ov-topo svg .link.secondary.optical {
+    stroke: rgba(128,64,255,0.5);
+}
+.dark #ov-topo svg .link.secondary.optical {
+    stroke: rgba(164,139,215,0.5);
+}
 
+#ov-topo svg .link.primary.optical {
+    stroke-width: 6px;
+}
+.light #ov-topo svg .link.primary.optical {
+    stroke: #74f;
+}
+.dark #ov-topo svg .link.primary.optical {
+    stroke: #7352CD;
+}
+
+#ov-topo svg .link.animated.optical {
+    stroke-width: 10px;
+}
+.light #ov-topo svg .link.animated.optical {
+    stroke: #74f;
+}
+.dark #ov-topo svg .link.animated.optical {
+    stroke: #7352CD;
+}
 
+#ov-topo svg .linkLabel rect {
+    stroke: none;
+}
+.light #ov-topo svg .linkLabel rect {
+    fill: #eee;
+}
+.dark #ov-topo svg .linkLabel rect {
+    fill: #eee;
+}
 
+#ov-topo svg .linkLabel text {
+    text-anchor: middle;
+    stroke-width: 0.1;
+    font-size: 9pt;
+}
+.light #ov-topo svg .linkLabel text {
+    stroke: #777;
+}
+.dark #ov-topo svg .linkLabel text {
+    stroke: #777;
+}

@@ -198,12 +198,6 @@
         return ms.loadMapInto(mapG, '*continental_us');
     }
 
-    // --- Force Layout --------------------------------------------------
-
-    function setUpForce(xlink) {
-        forceG = zoomLayer.append('g').attr('id', 'topo-force');
-        tfs.initForce(forceG, xlink, svg.attr('width'), svg.attr('height'));
-    }
 
     // --- Controller Definition -----------------------------------------
 
@@ -219,8 +213,12 @@
         function ($scope, _$log_, $loc, $timeout, _fs_, mast,
                   _ks_, _zs_, _gs_, _ms_, _sus_, tes, _tfs_, tps, _tis_) {
             var self = this,
-                xlink = {
-                    showNoDevs: showNoDevs
+                projection,
+                uplink = {
+                    // provides function calls back into this space
+                    showNoDevs: showNoDevs,
+                    projection: function () { return projection; },
+                    sendEvent: tes.sendEvent
                 };
 
             $log = _$log_;
@@ -255,9 +253,15 @@
             setUpDefs();
             setUpZoom();
             setUpNoDevs();
-            xlink.projectionPromise = setUpMap();
-            setUpForce(xlink);
-
+            setUpMap().then(
+                function (proj) {
+                    projection = proj;
+                    $log.debug('** We installed the projection: ', proj);
+                }
+            );
+
+            forceG = zoomLayer.append('g').attr('id', 'topo-force');
+            tfs.initForce(forceG, uplink, svg.attr('width'), svg.attr('height'));
             tis.initInst();
             tps.initPanels();
             tes.openSock();

@@ -34,9 +34,16 @@
         updateInstance: updateInstance,
         removeInstance: removeInstance,
         addDevice: addDevice,
-        updateDevice: updateDevice
-        // TODO: implement remaining handlers..
+        updateDevice: updateDevice,
+        removeDevice: removeDevice,
+        addHost: addHost,
+        updateHost: updateHost,
+        removeHost: removeHost,
+        addLink: addLink,
+        updateLink: updateLink,
+        removeLink: removeLink
 
+        // TODO: implement remaining handlers..
     };
 
     function unknownEvent(ev) {
@@ -45,6 +52,9 @@
 
     // === Event Handlers ===
 
+    // NOTE: --- once these are done, we will collapse them into
+    // a more compact data structure... but for now, write in full..
+
     function showSummary(ev) {
         $log.debug('  **** Show Summary ****  ', ev.payload);
         tps.showSummary(ev.payload);
@@ -75,6 +85,42 @@
         tfs.updateDevice(ev.payload);
     }
 
+    function removeDevice(ev) {
+        $log.debug('  **** Remove Device **** ', ev.payload);
+        tfs.removeDevice(ev.payload);
+    }
+
+    function addHost(ev) {
+        $log.debug('  **** Add Host **** ', ev.payload);
+        tfs.addHost(ev.payload);
+    }
+
+    function updateHost(ev) {
+        $log.debug('  **** Update Host **** ', ev.payload);
+        tfs.updateHost(ev.payload);
+    }
+
+    function removeHost(ev) {
+        $log.debug('  **** Remove Host **** ', ev.payload);
+        tfs.removeHost(ev.payload);
+    }
+
+    function addLink(ev) {
+        $log.debug('  **** Add Link **** ', ev.payload);
+        tfs.addLink(ev.payload);
+    }
+
+    function updateLink(ev) {
+        $log.debug('  **** Update Link **** ', ev.payload);
+        tfs.updateLink(ev.payload);
+    }
+
+    function removeLink(ev) {
+        $log.debug('  **** Remove Link **** ', ev.payload);
+        tfs.removeLink(ev.payload);
+    }
+
+
     // ==========================
 
     var dispatcher = {
@@ -122,14 +168,9 @@
             tis = _tis_;
             tfs = _tfs_;
 
-            function bindDispatcher(TopoDomElementsPassedHere) {
-                // TODO: store refs to topo DOM elements...
-
-                return dispatcher;
-            }
-
             // TODO: handle "guiSuccessor" functionality (replace host)
             // TODO: implement retry on close functionality
+
             function openSock() {
                 wsock = wss.createWebSocket('topology', {
                     onOpen: onWsOpen,
@@ -151,9 +192,9 @@
             }
 
             return {
-                bindDispatcher: bindDispatcher,
                 openSock: openSock,
-                closeSock: closeSock
+                closeSock: closeSock,
+                sendEvent: dispatcher.sendEvent
             };
         }]);
 }());

@@ -323,9 +323,11 @@
             return {
                 initInst: initInst,
                 destroyInst: destroyInst,
+
                 addInstance: addInstance,
                 updateInstance: updateInstance,
                 removeInstance: removeInstance,
+
                 isVisible: function () { return oiBox.isVisible(); },
                 show: function () { oiBox.show(); },
                 hide: function () { oiBox.hide(); }

@@ -34,7 +34,7 @@ describe('factory: view/topo/topoEvent.js', function() {
 
     it('should define api functions', function () {
         expect(fs.areFunctions(tes, [
-            'bindDispatcher', 'openSock', 'closeSock'
+            'openSock', 'closeSock', 'sendEvent'
         ])).toBeTruthy();
     });
 

@@ -35,7 +35,9 @@ describe('factory: view/topo/topoForce.js', function() {
     it('should define api functions', function () {
         expect(fs.areFunctions(tfs, [
             'initForce', 'resize', 'updateDeviceColors',
-            'addDevice', 'updateDevice'
+            'addDevice', 'updateDevice', 'removeDevice',
+            'addHost', 'updateHost', 'removeHost',
+            'addLink', 'updateLink', 'removeLink'
         ])).toBeTruthy();
     });
 

@@ -12,6 +12,10 @@
       "unknown",
       "0E:2A:69:30:13:86"
     ],
+    "metaUi": {
+      "x": 800,
+      "y": 180
+    },
     "props": {}
   }
 }

@@ -12,6 +12,10 @@
       "unknown",
       "A6:96:E5:03:52:5F"
     ],
+    "metaUi": {
+      "x": 520,
+      "y": 250
+    },
     "props": {}
   }
 }