refactor discovery

src/packages/discovery/component/setting.1/filter/filter.component.html

@@ -0,0 +1,66 @@
+<div class="ui-g">
+  <div>
+    <div class="ui-g">
+      <div class="ui-g-12">
+        <p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
+      </div>
+    </div>
+
+    <div class="ui-g form-group">
+      <div class="ui-g-12 ui-md-6">
+        <span class="ui-float-label">
+          <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP">
+          <label for="float-input">Start Ip</label>
+        </span>
+      </div>
+      <div class="ui-g-12 ui-md-6">
+        <span class="ui-float-label">
+          <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP">
+          <label for="float-input">End Ip</label>
+        </span>
+      </div>
+    </div>
+
+
+    <div class="ui-g">
+      <div class="ui-g-12">
+        <p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
+      </div>
+      <div class="ui-g-12">
+        <div class="ui-g-6">
+          TCP &nbsp;
+          <p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
+        </div>
+        <div class="ui-g-6">
+          UDP &nbsp;
+          <p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
+        </div>
+      </div>
+    </div>
+
+    <div class="ui-g form-group">
+      <div class="ui-g-12 ui-md-6">
+        <span class="ui-float-label">
+          <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort" [disabled]="!portChecked">
+          <label for="float-input">Start Port</label>
+        </span>
+      </div>
+
+      <div class="ui-g-12 ui-md-6">
+        <span class="ui-float-label">
+          <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort" [disabled]="!portChecked">
+          <label for="float-input">End Port</label>
+        </span>
+      </div>
+    </div>
+
+    <div class="ui-g-12">
+      <div class="ui-g-12 ui-g-nopad">
+        <p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)" binary="true"></p-checkbox>
+      </div>
+
+      <of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
+
+    </div>
+  </div>
+</div>

src/packages/discovery/component/setting.1/filter/filter.component.ts

@@ -0,0 +1,116 @@
+import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import * as CIDR from 'ip-cidr';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+import { DiscoverZone, DiscoverPort, DiscoverService } from '@overflow/commons-typescript/model/discovery';
+
+@Component({
+  selector: 'of-discovery-filter',
+  templateUrl: './filter.component.html',
+})
+export class FilterComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
+
+  @Input() probe: Probe;
+  @Input() requestStart: boolean;
+  @Output() discoveryRequested = new EventEmitter<DiscoverZone>();
+
+  private startIP: string;
+  private endIP: string;
+  private startPort: string;
+  private endPort: string;
+  private includeServices = [];
+
+  private hostChecked = true;
+  private portChecked = true;
+  private serviceChecked = true;
+  private tcpChecked = true;
+  private udpChecked = true;
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterContentInit() {
+  }
+
+  ngOnDestroy() {
+  }
+
+  hostRange() {
+    if (!this.probe || this.probe === undefined) {
+      return;
+    }
+    const cidr = new CIDR(this.probe.cidr);
+    if (!cidr.isValid()) {
+      alert('Invalid cidr : ' + this.probe.cidr);
+      return;
+    }
+    this.startIP = cidr.addressStart.address;
+    this.endIP = cidr.addressEnd.address;
+  }
+
+  portRange() {
+    this.startPort = '1';
+    this.endPort = '1024';
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['probe']) {
+      this.hostRange();
+      this.portRange();
+    }
+    if (changes['requestStart'] && this.requestStart) {
+      this.onStart();
+    }
+  }
+
+  onPortCheckChange(serviceCheckbox, checked) {
+    if (!checked) {
+      serviceCheckbox.checked = false;
+      this.serviceChecked = false;
+    }
+  }
+
+  onServiceCheckChange(portCheckbox, checked) {
+    if (checked) {
+      portCheckbox.checked = true;
+      this.portChecked = true;
+    }
+  }
+
+  onStart() {
+    let discoverPort: DiscoverPort = null;
+    let discoverService: DiscoverService = null;
+
+    if (this.serviceChecked) {
+      const services = new Array();
+      for (const service of this.includeServices) {
+        services.push(service.description); // FIXME to const name
+      }
+      discoverService = {
+        includeServices: services,
+      };
+    }
+    if (this.portChecked) {
+      discoverPort = {
+        firstScanRange: Number(this.startPort),
+        lastScanRange: Number(this.endPort),
+        includeTCP: this.tcpChecked,
+        includeUDP: this.udpChecked,
+        excludePorts: null,
+        discoverService: discoverService
+      };
+    }
+    const discoverZone: DiscoverZone = {
+      discoverHost: {
+        firstScanRangev4: this.startIP,
+        lastScanRangev4: this.endIP,
+        discoverPort: discoverPort
+      },
+    };
+
+    this.discoveryRequested.emit(discoverZone);
+  }
+}

