detail view
This commit is contained in:
insanity
parent
27d99b7133
commit
57258305cb
|
|
@ -1,55 +1,72 @@
|
|||
<div class="ui-g-12 detail-view-box">
|
||||
|
||||
<h3>{{host.name}} <span>{{host.address}}</span></h3>
|
||||
<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>
|
||||
|
||||
<p-tabView>
|
||||
<p-tabPanel header="General">
|
||||
<div class="detail-content">
|
||||
|
||||
<ul class="key-value">
|
||||
<h3>{{host.name}} <span>{{host.address}}</span></h3>
|
||||
|
||||
<li *ngIf="host.address">
|
||||
IP Address
|
||||
<span class="meta-value">{{host.address}}</span>
|
||||
</li>
|
||||
<p-tabView>
|
||||
<p-tabPanel header="General">
|
||||
|
||||
<li *ngIf="host.deviceType">
|
||||
Type
|
||||
<span class="meta-value">{{host.deviceType}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.deviceVendor">
|
||||
Vendor
|
||||
<span class="meta-value">{{host.deviceVendor}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.model">
|
||||
Model
|
||||
<span class="meta-value">{{host.model}}</span>
|
||||
</li>
|
||||
<ul class="key-value">
|
||||
|
||||
<li *ngIf="host.osType">
|
||||
OS
|
||||
<span class="meta-value">{{host.osType}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.address">
|
||||
IP Address
|
||||
<span class="meta-value">{{host.address}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="host.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{host.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.deviceType">
|
||||
Type
|
||||
<span class="meta-value">{{host.deviceType}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.deviceVendor">
|
||||
Vendor
|
||||
<span class="meta-value">{{host.deviceVendor}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.model">
|
||||
Model
|
||||
<span class="meta-value">{{host.model}}</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<li *ngIf="host.osType">
|
||||
OS
|
||||
<span class="meta-value">{{host.osType}}</span>
|
||||
</li>
|
||||
|
||||
</p-tabPanel>
|
||||
<li *ngIf="host.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{host.mac}}</span>
|
||||
</li>
|
||||
|
||||
<p-tabPanel header="Metadata" *ngIf="host.meta">
|
||||
<ul class="key-value">
|
||||
<li *ngFor="let key of host.meta | objectKeys">
|
||||
{{key | stringPrettify}}
|
||||
<span class="meta-value">{{host.meta[key]}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</p-tabPanel>
|
||||
</ul>
|
||||
|
||||
<p-tabPanel header="Ports" *ngIf="host.portList">
|
||||
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
</div>
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Metadata" *ngIf="host.meta">
|
||||
<ul>
|
||||
<li *ngFor="let key of host.meta | objectKeys">
|
||||
{{key | stringPrettify}}
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Ports" *ngIf="host.portList">
|
||||
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
</div>
|
||||
|
|
@ -1,31 +1,21 @@
|
|||
<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 *ngSwitchCase="'zone'">
|
||||
<app-zone-detail [zone]="node.target"></app-zone-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'host'">
|
||||
<app-host-detail [host]="node.target"></app-host-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'service'">
|
||||
<app-service-detail [service]="node.target"></app-service-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchDefault>
|
||||
</ng-container>
|
||||
<ng-container [ngSwitch]="node.group">
|
||||
|
||||
<ng-container *ngSwitchCase="'zone'">
|
||||
<app-zone-detail [zone]="node.target"></app-zone-detail>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<ng-container *ngSwitchCase="'host'">
|
||||
<app-host-detail [host]="node.target"></app-host-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'service'">
|
||||
<app-service-detail [service]="node.target"></app-service-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchDefault>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,14 @@
|
|||
<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>
|
||||
{{service.name}} {{service.port.host.address}}
|
||||
</h3>
|
||||
|
|
@ -29,10 +38,16 @@
|
|||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Metadata" *ngIf="service.meta">
|
||||
<ul class="key-value">
|
||||
<ul>
|
||||
<li *ngFor="let key of service.meta | objectKeys">
|
||||
{{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>
|
||||
</ul>
|
||||
</p-tabPanel>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
<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>
|
||||
{{zone.network}}
|
||||
</h3>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user