홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
0b05d4a9 1 parent df042bd1

Initial (v.rough) draft of ONOS UI. 

Finally got something working, and need to check it in.
Expand all
Inline Side-by-side
Showing 7 changed files with 337 additions and 2 deletions
/*
Base CSS file
@author Simon Hunt
*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
<!DOCTYPE html>
<!--
ONOS UI - single page web app
@author Simon Hunt
-->
<html>
<head>
<title>ONOS GUI</title>
<script src="libs/d3.min.js"></script>
<script src="libs/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="onos.css">
<script src="onosui.js"></script>
</head>
<body>
<h1>ONOS GUI</h1>
Sort of...
<div id="frame">
<div id="mast">
<span class="title">
ONOS Web UI
</span>
<span class="right">
<span class="radio">[one]</span>
<span class="radio">[two]</span>
<span class="radio">[three]</span>
</span>
</div>
<div id="view"></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>
......
/*
Module template file.
@author Simon Hunt
*/
(function (onos) {
'use strict';
var api = onos.api;
// == define your functions here.....
// == register views here, with links to lifecycle callbacks
// api.addView('view-id', {/* callbacks */});
}(ONOS));
This diff is collapsed. Click to expand it.
{
"id": "network-v1",
"meta": {
"__comment_1__": "This is sample data for developing the ONOS UI",
"foo": "bar",
"zoo": "goo"
},
"nodes": [
{
"id": "switch-1",
"type": "opt",
"status": "good"
},
{
"id": "switch-2",
"type": "opt",
"status": "good"
},
{
"id": "switch-3",
"type": "opt",
"status": "good"
},
{
"id": "switch-4",
"type": "opt",
"status": "good"
},
{
"id": "switch-11",
"type": "pkt",
"status": "good"
},
{
"id": "switch-12",
"type": "pkt",
"status": "good"
},
{
"id": "switch-13",
"type": "pkt",
"status": "good"
}
],
"links": [
{ "src": "switch-1", "dst": "switch-2" },
{ "src": "switch-1", "dst": "switch-3" },
{ "src": "switch-1", "dst": "switch-4" },
{ "src": "switch-2", "dst": "switch-3" },
{ "src": "switch-2", "dst": "switch-4" },
{ "src": "switch-3", "dst": "switch-4" },
{ "src": "switch-13", "dst": "switch-3" },
{ "src": "switch-12", "dst": "switch-2" },
{ "src": "switch-11", "dst": "switch-1" }
]
}
/*
ONOS CSS file
@author Simon Hunt
*/
body, html {
height: 100%;
}
/*
* Classes
*/
span.title {
color: red;
font-size: 16pt;
font-style: italic;
}
span.radio {
color: darkslateblue;
}
span.right {
float: right;
}
/*
* === DEBUGGING ======
*/
svg {
border: 1px dashed red;
}
/*
* Network Graph elements ======================================
*/
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
opacity: .7;
/*marker-end: url(#end);*/
transition: opacity 250ms;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
}
marker#end {
fill: #666;
stroke: #666;
stroke-width: 1.5px;
}
.node rect {
stroke-width: 1.5px;
transition: opacity 250ms;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
}
.node text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
.node.selected rect {
filter: url(#blue-glow);
}
.link.inactive,
.node.inactive rect,
.node.inactive text {
opacity: .2;
}
.node.inactive.selected rect,
.node.inactive.selected text {
opacity: .6;
}
.legend {
position: fixed;
}
.legend .category rect {
stroke-width: 1px;
}
.legend .category text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
}
/*
* =============================================================
*/
/*
* Specific structural elements
*/
#frame {
width: 100%;
height: 100%;
background-color: #ffd;
}
#mast {
height: 32px;
background-color: #dda;
vertical-align: baseline;
}
#main {
background-color: #99b;
}
/*
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