[ONOS-3949] Add chartBuilder.js, interacts with ChartRequestHandler
- Add unit test for chartBuilder.js
Change-Id: I2f5c56b878dda660c28af13ec0229b5ab3665156
diff --git a/web/gui/src/main/webapp/app/fw/widget/chartBuilder.js b/web/gui/src/main/webapp/app/fw/widget/chartBuilder.js
new file mode 100644
index 0000000..f1df146
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/chartBuilder.js
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2016-present 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 -- Chart Service
+ */
+(function () {
+ 'use strict';
+
+ // injected references
+ // fs -> FnService
+ // wss -> WebSocketService
+ // ls -> LoadingService
+ var $log, $interval, $timeout, fs, wss, ls;
+
+ // constants
+ var refreshInterval = 2000;
+
+ // example params to buildChart:
+ // {
+ // scope: $scope, <- controller scope
+ // tag: 'device', <- chart identifier
+ // respCb: respCb, <- websocket response callback (optional)
+ // query: params <- query parameters in URL (optional)
+ // }
+ // Note: query is always an object (empty or containing properties)
+ // it comes from $location.search()
+ function buildChart(o) {
+ var handlers = {},
+ root = o.tag + 's',
+ req = o.tag + 'DataRequest',
+ resp = o.tag + 'DataResponse',
+ onResp = fs.isF(o.respCb),
+ oldChartData = [],
+ refreshPromise;
+
+ o.scope.chartData = [];
+ o.scope.changedData = [];
+ o.scope.reqParams = o.reqParams || {};
+ o.scope.autoRefresh = true;
+ o.scope.autoRefreshTip = 'Toggle auto refresh';
+
+ // === websocket functions ===
+ // response
+ function respCb(data) {
+ ls.stop();
+ o.scope.chartData = data[root];
+ onResp && onResp();
+
+ // check if data changed
+ if (!angular.equals(o.scope.chartData, oldChartData)) {
+ o.scope.changedData = [];
+ // only refresh the chart if there are new changes
+ if (oldChartData.length) {
+ angular.forEach(o.scope.chartData, function (item) {
+ if (!fs.containsObj(oldChartData, item)) {
+ o.scope.changedData.push(item);
+ }
+ });
+ }
+ angular.copy(o.scope.chartData, oldChartData);
+ }
+ o.scope.$apply();
+ }
+ handlers[resp] = respCb;
+ wss.bindHandlers(handlers);
+
+ // request
+ function requestCb(params) {
+ var p = angular.extend({}, params, o.query);
+ if (wss.isConnected()) {
+ wss.sendEvent(req, p);
+ ls.start();
+ }
+ }
+ o.scope.requestCallback = requestCb;
+
+ // === autoRefresh functions ===
+ function fetchDataIfNotWaiting() {
+ if (!ls.waiting()) {
+ if (fs.debugOn('widget')) {
+ $log.debug('Refreshing ' + root + ' page');
+ }
+ requestCb(o.scope.reqParams);
+ }
+ }
+
+ function startRefresh() {
+ refreshPromise = $interval(fetchDataIfNotWaiting, refreshInterval);
+ }
+
+ function stopRefresh() {
+ if (refreshPromise) {
+ $interval.cancel(refreshPromise);
+ refreshPromise = null;
+ }
+ }
+
+ function toggleRefresh() {
+ o.scope.autoRefresh = !o.scope.autoRefresh;
+ o.scope.autoRefresh ? startRefresh() : stopRefresh();
+ }
+ o.scope.toggleRefresh = toggleRefresh;
+
+ // === Cleanup on destroyed scope ===
+ o.scope.$on('$destroy', function () {
+ wss.unbindHandlers(handlers);
+ stopRefresh();
+ ls.stop();
+ });
+
+ requestCb(o.scope.reqParams);
+ startRefresh();
+ }
+
+ angular.module('onosWidget')
+ .factory('ChartBuilderService',
+ ['$log', '$interval', '$timeout', 'FnService', 'WebSocketService',
+ 'LoadingService',
+
+ function (_$log_, _$interval_, _$timeout_, _fs_, _wss_, _ls_) {
+ $log = _$log_;
+ $interval = _$interval_;
+ $timeout = _$timeout_;
+ fs = _fs_;
+ wss = _wss_;
+ ls = _ls_;
+
+ return {
+ buildChart: buildChart
+ };
+ }]);
+}());
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 02bbafd..4f550d2 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -78,6 +78,7 @@
<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/widget/chartBuilder.js"></script>
<script src="app/fw/layer/layer.js"></script>
<script src="app/fw/layer/panel.js"></script>
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/chartBuilder-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/chartBuilder-spec.js
new file mode 100644
index 0000000..7780c7f
--- /dev/null
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/chartBuilder-spec.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright 2016-present 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 -- Chart Builder Service - Unit Tests
+ */
+
+describe('factory: fw/widget/chartBuilder.js', function () {
+ var $log, $rootScope, fs, cbs, is;
+
+ var mockObj;
+ mockWss = {
+ bindHandlers: function () {},
+ sendEvent: function () {},
+ unbindHandlers: function () {}
+ };
+
+ beforeEach(module('onosWidget', 'onosUtil', 'onosRemote', 'onosSvg'));
+
+ beforeEach(function () {
+ module(function ($provide) {
+ $provide.value('WebSocketService', mockWss);
+ });
+ });
+
+ beforeEach(inject(function (_$log_, _$rootScope_,
+ FnService, ChartBuilderService, IconService) {
+ $log = _$log_;
+ $rootScope = _$rootScope_;
+ fs = FnService;
+ cbs = ChartBuilderService;
+ is = IconService;
+ }));
+
+ beforeEach(function () {
+ mockObj = {
+ scope: $rootScope.$new(),
+ tag: 'foo'
+ };
+ });
+
+ afterEach(function () {
+ mockObj = {};
+ });
+
+ it('should define ChartBuilderService', function () {
+ expect(cbs).toBeDefined();
+ });
+
+ it('should define api functions', function () {
+ expect(fs.areFunctions(cbs, [
+ 'buildChart'
+ ])).toBeTruthy();
+ });
+
+ it('should verify requestCb', function () {
+ spyOn(mockWss, 'sendEvent');
+ expect(mockObj.scope.requestCallback).not.toBeDefined();
+ cbs.buildChart(mockObj);
+ expect(mockObj.scope.requestCallback).toBeDefined();
+ expect(mockWss.sendEvent).toHaveBeenCalled();
+ });
+
+ it('should set chartData', function () {
+ expect(mockObj.scope.chartData).not.toBeDefined();
+ cbs.buildChart(mockObj);
+ expect(fs.isA(mockObj.scope.chartData)).toBeTruthy();
+ expect(mockObj.scope.chartData.length).toBe(0);
+ });
+
+ it('should unbind handlers on destroyed scope', function () {
+ spyOn(mockWss, 'unbindHandlers');
+ cbs.buildChart(mockObj);
+ expect(mockWss.unbindHandlers).not.toHaveBeenCalled();
+ mockObj.scope.$destroy();
+ expect(mockWss.unbindHandlers).toHaveBeenCalled();
+ });
+}
\ No newline at end of file