.

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

@@ -68,7 +68,7 @@
 
 <p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right">
   <div *ngIf="selectedNode">
-    <app-node-detail [node]="selectedNode"></app-node-detail>
+    <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
   </div>
 </p-sidebar>
 

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

@@ -610,4 +610,15 @@ export class HomePageComponent implements OnInit, OnDestroy {
     });
     return _n;
   }
+
+
+  otherHostSelected(host: Host) {
+    const foundNode = this.nodes.find(node => {
+      return node.group === 'host' && node.id === host.address;
+    });
+    if (!foundNode) {
+      return;
+    }
+    this.selectedNode = foundNode;
+  }
 }

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

@@ -14,7 +14,7 @@
   </div>
 
   <p-tabView class="detail-content">
-    <button type="button" pButton label="Ping" (click)="setDefault($event)" class="ui-button-secondary ui-pingbn-position"></button>
+    <button type="button" pButton label="Ping" (click)="ping()" class="ui-button-secondary ui-pingbn-position"></button>
     <p-tabPanel header="General">
 
       <ul class="key-value">

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

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
-import { Host, Port } from '@overflow/model/discovery';
+import { Host, DiscoverHost } from '@overflow/model/discovery';
+import { ProbeService, requesterID } from '../service/probe.service';
+import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
 
 
 @Component({
@@ -12,8 +14,24 @@ export class HostDetailComponent {
   @Input() host: Host;
 
   constructor(
+    private probeService: ProbeService
   ) {
-
   }
 
+  ping() {
+    console.log(this.host);
+    // const discoverHost: DiscoverHost = {
+    //   discoveryConfig: {},
+    //   metaIPType: this.host.metaIPType,
+    //   firstScanRange: this.host.address,
+    //   lastScanRange: this.host.address,
+    //   discoverPort: null,
+    // };
+    // this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.host.zone, discoverHost);
+  }
+
+  // @RPCSubscriber({ method: 'DiscoveryService.DiscoveredHost' })
+  // public DiscoveredHost(host: Host) {
+  //   console.log(host);
+  // }
 }

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

@@ -7,10 +7,17 @@ import { ProbeService } from '../service/probe.service';
 import { Interface } from '@overflow/model/net/nic';
 import { SelectItem } from 'primeng/primeng';
 import { Zone } from '@overflow/model/discovery';
-import { toMetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
+import { toMetaIPType, MetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
 import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
 
-
+class NICInfo {
+  iface: string;
+  friendlyName: string;
+  metaIPType: MetaIPType;
+  mac: string;
+  address: string;
+  network: string;
+}
 
 @Component({
   selector: 'app-nic-dropdown',
@@ -23,7 +30,7 @@ export class NicDropdownComponent implements OnInit {
   @ViewChild('panel') panel: DropdownPanelComponent;
 
   nics: SelectItem[] = [];
-  selected;
+  selected: NICInfo;
 
   constructor(
     private probeService: ProbeService,
@@ -39,23 +46,25 @@ export class NicDropdownComponent implements OnInit {
             if (address.metaIPType.key !== toMetaIPType(MetaIPTypeEnum.V4).key) {
               return;
             }
+            const nicInfo = {
+              iface: iface.iface,
+              friendlyName: iface.friendlyName,
+              metaIPType: address.metaIPType,
+              mac: iface.mac,
+              address: address.address,
+              network: address.network,
+            };
             this.nics.push({
               label: iface.friendlyName + ' (' + address.network + ')',
-              value: {
-                iface: iface.iface,
-                friendlyName: iface.friendlyName,
-                metaIPType: address.metaIPType,
-                mac: iface.mac,
-                address: address.address,
-                network: address.network,
-              },
+              value: nicInfo,
               disabled: address.metaIPType.key !== toMetaIPType(MetaIPTypeEnum.V4).key ? true : false,
             });
+            if (address.gateway !== undefined && address.gateway.length > 0) {
+              this.nicSelected(nicInfo);
+            }
           });
+
         });
-        if (this.nics.length > 0) {
-          this.nicSelected(this.nics[0].value);
-        }
       }),
       catchError(error => {
         console.log(error);
@@ -66,7 +75,7 @@ export class NicDropdownComponent implements OnInit {
 
   }
 
-  nicSelected(nic: SelectItem) {
+  nicSelected(nic: NICInfo) {
     this.selected = nic;
 
     const zone: Zone = {

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

@@ -4,7 +4,7 @@
     <ng-container [ngSwitch]="node.group">
 
       <ng-container *ngSwitchCase="'zone'">
-        <app-zone-detail [zone]="node.target"></app-zone-detail>
+        <app-zone-detail [zone]="node.target" (otherHostSelect)="otherHostSelected($event)"></app-zone-detail>
       </ng-container>
 
       <ng-container *ngSwitchCase="'host'">

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, Host, EventEmitter } from '@angular/core';
 
 
 @Component({
@@ -9,10 +9,14 @@ import { Component, Input } from '@angular/core';
 export class NodeDetailComponent {
 
   @Input() node;
+  @Output() otherHostSelect = new EventEmitter<Host>();
 
   constructor(
   ) {
 
   }
 
+  otherHostSelected(host: Host) {
+    this.otherHostSelect.emit(host);
+  }
 }

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

@@ -17,7 +17,7 @@
 
 
   <p-tabView class="detail-content">
-    <button type="button" pButton label="Ping" (click)="setDefault($event)" class="ui-button-secondary ui-pingbn-position"></button>
+    <button type="button" pButton label="Ping" (click)="ping()" class="ui-button-secondary ui-pingbn-position"></button>
     <p-tabPanel header="General">
 
       <ul class="key-value">

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

@@ -16,4 +16,8 @@ export class ServiceDetailComponent {
 
   }
 
+  ping() {
+    console.log(this.service);
+  }
+
 }

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

@@ -49,8 +49,10 @@
     <p-tabPanel header="Hosts">
       <ul class="key-value">
         <li *ngFor="let host of zone.hostList | ipSort: 'address'">
-          <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
-            ({{host.name}})</span>
+          <a href="javascript:void(0)" (click)="hostSelected(host)" style="text-decoration:none">
+            <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
+              ({{host.name}})</span>
+          </a>
         </li>
       </ul>
     </p-tabPanel>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 import { Zone, Host } from '@overflow/model/discovery';
 
 const IPCIDR = require('ip-cidr');
@@ -11,6 +11,7 @@ const IPCIDR = require('ip-cidr');
 export class ZoneDetailComponent implements OnInit {
 
   @Input() zone: Zone;
+  @Output() otherHostSelect = new EventEmitter<Host>();
   ipRange: string;
 
   constructor(
@@ -24,6 +25,9 @@ export class ZoneDetailComponent implements OnInit {
 
     const cidr = new IPCIDR(this.zone.network);
     this.ipRange = cidr.start() + ' - ' + cidr.end();
+  }
 
+  hostSelected(host: Host) {
+    this.otherHostSelect.emit(host);
   }
 }