홍길동 / 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
1 +/*
2 + Base CSS file
3 +
4 + @author Simon Hunt
5 + */
6 +
7 +html {
8 + font-family: sans-serif;
9 + -webkit-text-size-adjust: 100%;
10 + -ms-text-size-adjust: 100%;
11 +}
12 +
13 +body {
14 + margin: 0;
15 +}
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 +<!--
3 + ONOS UI - single page web app
4 +
5 + @author Simon Hunt
6 + -->
2 <html> 7 <html>
3 <head> 8 <head>
4 <title>ONOS GUI</title> 9 <title>ONOS GUI</title>
5 10
6 <script src="libs/d3.min.js"></script> 11 <script src="libs/d3.min.js"></script>
7 <script src="libs/jquery-2.1.1.min.js"></script> 12 <script src="libs/jquery-2.1.1.min.js"></script>
13 +
14 + <link rel="stylesheet" href="base.css">
15 + <link rel="stylesheet" href="onos.css">
16 +
17 + <script src="onosui.js"></script>
18 +
8 </head> 19 </head>
9 <body> 20 <body>
10 - <h1>ONOS GUI</h1> 21 + <div id="frame">
11 - Sort of... 22 + <div id="mast">
23 + <span class="title">
24 + ONOS Web UI
25 + </span>
26 + <span class="right">
27 + <span class="radio">[one]</span>
28 + <span class="radio">[two]</span>
29 + <span class="radio">[three]</span>
30 + </span>
31 + </div>
32 + <div id="view"></div>
33 + </div>
34 +
35 + // Initialize the UI...
36 + <script type="text/javascript">
37 + var ONOS = $.onos({note: "config, if needed"});
38 + </script>
39 +
40 + // include module files
41 + // + mast.js
42 + // + nav.js
43 + // + .... application views
44 +
45 + // for now, we are just bootstrapping the network visualization
46 + <script src="network.js" type="text/javascript"></script>
47 +
48 + // finally, build the UI
49 + <script type="text/javascript">
50 + $(ONOS.buildUi);
51 + </script>
52 +
12 </body> 53 </body>
13 </html> 54 </html>
......
1 +/*
2 + Module template file.
3 +
4 + @author Simon Hunt
5 + */
6 +
7 +(function (onos) {
8 + 'use strict';
9 +
10 + var api = onos.api;
11 +
12 + // == define your functions here.....
13 +
14 +
15 + // == register views here, with links to lifecycle callbacks
16 +
17 +// api.addView('view-id', {/* callbacks */});
18 +
19 +
20 +}(ONOS));
This diff is collapsed. Click to expand it.
1 +{
2 + "id": "network-v1",
3 + "meta": {
4 + "__comment_1__": "This is sample data for developing the ONOS UI",
5 + "foo": "bar",
6 + "zoo": "goo"
7 + },
8 + "nodes": [
9 + {
10 + "id": "switch-1",
11 + "type": "opt",
12 + "status": "good"
13 + },
14 + {
15 + "id": "switch-2",
16 + "type": "opt",
17 + "status": "good"
18 + },
19 + {
20 + "id": "switch-3",
21 + "type": "opt",
22 + "status": "good"
23 + },
24 + {
25 + "id": "switch-4",
26 + "type": "opt",
27 + "status": "good"
28 + },
29 + {
30 + "id": "switch-11",
31 + "type": "pkt",
32 + "status": "good"
33 + },
34 + {
35 + "id": "switch-12",
36 + "type": "pkt",
37 + "status": "good"
38 + },
39 + {
40 + "id": "switch-13",
41 + "type": "pkt",
42 + "status": "good"
43 + }
44 + ],
45 + "links": [
46 + { "src": "switch-1", "dst": "switch-2" },
47 + { "src": "switch-1", "dst": "switch-3" },
48 + { "src": "switch-1", "dst": "switch-4" },
49 + { "src": "switch-2", "dst": "switch-3" },
50 + { "src": "switch-2", "dst": "switch-4" },
51 + { "src": "switch-3", "dst": "switch-4" },
52 + { "src": "switch-13", "dst": "switch-3" },
53 + { "src": "switch-12", "dst": "switch-2" },
54 + { "src": "switch-11", "dst": "switch-1" }
55 + ]
56 +}
1 +/*
2 + ONOS CSS file
3 +
4 + @author Simon Hunt
5 + */
6 +
7 +body, html {
8 + height: 100%;
9 +}
10 +
11 +/*
12 + * Classes
13 + */
14 +
15 +span.title {
16 + color: red;
17 + font-size: 16pt;
18 + font-style: italic;
19 +}
20 +
21 +span.radio {
22 + color: darkslateblue;
23 +}
24 +
25 +span.right {
26 + float: right;
27 +}
28 +
29 +/*
30 + * === DEBUGGING ======
31 + */
32 +svg {
33 + border: 1px dashed red;
34 +}
35 +
36 +
37 +/*
38 + * Network Graph elements ======================================
39 + */
40 +
41 +.link {
42 + fill: none;
43 + stroke: #666;
44 + stroke-width: 1.5px;
45 + opacity: .7;
46 + /*marker-end: url(#end);*/
47 +
48 + transition: opacity 250ms;
49 + -webkit-transition: opacity 250ms;
50 + -moz-transition: opacity 250ms;
51 +}
52 +
53 +marker#end {
54 + fill: #666;
55 + stroke: #666;
56 + stroke-width: 1.5px;
57 +}
58 +
59 +.node rect {
60 + stroke-width: 1.5px;
61 +
62 + transition: opacity 250ms;
63 + -webkit-transition: opacity 250ms;
64 + -moz-transition: opacity 250ms;
65 +}
66 +
67 +.node text {
68 + fill: #000;
69 + font: 10px sans-serif;
70 + pointer-events: none;
71 +}
72 +
73 +.node.selected rect {
74 + filter: url(#blue-glow);
75 +}
76 +
77 +.link.inactive,
78 +.node.inactive rect,
79 +.node.inactive text {
80 + opacity: .2;
81 +}
82 +
83 +.node.inactive.selected rect,
84 +.node.inactive.selected text {
85 + opacity: .6;
86 +}
87 +
88 +.legend {
89 + position: fixed;
90 +}
91 +
92 +.legend .category rect {
93 + stroke-width: 1px;
94 +}
95 +
96 +.legend .category text {
97 + fill: #000;
98 + font: 10px sans-serif;
99 + pointer-events: none;
100 +}
101 +
102 +/*
103 + * =============================================================
104 + */
105 +
106 +/*
107 + * Specific structural elements
108 + */
109 +
110 +#frame {
111 + width: 100%;
112 + height: 100%;
113 + background-color: #ffd;
114 +}
115 +
116 +#mast {
117 + height: 32px;
118 + background-color: #dda;
119 + vertical-align: baseline;
120 +}
121 +
122 +#main {
123 + background-color: #99b;
124 +}
1 +/*
2 + ONOS UI Framework.
3 +
4 + @author Simon Hunt
5 + */
6 +
7 +(function ($) {
8 + 'use strict';
9 + var tsI = new Date().getTime(), // initialize time stamp
10 + tsB; // build time stamp
11 +
12 + // attach our main function to the jQuery object
13 + $.onos = function (options) {
14 + // private namespaces
15 + var publicApi; // public api
16 +
17 + // internal state
18 + var views = {},
19 + currentView = null,
20 + built = false;
21 +
22 + // DOM elements etc.
23 + var $mast;
24 +
25 +
26 + // various functions..................
27 +
28 + // throw an error
29 + function throwError(msg) {
30 + // todo: maybe add tracing later
31 + throw new Error(msg);
32 + }
33 +
34 + // define all the public api functions...
35 + publicApi = {
36 + printTime: function () {
37 + console.log("the time is " + new Date());
38 + },
39 +
40 + addView: function (vid, cb) {
41 + views[vid] = {
42 + vid: vid,
43 + cb: cb
44 + };
45 + // TODO: proper registration of views
46 + // for now, make the one (and only) view current..
47 + currentView = views[vid];
48 + }
49 + };
50 +
51 + // function to be called from index.html to build the ONOS UI
52 + function buildOnosUi() {
53 + tsB = new Date().getTime();
54 + tsI = tsB - tsI; // initialization duration
55 +
56 + console.log('ONOS UI initialized in ' + tsI + 'ms');
57 +
58 + if (built) {
59 + throwError("ONOS UI already built!");
60 + }
61 + built = true;
62 +
63 + // TODO: invoke hash navigation
64 + // --- report build errors ---
65 +
66 + // for now, invoke the one and only load function:
67 +
68 + currentView.cb.load();
69 + }
70 +
71 +
72 + // export the api and build-UI function
73 + return {
74 + api: publicApi,
75 + buildUi: buildOnosUi
76 + };
77 + };
78 +
79 +}(jQuery));
...\ No newline at end of file ...\ No newline at end of file