This commit is contained in:
crusader 2018-10-04 18:10:31 +09:00
parent cb894f991e
commit 9944a2f696
2 changed files with 128 additions and 115 deletions

View File

@ -20,53 +20,60 @@
<p-tabView class="detail-content" (onChange)="onTabViewChange($event)"> <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
<p-tabPanel header=" General"> <p-tabPanel header=" General">
<div of-auto-height key="0">
<perfect-scrollbar>
<ul class="key-value"> <ul class="key-value">
<li *ngIf="host.address"> <li *ngIf="host.address">
IP Address IP Address
<span class="meta-value">{{host.address}}</span> <span class="meta-value">{{host.address}}</span>
</li> </li>
<li *ngIf="host.hostType"> <li *ngIf="host.hostType">
Type Type
<span class="meta-value">{{host.hostType}}</span> <span class="meta-value">{{host.hostType}}</span>
</li> </li>
<li *ngIf="host.hostVendor"> <li *ngIf="host.hostVendor">
Vendor Vendor
<span class="meta-value">{{host.hostVendor}}</span> <span class="meta-value">{{host.hostVendor}}</span>
</li> </li>
<li *ngIf="host.hostModel"> <li *ngIf="host.hostModel">
Model Model
<span class="meta-value">{{host.hostModel}}</span> <span class="meta-value">{{host.hostModel}}</span>
</li> </li>
<li *ngIf="host.osType"> <li *ngIf="host.osType">
OS OS
<span class="meta-value">{{host.osType}}</span> <span class="meta-value">{{host.osType}}</span>
</li> </li>
<li *ngIf="host.mac"> <li *ngIf="host.mac">
Mac Address Mac Address
<span class="meta-value">{{host.mac}}</span> <span class="meta-value">{{host.mac}}</span>
</li> </li>
</ul>
</ul> </perfect-scrollbar>
</div>
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="host.meta"> <p-tabPanel header="Metadata" *ngIf="host.meta">
<ul class="detail-content-meta-title"> <div of-auto-height key="1">
<li *ngFor="let key of host.meta | objectKeys"> <perfect-scrollbar>
{{key | stringPrettify}} <ul class="detail-content-meta-title">
<li *ngFor="let key of host.meta | objectKeys">
{{key | stringPrettify}}
<ul class="key-value"> <ul class="key-value">
<li *ngFor="let skey of host.meta[key] | objectKeys"> <li *ngFor="let skey of host.meta[key] | objectKeys">
{{skey | stringPrettify}} {{skey | stringPrettify}}
<span class="meta-value">{{host.meta[key][skey]}}</span> <span class="meta-value">{{host.meta[key][skey]}}</span>
</li>
</ul>
</li> </li>
</ul> </ul>
</li> </perfect-scrollbar>
</ul> </div>
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Ports" *ngIf="host.portList"> <p-tabPanel header="Ports" *ngIf="host.portList">
@ -82,30 +89,30 @@
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Health"> <p-tabPanel header="Health">
<div of-auto-height key="3">
<perfect-scrollbar>
<div class="ui-g">
<div class="ui-ping-row">
<div class="title">Count </div>
<p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
</div>
<div class="ui-ping-row">
<div class="title">Interval </div>
<p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
</div>
<div class="ui-ping-row">
<div class="title">Deadline </div>
<p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
</div>
</div>
<button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
<div class="ui-g"> <div class="ui-ping-result-textarea">
<div class="ui-ping-row"> <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
<div class="title">Count </div> <textarea *ngIf="!pingWaiting && pingResult" pInputTextarea autoResize="autoResize" [(ngModel)]="pingResultRaw"></textarea>
<p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner> </div>
</div> </perfect-scrollbar>
<div class="ui-ping-row">
<div class="title">Interval </div>
<p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
</div>
<div class="ui-ping-row">
<div class="title">Deadline </div>
<p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
</div>
</div> </div>
<button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
<div class="ui-ping-result-textarea">
<p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
<textarea *ngIf="!pingWaiting && pingResult" pInputTextarea autoResize="autoResize" [(ngModel)]="pingResultRaw"></textarea>
</div>
</p-tabPanel> </p-tabPanel>
</p-tabView> </p-tabView>

View File

@ -23,25 +23,29 @@
<p-tabView class="detail-content" (onChange)="onTabViewChange($event)"> <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
<p-tabPanel header="General"> <p-tabPanel header="General">
<div of-auto-height key="0">
<perfect-scrollbar>
<ul class="key-value"> <ul class="key-value">
<li *ngIf="service.key"> <li *ngIf="service.key">
Name Name
<span class="meta-value">{{service.key}}</span> <span class="meta-value">{{service.key}}</span>
</li> </li>
<li *ngIf="service.port"> <li *ngIf="service.port">
Port Port
<span class="meta-value">{{service.port.metaPortType.key}} {{service.port.portNumber}}</span> <span class="meta-value">{{service.port.metaPortType.key}} {{service.port.portNumber}}</span>
</li> </li>
<li *ngIf="service.description"> <li *ngIf="service.description">
Description Description
<span class="meta-value">{{service.description}}</span> <span class="meta-value">{{service.description}}</span>
</li> </li>
<li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'"> <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
Crypto Type Crypto Type
<span class="meta-value">{{service.metaCryptoType.name}}</span> <span class="meta-value">{{service.metaCryptoType.name}}</span>
</li> </li>
</ul> </ul>
</perfect-scrollbar>
</div>
</p-tabPanel> </p-tabPanel>
@ -65,46 +69,48 @@
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Health" *ngIf="service.port.metaPortType.key === 'TCP'"> <p-tabPanel header="Health" *ngIf="service.port.metaPortType.key === 'TCP'">
<div of-auto-height key="2">
<div class="ui-g"> <perfect-scrollbar>
<div class="ui-ping-row"> <div class="ui-g">
<div class="title">Count </div> <div class="ui-ping-row">
<p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner> <div class="title">Count </div>
</div> <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
<div class="ui-ping-row"> </div>
<div class="title">Interval </div> <div class="ui-ping-row">
<p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner> <div class="title">Interval </div>
</div> <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
<div class="ui-ping-row"> </div>
<div class="title">Deadline </div> <div class="ui-ping-row">
<p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner> <div class="title">Deadline </div>
</div> <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
</div>
</div>
<button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
<div class="ui-ping-result">
<p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
<p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult" [scrollable]="true"
scrollHeight="200px">
<ng-template pTemplate="header">
<tr>
<th style="width: 3.25em">No.</th>
<th>Response Time (ms)</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-key let-i="rowIndex">
<tr>
<td style="width: 3.25em">
{{i + 1}}
</td>
<td>
{{pingResult.responses[key].time}}
{{pingResult.responses[key].error}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</perfect-scrollbar>
</div> </div>
<button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
<div class="ui-ping-result">
<p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>
<p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult" [scrollable]="true"
scrollHeight="200px">
<ng-template pTemplate="header">
<tr>
<th style="width: 3.25em">No.</th>
<th>Response Time (ms)</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-key let-i="rowIndex">
<tr>
<td style="width: 3.25em">
{{i + 1}}
</td>
<td>
{{pingResult.responses[key].time}}
{{pingResult.responses[key].error}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</p-tabPanel> </p-tabPanel>
</p-tabView> </p-tabView>