GUI -- Migrating the add/update device functionality to the Topology View. (WIP)

- still a lot of work to do.

Change-Id: I0453b7e2ec20a8a8149fd9d6440a13a3d43fbfd6

@@ -70,3 +70,7 @@ svg.embeddedIcon .icon rect {
 .dark svg.embeddedIcon .icon rect {
 .dark svg.embeddedIcon .icon rect {
     stroke: #ccc;
     stroke: #ccc;
 }
 }
+
+svg .svgIcon {
+    fill-rule: evenodd;
+}

@@ -26,15 +26,17 @@
         cornerSize = vboxSize / 10,
         cornerSize = vboxSize / 10,
         viewBox = '0 0 ' + vboxSize + ' ' + vboxSize;
         viewBox = '0 0 ' + vboxSize + ' ' + vboxSize;
 
 
-    // maps icon id to the glyph id it uses.
-    // note: icon id maps to a CSS class for styling that icon
+    // Maps icon ID to the glyph ID it uses.
+    // NOTE: icon ID maps to a CSS class for styling that icon
     var glyphMapping = {
     var glyphMapping = {
-            deviceOnline: 'checkMark',
-            deviceOffline: 'xMark',
-            tableColSortAsc: 'triangleUp',
-            tableColSortDesc: 'triangleDown',
-            tableColSortNone: '-'
-        };
+        deviceOnline: 'checkMark',
+        deviceOffline: 'xMark',
+        tableColSortAsc: 'triangleUp',
+        tableColSortDesc: 'triangleDown',
+        tableColSortNone: '-'
+    };
+
+
 
 
     function ensureIconLibDefs() {
     function ensureIconLibDefs() {
         var body = d3.select('body'),
         var body = d3.select('body'),
@@ -48,6 +50,108 @@
         return svg.select('defs');
         return svg.select('defs');
     }
     }
 
 
+    // div is a D3 selection of the <DIV> element into which icon should load
+    // iconCls is the CSS class used to identify the icon
+    // size is dimension of icon in pixels. Defaults to 20.
+    // installGlyph, if truthy, will cause the glyph to be added to
+    //      well-known defs element. Defaults to false.
+    // svgClass is the CSS class used to identify the SVG layer.
+    //      Defaults to 'embeddedIcon'.
+    function loadIcon(div, iconCls, size, installGlyph, svgClass) {
+        var dim = size || 20,
+            svgCls = svgClass || 'embeddedIcon',
+            gid = glyphMapping[iconCls] || 'unknown',
+            svg, g;
+
+        if (installGlyph) {
+            gs.loadDefs(ensureIconLibDefs(), [gid], true);
+        }
+
+        svg = div.append('svg').attr({
+            'class': svgCls,
+            width: dim,
+            height: dim,
+            viewBox: viewBox
+        });
+
+        g = svg.append('g').attr({
+            'class': 'icon ' + iconCls
+        });
+
+        g.append('rect').attr({
+            width: vboxSize,
+            height: vboxSize,
+            rx: cornerSize
+        });
+
+        if (gid !== '-') {
+            g.append('use').attr({
+                width: vboxSize,
+                height: vboxSize,
+                'class': 'glyph',
+                'xlink:href': '#' + gid
+            });
+        }
+    }
+
+    function loadEmbeddedIcon(div, iconCls, size) {
+        loadIcon(div, iconCls, size, true);
+    }
+
+
+    // configuration for device and host icons in the topology view
+    var config = {
+        device: {
+            dim: 36,
+            rx: 4
+        },
+        host: {
+            radius: {
+                noGlyph: 9,
+                withGlyph: 14
+            },
+            glyphed: {
+                endstation: 1,
+                bgpSpeaker: 1,
+                router: 1
+            }
+        }
+    };
+
+
+    // Adds a device icon to the specified element, using the given glyph.
+    // Returns the D3 selection of the icon.
+    function addDeviceIcon(elem, glyphId) {
+        var cfg = config.device,
+            g = elem.append('g')
+                .attr('class', 'svgIcon deviceIcon');
+
+        g.append('rect').attr({
+            x: 0,
+            y: 0,
+            rx: cfg.rx,
+            width: cfg.dim,
+            height: cfg.dim
+        });
+
+        g.append('use').attr({
+            'xlink:href': '#' + glyphId,
+            width: cfg.dim,
+            height: cfg.dim
+        });
+
+        g.dim = cfg.dim;
+        return g;
+    }
+
+    function addHostIcon(elem, glyphId) {
+        // TODO:
+    }
+
+
+    // =========================
+    // === DEFINE THE MODULE
+
     angular.module('onosSvg')
     angular.module('onosSvg')
         .factory('IconService', ['$log', 'FnService', 'GlyphService',
         .factory('IconService', ['$log', 'FnService', 'GlyphService',
         function (_$log_, _fs_, _gs_) {
         function (_$log_, _fs_, _gs_) {
@@ -55,57 +159,12 @@
             fs = _fs_;
             fs = _fs_;
             gs = _gs_;
             gs = _gs_;
 
 
-            // div is a D3 selection of the <DIV> element into which icon should load
-            // iconCls is the CSS class used to identify the icon
-            // size is dimension of icon in pixels. Defaults to 20.
-            // installGlyph, if truthy, will cause the glyph to be added to
-            //      well-known defs element. Defaults to false.
-            // svgClass is the CSS class used to identify the SVG layer.
-            //      Defaults to 'embeddedIcon'.
-            function loadIcon(div, iconCls, size, installGlyph, svgClass) {
-                var dim = size || 20,
-                    svgCls = svgClass || 'embeddedIcon',
-                    gid = glyphMapping[iconCls] || 'unknown',
-                    svg, g;
-
-                if (installGlyph) {
-                    gs.loadDefs(ensureIconLibDefs(), [gid], true);
-                }
-
-                svg = div.append('svg').attr({
-                        'class': svgCls,
-                        width: dim,
-                        height: dim,
-                        viewBox: viewBox
-                    });
-
-                g = svg.append('g').attr({
-                    'class': 'icon ' + iconCls
-                });
-
-                g.append('rect').attr({
-                    width: vboxSize,
-                    height: vboxSize,
-                    rx: cornerSize
-                });
-
-                if (gid !== '-') {
-                    g.append('use').attr({
-                        width: vboxSize,
-                        height: vboxSize,
-                        'class': 'glyph',
-                        'xlink:href': '#' + gid
-                    });
-                }
-            }
-
-            function loadEmbeddedIcon(div, iconCls, size) {
-                loadIcon(div, iconCls, size, true);
-            }
-
             return {
             return {
                 loadIcon: loadIcon,
                 loadIcon: loadIcon,
-                loadEmbeddedIcon: loadEmbeddedIcon
+                loadEmbeddedIcon: loadEmbeddedIcon,
+                addDeviceIcon: addDeviceIcon,
+                addHostIcon: addHostIcon,
+                iconConfig: function () { return config; }
             };
             };
         }]);
         }]);
 
 

@@ -22,45 +22,53 @@
     The Map Service provides a simple API for loading geographical maps into
     The Map Service provides a simple API for loading geographical maps into
     an SVG layer. For example, as a background to the Topology View.
     an SVG layer. For example, as a background to the Topology View.
 
 
-    e.g.  var ok = MapService.loadMapInto(svgLayer, '*continental-us');
+    e.g.  var promise = MapService.loadMapInto(svgLayer, '*continental-us');
 
 
     The Map Service makes use of the GeoDataService to load the required data
     The Map Service makes use of the GeoDataService to load the required data
     from the server and to create the appropriate geographical projection.
     from the server and to create the appropriate geographical projection.
 
 
+    A promise is returned to the caller, which is resolved with the
+    map projection once created.
 */
 */
 
 
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
     // injected references
     // injected references
-    var $log, fs, gds;
+    var $log, $q, fs, gds;
+
+    function loadMapInto(mapLayer, id, opts) {
+        var promise = gds.fetchTopoData(id),
+            deferredProjection = $q.defer();
+
+        if (!promise) {
+            $log.warn('Failed to load map: ' + id);
+            return false;
+        }
+
+        promise.then(function () {
+            var gen = gds.createPathGenerator(promise.topodata, opts);
+
+            deferredProjection.resolve(gen.settings.projection);
+
+            mapLayer.selectAll('path')
+                .data(gen.geodata.features)
+                .enter()
+                .append('path')
+                .attr('d', gen.pathgen);
+        });
+        return deferredProjection.promise;
+    }
+
 
 
     angular.module('onosSvg')
     angular.module('onosSvg')
-        .factory('MapService', ['$log', 'FnService', 'GeoDataService',
-        function (_$log_, _fs_, _gds_) {
+        .factory('MapService', ['$log', '$q', 'FnService', 'GeoDataService',
+        function (_$log_, _$q_, _fs_, _gds_) {
             $log = _$log_;
             $log = _$log_;
+            $q = _$q_;
             fs = _fs_;
             fs = _fs_;
             gds = _gds_;
             gds = _gds_;
 
 
-            function loadMapInto(mapLayer, id, opts) {
-                var promise = gds.fetchTopoData(id);
-                if (!promise) {
-                    $log.warn('Failed to load map: ' + id);
-                    return false;
-                }
-
-                promise.then(function () {
-                    var gen = gds.createPathGenerator(promise.topodata, opts);
-
-                    mapLayer.selectAll('path')
-                        .data(gen.geodata.features)
-                        .enter()
-                        .append('path')
-                        .attr('d', gen.pathgen);
-                });
-                return true;
-            }
-
             return {
             return {
                 loadMapInto: loadMapInto
                 loadMapInto: loadMapInto
             };
             };

@@ -240,13 +240,18 @@
                 el.style('visibility', (b ? 'visible' : 'hidden'));
                 el.style('visibility', (b ? 'visible' : 'hidden'));
             }
             }
 
 
+            function safeId(s) {
+                return s.replace(/[^a-z0-9]/gi, '-');
+            }
+
             return {
             return {
                 createDragBehavior: createDragBehavior,
                 createDragBehavior: createDragBehavior,
                 loadGlow: loadGlow,
                 loadGlow: loadGlow,
                 cat7: cat7,
                 cat7: cat7,
                 translate: translate,
                 translate: translate,
                 stripPx: stripPx,
                 stripPx: stripPx,
-                makeVisible: makeVisible
+                makeVisible: makeVisible,
+                safeId: safeId
             };
             };
         }]);
         }]);
 }());
 }());

