arrange

@overflow/commons/prime-ng/prime-ng.module.ts

@@ -69,6 +69,7 @@ import { TreeTableModule } from 'primeng/primeng';
 import { CardModule } from 'primeng/card';
 import { DataViewModule } from 'primeng/dataview';
 import { SidebarModule } from 'primeng/sidebar';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 
 const PRIME_NG_MODULES: any[] = [
   AccordionModule,
@@ -142,7 +143,8 @@ const PRIME_NG_MODULES: any[] = [
   DataViewModule,
   SidebarModule,
   BlockUIModule,
-  InplaceModule
+  InplaceModule,
+  ProgressSpinnerModule
 ];
 
 @NgModule({

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

@@ -1,16 +1,22 @@
-<div class="ui-g">
+<p-blockUI [target]="content" [blocked]="pending">
+  <i class="fa ui-icon-lock block-icon"></i>
+</p-blockUI>
+
+<p-panel #content [showHeader]="false" class="block-panel">
+
+  <div class="ui-g">
     <div class="ui-g-6 ui-nopad">
       <h1>Info</h1>
     </div>
-  <!-- <p-messages [(value)]="msgs"></p-messages> -->
     <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
       <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
-    <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()"></button>
+      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNameErrMsg || descriptionErrMsg"></button>
+      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
+    </div>
   </div>
-</div>
 
-<!-- Probe info -->
-<div class="ui-g ui-bottom-space-10">
+  <!-- Probe info -->
+  <div class="ui-g ui-bottom-space-10">
     <p-panel [showHeader]="false" class="nopad">
       <div *ngIf="probeHost">
         <div class="ui-g form-group">
@@ -18,7 +24,8 @@
             <div *ngIf="editMode" class="of-key-value-div">
               <span>Name</span>
               <span class="ng-star-inserted">
-              <input #input type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="probeHost.probe.displayName = input.value">
+                <input #displayName type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="onDisplayNameEditing(displayName.value)"/>
+                <div *ngIf="displayNameErrMsg" class="ui-message ui-messages-error ui-corner-all">{{displayNameErrMsg}}</div>
               </span>
             </div>
             <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
@@ -31,7 +38,9 @@
             <div *ngIf="editMode" class="of-key-value-div">
               <span>Description</span>
               <span class="ng-star-inserted">
-              <input *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value">
+                <!-- <input *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value"> -->
+                <input #description type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
+                <div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
               </span>
             </div>
             <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
@@ -74,11 +83,15 @@
       </div>
     </p-panel>
 
-</div>
-<div class="ui-g" dir="rtl">
+  </div>
+  <div class="ui-g" dir="rtl">
     <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
       (click)="onRemoveClick()"></button>
     <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
-</div>
+  </div>
+
+</p-panel>
+
+
 <!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
 <p-growl [(value)]="msgs"></p-growl> -->

@overflow/probe/component/detail/detail.component.ts

@@ -9,28 +9,43 @@ import { MessageService } from 'primeng/components/common/messageservice';
 })
 export class ProbeDetailComponent {
 
+  @Input() pending: boolean;
   @Input() probeHost: ProbeHost;
   @Output() modify = new EventEmitter<ProbeHost>();
   @Output() discovery = new EventEmitter<number>();
 
   editMode = false;
+  displayNameErrMsg: string;
+  descriptionErrMsg: string;
+  displayName: string;
+  description: string;
 
   constructor(private messageService: MessageService) {
   }
 
+  onDisplayNameEditing(value: string) {
+    const msg: string = this.checkValidDisplayName(value);
+    if (msg !== null) {
+      this.displayNameErrMsg = msg;
+    } else {
+      this.displayNameErrMsg = null;
+      this.displayName = value;
+    }
+  }
+
+  onDescriptionEditing(value: string) {
+    const msg: string = this.checkValidDescription(value);
+    if (msg !== null) {
+      this.descriptionErrMsg = msg;
+    } else {
+      this.descriptionErrMsg = null;
+      this.description = value;
+    }
+  }
+
   onEditSave() {
-    const displayNameValidation = this.checkValidDisplayName();
-    if (displayNameValidation) {
-      alert(displayNameValidation);
-      return;
-    }
-
-    const descriptionValidation = this.checkValidDescription();
-    if (descriptionValidation) {
-      alert(descriptionValidation);
-      return;
-    }
-
+    this.probeHost.probe.displayName = this.displayName;
+    this.probeHost.probe.description = this.description;
     this.modify.emit(this.probeHost);
     this.editMode = false;
   }
@@ -39,25 +54,23 @@ export class ProbeDetailComponent {
     this.discovery.emit(this.probeHost.id);
   }
 
-  checkValidDisplayName(): string {
-    const displayName = this.probeHost.probe.displayName;
-    if (displayName.length <= 2 || displayName.length > 20) {
+  checkValidDisplayName(value: string): string | null {
+    if (value.length <= 2 || value.length > 20) {
       return 'displayname length : 3 ~ 20';
     }
     const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
-    if (displayName.match(regex)) {
+    if (value.match(regex)) {
       return 'Cannot use special characters.';
     }
     return null;
   }
 
-  checkValidDescription(): string {
-    const description = this.probeHost.probe.description;
-    if (description.length > 50) {
+  checkValidDescription(value: string): string | null {
+    if (value.length > 50) {
       return 'description length : 0 ~ 50';
     }
     const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
-    if (description.match(regex)) {
+    if (value.match(regex)) {
       return 'Cannot use special characters.';
     }
     return null;

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

@@ -1,5 +1,9 @@
 <h1>Probes</h1>
-<p-table [value]="probeHosts" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+<p-blockUI [target]="content" [blocked]="pending">
+  <i class="fa ui-icon-lock block-icon"></i>
+</p-blockUI>
+<p-panel #content [showHeader]="false" class="block-panel">
+  <p-table [value]="probeHosts" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
     <ng-template pTemplate="header">
       <tr>
         <th>Probe Name</th>
@@ -24,4 +28,5 @@
         <td>{{probeHost.probe.authorizeMember.name}}</td>
       </tr>
     </ng-template>
-</p-table>
+  </p-table>
+</p-panel>

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

@@ -7,6 +7,7 @@ import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 })
 export class ProbeListComponent {
   @Output() select = new EventEmitter<ProbeHost>();
+  @Input() pending;
   @Input() probeHosts: ProbeHost[];
 
   constructor() {

@overflow/probe/container/probe-detail-container.html

@@ -1 +1,2 @@
-<of-probe-detail [probeHost]="(probeHost$ | async)" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>
+<div *ngIf="error">An error has occurred.</div>
+<of-probe-detail [pending]="pending$ |async" [probeHost]="probeHost$ | async" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>

@overflow/probe/container/probe-detail-container.ts

@@ -3,9 +3,8 @@ import { Observable } from 'rxjs';
 import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 import { Store, select } from '@ngrx/store';
 import * as ProbeStore from '../store/entity/probe';
-import { ProbeSelector } from '../store';
+import { ProbeSelector, ProbeDetailContainerSelector } from '../store';
 import { ActivatedRoute } from '@angular/router';
-import { RPCClientError } from '@loafer/ng-rpc';
 
 @Component({
   selector: 'of-probe-detail-container',
@@ -16,12 +15,15 @@ export class ProbeDetailContainerComponent implements OnInit {
   @Input() probeHostID: number;
   @Output() discovery = new EventEmitter<number>();
   probeHost$: Observable<ProbeHost>;
-  error$: Observable<RPCClientError>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
 
   constructor(
     private store: Store<ProbeStore.State>,
     private route: ActivatedRoute,
   ) {
+    this.pending$ = this.store.pipe(select(ProbeDetailContainerSelector.selectPending));
+    this.error$ = this.store.pipe(select(ProbeSelector.selectError));
   }
 
   ngOnInit() {

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

@@ -1 +1 @@
-<of-probe-list (select)="onSelect($event)" [probeHosts]="probeHosts$ | async"></of-probe-list>
+<of-probe-list [pending]="pending$ | async" (select)="onSelect($event)" [probeHosts]="probeHosts$ | async"></of-probe-list>

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

@@ -3,7 +3,7 @@ import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 import * as ProbeStore from '../store/entity/probe';
-import { ProbeSelector } from '../store';
+import { ProbeSelector, ProbeListContainerSelector } from '../store';
 import { AuthSelector } from '@overflow/member/store';
 import { Domain } from '@overflow/commons-typescript/model/domain';
 
@@ -14,10 +14,12 @@ import { Domain } from '@overflow/commons-typescript/model/domain';
 export class ProbeListContainerComponent implements OnInit {
 
     probeHosts$: Observable<ProbeHost[]>;
+    pending$: Observable<boolean>;
     @Output() select = new EventEmitter();
 
     constructor(private store: Store<ProbeStore.State>) {
         this.probeHosts$ = store.pipe(select(ProbeSelector.selectAll));
+        this.pending$ = store.pipe(select(ProbeListContainerSelector.selectPending));
     }
 
     ngOnInit() {

@overflow/probe/store/container/probe-detail/index.ts

@@ -0,0 +1,2 @@
+export * from './probe-detail.reducer';
+export * from './probe-detail.state';

@overflow/probe/store/container/probe-detail/probe-detail.reducer.ts

@@ -0,0 +1,36 @@
+import { ActionType, Actions } from '../../entity/probe';
+import {
+  State,
+  initialState,
+} from './probe-detail.state';
+
+import { Probe } from '@overflow/commons-typescript/model/probe';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Read: {
+      return {
+        ...state,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadSuccess: {
+      return {
+        ...state,
+        pending: false,
+      };
+    }
+
+    case ActionType.ReadFailure: {
+      return {
+        ...state,
+        pending: true,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

@overflow/probe/store/container/probe-detail/probe-detail.state.ts

@@ -0,0 +1,15 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { createEntityAdapter, EntityState } from '@loafer/ng-entity';
+
+export interface State {
+  pending: boolean;
+}
+export const initialState: State = {
+  pending: false,
+};
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectPending: createSelector(selector, (state: State) => state.pending),
+  };
+}

@overflow/probe/store/entity/probe/probe.effect.ts

@@ -64,7 +64,7 @@ export class Effects {
       return new ReadSuccess(probeHost);
     })
     .catch((error: RPCClientError) => {
-      return of(new ReadAllByDomainIDFailure(error));
+      return of(new ReadFailure(error));
     });
 
     @Effect()

@overflow/probe/store/index.ts

@@ -10,15 +10,18 @@ import { MODULE } from '../probe.constant';
 
 import * as ProbeEntityStore from './entity/probe';
 import * as ProbeListContainerStore from './container/probe-list';
+import * as ProbeDetailContainerStore from './container/probe-detail';
 
 export interface State {
   probes: ProbeEntityStore.State;
   probe_list_container: ProbeListContainerStore.State;
+  probe_detail_container: ProbeDetailContainerStore.State;
 }
 
 export const REDUCERS = {
   probes: ProbeEntityStore.reducer,
   probe_list_container: ProbeListContainerStore.reducer,
+  probe_detail_container: ProbeDetailContainerStore.reducer
 };
 
 export const EFFECTS = [
@@ -36,3 +39,8 @@ export const ProbeListContainerSelector = ProbeListContainerStore.getSelectors(c
   selectState,
   (state: State) => state.probe_list_container
 ));
+
+export const ProbeDetailContainerSelector = ProbeDetailContainerStore.getSelectors(createSelector(
+  selectState,
+  (state: State) => state.probe_detail_container
+));

src/app/pages/pages.component.html

@@ -20,7 +20,8 @@
         <div class="layout-main">
             <of-breadcrumb></of-breadcrumb>
 
-            <div class="layout-content" [@routerAnim]="getRouterOutletState(o)">
+            <!-- <div class="layout-content" [@routerAnim]="getRouterOutletState(o)"> -->
+            <div class="layout-content">
                 <router-outlet #o="outlet"></router-outlet>
             </div>
 

src/app/pages/pages.component.ts

@@ -15,7 +15,7 @@ enum MenuOrientation {
   selector: 'of-pages',
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss'],
-  animations: [ slide ],
+  // animations: [ fade ],
 })
 export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
   layoutCompact = true;

src/app/pages/probes/probe/probe-page.component.ts

@@ -11,8 +11,8 @@ import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 })
 export class ProbePageComponent {
 
-  private isDetail: boolean;
-  private probeHostID: string;
+  isDetail: boolean;
+  probeHostID: string;
 
   constructor(
     private router: Router,

src/styles.scss

@@ -405,3 +405,13 @@ body .ui-progressbar .ui-progressbar-value {
 .footer {
     height: 50px;
 }
+.block-icon {
+    position: absolute;
+    top: 40%;
+    left: 45%;
+    font-size: 50px;
+    color: #ffffff !important;
+}
+.ui-panel {
+    border: none !important;
+}