probe store container components

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

@@ -1,87 +1,19 @@
-import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy, Output, EventEmitter } from '@angular/core';
-import { Store, select } from '@ngrx/store';
-
-import { RPCClientError } from '@loafer/ng-rpc';
-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 ProbeStore from '../../store/probe';
-import { ProbeSelector } from '../../store';
-import { Subscription } from 'rxjs/Subscription';
+import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
+import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 
 @Component({
   selector: 'of-probe-list',
   templateUrl: './list.component.html',
 })
-export class ProbeListComponent implements OnInit, AfterContentInit, OnDestroy {
-  probeHostsSubscription$: Subscription;
-  probeHosts$ = this.store.pipe(select(ProbeSelector.select('probes')));
-  probeHosts: ProbeHost[];
+export class ProbeListComponent {
+  @Output() select = new EventEmitter<ProbeHost>();
+  @Input() probeHosts: ProbeHost[];
 
-  @Output() select = new EventEmitter<Probe>();
-
-  constructor(
-    private store: Store<ProbeStore.State>
-  ) {
-  }
-
-  ngOnInit() {
-    this.probeHostsSubscription$ = this.probeHosts$.subscribe(
-      (probeHosts: ProbeHost[]) => {
-        this.probeHosts = probeHosts;
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-  }
-
-  ngAfterContentInit() {
-    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);
-
-  }
-
-  ngOnDestroy() {
-    if (this.probeHostsSubscription$) {
-      this.probeHostsSubscription$.unsubscribe();
-    }
+  constructor() {
   }
 
   onRowSelect(event) {
-    this.select.emit(event.data.probe);
+    this.select.emit(event.data);
   }
 
   getUptime(probe: Probe) {

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

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

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

@@ -1,14 +1,41 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { Probe } from '@overflow/commons-typescript/model/probe';
+import { Component, EventEmitter, Output, OnInit, AfterContentInit } from '@angular/core';
+import { ProbeHost } from '@overflow/commons-typescript/model/probe';
+import { Observable } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+import * as ProbeStore from '../store/probe';
+import { ProbeSelector } from '../store';
+import { AuthSelector } from '@overflow/member/store';
+import { Domain } from '@overflow/commons-typescript/model/domain';
 
 @Component({
-  selector: 'of-probe-list-container',
-  templateUrl: './probe-list-container.html',
+    selector: 'of-probe-list-container',
+    templateUrl: './probe-list-container.html',
 })
-export class ProbeListContainerComponent  {
+export class ProbeListContainerComponent implements OnInit, AfterContentInit {
+
+    probeHosts$: Observable<ProbeHost[]>;
     @Output() select = new EventEmitter();
 
-    onSelect(probe: Probe) {
-        this.select.emit(probe);
+    constructor(private store: Store<ProbeStore.State>) {
+        this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
+    }
+
+    onSelect(probeHost: ProbeHost) {
+        this.select.emit(probeHost);
+    }
+
+    ngOnInit() {
+        this.store.select(AuthSelector.select('domain')).subscribe(
+            (domain: Domain) => {
+                this.store.dispatch(new ProbeStore.ReadAllByDomainID(domain.id));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+    ngAfterContentInit() {
+
     }
 }

@overflow/probe/store/index.ts

@@ -28,3 +28,4 @@ export const ProbeSelector = new StateSelector<ProbeStore.State>(createSelector(
   selectProbeState,
   (state: State) => state.probes
 ));
+

src/environments/environment.ts

@@ -7,7 +7,7 @@ export const environment = {
   production: false,
   restBaseURL: 'http://192.168.1.50:19080/webapp',
   webappRPCConfig: {
-    url: 'ws://192.168.1.50:19090/webapp',
+    url: 'ws://192.168.1.101:19090/webapp',
     reconnectInterval: 5000,
     reconnectRetry: 10,
   },