test

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",
+      "version": "0.0.7",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/rpc-js/-/rpc-js-0.0.5.tgz",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/@overflow/rpc-js/-/rpc-js-0.0.7.tgz",
-      "integrity": "sha1-m0BtkKewNMvWeZhcH3oRfReomD4=",
+      "integrity": "sha1-P4ADWWU9uSMkl2+pL8rjW3AFPMs=",
-      "dev": true
+      "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",

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">

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, Host, Port, Service } from '@overflow/model/discovery';
-import { Zone, DiscoverHost, 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);
+      const clickedNode = this.nodeSet.get(ids);
-      console.log('clicked nodes:', clickedNodes);
+      if (clickedNode.length > 0) {
+        this.displaySidebar = true;
+        this.selectedNode = clickedNode[0];
+      } else {
+        this.displaySidebar = false;
+        this.selectedNode = null;
+      }
     });
 
-
+    this.probeService.send(
-    const zone: Zone = {
+      'DiscoveryService.DiscoverHost',
-      network: '192.168.1.0/24',
+      requesterID,
-      iface: 'enp3s0',
+      this.discoveryConfigService.getZone(),
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+      this.discoveryConfigService.getDiscoverHost()
-      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);
   }
 
   /**

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 { }

src/app/pages/pages.component.html

@@ -1,8 +1,8 @@
 <app-toolbar>
-  <app-nic-dropdown [blockTarget]="pagesContent"></app-nic-dropdown>
+  <app-nic-dropdown [blockTarget]="pagesContent" (select)="onNICSelect($event)"></app-nic-dropdown>
-  <app-scanner-setting-dropdown [blockTarget]="pagesContent"></app-scanner-setting-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>

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

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 { }

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>

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(
+  ) {
+
+  }
+
+
+}

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

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 { of } from 'rxjs';
-import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
+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[];
+  addresses: MenuItem[];
-  selectedAddress: Address;
 
   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);
+  }
+
 }

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>

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(
+  ) {
+
+  }
+
+}

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) {
+    if (!checked && this.includePortType.indexOf(MetaPortTypeEnum.UDP) === -1) {
-      this.includePortType = ['TCP'];
+      this.includePortType = [MetaPortTypeEnum.TCP];
     }
   }
   validateUDP(checked: boolean) {
-    if (!checked && this.includePortType.indexOf('TCP') === -1) {
+    if (!checked && this.includePortType.indexOf(MetaPortTypeEnum.TCP) === -1) {
-      this.includePortType = ['UDP'];
+      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);
   }
 }

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>

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(
+  ) {
+
+  }
+
+}

src/commons/component/zone-detail.component.html

@@ -0,0 +1 @@
+zone component

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(
+  ) {
+
+  }
+
+}

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;
+  }
+}

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