test

src/app/pages/home/home-page.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="showIntro" class="home-start">
-    <div class="start-button" (click)="startDiscovery($event)">
+    <div class="start-button" (click)="discoveryConfigService.setStarted(true)">
         <svg version="1.1" viewBox="0 0 200 210">
             <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
         c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />

src/app/pages/home/home-page.component.ts

@@ -7,6 +7,7 @@ import { ProbeService, requesterID } from '../../../commons/service/probe.servic
 import { Zone, Host, Port, Service, DiscoverHost } from '@overflow/model/discovery';
 import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
 import { DiscoveryConfigService } from '../../../commons/service/discovery-config.service';
+import { Observable } from 'rxjs';
 
 const vis = require('vis');
 
@@ -73,10 +74,13 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   startDiscovery() {
+    console.log('########################################################');
+    console.log(this.zone);
+    console.log(this.discoverHost);
+    console.log('########################################################');
     this.showIntro = false;
     this.changeDetector.detectChanges();
 
-
     this.nodeSet = new vis.DataSet([
       {
         id: '192.168.1.0/24', label: 'Zone', group: 'zone',
@@ -85,7 +89,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
       },
     ]);
 
-
     this.edgeSet = new vis.DataSet([]);
 
     const options = {

src/app/pages/pages.component.html

@@ -9,7 +9,7 @@
       </svg>
     </button>
   </div>
-  <div class="toolbar-button push-pull-button" style="width: 36px">
+  <div class="toolbar-button push-pull-button" style="width: 36px" *ngIf="discoveryConfigService.started | async">
     <button class="button-component" type="button">
       <svg aria-hidden="true" class="octicon icon spin" version="1.1" viewBox="0 0 15 15">
         <path d="M14.6,5.2l-0.7,0.3l-0.7,0.3c0.7,2.6-0.3,5.4-2.7,6.8c-2.3,1.3-5.1,1-7-0.7L4.4,12l0.1-1.5l-3.1-0.2l-0.9,3.2

src/app/pages/pages.component.ts

@@ -52,6 +52,8 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
   menuHoverActive: boolean;
 
+  started: boolean = false;
+
   @ViewChild('layoutContainer') layourContainerViewChild: ElementRef;
 
 
@@ -366,4 +368,8 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
     this.discoveryConfigService.setStarted(true);
   }
 
+  onStop() {
+    this.discoveryConfigService.setStarted(false);
+  }
+
 }

src/commons/component/nic-dropdown.component.html

@@ -1,12 +1,12 @@
-<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
+<of-p-dropdownPanel #panel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
   <p-header class="toolbar-button">
     <button _ngcontent-c1="" class="button-component" type="button">
       <!-- <svg _ngcontent-c1="" aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16" width="16px" height="16px">
         <path _ngcontent-c1="" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
       </svg> -->
       <div _ngcontent-c1="" class="text">
-        <div _ngcontent-c1="" class="description">192.168.1.0/24</div>
+        <div _ngcontent-c1="" class="description" *ngIf="selected">{{selected.address || ''}}</div>
-        <div _ngcontent-c1="" class="title">eth0</div>
+        <div _ngcontent-c1="" class="title" *ngIf="selected">{{selected.name || ''}}</div>
       </div>
       <svg _ngcontent-c1="" aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16" width="16px" height="16px">
         <path _ngcontent-c1="" d="M0 5l6 6 6-6z">
@@ -15,7 +15,7 @@
     </button>
   </p-header>
   <div id="nic-list-border">
-    <p-menu [model]="addresses"></p-menu>
+    <p-listbox [options]="nics" [(ngModel)]="selected" [style]="{'width':'100%'}" (ngModelChange)="nicSelected($event)"></p-listbox>
   </div>
   <!-- <div>Body Content</div>
 

src/commons/component/nic-dropdown.component.ts

@@ -1,14 +1,14 @@
-import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';
+import { Component, Input, OnInit, EventEmitter, Output, ViewChild } from '@angular/core';
 
 import { of } from 'rxjs';
 import { catchError, map, take } from 'rxjs/operators';
 
-
 import { ProbeService } from '../service/probe.service';
 import { Interface } from '@overflow/model/net/nic';
