GUI -- Added mechanism to test device view.
Themed device view.
Change-Id: I471ec56b94c927d834f8067d06efce33ddfa4596
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 0000000..7759f4d
--- /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 ceff93a..b397aa7 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 109af4c..aa9c1de 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -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">
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index 0449853..40a5c03 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -50,6 +50,9 @@
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 8f4a618..9f07b5e 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 6b6e2e9..eb5ede0 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 04fc00a..451dd03 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 @@
<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>
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 b475280..6fef470 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 ecfcba7..5537d88 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 @@
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 @@
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 @@
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 @@
$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 764d43e..aa3f28e 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 @@
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 @@
});
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 86c7db7..503688a 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);
- //})
});