Adding ability to select geo map from the GUI.
Change-Id: I956238500f868ef59bf947cb9f0aa7fc71d3fe84
diff --git a/web/gui/src/main/webapp/app/fw/svg/map.js b/web/gui/src/main/webapp/app/fw/svg/map.js
index a74f95d..aadb693 100644
--- a/web/gui/src/main/webapp/app/fw/svg/map.js
+++ b/web/gui/src/main/webapp/app/fw/svg/map.js
@@ -118,20 +118,21 @@
function reshade(sh) {
var p = sh && sh.palette,
- svg, paths, stroke, fill, bg;
+ paths, stroke, fill, bg,
+ svg = d3.select('#ov-topo').select('svg');
if (sh) {
stroke = p.outline;
fill = sh.flip ? p.sea : p.land;
bg = sh.flip ? p.land : p.sea;
- svg = d3.select('#ov-topo').select('svg');
paths = d3.select('#topo-map').selectAll('path');
-
svg.style('background-color', bg);
paths.attr({
stroke: stroke,
fill: fill
});
+ } else {
+ svg.style('background-color', null);
}
}
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index ceb0e4b..c2b81f3 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -771,3 +771,11 @@
visibility: hidden;
}
+.map-list {
+ padding: 10px;
+}
+
+.map-list select {
+ font-size: 20px;
+}
+
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 b6c83ce..7de4cd1 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -29,8 +29,8 @@
];
// references to injected services
- var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps, th,
- tds, t3s, tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, tspr,
+ var $scope, $log, $cookies, $loc, fs, ks, zs, gs, ms, sus, flash, wss, ps, th,
+ tds, t3s, tes, tfs, tps, tis, tms, tss, tls, tts, tos, fltr, ttbs, tspr,
ttip, tov;
// DOM elements
@@ -53,7 +53,8 @@
M: [toggleOffline, 'Toggle offline visibility'],
P: [togglePorts, 'Toggle Port Highlighting'],
dash: [tfs.showBadLinks, 'Show bad links'],
- B: [toggleMap, 'Toggle background map'],
+ B: [toggleMap, 'Toggle background geo map'],
+ G: [openMapSelection, 'Select background geo map'],
S: [toggleSprites, 'Toggle sprite layer'],
X: [tfs.resetAllLocations, 'Reset node locations'],
@@ -78,7 +79,7 @@
_keyListener: ttbs.keyListener,
_helpFormat: [
- ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B', 'S' ],
+ ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B', 'G', 'S' ],
['X', 'Z', 'N', 'L', 'U', 'R', '-', 'E', '-', 'dot'],
[] // this column reserved for overlay actions
]
@@ -157,6 +158,10 @@
_togSvgLayer(x, mapG, 'bg', 'background map');
}
+ function openMapSelection() {
+ tms.openMapSelection();
+ }
+
function toggleSprites(x) {
_togSvgLayer(x, spriteG, 'spr', 'sprite layer');
}
@@ -368,12 +373,22 @@
} : '';
}
+ function setMap(map) {
+ ps.setPrefs('topo_mapid', map);
+ setUpMap($loc);
+ opacifyMap(true);
+ }
+
+ function currentMap() {
+ return ps.getPrefs(
+ 'topo_mapid',
+ { mapid: 'usa', mapscale: 1, tint: 'off'},
+ $loc.search()
+ );
+ }
+
function setUpMap($loc) {
- var prefs = ps.getPrefs(
- 'topo_mapid',
- { mapid: 'usa', mapscale: 1, tint: 'off'},
- $loc.search()
- ),
+ var prefs = currentMap(),
mapId = prefs.mapid,
mapScale = prefs.mapscale,
tint = prefs.tint,
@@ -385,7 +400,14 @@
$log.debug('setUpMap() mapId:', mapId, ', mapScale:', mapScale,
', tint:', tint);
- mapG = zoomLayer.append('g').attr('id', 'topo-map');
+ mapG = d3.select('#topo-map');
+ if (mapG.empty()) {
+ mapG = zoomLayer.append('g').attr('id', 'topo-map');
+ } else {
+ mapG.each(function(d,i) {
+ d3.selectAll(this.childNodes).remove();
+ });
+ }
if (mapId === 'usa') {
shadeFlip = 0;
promise = ms.loadMapInto(mapG, '*continental_us', {
@@ -508,15 +530,15 @@
'TopoEventService', 'TopoForceService', 'TopoPanelService',
'TopoInstService', 'TopoSelectService', 'TopoLinkService',
'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
- 'TopoToolbarService', 'TopoSpriteService', 'TooltipService',
- 'TopoOverlayService',
+ 'TopoToolbarService', 'TopoMapService', 'TopoSpriteService',
+ 'TooltipService', 'TopoOverlayService',
- function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
+ function (_$scope_, _$log_, _$loc_, $timeout, _$cookies_, _fs_, mast, _ks_,
_zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _th_,
_tds_, _t3s_, _tes_,
_tfs_, _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_,
- _ttbs_, _tspr_, _ttip_, _tov_) {
- var params = $loc.search(),
+ _ttbs_, _tms_, _tspr_, _ttip_, _tov_) {
+ var params = _$loc_.search(),
projection,
dim,
uplink = {
@@ -531,6 +553,7 @@
$scope = _$scope_;
$log = _$log_;
+ $loc = _$loc_;
$cookies = _$cookies_;
fs = _fs_;
ks = _ks_;
@@ -551,6 +574,7 @@
// just so we can invoke functions on them.
tps = _tps_;
tis = _tis_;
+ tms = _tms_;
tss = _tss_;
tls = _tls_;
tts = _tts_;
@@ -561,6 +585,12 @@
ttip = _ttip_;
tov = _tov_;
+ tms.start({
+ toggleMap: toggleMap,
+ currentMap: currentMap,
+ setMap: setMap
+ });
+
if (params.intentKey && params.intentAppId && params.intentAppName) {
$scope.intentData = {
key: params.intentKey,
@@ -577,6 +607,7 @@
$scope.$on('$destroy', function () {
$log.log('OvTopoCtrl is saying Buh-Bye!');
tes.stop();
+ tms.stop();
ks.unbindKeys();
tps.destroyPanels();
tds.closeDialog();
diff --git a/web/gui/src/main/webapp/app/view/topo/topoMap.js b/web/gui/src/main/webapp/app/view/topo/topoMap.js
new file mode 100644
index 0000000..407d394
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo/topoMap.js
@@ -0,0 +1,155 @@
+/*
+ * Copyright 2016 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Topology Map Module.
+ Defines behavior for loading geographical maps into the map layer.
+ */
+
+(function () {
+ 'use strict';
+
+ // injected refs
+ var $log, $loc, fs, flash, wss, tds, delegate;
+
+ // constants
+ var mapRequest = 'mapSelectorRequest';
+
+ // internal state
+ var order, maps, map, mapItems, tintCheck, msgHandlers;
+
+ // === ---------------------------
+ // === Helper functions
+
+
+ // === ---------------------------
+ // === Main API functions
+
+ function openMapSelection() {
+ wss.sendEvent(mapRequest);
+ }
+
+ function closeMapSelection() {
+ tds.closeDialog();
+ }
+
+ function start(d) {
+ delegate = d;
+ wss.bindHandlers(msgHandlers);
+ }
+
+ function stop() {
+ wss.unbindHandlers(msgHandlers);
+ }
+
+ function dOk() {
+ var p = {
+ mapid: map.id,
+ mapscale: map.scale,
+ tint: tintCheck.property('checked') ? 'on' : 'off'
+ };
+ setMap(p);
+ $log.debug('Dialog OK button clicked');
+ }
+
+ function dClose() {
+ $log.debug('Dialog Close button clicked (or Esc pressed)');
+ }
+
+ function selectMap() {
+ map = maps[this.options[this.selectedIndex].value];
+ $log.info('Selected map', map);
+ }
+
+ function createListContent() {
+ var content = tds.createDiv('map-list'),
+ form = content.append('form'),
+ current = currentMap();
+ map = maps[current.mapid];
+ mapItems = form.append('select').on('change', selectMap);
+ order.forEach(function (id) {
+ var m = maps[id];
+ mapItems.append('option')
+ .attr('value', m.id)
+ .attr('selected', m.id === current.mapid ? true : null)
+ .text(m.description);
+ });
+ var p = form.append('p');
+ tintCheck = p.append('input').attr('type', 'checkbox').attr('name', 'tint');
+ if (current.tint == 'on') {
+ tintCheck.attr('checked', 'true');
+ }
+ p.append('span').text('Enable map tint');
+ return content;
+ }
+
+ function handleMapResponse(data) {
+ $log.info('Got response', data);
+ order = data.order;
+ maps = data.maps;
+ tds.openDialog()
+ .setTitle('Select Map')
+ .addContent(createListContent())
+ .addOk(dOk, 'OK')
+ .addCancel(dClose, 'Close')
+ .bindKeys();
+ }
+
+ function toggleMap() {
+ delegate.toggleMap();
+ }
+
+ function currentMap() {
+ return delegate.currentMap();
+ }
+
+ function setMap(map) {
+ delegate.setMap(map);
+ }
+
+ // === -----------------------------------------------------
+ // === MODULE DEFINITION ===
+
+ angular.module('ovTopo')
+ .factory('TopoMapService',
+ ['$log', '$location', 'FnService', 'FlashService', 'WebSocketService',
+ 'TopoDialogService',
+
+ function (_$log_, _$loc_, _fs_, _flash_, _wss_, _tds_) {
+ $log = _$log_;
+ $loc = _$loc_;
+ fs = _fs_;
+ flash = _flash_;
+ wss = _wss_;
+ tds = _tds_;
+
+ msgHandlers = {
+ mapSelectorResponse: handleMapResponse
+ };
+
+ return {
+ toggleMap: toggleMap,
+ currentMap: currentMap,
+ setMap: setMap,
+
+ openMapSelection: openMapSelection,
+ closeMapSelection: closeMapSelection,
+ start: start,
+ stop: stop
+ };
+ }]);
+
+}());
diff --git a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
index 535cd17..f2ea324 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
@@ -49,6 +49,7 @@
M: { id: 'offline-tog', gid: 'switch', isel: true },
P: { id: 'ports-tog', gid: 'ports', isel: true },
B: { id: 'bkgrnd-tog', gid: 'map', isel: false },
+ G: { id: 'bkgrnd-sel', gid: 'filters' },
S: { id: 'sprite-tog', gid: 'cloud', isel: false },
// TODO: add reset-node-locations button to toolbar
@@ -151,6 +152,7 @@
addToggle('M');
addToggle('P', true);
addToggle('B');
+ addButton('G');
addToggle('S', true);
}
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 1a645ad..52f6c2b 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -122,6 +122,7 @@
<script src="app/view/topo/topoOverlay.js"></script>
<script src="app/view/topo/topoPanel.js"></script>
<script src="app/view/topo/topoSelect.js"></script>
+ <script src="app/view/topo/topoMap.js"></script>
<script src="app/view/topo/topoSprite.js"></script>
<script src="app/view/topo/topoTraffic.js"></script>
<script src="app/view/topo/topoTrafficNew.js"></script>