feat(notification): display app errors, close #319 (#333)

* refactor(log): Refactor logging service

Removed the InjectionToken and changed LogService as default logger.
Finally ElectronLogService implements LogService directly.

* refactor: Optimize imports

* fix(app-update): Add missing rxjs imports

* style: Remove extra line

* refactor(store): Move app.actions.ts to shared module

* feat(notification): Add notification panel

Add angular-notifier to the app and created the ShowNotificationAction
to manage notifications

* style(notification): Fix tslint suggestion

* fix(notification): Add missing rxjs imports

electron/src/app.module.ts

@@ -2,6 +2,7 @@ import { ErrorHandler, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NotifierModule } from 'angular-notifier';
 
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
@@ -79,7 +80,13 @@ import { UhkLibUsbApiService } from './services/uhk-lib-usb-api.service';
 import { UhkHidApiService } from './services/uhk-hid-api.service';
 import { uhkDeviceProvider } from './services/uhk-device-provider';
 
-import { AutoUpdateSettingsEffects, KeymapEffects, MacroEffects, UserConfigEffects } from './shared/store/effects';
+import {
+    ApplicationEffects,
+    AutoUpdateSettingsEffects,
+    KeymapEffects,
+    MacroEffects,
+    UserConfigEffects
+} from './shared/store/effects';
 import { ApplicationEffect, AppUpdateEffect } from './store/effects';
 
 import { KeymapEditGuard } from './shared/components/keymap/edit';
@@ -93,11 +100,12 @@ import { DATA_STORAGE_REPOSITORY } from './shared/services/datastorage-repositor
 import { ElectronDataStorageRepositoryService } from './services/electron-datastorage-repository.service';
 import { DefaultUserConfigurationService } from './shared/services/default-user-configuration.service';
 import { ElectronLogService } from './services/electron-log.service';
-import { LOG_SERVICE } from '../../shared/src/services/logger.service';
+import { LogService } from './shared/services/logger.service';
 import { ElectronErrorHandlerService } from './services/electron-error-handler.service';
 import { AppUpdateRendererService } from './services/app-update-renderer.service';
 import { reducer } from './store';
 import { AutoUpdateSettings } from './shared/components/auto-update-settings/auto-update-settings';
