홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
722dfc71 1 parent 3927446e

GUI -- deleted old files. 

Change-Id: I3a504fe7e0597ae1d1bb1f659cd70b0611cadda4
Expand all
Inline Side-by-side
Showing 32 changed files with 0 additions and 1345 deletions
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
Geometry library - based on work by Mike Bostock.
*/
(function() {
if (typeof geo == 'undefined') {
geo = {};
}
var tolerance = 1e-10;
function eq(a, b) {
return (Math.abs(a - b) < tolerance);
}
function gt(a, b) {
return (a - b > -tolerance);
}
function lt(a, b) {
return gt(b, a);
}
geo.eq = eq;
geo.gt = gt;
geo.lt = lt;
geo.LineSegment = function(x1, y1, x2, y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
// Ax + By = C
this.a = y2 - y1;
this.b = x1 - x2;
this.c = x1 * this.a + y1 * this.b;
if (eq(this.a, 0) && eq(this.b, 0)) {
throw new Error(
'Cannot construct a LineSegment with two equal endpoints.');
}
};
geo.LineSegment.prototype.intersect = function(that) {
var d = (this.x1 - this.x2) * (that.y1 - that.y2) -
(this.y1 - this.y2) * (that.x1 - that.x2);
if (eq(d, 0)) {
// The two lines are parallel or very close.
return {
x : NaN,
y : NaN
};
}
var t1 = this.x1 * this.y2 - this.y1 * this.x2,
t2 = that.x1 * that.y2 - that.y1 * that.x2,
x = (t1 * (that.x1 - that.x2) - t2 * (this.x1 - this.x2)) / d,
y = (t1 * (that.y1 - that.y2) - t2 * (this.y1 - this.y2)) / d,
in1 = (gt(x, Math.min(this.x1, this.x2)) && lt(x, Math.max(this.x1, this.x2)) &&
gt(y, Math.min(this.y1, this.y2)) && lt(y, Math.max(this.y1, this.y2))),
in2 = (gt(x, Math.min(that.x1, that.x2)) && lt(x, Math.max(that.x1, that.x2)) &&
gt(y, Math.min(that.y1, that.y2)) && lt(y, Math.max(that.y1, that.y2)));
return {
x : x,
y : y,
in1 : in1,
in2 : in2
};
};
geo.LineSegment.prototype.x = function(y) {
// x = (C - By) / a;
if (this.a) {
return (this.c - this.b * y) / this.a;
} else {
// a == 0 -> horizontal line
return NaN;
}
};
geo.LineSegment.prototype.y = function(x) {
// y = (C - Ax) / b;
if (this.b) {
return (this.c - this.a * x) / this.b;
} else {
// b == 0 -> vertical line
return NaN;
}
};
geo.LineSegment.prototype.length = function() {
return Math.sqrt(
(this.y2 - this.y1) * (this.y2 - this.y1) +
(this.x2 - this.x1) * (this.x2 - this.x1));
};
geo.LineSegment.prototype.offset = function(x, y) {
return new geo.LineSegment(
this.x1 + x, this.y1 + y,
this.x2 + x, this.y2 + y);
};
})();
<!DOCTYPE html>
<!--
~ Copyright 2014 Open Networking Laboratory
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<!--
ONOS UI - single page web app
@author Simon Hunt
-->
<html>
<head>
<meta charset="utf-8">
<title>ONOS GUI</title>
<!--TODO: use the minified version of d3, once debugging is complete -->
<script src="../tp/d3.js"></script>
<script src="../tp/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="../base.css">
<link rel="stylesheet" href="onos.css">
<script src="../geometry.js"></script>
<script src="onos.js"></script>
</head>
<body>
<div id="frame">
<div id="mast">
<img id="logo" src="../img/onos-logo.png">
<span class="title">Open Network Operating System</span>
<span id="displayModes" class="right">
<span id="showAll" class="radio active">All Layers</span>
<span id="showPkt" class="radio">Packet Only</span>
<span id="showOpt" class="radio">Optical Only</span>
</span>
</div>
<div id="view">
<!-- NOTE: svg layer injected here -->
</div>
<div id="flyout"></div>
</div>
<!-- Initialize the UI...-->
<script type="text/javascript">
var ONOS = $.onos({note: "config, if needed"});
</script>
<!-- include module files-->
<!-- + mast.js-->
<!-- + nav.js-->
<!-- + .... application views-->
<!-- for now, we are just bootstrapping the network visualization-->
<script src="network.js" type="text/javascript"></script>
<!-- finally, build the UI-->
<script type="text/javascript">
$(ONOS.buildUi);
</script>
</body>
</html>
{
"meta": {
"comments": [
"This is sample data for developing the ONOS UI (network view)",
" in a standalone mode (no server required).",
" Eventually, we will wire this up to live data",
" from the server, via a websocket.",
"",
"Note that this is just a first-draft of the data --",
" additional fields will be added when they are needed."
],
"otherMetaData": "can go here..."
},
"devices": [
{
"id": "of:0000000000000001",
"labels": ["00:00:00:00:00:00:00:01", "SFO-W10", "opt-1"],
"type": "roadm"
},
{
"id": "of:0000000000000002",
"labels": ["00:00:00:00:00:00:00:02", "SJC-W10", "opt-2"],
"type": "roadm"
},
{
"id": "of:0000000000000003",
"labels": ["00:00:00:00:00:00:00:03", "LAX-W10", "opt-3"],
"type": "roadm"
},
{
"id": "of:0000000000000004",
"labels": ["00:00:00:00:00:00:00:04", "SDG-W10", "opt-4"],
"type": "roadm"
},
{
"id": "of:0000000000000011",
"labels": ["00:00:00:00:00:00:00:11", "SFO-pkt", "pkt-11"],
"type": "switch"
},
{
"id": "of:0000000000000012",
"labels": ["00:00:00:00:00:00:00:12", "SJC-pkt", "pkt-12"],
"type": "switch"
},
{
"id": "of:0000000000000013",
"labels": ["00:00:00:00:00:00:00:13", "LAX-pkt", "pkt-13"],
"type": "switch"
}
],
"linkNotes": [
"even though we have 'directionality' (src/dst), each link is",
" considered to be bi-directional. Note that links between hosts",
" and edge switches are inferred from host information, and not",
" explicitly represented here."
],
"links": [
{
"src": "of:0000000000000001",
"dst": "of:0000000000000002",
"type": "optical",
"srcPort": 1,
"dstPort": 2,
"linkWidth": 1.5
},
{
"src": "of:0000000000000001",
"dst": "of:0000000000000003",
"type": "optical",
"srcPort": 2,
"dstPort": 5,
"linkWidth": 1.5
},
{
"src": "of:0000000000000001",
"dst": "of:0000000000000004",
"type": "optical",
"srcPort": 3,
"dstPort": 2,
"linkWidth": 1.5
},
{
"src": "of:0000000000000002",
"dst": "of:0000000000000003",
"type": "optical",
"srcPort": 3,
"dstPort": 4,
"linkWidth": 1.5
},
{
"src": "of:0000000000000002",
"dst": "of:0000000000000004",
"type": "optical",
"srcPort": 4,
"dstPort": 1,
"linkWidth": 1.5
},
{
"src": "of:0000000000000003",
"dst": "of:0000000000000004",
"type": "optical",
"srcPort": 3,
"dstPort": 3,
"linkWidth": 1.5
},
{
"src": "of:0000000000000013",
"dst": "of:0000000000000003",
"type": "direct",
"srcPort": 1,
"dstPort": 7,
"linkWidth": 1.0
},
{
"src": "of:0000000000000012",
"dst": "of:0000000000000002",
"type": "direct",
"srcPort": 1,
"dstPort": 9,
"linkWidth": 1.0
},
{
"src": "of:0000000000000011",
"dst": "of:0000000000000001",
"type": "direct",
"srcPort": 1,
"dstPort": 6,
"linkWidth": 1.0
}
],
"hosts": [
{
"id": "00:60:d3:00:11:01/7",
"labels": ["00:60:d3:00:11:01/7", "Host-11-A"],
"cp" : {
"device": "of:0000000000000011",
"port": 6
}
},
{
"id": "00:60:d3:00:11:02/7",
"labels": ["00:60:d3:00:11:02/7", "Host-11-B"],
"cp" : {
"device": "of:0000000000000011",
"port": 8
}
},
{
"id": "00:60:d3:00:12:01/4",
"labels": ["00:60:d3:00:12:01/4", "Host-12-C"],
"cp" : {
"device": "of:0000000000000012",
"port": 12
}
},
{
"id": "00:60:d3:00:12:02/4",
"labels": ["00:60:d3:00:12:02/4", "Host-12-D"],
"cp" : {
"device": "of:0000000000000012",
"port": 13
}
},
{
"id": "00:60:d3:00:13:01/19",
"labels": ["00:60:d3:00:13:01/19", "Host-13-E"],
"cp" : {
"device": "of:0000000000000013",
"port": 7
}
},
{
"id": "00:60:d3:00:13:02/19",
"labels": ["00:60:d3:00:13:02/19", "Host-13-F"],
"cp" : {
"device": "of:0000000000000013",
"port": 8
}
}
]
}
{
"devices": [
{
"id": "of:0000ffffffffff08",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff08",
"FF:FF:FF:FF:FF:08",
"?"
]
},
{
"id": "of:0000ffffffffff03",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff03",
"FF:FF:FF:FF:FF:03",
"?"
]
},
{
"id": "of:0000ffffffffff02",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff02",
"FF:FF:FF:FF:FF:02",
"?"
]
},
{
"id": "of:0000ffffffff0003",
"type": "switch",
"online": false,
"labels": [
"0000ffffffff0003",
"FF:FF:FF:FF:00:03",
"?"
]
},
{
"id": "of:0000ffffffffff07",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff07",
"FF:FF:FF:FF:FF:07",
"?"
]
},
{
"id": "of:0000ffffffffff06",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff06",
"FF:FF:FF:FF:FF:06",
"?"
]
},
{
"id": "of:0000ffffffff0007",
"type": "switch",
"online": false,
"labels": [
"0000ffffffff0007",
"FF:FF:FF:FF:00:07",
"?"
]
},
{
"id": "of:0000ffffffffff05",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff05",
"FF:FF:FF:FF:FF:05",
"?"
]
},
{
"id": "of:0000ffffffff0009",
"type": "switch",
"online": false,
"labels": [
"0000ffffffff0009",
"FF:FF:FF:FF:00:09",
"?"
]
},
{
"id": "of:0000ffffffffff04",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff04",
"FF:FF:FF:FF:FF:04",
"?"
]
},
{
"id": "of:0000ffffffff000A",
"type": "switch",
"online": false,
"labels": [
"0000ffffffff000A",
"FF:FF:FF:FF:00:0A",
"?"
]
},
{
"id": "of:0000ffffffff0001",
"type": "switch",
"online": false,
"labels": [
"0000ffffffff0001",
"FF:FF:FF:FF:00:01",
"?"
]
},
{
"id": "of:0000ffffffffff01",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff01",
"FF:FF:FF:FF:FF:01",
"?"
]
},
{
"id": "of:0000ffffffff0004",
"type": "switch",
"online": false,
"labels": [
"0000ffffffff0004",
"FF:FF:FF:FF:00:04",
"?"
]
},
{
"id": "of:0000ffffffffff0A",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff0A",
"FF:FF:FF:FF:FF:0A",
"?"
]
},
{
"id": "of:0000ffffffffff09",
"type": "roadm",
"online": false,
"labels": [
"0000ffffffffff09",
"FF:FF:FF:FF:FF:09",
"?"
]
}
],
"links": [
{
"src": "of:0000ffffffffff02",
"srcPort": "20",
"dst": "of:0000ffffffffff05",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffff000A",
"srcPort": "2",
"dst": "of:0000ffffffffff0A",
"dstPort": "1",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff03",
"srcPort": "10",
"dst": "of:0000ffffffffff02",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff07",
"srcPort": "21",
"dst": "of:0000ffffffffff05",
"dstPort": "20",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffff0001",
"srcPort": "2",
"dst": "of:0000ffffffffff01",
"dstPort": "1",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff09",
"srcPort": "20",
"dst": "of:0000ffffffffff0A",
"dstPort": "20",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff06",
"srcPort": "20",
"dst": "of:0000ffffffffff05",
"dstPort": "30",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff07",
"srcPort": "30",
"dst": "of:0000ffffffffff08",
"dstPort": "20",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff03",
"srcPort": "20",
"dst": "of:0000ffffffffff06",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff02",
"srcPort": "10",
"dst": "of:0000ffffffffff01",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff09",
"srcPort": "1",
"dst": "of:0000ffffffff0009",
"dstPort": "2",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff03",
"srcPort": "30",
"dst": "of:0000ffffffffff04",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff07",
"srcPort": "20",
"dst": "of:0000ffffffffff09",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff0A",
"srcPort": "10",
"dst": "of:0000ffffffffff08",
"dstPort": "30",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffff0004",
"srcPort": "2",
"dst": "of:0000ffffffffff04",
"dstPort": "1",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff07",
"srcPort": "1",
"dst": "of:0000ffffffff0007",
"dstPort": "2",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffff0003",
"srcPort": "2",
"dst": "of:0000ffffffffff03",
"dstPort": "1",
"type": "optical",
"linkWidth": 2
},
{
"src": "of:0000ffffffffff06",
"srcPort": "30",
"dst": "of:0000ffffffffff08",
"dstPort": "10",
"type": "optical",
"linkWidth": 2
}
],
"hosts": [
{
"id": "00:00:00:00:00:03/-1",
"cp": {
"device": "of:0000ffffffff0003",
"port": 1
},
"labels": [
"10.0.0.3",
"00:00:00:00:00:03"
]
},
{
"id": "00:00:00:00:00:04/-1",
"cp": {
"device": "of:0000ffffffff0004",
"port": 1
},
"labels": [
"10.0.0.4",
"00:00:00:00:00:04"
]
},
{
"id": "00:00:00:00:00:0A/-1",
"cp": {
"device": "of:0000ffffffff000A",
"port": 1
},
"labels": [
"10.0.0.10",
"00:00:00:00:00:0A"
]
},
{
"id": "00:00:00:00:00:09/-1",
"cp": {
"device": "of:0000ffffffff0009",
"port": 1
},
"labels": [
"10.0.0.9",
"00:00:00:00:00:09"
]
},
{
"id": "00:00:00:00:00:07/-1",
"cp": {
"device": "of:0000ffffffff0007",
"port": 1
},
"labels": [
"10.0.0.7",
"00:00:00:00:00:07"
]
},
{
"id": "00:00:00:00:00:01/-1",
"cp": {
"device": "of:0000ffffffff0001",
"port": 1
},
"labels": [
"10.0.0.1",
"00:00:00:00:00:01"
]
}
]
}
{
"comment": "sample device properties",
"id": "of:0000000000000001",
"type": "roadm",
"propOrder": [ "name", "type", "-", "dpid", "latitude", "longitude", "allowed" ],
"location": {
"type": "latlng",
"lat": 37.6,
"lng": 122.3
},
"props": {
"allowed": true,
"latitude": 37.6,
"longitude": 122.3,
"name": "SFO-W10",
"dpid": "00:00:00:00:00:00:00:01"
}
}
{
"comment": "sample device properties",
"id": "of:0000000000000002",
"type": "switch",
"propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
"location": {
"type": "latlng",
"lat": 37.6,
"lng": 122.3
},
"props": {
"allowed": true,
"latitude": 37.3,
"longitude": 121.9,
"name": "SJC-W10",
"dpid": "00:00:00:00:00:00:00:02",
"type": "Roadm"
}
}
{
"comment": "sample device properties",
"id": "of:0000000000000003",
"type": "switch",
"propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
"location": {
"type": "latlng",
"lat": 33.9,
"lng": 118.4
},
"props": {
"allowed": true,
"latitude": 33.9,
"longitude": 118.4,
"name": "LAX-W10",
"dpid": "00:00:00:00:00:00:00:03",
"type": "Roadm"
}
}
{
"comment": "sample device properties",
"id": "of:0000000000000004",
"type": "switch",
"propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
"location": {
"type": "latlng",
"lat": 32.8,
"lng": 117.1
},
"props": {
"allowed": true,
"latitude": 32.8,
"longitude": 117.1,
"name": "SDG-W10",
"dpid": "00:00:00:00:00:00:00:04",
"type": "Roadm"
}
}
{
"comment": "sample device properties",
"id": "of:0000000000000011",
"type": "switch",
"propOrder": [ "name", "type", "dpid", "optLink" ],
"props": {
"name": "SFO-pkt",
"dpid": "00:00:00:00:00:00:00:11",
"type": "SwitchX",
"optLink": "SFO-W10"
}
}
{
"comment": "sample device properties",
"id": "of:0000000000000012",
"type": "switch",
"propOrder": [ "name", "type", "dpid", "optLink" ],
"props": {
"name": "SJC-pkt",
"dpid": "00:00:00:00:00:00:00:12",
"type": "SwitchX",
"optLink": "SJC-W10"
}
}
{
"comment": "sample device properties",
"id": "of:0000000000000013",
"type": "switch",
"propOrder": [ "name", "type", "dpid", "optLink" ],
"props": {
"name": "LAX-pkt",
"dpid": "00:00:00:00:00:00:00:13",
"type": "SwitchX",
"optLink": "LAX-W10"
}
}
{
"id": "of:0000ffffffff0007",
"type": "switch",
"propOrder": [
"Name",
"Vendor",
"H/W Version",
"S/W Version",
"S/W Version",
"-",
"Latitude",
"Longitude",
"Ports"
],
"props": {
"Name": null,
"Vendor": "Linc",
"H/W Version": "PK",
"S/W Version": "?",
"-": "",
"Latitude": "41.8",
"Longitude": "120.1",
"Ports": "2"
}
}
{
"id": "of:0000ffffffff0009",
"type": "switch",
"propOrder": [
"Name",
"Vendor",
"H/W Version",
"S/W Version",
"S/W Version",
"-",
"Latitude",
"Longitude",
"Ports"
],
"props": {
"Name": null,
"Vendor": "Linc",
"H/W Version": "PK",
"S/W Version": "?",
"-": "",
"Latitude": "40.8",
"Longitude": "73.1",
"Ports": "2"
}
}
{
"id": "of:0000ffffffffff07",
"type": "roadm",
"propOrder": [
"Name",
"Vendor",
"H/W Version",
"S/W Version",
"S/W Version",
"-",
"Latitude",
"Longitude",
"Ports"
],
"props": {
"Name": null,
"Vendor": "Linc",
"H/W Version": "OE",
"S/W Version": "?",
"-": "",
"Latitude": "41.8",
"Longitude": "120.1",
"Ports": "2"
}
}
{
"id": "of:0000ffffffffff09",
"type": "roadm",
"propOrder": [
"Name",
"Vendor",
"H/W Version",
"S/W Version",
"S/W Version",
"-",
"Latitude",
"Longitude",
"Ports"
],
"props": {
"Name": null,
"Vendor": "Linc",
"H/W Version": "OE",
"S/W Version": "?",
"-": "",
"Latitude": "40.8",
"Longitude": "73.1",
"Ports": "2"
}
}
This diff is collapsed. Click to expand it.
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS CSS file
@author Simon Hunt
*/
body, html {
height: 100%;
}
/*
* Classes
*/
img#logo {
height: 38px;
padding-left: 8px;
padding-right: 8px;
}
span.title {
color: #369;
font-size: 14pt;
font-style: italic;
vertical-align: 12px;
}
span.radio {
color: darkslateblue;
font-size: 10pt;
}
span.right {
padding-top: 8px;
padding-right: 16px;
float: right;
}
/*
* Radio Buttons
*/
span.radio {
margin: 4px 0;
border: 1px dotted #222;
padding: 1px 6px;
color: #eee;
cursor: pointer;
}
span.radio.active {
background-color: #bbb;
border: 1px solid #eee;
padding: 1px 6px;
color: #666;
font-weight: bold;
}
/*
* === DEBUGGING ======
*/
svg {
/*border: 1px dashed red;*/
}
svg #bg {
opacity: 0.5;
}
/*
* Network Graph elements ======================================
*/
svg .link {
fill: none;
stroke: #666;
stroke-width: 2.0px;
opacity: .7;
transition: opacity 250ms;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
}
svg .link.host {
stroke: #666;
stroke-width: 1px;
}
svg g.portLayer rect.port {
fill: #ccc;
}
svg g.portLayer text {
font: 8pt sans-serif;
pointer-events: none;
}
svg .node.device rect {
stroke-width: 1.5px;
transition: opacity 250ms;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
}
svg .node.device.fixed rect {
stroke-width: 1.5;
stroke: #ccc;
}
svg .node.device.roadm rect {
fill: #03c;
}
svg .node.device.switch rect {
fill: #06f;
}
svg .node.host circle {
fill: #c96;
stroke: #000;
}
svg .node text {
fill: white;
font: 10pt sans-serif;
pointer-events: none;
}
/* for debugging */
svg .node circle.debug {
fill: white;
stroke: red;
}
svg .node rect.debug {
fill: yellow;
stroke: red;
opacity: 0.35;
}
svg .node.selected rect,
svg .node.selected circle {
filter: url(#blue-glow);
}
svg .link.inactive,
svg .port.inactive,
svg .portText.inactive,
svg .node.inactive rect,
svg .node.inactive circle,
svg .node.inactive text,
svg .node.inactive image {
opacity: .1;
}
svg .node.inactive.selected rect,
svg .node.inactive.selected text,
svg .node.inactive.selected image {
opacity: .6;
}
/*
* === currently unused ===============================================
*/
svg marker#end {
fill: #666;
stroke: #666;
stroke-width: 1.5px;
}
svg .legend {
position: fixed;
}
svg .legend .category rect {
stroke-width: 1px;
}
svg .legend .category text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
/*
* =============================================================
*/
/*
* Specific structural elements
*/
/* This is to ensure that the body does not expand to account for the
flyout details pane, that is positioned "off screen".
*/
body {
overflow: hidden;
}
#mast {
height: 36px;
padding: 4px;
background-color: #bbb;
vertical-align: baseline;
box-shadow: 0px 2px 8px #777;
}
#frame {
width: 100%;
height: 100%;
background-color: #fff;
}
#flyout {
position: absolute;
z-index: 100;
display: block;
top: 10%;
width: 280px;
right: -300px;
opacity: 0;
background-color: rgba(255,255,255,0.8);
padding: 10px;
color: black;
font-size: 10pt;
box-shadow: 2px 2px 16px #777;
}
#flyout h2 {
margin: 8px 4px;
color: black;
vertical-align: middle;
}
#flyout h2 img {
height: 32px;
padding-right: 8px;
vertical-align: middle;
}
#flyout p, table {
margin: 4px 4px;
}
#flyout td.label {
font-style: italic;
color: #777;
padding-right: 12px;
}
#flyout td.value {
}
#flyout hr {
height: 1px;
color: #ccc;
background-color: #ccc;
border: 0;
}
/*
* Copyright 2014 Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS UI Framework.
@author Simon Hunt
*/
(function ($) {
'use strict';
var tsI = new Date().getTime(), // initialize time stamp
tsB; // build time stamp
// attach our main function to the jQuery object
$.onos = function (options) {
// private namespaces
var publicApi; // public api
// internal state
var views = {},
currentView = null,
built = false;
// DOM elements etc.
var $mast;
// various functions..................
// throw an error
function throwError(msg) {
// todo: maybe add tracing later
throw new Error(msg);
}
// define all the public api functions...
publicApi = {
printTime: function () {
console.log("the time is " + new Date());
},
addView: function (vid, cb) {
views[vid] = {
vid: vid,
cb: cb
};
// TODO: proper registration of views
// for now, make the one (and only) view current..
currentView = views[vid];
}
};
// function to be called from index.html to build the ONOS UI
function buildOnosUi() {
tsB = new Date().getTime();
tsI = tsB - tsI; // initialization duration
console.log('ONOS UI initialized in ' + tsI + 'ms');
if (built) {
throwError("ONOS UI already built!");
}
built = true;
// TODO: invoke hash navigation
// --- report build errors ---
// for now, invoke the one and only load function:
currentView.cb.load();
}
// export the api and build-UI function
return {
api: publicApi,
buildUi: buildOnosUi
};
};
}(jQuery));
\ No newline at end of file
This diff is collapsed. Click to expand it.