src/packages/discovery/component/setting.1/filter/service-selector/service-selector.component.html

@@ -0,0 +1,10 @@
+<div class="ui-g-12">
+  <p-pickList [disabled]="disabled" [source]="crawlers" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
+    filterBy="description" dragdrop="true" dragdropScope="services" [sourceStyle]="{'height':'200px'}" [targetStyle]="{'height':'200px'}" [showTargetControls]="false" [showSourceControls]="false">
+    <ng-template let-crawler pTemplate="item">
+      <div class="ui-helper-clearfix">
+        <div style="font-size:14px;margin:0;padding: 0;">{{crawler.description}}</div>
+      </div>
+    </ng-template>
+  </p-pickList>
+</div>

src/packages/discovery/component/setting.1/filter/service-selector/service-selector.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Store, select, StateObservable } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import * as ListStore from 'packages/meta/crawler/store/list';
+import { ReadAllCrawlerSelector } from 'packages/meta/crawler/store';
+import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+  selector: 'of-service-selector',
+  templateUrl: './service-selector.component.html',
+})
+export class ServiceSelectorComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  crawlersSubscription$: Subscription;
+  crawlers$: StateObservable;
+  crawlers: MetaCrawler[];
+  @Output() crawlerSelected = new EventEmitter<MetaCrawler>();
+  @Input() includeServices;
+
+  @Input() disabled: boolean;
+
+  constructor(
+    private listStore: Store<ListStore.State>,
+  ) {
+    this.crawlers$ = listStore.pipe(select(ReadAllCrawlerSelector.select('metaCrawlerList')));
+  }
+
+  ngOnInit() {
+    this.crawlersSubscription$ = this.crawlers$.subscribe(
+      (list: MetaCrawler[]) => {
+        if (list !== null) {
+          this.crawlers = [];
+          this.includeServices = list;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.listStore.dispatch(new ListStore.ReadAll());
+  }
+
+  ngOnDestroy() {
+    if (this.crawlersSubscription$) {
+      this.crawlersSubscription$.unsubscribe();
+    }
+  }
+}

src/packages/discovery/component/setting.1/probe-selector/probe-selector.component.html

@@ -0,0 +1,4 @@
+<div *ngIf="!preProbe">
+  <p-dropdown #dropdown [options]="probes" optionLabel="displayName" placeholder="Select a Probe" [(ngModel)]="selected" (onChange)="onProbeSelect($event)"
+    [style]="{'width':'300px'}"></p-dropdown>
+</div>

src/packages/discovery/component/setting.1/probe-selector/probe-selector.component.ts

@@ -0,0 +1,82 @@
+import {
+  Component, OnInit, Input, AfterContentInit, Output,
+  EventEmitter, OnDestroy, OnChanges, SimpleChanges, ViewChild
+} from '@angular/core';
+import { Store, select, StateObservable } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import * as ListStore from 'packages/probe/store/list';
+import { ListSelector } from 'packages/probe/store';
+import { Subscription } from 'rxjs/Subscription';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+import { AuthSelector } from 'packages/member/store';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { Dropdown } from 'primeng/primeng';
+
+@Component({
+  selector: 'of-probe-selector',
+  templateUrl: './probe-selector.component.html',
+})
+export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
+
+  @Input() visible: boolean;
+  @Input() preProbe: Probe;
+  probesSubscription$: Subscription;
+  probes$: StateObservable;
+  probes: Probe[];
+
+  selected: Probe;
+
+  @Output() probeSelected = new EventEmitter<Probe>();
+
+  constructor(
+    private listStore: Store<ListStore.State>,
+  ) {
+    this.probes$ = listStore.pipe(select(ListSelector.select('probes')));
+  }
+
+  ngOnInit() {
+    this.probesSubscription$ = this.probes$.subscribe(
+      (list: Probe[]) => {
+        if (list !== null) {
+          this.probes = list;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.getProbes();
+  }
+
+  ngOnDestroy() {
+    if (this.probesSubscription$) {
+      this.probesSubscription$.unsubscribe();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['visible']) {
+      this.selected = null;
+      this.getProbes();
+    }
+  }
+
+  getProbes() {
+    this.listStore.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        this.listStore.dispatch(new ListStore.ReadAllByDomain(domain));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  onProbeSelect(event) {
+    this.selected = event.value;
+    this.probeSelected.emit(this.selected);
+  }
+}

src/packages/discovery/component/setting.1/result/result.component.html

@@ -0,0 +1,11 @@
+<div class="ui-g-12">
+  <div *ngIf="inProgress">
+    <p-progressBar mode="indeterminate" [style]="{'height': '16px'}"></p-progressBar>
+  </div>
+
+  <p-blockUI [target]="result" [blocked]="inProgress"></p-blockUI>
+  <p-panel #result [showHeader]="false">
+    <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
+  </p-panel>
+
+</div>

src/packages/discovery/component/setting.1/result/result.component.ts

@@ -0,0 +1,191 @@
+import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Store, select, StateObservable } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Subscription } from 'rxjs/Subscription';
+import { TreeNode } from 'primeng/primeng';
+
+import * as DiscoveredStore from 'packages/discovery/store/setting';
+import { SettingSelector, DiscoverSelector } from 'packages/discovery/store';
+import * as DiscoverStore from 'packages/discovery/store/discover';
+import * as RegistStore from 'packages/discovery/store/regist';
+
+import { Zone } from '@overflow/commons-typescript/model/discovery';
+import { Host } from '@overflow/commons-typescript/model/discovery';
+import { Port } from '@overflow/commons-typescript/model/discovery';
+import { Service } from '@overflow/commons-typescript/model/discovery';
+
+@Component({
+  selector: 'of-discovery-result',
+  templateUrl: './result.component.html',
+})
+export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  treeNodes = [];
+  selectedNodes = [];
+  zones: Map<string, Zone> = null;
+  checkedSet = new Set();
+
+  resultSubscription$: Subscription;
+  result$: any;
+  startedSubscription$: Subscription;
+  started$: any;
+  endedSubscription$: Subscription;
+  ended$: any;
+
+  inProgress = false;
+
+
+  selectedDiscoveryResult: TreeNode[];
+
+  constructor(
+    private discoverdStore: Store<DiscoveredStore.State>,
+    private discoverStore: Store<DiscoverStore.State>,
+    private registStore: Store<RegistStore.State>,
+  ) {
+    this.result$ = discoverStore.pipe(select(DiscoverSelector.select('zones')));
+    this.started$ = discoverStore.pipe(select(DiscoverSelector.select('isStart')));
+    this.ended$ = discoverStore.pipe(select(DiscoverSelector.select('isEnd')));
+  }
+
+  ngOnInit() {
+    alert('init');
+    this.resultSubscription$ = this.result$.subscribe(
+      (zones: Map<string, Zone>) => {
+        if (zones !== undefined && zones !== null) {
+          console.log(zones);
+          this.treeNodes = this.convertTreeViewZone(zones);
+          this.zones = zones;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+    this.startedSubscription$ = this.started$.subscribe(
+      (isStart: boolean) => {
+        if (isStart !== undefined && isStart !== null && isStart) {
+          this.inProgress = true;
+          console.log('##Discovery has started.##');
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+    this.endedSubscription$ = this.ended$.subscribe(
+      (isEnd: boolean) => {
+        if (isEnd !== undefined && isEnd !== null && isEnd) {
+          console.log('##Discovery has done.##');
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+  }
+
+  ngOnDestroy() {
+    if (this.startedSubscription$) {
+      this.startedSubscription$.unsubscribe();
+    }
+    if (this.endedSubscription$) {
+      this.endedSubscription$.unsubscribe();
+    }
+    if (this.resultSubscription$) {
+      this.resultSubscription$.unsubscribe();
+    }
+  }
+
+  save() {
+  }
+
+  convertTreeViewZone(zones: Map<string, Zone>) {
+
+    if (zones === undefined || zones === null) {
+      return;
+    }
+
+    const treeNodes: any[] = [];
+
+    zones.forEach((value: Zone, key: string, map) => {
+      const jZone: any = {
+        label: 'Zone - ' + value.iface,
+        // className: 'cn' + value.ip,
+        expandedIcon: 'fa-folder-open',
+        collapsedIcon: 'fa-folder',
+      };
+      jZone.obj = value;
+      jZone.children = this.convertViewHost(value.hosts);
+      treeNodes.push(jZone);
+    });
+
+    return treeNodes;
+  }
+
+  convertViewHost(hosts): any[] {
+    if (hosts === undefined || hosts === null) {
+      return null;
+    }
+    const hostNodes: any[] = [];
+
+    hosts.forEach((host, hostKey) => {
+
+      const jHost: any = {
+        label: 'Host - ' + host.ipv4,
+        // className: 'cn' + host.ip
+        expandedIcon: 'fa-folder-open',
+        collapsedIcon: 'fa-folder',
+      };
+      jHost.obj = host;
+      jHost.children = this.convertViewPort(host.ports);
+      hostNodes.push(jHost);
+
+    });
+
+    return hostNodes;
+
+  }
+
+  convertViewPort(ports): any[] {
+    if (ports === undefined || ports === null || ports.size < 0) {
+      return null;
+    }
+    const portChildren: any[] = [];
+    ports.forEach((port, portKey) => {
+      const jPort: any = {
+        label: 'Port - ' + port.portNumber,
+        // className: 'cn' + port.portNumber,
+        expandedIcon: 'fa-folder-open',
+        collapsedIcon: 'fa-folder',
+      };
+      jPort.obj = port;
+      jPort.children = this.convertViewService(port.services);
+      portChildren.push(jPort);
+    });
+
+    return portChildren;
+  }
+
+  convertViewService(services): any[] {
+    if (services === undefined || services === null || services.size <= 0) {
+      return null;
+    }
+    const serviceChildren: any[] = [];
+    services.forEach((service, serviceKey) => {
+      const jService: any = {
+        label: 'Service - ' + service.serviceName,
+        // className: 'cn' + service.serviceName,
+      };
+      jService.obj = service;
+
+      serviceChildren.push(jService);
+    });
+
+    return serviceChildren;
+  }
+
+
+}

src/packages/discovery/component/setting.1/setting.component.html

@@ -0,0 +1,30 @@
+<div [style.height.px]="height">
+  <div dir="rtl">
+    <p-button (onClick)="onCancel()" icon="fa fa-fw fa-close"></p-button>
+  </div>
+
+  <div *ngIf="!started; else result">
+    <of-probe-selector [preProbe]="probe" [visible]="visible" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
+
+    <p-blockUI [target]="df" [blocked]="!selectedProbe && !probe"></p-blockUI>
+    <p-panel #df [showHeader]="false">
+      <of-discovery-filter [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
+    </p-panel>
+
+    <div dir="rtl">
+      <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
+        (click)="requestStart = true"></button>
+      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
+    </div>
+  </div>
+
+  <ng-template #result>
+    <of-discovery-result #resultComponent (close)="onCancel()"></of-discovery-result>
+
+    <div dir="rtl">
+      <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
+        (click)="onSave()"></button>
+      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
+    </div>
+  </ng-template>
+</div>

src/packages/discovery/component/setting.1/setting.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit, AfterContentInit, Output, EventEmitter,
+  Input, OnDestroy, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { Store, select, StateObservable } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import {
+  DiscoveryStartInfo,
+  DiscoverZone,
+  Zone,
+  DiscoverPort,
+  DiscoverService
+} from '@overflow/commons-typescript/model/discovery';
+import * as CIDR from 'ip-cidr';
+import * as DiscoveredStore from '../../store/setting';
+import { SettingSelector, DiscoverSelector } from '../../store';
+import * as DiscoverStore from '../../store/discover';
+import * as RegistStore from '../../store/regist';
+import { Host } from '@overflow/commons-typescript/model/discovery';
+import { Port } from '@overflow/commons-typescript/model/discovery';
+import { Service } from '@overflow/commons-typescript/model/discovery';
+import * as ProbeDetailStore from 'packages/probe/store';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+import { TreeNode } from 'primeng/primeng';
+import { ListSelector as ProbeListSelector } from 'packages/probe/store';
+import * as ProbeListStore from 'packages/probe/store/list';
+import { AuthSelector } from 'packages/member/store';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { Subscription } from 'rxjs/Subscription';
+import { ResultComponent } from './result/result.component';
+
+@Component({
+  selector: 'of-discovery-setting',
+  templateUrl: './setting.component.html',
+})
+export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
+
+  @Input() visible: boolean;
+  @Input() probe: Probe;
+  @Output() close = new EventEmitter();
+  private requestStart = false;
+  private started = false;
+
+  private selectedProbe: Probe;
+  private height: number;
+
+  @ViewChild('resultComponent') resultComponent: ResultComponent;
+
+  constructor(
+    private discoverStore: Store<DiscoverStore.State>,
+  ) {
+  }
+
+  ngOnInit() {
+    this.height = window.innerHeight * 0.9;
+  }
+
+  ngAfterContentInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['probe'] && this.probe) {
+      this.selectedProbe = this.probe;
+    }
+  }
+
+  ngOnDestroy() {
+  }
+
+  onProbeSelect(probe: Probe) {
+    this.selectedProbe = probe;
+  }
+
+  onDiscoveryStart(discoverZone: DiscoverZone) {
+    this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
+      { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
+
+    setTimeout(() => {
+      this.started = true;
+      this.requestStart = false;
+    });
+  }
+
+  onCancel() {
+    this.selectedProbe = null;
+    this.started = false;
+    this.close.emit();
+  }
+
+  onSave() {
+    this.resultComponent.ngOnInit();
+    this.resultComponent.save();
+  }
+
+}

src/packages/discovery/component/setting/probe-selector/probe-selector.component.ts

@@ -1,6 +1,6 @@
 import {
   Component, OnInit, Input, AfterContentInit, Output,
-  EventEmitter, OnDestroy, OnChanges, SimpleChanges, ViewChild
+  EventEmitter, OnDestroy, ViewChild
 } from '@angular/core';
 import { Store, select, StateObservable } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
@@ -16,14 +16,12 @@ import { Dropdown } from 'primeng/primeng';
   selector: 'of-probe-selector',
   templateUrl: './probe-selector.component.html',
 })
-export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
+export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestroy {
 
-  @Input() visible: boolean;
   @Input() preProbe: Probe;
   probesSubscription$: Subscription;
   probes$: StateObservable;
   probes: Probe[];
-
   selected: Probe;
 
   @Output() probeSelected = new EventEmitter<Probe>();
@@ -55,13 +53,8 @@ export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestr
     if (this.probesSubscription$) {
       this.probesSubscription$.unsubscribe();
     }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['visible']) {
-      this.selected = null;
-      this.getProbes();
-    }
+    this.selected = null;
+    this.probes = null;
   }
 
   getProbes() {

src/packages/discovery/component/setting/result/result.component.html

@@ -9,10 +9,3 @@
   </p-panel>
 
 </div>
-
-<div>
-  <div dir="rtl">
-    <button pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit" (click)="discoveryResultSave()"></button>
-    <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
-  </div>
-</div>

src/packages/discovery/component/setting/result/result.component.ts

@@ -20,8 +20,6 @@ import { Service } from '@overflow/commons-typescript/model/discovery';
 })
 export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
 
-  @Output() close = new EventEmitter();
-
   treeNodes = [];
   selectedNodes = [];
   zones: Map<string, Zone> = null;
@@ -50,7 +48,6 @@ export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngOnInit() {
-
     this.resultSubscription$ = this.result$.subscribe(
       (zones: Map<string, Zone>) => {
         if (zones !== undefined && zones !== null) {
@@ -101,8 +98,7 @@ export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
     }
   }
 
-  onCancel() {
-    this.close.emit();
+  save() {
   }
 
   convertTreeViewZone(zones: Map<string, Zone>) {

src/packages/discovery/component/setting/setting.component.html

@@ -1,21 +1,30 @@
-<div dir="rtl">
-    <p-button (onClick)="onCancel()" icon="fa fa-fw fa-close"></p-button>
-</div>
-
-<div *ngIf="!started; else result">
-  <of-probe-selector [preProbe]="probe" [visible]="visible" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
-
-  <p-blockUI [target]="df" [blocked]="!selectedProbe && !probe"></p-blockUI>
-  <p-panel #df [showHeader]="false">
-    <of-discovery-filter [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
-  </p-panel>
-
+<div [style.height.px]="height">
   <div dir="rtl">
-    <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit" (click)="requestStart = true"></button>
-    <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
+    <p-button (onClick)="onCancel()" icon="fa fa-fw fa-close"></p-button>
   </div>
-</div>
 
-<ng-template #result>
-  <of-discovery-result (close)="onCancel()"></of-discovery-result>
-</ng-template>
+  <div *ngIf="!started; else result">
+    <of-probe-selector #probeSelectorComponent [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
+
+    <p-blockUI [target]="df" [blocked]="!selectedProbe && !probe"></p-blockUI>
+    <p-panel #df [showHeader]="false">
+      <of-discovery-filter #filterComponent [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
+    </p-panel>
+
+    <div dir="rtl">
+      <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
+        (click)="requestStart = true"></button>
+      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
+    </div>
+  </div>
+
+  <ng-template #result>
+    <of-discovery-result #resultComponent (close)="onCancel()"></of-discovery-result>
+
+    <div dir="rtl">
+      <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
+        (click)="onSave()"></button>
+      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
+    </div>
+  </ng-template>
+</div>

src/packages/discovery/component/setting/setting.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, AfterContentInit, Output, EventEmitter, Input, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, AfterContentInit, Output, EventEmitter,
+  Input, OnDestroy, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { Store, select, StateObservable } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import {
@@ -24,6 +25,9 @@ import * as ProbeListStore from 'packages/probe/store/list';
 import { AuthSelector } from 'packages/member/store';
 import { Domain } from '@overflow/commons-typescript/model/domain';
 import { Subscription } from 'rxjs/Subscription';
+import { ResultComponent } from './result/result.component';
+import { ProbeSelectorComponent } from './probe-selector/probe-selector.component';
+import { FilterComponent } from './filter/filter.component';
 
 @Component({
   selector: 'of-discovery-setting',
@@ -40,25 +44,65 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   private selectedProbe: Probe;
   private height: number;
 
+  @ViewChild('probeSelectorComponent') probeSelectorComponent: ProbeSelectorComponent;
+  @ViewChild('filterComponent') filterComponent: FilterComponent;
+  @ViewChild('resultComponent') resultComponent: ResultComponent;
+
   constructor(
     private discoverStore: Store<DiscoverStore.State>,
   ) {
   }
 
   ngOnInit() {
-    this.height = window.innerHeight;
+    this.selectedProbe = this.probe;
+    this.height = window.innerHeight * 0.9;
   }
 
   ngAfterContentInit() {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['probe'] && this.probe) {
-      this.selectedProbe = this.probe;
+    if (changes['visible']) {
+      const change = changes['visible'];
+      if (!change.previousValue && change.currentValue) {
+        this.initAll();
+      } else  if (change.previousValue && !change.currentValue) {
+        this.destroyAll();
+      }
     }
   }
 
   ngOnDestroy() {
+    this.selectedProbe = null;
+    this.started = false;
+    this.close.emit();
+    this.requestStart = false;
+  }
+
+  initAll() {
+    this.ngOnInit();
+    if (this.probeSelectorComponent) {
+      this.probeSelectorComponent.ngOnInit();
+    }
+    if (this.filterComponent) {
+      this.filterComponent.ngOnInit();
+    }
+    if (this.resultComponent) {
+      this.resultComponent.ngOnInit();
+    }
+  }
+
+  destroyAll() {
+    this.ngOnDestroy();
+    if (this.probeSelectorComponent) {
+      this.probeSelectorComponent.ngOnDestroy();
+    }
+    if (this.filterComponent) {
+      this.filterComponent.ngOnDestroy();
+    }
+    if (this.resultComponent) {
+      this.resultComponent.ngOnDestroy();
+    }
   }
 
   onProbeSelect(probe: Probe) {
@@ -66,6 +110,7 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   }
 
   onDiscoveryStart(discoverZone: DiscoverZone) {
+    console.log('DiscoveryStart requested');
     this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
       { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
 
@@ -76,9 +121,11 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   }
 
   onCancel() {
-    this.selectedProbe = null;
-    this.started = false;
-    this.close.emit();
+    this.destroyAll();
+  }
+
+  onSave() {
+    this.resultComponent.save();
   }
 
 }