overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-09-12 16:24:02 +09:00
parent b9df48a54c
commit 17d142a740
9 changed files with 180 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/commons/component/host-detail.component.html
View File

@ -1,4 +1,4 @@
<div class="ui-g-12 detail-view-box">
<div class="ui-g-12">
<div class="detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100">
@ -7,66 +7,62 @@
<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>
<p-tabView>
<p-tabPanel header="General">
<ul class="key-value">
<li *ngIf="host.address">
IP Address
<span class="meta-value">{{host.address}}</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>
<li *ngIf="host.osType">
OS
<span class="meta-value">{{host.osType}}</span>
</li>
<li *ngIf="host.mac">
Mac Address
<span class="meta-value">{{host.mac}}</span>
</li>
</ul>
</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>
<p-tabView class="detail-content">
<p-tabPanel header="General">
<ul class="key-value">
<li *ngIf="host.address">
IP Address
<span class="meta-value">{{host.address}}</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>
<li *ngIf="host.osType">
OS
<span class="meta-value">{{host.osType}}</span>
</li>
<li *ngIf="host.mac">
Mac Address
<span class="meta-value">{{host.mac}}</span>
</li>
</ul>
</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>

61
src/commons/component/host-detail.component.scss
View File

@ -1,37 +1,38 @@
.detail-view-box {
width: 100%;
padding : 10px 160px 0 0;
.detail-img {
display: inline;
width: 140px;
padding: 10px;
svg{
display: inline;
}
h3{
padding: 20px 0 20px 5px;
display: inline;
padding: 10px 0 10px 5px;
// padding: 5px;
// height: 60px;
// span{
// font-size: 0.7em;
// color: #757575;
// }
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
.detail-content {
display: inline;
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
}
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}

16
src/commons/component/nic-dropdown.component.scss
View File

@ -2,9 +2,15 @@
border: 0px;
}
#nic-list-border .ui-widget-content .ui-listbox .ui-listbox-list {
line-height: 2em;
}
#nic-list-border .ui-widget-content .ui-listbox .ui-listbox-item {
padding: 0.5em;
// #nic-list-border.ui-widget-content .ui-listbox .ui-listbox-list {
// line-height: 2em;
// }
#nic-list-border.ui-listbox-item {
padding: 1em;
.title{
}
.description {
font-size: 0.8em;
}
}

34
src/commons/component/node-detail.component.html
View File

@ -1,21 +1,23 @@
<div class="ui-g">
<div class="ui-g-12">
<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 *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>

14
src/commons/component/node-detail.component.scss
View File

@ -1,14 +0,0 @@
.detail-img {
position: absolute;
top: 0px;
left: 0px;
width: 140px;
padding: 10px;
}
.detail-content {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0 0 0 150px
}

11
src/commons/component/service-detail.component.html
View File

@ -1,4 +1,4 @@
<div class="ui-g-12 detail-view-box">
<div class="ui-g-12">
<div class="detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100">
@ -7,13 +7,12 @@
<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>
<h3>
{{service.name}} {{service.port.host.address}}
</h3>
</div>
<h3>
{{service.name}} {{service.port.host.address}}
</h3>
<p-tabView>
<p-tabView class="detail-content">
<p-tabPanel header="General">
<ul class="key-value">

77
src/commons/component/service-detail.component.scss
View File

@ -1,53 +1,38 @@
.detail-view-box {
width: 100%;
padding : 10px 160px 0 0;
.detail-img {
display: inline;
width: 140px;
padding: 10px;
svg{
display: inline;
}
h3{
padding: 20px 0 20px 5px;
display: inline;
padding: 10px 0 10px 5px;
// padding: 5px;
// height: 60px;
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
.detail-content {
display: inline;
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
}
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}
// .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;
// }
// }
// }

11
src/commons/component/zone-detail.component.html
View File

@ -1,4 +1,4 @@
<div id="detail-view-box">
<div class="ui-g-12">
<div class="detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100">
@ -7,13 +7,12 @@
<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>
<h3>
{{zone.network}}
</h3>
</div>
<h3>
{{zone.network}}
</h3>
<p-tabView class="tab-border-bottom">
<p-tabView class="detail-content">
<p-tabPanel header="General">
<ul class="key-value">

57
src/commons/component/zone-detail.component.scss
View File

@ -1,33 +1,38 @@
#detail-view-box {
width: 100%;
padding : 10px 160px 0 0;
.detail-img {
display: inline;
width: 140px;
padding: 10px;
svg{
display: inline;
}
h3{
padding: 20px 0 20px 5px;
display: inline;
padding: 10px 0 10px 5px;
// padding: 5px;
// height: 60px;
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
.detail-content {
display: inline;
}
.key-value {
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
li {
padding: 8px 14px;
border-bottom: 1px solid #d8dae2;
position: relative;
font-weight: bold;
width: 100%;
.meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
}
}
}
#detail-view-box .ui-widget-header {
border: 0 0 1px 0 !important;
}