From 6036b19bfb55df5d85d67896e16fca031ec6bd12 Mon Sep 17 00:00:00 2001 From: Simon Hunt Date: Wed, 11 Feb 2015 11:20:26 -0800 Subject: [PATCH] GUI -- TopoView - Fixed dynamic repositioning of Details Panel. - also implemented toggleDetails keystroke 'D'. Change-Id: I99a9ee1235c8cc1174d8c2d542e6e40b7fb6b8dc --- web/gui/src/main/webapp/app/view/topo/topo.js | 25 +++---- .../main/webapp/app/view/topo/topoPanel.js | 71 ++++++++++++++++--- .../main/webapp/app/view/topo/topoSelect.js | 59 +++++++++------ .../tests/app/view/topo/topoPanel-spec.js | 1 + .../tests/app/view/topo/topoSelect-spec.js | 2 +- 5 files changed, 110 insertions(+), 48 deletions(-) diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js index 08b99e19ba..18b4fe18fb 100644 --- a/web/gui/src/main/webapp/app/view/topo/topo.js +++ b/web/gui/src/main/webapp/app/view/topo/topo.js @@ -28,7 +28,7 @@ ]; // references to injected services etc. - var $log, fs, ks, zs, gs, ms, sus, tes, tfs, tps, tis; + var $log, fs, ks, zs, gs, ms, sus, tes, tfs, tps, tis, tss; // DOM elements var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer; @@ -42,9 +42,9 @@ // key bindings need to be made after the services have been injected // thus, deferred to here... ks.keyBindings({ - O: [toggleSummary, 'Toggle ONOS summary pane'], + O: [tps.toggleSummary, 'Toggle ONOS summary pane'], I: [toggleInstances, 'Toggle ONOS instances pane'], - //D: [toggleDetails, 'Disable / enable details pane'], + D: [tss.toggleDetails, 'Disable / enable details pane'], H: [tfs.toggleHosts, 'Toggle host visibility'], M: [tfs.toggleOffline, 'Toggle offline visibility'], @@ -87,15 +87,8 @@ // --- Keystroke functions ------------------------------------------- - function toggleSummary() { - if (tps.summaryVisible()) { - tes.sendEvent("cancelSummary"); - tps.hideSummaryPanel(); - } else { - tes.sendEvent('requestSummary'); - } - } - + // NOTE: this really belongs in the TopoPanelService -- but how to + // cleanly link in the updateDeviceColors() call? To be fixed later. function toggleInstances() { tis.toggle(); tfs.updateDeviceColors(); @@ -219,10 +212,11 @@ 'FnService', 'MastService', 'KeyService', 'ZoomService', 'GlyphService', 'MapService', 'SvgUtilService', 'TopoEventService', 'TopoForceService', 'TopoPanelService', - 'TopoInstService', + 'TopoInstService', 'TopoSelectService', function ($scope, _$log_, $loc, $timeout, _fs_, mast, - _ks_, _zs_, _gs_, _ms_, _sus_, _tes_, _tfs_, _tps_, _tis_) { + _ks_, _zs_, _gs_, _ms_, _sus_, + _tes_, _tfs_, _tps_, _tis_, _tss_) { var self = this, projection, dim, @@ -244,6 +238,7 @@ tfs = _tfs_; tps = _tps_; tis = _tis_; + tss = _tss_; self.notifyResize = function () { svgResized(fs.windowSize(mast.mastHeight())); @@ -279,7 +274,7 @@ forceG = zoomLayer.append('g').attr('id', 'topo-force'); tfs.initForce(forceG, uplink, dim); tis.initInst(); - tps.initPanels(); + tps.initPanels({ sendEvent: tes.sendEvent }); tes.openSock(); $log.log('OvTopoCtrl has been created'); 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 031ab53630..d3b50bd280 100644 --- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js +++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js @@ -23,7 +23,12 @@ 'use strict'; // injected refs - var $log, ps, gs; + var $log, fs, ps, gs; + + var api; + /* + sendEvent( event, {payload} ) + */ // constants var pCls = 'topo-p', @@ -137,39 +142,83 @@ showSummaryPanel(); } + function toggleSummary() { + if (summaryPanel.isVisible()) { + api.sendEvent("cancelSummary"); + hideSummaryPanel(); + } else { + api.sendEvent('requestSummary'); + } + } // === ----------------------------------------------------- // === LOGIC For showing/hiding summary and detail panels... function showSummaryPanel() { - summaryPanel.show(); - // TODO: augment, for details panel move + if (detailPanel.isVisible()) { + detailPanel.down(summaryPanel.show); + } else { + summaryPanel.show(); + } } function hideSummaryPanel() { - summaryPanel.hide(); - // TODO: augment, for details panel move + summaryPanel.hide(function () { + if (detailPanel.isVisible()) { + detailPanel.up(); + } + }); } function showDetailPanel() { - // TODO: augment with summary-accomodation-logic - detailPanel.show(); + if (summaryPanel.isVisible()) { + detailPanel.down(detailPanel.show); + } else { + detailPanel.up(detailPanel.show); + } } function hideDetailPanel() { detailPanel.hide(); } + // ========================== + function noop () {} + + function augmentDetailPanel() { + var dp = detailPanel; + dp.ypos = { up: 64, down: 320, current: 320}; + + dp._move = function (y, cb) { + var endCb = fs.isF(cb) || noop, + yp = dp.ypos; + if (yp.current !== y) { + yp.current = y; + dp.el().transition().duration(300) + .each('end', endCb) + .style('top', yp.current + 'px'); + } else { + endCb(); + } + }; + + dp.down = function (cb) { dp._move(dp.ypos.down, cb); }; + dp.up = function (cb) { dp._move(dp.ypos.up, cb); }; + } // ========================== - function initPanels() { + function initPanels(_api_) { + api = _api_; + summaryPanel = ps.createPanel(idSum, panelOpts); detailPanel = ps.createPanel(idDet, panelOpts); summaryPanel.classed(pCls, true); detailPanel.classed(pCls, true); + + augmentDetailPanel(); } function destroyPanels() { @@ -182,10 +231,11 @@ angular.module('ovTopo') .factory('TopoPanelService', - ['$log', 'PanelService', 'GlyphService', + ['$log', 'FnService', 'PanelService', 'GlyphService', - function (_$log_, _ps_, _gs_) { + function (_$log_, _fs_, _ps_, _gs_) { $log = _$log_; + fs = _fs_; ps = _ps_; gs = _gs_; @@ -194,6 +244,7 @@ destroyPanels: destroyPanels, showSummary: showSummary, + toggleSummary: toggleSummary, displaySingle: displaySingle, displayMulti: displayMulti, diff --git a/web/gui/src/main/webapp/app/view/topo/topoSelect.js b/web/gui/src/main/webapp/app/view/topo/topoSelect.js index b7790f2410..fb6c2f8efb 100644 --- a/web/gui/src/main/webapp/app/view/topo/topoSelect.js +++ b/web/gui/src/main/webapp/app/view/topo/topoSelect.js @@ -23,7 +23,7 @@ 'use strict'; // injected refs - var $log, fs, tps; + var $log, fs, flash, tps; // api to topoForce var api; @@ -229,6 +229,19 @@ } } + function toggleDetails() { + useDetails = !useDetails; + if (useDetails) { + flash.flash('Enable details panel'); + if (haveDetails) { + tps.showDetailPanel(); + } + } else { + flash.flash('Disable details panel'); + tps.hideDetailPanel(); + } + } + // === ----------------------------------------------------- // TODO: migrate these to topoTraffic.js @@ -263,31 +276,33 @@ angular.module('ovTopo') .factory('TopoSelectService', - ['$log', 'FnService', 'TopoPanelService', + ['$log', 'FnService', 'FlashService', 'TopoPanelService', - function (_$log_, _fs_, _tps_) { - $log = _$log_; - fs = _fs_; - tps = _tps_; + function (_$log_, _fs_, _flash_, _tps_) { + $log = _$log_; + fs = _fs_; + flash = _flash_; + tps = _tps_; - function initSelect(_api_) { - api = _api_; - } + function initSelect(_api_) { + api = _api_; + } - function destroySelect() { } + function destroySelect() { } - return { - initSelect: initSelect, - destroySelect: destroySelect, + return { + initSelect: initSelect, + destroySelect: destroySelect, - showDetails: showDetails, + showDetails: showDetails, + toggleDetails: toggleDetails, - nodeMouseOver: nodeMouseOver, - nodeMouseOut: nodeMouseOut, - selectObject: selectObject, - deselectObject: deselectObject, - deselectAll: deselectAll, - hovered: function () { return hovered; } - }; - }]); + nodeMouseOver: nodeMouseOver, + nodeMouseOut: nodeMouseOut, + selectObject: selectObject, + deselectObject: deselectObject, + deselectAll: deselectAll, + hovered: function () { return hovered; } + }; + }]); }()); diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js index 7f93eb7bf7..f51d029ffa 100644 --- a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js +++ b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js @@ -37,6 +37,7 @@ describe('factory: view/topo/topoPanel.js', function() { 'initPanels', 'destroyPanels', 'showSummary', + 'toggleSummary', 'displaySingle', 'displayMulti', 'addAction', diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js index f8bc0e79df..9e6c2fb010 100644 --- a/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js +++ b/web/gui/src/main/webapp/tests/app/view/topo/topoSelect-spec.js @@ -34,7 +34,7 @@ describe('factory: view/topo/topoSelect.js', function() { it('should define api functions', function () { expect(fs.areFunctions(tss, [ - 'initSelect', 'destroySelect', 'showDetails', + 'initSelect', 'destroySelect', 'showDetails', 'toggleDetails', 'nodeMouseOver', 'nodeMouseOut', 'selectObject', 'deselectObject', 'deselectAll', 'hovered' ])).toBeTruthy();