GUI -- Added mechanism to test device view.

Themed device view.

Change-Id: I471ec56b94c927d834f8067d06efce33ddfa4596

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

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

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">
 

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

web/gui/src/main/webapp/app/onos.js

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

web/gui/src/main/webapp/app/view/device/device.css

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

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>

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',
+        .controller('OvDeviceCtrl', ['$log', '$location', 'RestService',
-        function ($log, $http, $loc) {
+        function ($log, $location, rs) {
             var self = this;
             self.deviceData = [];
-            //var url = buildUrl($loc) + urlSuffix;
-            //$log.log(url);
 
-            //$http.get(url).then(
+            // TODO: remove test code
-            //    //success
+            var testCase = $location.search().test;
-            //    function (response) {
+            var url = testCase ? 'test/' + testCase : 'device';
-            //        self.deviceData = response.data.devices;
+
-            //    },
+            rs.get(url, function (data) {
-            //    //failure
+                self.deviceData = data.devices;
-            //    function (response) {
+            });
-            //        $log.warn('Failed to get device data ', response.status);
-            //    }
-            //);
 
             $log.log('OvDeviceCtrl has been created');
         }]);

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)
+        expect($log.warn).toHaveBeenCalledWith(
-            .toHaveBeenCalledWith('Failed to retrieve JSON data: /bar',
+            'Failed to retrieve JSON data: http://foo:80/ui/rs/bar', 404, 'Not Found');
-                                    404, 'Not Found');
     });
 
 });

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

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",
+            "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",
+            "sw": "2.0.1"
-            "serial": "None",
-            "annotations": {
-                "protocol": "OF_10"
-            }
         }]
     };
 
-    // 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);
-    //})
 });