홍길동 / 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
/*
* 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 -- Widget -- Table Service
*/
(function () {
'use strict';
// injected refs
var $log, $window, fs, wss;
// example params to buildTable:
// {
// self: this,
// scope: $scope,
// tag: 'device'
// }
function buildTable(o) {
var handlers = {},
root = o.tag + 's',
req = o.tag + 'DataRequest',
resp = o.tag + 'DataResponse';
o.self.tableData = [];
function respCb(data) {
o.self.tableData = data[root];
o.scope.$apply();
}
function sortCb(params) {
wss.sendEvent(req, params);
}
o.scope.sortCallback = sortCb;
handlers[resp] = respCb;
wss.bindHandlers(handlers);
// Cleanup on destroyed scope
o.scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
});
sortCb();
}
angular.module('onosWidget')
.factory('TableBuilderService',
['$log', '$window', 'FnService', 'WebSocketService',
function (_$log_, _$window_, _fs_, _wss_) {
$log = _$log_;
$window = _$window_;
fs = _fs_;
wss = _wss_;
return {
buildTable: buildTable
};
}]);
}());
......@@ -17,9 +17,9 @@
<tr>
<th colId="state" class="table-icon" sortable></th>
<th colId="id" sortable>App ID </th>
<th colId="version" sortable>Version</th>
<th colId="version" sortable>Version </th>
<th colId="origin" sortable>Origin </th>
<th colId="desc">Description </th>
<th colId="desc" col-width="400px">Description </th>
</tr>
</thead>
......
<!-- Device partial HTML -->
<div id="ov-device">
<h2>Devices ({{ctrl.deviceData.length}} total)</h2>
<h2>Devices ({{ctrl.tableData.length}} total)</h2>
<table class="summary-list"
onos-fixed-header
onos-sortable-header
......@@ -20,7 +20,7 @@
</thead>
<tbody>
<tr ng-repeat="dev in ctrl.deviceData"
<tr ng-repeat="dev in ctrl.tableData"
ng-repeat-done>
<td class="table-icon">
<div icon icon-id="{{dev._iconid_available}}"></div>
......
......@@ -23,33 +23,15 @@
angular.module('ovDevice', [])
.controller('OvDeviceCtrl',
['$log', '$scope', 'WebSocketService',
['$log', '$scope', 'TableBuilderService',
function ($log, $scope, wss) {
var self = this;
self.deviceData = [];
$scope.responseCallback = function(data) {
self.deviceData = data.devices;
$scope.$apply();
};
$scope.sortCallback = function (requestParams) {
wss.sendEvent('deviceDataRequest', requestParams);
};
var handlers = {
deviceDataResponse: $scope.responseCallback
};
wss.bindHandlers(handlers);
// Cleanup on destroyed scope
$scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
function ($log, $scope, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'device'
});
$scope.sortCallback();
$log.log('OvDeviceCtrl has been created');
}]);
}());
......
<!-- Host partial HTML -->
<div id="ov-host">
<h2>Hosts ({{ctrl.hostData.length}} total)</h2>
<h2>Hosts ({{ctrl.tableData.length}} total)</h2>
<table class="summary-list"
onos-fixed-header
onos-sortable-header
......@@ -17,7 +17,7 @@
</thead>
<tbody>
<tr ng-repeat="host in ctrl.hostData"
<tr ng-repeat="host in ctrl.tableData"
ng-repeat-done>
<td class="table-icon">
<div icon icon-id="{{host._iconid_type}}"></div>
......
......@@ -23,33 +23,15 @@
angular.module('ovHost', [])
.controller('OvHostCtrl',
['$log', '$scope', 'FnService', 'WebSocketService',
['$log', '$scope', 'TableBuilderService',
function ($log, $scope, fs, wss) {
var self = this;
self.hostData = [];
$scope.responseCallback = function(data) {
self.hostData = data.hosts;
$scope.$apply();
};
$scope.sortCallback = function (requestParams) {
wss.sendEvent('hostDataRequest', requestParams);
};
var handlers = {
hostDataResponse: $scope.responseCallback
};
wss.bindHandlers(handlers);
// Cleanup on destroyed scope
$scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
function ($log, $scope, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'host'
});
$scope.sortCallback();
$log.log('OvHostCtrl has been created');
}]);
}());
......
......@@ -16,7 +16,7 @@
<!-- Intent partial HTML -->
<div id="ov-intent">
<h2>Intents ({{ctrl.intentData.length}} total)</h2>
<h2>Intents ({{ctrl.tableData.length}} total)</h2>
<table class="summary-list"
onos-fixed-header
onos-sortable-header
......@@ -31,7 +31,7 @@
</thead>
<tbody>
<tr ng-repeat-start="intent in ctrl.intentData">
<tr ng-repeat-start="intent in ctrl.tableData">
<td>{{intent.appId}}</td>
<td>{{intent.key}}</td>
<td>{{intent.type}}</td>
......
......@@ -23,33 +23,15 @@
angular.module('ovIntent', [])
.controller('OvIntentCtrl',
['$log', '$scope', 'FnService', 'WebSocketService',
['$log', '$scope', 'TableBuilderService',
function ($log, $scope, fs, wss) {
var self = this;
self.intentData = [];
$scope.responseCallback = function(data) {
self.intentData = data.intents;
$scope.$apply();
};
$scope.sortCallback = function (requestParams) {
wss.sendEvent('intentDataRequest', requestParams);
};
var handlers = {
intentDataResponse: $scope.responseCallback
};
wss.bindHandlers(handlers);
// Cleanup on destroyed scope
$scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
function ($log, $scope, tbs) {
tbs.buildTable({
self: this,
scope: $scope,
tag: 'intent'
});
$scope.sortCallback();
$log.log('OvIntentCtrl has been created');
}]);
}());
......
......@@ -67,6 +67,7 @@
<script src="app/fw/widget/toolbar.js"></script>
<script src="app/fw/widget/tooltip.js"></script>
<script src="app/fw/widget/button.js"></script>
<script src="app/fw/widget/tableBuilder.js"></script>
<script src="app/fw/layer/layer.js"></script>
<script src="app/fw/layer/panel.js"></script>
......