홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
626d210f 1 parent 11c30ac6

GUI -- Implemented showSummary event (Icon still to do..) WIP 

- included CSS for light/dark themes.
- Removed height from panel default settings.
- Fixed 'restart' bug in mock server - (renamed to mockserver.js)

Change-Id: I615299e6f8f07843edb074050b7450eea501bfbb
Inline Side-by-side
Showing 8 changed files with 184 additions and 54 deletions
...@@ -26,21 +26,21 @@ ...@@ -26,21 +26,21 @@
26 width: 200px; 26 width: 200px;
27 right: -220px; 27 right: -220px;
28 opacity: 0; 28 opacity: 0;
29 - background-color: rgba(255,255,255,0.8);
30 29
31 padding: 10px; 30 padding: 10px;
32 - color: black;
33 font-size: 10pt; 31 font-size: 10pt;
34 32
35 -moz-border-radius: 6px; 33 -moz-border-radius: 6px;
36 border-radius: 6px; 34 border-radius: 6px;
37 - box-shadow: 0px 2px 12px #777;
38 } 35 }
39 36
40 -/* TODO: light/dark themes */
41 .light .floatpanel { 37 .light .floatpanel {
42 - 38 + background-color: rgba(255,255,255,0.8);
39 + color: black;
40 + box-shadow: 0 2px 12px #777;
43 } 41 }
44 .dark .floatpanel { 42 .dark .floatpanel {
45 - 43 + background-color: rgba(50,50,50,0.8);
44 + color: #ccc;
45 + box-shadow: 0 2px 12px #000;
46 } 46 }
......
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
25 var defaultSettings = { 25 var defaultSettings = {
26 edge: 'right', 26 edge: 'right',
27 width: 200, 27 width: 200,
28 - height: 80,
29 margin: 20, 28 margin: 20,
30 xtnTime: 750 29 xtnTime: 750
31 }; 30 };
...@@ -87,7 +86,9 @@ ...@@ -87,7 +86,9 @@
87 // has to be called after el is set 86 // has to be called after el is set
88 p.el.style(p.settings.edge, pxHide(p)); 87 p.el.style(p.settings.edge, pxHide(p));
89 panelWidth(p.settings.width); 88 panelWidth(p.settings.width);
90 - panelHeight(p.settings.height); 89 + if (p.settings.height) {
90 + panelHeight(p.settings.height);
91 + }
91 92
92 panels[id] = p; 93 panels[id] = p;
93 94
......
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
18 ONOS GUI -- Topology View -- CSS file 18 ONOS GUI -- Topology View -- CSS file
19 */ 19 */
20 20
21 +/* --- Topo Map --- */
22 +
21 .light #ov-topo svg { 23 .light #ov-topo svg {
22 background-color: #fff; 24 background-color: #fff;
23 /* For Debugging the placement of the SVG layer... */ 25 /* For Debugging the placement of the SVG layer... */
...@@ -39,3 +41,80 @@ ...@@ -39,3 +41,80 @@
39 .dark #ov-topo svg #topo-map { 41 .dark #ov-topo svg #topo-map {
40 stroke: #444; 42 stroke: #444;
41 } 43 }
44 +
45 +
46 +/* --- Topo Panels --- */
47 +
48 +#topo-p-summary {
49 + /* Base css from panel.css */
50 +
51 +}
52 +
53 +#topo-p-summary svg {
54 + display: inline-block;
55 + width: 42px;
56 + height: 42px;
57 +}
58 +
59 +#topo-p-summary svg .glyphIcon {
60 + stroke: none;
61 + fill-rule: evenodd;
62 +}
63 +.light #topo-p-summary svg .glyphIcon {
64 + fill: black;
65 +}
66 +.dark #topo-p-summary svg .glyphIcon {
67 + fill: #ddd;
68 +}
69 +
70 +#topo-p-summary h2 {
71 + position: absolute;
72 + margin: 0 4px;
73 + top: 20px;
74 + left: 50px;
75 +}
76 +.light #topo-p-summary h2 {
77 + color: black;
78 +}
79 +.dark #topo-p-summary h2 {
80 + color: #ddd;
81 +}
82 +
83 +#topo-p-summary h3 {
84 + margin: 0 4px;
85 + top: 20px;
86 + left: 50px;
87 +}
88 +.light #topo-p-summary h3 {
89 + color: black;
90 +}
91 +.dark #topo-p-summary h3 {
92 + color: #ddd;
93 +}
94 +
95 +#topo-p-summary p, table {
96 + margin: 4px 4px;
97 +}
98 +
99 +#topo-p-summary td.label {
100 + font-style: italic;
101 + padding-right: 12px;
102 + /* works for both light and dark themes ... */
103 + color: #777;
104 +}
105 +
106 +#topo-p-summary td.value {
107 +}
108 +
109 +#topo-p-summary hr {
110 + height: 1px;
111 + border: 0;
112 +}
113 +.light #topo-p-summary hr {
114 + background-color: #ccc;
115 + color: #ccc;
116 +}
117 +.dark #topo-p-summary hr {
118 + background-color: #888;
119 + color: #888;
120 +}
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 ]; 28 ];
29 29
30 // references to injected services etc. 30 // references to injected services etc.
31 - var $log, fs, ks, zs, gs, ms, tes, tfs, tps; 31 + var $log, fs, ks, zs, gs, ms, tfs;
32 32
33 // DOM elements 33 // DOM elements
34 var ovtopo, svg, defs, zoomLayer, mapG, forceG; 34 var ovtopo, svg, defs, zoomLayer, mapG, forceG;
...@@ -137,11 +137,6 @@ ...@@ -137,11 +137,6 @@
137 tfs.initForce(forceG, svg.attr('width'), svg.attr('height')); 137 tfs.initForce(forceG, svg.attr('width'), svg.attr('height'));
138 } 138 }
139 139
140 - function setUpPanels() {
141 - tps.initPanels();
142 - }
143 -
144 -
145 // --- Controller Definition ----------------------------------------- 140 // --- Controller Definition -----------------------------------------
146 141
147 angular.module('ovTopo', moduleDependencies) 142 angular.module('ovTopo', moduleDependencies)
...@@ -153,7 +148,7 @@ ...@@ -153,7 +148,7 @@
153 'TopoEventService', 'TopoForceService', 'TopoPanelService', 148 'TopoEventService', 'TopoForceService', 'TopoPanelService',
154 149
155 function ($scope, _$log_, $loc, $timeout, _fs_, mast, 150 function ($scope, _$log_, $loc, $timeout, _fs_, mast,
156 - _ks_, _zs_, _gs_, _ms_, _tes_, _tfs_, _tps_) { 151 + _ks_, _zs_, _gs_, _ms_, tes, _tfs_, tps) {
157 var self = this; 152 var self = this;
158 $log = _$log_; 153 $log = _$log_;
159 fs = _fs_; 154 fs = _fs_;
...@@ -161,9 +156,7 @@ ...@@ -161,9 +156,7 @@
161 zs = _zs_; 156 zs = _zs_;
162 gs = _gs_; 157 gs = _gs_;
163 ms = _ms_; 158 ms = _ms_;
164 - tes = _tes_;
165 tfs = _tfs_; 159 tfs = _tfs_;
166 - tps = _tps_;
167 160
168 self.notifyResize = function () { 161 self.notifyResize = function () {
169 svgResized(fs.windowSize(mast.mastHeight())); 162 svgResized(fs.windowSize(mast.mastHeight()));
...@@ -173,7 +166,7 @@ ...@@ -173,7 +166,7 @@
173 $scope.$on('$destroy', function () { 166 $scope.$on('$destroy', function () {
174 $log.log('OvTopoCtrl is saying Buh-Bye!'); 167 $log.log('OvTopoCtrl is saying Buh-Bye!');
175 tes.closeSock(); 168 tes.closeSock();
176 - ps.destroyPanel('topo-p-summary'); 169 + tps.destroyPanels();
177 }); 170 });
178 171
179 // svg layer and initialization of components 172 // svg layer and initialization of components
...@@ -190,9 +183,8 @@ ...@@ -190,9 +183,8 @@
190 setUpZoom(); 183 setUpZoom();
191 setUpMap(); 184 setUpMap();
192 setUpForce(); 185 setUpForce();
193 - setUpPanels();
194 186
195 - // open up a connection to the server... 187 + tps.initPanels();
196 tes.openSock(); 188 tes.openSock();
197 189
198 $log.log('OvTopoCtrl has been created'); 190 $log.log('OvTopoCtrl has been created');
......
...@@ -25,6 +25,14 @@ ...@@ -25,6 +25,14 @@
25 // injected refs 25 // injected refs
26 var $log, ps; 26 var $log, ps;
27 27
28 + // constants
29 + var idSum = 'topo-p-summary',
30 + idDet = 'topo-p-detail',
31 + idIns = 'topo-p-instance',
32 + panelOpts = {
33 + width: 260
34 + };
35 +
28 // internal state 36 // internal state
29 var settings; 37 var settings;
30 38
...@@ -45,6 +53,54 @@ ...@@ -45,6 +53,54 @@
45 53
46 // ========================== 54 // ==========================
47 55
56 + function addSep(tbody) {
57 + tbody.append('tr').append('td').attr('colspan', 2).append('hr');
58 + }
59 +
60 + function addProp(tbody, label, value) {
61 + var tr = tbody.append('tr');
62 +
63 + function addCell(cls, txt) {
64 + tr.append('td').attr('class', cls).text(txt);
65 + }
66 + addCell('label', label + ' :');
67 + addCell('value', value);
68 + }
69 +
70 + function populateSummary(data) {
71 + summaryPanel.empty();
72 +
73 + var svg = summaryPanel.append('svg').attr({
74 + width: 40,
75 + height: 40
76 + }).style('background-color', 'goldenrod'),
77 + iid = '#' + (data.type || 'unknown');
78 +
79 + var title = summaryPanel.append('h2'),
80 + table = summaryPanel.append('table'),
81 + tbody = table.append('tbody');
82 +
83 + // append glyph iid to SVG // black fill
84 + // append glyph bird to SVG // white fill
85 +
86 + title.text(data.id);
87 +
88 + data.propOrder.forEach(function(p) {
89 + if (p === '-') {
90 + addSep(tbody);
91 + } else {
92 + addProp(tbody, p, data.props[p]);
93 + }
94 + });
95 + }
96 +
97 + function showSummaryPanel() {
98 + summaryPanel.show();
99 +
100 + }
101 +
102 + // ==========================
103 +
48 angular.module('ovTopo') 104 angular.module('ovTopo')
49 .factory('TopoPanelService', 105 .factory('TopoPanelService',
50 ['$log', 'PanelService', 106 ['$log', 'PanelService',
...@@ -54,20 +110,24 @@ ...@@ -54,20 +110,24 @@
54 ps = _ps_; 110 ps = _ps_;
55 111
56 function initPanels() { 112 function initPanels() {
57 - summaryPanel = ps.createPanel('topo-p-summary'); 113 + summaryPanel = ps.createPanel(idSum, panelOpts);
58 // TODO: set up detail and instance panels.. 114 // TODO: set up detail and instance panels..
59 } 115 }
60 116
61 - function showSummary(payload) { 117 + function destroyPanels() {
62 - summaryPanel.empty(); 118 + ps.destroyPanel(idSum);
63 - summaryPanel.append('h2').text(payload.id); 119 + summaryPanel = null;
64 - // TODO: complete the formatting... 120 + // TODO: destroy detail and instance panels..
121 + }
65 122
66 - summaryPanel.show(); 123 + function showSummary(payload) {
124 + populateSummary(payload);
125 + showSummaryPanel();
67 } 126 }
68 127
69 return { 128 return {
70 initPanels: initPanels, 129 initPanels: initPanels,
130 + destroyPanels: destroyPanels,
71 showSummary: showSummary 131 showSummary: showSummary
72 }; 132 };
73 }]); 133 }]);
......
...@@ -72,7 +72,6 @@ describe('factory: fw/layer/panel.js', function () { ...@@ -72,7 +72,6 @@ describe('factory: fw/layer/panel.js', function () {
72 expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', { 72 expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', {
73 edge: 'right', 73 edge: 'right',
74 width: 200, 74 width: 200,
75 - height: 80,
76 margin: 20, 75 margin: 20,
77 xtnTime: 750 76 xtnTime: 750
78 }); 77 });
...@@ -120,7 +119,6 @@ describe('factory: fw/layer/panel.js', function () { ...@@ -120,7 +119,6 @@ describe('factory: fw/layer/panel.js', function () {
120 expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', { 119 expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', {
121 edge: 'left', 120 edge: 'left',
122 width: 250, 121 width: 250,
123 - height: 80,
124 margin: 20, 122 margin: 20,
125 xtnTime: 750 123 xtnTime: 750
126 }); 124 });
......
...@@ -34,7 +34,7 @@ describe('factory: view/topo/topoPanel.js', function() { ...@@ -34,7 +34,7 @@ describe('factory: view/topo/topoPanel.js', function() {
34 34
35 it('should define api functions', function () { 35 it('should define api functions', function () {
36 expect(fs.areFunctions(tps, [ 36 expect(fs.areFunctions(tps, [
37 - 'initPanels' 37 + 'initPanels', 'destroyPanels', 'showSummary'
38 ])).toBeTruthy(); 38 ])).toBeTruthy();
39 }); 39 });
40 40
......
...@@ -12,7 +12,8 @@ var lastcmd, // last command executed ...@@ -12,7 +12,8 @@ var lastcmd, // last command executed
12 lastargs, // arguments to last command 12 lastargs, // arguments to last command
13 connection, // ws connection 13 connection, // ws connection
14 origin, // origin of connection 14 origin, // origin of connection
15 - scenario, // test scenario name 15 + scid, // scenario ID
16 + scdata, // scenario data
16 scdone, // shows when scenario is over 17 scdone, // shows when scenario is over
17 evno, // next event number 18 evno, // next event number
18 evdata; // event data 19 evdata; // event data
...@@ -35,6 +36,7 @@ server.listen(port, function() { ...@@ -35,6 +36,7 @@ server.listen(port, function() {
35 36
36 server.on('listening', function () { 37 server.on('listening', function () {
37 console.log('OK, server is running'); 38 console.log('OK, server is running');
39 + console.log('(? for help)');
38 }); 40 });
39 41
40 var wsServer = new WebSocketServer({ 42 var wsServer = new WebSocketServer({
...@@ -163,10 +165,10 @@ function customMessage(m) { ...@@ -163,10 +165,10 @@ function customMessage(m) {
163 165
164 function showScenarioStatus() { 166 function showScenarioStatus() {
165 var msg; 167 var msg;
166 - if (!scenario) { 168 + if (!scid) {
167 console.log('No scenario loaded.'); 169 console.log('No scenario loaded.');
168 } else { 170 } else {
169 - msg = 'Scenario: "' + scenario + '", ' + 171 + msg = 'Scenario: "' + scid + '", ' +
170 (scdone ? 'DONE' : 'next event: ' + evno); 172 (scdone ? 'DONE' : 'next event: ' + evno);
171 console.log(msg); 173 console.log(msg);
172 } 174 }
...@@ -174,7 +176,19 @@ function showScenarioStatus() { ...@@ -174,7 +176,19 @@ function showScenarioStatus() {
174 176
175 function scenarioPath(evno) { 177 function scenarioPath(evno) {
176 var file = evno ? ('/ev_' + evno + '_onos.json') : '/scenario.json'; 178 var file = evno ? ('/ev_' + evno + '_onos.json') : '/scenario.json';
177 - return 'ev/' + scenario + file; 179 + return 'ev/' + scid + file;
180 +}
181 +
182 +
183 +function initScenario(verb) {
184 + console.log(); // get past prompt
185 + console.log(verb + ' scenario "' + scid + '"');
186 + console.log(scdata.title);
187 + scdata.description.forEach(function (d) {
188 + console.log(' ' + d);
189 + });
190 + evno = 1;
191 + scdone = false;
178 } 192 }
179 193
180 function setScenario(id) { 194 function setScenario(id) {
...@@ -183,38 +197,24 @@ function setScenario(id) { ...@@ -183,38 +197,24 @@ function setScenario(id) {
183 } 197 }
184 198
185 evdata = null; 199 evdata = null;
186 - scenario = id; 200 + scid = id;
187 fs.readFile(scenarioPath(), 'utf8', function (err, data) { 201 fs.readFile(scenarioPath(), 'utf8', function (err, data) {
188 if (err) { 202 if (err) {
189 console.warn('No scenario named "' + id + '"', err); 203 console.warn('No scenario named "' + id + '"', err);
190 - scenario = null; 204 + scid = null;
191 } else { 205 } else {
192 - evdata = JSON.parse(data); 206 + scdata = JSON.parse(data);
193 - console.log(); // get past prompt 207 + initScenario('Loading');
194 - console.log('Loading scenario "' + id + '"');
195 - console.log(evdata.title);
196 - evdata.description.forEach(function (d) {
197 - console.log(' ' + d);
198 - });
199 - evno = 1;
200 - scdone = false;
201 } 208 }
202 rl.prompt(); 209 rl.prompt();
203 }); 210 });
204 } 211 }
205 212
206 function restartScenario() { 213 function restartScenario() {
207 - if (!scenario) { 214 + if (!scid) {
208 console.log('No scenario loaded.'); 215 console.log('No scenario loaded.');
209 } else { 216 } else {
210 - console.log(); 217 + initScenario('Restarting');
211 - console.log('Restarting scenario "' + scenario + '"');
212 - console.log(evdata.title);
213 - evdata.description.forEach(function (d) {
214 - console.log(' ' + d);
215 - });
216 - evno = 1;
217 - scdone = false;
218 } 218 }
219 rl.prompt(); 219 rl.prompt();
220 } 220 }
...@@ -222,7 +222,7 @@ function restartScenario() { ...@@ -222,7 +222,7 @@ function restartScenario() {
222 function nextEvent() { 222 function nextEvent() {
223 var path; 223 var path;
224 224
225 - if (!scenario) { 225 + if (!scid) {
226 console.log('No scenario loaded.'); 226 console.log('No scenario loaded.');
227 rl.prompt(); 227 rl.prompt();
228 } else if (!connection) { 228 } else if (!connection) {
......