ping in progress

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

@@ -76,36 +76,10 @@
 
 <p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right" (onHide)="onHideDetail()">
   <div *ngIf="selectedNode !== null">
-    <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)" (ping)="displayPing($event)"></app-node-detail>
+    <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
   </div>
 </p-sidebar>
 
-<p-dialog header="Ping" [(visible)]="pingDisplay" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200"
-  [minY]="70" [maximizable]="true" [baseZIndex]="10000">
-  <div *ngIf="pingResult">
-    <ul>
-      <li *ngFor="let key of pingResult.responses | objectKeys">
-        <span *ngIf="pingResult.responses[key].error else value">
-          {{pingResult.responses[key].error}}
-        </span>
-        <ng-template #value>
-          TTL={{pingResult.responses[key].ttl}} : {{pingResult.responses[key].time}}ms
-        </ng-template>
-      </li>
-    </ul>
-  </div>
-  <div *ngIf="pingResult">
-    <span>Sent: {{pingResult.summary.sendCount || '-'}}</span><br />
-    <span>Received: {{pingResult.summary.receiveCount || '-'}}</span><br />
-    <span>Loss: {{pingResult.summary.lossPercent || '-'}} %</span><br />
-    <span>Avg: {{pingResult.summary.avgTime || '-'}} ms</span><br />
-    <span>Min: {{pingResult.summary.minTime || '-'}} ms</span><br />
-    <span>Min: {{pingResult.summary.maxTime || '-'}} ms</span>
-  </div>
-  <p-footer>
-    <button type="button" pButton icon="pi pi-check" (click)="pingDisplay=false" label="Close"></button>
-  </p-footer>
-</p-dialog>
 
 <!-- <div class="ui-fluid">
     <div class="ui-g">

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

@@ -54,8 +54,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
   ports: Map<string, Map<number, Port>>;
 
   resultMsg: string[];
-  pingDisplay = false;
-  pingResult: PingResult;
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
@@ -934,14 +932,4 @@ export class HomePageComponent implements OnInit, OnDestroy {
     );
   }
 
-
-  displayPing(pingResult: PingResult) {
-    console.log(pingResult);
-
-    if (pingResult) {
-      this.pingDisplay = true;
-      this.pingResult = pingResult;
-    }
-
-  }
 }

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

@@ -19,7 +19,6 @@
   </div>
 
   <p-tabView class="detail-content">
-    <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
     <p-tabPanel header="General">
 
       <ul class="key-value">
@@ -78,5 +77,34 @@
         </li>
       </ul>
     </p-tabPanel>
+
+    <p-tabPanel header="Health">
+      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
+      <div *ngIf="pingResult">
+        <ul>
+          <li *ngFor="let key of pingResult.responses | objectKeys">
+            <span *ngIf="pingResult.responses[key].error else value">
+              {{pingResult.responses[key].error}}
+            </span>
+            <ng-template #value>
+              TTL={{pingResult.responses[key].ttl}} : {{pingResult.responses[key].time}}ms
+            </ng-template>
+          </li>
+        </ul>
+
+        <div>
+          <div *ngIf="pingResult.summary.sendCount">Sent: {{pingResult.summary.sendCount}}</div>
+          <div *ngIf="pingResult.summary.receiveCount">Received: {{pingResult.summary.receiveCount}}</div>
+          <div *ngIf="pingResult.summary.lossPercent">Loss: {{pingResult.summary.lossPercent}} %</div>
+          <div *ngIf="pingResult.summary.avgTime">Avg: {{pingResult.summary.avgTime}} ms</div>
+          <div *ngIf="pingResult.summary.minTime">Min: {{pingResult.summary.minTime}} ms</div>
+          <div *ngIf="pingResult.summary.maxTime">Min: {{pingResult.summary.maxTime}} ms</div>
+        </div>
+      </div>
+    </p-tabPanel>
+
+
   </p-tabView>
-</div>
+</div>
+
+<p-growl [(value)]="pingResult" [life]="9000"></p-growl>

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

@@ -2,8 +2,9 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Host } from '@overflow/model/discovery';
 import { ProbeService } from '../service/probe.service';
 import { map, catchError, take } from 'rxjs/operators';
-import { PingResult } from '@overflow/model/ping';
+import { PingResult, PingResponse } from '@overflow/model/ping';
 import { of } from 'rxjs';
+import { Message } from 'primeng/primeng';
 
 
 @Component({
@@ -14,7 +15,7 @@ import { of } from 'rxjs';
 export class HostDetailComponent {
 
   @Input() host: Host;
-  @Output() ping = new EventEmitter<PingResult>();
+  pingResult: PingResult;
 
   constructor(
     private probeService: ProbeService
@@ -32,7 +33,9 @@ export class HostDetailComponent {
       .call<PingResult>('PingService.PingHost', this.host, option)
       .pipe(
         map((pingResult: PingResult) => {
-          this.ping.emit(pingResult);
+          if (pingResult) {
+            this.pingResult = pingResult;
+          }
         }),
         catchError(error => {
           console.log(error);