GUI -- Topology View all, packet, and optical layer radio buttons are now part o…

…f the topology view toolbar, instead of being in the masthead. Keystroke 'N' for cycle node layers added. Button glyph added. Fixed previously unseen broken unit tests for table.js.

Change-Id: I6e53bdc6cacbf41b990abd07d30fc99ef4c3b8c0

@@ -207,6 +207,15 @@
             "91.4,54.9,91.4z M84,87.1c0,2.4-1.9,4.3-4.3,4.3c-2.4,0-4.3-1.9" +
             "91.4,54.9,91.4z M84,87.1c0,2.4-1.9,4.3-4.3,4.3c-2.4,0-4.3-1.9" +
             "-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3C82.1,82.8,84,84.7,84,87.1z",
             "-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3C82.1,82.8,84,84.7,84,87.1z",
 
 
+            filters: "M24.8,13.3L9.8,40.5h75.3l15.0-27.2H24.8z M72.8,32.1l-" +
+            "9.7-8.9l-19.3,8.9l-6.0-7.4L24.1,30.9l-1.2-2.7l15.7-7.1l6.0,7.4" +
+            "l19.0-8.8l9.7,8.8l11.5-5.6l1.3,2.7L72.8,32.1zM24.3,68.3L9.3," +
+            "95.5h75.3l15.0-27.2H24.3z M84.3,85.9L70.7,79.8l-6.0,7.4l-19.3" +
+            "-8.9l-9.7,8.9l-13.3-6.5l1.3-2.7l11.5,5.6l9.7-8.8l19.0,8.8l6.0" +
+            "-7.4l15.7,7.1L84.3,85.9z M15.3,57h-6v-4h6V57zM88.1,57H76.0v-4h" +
+            "12.1V57z M69.9,57H57.8v-4h12.1V57z M51.7,57H39.6v-4H51.7V57z " +
+            "M33.5,57H21.4v-4h12.1V57zM100.2,57h-6v-4h6V57z",
+
             resetZoom: "M86,79.8L61.7,54.3c1.8-2.9,2.8-6.3,2.9-10c0.3-11.2" +
             resetZoom: "M86,79.8L61.7,54.3c1.8-2.9,2.8-6.3,2.9-10c0.3-11.2" +
             "-8.6-20.5-19.8-20.8C33.7,23.2,24.3,32,24.1,43.2c-0.3,11.2,8.6," +
             "-8.6-20.5-19.8-20.8C33.7,23.2,24.3,32,24.1,43.2c-0.3,11.2,8.6," +
             "20.5,19.8,20.8c4,0.1,8.9-0.8,11.9-3.6l23.7,25c1.5,1.6,4,2.3," +
             "20.5,19.8,20.8c4,0.1,8.9-0.8,11.9-3.6l23.7,25c1.5,1.6,4,2.3," +

@@ -100,8 +100,8 @@
     // to get the height of the table
     // to get the height of the table
     function setTableHeight(thead, tbody) {
     function setTableHeight(thead, tbody) {
         var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
         var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
-            thHeight = thPdg + fs.noPxStyle(d3.select('th'), 'height'),
-            totalHeight = titleHeight + thHeight + tbodyPdg + mastPdg,
+            thHeight = thPdg + fs.noPxStyle(thead, 'height'),
+            totalHeight = titleHeight + thHeight + mastPdg - tbodyPdg,
             tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
             tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
 
 
         thead.style('display', 'block');
         thead.style('display', 'block');

@@ -542,41 +542,3 @@
     fill: #eee;
     fill: #eee;
 }
 }
 
 