@@ -245,3 +245,94 @@
     /* TODO: add blue glow */
     /* TODO: add blue glow */
     /*filter: url(#blue-glow);*/
     /*filter: url(#blue-glow);*/
 }
 }
+
+
+/* --- Topo Nodes --- */
+
+#ov-topo svg .node {
+    cursor: pointer;
+}
+
+#ov-topo svg .node.selected rect,
+#ov-topo svg .node.selected circle {
+    fill: #f90;
+    /* TODO: add blue glow filter */
+    /*filter: url(#blue-glow);*/
+}
+
+#ov-topo svg .node text {
+    pointer-events: none;
+}
+
+/* Device Nodes */
+
+#ov-topo svg .node.device {
+}
+
+#ov-topo svg .node.device rect {
+    stroke-width: 1.5;
+}
+
+#ov-topo svg .node.device.fixed rect {
+    stroke-width: 1.5;
+    stroke: #ccc;
+}
+
+/* note: device is offline without the 'online' class */
+#ov-topo svg .node.device {
+    fill: #777;
+}
+
+#ov-topo svg .node.device.online {
+    fill: #6e7fa3;
+}
+
+/* note: device is offline without the 'online' class */
+#ov-topo svg .node.device text {
+    fill: #bbb;
+    font: 10pt sans-serif;
+}
+
+#ov-topo svg .node.device.online text {
+    fill: white;
+}
+
+#ov-topo svg .node.device .svgIcon rect {
+    fill: #aaa;
+}
+#ov-topo svg .node.device .svgIcon use {
+    fill: #777;
+}
+#ov-topo svg .node.device.selected .svgIcon rect {
+    fill: #f90;
+}
+#ov-topo svg .node.device.online .svgIcon rect {
+    fill: #ccc;
+}
+#ov-topo svg .node.device.online .svgIcon use {
+    fill: #000;
+}
+#ov-topo svg .node.device.online.selected .svgIcon rect {
+    fill: #f90;
+}
+
+
+/* Host Nodes */
+
+#ov-topo svg .node.host {
+    stroke: #000;
+}
+
+#ov-topo svg .node.host text {
+    fill: #846;
+    stroke: none;
+    font: 9pt sans-serif;
+}
+
+svg .node.host circle {
+    stroke: #000;
+    fill: #edb;
+}
+
+
+

