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