discovery setting

package-lock.json

@@ -259,7 +259,7 @@
     "@overflow/commons-typescript": {
       "version": "0.0.1",
       "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/commons-typescript/-/commons-typescript-0.0.1.tgz",
-      "integrity": "sha512-gmSOtX2unwGIaPPomwFhREi7I5hIdhV/SaEST9oUH/SpfrHNPkRd3ptW2PL57W3j70UvGf2xh853DsJqpcdLtA==",
+      "integrity": "sha512-ExzlR7RsCu3nPn1m1ADJEFV9fYr2rVg3Oyge8MogHOjDa1BoeUx9OLwluL7IOuBEHA5tVX6BucRIeaNFOME8TQ==",
       "dev": true
     },
     "@schematics/angular": {
@@ -1881,6 +1881,7 @@
       "dev": true
     },
     "common-tags": {
+      
       "version": "1.7.2",
       "resolved": "https://nexus.loafle.net/repository/npm-all/common-tags/-/common-tags-1.7.2.tgz",
       "integrity": "sha512-joj9ZlUOjCrwdbmiLqafeUSgkUM74NqhLsZtSqDmhKudaIY197zTrb8JMl31fMnCUuxwFT23eC/oWvrZzDLRJQ==",

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

@@ -1,5 +1,5 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { AccordionModule } from 'primeng/primeng';
+import { AccordionModule, BlockUIModule, InplaceModule } from 'primeng/primeng';
 import { AutoCompleteModule } from 'primeng/primeng';
 import { BreadcrumbModule } from 'primeng/primeng';
 import { ButtonModule } from 'primeng/primeng';
@@ -140,7 +140,9 @@ const PRIME_NG_MODULES: any[] = [
   TreeTableModule,
   CardModule,
   DataViewModule,
-  SidebarModule
+  SidebarModule,
+  BlockUIModule,
+  InplaceModule
 ];
 
 @NgModule({

src/packages/discovery/component/index.ts

@@ -1,5 +1,13 @@
 import { SettingComponent } from './setting/setting.component';
+import { ProbeSelectorComponent } from './setting/probe-selector/probe-selector.component';
+import { ServiceSelectorComponent } from './setting/filter/service-selector/service-selector.component';
+import { FilterComponent } from './setting/filter/filter.component';
+import { ResultComponent } from './setting/result/result.component';
 
 export const COMPONENTS = [
   SettingComponent,
+  FilterComponent,
+  ServiceSelectorComponent,
+  ProbeSelectorComponent,
+  ResultComponent
 ];

src/packages/discovery/component/setting/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/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/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="brand" 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.name}}</div>
+      </div>
+    </ng-template>
+  </p-pickList>
+</div>

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

@@ -0,0 +1,51 @@
+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 = list;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.listStore.dispatch(new ListStore.ReadAll());
+  }
+
+  ngOnDestroy() {
+    if (this.crawlersSubscription$) {
+      this.crawlersSubscription$.unsubscribe();
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<div *ngIf="!preProbe; else probeInfo">
+  <p-dropdown [options]="probes" optionLabel="displayName" placeholder="Select a Probe" (onChange)="onProbeSelect($event)"
+    [style]="{'width':'300px'}"></p-dropdown>
+</div>
+
+<ng-template #probeInfo>
+  <div>{{preProbe.displayName}} ({{preProbe.cidr}})</div>
+</ng-template>

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

@@ -0,0 +1,63 @@
+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/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';
+
+@Component({
+  selector: 'of-probe-selector',
+  templateUrl: './probe-selector.component.html',
+})
+export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  @Input() preProbe: Probe;
+  probesSubscription$: Subscription;
+  probes$: StateObservable;
+  probes: 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.listStore.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        this.listStore.dispatch(new ListStore.ReadAllByDomain(domain));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    if (this.probesSubscription$) {
+      this.probesSubscription$.unsubscribe();
+    }
+  }
+
+  onProbeSelect(event) {
+    this.probeSelected.emit(event.value);
+  }
+}

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

@@ -0,0 +1,13 @@
+<div class="ui-g-12">
+  <div *ngIf="inProgress">
+    <p-progressBar mode="indeterminate" [style]="{'height': '16px'}"></p-progressBar>
+  </div>
+  <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
+</div>
+
+<div>
+  <div dir="rtl">
+    <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
+    <button pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit" (click)="discoveryResultSave()"></button>
+  </div>
+</div>