@@ -28,7 +28,7 @@
     ];
     ];
 
 
     // references to injected services etc.
     // references to injected services etc.
-    var $log, fs, ks, zs, gs, ms, sus, tfs;
+    var $log, fs, ks, zs, gs, ms, sus, tfs, tis;
 
 
     // DOM elements
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
@@ -41,20 +41,61 @@
     // --- Short Cut Keys ------------------------------------------------
     // --- Short Cut Keys ------------------------------------------------
 
 
     var keyBindings = {
     var keyBindings = {
-        W: [logWarning, '(temp) log a warning'],
-        E: [logError, '(temp) log an error'],
-        R: [resetZoom, 'Reset pan / zoom']
+        //O: [toggleSummary, 'Toggle ONOS summary pane'],
+        I: [toggleInstances, 'Toggle ONOS instances pane'],
+        //D: [toggleDetails, 'Disable / enable details pane'],
+
+        //H: [toggleHosts, 'Toggle host visibility'],
+        //M: [toggleOffline, 'Toggle offline visibility'],
+        //B: [toggleBg, 'Toggle background image'],
+        //P: togglePorts,
+
+        //X: [toggleNodeLock, 'Lock / unlock node positions'],
+        //Z: [toggleOblique, 'Toggle oblique view (Experimental)'],
+        L: [cycleLabels, 'Cycle device labels'],
+        //U: [unpin, 'Unpin node (hover mouse over)'],
+        R: [resetZoom, 'Reset pan / zoom'],
+
+        //V: [showRelatedIntentsAction, 'Show all related intents'],
+        //rightArrow: [showNextIntentAction, 'Show next related intent'],
+        //leftArrow: [showPrevIntentAction, 'Show previous related intent'],
+        //W: [showSelectedIntentTrafficAction, 'Monitor traffic of selected intent'],
+        //A: [showAllTrafficAction, 'Monitor all traffic'],
+        //F: [showDeviceLinkFlowsAction, 'Show device link flows'],
+
+        //E: [equalizeMasters, 'Equalize mastership roles'],
+
+        //esc: handleEscape,
+
+        _helpFormat: [
+            ['O', 'I', 'D', '-', 'H', 'M', 'B', 'P' ],
+            ['X', 'Z', 'L', 'U', 'R' ],
+            ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
+        ]
+
     };
     };
 
 
