test

@overflow/model/discovery/Zone.ts

@@ -11,4 +11,6 @@ export interface Zone {
   meta?: Map<string, Map<string, string>>;
   discoveredBy?: string[];
   discoveredDate?: Date;
+
+  hostList?: Host[];
 }

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

@@ -5,7 +5,6 @@ import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef
 import { ProbeService, requesterID } from '../../../commons/service/probe.service';
 
 import { Zone, Host, Port, Service, DiscoverHost } from '@overflow/model/discovery';
-import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
 
 import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
 import { DiscoveryConfigService } from '../../../commons/service/discovery-config.service';
@@ -45,6 +44,9 @@ export class HomePageComponent implements OnInit, OnDestroy {
   private links: Link[];
   public simulation: d3.Simulation<Node, Link> | undefined;
 
+  hosts: Host[];
+  ports: Port[];
+
   constructor(
     private changeDetector: ChangeDetectorRef,
     private probeService: ProbeService,
@@ -52,6 +54,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
   ) {
     this.nodes = [];
     this.links = [];
+    this.hosts = [];
+    this.ports = [];
   }
 
   ngOnInit() {
@@ -245,8 +249,30 @@ export class HomePageComponent implements OnInit, OnDestroy {
 
   onTargetClick(node: Node) {
     console.log(node);
-
     this.displaySidebar = true;
+
+    switch (node.group) {
+      case 'zone':
+        var zone: Zone = node.target;
+        zone.hostList = [];
+        this.hosts.forEach(host => {
+          if (host.zone.network === zone.network) {
+            zone.hostList.push(host);
+          }
+        });
+        break;
+      case 'host':
+        var host: Host = node.target;
+        host.portList = [];
+        this.ports.forEach(port => {
+          if (port.host.address === host.address) {
+            host.portList.push(port);
+          }
+        });
+        break;
+      default:
+        break;
+    }
     this.selectedNode = node;
   }
 
@@ -307,6 +333,17 @@ export class HomePageComponent implements OnInit, OnDestroy {
   @RPCSubscriber({ method: 'DiscoveryService.DiscoveredHost' })
   public DiscoveredHost(host: Host) {
     console.log('DiscoveredHost', host);
+    var dup = false;
+    this.hosts.forEach((item) => {
+      if (item.address === host.address) {
+        dup = true;
+        return;
+      }
+    });
+    if (!dup) {
+      this.hosts.push(host);
+    }
+
     const hostId = `${host.address}`;
     const zoneNode = this.getNode('192.168.1.0/24');
 
@@ -334,6 +371,7 @@ export class HomePageComponent implements OnInit, OnDestroy {
   @RPCSubscriber({ method: 'DiscoveryService.DiscoveredPort' })
   public DiscoveredPort(port: Port) {
     console.log('DiscoveredPort', port);
+    this.ports.push(port);
   }
 
   /**

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

@@ -65,6 +65,11 @@
     </p-tabPanel>
 
     <p-tabPanel header="Ports" *ngIf="host.portList">
-      <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
+      <ul class="key-value">
+        <li *ngFor="let port of host.portList">
+          <span class="meta-value">{{port.portNumber}} ({{port.metaPortType.key}})</span>
+        </li>
+      </ul>
     </p-tabPanel>
-  </p-tabView>
+  </p-tabView>
+</div>

src/commons/component/host-detail.component.ts

@@ -10,9 +10,6 @@ import { Host, Port } from '@overflow/model/discovery';
 export class HostDetailComponent {
 
   @Input() host: Host;
-  ports: Port[];
-  selectedPort: Port;
-  discoveredBy: string;
 
   constructor(
   ) {

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

@@ -45,10 +45,14 @@
 
       </ul>
 
-    </p-tabPanel>
+      <p-tabPanel header="Hosts">
-    <p-tabPanel header="Host">
+        <ul class="key-value">
-      <p-listbox [options]="hosts" [(ngModel)]="selectedHost" optionLabel="name"></p-listbox>
+          <li *ngFor="let host of zone.hostList">
-    </p-tabPanel>
+            <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
+              ({{host.name}})</span>
+          </li>
+        </ul>
+      </p-tabPanel>
   </p-tabView>
 
 </div>

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

@@ -12,8 +12,6 @@ export class ZoneDetailComponent implements OnInit {
 
   @Input() zone: Zone;
   ipRange: string;
-  hosts: Host[];
-  selectedHost: Host;
 
   constructor(
   ) {