design
This commit is contained in:
parent
31cd802b0f
commit
f45e6319f6
|
@ -1,5 +1,10 @@
|
||||||
<of-probe-selector [probeHostID]="probeHostID" (select)="selectedProbe=$event"></of-probe-selector>
|
<h1>Discovery</h1>
|
||||||
<of-probe-summary *ngIf="selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
|
<div class="ui-g">
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<of-probe-selector [probeHostID]="probeHostID" (select)="selectedProbe=$event"></of-probe-selector>
|
||||||
|
<of-probe-summary *ngIf="selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="ui-g">
|
<div class="ui-g">
|
||||||
<div class="ui-g-12 ui-md-3">
|
<div class="ui-g-12 ui-md-3">
|
||||||
<p-accordion [multiple]="true">
|
<p-accordion [multiple]="true">
|
||||||
|
@ -15,7 +20,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ui-g-12 ui-md-9">
|
<div class="ui-g-12 ui-md-9">
|
||||||
<p-panel>
|
<p-panel [showHeader]="false">
|
||||||
<!-- <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onRequestStop()"></button> -->
|
<!-- <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onRequestStop()"></button> -->
|
||||||
<of-discovery-result #discoveryResult *ngIf="requested else info"
|
<of-discovery-result #discoveryResult *ngIf="requested else info"
|
||||||
[probeHost]="selectedProbe"
|
[probeHost]="selectedProbe"
|
||||||
|
@ -28,7 +33,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ng-template #info>
|
<ng-template #info>
|
||||||
<div style="min-height: 100vh">
|
<div style="min-height: 100px">
|
||||||
Network Discovery 설명 페이지
|
Network Discovery 설명 페이지
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
|
@ -1,11 +1,11 @@
|
||||||
<div class="ui-inputgroup">
|
<div class="ui-inputgroup">
|
||||||
<span style="margin-right: 18px">{{title}} </span>
|
<span style="margin-right: 18px">{{title}} </span>
|
||||||
<input [disabled]="fixed >= 0"type="text" pInputText placeholder="127" maxlength="3" [(ngModel)]="first" value="{{first}}" (keyup)="onIpInput($event)">
|
<input [disabled]="fixed >= 0"type="text" pInputText placeholder="127" maxlength="3" [(ngModel)]="first" value="{{first}}" (keyup)="onIpInput($event)">
|
||||||
<span class="ui-inputgroup-addon">.</span>
|
<span class="ui-inputgroup-addon" style="min-width: 5px !important">.</span>
|
||||||
<input [disabled]="fixed > 1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
|
<input [disabled]="fixed > 1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
|
||||||
<span class="ui-inputgroup-addon">.</span>
|
<span class="ui-inputgroup-addon" style="min-width: 5px !important">.</span>
|
||||||
<input [disabled]="fixed > 2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
|
<input [disabled]="fixed > 2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
|
||||||
<span class="ui-inputgroup-addon">.</span>
|
<span class="ui-inputgroup-addon" style="min-width: 5px !important">.</span>
|
||||||
<input type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
|
<input type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,24 @@
|
||||||
<div *ngIf="discoverZone">
|
<div *ngIf="discoverZone" class="ui-key-value ui-left-info2">
|
||||||
<of-key-value [key]="'Host Range'" [value]="hostRange"></of-key-value>
|
<div class="ui-g">
|
||||||
<of-key-value [key]="'Port Range'" [value]="portRange"></of-key-value>
|
<of-key-value [key]="'Host Range'" [value]="hostRange"></of-key-value>
|
||||||
<span *ngIf="discoverZone.discoverHost.discoverPort.includeTCP">TCP</span>
|
<of-key-value [key]="'Port Range'" [value]="portRange"></of-key-value>
|
||||||
<span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
|
<div class="of-key-value-div">
|
||||||
|
<span>Port type</span>
|
||||||
<div *ngIf="services.length > 0">
|
<span class="ng-star-inserted ui-nopad">
|
||||||
<p-overlayPanel #op>
|
<span *ngIf="discoverZone.discoverHost.discoverPort.includeTCP">TCP</span>
|
||||||
<div *ngFor="let service of services">
|
<span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
|
||||||
{{service}}
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</p-overlayPanel>
|
|
||||||
|
|
||||||
<a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
|
|
||||||
|
<div *ngIf="services.length > 0" class="ui-g-12 ui-top-border-1" style="text-align: right">
|
||||||
|
<p-overlayPanel #op>
|
||||||
|
<div *ngFor="let service of services">
|
||||||
|
{{service}}
|
||||||
|
</div>
|
||||||
|
</p-overlayPanel>
|
||||||
|
|
||||||
|
<a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -57,21 +57,22 @@
|
||||||
<label>Range</label>
|
<label>Range</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
|
<div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
|
||||||
<div class="ui-g-4">
|
<div class="ui-g-6">
|
||||||
<input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
|
<input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
|
||||||
(keyup)="onInputPort(startPort.value, 0)">
|
(keyup)="onInputPort(startPort.value, 0)">
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-g-4">
|
<div class="ui-g-6">
|
||||||
<input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
|
<input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
|
||||||
(keyup)="onInputPort(endPort.value, 1)">
|
(keyup)="onInputPort(endPort.value, 1)">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ui-g-12 ui-g-nopad" style="margin-left: 0.5em">
|
||||||
|
<a style="cursor: pointer" (click)="portExcludeDisplay = true">
|
||||||
|
<span *ngIf="excludePorts.length === 0">Add Exclude Ports</span>
|
||||||
|
<span *ngIf="excludePorts.length > 0">{{excludePorts.length}} ports are excluded.</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-g-12">
|
|
||||||
<a style="cursor: pointer" (click)="portExcludeDisplay = true">
|
|
||||||
<span *ngIf="excludePorts.length === 0">Add Exclude Ports</span>
|
|
||||||
<span *ngIf="excludePorts.length > 0">{{excludePorts.length}} ports are excluded.</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
|
<div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
|
||||||
{{portErrMsg}}
|
{{portErrMsg}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,8 +3,10 @@
|
||||||
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
|
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
|
||||||
<p-panel #content [showHeader]="false" class="block-panel">
|
<p-panel #content [showHeader]="false" class="block-panel">
|
||||||
<div class="ui-g" dir="rtl">
|
<div class="ui-g" dir="rtl">
|
||||||
<a style="cursor: pointer" (click)="onUnselectAll()">Unselect All</a>
|
<button pButton type="button" class="ui-button-secondary ui-button-width-fit ui-s-button" label="Unselect All" style="margin-bottom: 3px;"
|
||||||
<a style="cursor: pointer" (click)="onSelectAll()">Select All</a>
|
(click)="onUnselectAll()"></button>
|
||||||
|
<button pButton type="button" class="ui-button-secondary ui-button-width-fit ui-s-button" label="Select All" style="margin-bottom: 3px;"
|
||||||
|
(click)="onSelectAll()"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices"
|
<p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices"
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
<div *ngIf="probeHost" class="ui-g">
|
<p-panel [showHeader]="false" class="ui-top-space-10">
|
||||||
<div class="ui-g-12 ui-md-4 ui-nopad ui-key-value">
|
<div *ngIf="probeHost" class="ui-g">
|
||||||
<of-key-value [key]="'Status'" [value]="connectionStatus"></of-key-value>
|
<div class="ui-g-12 ui-md-4 ui-key-value">
|
||||||
<of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
|
<of-key-value [key]="'Status'" [value]="connectionStatus"></of-key-value>
|
||||||
|
<of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-4 ui-key-value">
|
||||||
|
<of-key-value [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
|
||||||
|
<of-key-value [key]="'OS'" [value]="probeHost.infraHost.infraOS.metaInfraVendor.name"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-4 ui-key-value">
|
||||||
|
<of-key-value [key]="'IPv4'" [value]="probeHost.infraHost.ipv4"></of-key-value>
|
||||||
|
<of-key-value [key]="'Mac Address'" [value]="probeHost.infraHost.mac"></of-key-value>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-g-12 ui-md-4 ui-nopad ui-key-value">
|
</p-panel>
|
||||||
<of-key-value [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
|
|
||||||
<of-key-value [key]="'OS'" [value]="probeHost.infraHost.infraOS.metaInfraVendor.name"></of-key-value>
|
|
||||||
</div>
|
|
||||||
<div class="ui-g-12 ui-md-4 ui-nopad ui-key-value">
|
|
||||||
<of-key-value [key]="'IPv4'" [value]="probeHost.infraHost.ipv4"></of-key-value>
|
|
||||||
<of-key-value [key]="'Mac Address'" [value]="probeHost.infraHost.mac"></of-key-value>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
|
@ -1565,6 +1565,7 @@
|
||||||
}
|
}
|
||||||
.ui-button-secondary:hover{
|
.ui-button-secondary:hover{
|
||||||
color : #5e6166 !important;
|
color : #5e6166 !important;
|
||||||
|
background-color : #ededee !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-button-large {
|
.ui-button-large {
|
||||||
|
@ -1580,6 +1581,9 @@
|
||||||
|
|
||||||
.ui-top-space-10{
|
.ui-top-space-10{
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
.ui-panel{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-top-space--0-5em{
|
.ui-top-space--0-5em{
|
||||||
|
@ -1617,7 +1621,7 @@
|
||||||
|
|
||||||
.ui-s-button{
|
.ui-s-button{
|
||||||
.ui-button-text {
|
.ui-button-text {
|
||||||
padding: 2px !important;
|
padding: 0 !important;
|
||||||
.ui-button-text-icon-left {
|
.ui-button-text-icon-left {
|
||||||
padding: 2px 12px 2px 4px !important;
|
padding: 2px 12px 2px 4px !important;
|
||||||
}
|
}
|
||||||
|
@ -1628,6 +1632,19 @@
|
||||||
font-size: 0.8em !important;
|
font-size: 0.8em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui-xs-button{
|
||||||
|
.ui-button-text {
|
||||||
|
padding: 2px !important;
|
||||||
|
.ui-button-text-icon-left {
|
||||||
|
padding: 2px 12px 2px 4px !important;
|
||||||
|
}
|
||||||
|
.ui-button-text-icon-right {
|
||||||
|
padding: 2px 4px 2px 12px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
font-size: 0.6em !important;
|
||||||
|
}
|
||||||
|
|
||||||
.ui-status-icon{
|
.ui-status-icon{
|
||||||
//margin-top: 3px;
|
//margin-top: 3px;
|
||||||
//position: static;
|
//position: static;
|
||||||
|
@ -1761,6 +1778,20 @@
|
||||||
width: 105px !important;
|
width: 105px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ui-left-info2{
|
||||||
|
padding: 10px !important;
|
||||||
|
margin-left: -15px !important;
|
||||||
|
min-width: 300px !important;
|
||||||
|
span::after {
|
||||||
|
content: " : ";
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
width: 95px !important;
|
||||||
|
}
|
||||||
|
span.ng-star-inserted, a.ng-star-inserted>span {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ui-bottom-border-1 {
|
.ui-bottom-border-1 {
|
||||||
border-bottom: #bdbdbd 1px solid;
|
border-bottom: #bdbdbd 1px solid;
|
||||||
|
@ -1770,6 +1801,9 @@
|
||||||
border-bottom: #bdbdbd 1px solid;
|
border-bottom: #bdbdbd 1px solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ui-top-border-1 {
|
||||||
|
border-top: #bdbdbd 1px solid;
|
||||||
|
}
|
||||||
/*.layout-container .ultima-menu{
|
/*.layout-container .ultima-menu{
|
||||||
width: 100% ;
|
width: 100% ;
|
||||||
}*/
|
}*/
|
||||||
|
|
Loading…
Reference in New Issue
Block a user