mirror of
https://github.com/opennetworkinglab/onos.git
synced 2025-11-03 09:41:14 +01:00
Restructuring GUI code - first pass - WIP.
This commit is contained in:
Simon Hunt
parent
a887ba8ae0
commit
195cb389fd
123
web/gui/src/main/webapp/geometry2.js
Normal file
123
web/gui/src/main/webapp/geometry2.js
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
/*
|
||||||
|
* 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);
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
87
web/gui/src/main/webapp/index2.html
Normal file
87
web/gui/src/main/webapp/index2.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!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
|
||||||
|
Version 1.1
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>ONOS GUI (v1.1)</title>
|
||||||
|
|
||||||
|
<link rel="shortcut icon" href="img/onos-logo.png">
|
||||||
|
|
||||||
|
<!-- first script to be run -->
|
||||||
|
<script src="preamble.js"></script>
|
||||||
|
|
||||||
|
<!-- Third party library code included here -->
|
||||||
|
<!--TODO: use the minified version of d3, once debugging is complete -->
|
||||||
|
<script src="libs/d3.js"></script>
|
||||||
|
<script src="libs/jquery-2.1.1.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Base library and framework stylesheets included here -->
|
||||||
|
<link rel="stylesheet" href="base.css">
|
||||||
|
<link rel="stylesheet" href="onos2.css">
|
||||||
|
<link rel="stylesheet" href="mast2.css">
|
||||||
|
|
||||||
|
<!-- This is where contributed stylesheets get INJECTED -->
|
||||||
|
<!-- TODO: replace with template marker and inject refs server-side -->
|
||||||
|
<link rel="stylesheet" href="topo2.css">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- General library modules included here-->
|
||||||
|
<script src="geometry2.js"></script>
|
||||||
|
|
||||||
|
<!-- ONOS UI Framework included here-->
|
||||||
|
<script src="onos2.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="frame">
|
||||||
|
<div id="mast">
|
||||||
|
<!-- NOTE: masthead injected here by mast.js -->
|
||||||
|
</div>
|
||||||
|
<div id="view">
|
||||||
|
<!-- NOTE: views injected here by onos.js -->
|
||||||
|
</div>
|
||||||
|
<div id="overlays">
|
||||||
|
<!-- NOTE: overlays injected here, as needed -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Initialize the UI...-->
|
||||||
|
<script type="text/javascript">
|
||||||
|
var ONOS = $.onos({note: "config, if needed"});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Framework module files included here -->
|
||||||
|
<script src="mast2.js"></script>
|
||||||
|
|
||||||
|
<!-- Contributed (application) views injected here -->
|
||||||
|
<!-- TODO: replace with template marker and inject refs server-side -->
|
||||||
|
<script src="temp2.js"></script>
|
||||||
|
|
||||||
|
<!-- finally, build the UI-->
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(ONOS.buildUi);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
69
web/gui/src/main/webapp/mast2.css
Normal file
69
web/gui/src/main/webapp/mast2.css
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
/*
|
||||||
|
* 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 GUI -- Masthead -- CSS file
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
|
#mast {
|
||||||
|
height: 36px;
|
||||||
|
padding: 4px;
|
||||||
|
background-color: #bbb;
|
||||||
|
vertical-align: baseline;
|
||||||
|
box-shadow: 0px 2px 8px #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mast img#logo {
|
||||||
|
height: 38px;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mast span.title {
|
||||||
|
color: #369;
|
||||||
|
font-size: 14pt;
|
||||||
|
font-style: italic;
|
||||||
|
vertical-align: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mast span.right {
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-right: 16px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mast span.radio {
|
||||||
|
color: darkslateblue;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mast span.radio {
|
||||||
|
margin: 4px 0;
|
||||||
|
border: 1px dotted #222;
|
||||||
|
padding: 1px 6px;
|
||||||
|
color: #eee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mast span.radio.active {
|
||||||
|
background-color: #bbb;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
padding: 1px 6px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
56
web/gui/src/main/webapp/mast2.js
Normal file
56
web/gui/src/main/webapp/mast2.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
/*
|
||||||
|
* 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 GUI -- Masthead
|
||||||
|
|
||||||
|
Defines the masthead for the UI. Injects logo and title, as well as providing
|
||||||
|
the placeholder for a set of radio buttons.
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function (onos){
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// API's
|
||||||
|
var api = onos.api;
|
||||||
|
|
||||||
|
// Config variables
|
||||||
|
var guiTitle = 'Open Networking Operating System';
|
||||||
|
|
||||||
|
// DOM elements and the like
|
||||||
|
var mast = d3.select('#mast');
|
||||||
|
|
||||||
|
mast.append('img')
|
||||||
|
.attr({
|
||||||
|
id: 'logo',
|
||||||
|
src: 'img/onos-logo.png'
|
||||||
|
});
|
||||||
|
|
||||||
|
mast.append('span')
|
||||||
|
.attr({
|
||||||
|
class: 'title'
|
||||||
|
})
|
||||||
|
.text(guiTitle);
|
||||||
|
|
||||||
|
mast.append('span')
|
||||||
|
.attr({
|
||||||
|
id: 'mastRadio',
|
||||||
|
class: 'right'
|
||||||
|
});
|
||||||
|
|
||||||
|
}(ONOS));
|
||||||
204
web/gui/src/main/webapp/onos2.css
Normal file
204
web/gui/src/main/webapp/onos2.css
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
/*
|
||||||
|
* 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 GUI -- Base Framework -- CSS file
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* === 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =============================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
303
web/gui/src/main/webapp/onos2.js
Normal file
303
web/gui/src/main/webapp/onos2.js
Normal file
@ -0,0 +1,303 @@
|
|||||||
|
/*
|
||||||
|
* 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 GUI -- Base Framework
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
'use strict';
|
||||||
|
var tsI = new Date().getTime(), // initialize time stamp
|
||||||
|
tsB, // build time stamp
|
||||||
|
defaultHash = 'temp1';
|
||||||
|
|
||||||
|
|
||||||
|
// attach our main function to the jQuery object
|
||||||
|
$.onos = function (options) {
|
||||||
|
var publicApi; // public api
|
||||||
|
|
||||||
|
// internal state
|
||||||
|
var views = {},
|
||||||
|
current = {
|
||||||
|
view: null,
|
||||||
|
ctx: ''
|
||||||
|
},
|
||||||
|
built = false,
|
||||||
|
errorCount = 0;
|
||||||
|
|
||||||
|
// DOM elements etc.
|
||||||
|
var $view;
|
||||||
|
|
||||||
|
|
||||||
|
// ..........................................................
|
||||||
|
// Internal functions
|
||||||
|
|
||||||
|
// throw an error
|
||||||
|
function throwError(msg) {
|
||||||
|
// separate function, as we might add tracing here too, later
|
||||||
|
throw new Error(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
function doError(msg) {
|
||||||
|
errorCount++;
|
||||||
|
console.warn(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// hash navigation
|
||||||
|
function hash() {
|
||||||
|
var hash = window.location.hash,
|
||||||
|
redo = false,
|
||||||
|
view,
|
||||||
|
t;
|
||||||
|
|
||||||
|
if (!hash) {
|
||||||
|
hash = defaultHash;
|
||||||
|
redo = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
t = parseHash(hash);
|
||||||
|
if (!t || !t.vid) {
|
||||||
|
doError('Unable to parse target hash: ' + hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
view = views[t.vid];
|
||||||
|
if (!view) {
|
||||||
|
doError('No view defined with id: ' + t.vid);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (redo) {
|
||||||
|
window.location.hash = makeHash(t);
|
||||||
|
// the above will result in a hashchange event, invoking
|
||||||
|
// this function again
|
||||||
|
} else {
|
||||||
|
// hash was not modified... navigate to where we need to be
|
||||||
|
navigate(hash, view, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseHash(s) {
|
||||||
|
// extract navigation coordinates from the supplied string
|
||||||
|
// "vid,ctx" --> { vid:vid, ctx:ctx }
|
||||||
|
|
||||||
|
var m = /^[#]{0,1}(\S+),(\S*)$/.exec(s);
|
||||||
|
if (m) {
|
||||||
|
return { vid: m[1], ctx: m[2] };
|
||||||
|
}
|
||||||
|
|
||||||
|
m = /^[#]{0,1}(\S+)$/.exec(s);
|
||||||
|
return m ? { vid: m[1] } : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeHash(t, ctx) {
|
||||||
|
// make a hash string from the given navigation coordinates.
|
||||||
|
// if t is not an object, then it is a vid
|
||||||
|
var h = t,
|
||||||
|
c = ctx || '';
|
||||||
|
|
||||||
|
if ($.isPlainObject(t)) {
|
||||||
|
h = t.vid;
|
||||||
|
c = t.ctx || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (c) {
|
||||||
|
h += ',' + c;
|
||||||
|
}
|
||||||
|
return h;
|
||||||
|
}
|
||||||
|
|
||||||
|
function navigate(hash, view, t) {
|
||||||
|
// closePanes() // flyouts etc.
|
||||||
|
// updateNav() // accordion / selected nav item
|
||||||
|
createView(view);
|
||||||
|
setView(view, hash, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
function reportBuildErrors() {
|
||||||
|
// TODO: validate registered views / nav-item linkage etc.
|
||||||
|
console.log('(no build errors)');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ..........................................................
|
||||||
|
// View life-cycle functions
|
||||||
|
|
||||||
|
function createView(view) {
|
||||||
|
var $d;
|
||||||
|
// lazy initialization of the view
|
||||||
|
if (view && !view.$div) {
|
||||||
|
$d = $view.append('div')
|
||||||
|
.attr({
|
||||||
|
id: view.vid
|
||||||
|
});
|
||||||
|
view.$div = $d; // cache a reference to the selected div
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setView(view, hash, t) {
|
||||||
|
// set the specified view as current, while invoking the
|
||||||
|
// appropriate life-cycle callbacks
|
||||||
|
|
||||||
|
// if there is a current view, and it is not the same as
|
||||||
|
// the incoming view, then unload it...
|
||||||
|
if (current.view && !(current.view.vid !== view.vid)) {
|
||||||
|
current.view.unload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// cache new view and context
|
||||||
|
current.view = view;
|
||||||
|
current.ctx = t.ctx || '';
|
||||||
|
|
||||||
|
// TODO: clear radio button set (store on view?)
|
||||||
|
|
||||||
|
// preload is called only once, after the view is in the DOM
|
||||||
|
if (!view.preloaded) {
|
||||||
|
view.preload(t.ctx);
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear the view of stale data
|
||||||
|
view.reset();
|
||||||
|
|
||||||
|
// load the view
|
||||||
|
view.load(t.ctx);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeView() {
|
||||||
|
if (current.view) {
|
||||||
|
current.view.resize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ..........................................................
|
||||||
|
// View class
|
||||||
|
// Captures state information about a view.
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
// vid : view id
|
||||||
|
// nid : id of associated nav-item (optional)
|
||||||
|
// cb : callbacks (preload, reset, load, resize, unload, error)
|
||||||
|
// data: custom data object (optional)
|
||||||
|
function View(vid) {
|
||||||
|
var av = 'addView(): ',
|
||||||
|
args = Array.prototype.slice.call(arguments),
|
||||||
|
nid,
|
||||||
|
cb,
|
||||||
|
data;
|
||||||
|
|
||||||
|
args.shift(); // first arg is always vid
|
||||||
|
if (typeof args[0] === 'string') { // nid specified
|
||||||
|
nid = args.shift();
|
||||||
|
}
|
||||||
|
cb = args.shift();
|
||||||
|
data = args.shift();
|
||||||
|
|
||||||
|
this.vid = vid;
|
||||||
|
|
||||||
|
if (validateViewArgs(vid)) {
|
||||||
|
this.nid = nid; // explicit navitem id (can be null)
|
||||||
|
this.cb = $.isPlainObject(cb) ? cb : {}; // callbacks
|
||||||
|
this.data = data; // custom data (can be null)
|
||||||
|
this.$div = null; // view not yet added to DOM
|
||||||
|
this.ok = true; // valid view
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateViewArgs(vid) {
|
||||||
|
var ok = false;
|
||||||
|
if (typeof vid !== 'string' || !vid) {
|
||||||
|
doError(av + 'vid required');
|
||||||
|
} else if (views[vid]) {
|
||||||
|
doError(av + 'View ID "' + vid + '" already exists');
|
||||||
|
} else {
|
||||||
|
ok = true;
|
||||||
|
}
|
||||||
|
return ok;
|
||||||
|
}
|
||||||
|
|
||||||
|
var viewInstanceMethods = {
|
||||||
|
toString: function () {
|
||||||
|
return '[View: id="' + this.vid + '"]';
|
||||||
|
},
|
||||||
|
|
||||||
|
token: function() {
|
||||||
|
return {
|
||||||
|
vid: this.vid,
|
||||||
|
nid: this.nid,
|
||||||
|
data: this.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// TODO: create, preload, reset, load, error, resize, unload
|
||||||
|
};
|
||||||
|
|
||||||
|
// attach instance methods to the view prototype
|
||||||
|
$.extend(View.prototype, viewInstanceMethods);
|
||||||
|
|
||||||
|
// ..........................................................
|
||||||
|
// Exported API
|
||||||
|
|
||||||
|
publicApi = {
|
||||||
|
printTime: function () {
|
||||||
|
console.log("the time is " + new Date());
|
||||||
|
},
|
||||||
|
|
||||||
|
addView: function (vid, nid, cb, data) {
|
||||||
|
var view = new View(vid, nid, cb, data),
|
||||||
|
token;
|
||||||
|
if (view.ok) {
|
||||||
|
views[vid] = view;
|
||||||
|
token = view.token();
|
||||||
|
} else {
|
||||||
|
token = { vid: view.vid, bad: true };
|
||||||
|
}
|
||||||
|
return token;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
$view = d3.select('#view');
|
||||||
|
|
||||||
|
$(window).on('hashchange', hash);
|
||||||
|
|
||||||
|
// Invoke hashchange callback to navigate to content
|
||||||
|
// indicated by the window location hash.
|
||||||
|
hash();
|
||||||
|
|
||||||
|
// If there were any build errors, report them
|
||||||
|
reportBuildErrors();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// export the api and build-UI function
|
||||||
|
return {
|
||||||
|
api: publicApi,
|
||||||
|
buildUi: buildOnosUi
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
32
web/gui/src/main/webapp/preamble.js
Normal file
32
web/gui/src/main/webapp/preamble.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/*
|
||||||
|
* 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 GUI -- Preamble -- the first thing we do
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
// Check if the URL in the address bar contains a parameter section
|
||||||
|
// (delineated by '?'). If this is the case, rewrite using '#' instead.
|
||||||
|
|
||||||
|
var m = /([^?]*)\?(.*)/.exec(window.location.href);
|
||||||
|
if (m) {
|
||||||
|
window.location.href = m[1] + '#' + m[2];
|
||||||
|
}
|
||||||
|
|
||||||
|
}());
|
||||||
75
web/gui/src/main/webapp/temp2.js
Normal file
75
web/gui/src/main/webapp/temp2.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
/*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Temporary module file to test the framework integration.
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function (onos) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var api = onos.api;
|
||||||
|
|
||||||
|
var vid,
|
||||||
|
svg;
|
||||||
|
|
||||||
|
// == define your functions here.....
|
||||||
|
|
||||||
|
|
||||||
|
// NOTE: view is a data structure:
|
||||||
|
// {
|
||||||
|
// id: 'view-id',
|
||||||
|
// el: ... // d3 selection of dom view div.
|
||||||
|
// }
|
||||||
|
|
||||||
|
function load(view) {
|
||||||
|
vid = view.id;
|
||||||
|
svg = view.el.append('svg')
|
||||||
|
.attr({
|
||||||
|
width: 400,
|
||||||
|
height: 300
|
||||||
|
});
|
||||||
|
|
||||||
|
var fill = (vid === 'temp1') ? 'red' : 'blue',
|
||||||
|
stroke = (vid === 'temp2') ? 'yellow' : 'black';
|
||||||
|
|
||||||
|
svg.append('circle')
|
||||||
|
.attr({
|
||||||
|
cx: 200,
|
||||||
|
cy: 150,
|
||||||
|
r: 30
|
||||||
|
})
|
||||||
|
.style({
|
||||||
|
fill: fill,
|
||||||
|
stroke: stroke,
|
||||||
|
'stroke-width': 3.5
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// == register views here, with links to lifecycle callbacks
|
||||||
|
|
||||||
|
api.addView('temp1', {
|
||||||
|
load: load
|
||||||
|
});
|
||||||
|
|
||||||
|
api.addView('temp2', {
|
||||||
|
load: load
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}(ONOS));
|
||||||
22
web/gui/src/main/webapp/topo2.css
Normal file
22
web/gui/src/main/webapp/topo2.css
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
/*
|
||||||
|
* 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 GUI -- Topology view -- CSS file
|
||||||
|
|
||||||
|
@author Simon Hunt
|
||||||
|
*/
|
||||||
|
|
||||||
1222
web/gui/src/main/webapp/topo2.js
Normal file
1222
web/gui/src/main/webapp/topo2.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user