홍길동 / 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
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0003/4-of:0000ffffffffff03/1",
"type": "pktopt",
"linkWidth": 2,
"src": "of:0000ffffffff0003",
"srcPort": "4",
"dst": "of:0000ffffffffff03",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0003/9-of:0000ffffffff0007/2",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0003",
"srcPort": "9",
"dst": "of:0000ffffffff0007",
"dstPort": "2",
"props" : {
"BW": "120 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0008/2-of:0000ffffffff0003/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0008",
"srcPort": "2",
"dst": "of:0000ffffffff0003",
"dstPort": "1",
"props" : {
"BW": "70 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0008/4-of:0000ffffffff0007/1",
"type": "direct",
"linkWidth": 2,
"src": "of:0000ffffffff0008",
"srcPort": "4",
"dst": "of:0000ffffffff0007",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffffff08/4-of:0000ffffffffff03/1",
"type": "optical",
"linkWidth": 2,
"src": "of:0000ffffffffff08",
"srcPort": "4",
"dst": "of:0000ffffffffff03",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:aa/-1",
"ingress": "0E:2A:69:30:13:aa/-1/0-of:0000ffffffff0008/101",
"egress": "of:0000ffffffff0008/101-0E:2A:69:30:13:aa/-1/0",
"cp": {
"device": "of:0000ffffffff0008",
"port": 101
},
"labels": [
"12.13.14.15",
"0E:2A:69:30:13:aa"
],
"props": {}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:88/-1",
"ingress": "0E:2A:69:30:13:88/-1/0-of:0000ffffffff0007/101",
"egress": "of:0000ffffffff0007/101-0E:2A:69:30:13:86/-1/0",
"cp": {
"device": "of:0000ffffffff0007",
"port": 101
},
"labels": [
"4.5.7.6",
"0E:2A:69:30:13:88"
],
"props": {}
}
}
{
"event": "addHost",
"payload": {
"id": "0E:2A:69:30:13:86/-1",
"ingress": "0E:2A:69:30:13:86/-1/0-of:0000ffffffff0003/101",
"egress": "of:0000ffffffff0003/101-0E:2A:69:30:13:86/-1/0",
"cp": {
"device": "of:0000ffffffff0003",
"port": 101
},
"labels": [
"1.2.3.4",
"0E:2A:69:30:13:86"
],
"props": {}
}
}
{
"event": "addInstance",
"payload": {
"id": "local",
"online": true,
"labels": [
"local",
"127.0.0.1"
]
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-2",
"online": true,
"labels": [
"onos-2",
"192.168.2.2"
]
}
}
{
"event": "addInstance",
"payload": {
"id": "onos-3",
"online": false,
"labels": [
"onos-3",
"192.168.3.3"
]
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffff0008",
"type": "switch",
"online": true,
"master": "onos-3",
"labels": [
"0000ffffffff0008",
"FF:FF:FF:FF:00:08",
"sw-8"
],
"metaUi": {
"x": 734,
"y": 477
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffff0003",
"type": "switch",
"online": true,
"master": "local",
"labels": [
"0000ffffffff0003",
"FF:FF:FF:FF:00:03",
"sw-3"
],
"metaUi": {
"x": 282,
"y": 503
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffff0007",
"type": "switch",
"online": true,
"master": "onos-2",
"labels": [
"0000ffffffff0007",
"FF:FF:FF:FF:00:07",
"sw-7"
],
"metaUi": {
"x": 530,
"y": 330
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffffff08",
"type": "roadm",
"online": true,
"master": "onos-3",
"labels": [
"0000ffffffffff08",
"FF:FF:FF:FF:FF:08",
"opt-8"
],
"metaUi": {
"x": 734,
"y": 577
}
}
}
{
"event": "addDevice",
"payload": {
"id": "of:0000ffffffffff03",
"type": "roadm",
"online": true,
"master": "local",
"labels": [
"0000ffffffffff03",
"FF:FF:FF:FF:FF:03",
"opt-3"
],
"metaUi": {
"x": 282,
"y": 603
}
}
}
{
"event": "addLink",
"payload": {
"id": "of:0000ffffffff0008/4-of:0000ffffffffff08/1",
"type": "pktopt",
"linkWidth": 2,
"src": "of:0000ffffffff0008",
"srcPort": "4",
"dst": "of:0000ffffffffff08",
"dstPort": "1",
"props" : {
"BW": "90 Gb"
}
}
}
{
"comments": [
"Developing ONOS instance visualization"
],
"title": "ONOS Instance Scenario",
"params": {
"lastAuto": 17
},
"description": [
"Visualizing ONOS instances.",
"",
"Press 'S' to load initial events.",
"",
"Press spacebar to complete the scenario..."
]
}
......@@ -699,6 +699,16 @@
// ..........................................................
// UI API
var fpConfig = {
TR: {
side: 'right'
},
TL: {
side: 'left'
}
};
uiApi = {
addLib: function (libName, api) {
// TODO: validation of args
......@@ -713,6 +723,7 @@
*/
addFloatingPanel: function (id, position) {
var pos = position || 'TR',
cfg = fpConfig[pos],
el,
fp;
......@@ -723,22 +734,37 @@
el = $floatPanels.append('div')
.attr('id', id)
.attr('class', 'fpanel');
.attr('class', 'fpanel')
.style('opacity', 0);
// has to be called after el is set.
el.style(cfg.side, pxHide());
function pxShow() {
return '20px';
}
function pxHide() {
return (-20 - widthVal()) + 'px';
}
function widthVal() {
return el.style('width').replace(/px$/, '');
}
fp = {
id: id,
el: el,
pos: pos,
show: function () {
console.log('show pane: ' + id);
el.transition().duration(750)
.style('right', '20px')
.style(cfg.side, pxShow())
.style('opacity', 1);
},
hide: function () {
console.log('hide pane: ' + id);
el.transition().duration(750)
.style('right', '-320px')
.style(cfg.side, pxHide())
.style('opacity', 0);
},
empty: function () {
......@@ -746,6 +772,12 @@
},
append: function (what) {
return el.append(what);
},
width: function (w) {
if (w === undefined) {
return widthVal();
}
el.style('width', w);
}
};
fpanels[id] = fp;
......
......@@ -197,6 +197,39 @@
border: 0;
}
/* ONOS instance stuff */
#topo-oibox {
width: 80px;
}
#topo-oibox .onosInst {
margin: 6px 0;
padding: 3px;
width: 80%;
left: 10%;
height: 40px;
cursor: pointer;
/* theme-related */
color: #444;
background-color: #ccc;
border: 2px dashed #aaa;
}
#topo-oibox .onosInst.online {
/* theme-related */
color: #113;
background-color: #bbf;
border: 2px solid #555;
}
#topo svg .suppressed,
#topo-oibox .suppressed {
opacity: 0.2;
}
/* Web Socket Closed Mask (starts hidden) */
#topo-mask {
......
This diff is collapsed. Click to expand it.