probe store arranging

@overflow/discovery/component/setting/probe-selector/probe-selector.component.ts

@@ -4,8 +4,8 @@ import {
 } from '@angular/core';
 import { Store, select, StateObservable } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc';
-import * as ListStore from '@overflow/probe/store/list';
-import { ListSelector } from '@overflow/probe/store';
+// import * as ListStore from '@overflow/probe/store/list';
+// import { ListSelector } from '@overflow/probe/store';
 import { Subscription } from 'rxjs/Subscription';
 import { Probe } from '@overflow/commons-typescript/model/probe';
 import { AuthSelector } from '@overflow/member/store';
@@ -27,9 +27,9 @@ export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestr
   @Output() probeSelected = new EventEmitter<Probe>();
 
   constructor(
-    private listStore: Store<ListStore.State>,
+    // private listStore: Store<ListStore.State>,
   ) {
-    this.probes$ = listStore.pipe(select(ListSelector.select('probes')));
+    // this.probes$ = listStore.pipe(select(ListSelector.select('probes')));
   }
 
   ngOnInit() {
@@ -58,14 +58,14 @@ export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestr
   }
 
   getProbes() {
-    this.listStore.select(AuthSelector.select('domain')).subscribe(
-      (domain: Domain) => {
-        this.listStore.dispatch(new ListStore.ReadAllByDomain(domain));
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+    // this.listStore.select(AuthSelector.select('domain')).subscribe(
+    //   (domain: Domain) => {
+    //     this.listStore.dispatch(new ListStore.ReadAllByDomain(domain));
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
   }
 
   onProbeSelect(event) {

@overflow/discovery/component/setting/setting.component.html

@@ -1,4 +1,4 @@
-<div [style.height.px]="height">
+<!-- <div [style.height.px]="height">
   <div dir="rtl">
     <p-button (onClick)="onCancel()" icon="fa fa-fw fa-close"></p-button>
   </div>
@@ -33,4 +33,4 @@
       <button pButton type="button" label="Stop" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onStop()"></button>
     </div>
   </div>
-</div>
+</div> -->

@overflow/infra/component/index.ts

@@ -1,11 +1,11 @@
 import { MapComponent } from './map/map.component';
-import { ProbeSummaryComponent } from './probe-summary/probe-summary.component';
+// import { ProbeSummaryComponent } from './probe-summary/probe-summary.component';
 import { HostSummaryComponent } from './host-summary/host-summary.component';
 import { ServiceSummaryComponent } from './service-summary/service-summary.component';
 
 export const COMPONENTS = [
   MapComponent,
-  ProbeSummaryComponent,
+  // ProbeSummaryComponent,
   HostSummaryComponent,
   ServiceSummaryComponent
 ];

@overflow/infra/component/probe-summary/probe-summary.component.ts

@@ -1,53 +1,53 @@
-import { Component, OnInit, AfterContentInit, Input, OnChanges } from '@angular/core';
-import { Store, select } from '@ngrx/store';
-import { RPCClientError } from '@loafer/ng-rpc';
+// import { Component, OnInit, AfterContentInit, Input, OnChanges } from '@angular/core';
+// import { Store, select } from '@ngrx/store';
+// import { RPCClientError } from '@loafer/ng-rpc';
 
-import * as DetailStore from '@overflow/probe/store/probe-host';
-import { ProbeHostSelector } from '@overflow/probe/store';
-import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
+// import * as DetailStore from '@overflow/probe/store/probe-host';
+// import { ProbeHostSelector } from '@overflow/probe/store';
+// import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
 
 
-@Component({
-  selector: 'of-probe-summary',
-  templateUrl: './probe-summary.component.html',
-})
-export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChanges {
+// @Component({
+//   selector: 'of-probe-summary',
+//   templateUrl: './probe-summary.component.html',
+// })
+// export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChanges {
 
-  @Input() probe: Object;
-  @Input() visible: boolean;
+//   @Input() probe: Object;
+//   @Input() visible: boolean;
 
-  probeHost$ = this.detailStore.pipe(select(ProbeHostSelector.select('probeHost')));
-  probeHost: ProbeHost;
+//   probeHost$ = this.detailStore.pipe(select(ProbeHostSelector.select('probeHost')));
+//   probeHost: ProbeHost;
 
-  constructor(
-    private detailStore: Store<DetailStore.State>,
-  ) { }
+//   constructor(
+//     private detailStore: Store<DetailStore.State>,
+//   ) { }
 
-  ngOnInit() {
-    this.probeHost$.subscribe(
-      (probeHost: ProbeHost) => {
-        if (probeHost) {
-          console.log(probeHost);
-          this.probeHost = probeHost;
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-  }
-
-  ngAfterContentInit() {
-    console.log('$$$$$$$$$$');
-    console.log(this.probe);
-    console.log('$$$$$$$$$$');
-    // this.detailStore.dispatch(
-    //   new DetailStore.ReadByProbe(this.probe)
+//   ngOnInit() {
+//     this.probeHost$.subscribe(
+//       (probeHost: ProbeHost) => {
+//         if (probeHost) {
+//           console.log(probeHost);
+//           this.probeHost = probeHost;
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
 //     );
-  }
+//   }
 
-  ngOnChanges() {
-  }
+//   ngAfterContentInit() {
+//     console.log('$$$$$$$$$$');
+//     console.log(this.probe);
+//     console.log('$$$$$$$$$$');
+//     // this.detailStore.dispatch(
+//     //   new DetailStore.ReadByProbe(this.probe)
+//     // );
+//   }
 
-}
+//   ngOnChanges() {
+//   }
+
+// }
 

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

@@ -2,9 +2,9 @@ import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular
 import { ActivatedRoute, Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc';
-import * as DetailStore from '../../store/detail';
-import * as ModifyStore from '../../store/modify';
-import { DetailSelector, ModifySelector } from '../../store';
+// import * as DetailStore from '../../store/detail';
+// import * as ModifyStore from '../../store/modify';
+// import { DetailSelector, ModifySelector } from '../../store';
 import { Probe } from '@overflow/commons-typescript/model/probe';
 import { ConfirmationService, Message } from 'primeng/primeng';
 import * as CIDR from 'ip-cidr';
@@ -21,8 +21,8 @@ import { MessageService } from 'primeng/components/common/messageservice';
 export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
   probeSubscription$: Subscription;
-  probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
-  modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe')));
+  // probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
+  // modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe')));
   probe: Probe = null;
   IPRange: string;
   display = false;
@@ -30,24 +30,24 @@ export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy
 
   constructor(
     private route: ActivatedRoute,
-    private detailStore: Store<DetailStore.State>,
-    private modifyStore: Store<ModifyStore.State>,
+    // private detailStore: Store<DetailStore.State>,
+    // private modifyStore: Store<ModifyStore.State>,
     private confirmationService: ConfirmationService,
     private messageService: MessageService
   ) { }
 
   ngOnInit() {
-    this.probeSubscription$ = this.probe$.subscribe(
-      (probe: Probe) => {
-        if (probe) {
-          this.probe = probe;
-          this.arrangeInfo();
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
+    // this.probeSubscription$ = this.probe$.subscribe(
+    //   (probe: Probe) => {
+    //     if (probe) {
+    //       this.probe = probe;
+    //       this.arrangeInfo();
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
   }
 
   ngOnDestroy() {
@@ -57,12 +57,12 @@ export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy
   }
 
   ngAfterContentInit() {
-    const probeId = this.route.snapshot.paramMap.get('id');
-    this.detailStore.dispatch(
-      new DetailStore.Read(
-        { id: probeId }
-      )
-    );
+    // const probeId = this.route.snapshot.paramMap.get('id');
+    // this.detailStore.dispatch(
+    //   new DetailStore.Read(
+    //     { id: probeId }
+    //   )
+    // );
   }
 
   arrangeInfo() {
@@ -95,28 +95,28 @@ export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy
   }
 
   onDisplayNameChange(value: string) {
-    if (value === this.probe.displayName) {
-      return;
-    }
-    this.probe.displayName = value;
-    this.modifyStore.dispatch(
-      new ModifyStore.Modify(this.probe)
-    );
+    // if (value === this.probe.displayName) {
+    //   return;
+    // }
+    // this.probe.displayName = value;
+    // this.modifyStore.dispatch(
+    //   new ModifyStore.Modify(this.probe)
+    // );
 
-    const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
-      (probe: Probe) => {
-        if (probe) {
-          this.msgs = [];
-          this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
-        }
-        if (modifySuccessSubscription$) {
-          modifySuccessSubscription$.unsubscribe();
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
+    // const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
+    //   (probe: Probe) => {
+    //     if (probe) {
+    //       this.msgs = [];
+    //       this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
+    //     }
+    //     if (modifySuccessSubscription$) {
+    //       modifySuccessSubscription$.unsubscribe();
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
   }
 
   onDisplayNameChangeKeypress(event, value) {

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

@@ -6,8 +6,8 @@ import { Domain } from '@overflow/commons-typescript/model/domain';
 import { AuthSelector } from '@overflow/member/store';
 
 import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
-import * as ListStore from '../../store/probe-host-list';
-import { ProbeHostListSelector } from '../../store';
+import * as ProbeStore from '../../store/probe';
+import { ProbeSelector } from '../../store';
 import { Subscription } from 'rxjs/Subscription';
 
 @Component({
@@ -16,14 +16,13 @@ import { Subscription } from 'rxjs/Subscription';
 })
 export class ProbeListComponent implements OnInit, AfterContentInit, OnDestroy {
   probeHostsSubscription$: Subscription;
-  probeHosts$ = this.store.pipe(select(ProbeHostListSelector.select('probeHosts')));
+  probeHosts$ = this.store.pipe(select(ProbeSelector.select('probes')));
   probeHosts: ProbeHost[];
 
   @Output() select = new EventEmitter<Probe>();
-  val;
 
   constructor(
-    private store: Store<ListStore.State>
+    private store: Store<ProbeStore.State>
   ) {
   }
 
@@ -39,39 +38,39 @@ export class ProbeListComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit() {
-    // this.store.select(AuthSelector.select('domain')).subscribe(
-    //   (domain: Domain) => {
-    //     this.store.dispatch(new ListStore.ReadAllByDomain(domain));
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
+    this.store.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        this.store.dispatch(new ProbeStore.ReadAllByDomainID(domain.id));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
 
     // temp
-    const probeHost: ProbeHost = {
-      id: 1,
-      probe: {
-        id: 1,
-        displayName: 'ddd',
-        cidr: 'dddd',
-        authorizeDate: new Date(),
-        authorizeMember: {
-          name: 'ddd'
-        }
-      },
-      host: {
-        id: 1,
-        ipv4: 'aaaa',
-        os: {
-          vendor: {
-            name: 'dd'
-          }
-        },
-      }
-    };
-    this.probeHosts = [];
-    this.probeHosts.push(probeHost);
+    // const probeHost: ProbeHost = {
+    //   id: 1,
+    //   probe: {
+    //     id: 1,
+    //     displayName: 'ddd',
+    //     cidr: 'dddd',
+    //     authorizeDate: new Date(),
+    //     authorizeMember: {
+    //       name: 'ddd'
+    //     }
+    //   },
+    //   host: {
+    //     id: 1,
+    //     ipv4: 'aaaa',
+    //     os: {
+    //       vendor: {
+    //         name: 'dd'
+    //       }
+    //     },
+    //   }
+    // };
+    // this.probeHosts = [];
+    // this.probeHosts.push(probeHost);
 
   }
 

@overflow/probe/service/probe-host.service.ts

@@ -15,12 +15,16 @@ export class ProbeHostService {
 
   }
 
-  public readByProbe(probe: Probe): Observable<Probe> {
-    return this.rpcService.call<ProbeHost>('ProbeHostService.readByProbe', probe);
+  public readByProbeID(probeID: number): Observable<Probe> {
+    return this.rpcService.call<ProbeHost>('ProbeHostService.readByProbeID', probeID);
   }
 
-  public readAllByDomain(domain: Domain): Observable<ProbeHost[]> {
-    return this.rpcService.call<ProbeHost[]>('ProbeHostService.readAllByDomain', domain);
+  public readAllByDomainID(domainID: number): Observable<ProbeHost[]> {
+    return this.rpcService.call<ProbeHost[]>('ProbeHostService.readAllByDomainID', domainID);
+  }
+
+  public read(id: number): Observable<ProbeHost> {
+    return this.rpcService.call<ProbeHost>('ProbeHostService.read', id);
   }
 
 }

@overflow/probe/store/index.ts

@@ -8,55 +8,23 @@ import { StateSelector } from '@overflow/core/ngrx/store';
 
 import { MODULE } from '../probe.constant';
 
-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';
+import * as ProbeStore from './probe';
 
 export interface State {
-  list: ProbeListStore.State;
-  detail: ProbeDetailStore.State;
-  probeHost: ProbeHostStore.State;
-  probeHosts: ProbeHostListStore.State;
-  modify: ProbeModifyStore.State;
+  probes: ProbeStore.State;
 }
 
 export const REDUCERS = {
-  list: ProbeListStore.reducer,
-  detail: ProbeDetailStore.reducer,
-  probeHost: ProbeHostStore.reducer,
-  probeHosts: ProbeHostListStore.reducer,
-  modify: ProbeModifyStore.reducer
+  probes: ProbeStore.reducer,
 };
 
 export const EFFECTS = [
-  ProbeListStore.Effects,
-  ProbeDetailStore.Effects,
-  ProbeHostStore.Effects,
-  ProbeHostListStore.Effects,
-  ProbeModifyStore.Effects
+  ProbeStore.Effects,
 ];
 
 export const selectProbeState = createFeatureSelector<State>(MODULE.name);
 
-export const ListSelector = new StateSelector<ProbeListStore.State>(createSelector(
+export const ProbeSelector = new StateSelector<ProbeStore.State>(createSelector(
   selectProbeState,
-  (state: State) => state.list
-));
-export const DetailSelector = new StateSelector<ProbeDetailStore.State>(createSelector(
-  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
-));
-export const ProbeHostListSelector = new StateSelector<ProbeHostListStore.State>(createSelector(
-  selectProbeState,
-  (state: State) => state.probeHosts
+  (state: State) => state.probes
 ));

@overflow/probe/store/probe/index.ts

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

@overflow/probe/store/probe/probe.action.ts

@@ -0,0 +1,58 @@
+import { Action } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc';
+import { ProbeHost } from '@overflow/commons-typescript/model/probe';
+
+export enum ActionType {
+  ReadAllByDomainID = '[probe.list] ReadAllByDomainID',
+  ReadAllByDomainIDSuccess = '[probe.list] ReadAllByDomainIDSuccess',
+  ReadAllByDomainIDFailure = '[probe.list] ReadAllByDomainIDFailure',
+
+  Read = '[probe.detail] Read',
+  ReadSuccess = '[probe.detail] ReadSuccess',
+  ReadFailure = '[probe.detail] ReadFailure',
+}
+
+export class ReadAllByDomainID implements Action {
+  readonly type = ActionType.ReadAllByDomainID;
+
+  constructor(public payload: number) {}
+}
+
+export class ReadAllByDomainIDSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainIDSuccess;
+
+  constructor(public payload: ProbeHost[]) {}
+}
+
+export class ReadAllByDomainIDFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainIDFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class Read implements Action {
+  readonly type = ActionType.Read;
+
+  constructor(public payload: number) {}
+}
+
+export class ReadSuccess implements Action {
+  readonly type = ActionType.ReadSuccess;
+
+  constructor(public payload: ProbeHost) {}
+}
+
+export class ReadFailure implements Action {
+  readonly type = ActionType.ReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAllByDomainID
+  | ReadAllByDomainIDSuccess
+  | ReadAllByDomainIDFailure
+  | Read
+  | ReadSuccess
+  | ReadFailure
+;

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

@@ -0,0 +1,64 @@
+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';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+
+import {
+  ReadAllByDomainID,
+  ReadAllByDomainIDFailure,
+  ReadAllByDomainIDSuccess,
+  Read,
+  ReadSuccess,
+  ReadFailure,
+  ActionType
+} from './probe.action';
+import { ProbeHostService } from '../../service/probe-host.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private probeHostService: ProbeHostService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  ReadAllByDomainID$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomainID)
+    .map((action: ReadAllByDomainID) => action.payload)
+    .switchMap(payload => this.probeHostService.readAllByDomainID(payload))
+    .map(probeHosts => {
+      return new ReadAllByDomainIDSuccess(probeHosts);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainIDFailure(error));
+    });
+
+  @Effect()
+  Read$: Observable<Action> = this.actions$
+    .ofType(ActionType.Read)
+    .map((action: Read) => action.payload)
+    .switchMap(payload => this.probeHostService.read(payload))
+    .map(probeHost => {
+      return new ReadSuccess(probeHost);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainIDFailure(error));
+    });
+}

@overflow/probe/store/probe/probe.reducer.ts

@@ -0,0 +1,68 @@
+import {
+  ReadAllByDomainID,
+  ReadAllByDomainIDFailure,
+  ReadAllByDomainIDSuccess,
+  ActionType,
+  Actions,
+} from './probe.action';
+
+import {
+  State,
+  initialState,
+} from './probe.state';
+
+import { Probe } from '@overflow/commons-typescript/model/probe';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDomainID: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ReadAllByDomainIDSuccess: {
+      return {
+        ...state,
+        error: null,
+        probeHosts: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByDomainIDFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        probeHosts: null,
+      };
+    }
+
+    case ActionType.Read: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        probeHosts: [action.payload],
+      };
+    }
+
+    case ActionType.ReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        probeHosts: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

@overflow/probe/store/probe/probe.state.ts

@@ -0,0 +1,12 @@
+import { RPCClientError } from '@loafer/ng-rpc';
+import { ProbeHost } from '@overflow/commons-typescript/model/probe';
+
+export interface State {
+  error: RPCClientError | null;
+  probeHosts: ProbeHost[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  probeHosts: null,
+};