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%;