probe host

src/packages/commons/prime-ng/prime-ng.module.ts

@@ -67,8 +67,8 @@ import { TooltipModule } from 'primeng/primeng';
 import { TreeModule } from 'primeng/primeng';
 import { TreeTableModule } from 'primeng/primeng';
 import { CardModule } from 'primeng/card';
-import {DataViewModule} from 'primeng/dataview';
-
+import { DataViewModule } from 'primeng/dataview';
+import { SidebarModule } from 'primeng/sidebar';
 
 const PRIME_NG_MODULES: any[] = [
   AccordionModule,
@@ -140,6 +140,7 @@ const PRIME_NG_MODULES: any[] = [
   TreeTableModule,
   CardModule,
   DataViewModule,
+  SidebarModule
 ];
 
 @NgModule({

src/packages/infra/component/index.ts

@@ -1,5 +1,7 @@
 import { MapComponent } from './map/map.component';
+import { ProbeSummaryComponent } from './probe-summary/probe-summary.component';
 
 export const COMPONENTS = [
   MapComponent,
+  ProbeSummaryComponent
 ];

src/packages/infra/component/map/map.component.html

@@ -25,7 +25,7 @@
     </div>
   </div>
   <div class="ui-g-12 ui-g-nopad">
-    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree">
+    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" (onNodeSelect)="onNodeSelect($event)">
 
       <ng-template let-node pTemplate="default">
         <div>{{node.label}}</div>
@@ -56,6 +56,13 @@
 </div>
 
 
+<p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000">
+  <div *ngIf="selectedNodeType === 'probe'">
+    <of-probe-summary [probe]="selectedNode" [visible]="visibleSidebar"></of-probe-summary>
+  </div>
+</p-sidebar>
+
+
 
 
 

src/packages/infra/component/map/map.component.ts

@@ -53,11 +53,14 @@ export class MapComponent implements OnInit, AfterContentInit {
   targetTreeMap: Map<number, TreeNode> = new Map();
 
   DEFAULT_EXPANDED: Boolean = true;
+  visibleSidebar = false;
+  selectedNodeType: string;
+  selectedNode: Object = null;
 
   constructor(private router: Router,
     private listStore: Store<ListStore.State>,
     private sensorListStore: Store<SensorListStore.State>
-  ) {}
+  ) { }
 
   ngAfterContentInit() {
 
@@ -71,7 +74,7 @@ export class MapComponent implements OnInit, AfterContentInit {
           sortDirection: 'descending'
         };
 
-        this.listStore.dispatch(new ListStore.ReadAllByDomain({domain: domain, pageParams: pageParams}));
+        this.listStore.dispatch(new ListStore.ReadAllByDomain({ domain: domain, pageParams: pageParams }));
       },
       (error) => {
         console.log(error);
@@ -92,21 +95,21 @@ export class MapComponent implements OnInit, AfterContentInit {
         console.log(error.response.message);
       });
 
-      this.sensors$.subscribe(
-        (page: Page) => {
-          if (page !== null) {
-            const sensorList = page.content;
-            console.log(sensorList);
-            this.addTreeForSensor(sensorList);
-          }
-        },
-        (error: RPCClientError) => {
-          console.log(error.response.message);
+    this.sensors$.subscribe(
+      (page: Page) => {
+        if (page !== null) {
+          const sensorList = page.content;
+          console.log(sensorList);
+          this.addTreeForSensor(sensorList);
         }
-      );
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
   }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   searchObj(treeList: any[], target: Target, searchList: any[]) {
 
@@ -201,7 +204,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
   generateInfraTree(probeMap: Map<number, InfraHost[]>, hostMap: Map<number, InfraService[]>): TreeNode {
 
-    const infraTree =  {
+    const infraTree = {
       label: 'Infra',
       type: 'infra',
       expandedIcon: 'fa-folder-open',
@@ -218,7 +221,7 @@ export class MapComponent implements OnInit, AfterContentInit {
         expandedIcon: 'fa-folder-open',
         collapsedIcon: 'fa-folder',
         expanded: this.DEFAULT_EXPANDED.valueOf(),
-        obj: ifhl,
+        obj: key,
         children: [],
       };
 
@@ -243,7 +246,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
 
 
-          for (let i = 0 ; i < ifsl.length; ++i) {
+          for (let i = 0; i < ifsl.length; ++i) {
             const ts = {
               label: 'Service - ' + ifsl[i].vendor.name,
               type: 'service',
@@ -319,7 +322,7 @@ export class MapComponent implements OnInit, AfterContentInit {
       sortDirection: 'descending'
     };
 
-    this.sensorListStore.dispatch(new SensorListStore.ReadAllByInfra({id: String(infra.id), pageParams: pageParams}));
+    this.sensorListStore.dispatch(new SensorListStore.ReadAllByInfra({ id: String(infra.id), pageParams: pageParams }));
 
   }
 
@@ -329,7 +332,7 @@ export class MapComponent implements OnInit, AfterContentInit {
     if (infraService.vendor.name.toUpperCase().indexOf(upperCased) < 0 &&
       String(infraService.port).toUpperCase().indexOf(upperCased) < 0 &&
       infraService.portType.toUpperCase().indexOf(upperCased)) {
-        return true;
+      return true;
     }
     return false;
   }
@@ -372,6 +375,19 @@ export class MapComponent implements OnInit, AfterContentInit {
       });
     }
   }
+
+  onNodeSelect(event) {
+    if (event.node.type !== 'probe') {
+      return;
+    }
+    this.selectedNodeType = event.node.type;
+    const probe  = {
+      id : event.node.obj
+    };
+    this.selectedNode = probe;
+    this.visibleSidebar = true;
+  }
+
 }
 
 const testInfraList = [

src/packages/infra/component/probe-summary/probe-summary.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="probe">
+  <b>probe host detail</b>
+</div>

src/packages/infra/component/probe-summary/probe-summary.component.ts

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

src/packages/probe/component/list.1/list.component.html

@@ -0,0 +1,25 @@
+<h1>Probes</h1>
+<p-table [value]="probes" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+  <ng-template pTemplate="header">
+    <tr>
+      <th>Probe Name</th>
+      <th style="width:10em">IP</th>
+      <th style="width:8em">OS</th>
+      <th style="width:10em">CIDR</th>
+      <th pResizableColumn>Targets</th>
+      <th style="width:8em">Authroized at</th>
+      <th style="width:9em">Authroized by</th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-probe>
+    <tr [pSelectableRow]="probe">
+      <td>{{probe.displayName}}</td>
+      <td>?</td>
+      <td>?</td>
+      <td>{{probe.cidr}}</td>
+      <td>??</td>
+      <td>{{probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
+      <td>{{probe.authorizeMember.name}}</td>
+    </tr>
+  </ng-template>
+</p-table>

src/packages/probe/component/list.1/list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/packages/probe/component/list.1/list.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Store, select } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Domain } from 'packages/domain/model';
+import { AuthSelector } from 'packages/member/store';
+
+import { Probe } from '../../model';
+import * as ListStore from '../../store/list';
+import { ListSelector } from '../../store';
+
+@Component({
+  selector: 'of-probe-list',
+  templateUrl: './list.component.html',
+})
+export class ListComponent implements OnInit, AfterContentInit {
+  probes$ = this.store.pipe(select(ListSelector.select('probes')));
+  probes: Probe[];
+
+  constructor(
+    private router: Router,
+    private store: Store<ListStore.State>
+  ) {
+  }
+
+  ngOnInit() {
+    this.probes$.subscribe(
+      (probes: Probe[]) => {
+        this.probes = probes;
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.store.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+  onRowSelect(event) {
+    this.router.navigate(['probe', event.data.id, 'info']);
+  }
+}

src/packages/probe/component/list/list.component.html

@@ -1,5 +1,5 @@
 <h1>Probes</h1>
-<p-table [value]="probes" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+<p-table [value]="probeHosts" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
   <ng-template pTemplate="header">
     <tr>
       <th>Probe Name</th>
@@ -11,15 +11,16 @@
       <th style="width:9em">Authroized by</th>
     </tr>
   </ng-template>
-  <ng-template pTemplate="body" let-probe>
+  <ng-template pTemplate="body" let-probeHost>
     <tr [pSelectableRow]="probe">
-      <td>{{probe.displayName}}</td>
+      <td>{{probeHost.probe.displayName}}</td>
+      <!-- <td>{{probeHost.host.os.vendor.name}}</td> -->
       <td>?</td>
       <td>?</td>
-      <td>{{probe.cidr}}</td>
+      <td>{{probeHost.probe.cidr}}</td>
       <td>??</td>
-      <td>{{probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
-      <td>{{probe.authorizeMember.name}}</td>
+      <td>{{probeHost.probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
+      <td>{{probeHost.probe.authorizeMember.name}}</td>
     </tr>
   </ng-template>
 </p-table>

src/packages/probe/component/list/list.component.ts

@@ -7,17 +7,17 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import { Domain } from 'packages/domain/model';
 import { AuthSelector } from 'packages/member/store';
 
-import { Probe } from '../../model';
-import * as ListStore from '../../store/list';
-import { ListSelector } from '../../store';
+import { Probe, ProbeHost } from '../../model';
+import * as ListStore from '../../store/probe-host-list';
+import { ProbeHostListSelector } from '../../store';
 
 @Component({
   selector: 'of-probe-list',
   templateUrl: './list.component.html',
 })
 export class ListComponent implements OnInit, AfterContentInit {
-  probes$ = this.store.pipe(select(ListSelector.select('probes')));
-  probes: Probe[];
+  probeHosts$ = this.store.pipe(select(ProbeHostListSelector.select('probeHosts')));
+  probeHosts: ProbeHost[];
 
   constructor(
     private router: Router,
@@ -26,9 +26,10 @@ export class ListComponent implements OnInit, AfterContentInit {
   }
 
   ngOnInit() {
-    this.probes$.subscribe(
-      (probes: Probe[]) => {
-        this.probes = probes;
+    this.probeHosts$.subscribe(
+      (probeHosts: ProbeHost[]) => {
+        console.log(probeHosts);
+        this.probeHosts = probeHosts;
       },
       (error: RPCClientError) => {
         console.log(error.response.message);

src/packages/probe/service/index.ts

@@ -1,5 +1,7 @@
 import { ProbeService } from './probe.service';
+import { ProbeHostService } from './probe-host.service';
 
 export const SERVICES = [
   ProbeService,
+  ProbeHostService,
 ];

src/packages/probe/service/probe-host.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import { RPCService } from '@loafer/ng-rpc/service';
+import { Probe, ProbeHost } from '../model';
+import { Domain } from 'packages/domain/model';
+
+
+@Injectable()
+export class ProbeHostService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readByProbe(probe: Probe): Observable<Probe> {
+    return this.rpcService.call<ProbeHost>('ProbeHostService.readByProbe', probe);
+  }
+
+  public readAllByDomain(domain: Domain): Observable<ProbeHost[]> {
+    return this.rpcService.call<ProbeHost[]>('ProbeHostService.readAllByDomain', domain);
+  }
+
+}

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

@@ -26,4 +26,5 @@ export class ProbeService {
   public read(id: string): Observable<Probe> {
     return this.rpcService.call<Probe>('ProbeService.read', id);
   }
+
 }

src/packages/probe/store/index.ts

@@ -10,20 +10,28 @@ 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';
 
 export interface State {
   list: ProbeListStore.State;
   detail: ProbeDetailStore.State;
+  probeHost: ProbeHostStore.State;
+  probeHosts: ProbeHostListStore.State;
 }
 
 export const REDUCERS = {
   list: ProbeListStore.reducer,
   detail: ProbeDetailStore.reducer,
+  probeHost: ProbeHostStore.reducer,
+  probeHosts: ProbeHostListStore.reducer
 };
 
 export const EFFECTS = [
   ProbeListStore.Effects,
   ProbeDetailStore.Effects,
+  ProbeHostStore.Effects,
+  ProbeHostListStore.Effects
 ];
 
 export const selectProbeState = createFeatureSelector<State>(MODULE.name);
@@ -36,3 +44,11 @@ export const DetailSelector = new StateSelector<ProbeDetailStore.State>(createSe
   selectProbeState,
   (state: State) => state.detail
 ));
+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
+));

src/packages/probe/store/probe-host-list/index.ts

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

src/packages/probe/store/probe-host-list/list.action.ts

@@ -0,0 +1,38 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+import { ProbeHost } from '../../model';
+
+
+export enum ActionType {
+  ReadAllByDomain = '[probeHost.list] ReadAllByDomain',
+  ReadAllByDomainSuccess = '[probeHost.list] ReadAllByDomainSuccess',
+  ReadAllByDomainFailure = '[probeHost.list] ReadAllByDomainFailure',
+}
+
+export class ReadAllByDomain implements Action {
+  readonly type = ActionType.ReadAllByDomain;
+
+  constructor(public payload: Domain) {}
+}
+
+export class ReadAllByDomainSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainSuccess;
+
+  constructor(public payload: ProbeHost[]) {}
+}
+
+export class ReadAllByDomainFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | ReadAllByDomain
+  | ReadAllByDomainSuccess
+  | ReadAllByDomainFailure
+;

src/packages/probe/store/probe-host-list/list.effect.spec.ts

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

src/packages/probe/store/probe-host-list/list.effect.ts

@@ -0,0 +1,51 @@
+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 { Domain } from 'packages/domain/model';
+
+import { Probe } from '../../model';
+
+import {
+  ReadAllByDomain,
+  ReadAllByDomainFailure,
+  ReadAllByDomainSuccess,
+  ActionType
+} from './list.action';
+import { ProbeHostService } from '../../service/probe-host.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private probeHostService: ProbeHostService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByDomain$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomain)
+    .map((action: ReadAllByDomain) => action.payload)
+    .switchMap(payload => this.probeHostService.readAllByDomain(payload))
+    .map(probeHosts => {
+      return new ReadAllByDomainSuccess(probeHosts);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainFailure(error));
+    });
+}

src/packages/probe/store/probe-host-list/list.reducer.ts

@@ -0,0 +1,48 @@
+import {
+  ReadAllByDomain,
+  ReadAllByDomainFailure,
+  ReadAllByDomainSuccess,
+  ActionType,
+  Actions,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+import { Probe } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDomain: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ReadAllByDomainSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        probeHosts: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByDomainFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        probeHosts: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/probe/store/probe-host-list/list.state.ts

@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { ProbeHost } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  isPending: boolean;
+  probeHosts: ProbeHost[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  probeHosts: null,
+};

src/packages/probe/store/probe-host/index.ts

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

src/packages/probe/store/probe-host/probe-host.action.ts

@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { ProbeHost, Probe } from '../../model';
+
+
+export enum ActionType {
+  ReadByProbe = '[probeHost.detail] Read',
+  ReadByProbeSuccess = '[probeHost.detail] ReadSuccess',
+  ReadByProbeFailure = '[probeHost.detail] ReadFailure',
+}
+
+export class ReadByProbe implements Action {
+  readonly type = ActionType.ReadByProbe;
+
+  constructor(public payload: Probe) {}
+}
+
+export class ReadByProbeSuccess implements Action {
+  readonly type = ActionType.ReadByProbeSuccess;
+
+  constructor(public payload: ProbeHost) {}
+}
+
+export class ReadByProbeFailure implements Action {
+  readonly type = ActionType.ReadByProbeFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | ReadByProbe
+  | ReadByProbeSuccess
+  | ReadByProbeFailure
+;

src/packages/probe/store/probe-host/probe-host.effect.spec.ts

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

src/packages/probe/store/probe-host/probe-host.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 { ProbeHostService } from '../../service/probe-host.service';
+
+import {
+  ReadByProbe,
+  ReadByProbeSuccess,
+  ReadByProbeFailure,
+  ActionType
+} from './probe-host.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private probeHostService: ProbeHostService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  read$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadByProbe)
+    .map((action: ReadByProbe) => action.payload)
+    .switchMap(payload => this.probeHostService.readByProbe(payload))
+    .map(probe => {
+      return new ReadByProbeSuccess(probe);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadByProbeFailure(error));
+    });
+}

src/packages/probe/store/probe-host/probe-host.reducer.ts

@@ -0,0 +1,49 @@
+import {
+  ReadByProbe,
+  ReadByProbeFailure,
+  ReadByProbeSuccess,
+  ActionType,
+  Actions,
+} from './probe-host.action';
+
+import {
+  State,
+  initialState,
+} from './probe-host.state';
+
+import { Probe } from '../../model';
+
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadByProbe: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ReadByProbeSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        probeHost: action.payload,
+      };
+    }
+
+    case ActionType.ReadByProbeFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        probeHost: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/probe/store/probe-host/probe-host.state.ts

@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { ProbeHost } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  isPending: boolean;
+  probeHost: ProbeHost | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  probeHost: null,
+};
+