Topo2 - Show 'No Devices Connected' message
JIRA Tasks; ONOS-6290
Change-Id: Ibe70452da14c0c2ebb01d3ece7328f1b7936c625
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.css b/web/gui/src/main/webapp/app/view/topo2/topo2.css
index 81c14d5..b4ffd80 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -32,6 +32,16 @@
}
+/* --- "No Devices" Layer --- */
+
+#ov-topo2 svg #topo2-noDevsLayer {
+ visibility: hidden;
+}
+
+#ov-topo2 svg #topo2-noDevsLayer text {
+ font-size: 60pt;
+ font-style: italic;
+}
#breadcrumbs {
font-size: 13px;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index fc7d9ae..2913953 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -108,6 +108,7 @@
'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService',
'Topo2MapConfigService', 'Topo2ZoomService', 'Topo2SpriteLayerService',
'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel', 'Topo2ToolbarService',
+ 'Topo2NoDevicesConnectedService',
function (
_$scope_, _$log_, _$loc_,
@@ -117,7 +118,7 @@
_t2es_, _t2fs_, _t2is_,
_t2bcs_, _t2kcs_, _t2ms_,
_t2mcs_, _t2zs_, t2sls,
- summaryPanel, detailsPanel, t2tbs
+ summaryPanel, detailsPanel, t2tbs, t2ndcs
) {
var params = _$loc_.search(),
dim,
@@ -195,6 +196,8 @@
setUpZoom();
setUpDefs();
+ t2ndcs.init();
+
// make sure we can respond to topology events from the server
t2es.bindHandlers();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js b/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js
new file mode 100644
index 0000000..d0c08d3
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NoDevicesConnected.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2017-present 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 No Connected Devices View.
+ View that contains the 'No Connected Devices' message
+ */
+
+(function () {
+
+ var instance;
+
+ angular.module('ovTopo2')
+ .factory('Topo2NoDevicesConnectedService', [
+ '$log', 'Topo2ViewController', 'GlyphService', 'SvgUtilService',
+ function ($log, ViewController, gs, sus) {
+
+ var NoDevicesConnected = ViewController.extend({
+ id: 'topo2-noDevsLayer',
+ displayName: 'No Devices Connected',
+
+ init: function () {
+ instance = this;
+ this.appendElement('#topo2', 'g')
+ .attr({
+ transform: sus.translate(500, 500)
+ });
+
+ this.render();
+ this.show();
+ },
+
+ render: function () {
+ var g, box;
+
+ g = this.node().append('g');
+ gs.addGlyph(g, 'bird', 100).attr('class', 'noDevsBird');
+ g.append('text').text('No devices are connected')
+ .attr({ x: 120, y: 80});
+
+ box = g.node().getBBox();
+ box.x -= box.width/2;
+ box.y -= box.height/2;
+ g.attr('transform', sus.translate(box.x, box.y));
+ }
+ });
+
+ return instance || new NoDevicesConnected();
+ }
+ ]);
+})();
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index 7e5c37c..9e5b9e9 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -36,9 +36,9 @@
'$log', 'Topo2Model', 'Topo2SubRegionService', 'Topo2DeviceService',
'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
'Topo2BreadcrumbService', 'Topo2ViewController', 'Topo2SpriteLayerService', 'Topo2MapService',
- 'Topo2MapConfigService', 'Topo2PeerRegionService',
+ 'Topo2MapConfigService', 'Topo2PeerRegionService', 'Topo2NoDevicesConnectedService',
function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController,
- t2sls, t2ms, t2mcs, t2pr) {
+ t2sls, t2ms, t2mcs, t2pr, t2ndcs) {
Model = _Model_;
@@ -78,8 +78,6 @@
},
startRegion: function () {
- var _this = this;
-
this.model.set({
id: this.regionData.id,
layerOrder: this.regionData.layerOrder
@@ -97,6 +95,7 @@
}
this.layout.createForceLayout();
+ this.displayNoDevs();
},
clear: function () {
this.regionData = null;
@@ -198,6 +197,14 @@
}
this.layout.update()
+ this.displayNoDevs();
+ },
+ displayNoDevs: function () {
+ if (this.regionNodes().length > 0) {
+ t2ndcs.hide();
+ } else {
+ t2ndcs.show();
+ }
},
// Topology update event handlers
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 031dedb..342f25d 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -156,6 +156,7 @@
<script src="app/view/topo2/topo2Model.js"></script>
<script src="app/view/topo2/topo2NodeModel.js"></script>
<script src="app/view/topo2/topo2NodePosition.js"></script>
+ <script src="app/view/topo2/topo2NoDevicesConnected.js"></script>
<script src="app/view/topo2/topo2Panel.js"></script>
<script src="app/view/topo2/topo2PeerRegion.js"></script>
<script src="app/view/topo2/topo2Prefs.js"></script>