-import { MenuItem } from 'primeng/primeng';
+import { SelectItem } from 'primeng/primeng';
 import { Zone } from '@overflow/model/discovery';
 import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
+import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
 
 
 
@@ -20,8 +20,10 @@ import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
 export class NicDropdownComponent implements OnInit {
   @Input() blockTarget: any;
   @Output() select = new EventEmitter<Zone>();
+  @ViewChild('panel') panel: DropdownPanelComponent;
 
-  addresses: MenuItem[];
+  nics: SelectItem[] = [];
+  selected;
 
   constructor(
     private probeService: ProbeService,
@@ -32,18 +34,26 @@ export class NicDropdownComponent implements OnInit {
   ngOnInit(): void {
     this.probeService.call<Interface>('MachineService.Interfaces').pipe(
       map((ifaces: Interface[]) => {
-        console.log(ifaces);
-        this.addresses = [];
         ifaces.forEach(iface => {
           iface.addresses.forEach(address => {
-            this.addresses.push({
+            if (address.metaIPType.key != toMetaIPType(MetaIPTypeEnum.V4).key) {
-              label: address.address,
+              return;
-              command: () => {
+            }
-                this.makeZone(iface, address.address);
+            this.nics.push({
-              }
+              label: iface.iface + ' (' + address.address + ')',
+              value: {
+                name: iface.iface,
+                metaIPType: address.metaIPType,
+                mac: iface.mac,
+                address: address.address,
+              },
+              disabled: address.metaIPType.key != toMetaIPType(MetaIPTypeEnum.V4).key ? true : false,
             });
           });
         });
+        if (this.nics.length > 0) {
+          this.nicSelected(this.nics[0].value);
+        }
       }),
       catchError(error => {
         console.log(error);
@@ -51,17 +61,22 @@ export class NicDropdownComponent implements OnInit {
       }),
       take(1),
     ).subscribe();
+
   }
 
-  makeZone(iface: Interface, address: string) {
+  nicSelected(nic: SelectItem) {
+    this.selected = nic;
+
     var zone: Zone = {
-      network: address,
+      network: this.selected.address,
-      iface: iface.iface,
+      iface: this.selected.name,
       metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      address: '192.168.1.103', //
+      address: this.selected.address.split('/')[0],
-      mac: iface.mac,
+      mac: this.selected.mac,
     }
     this.select.emit(zone);
+
+    this.panel.hide();
   }
 
 }

src/commons/component/scanner-setting-dropdown.component.ts

@@ -1,7 +1,8 @@
 import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
 import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
-import { DiscoverHost } from '@overflow/model/discovery';
+import { DiscoverHost, Zone } from '@overflow/model/discovery';
 import { toMetaIPType, MetaIPTypeEnum, MetaPortTypeEnum } from '@overflow/model/meta';
+import { DiscoveryConfigService } from '../service/discovery-config.service';
 
 @Component({
   selector: 'app-scanner-setting-dropdown',
@@ -30,17 +31,26 @@ export class ScannerSettingDropdownComponent implements OnInit {
   portErrMsg: string;
 
   constructor(
+    private discoveryConfigService: DiscoveryConfigService
   ) {
   }
 
   ngOnInit(): void {
-    this.setDefault();
+    this.discoveryConfigService.zone.subscribe(res => {
+      var zone = res as Zone;
+      this.setDefault(zone);
+    });
+
   }
 
-  setDefault(): void {
+  setDefault(zone: Zone): void {
+    if (zone === null) {
+      return;
+    }
+
     this.ipType = MetaIPTypeEnum.V4;
 
-    this.firstIP = '192.168.1.1'
+    this.firstIP = zone.address;
     this.lastIP = '192.168.1.254'
     this.includePortType = [MetaPortTypeEnum.TCP, MetaPortTypeEnum.UDP]
     this.firstPort = '1'

src/commons/service/discovery-config.service.ts

@@ -7,6 +7,7 @@ import { Observable, BehaviorSubject } from "rxjs";
 })
 export class DiscoveryConfigService {
 
+
   private discoverHostSubject = new BehaviorSubject<DiscoverHost>(null);
   private zoneSubject = new BehaviorSubject<Zone>(null);
   private startSubject = new BehaviorSubject<boolean>(false);