Showing synchronizer notification
Change-Id: Ibc0ef77471026b48fa2e0a577adde9e43dde2a10
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index b327754..786d4e8 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -4,4 +4,16 @@
{{vm.title}}
</a>
</p>
+ <p class="header-date notification">
+ <i ng-show="vm.notifications.length > 0" class="badge"></i>
+ <i class="fa fa-bell" ng-click="showNotification = !showNotification"></i>
+ <div class="notification-panel" ng-show="showNotification">
+ <ul>
+ <li ng-repeat="n in vm.notifications">
+ <b>{{n.model}}</b><br>
+ <i>{{n.msg.object.name}} status is {{n.msg.object.backend_status}}</i>
+ </li>
+ </ul>
+ </div>
+ </p>
</header>
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
new file mode 100644
index 0000000..0df150c
--- /dev/null
+++ b/src/app/core/header/header.scss
@@ -0,0 +1,37 @@
+xos-header {
+ .badge {
+ display: block;
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ border: 4px solid red;
+ background: transparent;
+ position: absolute;
+ right: 15px;
+ top: 18px;
+ }
+
+ .fa {
+ cursor: pointer;
+ }
+
+ .notification-panel {
+ position: absolute;
+ background: darken(grey, 20);
+ right: 0;
+ top: 60px;
+ border: 1px solid darken(grey, 35);
+
+ ul {
+ margin: 0;
+ margin-right: 10px;
+ list-style: none;
+ padding: 10px 5px 0;
+
+ li {
+ border-bottom: 1px solid darken(grey, 35);
+ color: #fff;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/core/header/header.spec.ts b/src/app/core/header/header.spec.ts
index 7c00602..0191a87 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -4,12 +4,19 @@
import 'angular-mocks';
import {xosHeader} from './header';
import {StyleConfig} from '../../config/style.config';
+import {Subject} from 'rxjs';
describe('header component', () => {
beforeEach(() => {
angular
.module('xosHeader', ['app/core/header/header.html'])
- .component('xosHeader', xosHeader);
+ .component('xosHeader', xosHeader)
+ .service('SynchronizerStore', function(){
+ const events = new Subject();
+ this.query = () => {
+ return events.asObservable();
+ };
+ });
angular.mock.module('xosHeader');
});
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index c2e4c41..06c4984 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -1,10 +1,25 @@
+import './header.scss';
import {StyleConfig} from '../../config/style.config';
+import {IStoreService} from '../../datasources/stores/slices.store';
+import {IWSEvent} from '../../datasources/websocket/global';
class HeaderController {
+ static $inject = ['SynchronizerStore'];
public title: string;
+ public notifications: IWSEvent[] = [];
- constructor() {
+ constructor(
+ private syncStore: IStoreService
+ ) {
this.title = StyleConfig.projectName;
+
+ this.syncStore.query()
+ .subscribe(
+ (event: IWSEvent) => {
+ console.log(event);
+ this.notifications.push(event);
+ }
+ );
}
}
diff --git a/src/app/datasources/helpers/store.helpers.ts b/src/app/datasources/helpers/store.helpers.ts
index dfb1e7a..1a2b0ab 100644
--- a/src/app/datasources/helpers/store.helpers.ts
+++ b/src/app/datasources/helpers/store.helpers.ts
@@ -10,6 +10,7 @@
public updateCollection(event: IWSEvent, subject: BehaviorSubject<any>): BehaviorSubject<any> {
const collection: any[] = subject.value;
const index: number = _.findIndex(collection, (i) => {
+ // NOTE evaluate to use event.msg.pk
return i.id === event.msg.object.id;
});
const exist: boolean = index > -1;
diff --git a/src/app/datasources/index.ts b/src/app/datasources/index.ts
index 4473541..535937b 100644
--- a/src/app/datasources/index.ts
+++ b/src/app/datasources/index.ts
@@ -4,6 +4,7 @@
import {WebSocketEvent} from './websocket/global';
import {SliceStore} from './stores/slices.store';
import {StoreHelpers} from './helpers/store.helpers';
+import {SynchronizerStore} from './stores/synchronizer.store';
export const xosRest = 'xosDataSources';
@@ -17,4 +18,5 @@
angular
.module('xosDataSources')
.service('StoreHelpers', StoreHelpers)
+ .service('SynchronizerStore', SynchronizerStore)
.service('SlicesStore', SliceStore);
diff --git a/src/app/datasources/stores/synchronizer.store.ts b/src/app/datasources/stores/synchronizer.store.ts
new file mode 100644
index 0000000..598d23c
--- /dev/null
+++ b/src/app/datasources/stores/synchronizer.store.ts
@@ -0,0 +1,26 @@
+/// <reference path="../../../../typings/index.d.ts"/>
+
+import {Subject} from 'rxjs/Rx';
+import {IWSEvent, IWSEventService} from '../websocket/global';
+
+export class SynchronizerStore {
+ static $inject = ['WebSocket'];
+ private _notifications: Subject<IWSEvent> = new Subject();
+ constructor(
+ private webSocket: IWSEventService
+ ) {
+ this.webSocket.list()
+ .filter((e: IWSEvent) => {
+ return e.msg.changed_fields.indexOf('backend_status') > -1;
+ })
+ .subscribe(
+ (event: IWSEvent) => {
+ this._notifications.next(event);
+ }
+ );
+ }
+
+ query() {
+ return this._notifications.asObservable();
+ }
+}