test

2018-09-09 19:20:21 +09:00 · 2018-09-09 19:20:21 +09:00 · 65a4980c3f
commit 65a4980c3f
parent 862977213b
26 changed files with 405 additions and 71 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -457,11 +457,34 @@
        "webpack-sources": "1.1.0"
      }
    },
+    "@overflow/core-js": {
+      "version": "0.0.10",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/core-js/-/core-js-0.0.10.tgz",
+      "integrity": "sha1-FcNKqZqtU+8Bz7GwUOJZI5IHGBk=",
+      "dev": true,
+      "requires": {
+        "reflect-metadata": "0.1.12"
+      }
+    },
    "@overflow/rpc-js": {
-      "version": "0.0.5",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/rpc-js/-/rpc-js-0.0.5.tgz",
-      "integrity": "sha1-m0BtkKewNMvWeZhcH3oRfReomD4=",
-      "dev": true
+      "version": "0.0.7",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/rpc-js/-/rpc-js-0.0.7.tgz",
+      "integrity": "sha1-P4ADWWU9uSMkl2+pL8rjW3AFPMs=",
+      "dev": true,
+      "requires": {
+        "@overflow/core-js": "0.0.7"
+      },
+      "dependencies": {
+        "@overflow/core-js": {
+          "version": "0.0.7",
+          "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/core-js/-/core-js-0.0.7.tgz",
+          "integrity": "sha1-B0Y1V7d9lnoBHS9/am96tbLfklI=",
+          "dev": true,
+          "requires": {
+            "reflect-metadata": "0.1.12"
+          }
+        }
+      }
    },
    "@schematics/angular": {
      "version": "0.7.3",
@ -3614,6 +3637,12 @@
        "minimalistic-crypto-utils": "1.0.1"
      }
    },
+    "emitter-component": {
+      "version": "1.1.1",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/emitter-component/-/emitter-component-1.1.1.tgz",
+      "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY=",
+      "dev": true
+    },
    "emojis-list": {
      "version": "2.1.0",
      "resolved": "https://nexus.loafle.net/repository/npm-all/emojis-list/-/emojis-list-2.1.0.tgz",
@ -5456,6 +5485,12 @@
      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
      "dev": true
    },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=",
+      "dev": true
+    },
    "handle-thing": {
      "version": "1.2.5",
      "resolved": "https://nexus.loafle.net/repository/npm-all/handle-thing/-/handle-thing-1.2.5.tgz",
@ -7127,6 +7162,12 @@
      "integrity": "sha512-Nv+Kr33T0mEjxR500q+I6IWisOQ0lK1GGOncV0kWE6n4KFmpcu7RUX5/2B0EUtX51Cb0HjZ9VJsSY3u4cBa0kw==",
      "dev": true
    },
+    "keycharm": {
+      "version": "0.2.0",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/keycharm/-/keycharm-0.2.0.tgz",
+      "integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk=",
+      "dev": true
+    },
    "killable": {
      "version": "1.0.0",
      "resolved": "https://nexus.loafle.net/repository/npm-all/killable/-/killable-1.0.0.tgz",
@ -9168,6 +9209,15 @@
      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
      "dev": true
    },
+    "propagating-hammerjs": {
+      "version": "1.4.6",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz",
+      "integrity": "sha1-/tAOmwB2f/1C0U9bUxvEk+tnLjc=",
+      "dev": true,
+      "requires": {
+        "hammerjs": "2.0.8"
+      }
+    },
    "protractor": {
      "version": "5.3.2",
      "resolved": "https://nexus.loafle.net/repository/npm-all/protractor/-/protractor-5.3.2.tgz",
@ -11945,6 +11995,19 @@
        "extsprintf": "1.3.0"
      }
    },
+    "vis": {
+      "version": "4.21.0",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/vis/-/vis-4.21.0.tgz",
+      "integrity": "sha1-3XFji/9/ZJXQC8n0DCU1JhM97Ws=",
+      "dev": true,
+      "requires": {
+        "emitter-component": "1.1.1",
+        "hammerjs": "2.0.8",
+        "keycharm": "0.2.0",
+        "moment": "2.22.2",
+        "propagating-hammerjs": "1.4.6"
+      }
+    },
    "vm-browserify": {
      "version": "0.0.4",
      "resolved": "https://nexus.loafle.net/repository/npm-all/vm-browserify/-/vm-browserify-0.0.4.tgz",
--- a/package.json
+++ b/package.json
@ -85,4 +85,4 @@
    "webpack-node-externals": "^1.7.2",
    "zone.js": "^0.8.26"
  }
