test subscription

src/packages/probe/component/detail/detail.component.html

@@ -1,4 +1,5 @@
 <h1>Info</h1>
+
 <p-dialog header="Discovery" [width]="800" [(visible)]="display">
   <of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
 </p-dialog>
@@ -6,10 +7,15 @@
   <p-panel [showHeader]="false" class="nopad">
     <div *ngIf="probe">
 
+      <div class="ui-inputgroup">
+        <span class="md-inputfield">
+          <input #input type="text" pInputText value="{{probe.displayName}}">
+          <label></label>
+        </span>
+        <button pButton type="button" icon="ui-icon-search" (click)="onDisplayNameChange(input.value)"></button>
+      </div>
+
       <div class="ui-g form-group">
-        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-          <of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
-        </div>
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
           <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
         </div>

src/packages/probe/component/detail/detail.component.ts

@@ -1,12 +1,14 @@
-import { Component, OnInit, Inject, AfterContentInit } from '@angular/core';
+import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import * as DetailStore from '../../store/detail';
-import { DetailSelector } from '../../store';
+import * as ModifyStore from '../../store/modify';
+import { DetailSelector, ModifySelector } from '../../store';
 import { Probe } from '../../model';
 import { ConfirmationService } from 'primeng/primeng';
 import * as CIDR from 'ip-cidr';
+import { Subscription } from 'rxjs/Subscription';
 // import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
 
 
@@ -15,9 +17,12 @@ import * as CIDR from 'ip-cidr';
   templateUrl: './detail.component.html',
   providers: [ConfirmationService]
 })
-export class DetailComponent implements OnInit, AfterContentInit {
+export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
+  probeSubscription$: Subscription;
+  modifySuccessSubscription$: Subscription;
   probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
+  modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('probe')));
   probe: Probe = null;
   IPRange: string;
   display = false;
