detail view

This commit is contained in:
insanity 2018-09-12 16:07:11 +09:00
parent 27d99b7133
commit 57258305cb
4 changed files with 103 additions and 71 deletions

View File

@ -1,5 +1,16 @@
<div class="ui-g-12 detail-view-box"> <div class="ui-g-12 detail-view-box">
<div class="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> -->
<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>
<div class="detail-content">
<h3>{{host.name}} <span>{{host.address}}</span></h3> <h3>{{host.name}} <span>{{host.address}}</span></h3>
<p-tabView> <p-tabView>
@ -40,10 +51,16 @@
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="host.meta"> <p-tabPanel header="Metadata" *ngIf="host.meta">
<ul class="key-value"> <ul>
<li *ngFor="let key of host.meta | objectKeys"> <li *ngFor="let key of host.meta | objectKeys">
{{key | stringPrettify}} {{key | stringPrettify}}
<span class="meta-value">{{host.meta[key]}}</span>
<ul class="key-value">
<li *ngFor="let skey of host.meta[key] | objectKeys">
{{skey | stringPrettify}}
<span class="meta-value">{{host.meta[key][skey]}}</span>
</li>
</ul>
</li> </li>
</ul> </ul>
</p-tabPanel> </p-tabPanel>
@ -52,4 +69,4 @@
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox> <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
</p-tabPanel> </p-tabPanel>
</p-tabView> </p-tabView>
</div> </div>

View File

@ -1,13 +1,4 @@
<div class="ui-g"> <div class="ui-g">
<div class="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> -->
<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/logo/logo_tomcat.svg" />
</svg>
</div>
<div class="detail-content">
<ng-container [ngSwitch]="node.group"> <ng-container [ngSwitch]="node.group">
@ -27,5 +18,4 @@
</ng-container> </ng-container>
</ng-container> </ng-container>
</div>
</div> </div>

View File

@ -1,5 +1,14 @@
<div class="ui-g-12 detail-view-box"> <div class="ui-g-12 detail-view-box">
<div class="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> -->
<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> <h3>
{{service.name}} {{service.port.host.address}} {{service.name}} {{service.port.host.address}}
</h3> </h3>
@ -29,10 +38,16 @@
</p-tabPanel> </p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="service.meta"> <p-tabPanel header="Metadata" *ngIf="service.meta">
<ul class="key-value"> <ul>
<li *ngFor="let key of service.meta | objectKeys"> <li *ngFor="let key of service.meta | objectKeys">
{{key | stringPrettify}} {{key | stringPrettify}}
<span class="meta-value">{{service.meta[key]}}</span>
<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> </li>
</ul> </ul>
</p-tabPanel> </p-tabPanel>

View File

@ -1,4 +1,14 @@
<div id="detail-view-box"> <div id="detail-view-box">
<div class="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> -->
<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> <h3>
{{zone.network}} {{zone.network}}
</h3> </h3>