-
-
-
-/* radio buttons injected into masthead */
-
-#topo-radio-group span.radio {
-    font-size: 10pt;
-    margin: 4px 2px;
-    padding: 1px 6px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    cursor: pointer;
-}
-
-.light #topo-radio-group span.radio {
-    border: 1px dotted #222;
-    color: #eee;
-}
-.dark #topo-radio-group span.radio {
-    border: 1px dotted #bbb;
-    color: #888;
-}
-
-#topo-radio-group span.radio.active {
-    padding: 1px 6px;
-}
-
-.light #topo-radio-group span.radio.active {
-    background-color: #bbb;
-    border: 1px solid #eee;
-    color: #666;
-
-}
-.dark #topo-radio-group span.radio.active {
-    background-color: #222;
-    border: 1px solid #eee;
-    color: #78a;
-}

@@ -29,7 +29,7 @@
 
 
     // references to injected services etc.
     // references to injected services etc.
     var $log, fs, ks, zs, gs, ms, sus, flash, wss,
     var $log, fs, ks, zs, gs, ms, sus, flash, wss,
-        tes, tfs, tps, tis, tss, tls, tts, tos, ttbs;
+        tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs;
 
 
     // DOM elements
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
     var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer;
@@ -55,6 +55,7 @@
 
 
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             Z: [tos.toggleOblique, 'Toggle oblique view (Experimental)'],
             Z: [tos.toggleOblique, 'Toggle oblique view (Experimental)'],
+            N: [fltr.clickAction, 'Cycle node layers'],
             L: [tfs.cycleDeviceLabels, 'Cycle device labels'],
             L: [tfs.cycleDeviceLabels, 'Cycle device labels'],
             U: [tfs.unpin, 'Unpin node (hover mouse over)'],
             U: [tfs.unpin, 'Unpin node (hover mouse over)'],
             R: [resetZoom, 'Reset pan / zoom'],
             R: [resetZoom, 'Reset pan / zoom'],
@@ -75,7 +76,7 @@
 
 
             _helpFormat: [
             _helpFormat: [
                 ['I', 'O', 'D', '-', 'H', 'M', 'P', 'dash', 'B' ],
                 ['I', 'O', 'D', '-', 'H', 'M', 'P', 'dash', 'B' ],
-                ['X', 'Z', 'L', 'U', 'R', '-', 'dot'],
+                ['X', 'Z', 'N', 'L', 'U', 'R', '-', 'dot'],
                 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
                 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
             ]
             ]
         };
         };
@@ -244,11 +245,12 @@
             'WebSocketService',
             'WebSocketService',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
             'TopoInstService', 'TopoSelectService', 'TopoLinkService',
             'TopoInstService', 'TopoSelectService', 'TopoLinkService',