@@ -26,11 +31,12 @@ export class DetailComponent implements OnInit, AfterContentInit {
     private route: ActivatedRoute,
     private router: Router,
     private detailStore: Store<DetailStore.State>,
+    private modifyStore: Store<ModifyStore.State>,
     private confirmationService: ConfirmationService
   ) { }
 
   ngOnInit() {
-    this.probe$.subscribe(
+    this.probeSubscription$ = this.probe$.subscribe(
       (probe: Probe) => {
         if (probe) {
           this.probe = probe;
@@ -41,6 +47,23 @@ export class DetailComponent implements OnInit, AfterContentInit {
         console.log(error.response.message);
       }
     );
+    this.modifySuccessSubscription$ = this.modifySuccess$.subscribe(
+      (probe: Probe) => {
+        if (probe) {
+          console.log('modify success');
+        } else {
+          console.log('modify fail');
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.probeSubscription$.unsubscribe();
+    this.modifySuccessSubscription$.unsubscribe();
   }
 
   ngAfterContentInit() {
@@ -80,5 +103,13 @@ export class DetailComponent implements OnInit, AfterContentInit {
       }
     });
   }
+
+  onDisplayNameChange(value: string) {
+    this.probe.displayName = value;
+    this.modifyStore.dispatch(
+      new ModifyStore.Modify(this.probe)
+    );
+  }
+
 }
 

src/packages/probe/service/probe.service.ts

@@ -27,4 +27,8 @@ export class ProbeService {
     return this.rpcService.call<Probe>('ProbeService.read', id);
   }
 
+  public modify(probe: Probe): Observable<Probe> {
+    return this.rpcService.call<Probe>('ProbeService.modify', probe);
+  }
+
 }

src/packages/probe/store/detail/detail.action.ts

@@ -9,6 +9,9 @@ export enum ActionType {
   Read = '[probe.detail] Read',
   ReadSuccess = '[probe.detail] ReadSuccess',
   ReadFailure = '[probe.detail] ReadFailure',
+  Modify = '[probe.detail] Modify',
+  ModifySuccess = '[probe.detail] ModifySuccess',
+  ModifyFailure = '[probe.detail] ModifyFailure',
 }
 
 export class Read implements Action {

src/packages/probe/store/detail/detail.state.ts

@@ -2,19 +2,6 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
 
 import { Probe } from '../../model';
 
-// export interface State {
-//   error: RPCError | null;
-//   isPending: boolean;
-//   probe: Probe | null;
-// }
-
-// export const initialState: State = {
-//   error: null,
-//   isPending: false,
-//   probe: null,
-// };
-
-
 import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
 
 export interface State extends EntityState<Probe> {
@@ -29,13 +16,3 @@ export const initialState: State = adapter.getInitialState({
   probe: null,
 });
 
-export const getProbe = (state: State) => state.probe;
-export const getError = (state: State) => state.error;
-export const isPending = (state: State) => state.isPending;
-
-// export const {
-//   selectIds,
-//   selectEntities,
-//   selectAll,
-//   selectTotal,
-// } = adapter.getSelectors();

src/packages/probe/store/index.ts

@@ -12,26 +12,30 @@ import * as ProbeListStore from './list';
 import * as ProbeDetailStore from './detail';
 import * as ProbeHostStore from './probe-host';
 import * as ProbeHostListStore from './probe-host-list';
+import * as ProbeModifyStore from './modify';
 
 export interface State {
   list: ProbeListStore.State;
   detail: ProbeDetailStore.State;
   probeHost: ProbeHostStore.State;
   probeHosts: ProbeHostListStore.State;
+  modify: ProbeModifyStore.State;
 }
 
 export const REDUCERS = {
   list: ProbeListStore.reducer,
   detail: ProbeDetailStore.reducer,
   probeHost: ProbeHostStore.reducer,
-  probeHosts: ProbeHostListStore.reducer
+  probeHosts: ProbeHostListStore.reducer,
+  modify: ProbeModifyStore.reducer
 };
 
 export const EFFECTS = [
   ProbeListStore.Effects,
   ProbeDetailStore.Effects,
   ProbeHostStore.Effects,
-  ProbeHostListStore.Effects
+  ProbeHostListStore.Effects,
+  ProbeModifyStore.Effects
 ];
 
 export const selectProbeState = createFeatureSelector<State>(MODULE.name);
@@ -44,6 +48,10 @@ export const DetailSelector = new StateSelector<ProbeDetailStore.State>(createSe
   selectProbeState,
   (state: State) => state.detail
 ));
+export const ModifySelector = new StateSelector<ProbeModifyStore.State>(createSelector(
+  selectProbeState,
+  (state: State) => state.modify
+));
 export const ProbeHostSelector = new StateSelector<ProbeHostStore.State>(createSelector(
   selectProbeState,
   (state: State) => state.probeHost

src/packages/probe/store/modify/index.ts

@@ -0,0 +1,4 @@
+export * from './modify.action';
+export * from './modify.effect';
+export * from './modify.reducer';
+export * from './modify.state';

src/packages/probe/store/modify/modify.action.ts

@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+
+
+export enum ActionType {
+  Modify = '[probe.detail] Modify',
+  ModifySuccess = '[probe.detail] ModifySuccess',
+  ModifyFailure = '[probe.detail] ModifyFailure',
+}
+
+export class Modify implements Action {
+  readonly type = ActionType.Modify;
+
+  constructor(public payload: Probe) {}
+}
+
+export class ModifySuccess implements Action {
+  readonly type = ActionType.ModifySuccess;
+
+  constructor(public payload: Probe) {}
+}
+
+export class ModifyFailure implements Action {
+  readonly type = ActionType.ModifyFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | Modify
+  | ModifySuccess
+  | ModifyFailure
+;

src/packages/probe/store/modify/modify.effect.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './detail.effect';
+
+describe('ProbeDetail.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});

src/packages/probe/store/modify/modify.effect.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+import { ProbeService } from '../../service/probe.service';
+
+import {
+  Modify,
+  ModifySuccess,
+  ModifyFailure,
+  ActionType
+} from './modify.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private probeService: ProbeService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  modify$: Observable<Action> = this.actions$
+    .ofType(ActionType.Modify)
+    .map((action: Modify) => action.payload)
+    .switchMap(payload => this.probeService.modify(payload))
+    .map(probe => {
+      return new ModifySuccess(probe);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ModifyFailure(error));
+    });
+}

src/packages/probe/store/modify/modify.reducer.ts

@@ -0,0 +1,46 @@
+import {
+  ActionType,
+  Actions,
+} from './modify.action';
+
+import {
+  State,
+  initialState,
+} from './modify.state';
+
+import { Probe } from '../../model';
+
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Modify: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ModifySuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        probe: action.payload,
+      };
+    }
+
+    case ActionType.ModifyFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        probe: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/probe/store/modify/modify.state.ts

@@ -0,0 +1,18 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+
+export interface State extends EntityState<Probe> {
+  error: RPCClientError | null;
+  isPending: boolean;
+  probe: Probe | null;
+}
+export const adapter: EntityAdapter<Probe> = createEntityAdapter<Probe>();
+export const initialState: State = adapter.getInitialState({
+  error: null,
+  isPending: false,
+  probe: null,
+});
+