홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
a5e8914e 1 parent 56051d04

GUI -- Re-instated Packet / Optical Layer filters. 

- Adding ONOS instance fly-in pane. Note: still WIP.
- refactored onos.ui.addFloatingPanel to allow TL vs. TR.
- added instance pane to topo view.
- implemented addInstance() event.
- refactored event tracing.
- added instances test scenario.

Change-Id: I58d9769afa8aee9079ec778496cbc47bef329608
Expand all
Inline Side-by-side
Showing 21 changed files with 348 additions and 3 deletions
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff0003/4-of:0000ffffffffff03/1",
5 + "type": "pktopt",
6 + "linkWidth": 2,
7 + "src": "of:0000ffffffff0003",
8 + "srcPort": "4",
9 + "dst": "of:0000ffffffffff03",
10 + "dstPort": "1",
11 + "props" : {
12 + "BW": "90 Gb"
13 + }
14 + }
15 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff0003/9-of:0000ffffffff0007/2",
5 + "type": "direct",
6 + "linkWidth": 2,
7 + "src": "of:0000ffffffff0003",
8 + "srcPort": "9",
9 + "dst": "of:0000ffffffff0007",
10 + "dstPort": "2",
11 + "props" : {
12 + "BW": "120 Gb"
13 + }
14 + }
15 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff0008/2-of:0000ffffffff0003/1",
5 + "type": "direct",
6 + "linkWidth": 2,
7 + "src": "of:0000ffffffff0008",
8 + "srcPort": "2",
9 + "dst": "of:0000ffffffff0003",
10 + "dstPort": "1",
11 + "props" : {
12 + "BW": "70 Gb"
13 + }
14 + }
15 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff0008/4-of:0000ffffffff0007/1",
5 + "type": "direct",
6 + "linkWidth": 2,
7 + "src": "of:0000ffffffff0008",
8 + "srcPort": "4",
9 + "dst": "of:0000ffffffff0007",
10 + "dstPort": "1",
11 + "props" : {
12 + "BW": "90 Gb"
13 + }
14 + }
15 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffffff08/4-of:0000ffffffffff03/1",
5 + "type": "optical",
6 + "linkWidth": 2,
7 + "src": "of:0000ffffffffff08",
8 + "srcPort": "4",
9 + "dst": "of:0000ffffffffff03",
10 + "dstPort": "1",
11 + "props" : {
12 + "BW": "90 Gb"
13 + }
14 + }
15 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "0E:2A:69:30:13:aa/-1",
5 + "ingress": "0E:2A:69:30:13:aa/-1/0-of:0000ffffffff0008/101",
6 + "egress": "of:0000ffffffff0008/101-0E:2A:69:30:13:aa/-1/0",
7 + "cp": {
8 + "device": "of:0000ffffffff0008",
9 + "port": 101
10 + },
11 + "labels": [
12 + "12.13.14.15",
13 + "0E:2A:69:30:13:aa"
14 + ],
15 + "props": {}
16 + }
17 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "0E:2A:69:30:13:88/-1",
5 + "ingress": "0E:2A:69:30:13:88/-1/0-of:0000ffffffff0007/101",
6 + "egress": "of:0000ffffffff0007/101-0E:2A:69:30:13:86/-1/0",
7 + "cp": {
8 + "device": "of:0000ffffffff0007",
9 + "port": 101
10 + },
11 + "labels": [
12 + "4.5.7.6",
13 + "0E:2A:69:30:13:88"
14 + ],
15 + "props": {}
16 + }
17 +}
1 +{
2 + "event": "addHost",
3 + "payload": {
4 + "id": "0E:2A:69:30:13:86/-1",
5 + "ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/101",
6 + "egress": "of:0000ffffffff0003/101-0E:2A:69:30:13:86/-1/0",
7 + "cp": {
8 + "device": "of:0000ffffffff0003",
9 + "port": 101
10 + },
11 + "labels": [
12 + "1.2.3.4",
13 + "0E:2A:69:30:13:86"
14 + ],
15 + "props": {}
16 + }
17 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "local",
5 + "online": true,
6 + "labels": [
7 + "local",
8 + "127.0.0.1"
9 + ]
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "onos-2",
5 + "online": true,
6 + "labels": [
7 + "onos-2",
8 + "192.168.2.2"
9 + ]
10 + }
11 +}
1 +{
2 + "event": "addInstance",
3 + "payload": {
4 + "id": "onos-3",
5 + "online": false,
6 + "labels": [
7 + "onos-3",
8 + "192.168.3.3"
9 + ]
10 + }
11 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff0008",
5 + "type": "switch",
6 + "online": true,
7 + "master": "onos-3",
8 + "labels": [
9 + "0000ffffffff0008",
10 + "FF:FF:FF:FF:00:08",
11 + "sw-8"
12 + ],
13 + "metaUi": {
14 + "x": 734,
15 + "y": 477
16 + }
17 + }
18 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff0003",
5 + "type": "switch",
6 + "online": true,
7 + "master": "local",
8 + "labels": [
9 + "0000ffffffff0003",
10 + "FF:FF:FF:FF:00:03",
11 + "sw-3"
12 + ],
13 + "metaUi": {
14 + "x": 282,
15 + "y": 503
16 + }
17 + }
18 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffff0007",
5 + "type": "switch",
6 + "online": true,
7 + "master": "onos-2",
8 + "labels": [
9 + "0000ffffffff0007",
10 + "FF:FF:FF:FF:00:07",
11 + "sw-7"
12 + ],
13 + "metaUi": {
14 + "x": 530,
15 + "y": 330
16 + }
17 + }
18 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffffff08",
5 + "type": "roadm",
6 + "online": true,
7 + "master": "onos-3",
8 + "labels": [
9 + "0000ffffffffff08",
10 + "FF:FF:FF:FF:FF:08",
11 + "opt-8"
12 + ],
13 + "metaUi": {
14 + "x": 734,
15 + "y": 577
16 + }
17 + }
18 +}
1 +{
2 + "event": "addDevice",
3 + "payload": {
4 + "id": "of:0000ffffffffff03",
5 + "type": "roadm",
6 + "online": true,
7 + "master": "local",
8 + "labels": [
9 + "0000ffffffffff03",
10 + "FF:FF:FF:FF:FF:03",
11 + "opt-3"
12 + ],
13 + "metaUi": {
14 + "x": 282,
15 + "y": 603
16 + }
17 + }
18 +}
1 +{
2 + "event": "addLink",
3 + "payload": {
4 + "id": "of:0000ffffffff0008/4-of:0000ffffffffff08/1",
5 + "type": "pktopt",
6 + "linkWidth": 2,
7 + "src": "of:0000ffffffff0008",
8 + "srcPort": "4",
9 + "dst": "of:0000ffffffffff08",
10 + "dstPort": "1",
11 + "props" : {
12 + "BW": "90 Gb"
13 + }
14 + }
15 +}
1 +{
2 + "comments": [
3 + "Developing ONOS instance visualization"
4 + ],
5 + "title": "ONOS Instance Scenario",
6 + "params": {
7 + "lastAuto": 17
8 + },
9 + "description": [
10 + "Visualizing ONOS instances.",
11 + "",
12 + "Press 'S' to load initial events.",
13 + "",
14 + "Press spacebar to complete the scenario..."
15 + ]
16 +}
...@@ -699,6 +699,16 @@ ...@@ -699,6 +699,16 @@
699 // .......................................................... 699 // ..........................................................
700 // UI API 700 // UI API
701 701
702 + var fpConfig = {
703 + TR: {
704 + side: 'right'
705 +
706 + },
707 + TL: {
708 + side: 'left'
709 + }
710 + };
711 +
702 uiApi = { 712 uiApi = {
703 addLib: function (libName, api) { 713 addLib: function (libName, api) {
704 // TODO: validation of args 714 // TODO: validation of args
...@@ -713,6 +723,7 @@ ...@@ -713,6 +723,7 @@
713 */ 723 */
714 addFloatingPanel: function (id, position) { 724 addFloatingPanel: function (id, position) {
715 var pos = position || 'TR', 725 var pos = position || 'TR',
726 + cfg = fpConfig[pos],
716 el, 727 el,
717 fp; 728 fp;
718 729
...@@ -723,22 +734,37 @@ ...@@ -723,22 +734,37 @@
723 734
724 el = $floatPanels.append('div') 735 el = $floatPanels.append('div')
725 .attr('id', id) 736 .attr('id', id)
726 - .attr('class', 'fpanel'); 737 + .attr('class', 'fpanel')
738 + .style('opacity', 0);
739 +
740 + // has to be called after el is set.
741 + el.style(cfg.side, pxHide());
742 +
743 + function pxShow() {
744 + return '20px';
745 + }
746 + function pxHide() {
747 + return (-20 - widthVal()) + 'px';
748 + }
749 + function widthVal() {
750 + return el.style('width').replace(/px$/, '');
751 + }
727 752
728 fp = { 753 fp = {
729 id: id, 754 id: id,
730 el: el, 755 el: el,
731 pos: pos, 756 pos: pos,
757 +
732 show: function () { 758 show: function () {
733 console.log('show pane: ' + id); 759 console.log('show pane: ' + id);
734 el.transition().duration(750) 760 el.transition().duration(750)
735 - .style('right', '20px') 761 + .style(cfg.side, pxShow())
736 .style('opacity', 1); 762 .style('opacity', 1);
737 }, 763 },
738 hide: function () { 764 hide: function () {
739 console.log('hide pane: ' + id); 765 console.log('hide pane: ' + id);
740 el.transition().duration(750) 766 el.transition().duration(750)
741 - .style('right', '-320px') 767 + .style(cfg.side, pxHide())
742 .style('opacity', 0); 768 .style('opacity', 0);
743 }, 769 },
744 empty: function () { 770 empty: function () {
...@@ -746,6 +772,12 @@ ...@@ -746,6 +772,12 @@
746 }, 772 },
747 append: function (what) { 773 append: function (what) {
748 return el.append(what); 774 return el.append(what);
775 + },
776 + width: function (w) {
777 + if (w === undefined) {
778 + return widthVal();
779 + }
780 + el.style('width', w);
749 } 781 }
750 }; 782 };
751 fpanels[id] = fp; 783 fpanels[id] = fp;
......
...@@ -197,6 +197,39 @@ ...@@ -197,6 +197,39 @@
197 border: 0; 197 border: 0;
198 } 198 }
199 199
200 +/* ONOS instance stuff */
201 +
202 +#topo-oibox {
203 + width: 80px;
204 +}
205 +
206 +#topo-oibox .onosInst {
207 + margin: 6px 0;
208 + padding: 3px;
209 + width: 80%;
210 + left: 10%;
211 + height: 40px;
212 + cursor: pointer;
213 +
214 + /* theme-related */
215 + color: #444;
216 + background-color: #ccc;
217 + border: 2px dashed #aaa;
218 +}
219 +
220 +
221 +#topo-oibox .onosInst.online {
222 + /* theme-related */
223 + color: #113;
224 + background-color: #bbf;
225 + border: 2px solid #555;
226 +}
227 +
228 +#topo svg .suppressed,
229 +#topo-oibox .suppressed {
230 + opacity: 0.2;
231 +}
232 +
200 /* Web Socket Closed Mask (starts hidden) */ 233 /* Web Socket Closed Mask (starts hidden) */
201 234
202 #topo-mask { 235 #topo-mask {
......
This diff is collapsed. Click to expand it.