app/src/commons/component/service-detail.component.html
2018-09-12 19:10:26 +09:00

60 lines
2.0 KiB
HTML

<div class="ui-g-12">
<div class="ui-g detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100">
<image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
</svg> -->
<div class="svg-div">
<svg width="140" height="140" viewBox="15 35 140 100">
<image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
</svg>
</div>
<h3>
{{service.name}} {{service.port.host.address}}
</h3>
</div>
<p-tabView class="detail-content">
<button type="button" pButton label="Ping" (click)="setDefault($event)" class="ui-button-secondary ui-pingbn-position"></button>
<p-tabPanel header="General">
<ul class="key-value">
<li *ngIf="service.key">
Name
<span class="meta-value">{{service.key}}</span>
</li>
<li *ngIf="service.port">
Port
<span class="meta-value">{{service.port.metaPortType.name}} {{service.port.portNumber}}</span>
</li>
<li *ngIf="service.description">
Description
<span class="meta-value">{{service.description}}</span>
</li>
<li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
Crypto Type
<span class="meta-value">{{service.metaCryptoType.name}}</span>
</li>
</ul>
</p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="service.meta">
<ul class="detail-content-meta-title">
<li *ngFor="let key of service.meta | objectKeys">
{{key | stringPrettify}}
<ul class="key-value">
<li *ngFor="let skey of service.meta[key] | objectKeys">
{{skey | stringPrettify}}
<span class="meta-value">{{service.meta[key][skey]}}</span>
</li>
</ul>
</li>
</ul>
</p-tabPanel>
</p-tabView>
</div>