홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
377f5d29 1 parent 4b9958b6

Implement navigate-to-region (topo2navRegion) event; update scaffolding view (topoX) to exercise. 

Change-Id: Ib342f791854664b31bd1724a446008c960231784
Inline Side-by-side
Showing 5 changed files with 163 additions and 51 deletions
...@@ -94,6 +94,26 @@ public class Topo2ViewMessageHandler extends UiMessageHandler { ...@@ -94,6 +94,26 @@ public class Topo2ViewMessageHandler extends UiMessageHandler {
94 // ================================================================== 94 // ==================================================================
95 95
96 96
97 + private ObjectNode mkLayoutMessage(UiTopoLayout currentLayout) {
98 + List<UiTopoLayout> crumbs = topoSession.breadCrumbs();
99 + return t2json.layout(currentLayout, crumbs);
100 + }
101 +
102 + private ObjectNode mkRegionMessage(UiTopoLayout currentLayout) {
103 + UiRegion region = topoSession.getRegion(currentLayout);
104 + Set<UiRegion> kids = topoSession.getSubRegions(currentLayout);
105 + List<UiSynthLink> links = topoSession.getLinks(currentLayout);
106 + return t2json.region(region, kids, links);
107 + }
108 +
109 + private ObjectNode mkPeersMessage(UiTopoLayout currentLayout) {
110 + Set<UiNode> peers = topoSession.getPeerNodes(currentLayout);
111 + ObjectNode peersPayload = objectNode();
112 + peersPayload.set("peers", t2json.closedNodes(peers));
113 + return peersPayload;
114 + }
115 +
116 +
97 private final class Topo2Start extends RequestHandler { 117 private final class Topo2Start extends RequestHandler {
98 private Topo2Start() { 118 private Topo2Start() {
99 super(START); 119 super(START);
...@@ -112,34 +132,26 @@ public class Topo2ViewMessageHandler extends UiMessageHandler { ...@@ -112,34 +132,26 @@ public class Topo2ViewMessageHandler extends UiMessageHandler {
112 // correctly 132 // correctly
113 topoSession.refreshModel(); 133 topoSession.refreshModel();
114 134
115 - // this is the list of ONOS cluster members 135 + // start with the list of ONOS cluster members
116 List<UiClusterMember> instances = topoSession.getAllInstances(); 136 List<UiClusterMember> instances = topoSession.getAllInstances();
117 sendMessage(ALL_INSTANCES, t2json.instances(instances)); 137 sendMessage(ALL_INSTANCES, t2json.instances(instances));
118 138
139 +
140 + // Send layout, region, peers data...
141 +
119 // this is the layout that the user has chosen to display 142 // this is the layout that the user has chosen to display
120 UiTopoLayout currentLayout = topoSession.currentLayout(); 143 UiTopoLayout currentLayout = topoSession.currentLayout();
121 - List<UiTopoLayout> crumbs = topoSession.breadCrumbs(); 144 + sendMessage(CURRENT_LAYOUT, mkLayoutMessage(currentLayout));
122 - sendMessage(CURRENT_LAYOUT, t2json.layout(currentLayout, crumbs));
123 145
124 // this is the region that is associated with the current layout 146 // this is the region that is associated with the current layout
125 // this message includes details of the sub-regions, devices, 147 // this message includes details of the sub-regions, devices,
126 // hosts, and links within the region 148 // hosts, and links within the region
127 // (as well as layer-order hints) 149 // (as well as layer-order hints)
128 - UiRegion region = topoSession.getRegion(currentLayout); 150 + sendMessage(CURRENT_REGION, mkRegionMessage(currentLayout));
129 - Set<UiRegion> kids = topoSession.getSubRegions(currentLayout);
130 - List<UiSynthLink> links = topoSession.getLinks(currentLayout);
131 - sendMessage(CURRENT_REGION, t2json.region(region, kids, links));
132 151
133 // these are the regions/devices that are siblings to this region 152 // these are the regions/devices that are siblings to this region
134 - Set<UiNode> peers = topoSession.getPeerNodes(currentLayout); 153 + sendMessage(PEER_REGIONS, mkPeersMessage(currentLayout));
135 - ObjectNode peersPayload = objectNode();
136 - peersPayload.set("peers", t2json.closedNodes(peers));
137 - sendMessage(PEER_REGIONS, peersPayload);
138 -
139 - // finally, tell the UI that we are done : TODO review / delete??
140 - sendMessage(TOPO_START_DONE, null);
141 } 154 }
142 -
143 } 155 }
144 156
145 private final class Topo2NavRegion extends RequestHandler { 157 private final class Topo2NavRegion extends RequestHandler {
...@@ -149,9 +161,19 @@ public class Topo2ViewMessageHandler extends UiMessageHandler { ...@@ -149,9 +161,19 @@ public class Topo2ViewMessageHandler extends UiMessageHandler {
149 161
150 @Override 162 @Override
151 public void process(long sid, ObjectNode payload) { 163 public void process(long sid, ObjectNode payload) {
152 - String dir = string(payload, "dir");
153 String rid = string(payload, "rid"); 164 String rid = string(payload, "rid");
154 - log.debug("NavRegion: dir={}, rid={}", dir, rid); 165 + log.debug("topo2navRegion: rid={}", rid);
166 +
167 + // NOTE: we are NOT re-issuing information about the cluster nodes
168 +
169 + // switch to the selected region...
170 + topoSession.navToRegion(rid);
171 +
172 + // re-send layout, region, peers data...
173 + UiTopoLayout currentLayout = topoSession.currentLayout();
174 + sendMessage(CURRENT_LAYOUT, mkLayoutMessage(currentLayout));
175 + sendMessage(CURRENT_REGION, mkRegionMessage(currentLayout));
176 + sendMessage(PEER_REGIONS, mkPeersMessage(currentLayout));
155 } 177 }
156 } 178 }
157 179
......
...@@ -250,4 +250,18 @@ public class UiTopoSession implements UiModelListener { ...@@ -250,4 +250,18 @@ public class UiTopoSession implements UiModelListener {
250 public void refreshModel() { 250 public void refreshModel() {
251 sharedModel.refresh(); 251 sharedModel.refresh();
252 } 252 }
253 +
254 + /**
255 + * Navigates to the specified region by setting the associated layout as
256 + * current.
257 + *
258 + * @param regionId region identifier
259 + */
260 + public void navToRegion(String regionId) {
261 + // 1. find the layout corresponding to the region ID
262 + // 2. set this layout to be "current"
263 + RegionId r = RegionId.regionId(regionId);
264 + UiTopoLayout layout = layoutService.getLayout(r);
265 + setCurrentLayout(layout);
266 + }
253 } 267 }
......
...@@ -27,18 +27,23 @@ ...@@ -27,18 +27,23 @@
27 } 27 }
28 28
29 #topoXtmp { 29 #topoXtmp {
30 - height: 600px; 30 + height: 700px;
31 width: 98%; 31 width: 98%;
32 overflow-y: scroll; 32 overflow-y: scroll;
33 } 33 }
34 34
35 #topoXtmp div { 35 #topoXtmp div {
36 - padding: 8px 24px; 36 + padding: 2px 24px;
37 - margin: 8px; 37 + margin: 6px;
38 background-color: #ddddff; 38 background-color: #ddddff;
39 } 39 }
40 #topoXtmp div div { 40 #topoXtmp div div {
41 - padding: 4px 10px; 41 + padding: 0 10px;
42 +}
43 +#topoXtmp div div span {
44 + color: purple;
45 + font-style: italic;
46 + font-weight: bold;
42 } 47 }
43 48
44 #topoXtmp h4 { 49 #topoXtmp h4 {
...@@ -54,4 +59,9 @@ ...@@ -54,4 +59,9 @@
54 font-weight: bold; 59 font-weight: bold;
55 text-decoration: underline; 60 text-decoration: underline;
56 cursor: pointer; 61 cursor: pointer;
62 + color: blue;
63 +}
64 +
65 +.subRegions div p {
66 + width: 40px;
57 } 67 }
......
...@@ -17,11 +17,33 @@ ...@@ -17,11 +17,33 @@
17 <!-- Topology View partial HTML --> 17 <!-- Topology View partial HTML -->
18 <div id="ov-topoX"> 18 <div id="ov-topoX">
19 <div id="topoXtmp"> 19 <div id="topoXtmp">
20 - <div class="parentRegion"> 20 + <div class="instances">
21 - Parent Region: <span> - </span> 21 + <h4>Instances</h4>
22 + <div></div>
23 + </div>
24 + <div class="layoutData">
25 +
26 + <h4>Layout Data</h4>
27 +
28 + <div class="l_id">
29 + Layout ID: <span> - </span>
30 + </div>
31 + <div class="l_parent">
32 + Layout Parent: <span> - </span>
33 + </div>
34 + <div class="l_region">
35 + Region ID: <span> - </span>
36 + </div>
37 + <div class="l_regionName">
38 + Region Name: <span> - </span>
39 + </div>
40 + <div class="l_crumbs">
41 + Breadcrumbs: <span> </span>
42 + </div>
43 +
22 </div> 44 </div>
23 <div class="thisRegion"> 45 <div class="thisRegion">
24 - This Region: <span> - </span> 46 + <b>This Region ID:</b> <span></span>
25 </div> 47 </div>
26 <div class="subRegions"> 48 <div class="subRegions">
27 <h4>Subregions</h4> 49 <h4>Subregions</h4>
......
...@@ -25,9 +25,13 @@ ...@@ -25,9 +25,13 @@
25 // injected refs 25 // injected refs
26 var $log, wss; 26 var $log, wss;
27 27
28 + // selected DOM refs
29 + var topdiv;
30 +
28 // ========================== Helper Functions 31 // ========================== Helper Functions
29 32
30 function init() { 33 function init() {
34 + topdiv = d3.select('#topoXtmp');
31 $log.debug('Initialize topo force layout'); 35 $log.debug('Initialize topo force layout');
32 } 36 }
33 37
...@@ -35,44 +39,82 @@ ...@@ -35,44 +39,82 @@
35 $log.debug('Destroy topo force layout'); 39 $log.debug('Destroy topo force layout');
36 } 40 }
37 41
38 - // ========================== Temporary Code (to be deleted later) 42 + function rmP(div) {
43 + div.selectAll('p').remove();
44 + }
39 45
40 - function request(dir, rid) { 46 + function navRequest(rid) {
41 wss.sendEvent('topo2navRegion', { 47 wss.sendEvent('topo2navRegion', {
42 - dir: dir,
43 rid: rid 48 rid: rid
44 }); 49 });
45 } 50 }
46 51
52 + function doTmpInstances(data) {
53 + var idiv = topdiv.select('.instances').select('div');
54 + data.members.forEach(function (m) {
55 + idiv.append('div').text(m.id);
56 + });
57 + }
58 +
47 function doTmpCurrentLayout(data) { 59 function doTmpCurrentLayout(data) {
48 - var topdiv = d3.select('#topoXtmp'); 60 + var ldDiv = topdiv.select('.layoutData'),
49 - var parentRegion = data.parent; 61 + bcs = ldDiv.select('.l_crumbs');
50 - var span = topdiv.select('.parentRegion').select('span'); 62 +
51 - span.text(parentRegion || '[no parent]'); 63 + function setSpan(v, val) {
52 - span.classed('nav-me', !!parentRegion); 64 + var cls = '.l_' + v,
65 + span = ldDiv.select(cls).select('span'),
66 + value = val || data[v];
67 + span.html(value);
68 + }
69 +
70 + setSpan('id');
71 + setSpan('parent');
72 + setSpan('region');
73 + setSpan('regionName');
74 +
75 + addCrumbNav(bcs, data.crumbs, data.region);
76 + }
77 +
78 + function addCrumbNav(span, array, id) {
79 + var rev = [];
80 +
81 + span.selectAll('span').remove();
82 +
83 + array.forEach(function (a) {
84 + rev.unshift(a.id);
85 + });
86 +
87 + rev.forEach(function (rid, idx) {
88 + if (idx) {
89 + span.append('span').text(' +++ ');
90 + }
91 + if (rid != id) {
92 + addNavigable(span, 'span', rid);
93 + } else {
94 + span.append('span').text(rid);
95 + }
96 + });
97 + }
98 +
99 + function addNavigable(span, what, rid) {
100 + span.append(what).classed('nav-me', true)
101 + .text(rid)
102 + .on('click', function () { navRequest(rid); });
53 } 103 }
54 104
55 function doTmpCurrentRegion(data) { 105 function doTmpCurrentRegion(data) {
56 - var topdiv = d3.select('#topoXtmp');
57 var span = topdiv.select('.thisRegion').select('span'); 106 var span = topdiv.select('.thisRegion').select('span');
58 var div; 107 var div;
59 -
60 span.text(data.id); 108 span.text(data.id);
61 109
62 div = topdiv.select('.subRegions').select('div'); 110 div = topdiv.select('.subRegions').select('div');
111 + rmP(div);
63 data.subregions.forEach(function (r) { 112 data.subregions.forEach(function (r) {
64 - 113 + addNavigable(div, 'p', r.id);
65 - function nav() {
66 - request('down', r.id);
67 - }
68 -
69 - div.append('p')
70 - .classed('nav-me', true)
71 - .text(r.id)
72 - .on('click', nav);
73 }); 114 });
74 115
75 div = topdiv.select('.devices').select('div'); 116 div = topdiv.select('.devices').select('div');
117 + rmP(div);
76 data.layerOrder.forEach(function (tag, idx) { 118 data.layerOrder.forEach(function (tag, idx) {
77 var devs = data.devices[idx]; 119 var devs = data.devices[idx];
78 devs.forEach(function (d) { 120 devs.forEach(function (d) {
...@@ -83,6 +125,7 @@ ...@@ -83,6 +125,7 @@
83 }); 125 });
84 126
85 div = topdiv.select('.hosts').select('div'); 127 div = topdiv.select('.hosts').select('div');
128 + rmP(div);
86 data.layerOrder.forEach(function (tag, idx) { 129 data.layerOrder.forEach(function (tag, idx) {
87 var hosts = data.hosts[idx]; 130 var hosts = data.hosts[idx];
88 hosts.forEach(function (h) { 131 hosts.forEach(function (h) {
...@@ -92,8 +135,8 @@ ...@@ -92,8 +135,8 @@
92 }); 135 });
93 136
94 div = topdiv.select('.links').select('div'); 137 div = topdiv.select('.links').select('div');
95 - var links = data.links; 138 + rmP(div);
96 - links.forEach(function (lnk) { 139 + data.links.forEach(function (lnk) {
97 div.append('p') 140 div.append('p')
98 .text(lnk.id); 141 .text(lnk.id);
99 }); 142 });
...@@ -106,26 +149,27 @@ ...@@ -106,26 +149,27 @@
106 // ========================== Event Handlers 149 // ========================== Event Handlers
107 150
108 function allInstances(data) { 151 function allInstances(data) {
109 - $log.debug('>> topo2AllInstances event:', data) 152 + $log.debug('>> topo2AllInstances event:', data);
110 - doTmpCurrentLayout(data); 153 + doTmpInstances(data);
111 } 154 }
112 155
113 function currentLayout(data) { 156 function currentLayout(data) {
114 - $log.debug('>> topo2CurrentLayout event:', data) 157 + $log.debug('>> topo2CurrentLayout event:', data);
158 + doTmpCurrentLayout(data);
115 } 159 }
116 160
117 function currentRegion(data) { 161 function currentRegion(data) {
118 - $log.debug('>> topo2CurrentRegion event:', data) 162 + $log.debug('>> topo2CurrentRegion event:', data);
119 doTmpCurrentRegion(data); 163 doTmpCurrentRegion(data);
120 } 164 }
121 165
122 function peerRegions(data) { 166 function peerRegions(data) {
123 - $log.debug('>> topo2PeerRegions event:', data) 167 + $log.debug('>> topo2PeerRegions event:', data);
124 doTmpPeerRegions(data); 168 doTmpPeerRegions(data);
125 } 169 }
126 170
127 function startDone(data) { 171 function startDone(data) {
128 - $log.debug('>> topo2StartDone event:', data) 172 + $log.debug('>> topo2StartDone event:', data);
129 } 173 }
130 174
131 // ========================== Main Service Definition 175 // ========================== Main Service Definition
......