diff --git a/src/packages/discovery/component/setting/setting.component.ts b/src/packages/discovery/component/setting/setting.component.ts
index 49fd321..7fc4ad4 100644
--- a/src/packages/discovery/component/setting/setting.component.ts
+++ b/src/packages/discovery/component/setting/setting.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterContentInit } from '@angular/core';
+import { Component, OnInit, AfterContentInit, Host } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
@@ -9,9 +9,10 @@ import {
 } from '../../model';
 import * as CIDR from 'ip-cidr';
 import * as DiscoveredStore from '../../store/setting';
-import * as DiscoverStore from '../../store/discover';
+// import * as DiscoverStore from '../../store/discover';
 
 import { SettingSelector, DiscoverSelector } from '../../store';
+import * as DiscoverStore from '../../store/discover';
 
 @Component({
   selector: 'of-setting',
@@ -20,8 +21,8 @@ import { SettingSelector, DiscoverSelector } from '../../store';
 })
 export class SettingComponent implements OnInit, AfterContentInit {
 
-  settingSucceed$ = this.discoverdstore.pipe(select(SettingSelector.select('isStart')));
-  discoveryResult$ = this.discoverstore.pipe(select(DiscoverSelector.select('getDiscoveryResult')));
+  settingSucceed$: any;
+  discoveryResult$: any;
 
   started = false;
 
@@ -42,7 +43,7 @@ export class SettingComponent implements OnInit, AfterContentInit {
     { name: 'Nginx' },
   ];
 
-  hosts = nodes;
+  hosts = [];
 
   checkedSet = new Set();
 
@@ -50,6 +51,8 @@ export class SettingComponent implements OnInit, AfterContentInit {
     private discoverdstore: Store<DiscoveredStore.State>,
     private discoverstore: Store<DiscoverStore.State>,
   ) {
+    this.settingSucceed$ = discoverdstore.pipe(select(SettingSelector.select('isStart')));
+    this.discoveryResult$ = this.discoverstore.pipe(select(DiscoverSelector.select('zones')));
   }
 
   ngOnInit() {
@@ -65,15 +68,58 @@ export class SettingComponent implements OnInit, AfterContentInit {
     );
 
     this.discoveryResult$.subscribe(
-      (zone: Zone) => {
-        this.convertTreeView(zone);
+      (zones: Map<string, Zone>) => {
+        console.log('ZoneZoneZoneZoneZoneZoneZone');
+        // console.log(JSON.stringify(zones));
+        this.convertTreeView2(zones);
       },
       (error: RPCClientError) => {
         console.log(error.response.message);
       }
     );
 
+  }
 
+  isZone(zone: Zone): boolean {
+
+    for (let i = 0 ; i < this.hosts.length; ++i) {
+      if (zone.iface === this.hosts[i].iface) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  convertTreeView2(zones: Map<string, Zone>) {
+
+    if (zones === undefined || zones === null) {
+      return;
+    }
+
+    console.log('convertTreeView2');
+
+    const treeNodes: any[] = [];
+
+    zones.forEach((value: Zone, key: string, map) => {
+
+      if (this.isZone(value)) {
+        return;
+      }
+
+      const jZone: any = {
+        title: 'Zone - ' + value.iface,
+        className : 'cn' + value.ip
+      };
+
+      jZone.obj = value;
+
+      jZone.children = this.convertViewHost(value.hosts);
+
+      treeNodes.push(jZone);
+    });
+
+    this.hosts = treeNodes;
   }
 
   ngAfterContentInit() {
@@ -163,14 +209,19 @@ export class SettingComponent implements OnInit, AfterContentInit {
       return;
     }
 
-    const treeNodes = this.convertViewHost(zone.hosts);
+    // const treeNodes = this.convertViewHost(zone.hosts);
 
-    console.log(treeNodes);
+    console.log(JSON.stringify(zone));
   }
 
   convertViewHost(hosts): any[] {
 
-    const treeNodes: any[] = [];
+    if (hosts === undefined || hosts === null) {
+      return null;
+    }
+
+
+    const hostNodes: any[] = [];
 
     hosts.forEach((host, hostKey) => {
 
@@ -182,17 +233,17 @@ export class SettingComponent implements OnInit, AfterContentInit {
 
       jHost.children = this.convertViewPort(host.ports);
 
-      treeNodes.push(jHost);
+      hostNodes.push(jHost);
 
     });
 
-    return treeNodes;
+    return hostNodes;
 
   }
 
   convertViewPort(ports): any[] {
 
-    if (ports === undefined && ports.size <= 0) {
+    if (ports === undefined || ports === null) {
       return null;
     }
 
diff --git a/src/packages/discovery/store/discover/discover.reducer.ts b/src/packages/discovery/store/discover/discover.reducer.ts
index 6c4d839..44c4bbc 100644
--- a/src/packages/discovery/store/discover/discover.reducer.ts
+++ b/src/packages/discovery/store/discover/discover.reducer.ts
@@ -15,6 +15,8 @@ import {
   Service,
 } from '../../model';
 
+// import * as _ 'lodash';
+
 export function reducer(state = initialState, action: Actions): State {
   switch (action.type) {
     case ActionType.DiscoveredZone: {
@@ -23,20 +25,51 @@ export function reducer(state = initialState, action: Actions): State {
 
       zones.set(zone.network, zone);
 
-      return state;
+      const newZones: Map<string, Zone> = new Map();
+
+      zones.forEach(function(value, key) {
+        newZones.set(key, value);
+      });
+
+      return {
+        ...state,
+        zones : newZones,
+      };
     }
 
     case ActionType.DiscoveredHost: {
       const host: Host = <Host>action.payload;
-      const zone = state.zones.get(host.zone.network);
+      let zone = null;
+
+      let zones: Map<string, Zone> = state.zones;
+
+      if (zones === undefined || zones === null) {
+        zones = new Map();
+        zone = host.zone;
+        // zones.set(zone.network, zone);
+      } else {
+        zone = zones.get(host.zone.network);
+      }
+
       if (undefined === zone) {
         console.error(`Discovery.discoveredHost: Zone[${host.zone.network}] is not exist`);
       }
-      if (null === zone.hosts) {
+      if (null === zone.hosts || undefined === zone.hosts) {
         zone.hosts = new Map();
       }
       zone.hosts.set(host.ip, host);
-      return state;
+      zones.set(zone.network, zone);
+
+      const newZones: Map<string, Zone> = new Map();
+
+      zones.forEach(function(value, key) {
+        newZones.set(key, value);
+      });
+
+      return {
+        ...state,
+        zones: newZones
+      };
     }
 
     case ActionType.DiscoveredPort: {
diff --git a/src/packages/discovery/store/discover/discover.state.ts b/src/packages/discovery/store/discover/discover.state.ts
index f5abc7f..f563036 100644
--- a/src/packages/discovery/store/discover/discover.state.ts
+++ b/src/packages/discovery/store/discover/discover.state.ts
@@ -14,5 +14,3 @@ export const initialState: State = {
   zones: null,
 };
 
-
-export const getDiscoveryResult = (state: State) => state.zones;
diff --git a/src/packages/discovery/subscriber/discovery.subscriber.ts b/src/packages/discovery/subscriber/discovery.subscriber.ts
index a603981..1adfcc2 100644
--- a/src/packages/discovery/subscriber/discovery.subscriber.ts
+++ b/src/packages/discovery/subscriber/discovery.subscriber.ts
@@ -31,7 +31,7 @@ export class DiscoverySubscriber {
   }
   @RPCSubscriber({method: 'DiscoveryService.discoveredHost'})
   public discoveredHost(host: Host): void {
-    this.loggerService.debug('DiscoverySubscriber.discoveredHost host:', host);
+    // this.loggerService.debug('DiscoverySubscriber.discoveredHost host:', host);
 
     this.store.dispatch(new DiscoverStore.DiscoveredHost(host));
   }