홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
4fab8af1 1 parent 3cfce8e3

GUI -- Added mechanism to test device view. 

Themed device view.

Change-Id: I471ec56b94c927d834f8067d06efce33ddfa4596
Inline Side-by-side
Showing 11 changed files with 183 additions and 58 deletions
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- common -- CSS file
19 +
20 + @author Simon Hunt
21 + @author Bri Prebilic Cole
22 + */
23 +
24 +table.summary-list {
25 + /*border: 1px solid red;*/
26 + margin: 4px 50px;
27 + font-size: 10pt;
28 +}
29 +
30 +table.summary-list th {
31 + padding: 5px;
32 +}
33 +.light table.summary-list th {
34 + background-color: #bbb;
35 +}
36 +.dark table.summary-list th {
37 + background-color: #444;
38 + color: #ddd;
39 +}
40 +
41 +table.summary-list td {
42 + padding: 5px;
43 +}
44 +.light table.summary-list td {
45 + background-color: #ddd;
46 +}
47 +.dark table.summary-list td {
48 + background-color: #666;
49 + color: #ddd;
50 +}
...@@ -25,17 +25,94 @@ ...@@ -25,17 +25,94 @@
25 25
26 var $log; 26 var $log;
27 27
28 + var urlSuffix = '/ui/rs/';
29 +
30 +
31 +
32 + // TODO: remove temporary test code
33 + var fakeData = {
34 + '1': {
35 + "devices": [{
36 + "id": "of:0000000000000001",
37 + "available": true,
38 + "role": "MASTER",
39 + "mfr": "Nicira, Inc.",
40 + "hw": "Open vSwitch",
41 + "sw": "2.0.1",
42 + "serial": "None",
43 + "annotations": {
44 + "protocol": "OF_10"
45 + }
46 + },
47 + {
48 + "id": "of:0000000000000004",
49 + "available": true,
50 + "role": "MASTER",
51 + "mfr": "Nicira, Inc.",
52 + "hw": "Open vSwitch",
53 + "sw": "2.0.1",
54 + "serial": "None",
55 + "annotations": {
56 + "protocol": "OF_10"
57 + }
58 + }]
59 + },
60 + '2': {
61 + "devices": [{
62 + "id": "of:0000000000000002",
63 + "available": true,
64 + "role": "MASTER",
65 + "mfr": "Nicira, Inc.",
66 + "hw": "Open vSwitch",
67 + "sw": "2.0.0",
68 + "serial": "None",
69 + "annotations": {
70 + "protocol": "OF_10"
71 + }
72 + },
73 + {
74 + "id": "of:0000000000000006",
75 + "available": true,
76 + "role": "MASTER",
77 + "mfr": "Nicira, Inc.",
78 + "hw": "Open vSwitch",
79 + "sw": "2.1.1",
80 + "serial": "None",
81 + "annotations": {
82 + "protocol": "OF_10"
83 + }
84 + }]
85 + },
86 + 'empty': {
87 + devices: []
88 + }
89 + };
90 +
91 + function getFakeData(url) {
92 + var id = url.slice(5);
93 +
94 + return fakeData[id] || fakeData.empty;
95 + }
96 +
28 angular.module('onosRemote') 97 angular.module('onosRemote')
29 - .factory('RestService', ['$log', '$http', function (_$log_, $http) { 98 + .factory('RestService', ['$log', '$http', 'UrlFnService',
99 + function (_$log_, $http, ufs) {
30 $log = _$log_; 100 $log = _$log_;
31 101
32 function get(url, callback) { 102 function get(url, callback) {
33 - $http.get(url).then(function (response) { 103 + // TODO: remove temporary test code
104 + if (url.match(/^test\//)) {
105 + callback(getFakeData(url));
106 + return;
107 + }
108 + var fullUrl = ufs.urlPrefix() + urlSuffix + url;
109 +
110 + $http.get(fullUrl).then(function (response) {
34 // success 111 // success
35 callback(response.data); 112 callback(response.data);
36 }, function (response) { 113 }, function (response) {
37 // error 114 // error
38 - $log.warn('Failed to retrieve JSON data: ' + url, 115 + $log.warn('Failed to retrieve JSON data: ' + fullUrl,
39 response.status, response.data); 116 response.status, response.data);
40 }); 117 });
41 } 118 }
......
...@@ -49,9 +49,14 @@ ...@@ -49,9 +49,14 @@
49 <script src="fw/svg/map.js"></script> 49 <script src="fw/svg/map.js"></script>
50 <script src="fw/svg/zoom.js"></script> 50 <script src="fw/svg/zoom.js"></script>
51 51
52 + <script src="fw/remote/remote.js"></script>
53 + <script src="fw/remote/urlfn.js"></script>
54 + <script src="fw/remote/rest.js"></script>
55 +
52 <!-- Framework and library stylesheets included here --> 56 <!-- Framework and library stylesheets included here -->
53 <!-- TODO: use a single catenated-minified file here --> 57 <!-- TODO: use a single catenated-minified file here -->
54 <link rel="stylesheet" href="onos.css"> 58 <link rel="stylesheet" href="onos.css">
59 + <link rel="stylesheet" href="common.css">
55 <link rel="stylesheet" href="fw/mast/mast.css"> 60 <link rel="stylesheet" href="fw/mast/mast.css">
56 <link rel="stylesheet" href="fw/nav/nav.css"> 61 <link rel="stylesheet" href="fw/nav/nav.css">
57 62
......
...@@ -50,6 +50,9 @@ body.dark { ...@@ -50,6 +50,9 @@ body.dark {
50 height: 100%; 50 height: 100%;
51 } 51 }
52 52
53 -#view h2 { 53 +.light #view h2 {
54 color: #800; 54 color: #800;
55 } 55 }
56 +.dark #view h2 {
57 + color: #d88;
58 +}
......
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
37 'ngRoute', 37 'ngRoute',
38 'onosUtil', 38 'onosUtil',
39 'onosSvg', 39 'onosSvg',
40 + 'onosRemote',
40 'onosMast' 41 'onosMast'
41 ]; 42 ];
42 43
......
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
20 @author Simon Hunt 20 @author Simon Hunt
21 */ 21 */
22 22
23 -#ov-device table { 23 +#ov-device {
24 - border: 1px; 24 + /* placeholder */
25 - /*color: darkorange;*/
26 } 25 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,7 +2,13 @@ ...@@ -2,7 +2,13 @@
2 <div id="ov-device"> 2 <div id="ov-device">
3 <h2>Device View</h2> 3 <h2>Device View</h2>
4 4
5 - <table> 5 + <table class="summary-list">
6 + <tr>
7 + <th>ID</th>
8 + <th>Manufacturer</th>
9 + <th>Hardware Version</th>
10 + <th>Software Version</th>
11 + </tr>
6 <tr ng-repeat="dev in ctrl.deviceData"> 12 <tr ng-repeat="dev in ctrl.deviceData">
7 <!-- add more property fields for table from device data --> 13 <!-- add more property fields for table from device data -->
8 <td>{{dev.id}}</td> 14 <td>{{dev.id}}</td>
......
...@@ -24,26 +24,19 @@ ...@@ -24,26 +24,19 @@
24 (function () { 24 (function () {
25 'use strict'; 25 'use strict';
26 26
27 - var urlSuffix = '/onos/v1/devices';
28 -
29 angular.module('ovDevice', []) 27 angular.module('ovDevice', [])
30 - .controller('OvDeviceCtrl', ['$log', '$location', 28 + .controller('OvDeviceCtrl', ['$log', '$location', 'RestService',
31 - function ($log, $http, $loc) { 29 + function ($log, $location, rs) {
32 var self = this; 30 var self = this;
33 self.deviceData = []; 31 self.deviceData = [];
34 - //var url = buildUrl($loc) + urlSuffix;
35 - //$log.log(url);
36 32
37 - //$http.get(url).then( 33 + // TODO: remove test code
38 - // //success 34 + var testCase = $location.search().test;
39 - // function (response) { 35 + var url = testCase ? 'test/' + testCase : 'device';
40 - // self.deviceData = response.data.devices; 36 +
41 - // }, 37 + rs.get(url, function (data) {
42 - // //failure 38 + self.deviceData = data.devices;
43 - // function (response) { 39 + });
44 - // $log.warn('Failed to get device data ', response.status);
45 - // }
46 - //);
47 40
48 $log.log('OvDeviceCtrl has been created'); 41 $log.log('OvDeviceCtrl has been created');
49 }]); 42 }]);
......
...@@ -25,6 +25,16 @@ describe('factory: fw/remote/rest.js', function() { ...@@ -25,6 +25,16 @@ describe('factory: fw/remote/rest.js', function() {
25 25
26 beforeEach(module('onosUtil', 'onosRemote')); 26 beforeEach(module('onosUtil', 'onosRemote'));
27 27
28 + beforeEach(module(function($provide) {
29 + $provide.factory('$location', function (){
30 + return {
31 + protocol: function () { return 'http'; },
32 + host: function () { return 'foo'; },
33 + port: function () { return '80'; }
34 + };
35 + })
36 + }));
37 +
28 beforeEach(inject(function (_$log_, _$httpBackend_, FnService, RestService) { 38 beforeEach(inject(function (_$log_, _$httpBackend_, FnService, RestService) {
29 $log = _$log_; 39 $log = _$log_;
30 $httpBackend = _$httpBackend_; 40 $httpBackend = _$httpBackend_;
...@@ -50,10 +60,10 @@ describe('factory: fw/remote/rest.js', function() { ...@@ -50,10 +60,10 @@ describe('factory: fw/remote/rest.js', function() {
50 it('should fetch remote data', function () { 60 it('should fetch remote data', function () {
51 var called = 0, 61 var called = 0,
52 capture = null; 62 capture = null;
53 - $httpBackend.expectGET('/bar').respond(mockData); 63 + $httpBackend.whenGET(/.*/).respond(mockData);
54 spyOn($log, 'warn'); 64 spyOn($log, 'warn');
55 65
56 - rs.get('/bar', function (data) { 66 + rs.get('bar', function (data) {
57 called++; 67 called++;
58 capture = data; 68 capture = data;
59 }); 69 });
...@@ -69,10 +79,10 @@ describe('factory: fw/remote/rest.js', function() { ...@@ -69,10 +79,10 @@ describe('factory: fw/remote/rest.js', function() {
69 it('should fail to fetch remote data', function () { 79 it('should fail to fetch remote data', function () {
70 var called = 0, 80 var called = 0,
71 capture = null; 81 capture = null;
72 - $httpBackend.expectGET('/bar').respond(404, 'Not Found'); 82 + $httpBackend.whenGET(/.*/).respond(404, 'Not Found');
73 spyOn($log, 'warn'); 83 spyOn($log, 'warn');
74 84
75 - rs.get('/bar', function (data) { 85 + rs.get('bar', function (data) {
76 called++; 86 called++;
77 capture = data; 87 capture = data;
78 }); 88 });
...@@ -82,9 +92,8 @@ describe('factory: fw/remote/rest.js', function() { ...@@ -82,9 +92,8 @@ describe('factory: fw/remote/rest.js', function() {
82 $httpBackend.flush(); 92 $httpBackend.flush();
83 expect(called).toEqual(0); 93 expect(called).toEqual(0);
84 expect(capture).toBeNull(); 94 expect(capture).toBeNull();
85 - expect($log.warn) 95 + expect($log.warn).toHaveBeenCalledWith(
86 - .toHaveBeenCalledWith('Failed to retrieve JSON data: /bar', 96 + 'Failed to retrieve JSON data: http://foo:80/ui/rs/bar', 404, 'Not Found');
87 - 404, 'Not Found');
88 }); 97 });
89 98
90 }); 99 });
......
...@@ -28,7 +28,7 @@ describe('factory: fw/remote/urlfn.js', function () { ...@@ -28,7 +28,7 @@ describe('factory: fw/remote/urlfn.js', function () {
28 beforeEach(module(function($provide) { 28 beforeEach(module(function($provide) {
29 $provide.factory('$location', function (){ 29 $provide.factory('$location', function (){
30 return { 30 return {
31 - protocol: function () { return '$http'; }, 31 + protocol: function () { return 'http'; },
32 host: function () { return 'foo'; }, 32 host: function () { return 'foo'; },
33 port: function () { return '80'; } 33 port: function () { return '80'; }
34 }; 34 };
...@@ -53,6 +53,6 @@ describe('factory: fw/remote/urlfn.js', function () { ...@@ -53,6 +53,6 @@ describe('factory: fw/remote/urlfn.js', function () {
53 }); 53 });
54 54
55 it('should build the url prefix', function () { 55 it('should build the url prefix', function () {
56 - expect(ufs.urlPrefix()).toEqual('$http://foo:80'); 56 + expect(ufs.urlPrefix()).toEqual('http://foo:80');
57 }); 57 });
58 }); 58 });
......
...@@ -21,58 +21,40 @@ ...@@ -21,58 +21,40 @@
21 */ 21 */
22 describe('Controller: OvDeviceCtrl', function () { 22 describe('Controller: OvDeviceCtrl', function () {
23 // instantiate the Device module 23 // instantiate the Device module
24 - beforeEach(module('ovDevice')); 24 + beforeEach(module('ovDevice', 'onosRemote'));
25 25
26 var $log, $controller, ctrl, $mockHttp; 26 var $log, $controller, ctrl, $mockHttp;
27 27
28 var fakeData = { 28 var fakeData = {
29 - "devices": [ 29 + "devices": [{
30 - {
31 "id": "of:0000000000000001", 30 "id": "of:0000000000000001",
32 "available": true, 31 "available": true,
33 - "role": "MASTER",
34 "mfr": "Nicira, Inc.", 32 "mfr": "Nicira, Inc.",
35 "hw": "Open vSwitch", 33 "hw": "Open vSwitch",
36 - "sw": "2.0.1", 34 + "sw": "2.0.1"
37 - "serial": "None",
38 - "annotations": {
39 - "protocol": "OF_10"
40 - }
41 }, 35 },
42 { 36 {
43 "id": "of:0000000000000004", 37 "id": "of:0000000000000004",
44 "available": true, 38 "available": true,
45 - "role": "MASTER",
46 "mfr": "Nicira, Inc.", 39 "mfr": "Nicira, Inc.",
47 "hw": "Open vSwitch", 40 "hw": "Open vSwitch",
48 - "sw": "2.0.1", 41 + "sw": "2.0.1"
49 - "serial": "None",
50 - "annotations": {
51 - "protocol": "OF_10"
52 - }
53 }] 42 }]
54 }; 43 };
55 44
56 - // we need an instance of the controller
57 beforeEach(inject(function(_$log_, _$controller_, $httpBackend) { 45 beforeEach(inject(function(_$log_, _$controller_, $httpBackend) {
58 $log = _$log_; 46 $log = _$log_;
59 $controller = _$controller_; 47 $controller = _$controller_;
60 $mockHttp = $httpBackend; 48 $mockHttp = $httpBackend;
61 49
62 - $mockHttp.whenGET(/devices/).respond(fakeData); 50 + $mockHttp.whenGET(/\/device$/).respond(fakeData);
63 -
64 })); 51 }));
65 52
66 - //afterEach($mockHttp.resetExpectations);
67 -
68 it('should be an empty array', function () { 53 it('should be an empty array', function () {
69 ctrl = $controller('OvDeviceCtrl'); 54 ctrl = $controller('OvDeviceCtrl');
70 expect(ctrl.deviceData).toEqual([]); 55 expect(ctrl.deviceData).toEqual([]);
56 + $mockHttp.flush();
57 + expect(ctrl.deviceData).toEqual(fakeData.devices);
71 }); 58 });
72 59
73 - //it('should have data in it', function () {
74 - // ctrl = $controller('OvDeviceCtrl');
75 - // //$mockHttp.flush();
76 - // expect(ctrl.deviceData).toEqual(fakeData.devices);
77 - //})
78 }); 60 });
......