mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-22 04:40:59 +02:00
Code Issues Projects Releases Wiki Activity

GUI -- Added mechanism to test device view.

Browse Source 
Themed device view.

Change-Id: I471ec56b94c927d834f8067d06efce33ddfa4596
This commit is contained in:
Bri Prebilic Cole 2015-01-15 16:40:47 -08:00
parent 3cfce8e3ac
commit 4fab8af1e4
11 changed files with 183 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/gui/src/main/webapp/app/common.css Normal file
View File

@ -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;
}

83
web/gui/src/main/webapp/app/fw/remote/rest.js
View File

@ -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);
});
}

5
web/gui/src/main/webapp/app/index.html
View File

@ -49,9 +49,14 @@
<script src="fw/svg/map.js"></script>
<script src="fw/svg/zoom.js"></script>
<script src="fw/remote/remote.js"></script>
<script src="fw/remote/urlfn.js"></script>
<script src="fw/remote/rest.js"></script>
<!-- Framework and library stylesheets included here -->
<!-- TODO: use a single catenated-minified file here -->
<link rel="stylesheet" href="onos.css">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="fw/mast/mast.css">
<link rel="stylesheet" href="fw/nav/nav.css">

5
web/gui/src/main/webapp/app/onos.css
View File

@ -50,6 +50,9 @@ body.dark {
height: 100%;
}
#view h2 {
.light #view h2 {
color: #800;
}
.dark #view h2 {
color: #d88;
}

1
web/gui/src/main/webapp/app/onos.js
View File

@ -37,6 +37,7 @@
'ngRoute',
'onosUtil',
'onosSvg',
'onosRemote',
'onosMast'
];

5
web/gui/src/main/webapp/app/view/device/device.css
View File

@ -20,7 +20,6 @@
@author Simon Hunt
*/
#ov-device table {
border: 1px;
/*color: darkorange;*/
#ov-device {
/* placeholder */
}

8
web/gui/src/main/webapp/app/view/device/device.html
View File

@ -2,7 +2,13 @@
<div id="ov-device">
<h2>Device View</h2>
<table>
<table class="summary-list">
<tr>
<th>ID</th>
<th>Manufacturer</th>
<th>Hardware Version</th>
<th>Software Version</th>
</tr>
<tr ng-repeat="dev in ctrl.deviceData">
<!-- add more property fields for table from device data -->
<td>{{dev.id}}</td>

25
web/gui/src/main/webapp/app/view/device/device.js
View File

@ -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');
}]);

23
web/gui/src/main/webapp/tests/app/fw/remote/rest-spec.js
View File

@ -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');
});
});

4
web/gui/src/main/webapp/tests/app/fw/remote/urlfn-spec.js
View File

@ -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');
});
});

32
web/gui/src/main/webapp/tests/app/view/device/device-spec.js
View File

@ -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);
//})
});