src/packages/discovery/component/setting/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 {
+
+  @Output() close = new EventEmitter();
+
+  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() {
+    this.resultSubscription$ = this.result$.subscribe(
+      (zones: Map<string, Zone>) => {
+        if (zones !== undefined && zones !== null) {
+          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) {
+          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) {
+          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();
+    }
+  }
+
+  onCancel() {
+    this.close.emit();
+  }
+
+  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/setting.component.html

@@ -1,135 +1,18 @@
-<div *ngIf="!started">
-
-  <!-- <mat-dialog-actions fxLayoutAlign="end">
-    <button mat-button mat-dialog-close>Cancel</button>
-    <button mat-button color="primary" (click)="discovery()">Start</button>
-  </mat-dialog-actions> -->
-
-  <p-card title="Zone" subtitle="192.168.1.0/24" styleClass="ui-card-shadow">
-    <p-header>
-
-    </p-header>
-    <div>
-
-      <div class="ui-g">
-        <div class="ui-g-12">
-          <p-checkbox name="group1" value="host" label="Host"  inputId="la" [(ngModel)]="hostChecked" (onChange)="handleHostCheckChange($event)"></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 name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
-        </div>
-        <div class="ui-g-12">
-          <div class="ui-g-6">
-            TCP &nbsp;
-            <p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
-          </div>
-          <div class="ui-g-6">
-            UDP &nbsp;
-            <p-inputSwitch [(ngModel)]="udpChecked"></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"> 
-                <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"> 
-                <label for="float-input">End Port</label>
-            </span>
-        </div>
-      </div>
-
-      <!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
-        <p-header>
-          <i class="fa fa-car"></i>
-          Cars
-        </p-header>
-      </p-listbox> -->
-      <div class="ui-g-12">
-        <div class="ui-g-12 ui-g-nopad">
-          <p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
-        </div>
-
-        <div class="ui-g-12">
-          <p-pickList [source]="serviceItems" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
-            filterBy="brand" dragdrop="true" dragdropScope="services" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand"
-            [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" [showTargetControls]="false" [showSourceControls]="false">
-            <ng-template let-service pTemplate="item">
-              <div class="ui-helper-clearfix">
-                <div style="font-size:14px;margin:0;padding: 0;">{{service.name}}</div>
-              </div>
-            </ng-template>
-          </p-pickList>
-        </div>
-      </div>
-
-    </div>
-    <p-footer>
-      <div dir="rtl">
-        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
-        <button pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit" (click)="discovery()"></button>
-      </div>
-    </p-footer>
-  </p-card>
-
-
-
-
-
 
+<div *ngIf="!started; else result">
+  <of-probe-selector [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
 
+  <p-blockUI [target]="df" [blocked]="!selectedProbe"></p-blockUI>
+  <p-panel #df header="Panel Header">
+    <of-discovery-filter [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
+  </p-panel>
 
+  <div dir="rtl">
+    <button [disabled]="!selectedProbe" 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>
 
-<div *ngIf="started">
+<ng-template #result>
-
+  <of-discovery-result (close)="onCancel()"></of-discovery-result>
-  <p-card title="Discovery Result" [style]="{width: '100%'}" styleClass="ui-card-shadow">
+</ng-template>
-    <p-header>
-
-    </p-header>
-    <div class="ui-g-12">
-      <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
-    </div>
-    <!-- <div class="ui-g-12">Selected Nodes:
-        <span *ngFor="let file of filesTree4">{{file.label}} </span>
-    </div> -->
-    <p-footer>
-      <div dir="rtl">
-        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
-        <button pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit" (click)="discoveryResultSave()"></button>
-      </div>
-    </p-footer>
-  </p-card>
-
-
-  <!-- <mat-dialog-actions fxLayoutAlign="end">
-    <button mat-button mat-dialog-close>Cancel</button>
-    <button mat-button color="primary" (click)="discoveryResultSave()">Save</button>
-  </mat-dialog-actions> -->
-</div>

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, AfterContentInit, Output, EventEmitter, Input } from '@angular/core';
+import { Component, OnInit, AfterContentInit, Output, EventEmitter, Input, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
-import { Store, select } from '@ngrx/store';
+import { Store, select, StateObservable } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import {
   DiscoveryStartInfo,
@@ -10,834 +10,70 @@ import {
 } from '@overflow/commons-typescript/model/discovery';
 import * as CIDR from 'ip-cidr';
 import * as DiscoveredStore from '../../store/setting';
-// import * as DiscoverStore from '../../store/discover';
-
 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 { DetailSelector as ProbeDetailSelector } from 'packages/probe/store';
 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 { TreeNode } from 'angular-tree-component';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'of-discovery-setting',
   templateUrl: './setting.component.html',
 })
-export class SettingComponent implements OnInit, AfterContentInit {
+export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
 
-  @Input() cidr: string;
+  @Input() probe: Probe;
   @Output() close = new EventEmitter();
+  private requestStart = false;
+  private started = false;
 
-  probe$ = this.probeDetailStore.pipe(select(ProbeDetailSelector.select('probe')));
+  private selectedProbe: Probe;
-
-  settingSucceed$: any;
-  discoveryResult$: any;
-
-  discoveryReq$: any;
-  discoveryStart$: any;
-  discoveryEnd$: any;
-
-  probe: Probe = null;
-  started = false;
-
-  // cidr;
-  startIP;
-  endIP;
-  startPort;
-  endPort;
-  // private settingForm: FormGroup;
-  hostChecked = ['host'];
-  portChecked = [];
-  serviceChecked = [];
-  tcpChecked = true;
-  udpChecked = true;
-  includeServices = [];
-
-  serviceItems = [
-    { name: 'ACTIVEDIRECTORY' },
-    { name: 'CASSANDRA' },
-    { name: 'DHCP' },
-    { name: 'DNS' },
-    { name: 'FTP' },
-    { name: 'HTTP' },
-    { name: 'IMAP' },
-    { name: 'LDAP' },
-    { name: 'MONGODB' },
-    { name: 'MSSQL' },
-    { name: 'MYSQL' },
-    { name: 'NETBIOS' },
-    { name: 'ORACLE' },
-    { name: 'POP' },
-    { name: 'POSTGRESQL' },
-    { name: 'REDIS' },
-    { name: 'RMI' },
-    { name: 'SMB' },
-    { name: 'SMTP' },
-    { name: 'SNMP' },
-    { name: 'SSH' },
-    { name: 'TELNET' },
-    { name: 'WMI' },
-    { name: 'UNKNOWN' },
-    { name: 'SSH' },
-    { name: 'WMI' },
-    { name: 'SNMP' },
-  ];
-
-  treeNodes = [];
-  selectedNodes = [];
-  zones: Map<string, Zone> = null;
-
-  checkedSet = new Set();
-
-  testObj: any[] = testDiscovery;
-  selectedDiscoveryResult: TreeNode[];
 
   constructor(
-    private discoverdstore: Store<DiscoveredStore.State>,
+    private discoverStore: Store<DiscoverStore.State>,
-    private discoverstore: Store<DiscoverStore.State>,
-    private registStore: Store<RegistStore.State>,
-    private probeDetailStore: Store<ProbeDetailStore.State>
   ) {
-    this.settingSucceed$ = discoverdstore.pipe(select(SettingSelector.select('isStart')));
-    this.discoveryResult$ = this.discoverstore.pipe(select(DiscoverSelector.select('zones')));
-    this.discoveryReq$ = this.discoverstore.pipe(select(DiscoverSelector.select('isReq')));
-    this.discoveryStart$ = this.discoverstore.pipe(select(DiscoverSelector.select('isStart')));
-    this.discoveryEnd$ = this.discoverstore.pipe(select(DiscoverSelector.select('isEnd')));
   }
 
   ngOnInit() {
-
-    // this.treeNodes = this.convertViewHost(this.testObj);
-
-    this.settingSucceed$.subscribe(
-      (succeed: boolean) => {
-        if (succeed) {
-          this.started = true;
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-    this.probe$.subscribe(
-      (probe: Probe) => {
-        if (probe != null) {
-          this.probe = probe;
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-    this.discoveryResult$.subscribe(
-      (zones: Map<string, Zone>) => {
-
-        if (zones !== undefined && zones !== null) {
-          console.log('ZoneZoneZoneZoneZoneZoneZone');
-          // console.log(JSON.stringify(zones));
-          this.treeNodes = this.convertTreeViewZone(zones);
-          this.zones = zones;
-        }
-
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-    this.discoveryReq$.subscribe(
-      (isReq: boolean) => {
-
-        if (isReq !== undefined && isReq !== null) {
-          console.log('isReqisReqisReqisReq');
-        }
-
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-    this.discoveryReq$.subscribe(
-      (isStart: boolean) => {
-
-        if (isStart !== undefined && isStart !== null) {
-          console.log('isStartisStartisStart');
-        }
-
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-    this.discoveryEnd$.subscribe(
-      (isEnd: boolean) => {
-
-        if (isEnd !== undefined && isEnd !== null) {
-          console.log('isEndisEndisEndisEnd');
-        }
-
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-  }
-
-  closeDialog() {
-    this.close.emit();
-  }
-
-  isZone(zone: Zone): boolean {
-
-    // for (let i = 0; i < this.treeNodes.length; ++i) {
-    //   if (zone.iface === this.treeNodes[i].iface) {
-    //     return true;
-    //   }
-    // }
-
-    return false;
   }
 
   ngAfterContentInit() {
-    if (this.cidr === undefined || this.cidr === null) {
-      this.cidr = '192.168.10.0/24';
-    }
-
-    this.hostRange();
-    this.portRange();
   }
 
-  hostRange() {
+  ngOnChanges(changes: SimpleChanges): void {
-    const cidr = new CIDR(this.cidr);
+    if (changes['probe'] && this.probe) {
-    if (!cidr.isValid()) {
+      this.selectedProbe = this.probe;
-      alert('Invalid cidr : ' + this.cidr);
-      return;
-    }
-    this.startIP = cidr.addressStart.address;
-    this.endIP = cidr.addressEnd.address;
-  }
-
-  portRange() {
-    this.startPort = '1';
-    this.endPort = '1024';
-  }
-
-  handleHostCheckChange(e: any) {
-    // console.log(e);
-    this.hostChecked = ['host'];
-    // e.source.checked = true;
-  }
-
-  handlePortCheckChange(e: any) {
-    console.log(e);
-    this.serviceChecked = [];
-    // this.serviceChecked = false;
-  }
-
-  handleServiceCheckChange(e: any) {
-    console.log(e);
-    if (e) {
-      this.portChecked = ['port'];
     }
   }
 
-  handleServiceChange(list: any) {
+  ngOnDestroy() {
-    this.includeServices = list;
   }
 
-  discovery() {
+  onProbeSelect(probe: Probe) {
-
+    this.selectedProbe = probe;
-    console.log(this.startIP);
-
-    console.log(this.startPort);
-    console.log(this.endPort);
-
-    let discoverPort: DiscoverPort = null;
-    let discoverService: DiscoverService = null;
-
-    if (this.serviceChecked.length > 0) {
-      const services = new Array();
-      for (const service of this.includeServices) {
-        services.push(service.name);
-      }
-      discoverService = {
-        includeServices: services,
-      };
-    }
-    if (this.portChecked.length > 0) {
-      discoverPort = {
-        firstScanRange: this.startPort,
-        lastScanRange: this.endPort,
-        includeTCP: this.tcpChecked,
-        includeUDP: this.udpChecked,
-        excludePorts: null,
-        discoverService: discoverService
-      };
-    }
-    const discoverZone: DiscoverZone = {
-      discoverHost: {
-        firstScanRangev4: this.startIP,
-        lastScanRangev4: this.endIP,
-        discoverPort: discoverPort,
-      },
-    };
-
-
-    console.log(discoverZone);
-
-    // console.log('start discovery - ' + this.probe.probeKey);
-    this.discoverstore.dispatch(new DiscoverStore.DiscoverZone(
-      { probeID: this.probe.probeKey, discoverZone: discoverZone }));
-
-    this.started = true;
   }
 
-  checkDiscoveryResult(node) {
+  onDiscoveryStart(discoverZone: DiscoverZone) {
+    this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
+      { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
 
-    node.toggleActivated(true);
+    setTimeout(() => {
-
+      this.started = true;
-    if (node.isActive) {
+      this.requestStart = false;
-      if (node.data.obj !== undefined) {
-        node.data.obj.target = true;
-      }
-    } else {
-      if (node.data.obj !== undefined) {
-        node.data.obj.target = false;
-      }
-    }
-
-    console.log(this.zones);
-
-  }
-
-  convertMapToList(map: Map<any, any>): Array<any> {
-
-    if (undefined === map || null === map || map.size < 0) {
-      return null;
-    }
-
-    const retArr = new Array();
-
-    map.forEach((v: any, k: any) => {
-      retArr.push(v);
-    });
-
-    return retArr;
-  }
-
-
-  discoveryResultSave() {
-    // console.log(this.checkedSet);
-
-    // send discovery save  this.zones;
-
-    // this.registStore.dispatch(new DiscoverStore.DiscoverZone(
-    //   {probeID: '52abd6fd57e511e7ac52080027658d13', discoveryZone: discoveryZone}));
-
-    // console.log(this.zones);
-    // isTarget Check
-
-
-    for ( const sn of this.selectedNodes) {
-      if (sn.obj !== undefined && sn.obj !== null) {
-        if (sn.obj.target !== undefined && sn.obj.target !== null) {
-          sn.obj.target = true;
-        }
-      }
-    }
-
-    this.zones.forEach((zone: Zone, key: string) => {
-      if (zone.hosts !== undefined && zone.hosts !== null && zone.hosts.size > 0) {
-        // FIXME: getHosts
-        const hosts: Host[] = [];
-        zone.hosts.forEach((h: Host, hKey: string) => {
-
-          h.zone = null;
-          if (h.ports !== undefined && h.ports !== null) {
-            h.portList = [];
-            h.ports.forEach((p: Port, pKey: number) => {
-
-              p.host = null;
-              if (p.services !== undefined && p.services !== null) {
-                p.serviceList = [];
-
-                p.services.forEach((s: Service, sKey: string) => {
-                  s.port = null;
-
-                  p.serviceList.push(s);
-                });
-
-              }
-
-              h.portList.push(p);
-            });
-          }
-
-          hosts.push(h);
-        });
-
-        if (hosts.length > 0) {
-          const sd: any = { hosts: hosts, probe: { id: 1 } };
-          console.log(JSON.stringify(sd));
-          console.log('--------');
-          this.registStore.dispatch(new RegistStore.DiscoverySaveAllTarget(sd));
-        }
-
-      }
     });
   }
 
-  handleClick(event) {
+  onCancel() {
-    // console.log(this.filesTree4);
+    this.close.emit();
-
+    this.started = false;
-    this.checkTarget(this.selectedDiscoveryResult);
-
-    console.log(this.testObj);
-
   }
-
-  checkTarget(treeList: any[]) {
-
-    if (treeList === undefined || treeList === null) {
-      return;
-    }
-
-    for (let i = 0 ; i < treeList.length; ++i) {
-      treeList[i].obj.target = true;
-
-      this.checkTarget(treeList[i].children);
-    }
-
-  }
-
-  convertTreeViewZone(zones: Map<string, Zone>) {
-
-    if (zones === undefined || zones === null) {
-      return;
-    }
-
-    // console.log('convertTreeViewZone');
-    const treeNodes: any[] = [];
-
-    zones.forEach((value: Zone, key: string, map) => {
-      if (this.isZone(value)) {
-        return;
-      }
-      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;
-  }
-
 }
-
-
-const testDiscovery: any[] = [
-    {
-      id: 0,
-      ip: '192.168.1.254',
-      mac: '64:e5:99:63:e7:80',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'UDP',
-          portNumber: 53,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: [
-            {
-              id: 0,
-              cryptoType: null,
-              serviceName: 'DNS',
-              discoveredDate: -62135596800000,
-              port: null,
-              target: false
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.99',
-      mac: '00:25:b3:fa:ca:9b',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'UDP',
-          portNumber: 161,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: [
-            {
-              id: 0,
-              cryptoType: null,
-              serviceName: 'SNMP_V2',
-              discoveredDate: -62135596800000,
-              port: null,
-              target: false
-            }
-          ]
-        },
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 7,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.206',
-      mac: '30:9c:23:15:a3:09',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: null
-    },
-    {
-      id: 0,
-      ip: '192.168.1.50',
-      mac: '6c:f0:49:7a:60:68',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 22,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: [
-            {
-              id: 0,
-              cryptoType: 'TCP',
-              serviceName: 'SSH',
-              discoveredDate: -62135596800000,
-              port: null,
-              target: false
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.15',
-      mac: '00:19:b9:35:8e:a6',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 22,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        },
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 25,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.100',
-      mac: '00:17:08:8d:cf:f7',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'UDP',
-          portNumber: 161,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: [
-            {
-              id: 0,
-              cryptoType: null,
-              serviceName: 'SNMP_V2',
-              discoveredDate: -62135596800000,
-              port: null,
-              target: false
-            }
-          ]
-        },
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 23,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        },
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 21,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.16',
-      mac: '00:19:b9:19:7e:c7',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 22,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.106',
-      mac: '44:8a:5b:f1:3a:7d',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'UDP',
-          portNumber: 161,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: [
-            {
-              id: 0,
-              cryptoType: null,
-              serviceName: 'SNMP_V2',
-              discoveredDate: -62135596800000,
-              port: null,
-              target: false
-            }
-          ]
-        },
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 21,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.101',
-      mac: '44:8a:5b:f1:f1:f3',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: null
-    },
-    {
-      id: 0,
-      ip: '192.168.1.102',
-      mac: '44:8a:5b:f1:f2:d3',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: null
-    },
-    {
-      id: 0,
-      ip: '192.168.1.205',
-      mac: '40:98:ad:7b:d0:43',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: null
-    },
-    {
-      id: 0,
-      ip: '192.168.1.103',
-      mac: '44:8a:5b:44:8c:e8',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 21,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.10',
-      mac: 'd0:50:99:97:5d:99',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: [
-        {
-          id: 0,
-          portType: 'TCP',
-          portNumber: 22,
-          discoveredDate: -62135596800000,
-          host: null,
-          services: null
-        }
-      ]
-    },
-    {
-      id: 0,
-      ip: '192.168.1.203',
-      mac: 'a8:e5:39:5b:c9:62',
-      os: null,
-      discoveredDate: -62135596800000,
-      target: false,
-      zone: null,
-      ports: null
-    }
-  ];
-

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

@@ -0,0 +1,124 @@
+<div *ngIf="!started">
+
+  <!-- <mat-dialog-actions fxLayoutAlign="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button color="primary" (click)="discovery()">Start</button>
+  </mat-dialog-actions> -->
+  <div class="ui-g">
+    <!-- <p-card title="Zone" subtitle="{{cidr}}" styleClass="ui-card-shadow"> -->
+    <div *ngIf="probe">
+      {{probe.cidr}}
+    </div>
+
+    <div class="ui-g-12">
+      <of-probe-selector (probeSelected)="onProbeSelect($event)"></of-probe-selector>
+    </div>
+
+    <div *ngIf="probe" >
+      <div class="ui-g">
+        <div class="ui-g-12">
+          <p-checkbox name="group1" value="host" label="Host" inputId="la" [(ngModel)]="hostChecked" (onChange)="handleHostCheckChange($event)"></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 name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
+        </div>
+        <div class="ui-g-12">
+          <div class="ui-g-6">
+            TCP &nbsp;
+            <p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
+          </div>
+          <div class="ui-g-6">
+            UDP &nbsp;
+            <p-inputSwitch [(ngModel)]="udpChecked"></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">
+            <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">
+            <label for="float-input">End Port</label>
+          </span>
+        </div>
+      </div>
+
+      <!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
+        <p-header>
+          <i class="fa fa-car"></i>
+          Cars
+        </p-header>
+      </p-listbox> -->
+      <div class="ui-g-12">
+        <div class="ui-g-12 ui-g-nopad">
+          <p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
+        </div>
+
+        <of-service-selector></of-service-selector>
+
+    </div>
+
+    <div>
+      <div dir="rtl">
+        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
+        <button pButton [disabled]="!probe" type="button" label="Start" icon="fa-check" class="ui-button-width-fit" (click)="discovery()"></button>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+
+<div *ngIf="started">
+
+  <p-card title="Discovery Result" [style]="{width: '100%'}" styleClass="ui-card-shadow">
+    <p-header>
+
+    </p-header>
+    <div class="ui-g-12">
+      <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
+    </div>
+    <!-- <div class="ui-g-12">Selected Nodes:
+        <span *ngFor="let file of filesTree4">{{file.label}} </span>
+    </div> -->
+    <p-footer>
+      <div dir="rtl">
+        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
+        <button pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit" (click)="discoveryResultSave()"></button>
+      </div>
+    </p-footer>
+  </p-card>
+
+
+  <!-- <mat-dialog-actions fxLayoutAlign="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button color="primary" (click)="discoveryResultSave()">Save</button>
+  </mat-dialog-actions> -->
+</div>

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

@@ -0,0 +1,793 @@
+import { Component, OnInit, AfterContentInit, Output, EventEmitter, Input, OnDestroy } 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';
+
+@Component({
+  selector: 'of-discovery-setting',
+  templateUrl: './setting.component.html',
+})
+export class SettingComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  @Input() probe: Probe;  /* To determine valid range. */
+  @Output() close = new EventEmitter();
+
+  settingSucceed$: any;
+  discoveryResult$: any;
+
+  discoveryReq$: any;
+  discoveryStart$: any;
+  discoveryEnd$: any;
+
+  started = false;
+
+  startIP;
+  endIP;
+  startPort;
+  endPort;
+  hostChecked = ['host'];
+  portChecked = [];
+  serviceChecked = [];
+  tcpChecked = true;
+  udpChecked = true;
+  includeServices = [];
+
+  treeNodes = [];
+  selectedNodes = [];
+  zones: Map<string, Zone> = null;
+
+  checkedSet = new Set();
+
+  testObj: any[] = testDiscovery;
+  selectedDiscoveryResult: TreeNode[];
+
+  constructor(
+    private discoverdstore: Store<DiscoveredStore.State>,
+    private discoverstore: Store<DiscoverStore.State>,
+    private registStore: Store<RegistStore.State>,
+    private probeListStore: Store<ProbeListStore.State>
+  ) {
+    this.settingSucceed$ = discoverdstore.pipe(select(SettingSelector.select('isStart')));
+    this.discoveryResult$ = discoverstore.pipe(select(DiscoverSelector.select('zones')));
+    this.discoveryReq$ = discoverstore.pipe(select(DiscoverSelector.select('isReq')));
+    this.discoveryStart$ = discoverstore.pipe(select(DiscoverSelector.select('isStart')));
+    this.discoveryEnd$ = discoverstore.pipe(select(DiscoverSelector.select('isEnd')));
+  }
+
+  ngOnInit() {
+
+    // this.settingSucceed$.subscribe(
+    //   (succeed: boolean) => {
+    //     if (succeed) {
+    //       this.started = true;
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+
+    // this.discoveryResult$.subscribe(
+    //   (zones: Map<string, Zone>) => {
+
+    //     if (zones !== undefined && zones !== null) {
+    //       console.log('ZoneZoneZoneZoneZoneZoneZone');
+    //       // console.log(JSON.stringify(zones));
+    //       this.treeNodes = this.convertTreeViewZone(zones);
+    //       this.zones = zones;
+    //     }
+
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+
+    // this.discoveryReq$.subscribe(
+    //   (isReq: boolean) => {
+
+    //     if (isReq !== undefined && isReq !== null) {
+    //       console.log('isReqisReqisReqisReq');
+    //     }
+
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+
+    // this.discoveryStart$.subscribe(
+    //   (isStart: boolean) => {
+
+    //     if (isStart !== undefined && isStart !== null) {
+    //       console.log('isStartisStartisStart');
+    //     }
+
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+
+    // this.discoveryEnd$.subscribe(
+    //   (isEnd: boolean) => {
+
+    //     if (isEnd !== undefined && isEnd !== null) {
+    //       console.log('isEndisEndisEndisEnd');
+    //     }
+
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+  }
+
+  ngAfterContentInit() {
+    if (this.probe === undefined || this.probe === null) {
+    } else {
+      this.hostRange();
+      this.portRange();
+    }
+  }
+
+  ngOnDestroy() {
+  }
+
+
+  onProbeSelect(event) {
+    this.probe = event.value;
+    this.hostRange();
+    this.portRange();
+  }
+
+  closeDialog() {
+    this.close.emit();
+  }
+
+  isZone(zone: Zone): boolean {
+
+    // for (let i = 0; i < this.treeNodes.length; ++i) {
+    //   if (zone.iface === this.treeNodes[i].iface) {
+    //     return true;
+    //   }
+    // }
+
+    return false;
+  }
+
+
+  hostRange() {
+    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';
+  }
+
+  handleHostCheckChange(e: any) {
+    this.hostChecked = ['host'];
+  }
+
+  handlePortCheckChange(e: any) {
+    this.serviceChecked = [];
+  }
+
+  handleServiceCheckChange(e: any) {
+    if (e) {
+      this.portChecked = ['port'];
+    }
+  }
+
+  handleServiceChange(list: any) {
+    this.includeServices = list;
+  }
+
+  discovery() {
+    console.log(this.startIP);
+    console.log(this.startPort);
+    console.log(this.endPort);
+
+    let discoverPort: DiscoverPort = null;
+    let discoverService: DiscoverService = null;
+
+    if (this.serviceChecked.length > 0) {
+      const services = new Array();
+      for (const service of this.includeServices) {
+        services.push(service.name);
+      }
+      discoverService = {
+        includeServices: services,
+      };
+    }
+    if (this.portChecked.length > 0) {
+      discoverPort = {
+        firstScanRange: this.startPort,
+        lastScanRange: this.endPort,
+        includeTCP: this.tcpChecked,
+        includeUDP: this.udpChecked,
+        excludePorts: null,
+        discoverService: discoverService
+      };
+    }
+    const discoverZone: DiscoverZone = {
+      discoverHost: {
+        firstScanRangev4: this.startIP,
+        lastScanRangev4: this.endIP,
+        discoverPort: discoverPort,
+      },
+    };
+
+
+    console.log(discoverZone);
+
+    // console.log('start discovery - ' + this.probe.probeKey);
+    this.discoverstore.dispatch(new DiscoverStore.DiscoverZone(
+      { probeID: this.probe.probeKey, discoverZone: discoverZone }));
+
+    this.started = true;
+  }
+
+  checkDiscoveryResult(node) {
+
+    node.toggleActivated(true);
+
+    if (node.isActive) {
+      if (node.data.obj !== undefined) {
+        node.data.obj.target = true;
+      }
+    } else {
+      if (node.data.obj !== undefined) {
+        node.data.obj.target = false;
+      }
+    }
+
+    console.log(this.zones);
+
+  }
+
+  convertMapToList(map: Map<any, any>): Array<any> {
+
+    if (undefined === map || null === map || map.size < 0) {
+      return null;
+    }
+
+    const retArr = new Array();
+
+    map.forEach((v: any, k: any) => {
+      retArr.push(v);
+    });
+
+    return retArr;
+  }
+
+
+  discoveryResultSave() {
+    // console.log(this.checkedSet);
+
+    // send discovery save  this.zones;
+
+    // this.registStore.dispatch(new DiscoverStore.DiscoverZone(
+    //   {probeID: '52abd6fd57e511e7ac52080027658d13', discoveryZone: discoveryZone}));
+
+    // console.log(this.zones);
+    // isTarget Check
+
+
+    for (const sn of this.selectedNodes) {
+      if (sn.obj !== undefined && sn.obj !== null) {
+        if (sn.obj.target !== undefined && sn.obj.target !== null) {
+          sn.obj.target = true;
+        }
+      }
+    }
+
+    this.zones.forEach((zone: Zone, key: string) => {
+      if (zone.hosts !== undefined && zone.hosts !== null && zone.hosts.size > 0) {
+        // FIXME: getHosts
+        const hosts: Host[] = [];
+        zone.hosts.forEach((h: Host, hKey: string) => {
+
+          h.zone = null;
+          if (h.ports !== undefined && h.ports !== null) {
+            h.portList = [];
+            h.ports.forEach((p: Port, pKey: number) => {
+
+              p.host = null;
+              if (p.services !== undefined && p.services !== null) {
+                p.serviceList = [];
+
+                p.services.forEach((s: Service, sKey: string) => {
+                  s.port = null;
+
+                  p.serviceList.push(s);
+                });
+
+              }
+
+              h.portList.push(p);
+            });
+          }
+
+          hosts.push(h);
+        });
+
+        if (hosts.length > 0) {
+          const sd: any = { hosts: hosts, probe: { id: 1 } };
+          console.log(JSON.stringify(sd));
+          console.log('--------');
+          this.registStore.dispatch(new RegistStore.DiscoverySaveAllTarget(sd));
+        }
+
+      }
+    });
+  }
+
+  handleClick(event) {
+    // console.log(this.filesTree4);
+
+    this.checkTarget(this.selectedDiscoveryResult);
+
+    console.log(this.testObj);
+
+  }
+
+  checkTarget(treeList: any[]) {
+
+    if (treeList === undefined || treeList === null) {
+      return;
+    }
+
+    for (let i = 0; i < treeList.length; ++i) {
+      treeList[i].obj.target = true;
+
+      this.checkTarget(treeList[i].children);
+    }
+
+  }
+
+  convertTreeViewZone(zones: Map<string, Zone>) {
+
+    if (zones === undefined || zones === null) {
+      return;
+    }
+
+    // console.log('convertTreeViewZone');
+    const treeNodes: any[] = [];
+
+    zones.forEach((value: Zone, key: string, map) => {
+      if (this.isZone(value)) {
+        return;
+      }
+      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;
+  }
+
+}
+
+
+const testDiscovery: any[] = [
+  {
+    id: 0,
+    ip: '192.168.1.254',
+    mac: '64:e5:99:63:e7:80',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'UDP',
+        portNumber: 53,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: [
+          {
+            id: 0,
+            cryptoType: null,
+            serviceName: 'DNS',
+            discoveredDate: -62135596800000,
+            port: null,
+            target: false
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.99',
+    mac: '00:25:b3:fa:ca:9b',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'UDP',
+        portNumber: 161,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: [
+          {
+            id: 0,
+            cryptoType: null,
+            serviceName: 'SNMP_V2',
+            discoveredDate: -62135596800000,
+            port: null,
+            target: false
+          }
+        ]
+      },
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 7,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.206',
+    mac: '30:9c:23:15:a3:09',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: null
+  },
+  {
+    id: 0,
+    ip: '192.168.1.50',
+    mac: '6c:f0:49:7a:60:68',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 22,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: [
+          {
+            id: 0,
+            cryptoType: 'TCP',
+            serviceName: 'SSH',
+            discoveredDate: -62135596800000,
+            port: null,
+            target: false
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.15',
+    mac: '00:19:b9:35:8e:a6',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 22,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      },
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 25,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.100',
+    mac: '00:17:08:8d:cf:f7',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'UDP',
+        portNumber: 161,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: [
+          {
+            id: 0,
+            cryptoType: null,
+            serviceName: 'SNMP_V2',
+            discoveredDate: -62135596800000,
+            port: null,
+            target: false
+          }
+        ]
+      },
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 23,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      },
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 21,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.16',
+    mac: '00:19:b9:19:7e:c7',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 22,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.106',
+    mac: '44:8a:5b:f1:3a:7d',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'UDP',
+        portNumber: 161,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: [
+          {
+            id: 0,
+            cryptoType: null,
+            serviceName: 'SNMP_V2',
+            discoveredDate: -62135596800000,
+            port: null,
+            target: false
+          }
+        ]
+      },
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 21,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.101',
+    mac: '44:8a:5b:f1:f1:f3',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: null
+  },
+  {
+    id: 0,
+    ip: '192.168.1.102',
+    mac: '44:8a:5b:f1:f2:d3',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: null
+  },
+  {
+    id: 0,
+    ip: '192.168.1.205',
+    mac: '40:98:ad:7b:d0:43',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: null
+  },
+  {
+    id: 0,
+    ip: '192.168.1.103',
+    mac: '44:8a:5b:44:8c:e8',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 21,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.10',
+    mac: 'd0:50:99:97:5d:99',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: [
+      {
+        id: 0,
+        portType: 'TCP',
+        portNumber: 22,
+        discoveredDate: -62135596800000,
+        host: null,
+        services: null
+      }
+    ]
+  },
+  {
+    id: 0,
+    ip: '192.168.1.203',
+    mac: 'a8:e5:39:5b:c9:62',
+    os: null,
+    discoveredDate: -62135596800000,
+    target: false,
+    zone: null,
+    ports: null
+  }
+];
+

src/packages/discovery/discovery.module.ts

@@ -2,9 +2,6 @@ import { NgModule, Inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-
-// import { InputChipModule } from 'packages/commons/component/input-chip/input-chip.module';
-
 import { DiscoveryStoreModule } from './discovery-store.module';
 import { DiscoveryRPCModule } from './discovery-rpc.module';
 import { DiscoveryLoggerModule } from './discovery-logger.module';
@@ -16,7 +13,6 @@ import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 @NgModule({
   imports: [
     CommonModule,
-    // InputChipModule,
     FormsModule,
     PrimeNGModules,
     DiscoveryStoreModule,

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

@@ -1,6 +1,6 @@
 <div class="ui-g">
   <h1>Map</h1>
-  <p-dialog header="Discovery" [width]="800" [(visible)]="display">
+  <p-dialog header="Discovery" [width]="800"  [(visible)]="display" [dismissableMask]="true">
     <of-discovery-setting (close)="closeDialog()"></of-discovery-setting>
   </p-dialog>
   <div class="ui-g-12 ui-g-nopad">

src/packages/infra/infra.module.ts

@@ -8,6 +8,8 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { DiscoveryModule } from 'packages/discovery/discovery.module';
 import { SensorModule } from '../sensor/sensor.module';
 import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
+import { ProbeModule } from '../probe/probe.module';
+import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
 
 
 @NgModule({
@@ -18,7 +20,9 @@ import { KeyValueModule } from 'app/commons/component/key-value/key-value.module
     PrimeNGModules,
     DiscoveryModule,
     SensorModule,
-    KeyValueModule
+    KeyValueModule,
+    ProbeModule,
+    MetaCrawlerModule
   ],
   declarations: [
     COMPONENTS,

src/packages/probe/component/detail/detail.component.html

@@ -1,7 +1,7 @@
 <h1>Info</h1>
 
-<p-dialog header="Discovery" [width]="800" [(visible)]="display">
+<p-dialog header="Discovery" [width]="800"  [(visible)]="display" [dismissableMask]="true">
-  <of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
+  <of-discovery-setting [probe]="probe" (close)="onDiscoveryClose()"></of-discovery-setting>
 </p-dialog>
 <div class="ui-g ui-bottom-space-10">
   <p-panel [showHeader]="false" class="nopad">

src/packages/probe/component/detail/detail.component.ts

@@ -78,7 +78,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
     this.display = true;
   }
 
-  onDiscoverycloseDialog() {
+  onDiscoveryClose() {
     this.display = false;
   }