ping in progress

This commit is contained in:
insanity 2018-09-18 22:39:46 +09:00
parent cd7ed362e2
commit c965c72365
4 changed files with 37 additions and 44 deletions

View File

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

View File

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

View File

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

View File

@ -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);