홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
b82f6904 1 parent 51b8f6ac

GUI -- Re-worked ONOS Instance panel (WIP) 

- added sample events, including updated addInstance event.
- cleaned up glyphs; added badges.
- fixed defect in floating panel .width(...) function.

Change-Id: I00d7ca38a1b291c4735b6dd5e39f0266549b545f
Inline Side-by-side
Showing 15 changed files with 314 additions and 112 deletions
...@@ -50,79 +50,78 @@ ...@@ -50,79 +50,78 @@
50 .append('path').attr('d', birdData); 50 .append('path').attr('d', birdData);
51 } 51 }
52 52
53 - var bullhornData = "M0,13c0,3.733,2.561,6.148,6.019,6.809 " +
54 - "C6.013,19.873,6,19.935,6,20v8 c0,1.105,0.895,2,2,2h3 " +
55 - "c1.105,0,2-0.896,2-2v-8h3V6H8C3.582,6,0,8.582,0,13z " +
56 - "M18,20h3V6h-3V20z M30,0l-7,4.667v16.667L30,26 c1.105,0,2-0.895,2-2" +
57 - "V2 C32,0.896,31.105,0,30,0z";
58 -
59 - function defBullhorn(defs) {
60 - defs.append('symbol')
61 - .attr({
62 - id: 'bullhorn',
63 - viewBox: '-4 -5 40 40'
64 - })
65 - .append('path').attr('d', bullhornData);
66 - }
67 -
68 var glyphData = { 53 var glyphData = {
69 unknown: "M-20 -15 a5 5 0 0 1 5 -5 h30 a5 5 0 0 1 5 5 v30 " + 54 unknown: "M-20 -15 a5 5 0 0 1 5 -5 h30 a5 5 0 0 1 5 5 v30 " +
70 - "a5 5 0 0 1 -5 5 h-30 a5 5 0 0 1 -5 -5 z ", 55 + "a5 5 0 0 1 -5 5 h-30 a5 5 0 0 1 -5 -5 z",
71 - router: "M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0 M -35 -5 " +
72 - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 35 -5 " +
73 - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 -8 " +
74 - "l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z M -5 8 " +
75 - "l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z ",
76 - bgpSpeaker: "M-45 -15 a45 35 0 0 1 90 0 Q45 22 0 45 Q-45 22 -45 -15 z " +
77 - "M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 2" +
78 - " l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z ",
79 56
80 - switch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 v70 a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z", 57 + node: "M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5 h80 " +
58 + "a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z M-41 -32.5 l11 -11 " +
59 + "a10 3 0 0 1 10 -2 h40 a10 3 0 0 1 10 2 l11 11 z M-39 -20 " +
60 + "a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z",
81 61
62 + switch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 " +
63 + "v70 a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z " +
64 + "M 5 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 " +
65 + "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 " +
66 + "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 " +
67 + "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z",
82 68
83 - Xswitch: "M-45 -35 a10 10 0 0 1 10 -10 h70 a 10 10 0 0 1 10 10 v70 " +
84 - "a 10 10 0 0 1 -10 10 h -70 a 10 10 0 0 1 -10 -10 z M 5 -29 " +
85 - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 5 " +
86 - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -5 -15 " +
87 - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 19 " +
88 - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z " ,
89 roadm: "M-45 -20 l25 -25 h40 l25 25 v40 l-25 25 h-40 l-25 -25 z " + 69 roadm: "M-45 -20 l25 -25 h40 l25 25 v40 l-25 25 h-40 l-25 -25 z " +
90 - "M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 3 5 " + 70 + "M 3 -29 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 3 5 " +
91 - "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -3 -15 " + 71 + "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M -3 -15 " +
92 - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -3 19 " + 72 + "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -3 19 " +
93 - "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z ", 73 + "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z",
94 - node: "M-40 45 a5 5 0 0 1 -5 -5 v-65 a5 5 0 0 1 5 -5 h80 " + 74 +
95 - "a5 5 0 0 1 5 5 v65 a5 5 0 0 1 -5 5 z M-41 -32.5 l11 -11 " +
96 - "a10 3 0 0 1 10 -2 h40 a10 3 0 0 1 10 2 l11 11 z M-39 -20 " +
97 - "a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z ",
98 endstation: "M-45 -40 a5 5 0 0 1 5 -5 h65 a5 5 0 0 1 5 5 v80 " + 75 endstation: "M-45 -40 a5 5 0 0 1 5 -5 h65 a5 5 0 0 1 5 5 v80 " +
99 - "a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z M32.5 -41 l11 11 " + 76 + "a5 5 0 0 1 -5 5 h-65 a5 5 0 0 1 -5 -5 z M32.5 -41 l11 11 " +
100 - "a3 10 0 0 1 2 10 v40 a3 10 0 0 1 -2 10 l-11 11 z M-38 -36 " + 77 + "a3 10 0 0 1 2 10 v40 a3 10 0 0 1 -2 10 l-11 11 z M-38 -36 " +
101 - "a2 2 0 0 1 2 -2 h56 a2 2 0 0 1 2 2 v26 a2 2 0 0 1 -2 2 h-56 " + 78 + "a2 2 0 0 1 2 -2 h56 a2 2 0 0 1 2 2 v26 a2 2 0 0 1 -2 2 h-56 " +
102 - "a2 2 0 0 1 -2 -2 z M-35 -35 h54 v10 h-54 z M-35 -22 h54 v10 " + 79 + "a2 2 0 0 1 -2 -2 z M-35 -35 h54 v10 h-54 z M-35 -22 h54 v10 " +
103 - "h-54 z M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z " 80 + "h-54 z M-13 15 a5 5 0 0 1 10 0 a5 5 0 0 1 -10 0 z",
81 +
82 + router: "M-45 0 A45 45 0 0 1 45 0 A45 45 0 0 1 -45 0 M -35 -5 " +
83 + "l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 35 -5 " +
84 + "l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z M -5 -8 " +
85 + "l 0 -12, -8 0, 13 -18, 13 18, -8 0, 0 12 z M -5 8 " +
86 + "l 0 12, -8 0, 13 18, 13 -18, -8 0, 0 -12 z",
87 +
88 + bgpSpeaker: "M-45 -15 a45 35 0 0 1 90 0 Q45 22 0 45 Q-45 22 -45 -15 z " +
89 + "M -5 -26 l 12 0, 0 -8, 18 13, -18 13, 0 -8, -12 0 z M 5 2" +
90 + " l -12 0, 0 -8, -18 13, 18 13, 0 -8, 12 0 z"
104 }; 91 };
105 92
106 var glyphParams = { 93 var glyphParams = {
107 viewBox: '-55 -55 110 110' 94 viewBox: '-55 -55 110 110'
108 }; 95 };
109 96
110 - function defGlyphs(defs) { 97 +
111 - d3.map(glyphData).keys().forEach(function (key) { 98 + var badgeData = {
112 - defs.append('symbol') 99 + uiAttached: "M-3-2.5 a.5 .5 0 0 1 .5-.5 h5 a.5 .5 0 0 1 .5 .5 v3 " +
113 - .attr({ 100 + "a.5 .5 0 0 1-.5 .5 h-5 a.5 .5 0 0 1-.5-.5 z M-2.5-2.2 " +
114 - id: key, 101 + "a.3 .3 0 0 1 .3-.3 h4.4 a.3 .3 0 0 1 .3 .3 v2.4 a.3 .3 0 0 1-.3 .3 " +
115 - viewBox: glyphParams.viewBox 102 + "h-4.4 a.3 .3 0 0 1-.3-.3 z M-3 1.55 h6 l1 1.45 h-8 z"
116 - }) 103 + };
117 - .append('path').attr('d', glyphData[key]); 104 +
105 + var badgeParams = {
106 + viewBox: '-5 -5 10 10'
107 + };
108 +
109 + function defStuff(defs, params, data) {
110 + d3.map(data).keys().forEach(function (key) {
111 + defs.append('symbol')
112 + .attr({
113 + id: key,
114 + viewBox: params.viewBox
115 + })
116 + .append('path').attr('d', data[key]);
118 }); 117 });
119 } 118 }
120 119
121 // === register the functions as a library 120 // === register the functions as a library
122 onos.ui.addLib('glyphs', { 121 onos.ui.addLib('glyphs', {
123 defBird: defBird, 122 defBird: defBird,
124 - defBullhorn: defBullhorn, 123 + defGlyphs: function (defs) { defStuff(defs, glyphParams, glyphData); },
125 - defGlyphs: defGlyphs 124 + defBadges: function (defs) { defStuff(defs, badgeParams, badgeData); }
126 }); 125 });
127 126
128 }(ONOS)); 127 }(ONOS));
......
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:000000000000000a",
5 + "type": "switch",
6 + "online": true,
7 + "master": "local",
8 + "labels": [
9 + "",
10 + "NWOR",
11 + "of:000000000000000a"
12 + ],
13 + "props": {
14 + "latitude": "29.951475",
15 + "name": "NWOR",
16 + "longitude": "-90.078434"
17 + },
18 + "location": {
19 + "type": "latlng",
20 + "lat": 29.951475,
21 + "lng": -90.078434
22 + }
23 + }
24 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "00:00:00:00:00:01/-1",
5 + "type": "endstation",
6 + "ingress": "00:00:00:00:00:01/-1/0-of:0000000000000001/1",
7 + "egress": "of:0000000000000001/1-00:00:00:00:00:01/-1/0",
8 + "cp": {
9 + "device": "of:0000000000000001",
10 + "port": 1
11 + },
12 + "labels": [
13 + "10.0.0.1",
14 + "00:00:00:00:00:01"
15 + ],
16 + "props": {
17 + "name": "CMBR",
18 + "latitude": "44.37373",
19 + "longitude": "-71.109734"
20 + },
21 + "location": {
22 + "type": "latlng",
23 + "lat": 44.37373,
24 + "lng": -71.109734
25 + }
26 + }
27 +}
1 { 1 {
2 "event": "addInstance", 2 "event": "addInstance",
3 "payload": { 3 "payload": {
4 - "id": "onos-1", 4 + "id": "local",
5 - "online": "true" 5 + "ip": "127.0.0.1",
6 + "online": true,
7 + "uiAttached": true,
8 + "switches": 25,
9 + "labels": [
10 + "local",
11 + "127.0.0.1"
12 + ]
6 } 13 }
7 } 14 }
......
1 +{
2 + "event": "showSummary",
3 + "sid": 1,
4 + "payload": {
5 + "id": "ONOS Summary",
6 + "type": "node",
7 + "propOrder": [
8 + "Devices",
9 + "Links",
10 + "Hosts",
11 + "Topology SCCs",
12 + "Paths",
13 + "-",
14 + "Intents",
15 + "Flows",
16 + "Version"
17 + ],
18 + "props": {
19 + "Devices": "25",
20 + "Links": "112",
21 + "Hosts": "25",
22 + "Topology SCCs": "1",
23 + "Paths": "1,272",
24 + "-": "",
25 + "Intents": "0",
26 + "Flows": "0",
27 + "Version": "1.0.0*"
28 + }
29 + }
30 +}
1 +{
2 + "event": "cancelSummary",
3 + "sid": 2,
4 + "payload": {}
5 +}
1 +{
2 + "event": "requestSummary",
3 + "sid": 1,
4 + "payload": {}
5 +}
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
2 "event": "addInstance", 2 "event": "addInstance",
3 "payload": { 3 "payload": {
4 "id": "192.168.56.101", 4 "id": "192.168.56.101",
5 + "ip": "192.168.56.101",
5 "online": true, 6 "online": true,
7 + "uiAttached": true,
8 + "switches": 4,
6 "labels": [ 9 "labels": [
7 "192.168.56.101", 10 "192.168.56.101",
8 - "127.0.0.1" 11 + "192.168.56.101"
9 ] 12 ]
10 } 13 }
11 } 14 }
......
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
2 "event": "addInstance", 2 "event": "addInstance",
3 "payload": { 3 "payload": {
4 "id": "onos-2", 4 "id": "onos-2",
5 - "uiAttached": true, 5 + "ip": "192.168.0.2",
6 - "online": false, 6 + "online": true,
7 + "uiAttached": false,
8 + "switches": 3,
7 "labels": [ 9 "labels": [
8 "onos-2", 10 "onos-2",
9 - "127.0.0.1" 11 + "192.168.0.2"
10 ] 12 ]
11 } 13 }
12 } 14 }
......
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
2 "event": "addInstance", 2 "event": "addInstance",
3 "payload": { 3 "payload": {
4 "id": "onos-leader", 4 "id": "onos-leader",
5 + "ip": "192.168.0.5",
5 "online": false, 6 "online": false,
7 + "uiAttached": false,
8 + "switches": 0,
6 "labels": [ 9 "labels": [
7 "onos-leader", 10 "onos-leader",
8 - "127.0.0.1" 11 + "192.168.0.5"
9 ] 12 ]
10 } 13 }
11 } 14 }
......
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
2 "event": "addInstance", 2 "event": "addInstance",
3 "payload": { 3 "payload": {
4 "id": "onos-master", 4 "id": "onos-master",
5 + "ip": "192.168.0.7",
5 "online": false, 6 "online": false,
7 + "uiAttached": false,
8 + "switches": 300,
6 "labels": [ 9 "labels": [
7 "onos-master", 10 "onos-master",
8 - "127.0.0.1" 11 + "192.168.0.7"
9 ] 12 ]
10 } 13 }
11 } 14 }
......
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
2 "event": "addInstance", 2 "event": "addInstance",
3 "payload": { 3 "payload": {
4 "id": "onos-slave", 4 "id": "onos-slave",
5 + "ip": "192.168.0.11",
5 "online": false, 6 "online": false,
7 + "uiAttached": false,
8 + "switches": 17,
6 "labels": [ 9 "labels": [
7 "onos-slave", 10 "onos-slave",
8 - "127.0.0.1" 11 + "192.168.0.11"
9 ] 12 ]
10 } 13 }
11 } 14 }
......
...@@ -821,7 +821,7 @@ ...@@ -821,7 +821,7 @@
821 if (w === undefined) { 821 if (w === undefined) {
822 return widthVal(); 822 return widthVal();
823 } 823 }
824 - el.style('width', w); 824 + el.style('width', w + 'px');
825 } 825 }
826 }; 826 };
827 fpanels[id] = fp; 827 fpanels[id] = fp;
......
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
32 32
33 /* TODO: move glyphs into framework */ 33 /* TODO: move glyphs into framework */
34 34
35 -#topo-oibox svg .glyphIcon,
36 #topo svg .glyphIcon { 35 #topo svg .glyphIcon {
37 fill: black; 36 fill: black;
38 stroke: none; 37 stroke: none;
...@@ -43,6 +42,7 @@ ...@@ -43,6 +42,7 @@
43 stroke: none; 42 stroke: none;
44 } 43 }
45 44
45 +
46 /* NODES */ 46 /* NODES */
47 47
48 #topo svg .node { 48 #topo svg .node {
...@@ -313,10 +313,59 @@ svg .node.host circle { ...@@ -313,10 +313,59 @@ svg .node.host circle {
313 /* ONOS instance stuff */ 313 /* ONOS instance stuff */
314 314
315 #topo-oibox { 315 #topo-oibox {
316 + height: 100px;
317 +}
318 +
319 +#topo-oibox div.onosInst {
320 + display: inline-block;
316 width: 120px; 321 width: 120px;
322 + height: 100px;
323 +}
324 +
325 +#topo-oibox svg rect {
326 + fill: #ccc;
327 + stroke: #aaa;
328 + stroke-width: 3.5;
329 +}
330 +#topo-oibox .online svg rect {
331 + opacity: 1;
332 + fill: #9cf;
333 + stroke: #357;
334 +}
335 +
336 +#topo-oibox svg .glyphIcon {
337 + fill: #888;
338 + fill-rule: evenodd;
339 +}
340 +#topo-oibox .online svg .glyphIcon {
341 + fill: #000;
342 +}
343 +
344 +#topo-oibox svg .badgeIcon {
345 + fill: #aaa;
346 + fill-rule: evenodd;
347 +}
348 +
349 +#topo-oibox .online svg .badgeIcon {
350 + fill: #fff;
351 +}
352 +
353 +
354 +#topo-oibox .onosInst.mastership {
355 + opacity: 0.3;
356 +}
357 +#topo-oibox .onosInst.mastership.affinity {
358 + opacity: 1.0;
317 } 359 }
360 +#topo-oibox .onosInst.mastership.affinity svg rect {
361 + filter: url(#blue-glow);
362 +}
363 +
364 +/* ------------------------------------------------------ */
365 +/* ------------------------------------------------------ */
366 +/* ------------------------------------------------------ */
318 367
319 -#topo-oibox .onosInst { 368 +#topo-oibox .onosInst_OLD {
320 position: relative; 369 position: relative;
321 width: 88%; 370 width: 88%;
322 left: 4%; 371 left: 4%;
...@@ -333,31 +382,24 @@ svg .node.host circle { ...@@ -333,31 +382,24 @@ svg .node.host circle {
333 border: 4px solid #aaa; 382 border: 4px solid #aaa;
334 } 383 }
335 384
336 -#topo-oibox .onosInst.online { 385 +#topo-oibox .onosInst_OLD .onosTitle {
337 - /* theme-related */
338 - color: #113;
339 - background-color: #9cf;
340 - border: 4px solid #357;
341 -}
342 -
343 -#topo-oibox .onosInst .onosTitle {
344 text-align: center; 386 text-align: center;
345 font-size: 10pt; 387 font-size: 10pt;
346 margin-top: 6px; 388 margin-top: 6px;
347 color: #888; 389 color: #888;
348 } 390 }
349 391
350 -#topo-oibox .onosInst.online .onosTitle { 392 +#topo-oibox .onosInst_OLD.online .onosTitle {
351 color: black; 393 color: black;
352 } 394 }
353 395
354 -#topo-oibox .onosInst svg .glyphIcon { 396 +#topo-oibox .onosInst_OLD svg .glyphIcon {
355 opacity: 0.5; 397 opacity: 0.5;
356 fill: black; 398 fill: black;
357 stroke: none; 399 stroke: none;
358 fill-rule: evenodd; 400 fill-rule: evenodd;
359 } 401 }
360 -#topo-oibox .onosInst.online svg .glyphIcon { 402 +#topo-oibox .onosInst_OLD.online svg .glyphIcon {
361 opacity: 1; 403 opacity: 1;
362 fill: black; 404 fill: black;
363 stroke: none; 405 stroke: none;
...@@ -365,12 +407,12 @@ svg .node.host circle { ...@@ -365,12 +407,12 @@ svg .node.host circle {
365 } 407 }
366 408
367 409
368 -#topo-oibox .onosInst.online img { 410 +#topo-oibox .onosInst_OLD.online img {
369 opacity: 1.0; 411 opacity: 1.0;
370 padding: 3px; 412 padding: 3px;
371 } 413 }
372 414
373 -#topo-oibox .onosInst img.ui { 415 +#topo-oibox .onosInst_OLD img.ui {
374 opacity: 1; 416 opacity: 1;
375 position: absolute; 417 position: absolute;
376 top: 3px; 418 top: 3px;
...@@ -379,14 +421,6 @@ svg .node.host circle { ...@@ -379,14 +421,6 @@ svg .node.host circle {
379 height: 20px; 421 height: 20px;
380 } 422 }
381 423
382 -#topo-oibox .onosInst.mastership {
383 - opacity: 0.3;
384 -}
385 -#topo-oibox .onosInst.mastership.affinity {
386 - opacity: 1.0;
387 - box-shadow: 0 2px 8px #33e;
388 -}
389 -
390 424
391 #topo svg .suppressed { 425 #topo svg .suppressed {
392 opacity: 0.2; 426 opacity: 0.2;
......
...@@ -946,64 +946,120 @@ ...@@ -946,64 +946,120 @@
946 return s.replace(/px$/,''); 946 return s.replace(/px$/,'');
947 } 947 }
948 948
949 - function appendGlyph(svg, ox, oy, dim, iid) { 949 + function appendUse(svg, ox, oy, dim, iid, cls) {
950 - svg.append('use').attr({ 950 + var use = svg.append('use').attr({
951 - class: 'glyphIcon',
952 transform: translate(ox,oy), 951 transform: translate(ox,oy),
953 'xlink:href': iid, 952 'xlink:href': iid,
954 width: dim, 953 width: dim,
955 height: dim 954 height: dim
956 }); 955 });
956 + if (cls) {
957 + use.classed(cls, true);
958 + }
959 + return use;
960 + }
961 +
962 + function appendGlyph(svg, ox, oy, dim, iid, cls) {
963 + appendUse(svg, ox, oy, dim, iid, cls).classed('glyphIcon', true);
964 + }
965 +
966 + function appendBadge(svg, ox, oy, dim, iid, cls) {
967 + appendUse(svg, ox, oy, dim, iid,cls ).classed('badgeIcon', true);
968 + }
969 +
970 + function attachUiBadge(svg) {
971 + appendBadge(svg, 12, 50, 30, '#uiAttached', 'uiBadge');
957 } 972 }
958 973
959 // ============================== 974 // ==============================
960 // onos instance panel functions 975 // onos instance panel functions
976 + var instW = 120;
977 +
978 + function viewBox(w, h) {
979 + return '0 0 ' + w + ' ' + h;
980 + }
961 981
962 function updateInstances() { 982 function updateInstances() {
963 var onoses = oiBox.el.selectAll('.onosInst') 983 var onoses = oiBox.el.selectAll('.onosInst')
964 - .data(onosOrder, function (d) { return d.id; }); 984 + .data(onosOrder, function (d) { return d.id; }),
985 + boxW = instW * onosOrder.length;
965 986
966 - // operate on existing onoses if necessary 987 + // adjust the width of the panel based on number of instances...
967 - onoses.classed('online', function (d) { return d.online; }); 988 + oiBox.width(boxW);
989 +
990 + // operate on existing onos instances if necessary
991 + onoses.each(function (d) {
992 + var el = d3.select(this),
993 + svg = el.select('svg');
994 +
995 + // update online state
996 + el.classed('online', d.online);
997 +
998 + // update ui-attached state
999 + svg.select('use.uiBadge').remove();
1000 + if (d.uiAttached) {
1001 + attachUiBadge(svg);
1002 + }
968 1003
1004 + // TODO: update title and property values
1005 + });
1006 +
1007 +
1008 + // operate on new onos instances
969 var entering = onoses.enter() 1009 var entering = onoses.enter()
970 .append('div') 1010 .append('div')
971 .attr('class', 'onosInst') 1011 .attr('class', 'onosInst')
972 .classed('online', function (d) { return d.online; }) 1012 .classed('online', function (d) { return d.online; })
973 .on('click', clickInst); 1013 .on('click', clickInst);
974 1014
975 - entering.each(function (d, i) { 1015 + entering.each(function (d) {
976 var el = d3.select(this), 1016 var el = d3.select(this),
977 - img; 1017 + css = window.getComputedStyle(this),
978 - var css = window.getComputedStyle(this),
979 w = stripPx(css.width), 1018 w = stripPx(css.width),
980 - h = stripPx(css.height) / 2; 1019 + h = stripPx(css.height);
981 1020
982 var svg = el.append('svg').attr({ 1021 var svg = el.append('svg').attr({
983 width: w, 1022 width: w,
984 - height: h 1023 + height: h,
1024 + viewBox: viewBox(w, h)
985 }); 1025 });
986 - var dim = 30; 1026 +
987 - appendGlyph(svg, 2, 2, 30, '#node'); 1027 + svg.append('rect')
988 - svg.append('use')
989 .attr({ 1028 .attr({
990 - class: 'birdBadge', 1029 + x: 8,
991 - transform: translate(8,10), 1030 + y: 8,
992 - 'xlink:href': '#bird', 1031 + width: 104,
993 - width: 18, 1032 + height: 84,
994 - height: 18, 1033 + rx: 12
995 - fill: '#fff'
996 }); 1034 });
997 1035
998 - $('<div>').attr('class', 'onosTitle').text(d.id).appendTo(el); 1036 +
1037 + appendGlyph(svg, 9, 9, 36, '#node');
1038 + appendBadge(svg, 17, 19, 21, '#bird');
1039 +
1040 + if (d.uiAttached) {
1041 + attachUiBadge(svg);
1042 + }
1043 +
1044 + //svg.append('use')
1045 + // .attr({
1046 + // class: 'birdBadge',
1047 + // transform: translate(8,10),
1048 + // 'xlink:href': '#bird',
1049 + // width: 18,
1050 + // height: 18,
1051 + // fill: '#fff'
1052 + // });
1053 + //
1054 + //$('<div>').attr('class', 'onosTitle').text(d.id).appendTo(el);
999 1055
1000 // is the UI attached to this instance? 1056 // is the UI attached to this instance?
1001 // TODO: need uiAttached boolean in instance data 1057 // TODO: need uiAttached boolean in instance data
1002 // TODO: use SVG glyph, not png.. 1058 // TODO: use SVG glyph, not png..
1003 //if (d.uiAttached) { 1059 //if (d.uiAttached) {
1004 - if (i === 0) { 1060 + //if (i === 0) {
1005 - $('<img src="img/ui.png">').attr('class','ui').appendTo(el); 1061 + // $('<img src="img/ui.png">').attr('class','ui').appendTo(el);
1006 - } 1062 + //}
1007 }); 1063 });
1008 1064
1009 // operate on existing + new onoses here 1065 // operate on existing + new onoses here
...@@ -2194,8 +2250,8 @@ ...@@ -2194,8 +2250,8 @@
2194 function loadGlyphs(svg) { 2250 function loadGlyphs(svg) {
2195 var defs = svg.append('defs'); 2251 var defs = svg.append('defs');
2196 gly.defBird(defs); 2252 gly.defBird(defs);
2197 - gly.defBullhorn(defs);
2198 gly.defGlyphs(defs); 2253 gly.defGlyphs(defs);
2254 + gly.defBadges(defs);
2199 } 2255 }
2200 2256
2201 // ============================== 2257 // ==============================
...@@ -2468,5 +2524,6 @@ ...@@ -2468,5 +2524,6 @@
2468 summaryPane = onos.ui.addFloatingPanel('topo-summary'); 2524 summaryPane = onos.ui.addFloatingPanel('topo-summary');
2469 detailPane = onos.ui.addFloatingPanel('topo-detail'); 2525 detailPane = onos.ui.addFloatingPanel('topo-detail');
2470 oiBox = onos.ui.addFloatingPanel('topo-oibox', 'TL'); 2526 oiBox = onos.ui.addFloatingPanel('topo-oibox', 'TL');
2527 + oiBox.width(20);
2471 2528
2472 }(ONOS)); 2529 }(ONOS));
......