홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
2d147f61 1 parent 8863c465

ONOS-4359: continued work on theming UI 

- topo view: map and instance panel re-theming.

Change-Id: I8e5b0eda61b78b7d54593d84efccb16c54c1611e
Expand all
Inline Side-by-side
Showing 27 changed files with 291 additions and 125 deletions
...@@ -127,6 +127,11 @@ ...@@ -127,6 +127,11 @@
127 glyphDataSet = { 127 glyphDataSet = {
128 _viewbox: '0 0 110 110', 128 _viewbox: '0 0 110 110',
129 129
130 + uiAttached: 'M91.9,16.7H18.1A5.3,5.3,0,0,0,12.8,22V68' +
131 + 'a5.3,5.3,0,0,0,5.3,5.3H91.9A5.3,5.3,0,0,0,97.2,68V22' +
132 + 'A5.3,5.3,0,0,0,91.9,16.7ZM91.6,65.2H18.4V22.3H91.6V65.2Z' +
133 + 'M71.5,87.5h3.8v5.9h-40.6v-5.9h3.8v-1.7h5.4v-9.7h22.3v9.7h5.3v1.7z',
134 +
130 // Small dot 135 // Small dot
131 unknown: 'M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5' + 136 unknown: 'M35,40a5,5,0,0,1,5-5h30a5,5,0,0,1,5,5v30a5,5,0,0,1-5,5' +
132 'h-30a5,5,0,0,1-5-5z', 137 'h-30a5,5,0,0,1-5-5z',
...@@ -525,11 +530,6 @@ ...@@ -525,11 +530,6 @@
525 badgeDataSet = { 530 badgeDataSet = {
526 _viewbox: '0 0 10 10', 531 _viewbox: '0 0 10 10',
527 532
528 - uiAttached: 'M2,2.5a.5,.5,0,0,1,.5-.5h5a.5,.5,0,0,1,.5,.5v3' +
529 - 'a.5,.5,0,0,1-.5,.5h-5a.5,.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,' +
530 - '.3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4' +
531 - 'a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z',
532 -
533 checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z', 533 checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z',
534 534
535 xMark: 'M7.8,6.7L6.7,7.8,5,6.1,3.3,7.8,2.2,6.7,3.9,5,2.2,3.3,3.3,' + 535 xMark: 'M7.8,6.7L6.7,7.8,5,6.1,3.3,7.8,2.2,6.7,3.9,5,2.2,3.3,3.3,' +
......
...@@ -159,12 +159,13 @@ ...@@ -159,12 +159,13 @@
159 159
160 // --- Ordinal scales for 7 values. 160 // --- Ordinal scales for 7 values.
161 161
162 - // blue brown brick red sea green purple dark teal lime 162 + // Colors per Mojo-Design's color palette..
163 - var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'], 163 + // blue lt blue red lt red dk grey lt grey steel
164 - lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'], 164 + var lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#db7773', '#716b6b', '#aeada8', '#7e9aa8'],
165 - 165 + lightMute = ['#a8cceb', '#a8e9fd', '#f1a7a7', '#f8c9c9', '#b9b5b5', '#d7d6d4', '#bdcdd5'],
166 - darkNorm = ['#304860', '#664631', '#A8391B', '#00754B', '#77206D', '#005959', '#428700'], 166 + // TODO: dark theme
167 - darkMute = ['#304860', '#664631', '#A8391B', '#00754B', '#77206D', '#005959', '#428700']; 167 + darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#db7773', '#716b6b', '#aeada8', '#7e9aa8'],
168 + darkMute = ['#a8cceb', '#a8e9fd', '#f1a7a7', '#f8c9c9', '#b9b5b5', '#d7d6d4', '#bdcdd5'];
168 169
169 var colors= { 170 var colors= {
170 light: { 171 light: {
...@@ -215,7 +216,7 @@ ...@@ -215,7 +216,7 @@
215 dom.forEach(function (id, i) { 216 dom.forEach(function (id, i) {
216 var x = i * 20, 217 var x = i * 20,
217 y = k * 20, 218 y = k * 20,
218 - f = get(id, muted, theme); 219 + f = getColor(id, muted, theme);
219 g.append('circle').attr({ 220 g.append('circle').attr({
220 cx: x, 221 cx: x,
221 cy: y, 222 cy: y,
......
...@@ -110,7 +110,8 @@ ...@@ -110,7 +110,8 @@
110 } 110 }
111 111
112 function adjustWidth(btnWidth) { 112 function adjustWidth(btnWidth) {
113 - if (fs.noPxStyle(currentRow, 'width') >= maxWidth) { 113 + // 0.1 fudge for rounding error
114 + if (fs.noPxStyle(currentRow, 'width') + 0.1 >= maxWidth) {
114 tbWidth += btnWidth; 115 tbWidth += btnWidth;
115 maxWidth = tbWidth; 116 maxWidth = tbWidth;
116 } 117 }
......
...@@ -127,7 +127,8 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -127,7 +127,8 @@ html[data-platform='iPad'] #topo-p-detail {
127 /* --- Topo Instance Panel --- */ 127 /* --- Topo Instance Panel --- */
128 128
129 #topo-p-instance { 129 #topo-p-instance {
130 - height: 100px; 130 + height: 85px;
131 + padding: 10px;
131 } 132 }
132 133
133 #topo-p-instance div.onosInst { 134 #topo-p-instance div.onosInst {
...@@ -140,15 +141,20 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -140,15 +141,20 @@ html[data-platform='iPad'] #topo-p-detail {
140 #topo-p-instance svg text.instTitle { 141 #topo-p-instance svg text.instTitle {
141 font-size: 11pt; 142 font-size: 11pt;
142 font-weight: bold; 143 font-weight: bold;
144 + font-variant: small-caps;
145 + text-transform: uppercase;
143 } 146 }
144 #topo-p-instance svg text.instLabel { 147 #topo-p-instance svg text.instLabel {
145 - font-size: 9pt; 148 + font-size: 10pt;
146 - font-style: italic;
147 } 149 }
148 150
149 151
150 /* --- Toolbar --- */ 152 /* --- Toolbar --- */
151 153
154 +#toolbar-topo-tbar {
155 + padding: 6px;
156 +}
157 +
152 #toolbar-topo-tbar .tbar-row.right { 158 #toolbar-topo-tbar .tbar-row.right {
153 width: 100%; 159 width: 100%;
154 } 160 }
...@@ -228,10 +234,6 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -228,10 +234,6 @@ html[data-platform='iPad'] #topo-p-detail {
228 234
229 /* -- MISC -- */ 235 /* -- MISC -- */
230 236
231 -.notReady .readyBadge {
232 - visibility: hidden;
233 -}
234 -
235 .map-list { 237 .map-list {
236 padding: 10px; 238 padding: 10px;
237 } 239 }
......
...@@ -67,6 +67,9 @@ ...@@ -67,6 +67,9 @@
67 67
68 E: [equalizeMasters, 'Equalize mastership roles'], 68 E: [equalizeMasters, 'Equalize mastership roles'],
69 69
70 + //-- instance color palette debug
71 + // 9: function () { sus.cat7().testCard(svg); },
72 +
70 // topology overlay selections 73 // topology overlay selections
71 F1: function () { ttbs.fnkey(0); }, 74 F1: function () { ttbs.fnkey(0); },
72 F2: function () { ttbs.fnkey(1); }, 75 F2: function () { ttbs.fnkey(1); },
......
...@@ -32,20 +32,7 @@ ...@@ -32,20 +32,7 @@
32 */ 32 */
33 33
34 // configuration 34 // configuration
35 - var instCfg = { 35 + var showLogicErrors = true,
36 - rectPad: 8,
37 - nodeOx: 9,
38 - nodeOy: 9,
39 - nodeDim: 40,
40 - birdOx: 19,
41 - birdOy: 21,
42 - birdDim: 21,
43 - uiDy: 45,
44 - titleDy: 30,
45 - textYOff: 20,
46 - textYSpc: 15
47 - },
48 - showLogicErrors = true,
49 idIns = 'topo-p-instance', 36 idIns = 'topo-p-instance',
50 instOpts = { 37 instOpts = {
51 edge: 'left', 38 edge: 'left',
...@@ -102,14 +89,6 @@ ...@@ -102,14 +89,6 @@
102 89
103 // ========================== 90 // ==========================
104 91
105 - function computeDim(self) {
106 - var css = window.getComputedStyle(self);
107 - return {
108 - w: sus.stripPx(css.width),
109 - h: sus.stripPx(css.height)
110 - };
111 - }
112 -
113 function clickInst(d) { 92 function clickInst(d) {
114 var el = d3.select(this), 93 var el = d3.select(this),
115 aff = el.classed('affinity'); 94 aff = el.classed('affinity');
...@@ -139,28 +118,13 @@ ...@@ -139,28 +118,13 @@
139 oiShowMaster = false; 118 oiShowMaster = false;
140 } 119 }
141 120
142 - function instRectAttr(dim) {
143 - var pad = instCfg.rectPad;
144 - return {
145 - x: pad,
146 - y: pad,
147 - width: dim.w - pad*2,
148 - height: dim.h - pad*2,
149 - rx: 6
150 - };
151 - }
152 -
153 - function viewBox(dim) {
154 - return '0 0 ' + dim.w + ' ' + dim.h;
155 - }
156 -
157 function attachUiBadge(svg) { 121 function attachUiBadge(svg) {
158 - gs.addGlyph(svg, 'uiAttached', 24, true, [28, instCfg.uiDy]) 122 + gs.addGlyph(svg, 'uiAttached', 24, true, [14, 54])
159 .classed('badgeIcon uiBadge', true); 123 .classed('badgeIcon uiBadge', true);
160 } 124 }
161 125
162 function attachReadyBadge(svg) { 126 function attachReadyBadge(svg) {
163 - gs.addGlyph(svg, 'checkMark', 16, true, [12, instCfg.uiDy + 4]) 127 + gs.addGlyph(svg, 'checkMark', 16, true, [18, 40])
164 .classed('badgeIcon readyBadge', true); 128 .classed('badgeIcon readyBadge', true);
165 } 129 }
166 130
...@@ -171,24 +135,50 @@ ...@@ -171,24 +135,50 @@
171 // ============================== 135 // ==============================
172 136
173 function updateInstances() { 137 function updateInstances() {
138 + var rox = 5,
139 + roy = 5,
140 + rw = 160,
141 + rhh = 30,
142 + rbh = 45,
143 + tx = 48,
144 + instSvg = {
145 + width: 170,
146 + height: 85,
147 + viewBox: '0 0 170 85'
148 + },
149 + headRect = {
150 + x: rox,
151 + y: roy,
152 + width: rw,
153 + height: rhh
154 + },
155 + bodyRect = {
156 + x: rox,
157 + y: roy + rhh,
158 + width: rw,
159 + height: rbh
160 + },
161 + titleAttr = {
162 + class: 'instTitle',
163 + x: tx,
164 + y: 27
165 + };
166 +
174 var onoses = oiBox.el().selectAll('.onosInst') 167 var onoses = oiBox.el().selectAll('.onosInst')
175 - .data(onosOrder, function (d) { return d.id; }), 168 + .data(onosOrder, function (d) { return d.id; });
176 - instDim = {w:0,h:0},
177 - c = instCfg;
178 169
179 function nSw(n) { 170 function nSw(n) {
180 - return '# Switches: ' + n; 171 + return 'Switches: ' + n;
181 } 172 }
182 173
183 // operate on existing onos instances if necessary 174 // operate on existing onos instances if necessary
184 onoses.each(function (d) { 175 onoses.each(function (d) {
185 var el = d3.select(this), 176 var el = d3.select(this),
186 svg = el.select('svg'); 177 svg = el.select('svg');
187 - instDim = computeDim(this);
188 178
189 // update online state 179 // update online state
190 el.classed('online', d.online); 180 el.classed('online', d.online);
191 - el.classed('notReady', !d.ready); 181 + el.classed('ready', d.ready);
192 182
193 // update ui-attached state 183 // update ui-attached state
194 svg.select('use.uiBadge').remove(); 184 svg.select('use.uiBadge').remove();
...@@ -196,8 +186,6 @@ ...@@ -196,8 +186,6 @@
196 attachUiBadge(svg); 186 attachUiBadge(svg);
197 } 187 }
198 188
199 - attachReadyBadge(svg, d.ready);
200 -
201 function updAttr(id, value) { 189 function updAttr(id, value) {
202 svg.select('text.instLabel.'+id).text(value); 190 svg.select('text.instLabel.'+id).text(value);
203 } 191 }
...@@ -210,59 +198,39 @@ ...@@ -210,59 +198,39 @@
210 // operate on new onos instances 198 // operate on new onos instances
211 var entering = onoses.enter() 199 var entering = onoses.enter()
212 .append('div') 200 .append('div')
213 - .attr('class', 'onosInst') 201 + .classed('onosInst', true)
214 .classed('online', function (d) { return d.online; }) 202 .classed('online', function (d) { return d.online; })
215 - .classed('notReady', function (d) { return !d.ready; }) 203 + .classed('ready', function (d) { return d.ready; })
216 .on('click', clickInst); 204 .on('click', clickInst);
217 205
218 entering.each(function (d) { 206 entering.each(function (d) {
219 var el = d3.select(this), 207 var el = d3.select(this),
220 - rectAttr, 208 + svg = el.append('svg').attr(instSvg);
221 - svg;
222 - instDim = computeDim(this);
223 - rectAttr = instRectAttr(instDim);
224 209
225 - svg = el.append('svg').attr({ 210 + svg.append('rect').attr(headRect);
226 - width: instDim.w, 211 + svg.append('rect').attr(bodyRect);
227 - height: instDim.h,
228 - viewBox: viewBox(instDim)
229 - });
230 212
231 - svg.append('rect').attr(rectAttr); 213 + gs.addGlyph(svg, 'bird', 20, false, [15, 10])
214 + .classed('badgeIcon bird', true);
232 215
233 - gs.addGlyph(svg, 'bird', 28, true, [14, 14]) 216 + attachReadyBadge(svg);
234 - .classed('badgeIcon', true);
235 217
236 if (d.uiAttached) { 218 if (d.uiAttached) {
237 attachUiBadge(svg); 219 attachUiBadge(svg);
238 } 220 }
239 221
240 - attachReadyBadge(svg);
241 -
242 - var left = c.nodeOx + c.nodeDim,
243 - len = rectAttr.width - left,
244 - hlen = len / 2,
245 - midline = hlen + left;
246 -
247 - // title
248 svg.append('text') 222 svg.append('text')
249 - .attr({ 223 + .attr(titleAttr)
250 - class: 'instTitle',
251 - x: midline,
252 - y: c.titleDy
253 - })
254 .text(d.id); 224 .text(d.id);
255 225
256 - // a couple of attributes 226 + var ty = 55;
257 - var ty = c.titleDy + c.textYOff;
258 -
259 function addAttr(id, label) { 227 function addAttr(id, label) {
260 svg.append('text').attr({ 228 svg.append('text').attr({
261 class: 'instLabel ' + id, 229 class: 'instLabel ' + id,
262 - x: midline, 230 + x: tx,
263 y: ty 231 y: ty
264 }).text(label); 232 }).text(label);
265 - ty += c.textYSpc; 233 + ty += 18;
266 } 234 }
267 235
268 addAttr('ip', d.ip); 236 addAttr('ip', d.ip);
...@@ -279,8 +247,8 @@ ...@@ -279,8 +247,8 @@
279 }); 247 });
280 248
281 // adjust the panel size appropriately... 249 // adjust the panel size appropriately...
282 - oiBox.width(instDim.w * onosOrder.length); 250 + oiBox.width(instSvg.width * onosOrder.length);
283 - oiBox.height(instDim.h); 251 + oiBox.height(instSvg.height);
284 252
285 // remove any outgoing instances 253 // remove any outgoing instances
286 onoses.exit().remove(); 254 onoses.exit().remove();
......
...@@ -89,7 +89,8 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -89,7 +89,8 @@ describe('factory: fw/svg/glyph.js', function() {
89 diamond: 'M.2,.5' 89 diamond: 'M.2,.5'
90 }, 90 },
91 glyphIds = [ 91 glyphIds = [
92 - 'unknown', 'node', 'switch', 'roadm', 'endstation', 'router', 92 + 'unknown', 'uiAttached',
93 + 'node', 'switch', 'roadm', 'endstation', 'router',
93 'bgpSpeaker', 'chain', 'crown', 'lock', 'topo', 'refresh', 94 'bgpSpeaker', 'chain', 'crown', 'lock', 'topo', 'refresh',
94 'garbage', 95 'garbage',
95 'flowTable', 'portTable', 'groupTable', 96 'flowTable', 'portTable', 'groupTable',
...@@ -98,7 +99,7 @@ describe('factory: fw/svg/glyph.js', function() { ...@@ -98,7 +99,7 @@ describe('factory: fw/svg/glyph.js', function() {
98 'prevIntent', 'intentTraffic', 'allTraffic', 'flows', 'eqMaster' 99 'prevIntent', 'intentTraffic', 'allTraffic', 'flows', 'eqMaster'
99 ], 100 ],
100 badgeIds = [ 101 badgeIds = [
101 - 'uiAttached', 'checkMark', 'xMark', 'triangleUp', 'triangleDown', 102 + 'checkMark', 'xMark', 'triangleUp', 'triangleDown',
102 'plus', 'minus', 'play', 'stop' 103 'plus', 'minus', 'play', 'stop'
103 ], 104 ],
104 spriteIds = [ 105 spriteIds = [
......
...@@ -153,39 +153,40 @@ describe('factory: fw/svg/svgUtil.js', function() { ...@@ -153,39 +153,40 @@ describe('factory: fw/svg/svgUtil.js', function() {
153 ])).toBeTruthy(); 153 ])).toBeTruthy();
154 }); 154 });
155 155
156 - it('should provide a certain shade of blue', function () { 156 + it('should provide blue', function () {
157 - expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#3E5780'); 157 + expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
158 }); 158 });
159 159
160 - it('should not matter what the ID really is for shade of blue', function () { 160 + it('should provide light blue', function () {
161 - expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#78533B'); 161 + expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
162 }); 162 });
163 163
164 - it('should provide different shade of blue for muted', function () { 164 + it('should provide paler shade of blue for muted', function () {
165 - expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#A8B8CC'); 165 + expect(sus.cat7().getColor('foo', true, 'light')).toEqual('#a8cceb');
166 }); 166 });
167 167
168 - 168 + // TODO: dark theme required
169 - it('should provide an alternate (dark) shade of blue', function () { 169 + xit('should provide an alternate (dark) shade of blue', function () {
170 - expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#304860'); 170 + expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#5b99d2');
171 }); 171 });
172 172
173 - it('should provide an alternate (dark) shade of blue for muted', function () { 173 + // TODO: dark theme required
174 - expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#304860'); 174 + xit('should provide an alternate (dark) shade of blue for muted', function () {
175 + expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#a8cceb');
175 }); 176 });
176 177
177 it('should iterate across the colors', function () { 178 it('should iterate across the colors', function () {
178 - expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#3E5780'); 179 + expect(sus.cat7().getColor('foo', false, 'light')).toEqual('#5b99d2');
179 - expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#78533B'); 180 + expect(sus.cat7().getColor('bar', false, 'light')).toEqual('#66cef6');
180 - expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#CB4D28'); 181 + expect(sus.cat7().getColor('baz', false, 'light')).toEqual('#d05a55');
181 - expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#018D61'); 182 + expect(sus.cat7().getColor('goo', false, 'light')).toEqual('#db7773');
182 - expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#8A2979'); 183 + expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#716b6b');
183 - expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#006D73'); 184 + expect(sus.cat7().getColor('pip', false, 'light')).toEqual('#aeada8');
184 - expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#56AF00'); 185 + expect(sus.cat7().getColor('sdh', false, 'light')).toEqual('#7e9aa8');
185 // and cycle back to the first color for item #8 186 // and cycle back to the first color for item #8
186 - expect(sus.cat7().getColor('bri', false, 'light')).toEqual('#3E5780'); 187 + expect(sus.cat7().getColor('bri', false, 'light')).toEqual('#5b99d2');
187 // and return the same color for the same ID 188 // and return the same color for the same ID
188 - expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#8A2979'); 189 + expect(sus.cat7().getColor('zoo', false, 'light')).toEqual('#716b6b');
189 }); 190 });
190 191
191 // === translate(), scale(), skewX(), rotate() 192 // === translate(), scale(), skewX(), rotate()
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 "lastAuto": 29 7 "lastAuto": 29
8 }, 8 },
9 "description": [ 9 "description": [
10 - "Press '=' to load initial events.", 10 + "Press 'a' to load initial events.",
11 - "Press '-' to fire further events." 11 + "Press 'n' to fire further events."
12 ] 12 ]
13 } 13 }
......
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "222.222.222.222",
5 + "ip": "222.222.222.222",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-6",
5 + "ip": "192.168.224.126",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-5",
5 + "ip": "192.168.56.105",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-4",
5 + "ip": "192.168.56.104",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-3",
5 + "ip": "192.168.56.103",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-2",
5 + "ip": "192.168.56.102",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "192.168.56.101",
5 + "ip": "192.168.56.101",
6 + "online": false,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "192.168.56.101",
5 + "ip": "192.168.56.101",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": true,
9 + "switches": 4
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-2",
5 + "ip": "192.168.56.102",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": false,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-3",
5 + "ip": "192.168.56.103",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-4",
5 + "ip": "192.168.56.104",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-5",
5 + "ip": "192.168.56.105",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 17
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "ONOS-6",
5 + "ip": "192.168.224.126",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 0
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "222.222.222.222",
5 + "ip": "222.222.222.222",
6 + "online": true,
7 + "ready": false,
8 + "uiAttached": false,
9 + "switches": 6
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "192.168.56.101",
5 + "ip": "192.168.56.101",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": false,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "event": "updateInstance",
3 + "payload": {
4 + "id": "ONOS-3",
5 + "ip": "192.168.56.103",
6 + "online": true,
7 + "ready": true,
8 + "uiAttached": true,
9 + "switches": 3
10 + }
11 +}
1 +{
2 + "comments": [
3 + "Tweaking Mojo Colors"
4 + ],
5 + "title": "Color-Tweaking Scenario for Mojo Palette",
6 + "params": {
7 + "lastAuto": 7
8 + },
9 + "description": [
10 + "Press 'a' to load initial events.",
11 + "Press 'n' to fire further events."
12 + ]
13 +}