Initial (v.rough) draft of ONOS UI.
Finally got something working, and need to check it in.
Showing
7 changed files
with
338 additions
and
3 deletions
web/gui/src/main/webapp/base.css
0 → 100644
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> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
54 | +</html> | ... | ... |
web/gui/src/main/webapp/module-template.js
0 → 100644
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)); |
web/gui/src/main/webapp/network.js
0 → 100644
This diff is collapsed. Click to expand it.
web/gui/src/main/webapp/network.json
0 → 100644
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 | +} |
web/gui/src/main/webapp/onos.css
0 → 100644
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 | +} |
web/gui/src/main/webapp/onosui.js
0 → 100644
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 |
-
Please register or login to post a comment