test

@overflow/commons/component/message/error-message.component.html

@@ -0,0 +1 @@
+<p-messages [(value)]="msgs" [closable]="closable"></p-messages>

@overflow/commons/component/message/error-message.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Message } from 'primeng/primeng';
+
+@Component({
+  selector: 'of-error-message',
+  templateUrl: './error-message.component.html',
+})
+export class ErrorMessageComponent implements OnInit, OnChanges {
+
+  @Input() error: any;
+  @Input() closeAfter: number;
+  @Input() closable: boolean;
+  msgs: Message[] = [];
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['error'].currentValue) {
+      const detail = ' (' + this.error.response.code + ')';
+      this.msgs = [];
+      this.msgs.push({ severity: 'error', summary: 'Sorry. An Error has occurred.', detail: detail });
+      if (this.closeAfter) {
+        setTimeout(() => {
+          this.msgs = [];
+        }, this.closeAfter * 1000);
+      }
+    }
+  }
+}

@overflow/commons/component/message/message.component.html

@@ -1 +1 @@
-<p-messages [(value)]="msgs" [closable]="closable"></p-messages>
+<p-messages [(value)]="message" [closable]="closable"></p-messages>

@overflow/commons/component/message/message.component.ts

@@ -5,30 +5,14 @@ import { Message } from 'primeng/primeng';
   selector: 'of-message',
   templateUrl: './message.component.html',
 })
-export class MessageComponent implements OnInit, OnChanges {
+export class MessageComponent {
 
-  @Input() error: any;
+  @Input() message: Message;
   @Input() closeAfter: number;
   @Input() closable: boolean;
-  msgs: Message[] = [];
 
   constructor(
   ) {
   }
 
-  ngOnInit() {
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['error'].currentValue) {
-      const detail = ' (' + this.error.response.code + ')';
-      this.msgs = [];
-      this.msgs.push({ severity: 'error', summary: 'Sorry. An Error has occurred.', detail: detail });
-      if (this.closeAfter) {
-        setTimeout(() => {
-          this.msgs = [];
-        }, this.closeAfter * 1000);
-      }
-    }
-  }
 }

@overflow/commons/component/message/message.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PrimeNGModules } from '@overflow/commons/prime-ng/prime-ng.module';
 import { MessageComponent } from './message.component';
+import { ErrorMessageComponent } from './error-message.component';
 
 @NgModule({
     imports: [
@@ -9,10 +10,12 @@ import { MessageComponent } from './message.component';
         PrimeNGModules
     ],
     declarations: [
-        MessageComponent
+        MessageComponent,
+        ErrorMessageComponent
     ],
     exports: [
-        MessageComponent
+        MessageComponent,
+        ErrorMessageComponent
     ]
 })
 export class MessageModule { }

@overflow/noauth-probe/component/noauth-probe-list.component.html

@@ -1,6 +1,5 @@
-<p-blockUI [target]="content" [blocked]="pending">
-  <i class="fa ui-icon-lock block-icon"></i>
-</p-blockUI>
+<of-error-message [error]="error" [closable]="false"></of-error-message>
+<of-block-progressbar [target]="content" [pending]="pending"></of-block-progressbar>
 
 <p-panel #content [showHeader]="false" class="block-panel">
   <h1>Unauthorized</h1>
@@ -74,5 +73,5 @@
     </ng-template>
   </p-table>
   <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
-  <p-growl [(value)]="msgs"></p-growl>
+  <!-- <p-growl [(value)]="msgs"></p-growl> -->
 </p-panel>

@overflow/noauth-probe/component/noauth-probe-list.component.ts

