design ing
This commit is contained in:
parent
a6277fba90
commit
5ea40c00cc
|
@ -1,18 +1,22 @@
|
|||
<ul class="key-value">
|
||||
<li *ngIf="host.address">
|
||||
IP Address
|
||||
<span class="meta-value">{{host.address}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.name">
|
||||
Name
|
||||
<span class="meta-value">{{host.name}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{host.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.portList">
|
||||
Opened Ports
|
||||
<span class="meta-value">{{host.portList.length}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g-6">
|
||||
<ul class="key-value">
|
||||
<li *ngIf="host.address">
|
||||
IP Address
|
||||
<span class="meta-value">{{host.address}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.name">
|
||||
Name
|
||||
<span class="meta-value">{{host.name}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{host.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.portList">
|
||||
Opened Ports
|
||||
<span class="meta-value">{{host.portList.length}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
|
@ -1,22 +1,26 @@
|
|||
<div>
|
||||
<img src="../../assets/image/icon/icon_db_maria.svg" width="100" height="100" />
|
||||
</div>
|
||||
<div class="ui-g">
|
||||
<div class="detail-img">
|
||||
<img src="../../assets/image/icon/icon_db_maria.svg" width="100" height="100" />
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
|
||||
<ng-container [ngSwitch]="node.group">
|
||||
<ng-container [ngSwitch]="node.group">
|
||||
|
||||
<ng-container *ngSwitchCase="'zone'">
|
||||
<app-zone-detail [zone]=""></app-zone-detail>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'zone'">
|
||||
<app-zone-detail [zone]=""></app-zone-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'host'">
|
||||
<app-host-detail [host]="node.target"></app-host-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 *ngSwitchCase="'service'">
|
||||
<app-service-detail [service]="node.target"></app-service-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchDefault>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchDefault>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,8 @@
|
|||
.detail-img {
|
||||
display: inline;
|
||||
width: 140px;
|
||||
padding: 10px;
|
||||
}
|
||||
.detail-content {
|
||||
display: inline;
|
||||
}
|
|
@ -1,22 +1,26 @@
|
|||
<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>
|
||||
<!-- <li *ngFor="let item of service.meta.entries()">
|
||||
{{item[0]}}
|
||||
<span class="meta-value">{{item[1]}}</span>
|
||||
</li> -->
|
||||
</ul>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g-6">
|
||||
<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>
|
||||
<!-- <li *ngFor="let item of service.meta.entries()">
|
||||
{{item[0]}}
|
||||
<span class="meta-value">{{item[1]}}</span>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,20 @@
|
|||
.key-value {
|
||||
list-style-type: none;
|
||||
margin: 28px 0 0 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
li {
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid #d8dae2;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
width: 180px;
|
||||
.meta-value {
|
||||
font-weight: 100;
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1 +1,3 @@
|
|||
zone component
|
||||
<div class="ui-g-12">
|
||||
zone component
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user