-}
+}
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@ -18,6 +18,13 @@

 </div>

+<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="bottom">
+    <div *ngIf="selectedNode">
+        <app-node-detail [node]="selectedNode"></app-node-detail>
+    </div>
+</p-sidebar>
+
+
 <!-- <div class="ui-fluid">
    <div class="ui-g">
        <div class="ui-g-12">
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@ -1,15 +1,13 @@
+
 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';

-import { Observable, Subscription, of } from 'rxjs';
-import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';

 import { ProbeService, requesterID } from '../../../commons/service/probe.service';

-import { Interface } from '@overflow/model/net/nic';
-import { Zone, DiscoverHost, Host, Port, Service } from '@overflow/model/discovery';
+import { Zone, Host, Port, Service } from '@overflow/model/discovery';
 import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
-import { Address } from '../../../commons/component/nic-dropdown.component';
 import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
+import { DiscoveryConfigService } from '../../../commons/service/discovery-config.service';

 const vis = require('vis');

@ -26,11 +24,12 @@ export class HomePageComponent implements OnInit, OnDestroy {
  }

  blockedPanel = false;
+  displaySidebar = false;

  blockedDocument = false;
-  addresses: Address[];

  showIntro = true;
+  selectedNode = null;

  private visNetwork: any;
  private nodeSet: any;
@ -39,11 +38,13 @@ export class HomePageComponent implements OnInit, OnDestroy {
  constructor(
    private changeDetector: ChangeDetectorRef,
    private probeService: ProbeService,
+    private discoveryConfigService: DiscoveryConfigService,
  ) {
  }

  ngOnInit() {
-    this.probeService.subscribeNotification(this);
+    // this.probeService.subscribeNotification(this);
+    // this.discoverHost("");
  }

  ngOnDestroy(): void {
@ -57,13 +58,51 @@ export class HomePageComponent implements OnInit, OnDestroy {
    }, 3000);
  }