-    // -----------------
-    // these functions are necessarily temporary examples....
-    function logWarning() {
-        $log.warn('You have been warned!');
+    // mouse gestures
+    var gestures = [
+        ['click', 'Select the item and show details'],
+        ['shift-click', 'Toggle selection state'],
+        ['drag', 'Reposition (and pin) device / host'],
+        ['cmd-scroll', 'Zoom in / out'],
+        ['cmd-drag', 'Pan']
+    ];
+
+    function toggleInstances() {
+        if (tis.isVisible()) {
+            tis.hide();
+        } else {
+            tis.show();
+        }
+        tfs.updateDeviceColors();
     }
     }
-    function logError() {
-        $log.error('You are erroneous!');
+
+    function cycleLabels() {
+        $log.debug('Cycle Labels.....');
     }
     }
-    // -----------------
 
 
     function resetZoom() {
     function resetZoom() {
         zoomer.reset();
         zoomer.reset();
@@ -83,7 +124,6 @@
     function zoomCallback() {
     function zoomCallback() {
         var tr = zoomer.translate(),
         var tr = zoomer.translate(),
             sc = zoomer.scale();
             sc = zoomer.scale();
-        $log.log('ZOOM: translate = ' + tr + ', scale = ' + sc);
 
 
         // keep the map lines constant width while zooming
         // keep the map lines constant width while zooming
         mapG.style('stroke-width', (2.0 / sc) + 'px');
         mapG.style('stroke-width', (2.0 / sc) + 'px');
@@ -150,16 +190,19 @@
 
 
     function setUpMap() {
     function setUpMap() {
         mapG = zoomLayer.append('g').attr('id', 'topo-map');
         mapG = zoomLayer.append('g').attr('id', 'topo-map');
-        //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
-        ms.loadMapInto(mapG, '*continental_us');
+
         //showCallibrationPoints();
         //showCallibrationPoints();
+        //return ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
+
+        // returns a promise for the projection...
+        return ms.loadMapInto(mapG, '*continental_us');
     }
     }
 
 
     // --- Force Layout --------------------------------------------------
     // --- Force Layout --------------------------------------------------
 
 
-    function setUpForce() {
+    function setUpForce(xlink) {
         forceG = zoomLayer.append('g').attr('id', 'topo-force');
         forceG = zoomLayer.append('g').attr('id', 'topo-force');
-        tfs.initForce(forceG, svg.attr('width'), svg.attr('height'));
+        tfs.initForce(forceG, xlink, svg.attr('width'), svg.attr('height'));
     }
     }
 
 
     // --- Controller Definition -----------------------------------------
     // --- Controller Definition -----------------------------------------
@@ -174,8 +217,12 @@
             'TopoInstService',
             'TopoInstService',
 
 
         function ($scope, _$log_, $loc, $timeout, _fs_, mast,
         function ($scope, _$log_, $loc, $timeout, _fs_, mast,
-                  _ks_, _zs_, _gs_, _ms_, _sus_, tes, _tfs_, tps, tis) {
-            var self = this;
+                  _ks_, _zs_, _gs_, _ms_, _sus_, tes, _tfs_, tps, _tis_) {
+            var self = this,
+                xlink = {
+                    showNoDevs: showNoDevs
+                };
+
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
             ks = _ks_;
             ks = _ks_;
@@ -184,6 +231,7 @@
             ms = _ms_;
             ms = _ms_;
             sus = _sus_;
             sus = _sus_;
             tfs = _tfs_;
             tfs = _tfs_;
+            tis = _tis_;
 
 
             self.notifyResize = function () {
             self.notifyResize = function () {
                 svgResized(fs.windowSize(mast.mastHeight()));
                 svgResized(fs.windowSize(mast.mastHeight()));
@@ -207,8 +255,8 @@
             setUpDefs();
             setUpDefs();
             setUpZoom();
             setUpZoom();
             setUpNoDevs();
             setUpNoDevs();
-            setUpMap();
-            setUpForce();
+            xlink.projectionPromise = setUpMap();
+            setUpForce(xlink);
 
 
             tis.initInst();
             tis.initInst();
             tps.initPanels();
             tps.initPanels();

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, wss, wes, tps, tis;
+    var $log, wss, wes, tps, tis, tfs;
 
 
     // internal state
     // internal state
     var wsock;
     var wsock;
@@ -32,7 +32,9 @@
         showSummary: showSummary,
         showSummary: showSummary,
         addInstance: addInstance,
         addInstance: addInstance,
         updateInstance: updateInstance,
         updateInstance: updateInstance,
-        removeInstance: removeInstance
+        removeInstance: removeInstance,
+        addDevice: addDevice,
+        updateDevice: updateDevice
         // TODO: implement remaining handlers..
         // TODO: implement remaining handlers..
 
 
     };
     };
@@ -63,6 +65,16 @@
         tis.removeInstance(ev.payload);
         tis.removeInstance(ev.payload);
     }
     }
 
 
+    function addDevice(ev) {
+        $log.debug('  **** Add Device **** ', ev.payload);
+        tfs.addDevice(ev.payload);
+    }
+
+    function updateDevice(ev) {
+        $log.debug('  **** Update Device **** ', ev.payload);
+        tfs.updateDevice(ev.payload);
+    }
+
     // ==========================
     // ==========================
 
 
     var dispatcher = {
     var dispatcher = {
@@ -100,14 +112,15 @@
     angular.module('ovTopo')
     angular.module('ovTopo')
     .factory('TopoEventService',
     .factory('TopoEventService',
         ['$log', '$location', 'WebSocketService', 'WsEventService',
         ['$log', '$location', 'WebSocketService', 'WsEventService',
-            'TopoPanelService', 'TopoInstService',
+            'TopoPanelService', 'TopoInstService', 'TopoForceService',
 
 
-        function (_$log_, $loc, _wss_, _wes_, _tps_, _tis_) {
+        function (_$log_, $loc, _wss_, _wes_, _tps_, _tis_, _tfs_) {
             $log = _$log_;
             $log = _$log_;
             wss = _wss_;
             wss = _wss_;
             wes = _wes_;
             wes = _wes_;
             tps = _tps_;
             tps = _tps_;
             tis = _tis_;
             tis = _tis_;
+            tfs = _tfs_;
 
 
             function bindDispatcher(TopoDomElementsPassedHere) {
             function bindDispatcher(TopoDomElementsPassedHere) {
                 // TODO: store refs to topo DOM elements...
                 // TODO: store refs to topo DOM elements...

@@ -325,7 +325,10 @@
                 destroyInst: destroyInst,
                 destroyInst: destroyInst,
                 addInstance: addInstance,
                 addInstance: addInstance,
                 updateInstance: updateInstance,
                 updateInstance: updateInstance,
-                removeInstance: removeInstance
+                removeInstance: removeInstance,
+                isVisible: function () { return oiBox.isVisible(); },
+                show: function () { oiBox.show(); },
+                hide: function () { oiBox.hide(); }
             };
             };
         }]);
         }]);
 }());
 }());