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

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';

@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[];

  @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();
    }
  }

  onRowSelect(event) {
    this.select.emit(event.data.probe);
  }

  getUptime(probe: Probe) {
    // if (probe.connectDate === null || probe.connectDate ==== undefined) {
    //   return 'Not Connected.';
    // }
    // const currentDate = new Date();
    return 'Uptime';
  }
}