홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
864cdd6a 1 parent 8c2a8b33

GUI -- Created Table Builder Service that builds a controller for tabular views. 

- Updated devices, hosts, and intents to use new service.

Change-Id: I1345ece0ff6e9b86a34488b0f07d39c60cdcc520
Inline Side-by-side
Showing 9 changed files with 105 additions and 81 deletions
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Widget -- Table Service
19 + */
20 +(function () {
21 + 'use strict';
22 +
23 + // injected refs
24 + var $log, $window, fs, wss;
25 +
26 + // example params to buildTable:
27 + // {
28 + // self: this,
29 + // scope: $scope,
30 + // tag: 'device'
31 + // }
32 +
33 + function buildTable(o) {
34 + var handlers = {},
35 + root = o.tag + 's',
36 + req = o.tag + 'DataRequest',
37 + resp = o.tag + 'DataResponse';
38 +
39 + o.self.tableData = [];
40 +
41 + function respCb(data) {
42 + o.self.tableData = data[root];
43 + o.scope.$apply();
44 + }
45 +
46 + function sortCb(params) {
47 + wss.sendEvent(req, params);
48 + }
49 + o.scope.sortCallback = sortCb;
50 +
51 + handlers[resp] = respCb;
52 + wss.bindHandlers(handlers);
53 +
54 + // Cleanup on destroyed scope
55 + o.scope.$on('$destroy', function () {
56 + wss.unbindHandlers(handlers);
57 + });
58 +
59 + sortCb();
60 + }
61 +
62 + angular.module('onosWidget')
63 + .factory('TableBuilderService',
64 + ['$log', '$window', 'FnService', 'WebSocketService',
65 +
66 + function (_$log_, _$window_, _fs_, _wss_) {
67 + $log = _$log_;
68 + $window = _$window_;
69 + fs = _fs_;
70 + wss = _wss_;
71 +
72 + return {
73 + buildTable: buildTable
74 + };
75 + }]);
76 +
77 +}());
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
17 <tr> 17 <tr>
18 <th colId="state" class="table-icon" sortable></th> 18 <th colId="state" class="table-icon" sortable></th>
19 <th colId="id" sortable>App ID </th> 19 <th colId="id" sortable>App ID </th>
20 - <th colId="version" sortable>Version</th> 20 + <th colId="version" sortable>Version </th>
21 <th colId="origin" sortable>Origin </th> 21 <th colId="origin" sortable>Origin </th>
22 - <th colId="desc">Description </th> 22 + <th colId="desc" col-width="400px">Description </th>
23 </tr> 23 </tr>
24 </thead> 24 </thead>
25 25
......
1 <!-- Device partial HTML --> 1 <!-- Device partial HTML -->
2 <div id="ov-device"> 2 <div id="ov-device">
3 - <h2>Devices ({{ctrl.deviceData.length}} total)</h2> 3 + <h2>Devices ({{ctrl.tableData.length}} total)</h2>
4 <table class="summary-list" 4 <table class="summary-list"
5 onos-fixed-header 5 onos-fixed-header
6 onos-sortable-header 6 onos-sortable-header
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 </thead> 20 </thead>
21 21
22 <tbody> 22 <tbody>
23 - <tr ng-repeat="dev in ctrl.deviceData" 23 + <tr ng-repeat="dev in ctrl.tableData"
24 ng-repeat-done> 24 ng-repeat-done>
25 <td class="table-icon"> 25 <td class="table-icon">
26 <div icon icon-id="{{dev._iconid_available}}"></div> 26 <div icon icon-id="{{dev._iconid_available}}"></div>
......
...@@ -23,33 +23,15 @@ ...@@ -23,33 +23,15 @@
23 23
24 angular.module('ovDevice', []) 24 angular.module('ovDevice', [])
25 .controller('OvDeviceCtrl', 25 .controller('OvDeviceCtrl',
26 - ['$log', '$scope', 'WebSocketService', 26 + ['$log', '$scope', 'TableBuilderService',
27 27
28 - function ($log, $scope, wss) { 28 + function ($log, $scope, tbs) {
29 - var self = this; 29 + tbs.buildTable({
30 - self.deviceData = []; 30 + self: this,
31 - 31 + scope: $scope,
32 - $scope.responseCallback = function(data) { 32 + tag: 'device'
33 - self.deviceData = data.devices;
34 - $scope.$apply();
35 - };
36 -
37 - $scope.sortCallback = function (requestParams) {
38 - wss.sendEvent('deviceDataRequest', requestParams);
39 - };
40 -
41 - var handlers = {
42 - deviceDataResponse: $scope.responseCallback
43 - };
44 - wss.bindHandlers(handlers);
45 -
46 - // Cleanup on destroyed scope
47 - $scope.$on('$destroy', function () {
48 - wss.unbindHandlers(handlers);
49 }); 33 });
50 34
51 - $scope.sortCallback();
52 -
53 $log.log('OvDeviceCtrl has been created'); 35 $log.log('OvDeviceCtrl has been created');
54 }]); 36 }]);
55 }()); 37 }());
......
1 <!-- Host partial HTML --> 1 <!-- Host partial HTML -->
2 <div id="ov-host"> 2 <div id="ov-host">
3 - <h2>Hosts ({{ctrl.hostData.length}} total)</h2> 3 + <h2>Hosts ({{ctrl.tableData.length}} total)</h2>
4 <table class="summary-list" 4 <table class="summary-list"
5 onos-fixed-header 5 onos-fixed-header
6 onos-sortable-header 6 onos-sortable-header
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 </thead> 17 </thead>
18 18
19 <tbody> 19 <tbody>
20 - <tr ng-repeat="host in ctrl.hostData" 20 + <tr ng-repeat="host in ctrl.tableData"
21 ng-repeat-done> 21 ng-repeat-done>
22 <td class="table-icon"> 22 <td class="table-icon">
23 <div icon icon-id="{{host._iconid_type}}"></div> 23 <div icon icon-id="{{host._iconid_type}}"></div>
......
...@@ -23,33 +23,15 @@ ...@@ -23,33 +23,15 @@
23 23
24 angular.module('ovHost', []) 24 angular.module('ovHost', [])
25 .controller('OvHostCtrl', 25 .controller('OvHostCtrl',
26 - ['$log', '$scope', 'FnService', 'WebSocketService', 26 + ['$log', '$scope', 'TableBuilderService',
27 27
28 - function ($log, $scope, fs, wss) { 28 + function ($log, $scope, tbs) {
29 - var self = this; 29 + tbs.buildTable({
30 - self.hostData = []; 30 + self: this,
31 - 31 + scope: $scope,
32 - $scope.responseCallback = function(data) { 32 + tag: 'host'
33 - self.hostData = data.hosts;
34 - $scope.$apply();
35 - };
36 -
37 - $scope.sortCallback = function (requestParams) {
38 - wss.sendEvent('hostDataRequest', requestParams);
39 - };
40 -
41 - var handlers = {
42 - hostDataResponse: $scope.responseCallback
43 - };
44 - wss.bindHandlers(handlers);
45 -
46 - // Cleanup on destroyed scope
47 - $scope.$on('$destroy', function () {
48 - wss.unbindHandlers(handlers);
49 }); 33 });
50 - 34 +
51 - $scope.sortCallback();
52 -
53 $log.log('OvHostCtrl has been created'); 35 $log.log('OvHostCtrl has been created');
54 }]); 36 }]);
55 }()); 37 }());
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
16 16
17 <!-- Intent partial HTML --> 17 <!-- Intent partial HTML -->
18 <div id="ov-intent"> 18 <div id="ov-intent">
19 - <h2>Intents ({{ctrl.intentData.length}} total)</h2> 19 + <h2>Intents ({{ctrl.tableData.length}} total)</h2>
20 <table class="summary-list" 20 <table class="summary-list"
21 onos-fixed-header 21 onos-fixed-header
22 onos-sortable-header 22 onos-sortable-header
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 </thead> 31 </thead>
32 32
33 <tbody> 33 <tbody>
34 - <tr ng-repeat-start="intent in ctrl.intentData"> 34 + <tr ng-repeat-start="intent in ctrl.tableData">
35 <td>{{intent.appId}}</td> 35 <td>{{intent.appId}}</td>
36 <td>{{intent.key}}</td> 36 <td>{{intent.key}}</td>
37 <td>{{intent.type}}</td> 37 <td>{{intent.type}}</td>
......
...@@ -23,33 +23,15 @@ ...@@ -23,33 +23,15 @@
23 23
24 angular.module('ovIntent', []) 24 angular.module('ovIntent', [])
25 .controller('OvIntentCtrl', 25 .controller('OvIntentCtrl',
26 - ['$log', '$scope', 'FnService', 'WebSocketService', 26 + ['$log', '$scope', 'TableBuilderService',
27 27
28 - function ($log, $scope, fs, wss) { 28 + function ($log, $scope, tbs) {
29 - var self = this; 29 + tbs.buildTable({
30 - self.intentData = []; 30 + self: this,
31 - 31 + scope: $scope,
32 - $scope.responseCallback = function(data) { 32 + tag: 'intent'
33 - self.intentData = data.intents;
34 - $scope.$apply();
35 - };
36 -
37 - $scope.sortCallback = function (requestParams) {
38 - wss.sendEvent('intentDataRequest', requestParams);
39 - };
40 -
41 - var handlers = {
42 - intentDataResponse: $scope.responseCallback
43 - };
44 - wss.bindHandlers(handlers);
45 -
46 - // Cleanup on destroyed scope
47 - $scope.$on('$destroy', function () {
48 - wss.unbindHandlers(handlers);
49 }); 33 });
50 34
51 - $scope.sortCallback();
52 -
53 $log.log('OvIntentCtrl has been created'); 35 $log.log('OvIntentCtrl has been created');
54 }]); 36 }]);
55 }()); 37 }());
......
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
67 <script src="app/fw/widget/toolbar.js"></script> 67 <script src="app/fw/widget/toolbar.js"></script>
68 <script src="app/fw/widget/tooltip.js"></script> 68 <script src="app/fw/widget/tooltip.js"></script>
69 <script src="app/fw/widget/button.js"></script> 69 <script src="app/fw/widget/button.js"></script>
70 + <script src="app/fw/widget/tableBuilder.js"></script>
70 71
71 <script src="app/fw/layer/layer.js"></script> 72 <script src="app/fw/layer/layer.js"></script>
72 <script src="app/fw/layer/panel.js"></script> 73 <script src="app/fw/layer/panel.js"></script>
......