+import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-config';
 
 @NgModule({
     declarations: [
@@ -172,12 +180,14 @@ import { AutoUpdateSettings } from './shared/components/auto-update-settings/aut
         }),
         StoreLogMonitorModule,
         Select2Module,
+        NotifierModule.withConfig(angularNotifierConfig),
         EffectsModule.runAfterBootstrap(KeymapEffects),
         EffectsModule.runAfterBootstrap(MacroEffects),
         EffectsModule.runAfterBootstrap(UserConfigEffects),
         EffectsModule.runAfterBootstrap(AutoUpdateSettingsEffects),
         EffectsModule.run(ApplicationEffect),
-        EffectsModule.run(AppUpdateEffect)
+        EffectsModule.run(AppUpdateEffect),
+        EffectsModule.run(ApplicationEffects)
     ],
     providers: [
         UhkDeviceConnectedGuard,
@@ -192,7 +202,7 @@ import { AutoUpdateSettings } from './shared/components/auto-update-settings/aut
         CaptureService,
         { provide: DATA_STORAGE_REPOSITORY, useClass: ElectronDataStorageRepositoryService },
         DefaultUserConfigurationService,
-        { provide: LOG_SERVICE, useClass: ElectronLogService },
+        { provide: LogService, useClass: ElectronLogService },
         { provide: ErrorHandler, useClass: ElectronErrorHandlerService },
         AppUpdateRendererService,
         UhkHidApiService,

electron/src/app/app.component.html

@@ -5,3 +5,4 @@
 </app-update-available>
 
 <router-outlet></router-outlet>
+<notifier-container></notifier-container>

electron/src/components/privilege-checker/privilege-checker.component.ts

@@ -15,7 +15,7 @@ import * as path from 'path';
 import * as sudo from 'sudo-prompt';
 
 import { UhkDeviceService } from '../../services/uhk-device.service';
-import { ILogService, LOG_SERVICE } from '../../../../shared/src/services/logger.service';
+import { LogService } from '../../shared/services/logger.service';
 
 @Component({
     selector: 'privilege-checker',
@@ -28,7 +28,7 @@ export class PrivilegeCheckerComponent {
 
     constructor(private router: Router,
                 private uhkDevice: UhkDeviceService,
-                @Inject(LOG_SERVICE) private logService: ILogService) {
+                private logService: LogService) {
         if (isDev) {
             this.rootDir = path.resolve(path.join(remote.process.cwd(), remote.process.argv[1]), '..');
         } else {

electron/src/services/electron-error-handler.service.ts

@@ -1,8 +1,9 @@
-import { ErrorHandler, Inject } from '@angular/core';
-import { ILogService, LOG_SERVICE } from '../../../shared/src/services/logger.service';
+import { ErrorHandler, Injectable } from '@angular/core';
+import { LogService} from '../shared/services/logger.service';
 
+@Injectable()
 export class ElectronErrorHandlerService implements ErrorHandler {
-    constructor(@Inject(LOG_SERVICE)private logService: ILogService) {}
+    constructor(private logService: LogService) {}
 
     handleError(error: any) {
         this.logService.error(error);

electron/src/services/electron-log.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import * as log from 'electron-log';
 import * as util from 'util';
 
-import { ILogService } from '../../../shared/src/services/logger.service';
+import { LogService } from '../shared/services/logger.service';
 
 /**
  * This service use the electron-log package to write log in file.
@@ -14,7 +14,7 @@ import { ILogService } from '../../../shared/src/services/logger.service';
  * The app name: UHK Agent. The up to date value in the scripts/release.js file.
  */
 @Injectable()
-export class ElectronLogService implements ILogService {
+export class ElectronLogService implements LogService {
     private static getErrorText(args: any) {
         return util.inspect(args);
     }

electron/src/services/uhk-device.service.ts

@@ -6,7 +6,7 @@ import { Subscriber } from 'rxjs/Subscriber';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Subscription } from 'rxjs/Subscription';
 
-import { ILogService, LOG_SERVICE } from '../shared/services/logger.service';
+import { LogService } from '../shared/services/logger.service';
 import { SenderMessage } from '../models/sender-message';
 import { Constants } from '../shared/util/constants';
 
@@ -24,7 +24,7 @@ export abstract class UhkDeviceService {
     protected messageIn$: Observable<Buffer>;
     protected messageOut$: Subject<SenderMessage>;
 
-    constructor(@Inject(LOG_SERVICE) protected logService: ILogService) {
+    constructor(protected logService: LogService) {
         this.messageOut$ = new Subject<SenderMessage>();
         this.initialized$ = new BehaviorSubject(false);
         this.connected$ = new BehaviorSubject(false);

electron/src/services/uhk-hid-api.service.ts

@@ -14,7 +14,7 @@ import 'rxjs/add/operator/concatMap';
 import 'rxjs/add/operator/publish';
 import 'rxjs/add/operator/do';
 
-import { ILogService, LOG_SERVICE } from '../shared/services/logger.service';
+import { LogService } from '../shared/services/logger.service';
 import { Constants } from '../shared/util';
 import { UhkDeviceService } from './uhk-device.service';
 
@@ -24,7 +24,7 @@ export class UhkHidApiService extends UhkDeviceService implements OnDestroy {
 
     private pollTimer$: Subscription;
 
-    constructor(@Inject(LOG_SERVICE) protected logService: ILogService) {
+    constructor(protected logService: LogService) {
         super(logService);
 
         this.pollUhkDevice();

electron/src/services/uhk-lib-usb-api.service.ts

@@ -14,7 +14,7 @@ import 'rxjs/add/operator/do';
 
 import { Device, findByIds, InEndpoint, Interface, on, OutEndpoint } from 'usb';
 
-import { ILogService, LOG_SERVICE } from '../shared/services/logger.service';
+import { LogService} from '../shared/services/logger.service';
 import { Constants } from '../shared/util';
 import { UhkDeviceService } from './uhk-device.service';
 
@@ -28,7 +28,7 @@ export class UhkLibUsbApiService extends UhkDeviceService implements OnDestroy {
     }
 
     constructor(zone: NgZone,
-                @Inject(LOG_SERVICE) protected logService: ILogService) {
+                protected logService: LogService) {
         super(logService);
 
         this.initialize();

electron/src/store/actions/app.action.ts

@@ -1,22 +0,0 @@
-import { Action } from '@ngrx/store';
-import { type } from '../../shared/util/';
-
-const PREFIX = '[app] ';
-
-// tslint:disable-next-line:variable-name
-export const ActionTypes = {
-    APP_BOOTSRAPPED: type(PREFIX + 'bootstrapped'),
-    APP_STARTED: type(PREFIX + 'started')
-};
-
-export class AppBootsrappedAction implements Action {
-    type = ActionTypes.APP_BOOTSRAPPED;
-}
-
-export class AppStartedAction implements Action {
-    type = ActionTypes.APP_STARTED;
-}
-
-export type Actions
-    = AppStartedAction
-    | AppBootsrappedAction;

electron/src/store/effects/app.effect.ts

@@ -4,7 +4,7 @@ import { Effect, Actions } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/do';
 
-import * as app from '../actions/app.action';
+import * as app from '../../shared/store/actions/app.action';
 import { AppUpdateRendererService } from '../../services/app-update-renderer.service';
 
 @Injectable()

electron/src/store/reducers/app.reducer.ts

@@ -1,4 +1,4 @@
-import { Actions, ActionTypes } from '../actions/app.action';
+import { Actions, ActionTypes } from '../../shared/store/actions/app.action';
 
 export interface State {
     started: boolean;