-  discoverHost(dfd: string) {
+  discoverHost() {
    this.showIntro = false;
    this.changeDetector.detectChanges();

+
    this.nodeSet = new vis.DataSet([
-      { id: '192.168.1.0/24', label: 'Zone', group: 'zone' },
+      {
+        id: '192.168.1.0/24', label: 'Zone', group: 'zone',
+        shape: "image",
+        image: "../../assets/Windows_logo.png",
+      },
    ]);
+    var testMap = new Map<string, string>();
+    testMap.set('KEY1', 'VALUE1');
+    testMap.set('KEY2', 'VALUE2');
+    var tempHost: Host = {
+      meta: testMap,
+      name: 'insanity'
+    };
+
+    this.nodeSet.update([
+      {
+        id: "", label: 'host', group: 'host', host: tempHost, shape: "image",
+        image: "http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Devices-computer-icon.png",
+      },
+    ]);
+
+    var tempService: Service = {
+      key: 'HTTP',
+      port: {
+        portNumber: 111,
+        metaPortType: {
+          name: 'TCP'
+        }
+      }
+    }
+    this.nodeSet.update([
+      {
+        id: 'http1', label: 'http', group: 'service',
+        shape: "image",
+        image: "../../assets/Windows_logo.png",
+        service: tempService,
+      },
+    ]);
+
    this.edgeSet = new vis.DataSet([]);

    const options = {
@ -79,36 +118,22 @@ export class HomePageComponent implements OnInit, OnDestroy {
    this.visNetwork = new vis.Network(this.discoveryTargetRef.nativeElement, { nodes: this.nodeSet, edges: this.edgeSet }, options);
    this.visNetwork.on('click', (params) => {
      const ids = params.nodes;
-      const clickedNodes = this.nodeSet.get(ids);
-      console.log('clicked nodes:', clickedNodes);
+      const clickedNode = this.nodeSet.get(ids);
+      if (clickedNode.length > 0) {
+        this.displaySidebar = true;
+        this.selectedNode = clickedNode[0];
+      } else {
+        this.displaySidebar = false;
+        this.selectedNode = null;
+      }
    });

-
-    const zone: Zone = {
-      network: '192.168.1.0/24',
-      iface: 'enp3s0',
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      address: '192.168.1.101',
-      mac: '44:8a:5b:f1:f1:f3',
-    };
-
-    const discoverHost: DiscoverHost = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      firstScanRange: '192.168.1.1',
-      lastScanRange: '192.168.1.254',
-      discoveryConfig: {
-      },
-      discoverPort: {
-        firstScanRange: 1,
-        lastScanRange: 65535,
-        includeTCP: true,
-        includeUDP: true,
-        discoverService: {
-        }
-      }
-    };
-
-    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
+    this.probeService.send(
+      'DiscoveryService.DiscoverHost',
+      requesterID,
+      this.discoveryConfigService.getZone(),
+      this.discoveryConfigService.getDiscoverHost()
+    );
  }

  /**
--- a/src/app/pages/home/home-page.module.ts
+++ b/src/app/pages/home/home-page.module.ts
@ -5,15 +5,21 @@ import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';

 import { HomePageComponent } from './home-page.component';
 import { HomePageRoutingModule } from './home-page-routing.module';
+import { CommonsModule } from '../../../commons/commons.module';
+import { DiscoveryConfigService } from '../../../commons/service/discovery-config.service';

@NgModule({
  imports: [
    CommonModule,
    CommonsUIModule,
    HomePageRoutingModule,
+    CommonsModule
  ],
  entryComponents: [
  ],
-  declarations: [HomePageComponent]
+  declarations: [HomePageComponent],
+  providers: [
+    DiscoveryConfigService
+  ]
 })
 export class HomePageModule { }
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@ -1,8 +1,8 @@
 <app-toolbar>
-  <app-nic-dropdown [blockTarget]="pagesContent"></app-nic-dropdown>
-  <app-scanner-setting-dropdown [blockTarget]="pagesContent"></app-scanner-setting-dropdown>
+  <app-nic-dropdown [blockTarget]="pagesContent" (select)="onNICSelect($event)"></app-nic-dropdown>
+  <app-scanner-setting-dropdown [blockTarget]="pagesContent" (ready)="onConfigReady($event)"></app-scanner-setting-dropdown>
  <div class="toolbar-button push-pull-button" style="width: 32px">
-    <button class="button-component" type="button">
+    <button class="button-component" type="button" (click)="onStart()">
      <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 15 17">
        <path d="M0.2,15.6c0,0.2,0.1,0.4,0.2,0.6c0.4,0.6,1.2,0.8,1.8,0.5l12.2-7.1c0.2-0.1,0.3-0.3,0.4-0.4
          		c0.4-0.6,0.1-1.4-0.5-1.8L2.1,0.3C1.9,0.2,1.7,0.2,1.5,0.2c-0.7,0-1.3,0.6-1.3,1.3V15.6z"></path>
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@ -1,7 +1,10 @@
 import {
  Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone
 } from '@angular/core';
-import { Router, NavigationStart } from '@angular/router';
+import { Router } from '@angular/router';
+import { DiscoverHost, Zone } from '@overflow/model/discovery';
+import { DiscoveryConfigService } from '../../commons/service/discovery-config.service';
+import { ProbeService, requesterID } from '../../commons/service/probe.service';

 enum MenuOrientation {
  STATIC,
@ -16,14 +19,11 @@ enum MenuOrientation {
  styleUrls: ['./pages.component.scss'],
 })
 export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
-  layoutCompact = true;

  layoutMode: MenuOrientation = MenuOrientation.STATIC;

  darkMenu = false;

-  profileMode = 'inline';
-
  rotateMenuButton: boolean;

  topbarMenuActive: boolean;
@ -59,7 +59,13 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {

  rippleMouseDownListener: any;

-  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) {
+  constructor(
+    public renderer: Renderer,
+    public zone: NgZone,
+    private router: Router,
+    private discoveryConfigService: DiscoveryConfigService,
+    private probeService: ProbeService
+  ) {
  }

  ngOnInit() {
@ -348,4 +354,19 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
    this.router.navigate([command]);
  }

+  onNICSelect(zone: Zone) {
+    this.discoveryConfigService.setZone(zone);
+  }
+
+  onConfigReady(discoverHost: DiscoverHost) {
+    this.discoveryConfigService.setDiscoverHost(discoverHost);
+  }
+
+  onStart() {
+    this.probeService.send('DiscoveryService.DiscoverHost',
+      requesterID,
+      this.discoveryConfigService.getZone(),
+      this.discoveryConfigService.getDiscoverHost());
+  }
+
 }
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@ -7,6 +7,8 @@ import { CommonsModule } from '../../commons/commons.module';

 import { PagesComponent } from './pages.component';
 import { PagesRoutingModule } from './pages-routing.module';
+import { DiscoveryConfigService } from '../../commons/service/discovery-config.service';
+import { ProbeService } from '../../commons/service/probe.service';

@NgModule({
  imports: [
@ -21,6 +23,7 @@ import { PagesRoutingModule } from './pages-routing.module';
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    DiscoveryConfigService,
  ]
 })
 export class PagesModule { }
--- a/src/assets/Windows_logo.png
+++ b/src/assets/Windows_logo.png
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@ -0,0 +1,18 @@
+<ul class="key-value">
+  <li *ngIf="host.address">
+    IP Address
+    <span class="meta-value">{{host.address}}</span>
+  </li>
+  <li *ngIf="host.name">
+    Name
+    <span class="meta-value">{{host.name}}</span>
+  </li>
+  <li *ngIf="host.mac">
+    Mac Address
+    <span class="meta-value">{{host.mac}}</span>
+  </li>
+  <li *ngIf="host.portList">
+    Opened Ports
+    <span class="meta-value">{{host.portList.length}}</span>
+  </li>
+</ul>
--- a/src/commons/component/host-detail.component.scss
+++ b/src/commons/component/host-detail.component.scss
--- a/src/commons/component/host-detail.component.ts
+++ b/src/commons/component/host-detail.component.ts
@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { Host } from '@overflow/model/discovery';
+
+
+@Component({
+  selector: 'app-host-detail',
+  templateUrl: './host-detail.component.html',
+  styleUrls: ['./host-detail.component.scss'],
+})
+export class HostDetailComponent {
+
+  @Input() host: Host;
+
+  constructor(
+  ) {
+
+  }
+
+
+}
--- a/src/commons/component/index.ts
+++ b/src/commons/component/index.ts
@ -1,7 +1,15 @@
 import { NicDropdownComponent } from './nic-dropdown.component';
 import { ScannerSettingDropdownComponent } from './scanner-setting-dropdown.component';
+import { NodeDetailComponent } from './node-detail.component';
+import { ZoneDetailComponent } from './zone-detail.component';
+import { HostDetailComponent } from './host-detail.component';
+import { ServiceDetailComponent } from './service-detail.component';

 export const COMPONENTS = [
  NicDropdownComponent,
  ScannerSettingDropdownComponent,
+  NodeDetailComponent,
+  ZoneDetailComponent,
+  HostDetailComponent,
+  ServiceDetailComponent
 ];
--- a/src/commons/component/nic-dropdown.component.ts
+++ b/src/commons/component/nic-dropdown.component.ts
@ -1,17 +1,16 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';

-import { Observable, Subscription, of } from 'rxjs';
-import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
+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 { Zone } from '@overflow/model/discovery';
+import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';


-export interface Address {
-  label: string;
-  value: string;
-}

@Component({
  selector: 'app-nic-dropdown',
@ -20,9 +19,9 @@ export interface Address {
 })
 export class NicDropdownComponent implements OnInit {
  @Input() blockTarget: any;
+  @Output() select = new EventEmitter<Zone>();

-  addresses: Address[];
-  selectedAddress: Address;
+  addresses: MenuItem[];

  constructor(
    private probeService: ProbeService,
@ -39,7 +38,9 @@ export class NicDropdownComponent implements OnInit {
          iface.addresses.forEach(address => {
            this.addresses.push({
              label: address.address,
-              value: address.address,
+              command: () => {
+                this.makeZone(iface, address.address);
+              }
            });
          });
        });
@ -51,4 +52,16 @@ export class NicDropdownComponent implements OnInit {
      take(1),
    ).subscribe();
  }
+
+  makeZone(iface: Interface, address: string) {
+    var zone: Zone = {
+      network: address,
+      iface: iface.iface,
+      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+      address: '192.168.1.103', //
+      mac: iface.mac,
+    }
+    this.select.emit(zone);
+  }
+
 }
--- a/src/commons/component/node-detail.component.html
+++ b/src/commons/component/node-detail.component.html
@ -0,0 +1,22 @@
+<div>
+  <img src="{{node.image}}" width="100" height="100" />
+</div>
+
+<ng-container [ngSwitch]="node.group">
+
+  <ng-container *ngSwitchCase="'zone'">
+    <app-zone-detail [zone]=""></app-zone-detail>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'host'">
+    <app-host-detail [host]="node.host"></app-host-detail>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'service'">
+    <app-service-detail [service]="node.service"></app-service-detail>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+  </ng-container>
+
+</ng-container>
--- a/src/commons/component/node-detail.component.scss
+++ b/src/commons/component/node-detail.component.scss
--- a/src/commons/component/node-detail.component.ts
+++ b/src/commons/component/node-detail.component.ts
@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+
+@Component({
+  selector: 'app-node-detail',
+  templateUrl: './node-detail.component.html',
+  styleUrls: ['./node-detail.component.scss'],
+})
+export class NodeDetailComponent {
+
+  @Input() node;
+
+  constructor(
+  ) {
+
+  }
+
+}
--- a/src/commons/component/scanner-setting-dropdown.component.ts
+++ b/src/commons/component/scanner-setting-dropdown.component.ts
@ -1,5 +1,7 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+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 { toMetaIPType, MetaIPTypeEnum, MetaPortTypeEnum } from '@overflow/model/meta';

@Component({
  selector: 'app-scanner-setting-dropdown',
@ -10,16 +12,17 @@ import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
 export class ScannerSettingDropdownComponent implements OnInit {

  @Input() blockTarget: any;
+  @Output() ready = new EventEmitter<DiscoverHost>();
  @ViewChild('panel') panel: DropdownPanelComponent;

  valid: boolean;
  ipSummary: string;
  portSummary: string;

-  ipType: string;
+  ipType: MetaIPTypeEnum;
  firstIP: string;
  lastIP: string;
-  includePortType: string[];
+  includePortType: MetaPortTypeEnum[];
  firstPort: string;
  lastPort: string;

@ -35,11 +38,11 @@ export class ScannerSettingDropdownComponent implements OnInit {
  }

  setDefault(): void {
-    this.ipType = "V4";
+    this.ipType = MetaIPTypeEnum.V4;

    this.firstIP = '192.168.1.1'
    this.lastIP = '192.168.1.254'
-    this.includePortType = ['TCP', 'UDP']
+    this.includePortType = [MetaPortTypeEnum.TCP, MetaPortTypeEnum.UDP]
    this.firstPort = '1'
    this.lastPort = '65535'
    this.ipErrMsg = '';
@ -105,13 +108,13 @@ export class ScannerSettingDropdownComponent implements OnInit {
  }

  validateTCP(checked: boolean) {
-    if (!checked && this.includePortType.indexOf('UDP') === -1) {
-      this.includePortType = ['TCP'];
+    if (!checked && this.includePortType.indexOf(MetaPortTypeEnum.UDP) === -1) {
+      this.includePortType = [MetaPortTypeEnum.TCP];
    }
  }
  validateUDP(checked: boolean) {
-    if (!checked && this.includePortType.indexOf('TCP') === -1) {
-      this.includePortType = ['UDP'];
+    if (!checked && this.includePortType.indexOf(MetaPortTypeEnum.TCP) === -1) {
+      this.includePortType = [MetaPortTypeEnum.UDP];
    }
  }

@ -125,5 +128,22 @@ export class ScannerSettingDropdownComponent implements OnInit {
    this.portSummary = this.includePortType.join(',');
    this.portSummary += ' (' + this.firstPort + ' - ' + this.lastPort + ')';
    this.panel.hide();
+
+    this.configDiscoverHost();
+  }
+
+  configDiscoverHost(): void {
+    const discoverHost: DiscoverHost = {
+      metaIPType: toMetaIPType(this.ipType),
+      firstScanRange: this.firstIP,
+      lastScanRange: this.lastIP,
+      discoverPort: {
+        firstScanRange: Number(this.firstPort),
+        lastScanRange: Number(this.lastPort),
+        includeTCP: this.includePortType.indexOf(MetaPortTypeEnum.TCP) !== -1 ? true : false,
+        includeUDP: this.includePortType.indexOf(MetaPortTypeEnum.UDP) !== -1 ? true : false,
+      }
+    }
+    this.ready.emit(discoverHost);
  }
 }
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@ -0,0 +1,22 @@
+<ul class="key-value">
+  <li *ngIf="service.key">
+    Name
+    <span class="meta-value">{{service.key}}</span>
+  </li>
+  <li *ngIf="service.port">
+    Port
+    <span class="meta-value">{{service.port.metaPortType.name}} {{service.port.portNumber}}</span>
+  </li>
+  <li *ngIf="service.description">
+    Description
+    <span class="meta-value">{{service.description}}</span>
+  </li>
+  <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
+    Crypto Type
+    <span class="meta-value">{{service.metaCryptoType.name}}</span>
+  </li>
+  <!-- <li *ngFor="let item of service.meta.entries()">
+    {{item[0]}}
+    <span class="meta-value">{{item[1]}}</span>
+  </li> -->
+</ul>
--- a/src/commons/component/service-detail.component.scss
+++ b/src/commons/component/service-detail.component.scss
--- a/src/commons/component/service-detail.component.ts
+++ b/src/commons/component/service-detail.component.ts
@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Service } from '@overflow/model/discovery';
+
+
+@Component({
+  selector: 'app-service-detail',
+  templateUrl: './service-detail.component.html',
+  styleUrls: ['./service-detail.component.scss'],
+})
+export class ServiceDetailComponent {
+
+  @Input() service: Service;
+
+  constructor(
+  ) {
+
+  }
+
+}
--- a/src/commons/component/zone-detail.component.html
+++ b/src/commons/component/zone-detail.component.html
@ -0,0 +1 @@
+zone component
--- a/src/commons/component/zone-detail.component.scss
+++ b/src/commons/component/zone-detail.component.scss
--- a/src/commons/component/zone-detail.component.ts
+++ b/src/commons/component/zone-detail.component.ts
@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Zone } from '@overflow/model/discovery';
+
+
+@Component({
+  selector: 'app-zone-detail',
+  templateUrl: './zone-detail.component.html',
+  styleUrls: ['./zone-detail.component.scss'],
+})
+export class ZoneDetailComponent {
+
+  @Input() zone: Zone;
+
+  constructor(
+  ) {
+
+  }
+
+}
--- a/src/commons/service/discovery-config.service.ts
+++ b/src/commons/service/discovery-config.service.ts
@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import { DiscoverHost, Zone } from "@overflow/model/discovery";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DiscoveryConfigService {
+
+  discoverHost: DiscoverHost;
+  zone: Zone;
+
+  public setZone(zone: Zone): void {
+    this.zone = zone;
+  }
+
+  public getZone(): Zone {
+    return this.zone;
+  }
+
+  public setDiscoverHost(discoverHost: DiscoverHost): void {
+    this.discoverHost = discoverHost;
+  }
+
+  public getDiscoverHost(): DiscoverHost {
+    return this.discoverHost;
+  }
+}
--- a/src/commons/service/index.ts
+++ b/src/commons/service/index.ts
@ -2,10 +2,12 @@ import { DatabaseService } from './database.service';
 import { ElectronProxyService } from './electron-proxy.service';
 import { LaunchService } from './launch.service';
 import { ProbeService } from './probe.service';
+import { DiscoveryConfigService } from './discovery-config.service';

 export const SERVICES = [
  DatabaseService,
  ElectronProxyService,
  LaunchService,
-  ProbeService
+  ProbeService,
+  DiscoveryConfigService
 ];