Filtering events log messages
Change-Id: I4a2cba3722f4c3539cef774b8847818b164d5b1d
diff --git a/src/app/core/debug/debug.html b/src/app/core/debug/debug.html
new file mode 100644
index 0000000..2590708
--- /dev/null
+++ b/src/app/core/debug/debug.html
@@ -0,0 +1,38 @@
+<!--
+Copyright 2017-present Open Networking Foundation
+
+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.
+-->
+<table class="table table-condensed">
+ <thead>
+ <tr>
+ <th>Debug Settings:</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Global</td>
+ <td class="text-right">
+ <i class="fa fa-check text-success" ng-show="vm.debugStatus.global"></i>
+ <i class="fa fa-remove text-danger" ng-hide="vm.debugStatus.global"></i>
+ </td>
+ </tr>
+ <tr>
+ <td>Events</td>
+ <td class="text-right">
+ <i class="fa fa-check text-success" ng-show="vm.debugStatus.events"></i>
+ <i class="fa fa-remove text-danger" ng-hide="vm.debugStatus.events"></i>
+ </td>
+ </tr>
+ </tbody>
+</table>
\ No newline at end of file
diff --git a/src/app/core/debug/debug.service.spec.ts b/src/app/core/debug/debug.service.spec.ts
new file mode 100644
index 0000000..0d27fa6
--- /dev/null
+++ b/src/app/core/debug/debug.service.spec.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+import * as angular from 'angular';
+import 'angular-mocks';
+import {XosDebugService, IXosDebugService} from './debug.service';
+
+const MockShortcut = {};
+
+describe('The XOS Debug service', () => {
+ let service, $log, $scope, XosKeyboardShortcut;
+
+ beforeEach(() => {
+ angular.module('testDebug', [])
+ .service('XosDebug', XosDebugService)
+ .value('XosKeyboardShortcut', MockShortcut);
+
+ angular.mock.module('testDebug');
+ });
+
+ beforeEach(angular.mock.inject((
+ XosDebug: IXosDebugService,
+ _$log_: ng.ILogService,
+ _$rootScope_: ng.IScope,
+ _XosKeyboardShortcut_: any
+ ) => {
+ service = XosDebug;
+ $log = _$log_;
+ $scope = _$rootScope_;
+ XosKeyboardShortcut = _XosKeyboardShortcut_;
+ spyOn(window.localStorage, 'setItem');
+ spyOn($scope, '$broadcast');
+ }));
+
+ it('should read the debug status from localStorage', () => {
+ spyOn(window.localStorage, 'getItem')
+ .and.returnValue('true');
+ service = new XosDebugService($log, $scope, XosKeyboardShortcut);
+ expect(service.status.global).toBeTruthy();
+ expect(service.status.events).toBeTruthy();
+ });
+
+ it('should disable the global debug status', () => {
+ spyOn(window.localStorage, 'getItem')
+ .and.returnValue('true');
+ service.toggleGlobalDebug();
+ expect(window.localStorage.setItem).toHaveBeenCalledWith('debug', 'false');
+ expect(service.status.global).toBeFalsy();
+ expect($scope.$broadcast).toHaveBeenCalledWith('xos.debug.status', service.status);
+ });
+ it('should enable the global debug status', () => {
+ spyOn(window.localStorage, 'getItem')
+ .and.returnValue('false');
+ service.toggleGlobalDebug();
+ expect(window.localStorage.setItem).toHaveBeenCalledWith('debug', 'true');
+ expect(service.status.global).toBeTruthy();
+ expect($scope.$broadcast).toHaveBeenCalledWith('xos.debug.status', service.status);
+ });
+});
diff --git a/src/app/core/debug/debug.service.ts b/src/app/core/debug/debug.service.ts
new file mode 100644
index 0000000..3c6c2c8
--- /dev/null
+++ b/src/app/core/debug/debug.service.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+import {IXosKeyboardShortcutService} from '../services/keyboard-shortcut';
+
+export interface IXosDebugStatus {
+ global: boolean;
+ events: boolean;
+}
+
+export interface IXosDebugService {
+ status: IXosDebugStatus;
+ setupShortcuts(): void;
+ toggleGlobalDebug(): void;
+ toggleEventDebug(): void;
+}
+
+export class XosDebugService implements IXosDebugService {
+
+ static $inject = ['$log', '$rootScope', 'XosKeyboardShortcut'];
+
+ public status: IXosDebugStatus = {
+ global: false,
+ events: false
+ };
+
+ constructor (
+ private $log: ng.ILogService,
+ private $scope: ng.IScope,
+ private XosKeyboardShortcut: IXosKeyboardShortcutService
+ ) {
+ const debug = window.localStorage.getItem('debug');
+ this.status.global = (debug === 'true');
+
+ const debugEvent = window.localStorage.getItem('debug-event');
+ this.status.events = (debugEvent === 'true');
+ }
+
+ public setupShortcuts(): void {
+ this.XosKeyboardShortcut.registerKeyBinding({
+ key: 'D',
+ cb: () => this.toggleGlobalDebug(),
+ description: 'Toggle debug messages in browser console'
+ }, 'global');
+
+ this.XosKeyboardShortcut.registerKeyBinding({
+ key: 'E',
+ cb: () => this.toggleEventDebug(),
+ description: 'Toggle debug messages for WS events in browser console'
+ }, 'global');
+ }
+
+ public toggleGlobalDebug(): void {
+ if (window.localStorage.getItem('debug') === 'true') {
+ this.$log.info(`[XosDebug] Disabling debug`);
+ window.localStorage.setItem('debug', 'false');
+ this.status.global = false;
+ }
+ else {
+ window.localStorage.setItem('debug', 'true');
+ this.$log.info(`[XosDebug] Enabling debug`);
+ this.status.global = true;
+ }
+ this.$scope.$broadcast('xos.debug.status', this.status);
+ }
+
+ public toggleEventDebug(): void {
+ if (window.localStorage.getItem('debug-event') === 'true') {
+ this.$log.info(`[XosDebug] Disabling debug for WS events`);
+ window.localStorage.setItem('debug-event', 'false');
+ this.status.events = false;
+ }
+ else {
+ window.localStorage.setItem('debug-event', 'true');
+ this.$log.info(`[XosDebug] Enabling debug for WS events`);
+ this.status.events = true;
+ }
+ this.$scope.$broadcast('xos.debug.status', this.status);
+ }
+}
diff --git a/src/app/core/debug/debug.ts b/src/app/core/debug/debug.ts
new file mode 100644
index 0000000..fe5d178
--- /dev/null
+++ b/src/app/core/debug/debug.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+import {IXosDebugStatus, IXosDebugService} from './debug.service';
+
+class XosDebugComponentController {
+ static $inject = ['$scope', 'XosDebug'];
+ public debugStatus: IXosDebugStatus;
+
+ constructor(
+ private $scope: ng.IScope,
+ private XosDebug: IXosDebugService
+ ) {
+ this.debugStatus = this.XosDebug.status;
+
+ this.$scope.$on('xos.debug.status', (e, status: IXosDebugStatus) => {
+ this.debugStatus = status;
+ this.$scope.$apply();
+ });
+ }
+}
+
+export const xosDebugComponent: angular.IComponentOptions = {
+ template: require('./debug.html'),
+ controllerAs: 'vm',
+ controller: XosDebugComponentController
+};
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 6c70d3a..0172223 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -43,6 +43,8 @@
import {XosDebouncer} from './services/helpers/debounce.helper';
import {ArrayToListFilter} from './table/array-to-list.filter';
import {xosLoader} from './loader/loader';
+import {xosDebugComponent} from './debug/debug';
+import {XosDebugService} from './debug/debug.service';
export const xosCore = 'xosCore';
@@ -63,6 +65,7 @@
.service('XosKeyboardShortcut', XosKeyboardShortcut)
.service('XosComponentInjector', XosComponentInjector)
.service('XosDebouncer', XosDebouncer)
+ .service('XosDebug', XosDebugService)
.directive('xosLinkWrapper', xosLinkWrapper)
.component('xosHeader', xosHeader)
.component('xosFooter', xosFooter)
@@ -77,5 +80,6 @@
.component('xosValidation', xosValidation)
.component('xosSidePanel', xosSidePanel)
.component('xosKeyBindingPanel', xosKeyBindingPanel)
+ .component('xosDebug', xosDebugComponent)
.filter('pagination', PaginationFilter)
.filter('arrayToList', ArrayToListFilter);
diff --git a/src/app/core/key-binding/key-binding-panel.html b/src/app/core/key-binding/key-binding-panel.html
index fbb32d0..df26318 100644
--- a/src/app/core/key-binding/key-binding-panel.html
+++ b/src/app/core/key-binding/key-binding-panel.html
@@ -23,21 +23,32 @@
</div>
<div class="row" ng-repeat="(k, v) in vm.bindings">
<div class="col-xs-12" ng-if="v.length > 0">
- <h5>{{k | capitalize}}</h5>
+ <table class="table table-condensed">
+ <thead>
+ <tr>
+ <th>{{k | capitalize}}:</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="binding in v" ng-if="binding.description">
+ <td>
+ <code class="text-center">
+ <span ng-repeat="m in binding.modifiers">
+ {{m}} +
+ </span>
+ {{binding.label.toLowerCase() || binding.key.toLowerCase()}}
+ </code>
+ </td>
+ <td class="text-right">
+ <p>{{binding.description}}</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</div>
- <div class="col-xs-12" ng-repeat="binding in v" ng-if="binding.description">
- <div class="row">
- <div class="col-xs-5">
- <code class="text-center">
- <span ng-repeat="m in binding.modifiers">
- {{m}} +
- </span>
- {{binding.label.toLowerCase() || binding.key.toLowerCase()}}
- </code>
- </div>
- <div class="col-xs-7">
- <p>{{binding.description}}</p>
- </div>
- </div>
+</div>
+<div class="row">
+ <div class="col-xs-12">
+ <xos-debug></xos-debug>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/core/key-binding/key-binding-panel.scss b/src/app/core/key-binding/key-binding-panel.scss
index 556f6dd..ca4738d 100644
--- a/src/app/core/key-binding/key-binding-panel.scss
+++ b/src/app/core/key-binding/key-binding-panel.scss
@@ -22,4 +22,11 @@
code {
background: $background-light-color;
}
+
+ > .row:last-child {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/src/app/core/key-binding/key-binding-panel.ts b/src/app/core/key-binding/key-binding-panel.ts
index af3e810..c77f6b6 100644
--- a/src/app/core/key-binding/key-binding-panel.ts
+++ b/src/app/core/key-binding/key-binding-panel.ts
@@ -1,4 +1,3 @@
-
/*
* Copyright 2017-present Open Networking Foundation
@@ -15,13 +14,13 @@
* limitations under the License.
*/
-
import {IXosKeyboardShortcutService, IXosKeyboardShortcutMap} from '../services/keyboard-shortcut';
import './key-binding-panel.scss';
class XosKeyBindingPanelController {
static $inject = ['$scope', 'XosKeyboardShortcut'];
public bindings: IXosKeyboardShortcutMap;
+
constructor (
private $scope: ng.IScope,
private XosKeyboardShortcut: IXosKeyboardShortcutService
diff --git a/src/app/core/side-panel/side-panel.html b/src/app/core/side-panel/side-panel.html
index 238cebb..1f52843 100644
--- a/src/app/core/side-panel/side-panel.html
+++ b/src/app/core/side-panel/side-panel.html
@@ -22,8 +22,8 @@
<i class="fa fa-remove" ng-click="vm.close()"></i>
</div>
</div>
- <div class="row">
- <div class="col-xs-12" id="side-panel-container">
+ <div class="row full-height">
+ <div class="col-xs-12 full-height" id="side-panel-container">
</div>
</div>
diff --git a/src/app/core/side-panel/side-panel.scss b/src/app/core/side-panel/side-panel.scss
index 56f7190..a6c718b 100644
--- a/src/app/core/side-panel/side-panel.scss
+++ b/src/app/core/side-panel/side-panel.scss
@@ -21,6 +21,12 @@
$side-panel-width: 400px;
xos-side-panel {
+ .full-height {
+ height: 97%;
+ & > .full-height {
+ height: 100%;
+ }
+ }
.xos-side-panel {
width: $side-panel-width;
height: 100%;
diff --git a/src/app/datasources/websocket/global.ts b/src/app/datasources/websocket/global.ts
index 3b07eca..aeb92b4 100644
--- a/src/app/datasources/websocket/global.ts
+++ b/src/app/datasources/websocket/global.ts
@@ -53,7 +53,6 @@
this.socket = io(this.AppConfig.websocketClient);
this.socket.on('event', (data: IWSEvent): void => {
- this.$log.debug(`[WebSocket] Received Event for: ${data.model} [${data.msg.pk}]`);
if (data.msg.changed_fields.length === 0 || _.intersection(data.msg.changed_fields, ignoredFields).length === data.msg.changed_fields.length) {
// NOTE means that the only updated fields does not change anything in the UI, so don't send events around
@@ -61,6 +60,8 @@
return;
}
+ this.$log.info(`[WebSocket] Received Event for: ${data.model} [${data.msg.pk}]`);
+
this._events.next(data);
// NOTE update observers of parent classes
diff --git a/src/app/views/crud/crud.html b/src/app/views/crud/crud.html
index 17ff51a..df5d13e 100644
--- a/src/app/views/crud/crud.html
+++ b/src/app/views/crud/crud.html
@@ -53,7 +53,7 @@
<xos-form ng-model="vm.relatedModels.manytoone[r.model][r.on_field].model" config="vm.relatedModels.manytoone[r.model][r.on_field].formConfig"></xos-form>
</div>
</uib-tab>
- <uib-tab classes="{{vm.relatedModels.onetomany[r.model][r.on_field].class}}" ng-if="vm.relatedModels.onetomany[r.model]" ng-repeat="r in vm.related.onetomany" heading="{{r.model}} {{vm.getHumanReadableOnField(r)}}">
+ <uib-tab ng-if="vm.relatedModels.onetomany[r.model]" ng-repeat="r in vm.related.onetomany" classes="{{vm.relatedModels.onetomany[r.model][r.on_field].class}}" heading="{{r.model}} {{vm.getHumanReadableOnField(r)}}">
<div class="panel-body">
<xos-table config="vm.relatedModels.onetomany[r.model][r.on_field].tableConfig" data="vm.relatedModels.onetomany[r.model][r.on_field].model"></xos-table>
</div>
diff --git a/src/decorators.ts b/src/decorators.ts
index 39f5a66..5c1c804 100644
--- a/src/decorators.ts
+++ b/src/decorators.ts
@@ -15,14 +15,18 @@
* limitations under the License.
*/
-
export default function XosLogDecorator($provide: ng.auto.IProvideService) {
$provide.decorator('$log', function($delegate: any) {
const isLogEnabled = () => {
- // NOTE to enable debug, in the broser console set: localStorage.debug = 'true'
- // NOTE to disable debug, in the broser console set: localStorage.debug = 'false'
+ // NOTE to enable debug, in the browser console set: localStorage.debug = 'true'
+ // NOTE to disable debug, in the browser console set: localStorage.debug = 'false'
return window.localStorage.getItem('debug') === 'true';
};
+
+ const isEventLogEnabled = () => {
+ return window.localStorage.getItem('debug-event') === 'true';
+ };
+
// Save the original $log.debug()
let logFn = $delegate.log;
let infoFn = $delegate.info;
@@ -33,10 +37,21 @@
// create the replacement function
const replacement = (fn) => {
return function(){
- if (!isLogEnabled()) {
+ // TODO
+ // Provide more structure a way to group log message and hide/show them
+ // eg: the first parameter is the group name
+
+ const msg = arguments[0];
+ if (!isLogEnabled() && msg.indexOf('WebSocket') === 0) {
return;
}
+ if (!isEventLogEnabled() && msg.indexOf('WebSocket') > 0) {
+ return;
+ }
+
+ // TODO toggle events notifications
+
let args = [].slice.call(arguments);
let now = new Date();
diff --git a/src/index.ts b/src/index.ts
index 937b482..2a287d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -46,6 +46,7 @@
import {IXosKeyboardShortcutService} from './app/core/services/keyboard-shortcut';
import {IXosModelDiscovererService} from './app/datasources/helpers/model-discoverer.service';
import {xosServiceGraph} from './app/service-graph/index';
+import {IXosDebugService} from './app/core/debug/debug.service';
export interface IXosAppConfig {
apiEndpoint: string;
@@ -100,7 +101,8 @@
XosModelDiscoverer: IXosModelDiscovererService,
AuthService: IXosAuthService,
XosKeyboardShortcut: IXosKeyboardShortcutService,
- PageTitle: IXosPageTitleService // NOTE this service is not used, but needs to be loaded somewhere
+ PageTitle: IXosPageTitleService, // NOTE this service is not used, but needs to be loaded somewhere
+ XosDebug: IXosDebugService
) => {
// handle style configs
$rootScope['favicon'] = `./app/images/brand/${StyleConfig.favicon}`;
@@ -136,21 +138,6 @@
// register keyboard shortcut
XosKeyboardShortcut.setup();
-
- XosKeyboardShortcut.registerKeyBinding({
- key: 'D',
- cb: () => {
- if (window.localStorage.getItem('debug') === 'true') {
- $log.info(`[XosKeyboardShortcut] Disabling debug`);
- window.localStorage.setItem('debug', 'false');
- }
- else {
- window.localStorage.setItem('debug', 'true');
- $log.info(`[XosKeyboardShortcut] Enabling debug`);
- }
- },
- description: 'Toggle debug messages in browser console'
- }, 'global');
-
+ XosDebug.setupShortcuts();
});