mirror of
https://github.com/opennetworkinglab/onos.git
synced 2025-10-20 20:02:17 +02:00
GUI -- TopoView - Fixed dynamic repositioning of Details Panel.
- also implemented toggleDetails keystroke 'D'. Change-Id: I99a9ee1235c8cc1174d8c2d542e6e40b7fb6b8dc
This commit is contained in:
Simon Hunt
parent
79f515f50a
commit
6036b19bfb
@ -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');
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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; }
|
||||
};
|
||||
}]);
|
||||
}());
|
||||
|
||||
@ -37,6 +37,7 @@ describe('factory: view/topo/topoPanel.js', function() {
|
||||
'initPanels',
|
||||
'destroyPanels',
|
||||
'showSummary',
|
||||
'toggleSummary',
|
||||
'displaySingle',
|
||||
'displayMulti',
|
||||
'addAction',
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user