ONOS-4971: Synthetic Link Data -- WIP, merge anyway
- created temp Topology2 View (topoX) to "process" and display topology data.
- made root layout parent of itself (just like /.. = /) to simplify layout hierarchy operations.
- added nodeType property to JSON rep of regions/devices/hosts.
- augmented peers to include devices.
- added skeleton topo2NavRegion event.
Change-Id: I8219125d7dfe33d211350ae27111a3d9de6eb4ca
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 7f878a5..6ec4f02 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -25,3 +25,28 @@
/* prevents the little cut/copy/paste square that would appear on iPad */
-webkit-user-select: none;
}
+
+/* -- TEMPORARY CSS (to be deleted) -- */
+#topo2tmp div {
+ padding: 8px 24px;
+ margin: 8px;
+ background-color: #ddddff;
+}
+#topo2tmp div div {
+ padding: 4px 10px;
+}
+
+#topo2tmp h4 {
+ margin: 0
+}
+#topo2tmp p {
+ margin: 0
+}
+#topo2tmp .nav-me:hover {
+ background-color: #bbbbdd;
+}
+#topo2tmp .nav-me {
+ font-weight: bold;
+ text-decoration: underline;
+ cursor: pointer;
+}
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.html b/web/gui/src/main/webapp/app/view/topo2/topo2.html
index 9b987a6..1f0c6d6 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.html
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.html
@@ -1,5 +1,36 @@
<!-- Topology View partial HTML -->
<div id="ov-topo2">
+ <div id="topo2tmp">
+ <div class="parentRegion">
+ Parent Region: <span> - </span>
+ </div>
+ <div class="thisRegion">
+ This Region: <span> - </span>
+ </div>
+ <div class="subRegions">
+ <h4>Subregions</h4>
+ <div></div>
+ </div>
+ <div class="devices">
+ <h4>Devices</h4>
+ <div></div>
+ </div>
+ <div class="hosts">
+ <h4>Hosts</h4>
+ <div></div>
+ </div>
+ <div class="links">
+ <h4>Links</h4>
+ <div></div>
+ </div>
+ <div class="peers">
+ <h4>Peers</h4>
+ <div></div>
+ </div>
+ </div>
+
+ <!-- Below here is good; Above here is temporary, for debugging -->
+
<svg viewBox="0 0 1000 1000"
resize offset-height="56" offset-width="12"
notifier="notifyResize()">
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Event.js b/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
index 83dcae2..2d13a5c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
@@ -42,6 +42,7 @@
topo2AllInstances: t2fs,
topo2CurrentLayout: t2fs,
topo2CurrentRegion: t2fs,
+ topo2PeerRegions: t2fs,
topo2StartDone: t2fs
// Add further event names / module references as needed
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
index db6a1c2..254f176 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -35,10 +35,79 @@
$log.debug('Destroy topo force layout');
}
+ // ========================== Temporary Code (to be deleted later)
+
+ function request(dir, rid) {
+ wss.sendEvent('topo2navRegion', {
+ dir: dir,
+ rid: rid
+ });
+ }
+
+ function doTmpCurrentLayout(data) {
+ var topdiv = d3.select('#topo2tmp');
+ var parentRegion = data.parent;
+ var span = topdiv.select('.parentRegion').select('span');
+ span.text(parentRegion || '[no parent]');
+ span.classed('nav-me', !!parentRegion);
+ }
+
+ function doTmpCurrentRegion(data) {
+ var topdiv = d3.select('#topo2tmp');
+ var span = topdiv.select('.thisRegion').select('span');
+ var div;
+
+ span.text(data.id);
+
+ div = topdiv.select('.subRegions').select('div');
+ data.subregions.forEach(function (r) {
+
+ function nav() {
+ request('down', r.id);
+ }
+
+ div.append('p')
+ .classed('nav-me', true)
+ .text(r.id)
+ .on('click', nav);
+ });
+
+ div = topdiv.select('.devices').select('div');
+ data.layerOrder.forEach(function (tag, idx) {
+ var devs = data.devices[idx];
+ devs.forEach(function (d) {
+ div.append('p')
+ .text('[' + tag + '] ' + d.id);
+ });
+
+ });
+
+ div = topdiv.select('.hosts').select('div');
+ data.layerOrder.forEach(function (tag, idx) {
+ var hosts = data.hosts[idx];
+ hosts.forEach(function (h) {
+ div.append('p')
+ .text('[' + tag + '] ' + h.id);
+ });
+ });
+
+ div = topdiv.select('.links').select('div');
+ var links = data.links;
+ links.forEach(function (lnk) {
+ div.append('p')
+ .text(lnk.id);
+ });
+ }
+
+ function doTmpPeerRegions(data) {
+
+ }
+
// ========================== Event Handlers
function allInstances(data) {
$log.debug('>> topo2AllInstances event:', data)
+ doTmpCurrentLayout(data);
}
function currentLayout(data) {
@@ -47,6 +116,16 @@
function currentRegion(data) {
$log.debug('>> topo2CurrentRegion event:', data)
+ doTmpCurrentRegion(data);
+ }
+
+ function topo2PeerRegions(data) {
+ $log.debug('>> topo2PeerRegions event:', data)
+ doTmpPeerRegions(data);
+ }
+
+ function topo2PeerRegions(data) {
+ $log.debug('>> topo2PeerRegions event:', data)
}
function startDone(data) {
@@ -69,6 +148,7 @@
topo2AllInstances: allInstances,
topo2CurrentLayout: currentLayout,
topo2CurrentRegion: currentRegion,
+ topo2PeerRegions: topo2PeerRegions,
topo2StartDone: startDone
};
}]);