detail view
This commit is contained in:
insanity
parent
27d99b7133
commit
57258305cb
|
|
@ -1,55 +1,72 @@
|
||||||
<div class="ui-g-12 detail-view-box">
|
<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>
|
<div class="detail-content">
|
||||||
<p-tabPanel header="General">
|
|
||||||
|
|
||||||
<ul class="key-value">
|
<h3>{{host.name}} <span>{{host.address}}</span></h3>
|
||||||
|
|
||||||
<li *ngIf="host.address">
|
<p-tabView>
|
||||||
IP Address
|
<p-tabPanel header="General">
|
||||||
<span class="meta-value">{{host.address}}</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li *ngIf="host.deviceType">
|
<ul class="key-value">
|
||||||
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>
|
|
||||||
|
|
||||||
<li *ngIf="host.osType">
|
<li *ngIf="host.address">
|
||||||
OS
|
IP Address
|
||||||
<span class="meta-value">{{host.osType}}</span>
|
<span class="meta-value">{{host.address}}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li *ngIf="host.mac">
|
<li *ngIf="host.deviceType">
|
||||||
Mac Address
|
Type
|
||||||
<span class="meta-value">{{host.mac}}</span>
|
<span class="meta-value">{{host.deviceType}}</span>
|
||||||
</li>
|
</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>
|
||||||
<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>
|
|
||||||
|
|
||||||
<p-tabPanel header="Ports" *ngIf="host.portList">
|
</p-tabPanel>
|
||||||
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
|
|
||||||
</p-tabPanel>
|
<p-tabPanel header="Metadata" *ngIf="host.meta">
|
||||||
</p-tabView>
|
<ul>
|
||||||
</div>
|
<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="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">
|
||||||
|
|
||||||
<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 *ngSwitchCase="'zone'">
|
||||||
|
<app-zone-detail [zone]="node.target"></app-zone-detail>
|
||||||
</ng-container>
|
</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>
|
</div>
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user