-            'TopoTrafficService', 'TopoObliqueService', 'TopoToolbarService',
+            'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
+            'TopoToolbarService',
 
 
         function ($scope, _$log_, $loc, $timeout, _fs_, mast, _ks_, _zs_,
         function ($scope, _$log_, $loc, $timeout, _fs_, mast, _ks_, _zs_,
                   _gs_, _ms_, _sus_, _flash_, _wss_, _tes_, _tfs_, _tps_,
                   _gs_, _ms_, _sus_, _flash_, _wss_, _tes_, _tfs_, _tps_,
-                  _tis_, _tss_, _tls_, _tts_, _tos_, _ttbs_) {
+                  _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_) {
             var self = this,
             var self = this,
                 projection,
                 projection,
                 dim,
                 dim,
@@ -281,6 +283,7 @@
             tls = _tls_;
             tls = _tls_;
             tts = _tts_;
             tts = _tts_;
             tos = _tos_;
             tos = _tos_;
+            fltr = _fltr_;
             ttbs = _ttbs_;
             ttbs = _ttbs_;
 
 
             self.notifyResize = function () {
             self.notifyResize = function () {

@@ -35,86 +35,51 @@
 
 
     // which "layer" a particular item "belongs to"
     // which "layer" a particular item "belongs to"
     var layerLookup = {
     var layerLookup = {
-        host: {
-            endstation: 'pkt', // default, if host event does not define type
-            router:     'pkt',
-            bgpSpeaker: 'pkt'
-        },
-        device: {
-            switch: 'pkt',
-            roadm: 'opt'
-        },
-        link: {
-            hostLink: 'pkt',
-            direct: 'pkt',
-            indirect: '',
-            tunnel: '',
-            optical: 'opt'
-        }
-    };
-
-    var idPrefix = 'topo-rb-';
-
-    var dispatch = {
-            all: function () { suppressLayers(false); },
-            pkt: function () { showLayer('pkt'); },
-            opt: function () { showLayer('opt'); }
+            host: {
+                endstation: 'pkt', // default, if host event does not define type
+                router:     'pkt',
+                bgpSpeaker: 'pkt'
+            },
+            device: {
+                switch: 'pkt',
+                roadm: 'opt'
+            },
+            link: {
+                hostLink: 'pkt',
+                direct: 'pkt',
+                indirect: '',
+                tunnel: '',
+                optical: 'opt'
+            }
         },
         },
-        filterButtons = [
-            { text: 'All Layers', id: 'all' },
-            { text: 'Packet Only', id: 'pkt' },
-            { text: 'Optical Only', id: 'opt' }
-        ],
-        btnG,
-        btnDef = {},
-        targetDiv;
-
-
-    function injectButtons(div) {
-        targetDiv = div;
-
-        btnG = div.append('div').attr('id', 'topo-radio-group');
-
-        filterButtons.forEach(function (btn, i) {
-            var bid = btn.id,
-                txt = btn.text,
-                uid = idPrefix + bid,
-                button = btnG.append('span')
-                    .attr({
-                        id: uid,
-                        'class': 'radio'
-                    })
-                    .text(txt);
-            btnDef[uid] = btn;
-
-            if (i === 0) {
-                button.classed('active', true);
-                btnG.selected = bid;
+        // order of layer cycling in button
+        dispatch = [
+            {
+                type: 'all',
+                action: function () { suppressLayers(false); },
+                msg: 'All Layers Shown'
+            },
+            {
+                type: 'pkt',
+                action: function () { showLayer('pkt'); },
+                msg: 'Packet Layer Shown'
+            },
+            {
+                type: 'opt',
+                action: function () { showLayer('opt'); },
+                msg: 'Optical Layer Shown'
             }
             }
-        });
-
-        btnG.selectAll('span')
-            .on('click', function () {
-               var button = d3.select(this),
-                   uid = button.attr('id'),
-                   btn = btnDef[uid],
-                   act = button.classed('active');
-
-                if (!act) {
-                    btnG.selectAll('span').classed('active', false);
-                    button.classed('active', true);
-                    btnG.selected = btn.id;
-                    clickAction(btn.id);
-                }
-            });
-    }
+        ],
+        layer = 0;
 
 
-    function clickAction(which) {
-        dispatch[which]();
+    function clickAction() {
+        layer = (layer + 1) % dispatch.length;
+        dispatch[layer].action();
+        flash.flash(dispatch[layer].msg);
     }
     }
 
 
     function selected() {
     function selected() {
-        return btnG ? btnG.selected : '';
+        return dispatch[layer].type;
     }
     }
 
 
     function inLayer(d, layer) {
     function inLayer(d, layer) {
@@ -169,20 +134,12 @@
                 tps = _tps_;
                 tps = _tps_;
                 tts = _tts_;
                 tts = _tts_;
 
 
-                function initFilter(_api_, div) {
+                function initFilter(_api_) {
                     api = _api_;
                     api = _api_;
-                    injectButtons(div);
-                }
-
-                function destroyFilter() {
-                    targetDiv.select('#topo-radio-group').remove();
-                    btnG = null;
-                    btnDef = {};
                 }
                 }
 
 
                 return {
                 return {
                     initFilter: initFilter,
                     initFilter: initFilter,
-                    destroyFilter: destroyFilter,
 
 
                     clickAction: clickAction,
                     clickAction: clickAction,
                     selected: selected,
                     selected: selected,

@@ -816,7 +816,7 @@
                 tss.initSelect(mkSelectApi(uplink));
                 tss.initSelect(mkSelectApi(uplink));
                 tts.initTraffic(mkTrafficApi(uplink));
                 tts.initTraffic(mkTrafficApi(uplink));
                 tos.initOblique(mkObliqueApi(uplink, fltr));
                 tos.initOblique(mkObliqueApi(uplink, fltr));
-                fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right'));
+                fltr.initFilter(mkFilterApi(uplink));
                 tls.initLink(mkLinkApi(svg, uplink), td3);
                 tls.initLink(mkLinkApi(svg, uplink), td3);
 
 
                 settings = angular.extend({}, defaultSettings, opts);
                 settings = angular.extend({}, defaultSettings, opts);
@@ -855,7 +855,6 @@
                 force.stop();
                 force.stop();
 
 
                 tls.destroyLink();
                 tls.destroyLink();
-                fltr.destroyFilter();
                 tos.destroyOblique();
                 tos.destroyOblique();
                 tts.destroyTraffic();
                 tts.destroyTraffic();
                 tss.destroySelect();
                 tss.destroySelect();

@@ -44,6 +44,7 @@
 
 
         //X: { id: 'nodelock-tog', gid: 'lock', isel: false },
         //X: { id: 'nodelock-tog', gid: 'lock', isel: false },
         Z: { id: 'oblique-tog', gid: 'oblique', isel: false },
         Z: { id: 'oblique-tog', gid: 'oblique', isel: false },
+        N: { id: 'filters-btn', gid: 'filters' },
         L: { id: 'cycleLabels-btn', gid: 'cycleLabels' },
         L: { id: 'cycleLabels-btn', gid: 'cycleLabels' },
         R: { id: 'resetZoom-btn', gid: 'resetZoom' },
         R: { id: 'resetZoom-btn', gid: 'resetZoom' },
 
 
@@ -93,6 +94,7 @@
     function addSecondRow() {
     function addSecondRow() {
         //addToggle('X');
         //addToggle('X');
         addToggle('Z');
         addToggle('Z');
+        addButton('N');
         addButton('L');
         addButton('L');
         addButton('R');
         addButton('R');
     }
     }

@@ -20,7 +20,7 @@
 describe('factory: fw/svg/glyph.js', function() {
 describe('factory: fw/svg/glyph.js', function() {
     var $log, fs, gs, d3Elem, svg;
     var $log, fs, gs, d3Elem, svg;
 
 
-    var numBaseGlyphs = 34,
+    var numBaseGlyphs = 35,
         vbBird = '352 224 113 112',
         vbBird = '352 224 113 112',
         vbGlyph = '0 0 110 110',
         vbGlyph = '0 0 110 110',
         vbBadge = '0 0 10 10',
         vbBadge = '0 0 10 10',
@@ -46,6 +46,7 @@ describe('factory: fw/svg/glyph.js', function() {
             map: 'M95.8,9.2H14.2c-2.8,0-5,2.2-5,5v66',
             map: 'M95.8,9.2H14.2c-2.8,0-5,2.2-5,5v66',
             cycleLabels: 'M72.5,33.9c',
             cycleLabels: 'M72.5,33.9c',
             oblique: 'M80.9,30.2h',
             oblique: 'M80.9,30.2h',
+            filters: 'M24.8,13.3L',
             resetZoom: 'M86,79.8L',
             resetZoom: 'M86,79.8L',
             relatedIntents: 'M99.9,43.7',
             relatedIntents: 'M99.9,43.7',
             nextIntent: 'M88.1,55.7',
             nextIntent: 'M88.1,55.7',
@@ -74,8 +75,8 @@ describe('factory: fw/svg/glyph.js', function() {
             'unknown', 'node', 'switch', 'roadm', 'endstation', 'router',
             'unknown', 'node', 'switch', 'roadm', 'endstation', 'router',
             'bgpSpeaker', 'chain', 'crown', 'lock',
             'bgpSpeaker', 'chain', 'crown', 'lock',
             'summary', 'details', 'ports', 'map', 'cycleLabels', 'oblique',
             'summary', 'details', 'ports', 'map', 'cycleLabels', 'oblique',
-            'resetZoom', 'relatedIntents', 'nextIntent', 'prevIntent',
-            'intentTraffic', 'allTraffic', 'flows', 'eqMaster'
+            'filters', 'resetZoom', 'relatedIntents', 'nextIntent',
+            'prevIntent', 'intentTraffic', 'allTraffic', 'flows', 'eqMaster'
         ],
         ],
         badgeIds = [
         badgeIds = [
             'uiAttached', 'checkMark', 'xMark', 'triangleUp', 'triangleDown',
             'uiAttached', 'checkMark', 'xMark', 'triangleUp', 'triangleDown',

@@ -19,11 +19,12 @@
  */
  */
 describe('factory: fw/widget/table.js', function () {
 describe('factory: fw/widget/table.js', function () {
     var $log, $compile, $rootScope,
     var $log, $compile, $rootScope,
-        fs, is,
+        fs, mast, is,
         scope, compiled,
         scope, compiled,
-        table, thead, tbody,
+        table, thead, tbody, mockHeader,
+        mockh2Height = '10px',
         tableIconTdSize = 100,
         tableIconTdSize = 100,
-        bottomMargin = 200,
+        pdgTop = 101,
         numTestElems = 4;
         numTestElems = 4;
 
 
     var onosFixedHeaderTags = '<table ' +
     var onosFixedHeaderTags = '<table ' +
@@ -73,7 +74,7 @@ describe('factory: fw/widget/table.js', function () {
                                 '</tbody>' +
                                 '</tbody>' +
                                 '</table>';
                                 '</table>';
 
 
-    beforeEach(module('onosWidget', 'onosUtil', 'onosSvg'));
+    beforeEach(module('onosWidget', 'onosUtil', 'onosMast', 'onosSvg'));
 
 
     var mockWindow = {
     var mockWindow = {
         innerWidth: 400,
         innerWidth: 400,
@@ -92,11 +93,12 @@ describe('factory: fw/widget/table.js', function () {
     });
     });
 
 
     beforeEach(inject(function (_$log_, _$compile_, _$rootScope_,
     beforeEach(inject(function (_$log_, _$compile_, _$rootScope_,
-                                FnService, IconService) {
+                                FnService, MastService, IconService) {
         $log = _$log_;
         $log = _$log_;
         $compile = _$compile_;
         $compile = _$compile_;
         $rootScope = _$rootScope_;
         $rootScope = _$rootScope_;
         fs = FnService;
         fs = FnService;
+        mast = MastService;
         is = IconService;
         is = IconService;
     }));
     }));
 
 
@@ -104,10 +106,18 @@ describe('factory: fw/widget/table.js', function () {
         scope = $rootScope.$new();
         scope = $rootScope.$new();
     });
     });
 
 
+    beforeEach(function () {
+        mockHeader = d3.select('body')
+            .append('h2')
+            .style('height', mockh2Height)
+            .html('Some Header');
+    });
+
     afterEach(function () {
     afterEach(function () {
         table = null;
         table = null;
         thead = null;
         thead = null;
         tbody = null;
         tbody = null;
+        mockHeader.remove();
     });
     });
 
 
     function compileTable() {
     function compileTable() {
@@ -127,11 +137,11 @@ describe('factory: fw/widget/table.js', function () {
     }
     }
 
 
     function verifyCssDisplay() {
     function verifyCssDisplay() {
-        var winHeight = fs.windowSize().height;
+        var tableHeight = fs.windowSize(pdgTop).height;
 
 
         expect(thead.css('display')).toBe('block');
         expect(thead.css('display')).toBe('block');
         expect(tbody.css('display')).toBe('block');
         expect(tbody.css('display')).toBe('block');
-        expect(tbody.css('height')).toBe((winHeight - bottomMargin) + 'px');
+        expect(tbody.css('height')).toBe(tableHeight + 'px');
         expect(tbody.css('overflow')).toBe('auto');
         expect(tbody.css('overflow')).toBe('auto');
     }
     }
 
 

@@ -18,7 +18,7 @@
  ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests
  ONOS GUI -- Topo View -- Topo Filter Service - Unit Tests
  */
  */
 describe('factory: view/topo/topoFilter.js', function() {
 describe('factory: view/topo/topoFilter.js', function() {
-    var $log, fs, fltr, d3Elem, api;
+    var $log, fs, fltr, api;
 
 
     var mockNodes = {
     var mockNodes = {
             each: function () {},
             each: function () {},
@@ -35,7 +35,6 @@ describe('factory: view/topo/topoFilter.js', function() {
         $log = _$log_;
         $log = _$log_;
         fs = FnService;
         fs = FnService;
         fltr = TopoFilterService;
         fltr = TopoFilterService;
-        d3Elem = d3.select('body').append('div').attr('id', 'myMastDiv');
 
 
         api = {
         api = {
             node: function () { return mockNodes; },
             node: function () { return mockNodes; },
@@ -44,7 +43,7 @@ describe('factory: view/topo/topoFilter.js', function() {
     }));
     }));
 
 
     afterEach(function () {
     afterEach(function () {
-        d3.select('#myMastDiv').remove();
+
     });
     });
 
 
     it('should define TopoFilterService', function () {
     it('should define TopoFilterService', function () {
@@ -53,45 +52,16 @@ describe('factory: view/topo/topoFilter.js', function() {
 
 
     it('should define api functions', function () {
     it('should define api functions', function () {
         expect(fs.areFunctions(fltr, [
         expect(fs.areFunctions(fltr, [
-            'initFilter', 'destroyFilter',
-            'clickAction', 'selected', 'inLayer',
+            'initFilter',
+            'clickAction', 'selected', 'inLayer'
         ])).toBeTruthy();
         ])).toBeTruthy();
     });
     });
 
 
-    it('should inject the buttons into the given div', function () {
-        fltr.initFilter(api, d3Elem);
-        var grpdiv = d3Elem.select('#topo-radio-group');
-        expect(grpdiv.size()).toBe(1);
-
-        var btns = grpdiv.selectAll('span');
-        expect(btns.size()).toBe(3);
-
-        var prefix = 'topo-rb-',
-            expIds = [ 'all', 'pkt', 'opt' ];
-
-        btns.each(function (d, i) {
-            var b = d3.select(this);
-            expect(b.attr('id')).toEqual(prefix + expIds[i]);
-            // 0th button is active - others are not
-            expect(b.classed('active')).toEqual(i === 0);
-        });
-    });
-
-    it('should remove the buttons from the given div', function () {
-        fltr.initFilter(api, d3Elem);
-        var grpdiv = d3Elem.select('#topo-radio-group');
-        expect(grpdiv.size()).toBe(1);
-
-        fltr.destroyFilter();
-        grpdiv = d3Elem.select('#topo-radio-group');
-        expect(grpdiv.size()).toBe(0);
-    });
-
     it('should report the selected button', function () {
     it('should report the selected button', function () {
-        fltr.initFilter(api, d3Elem);
+        fltr.initFilter(api);
         expect(fltr.selected()).toEqual('all');
         expect(fltr.selected()).toEqual('all');
     });
     });
 
 
-    // TODO: figure out how to trigger the click function on the spans..
+    // TODO: test the on click functions
 
 
 });
 });