From 4fab8af1e4c53276412a2c91447aedaa88cd476c Mon Sep 17 00:00:00 2001 From: Bri Prebilic Cole Date: Thu, 15 Jan 2015 16:40:47 -0800 Subject: [PATCH] GUI -- Added mechanism to test device view. Themed device view. Change-Id: I471ec56b94c927d834f8067d06efce33ddfa4596 --- web/gui/src/main/webapp/app/common.css | 50 +++++++++++ web/gui/src/main/webapp/app/fw/remote/rest.js | 83 ++++++++++++++++++- web/gui/src/main/webapp/app/index.html | 5 ++ web/gui/src/main/webapp/app/onos.css | 5 +- web/gui/src/main/webapp/app/onos.js | 1 + .../main/webapp/app/view/device/device.css | 5 +- .../main/webapp/app/view/device/device.html | 8 +- .../src/main/webapp/app/view/device/device.js | 25 ++---- .../webapp/tests/app/fw/remote/rest-spec.js | 23 +++-- .../webapp/tests/app/fw/remote/urlfn-spec.js | 4 +- .../tests/app/view/device/device-spec.js | 32 ++----- 11 files changed, 183 insertions(+), 58 deletions(-) create mode 100644 web/gui/src/main/webapp/app/common.css diff --git a/web/gui/src/main/webapp/app/common.css b/web/gui/src/main/webapp/app/common.css new file mode 100644 index 0000000000..7759f4d84b --- /dev/null +++ b/web/gui/src/main/webapp/app/common.css @@ -0,0 +1,50 @@ +/* + * Copyright 2015 Open Networking Laboratory + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* + ONOS GUI -- common -- CSS file + + @author Simon Hunt + @author Bri Prebilic Cole + */ + +table.summary-list { + /*border: 1px solid red;*/ + margin: 4px 50px; + font-size: 10pt; +} + +table.summary-list th { + padding: 5px; +} +.light table.summary-list th { + background-color: #bbb; +} +.dark table.summary-list th { + background-color: #444; + color: #ddd; +} + +table.summary-list td { + padding: 5px; +} +.light table.summary-list td { + background-color: #ddd; +} +.dark table.summary-list td { + background-color: #666; + color: #ddd; +} diff --git a/web/gui/src/main/webapp/app/fw/remote/rest.js b/web/gui/src/main/webapp/app/fw/remote/rest.js index ceff93acea..b397aa73fd 100644 --- a/web/gui/src/main/webapp/app/fw/remote/rest.js +++ b/web/gui/src/main/webapp/app/fw/remote/rest.js @@ -25,17 +25,94 @@ var $log; + var urlSuffix = '/ui/rs/'; + + + + // TODO: remove temporary test code + var fakeData = { + '1': { + "devices": [{ + "id": "of:0000000000000001", + "available": true, + "role": "MASTER", + "mfr": "Nicira, Inc.", + "hw": "Open vSwitch", + "sw": "2.0.1", + "serial": "None", + "annotations": { + "protocol": "OF_10" + } + }, + { + "id": "of:0000000000000004", + "available": true, + "role": "MASTER", + "mfr": "Nicira, Inc.", + "hw": "Open vSwitch", + "sw": "2.0.1", + "serial": "None", + "annotations": { + "protocol": "OF_10" + } + }] + }, + '2': { + "devices": [{ + "id": "of:0000000000000002", + "available": true, + "role": "MASTER", + "mfr": "Nicira, Inc.", + "hw": "Open vSwitch", + "sw": "2.0.0", + "serial": "None", + "annotations": { + "protocol": "OF_10" + } + }, + { + "id": "of:0000000000000006", + "available": true, + "role": "MASTER", + "mfr": "Nicira, Inc.", + "hw": "Open vSwitch", + "sw": "2.1.1", + "serial": "None", + "annotations": { + "protocol": "OF_10" + } + }] + }, + 'empty': { + devices: [] + } + }; + + function getFakeData(url) { + var id = url.slice(5); + + return fakeData[id] || fakeData.empty; + } + angular.module('onosRemote') - .factory('RestService', ['$log', '$http', function (_$log_, $http) { + .factory('RestService', ['$log', '$http', 'UrlFnService', + function (_$log_, $http, ufs) { $log = _$log_; function get(url, callback) { - $http.get(url).then(function (response) { + // TODO: remove temporary test code + if (url.match(/^test\//)) { + callback(getFakeData(url)); + return; + } + var fullUrl = ufs.urlPrefix() + urlSuffix + url; + + $http.get(fullUrl).then(function (response) { // success callback(response.data); }, function (response) { // error - $log.warn('Failed to retrieve JSON data: ' + url, + $log.warn('Failed to retrieve JSON data: ' + fullUrl, response.status, response.data); }); } diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html index 109af4ca30..aa9c1de811 100644 --- a/web/gui/src/main/webapp/app/index.html +++ b/web/gui/src/main/webapp/app/index.html @@ -49,9 +49,14 @@ + + + + + diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css index 0449853a19..40a5c0399b 100644 --- a/web/gui/src/main/webapp/app/onos.css +++ b/web/gui/src/main/webapp/app/onos.css @@ -50,6 +50,9 @@ body.dark { height: 100%; } -#view h2 { +.light #view h2 { color: #800; } +.dark #view h2 { + color: #d88; +} diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js index 8f4a6180dc..9f07b5eef3 100644 --- a/web/gui/src/main/webapp/app/onos.js +++ b/web/gui/src/main/webapp/app/onos.js @@ -37,6 +37,7 @@ 'ngRoute', 'onosUtil', 'onosSvg', + 'onosRemote', 'onosMast' ]; diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css index 6b6e2e981f..eb5ede004b 100644 --- a/web/gui/src/main/webapp/app/view/device/device.css +++ b/web/gui/src/main/webapp/app/view/device/device.css @@ -20,7 +20,6 @@ @author Simon Hunt */ -#ov-device table { - border: 1px; - /*color: darkorange;*/ +#ov-device { + /* placeholder */ } \ No newline at end of file diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html index 04fc00a065..451dd030a5 100644 --- a/web/gui/src/main/webapp/app/view/device/device.html +++ b/web/gui/src/main/webapp/app/view/device/device.html @@ -2,7 +2,13 @@

Device View

- +
+ + + + + + diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js index b475280f9f..6fef47053d 100644 --- a/web/gui/src/main/webapp/app/view/device/device.js +++ b/web/gui/src/main/webapp/app/view/device/device.js @@ -24,26 +24,19 @@ (function () { 'use strict'; - var urlSuffix = '/onos/v1/devices'; - angular.module('ovDevice', []) - .controller('OvDeviceCtrl', ['$log', '$location', - function ($log, $http, $loc) { + .controller('OvDeviceCtrl', ['$log', '$location', 'RestService', + function ($log, $location, rs) { var self = this; self.deviceData = []; - //var url = buildUrl($loc) + urlSuffix; - //$log.log(url); - //$http.get(url).then( - // //success - // function (response) { - // self.deviceData = response.data.devices; - // }, - // //failure - // function (response) { - // $log.warn('Failed to get device data ', response.status); - // } - //); + // TODO: remove test code + var testCase = $location.search().test; + var url = testCase ? 'test/' + testCase : 'device'; + + rs.get(url, function (data) { + self.deviceData = data.devices; + }); $log.log('OvDeviceCtrl has been created'); }]); diff --git a/web/gui/src/main/webapp/tests/app/fw/remote/rest-spec.js b/web/gui/src/main/webapp/tests/app/fw/remote/rest-spec.js index ecfcba76c4..5537d88661 100644 --- a/web/gui/src/main/webapp/tests/app/fw/remote/rest-spec.js +++ b/web/gui/src/main/webapp/tests/app/fw/remote/rest-spec.js @@ -25,6 +25,16 @@ describe('factory: fw/remote/rest.js', function() { beforeEach(module('onosUtil', 'onosRemote')); + beforeEach(module(function($provide) { + $provide.factory('$location', function (){ + return { + protocol: function () { return 'http'; }, + host: function () { return 'foo'; }, + port: function () { return '80'; } + }; + }) + })); + beforeEach(inject(function (_$log_, _$httpBackend_, FnService, RestService) { $log = _$log_; $httpBackend = _$httpBackend_; @@ -50,10 +60,10 @@ describe('factory: fw/remote/rest.js', function() { it('should fetch remote data', function () { var called = 0, capture = null; - $httpBackend.expectGET('/bar').respond(mockData); + $httpBackend.whenGET(/.*/).respond(mockData); spyOn($log, 'warn'); - rs.get('/bar', function (data) { + rs.get('bar', function (data) { called++; capture = data; }); @@ -69,10 +79,10 @@ describe('factory: fw/remote/rest.js', function() { it('should fail to fetch remote data', function () { var called = 0, capture = null; - $httpBackend.expectGET('/bar').respond(404, 'Not Found'); + $httpBackend.whenGET(/.*/).respond(404, 'Not Found'); spyOn($log, 'warn'); - rs.get('/bar', function (data) { + rs.get('bar', function (data) { called++; capture = data; }); @@ -82,9 +92,8 @@ describe('factory: fw/remote/rest.js', function() { $httpBackend.flush(); expect(called).toEqual(0); expect(capture).toBeNull(); - expect($log.warn) - .toHaveBeenCalledWith('Failed to retrieve JSON data: /bar', - 404, 'Not Found'); + expect($log.warn).toHaveBeenCalledWith( + 'Failed to retrieve JSON data: http://foo:80/ui/rs/bar', 404, 'Not Found'); }); }); diff --git a/web/gui/src/main/webapp/tests/app/fw/remote/urlfn-spec.js b/web/gui/src/main/webapp/tests/app/fw/remote/urlfn-spec.js index 764d43e4c9..aa3f28ebce 100644 --- a/web/gui/src/main/webapp/tests/app/fw/remote/urlfn-spec.js +++ b/web/gui/src/main/webapp/tests/app/fw/remote/urlfn-spec.js @@ -28,7 +28,7 @@ describe('factory: fw/remote/urlfn.js', function () { beforeEach(module(function($provide) { $provide.factory('$location', function (){ return { - protocol: function () { return '$http'; }, + protocol: function () { return 'http'; }, host: function () { return 'foo'; }, port: function () { return '80'; } }; @@ -53,6 +53,6 @@ describe('factory: fw/remote/urlfn.js', function () { }); it('should build the url prefix', function () { - expect(ufs.urlPrefix()).toEqual('$http://foo:80'); + expect(ufs.urlPrefix()).toEqual('http://foo:80'); }); }); diff --git a/web/gui/src/main/webapp/tests/app/view/device/device-spec.js b/web/gui/src/main/webapp/tests/app/view/device/device-spec.js index 86c7db750c..503688a059 100644 --- a/web/gui/src/main/webapp/tests/app/view/device/device-spec.js +++ b/web/gui/src/main/webapp/tests/app/view/device/device-spec.js @@ -21,58 +21,40 @@ */ describe('Controller: OvDeviceCtrl', function () { // instantiate the Device module - beforeEach(module('ovDevice')); + beforeEach(module('ovDevice', 'onosRemote')); var $log, $controller, ctrl, $mockHttp; var fakeData = { - "devices": [ - { + "devices": [{ "id": "of:0000000000000001", "available": true, - "role": "MASTER", "mfr": "Nicira, Inc.", "hw": "Open vSwitch", - "sw": "2.0.1", - "serial": "None", - "annotations": { - "protocol": "OF_10" - } + "sw": "2.0.1" }, { "id": "of:0000000000000004", "available": true, - "role": "MASTER", "mfr": "Nicira, Inc.", "hw": "Open vSwitch", - "sw": "2.0.1", - "serial": "None", - "annotations": { - "protocol": "OF_10" - } + "sw": "2.0.1" }] }; - // we need an instance of the controller beforeEach(inject(function(_$log_, _$controller_, $httpBackend) { $log = _$log_; $controller = _$controller_; $mockHttp = $httpBackend; - $mockHttp.whenGET(/devices/).respond(fakeData); - + $mockHttp.whenGET(/\/device$/).respond(fakeData); })); - //afterEach($mockHttp.resetExpectations); - it('should be an empty array', function () { ctrl = $controller('OvDeviceCtrl'); expect(ctrl.deviceData).toEqual([]); + $mockHttp.flush(); + expect(ctrl.deviceData).toEqual(fakeData.devices); }); - //it('should have data in it', function () { - // ctrl = $controller('OvDeviceCtrl'); - // //$mockHttp.flush(); - // expect(ctrl.deviceData).toEqual(fakeData.devices); - //}) });
IDManufacturerHardware VersionSoftware Version
{{dev.id}}