@@ -14,7 +14,6 @@ export class NoAuthProbeListComponent {
 
   @Output() accept = new EventEmitter<NoAuthProbe>();
   @Output() deny = new EventEmitter<NoAuthProbe>();
-  msgs: Message[];
 
   constructor(
     private confirmationService: ConfirmationService,
@@ -22,8 +21,6 @@ export class NoAuthProbeListComponent {
   }
 
   onAcceptOrDeny(isAccept: boolean, selected: NoAuthProbe) {
-    console.log(selected);
-    this.msgs = [];
     const title = isAccept ?
       'Are you sure to accept this Probe?' : 'Are you sure to deny this Probe';
     const message = isAccept ?

@overflow/noauth-probe/container/noauth-probe-list-container.component.html

@@ -1,5 +1,3 @@
-<p-messages [(value)]="msgs"></p-messages>
-
 <of-noauth-probe-list 
   [noauthProbes]="noauthProbes$ | async"
   [pending]="pending$ | async"

@overflow/noauth-probe/container/noauth-probe-list-container.component.ts

@@ -1,41 +1,34 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 
 import { AuthContainerSelector } from '@overflow/shared/auth/store';
-import { Domain, DomainMember } from '@overflow/commons-typescript/model/domain';
+import { DomainMember } from '@overflow/commons-typescript/model/domain';
 import * as NoAuthProbeEntityStore from '../store/entity/noauth-probe';
 import { NoAuthProbeListContainerSelector } from '../store';
 import { NoAuthProbe } from '@overflow/commons-typescript/model/noauth';
 import { ConfirmationService } from 'primeng/primeng';
 import { MessageService } from 'primeng/components/common/messageservice';
 import { RPCClientError } from '@loafer/ng-rpc';
-import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'of-noauth-probe-list-container',
   templateUrl: './noauth-probe-list-container.component.html',
-  providers: [ConfirmationService, MessageService]
 })
-export class NoAuthProbeListContainerComponent implements OnInit, OnDestroy {
+export class NoAuthProbeListContainerComponent implements OnInit {
   noauthProbes$: Observable<NoAuthProbe[]>;
   pending$: Observable<boolean>;
-  errorSubscription: Subscription;
+  error$: Observable<any>;
 
   constructor(
     private store: Store<any>,
-    private messageService: MessageService,
   ) {
   }
 
   ngOnInit() {
     this.pending$ = this.store.pipe(select(NoAuthProbeListContainerSelector.selectPending));
-    this.errorSubscription = this.store.pipe(select(NoAuthProbeListContainerSelector.selectError)).subscribe(
-      (e: any) => {
-        this.messageService.add({severity: 'error', summary: 'Service Message', detail: 'Via MessageService'});
-      }
-    );
+    this.error$ = this.store.pipe(select(NoAuthProbeListContainerSelector.selectError));
     this.noauthProbes$ = this.store.pipe(select(NoAuthProbeListContainerSelector.selectAll)).map((_noauthProbes: NoAuthProbe[]) => {
       if (null === _noauthProbes) {
         return null;
@@ -53,10 +46,6 @@ export class NoAuthProbeListContainerComponent implements OnInit, OnDestroy {
     );
   }
 
-  ngOnDestroy(): void {
-    this.errorSubscription.unsubscribe();
-  }
-
   accept(noAuthProbe: NoAuthProbe) {
     this.store.dispatch(new NoAuthProbeEntityStore.Accept({aa: noAuthProbe.id} as any));
   }

@overflow/noauth-probe/noauth-probe.module.ts

@@ -9,6 +9,8 @@ import { COMPONENTS } from './component';
 import { CONTAINER_COMPONENTS } from './container';
 
 import { SERVICES } from './service';
+import { MessageModule } from '@overflow/commons/component/message/message.module';
+import { BlockProgressbarModule } from '@overflow/commons/component/block-progressbar/block-progressbar.module';
 
 @NgModule({
   imports: [
@@ -17,6 +19,8 @@ import { SERVICES } from './service';
     NoAuthProbeRPCModule,
     NoAuthProbeLoggerModule,
     PrimeNGModules,
+    MessageModule,
+    BlockProgressbarModule,
   ],
   declarations: [
     COMPONENTS,

@overflow/probe/component/detail/detail.component.html

@@ -1,6 +1,5 @@
-<p-blockUI [target]="content" [blocked]="pending">
-  <i class="fa ui-icon-lock block-icon"></i>
-</p-blockUI>
+<of-error-message [error]="error" [closable]="false"></of-error-message>
+<of-block-progressbar [target]="content" [pending]="pending"></of-block-progressbar>
 
 <p-panel #content [showHeader]="false" class="block-panel">
 

@overflow/probe/component/list/list.component.html

@@ -1,5 +1,5 @@
 <h1>Probes</h1>
-<of-message [error]="error" [closable]="false"></of-message>
+<of-error-message [error]="error" [closable]="false"></of-error-message>
 <of-block-progressbar [target]="content" [pending]="pending"></of-block-progressbar>
 
 <p-panel #content [showHeader]="false" class="block-panel">

@overflow/probe/component/list/list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 
 @Component({