overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

discovery in progress

Browse Source
This commit is contained in:
insanity 2018-05-30 18:39:26 +09:00
parent f4f5c37c53
commit 82d7337cb9
22 changed files with 231 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
@overflow/discovery/component/discovery/discovery.component.html
View File

@ -1,30 +1,11 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-3"> <div class="ui-g-12 ui-md-3">
<of-discovery-search-config *ngIf="selectedProbe else block" [probeHost]="selectedProbe" (requestDiscovery)="requestDiscovery.emit($event)"></of-discovery-search-config> <p-accordion [multiple]="true">
<ng-template #block>나는 커서 block ui가 될거얌</ng-template> <p-accordionTab header="Discovery Settings" [selected]="selectedProbe">
</div> <of-probe-summary *ngIf="requested" [probeHost]="selectedProbe"></of-probe-summary>
<div class="ui-g-12 ui-md-9"> <of-discovery-search-config *ngIf="!requested && selectedProbe" [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
<div *ngIf="selectedProbe">
SELECTED_PROBE_DISPLAY_NAME : {{selectedProbe.probe.displayName}}
</div>
</div>
</div>
<!-- <div class="ui-g-12">
<p-panel [showHeader]="false" >Temp Area</p-panel>
</div> -->
<!-- <div class="ui-g">
<div class="ui-g-12 ui-md-3">
<p-accordion (onClose)="onTabClose($event)" (onOpen)="OnTabOpen($event)">
<p-accordionTab header="Probe Select Area" [selected]="true">
</p-accordionTab> </p-accordionTab>
<p-accordionTab header="Discovery Search Config Area" > <p-accordionTab header="Filter" [selected]="requested" [disabled]="!requested">
<of-discovery-search-config
(discoverySearchStartClick)="onDiscoveryStart()"
(selectProbe)="onSelectedProbe($event)"></of-discovery-search-config>
</p-accordionTab>
<p-accordionTab header="Result Filter Area">
<of-discovery-search-filter></of-discovery-search-filter> <of-discovery-search-filter></of-discovery-search-filter>
</p-accordionTab> </p-accordionTab>
</p-accordion> </p-accordion>
@ -32,7 +13,7 @@
<div class="ui-g-12 ui-md-9" > <div class="ui-g-12 ui-md-9" >
<p-panel> <p-panel>
<of-discovery-search-result [probe]="selectedProbe"></of-discovery-search-result> <of-discovery-result-container (stop)="onStop($event)"></of-discovery-result-container>
</p-panel> </p-panel>
</div> </div>
</div> --> </div>

13
@overflow/discovery/component/discovery/discovery.component.ts
View File

@ -10,12 +10,23 @@ import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
}) })
export class DiscoveryComponent { export class DiscoveryComponent {
private tabIdx: number;
@Input() selectedProbe: ProbeHost; @Input() selectedProbe: ProbeHost;
@Output() requestDiscovery = new EventEmitter<DiscoverZone>(); @Output() requestDiscovery = new EventEmitter<DiscoverZone>();
@Output() stop = new EventEmitter<DiscoverZone>();
requested: boolean;
constructor( constructor(
) { ) {
} }
onRequestDiscovery(dz: DiscoverZone) {
this.requested = true;
this.requestDiscovery.emit(dz);
}
onStop() {
this.requested = false;
this.stop.emit();
}
} }

11
@overflow/discovery/component/discovery/ip-input.component.html Normal file
View File

@ -0,0 +1,11 @@
<div class="ui-inputgroup">
<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)">
<span class="ui-inputgroup-addon">.</span>
<input [disabled]="fixed > 1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input [disabled]="fixed > 2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
</div>

5
@overflow/discovery/component/discovery/search-config/ip-input.component.ts → @overflow/discovery/component/discovery/ip-input.component.ts
View File

@ -18,8 +18,9 @@ export class IpInputComponent implements OnInit, AfterContentInit {
third: string; third: string;
fourth: string; fourth: string;
@Input() hostIp; @Input() hostIp: string;
@Input() title; @Input() title: string;
@Input() fixed: number;
@Output() inputIp = new EventEmitter(); @Output() inputIp = new EventEmitter();
constructor( constructor(

83
@overflow/discovery/component/discovery/search-config.component.html Normal file
View File

@ -0,0 +1,83 @@
<div class="ui-g" *ngIf="probeHost">
<div>
<label>IP Version</label>
</div>
<div class="ui-g-12 ui-bottom-space-20">
<div class="ui-g-6 ui-g-nopad">
<p-radioButton name="group1" value="v4" label="IPv4" [(ngModel)]="ipVer"></p-radioButton>
</div>
<div class="ui-g-6 ui-g-nopad">
<p-radioButton [disabled]="!SUPPORT_V6" name="group1" value="v6" label="IPv6" [(ngModel)]="ipVer"></p-radioButton>
</div>
</div>
<div *ngIf="ipVer === 'v4' else V6" class="ui-g-12">
<div>
<div>
<p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
</div>
<label>Range</label>
</div>
<div class="ui-g-12">
<of-ip-input [hostIp]="startIP" (inputIp)="onInputIP($event, 0)" [title]="'From'" [fixed]="fixedIPrange"></of-ip-input>
</div>
<div class="ui-g-12">
<of-ip-input [hostIp]="endIP" (inputIp)="onInputIP($event, 1)" [title]="'To'" [fixed]="fixedIPrange"></of-ip-input>
</div>
<div *ngIf="ipErrMsg" class="ui-message ui-messages-error ui-corner-all">
{{ipErrMsg}}
</div>
</div>
<ng-template #V6>
<!-- TODO -->
</ng-template>
<div class="ui-g-12">
<div>
<p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
</div>
</div>
<div class="ui-g-12 ui-bottom-space-20">
<div class="ui-g-6 ui-g-nopad">
TCP &nbsp;
<p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true" (onChange)="onPortTypeCheck(portCheckbox, serviceCheckbox)"></p-inputSwitch>
</div>
<div class="ui-g-6 ui-g-nopad">
UDP &nbsp;
<p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true" (onChange)="onPortTypeCheck(portCheckbox, serviceCheckbox)"></p-inputSwitch>
</div>
</div>
<div class="ui-g-12">
<label>Range</label>
</div>
<div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
<div class="ui-g-4">
<input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
(keyup)="onInputPort(startPort.value, 0)">
</div>
<div class="ui-g-4">
<input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
(keyup)="onInputPort(endPort.value, 1)">
</div>
</div>
<div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
{{portErrMsg}}
</div>
<div class="ui-g-12">
<div>
<p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)"
binary="true"></p-checkbox>
</div>
</div>
<div class="ui-g-12 ui-g-nopad">
<of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
</div>
<div class="ui-g-12" dir="rtl">
<button type="submit" [disabled]="!validation" label="Discovery Start" pButton class="ui-button-width-fit" (click)="onRequestDiscovery()"></button>
</div>
</div>

37
@overflow/discovery/component/discovery/search-config/search-config.component.ts → @overflow/discovery/component/discovery/search-config.component.ts
View File

@ -14,6 +14,8 @@ import { Checkbox } from 'primeng/primeng';
}) })
export class SearchConfigComponent implements OnChanges { export class SearchConfigComponent implements OnChanges {
SUPPORT_V6 = false;
@Input() probeHost: ProbeHost; @Input() probeHost: ProbeHost;
@Output() requestDiscovery = new EventEmitter<DiscoverZone>(); @Output() requestDiscovery = new EventEmitter<DiscoverZone>();
@ -34,12 +36,16 @@ export class SearchConfigComponent implements OnChanges {
ipErrMsg: string; ipErrMsg: string;
portErrMsg: string; portErrMsg: string;
fixedIPrange: number;
constructor( constructor(
) { ) {
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if (changes['probeHost']) {
this.initByProbe(); this.initByProbe();
}
this.validation = true; this.validation = true;
} }
@ -48,13 +54,14 @@ export class SearchConfigComponent implements OnChanges {
if (!cidr.isValid()) { if (!cidr.isValid()) {
return; return;
} }
this.ipVer = 'ipv4'; this.ipVer = 'v4';
this.startIP = cidr.addressStart.address; this.startIP = cidr.addressStart.address;
this.endIP = cidr.addressEnd.address; this.endIP = cidr.addressEnd.address;
this.startPort = '1'; this.startPort = '1';
this.endPort = '1024'; this.endPort = '1024';
// TODO: Initialize services // TODO: Initialize services
this.checkEditableIPrange(cidr);
} }
onRequestDiscovery() { onRequestDiscovery() {
@ -91,10 +98,27 @@ export class SearchConfigComponent implements OnChanges {
this.requestDiscovery.emit(discoverZone); this.requestDiscovery.emit(discoverZone);
} }
checkEditableIPrange(cidr) {
const startIPArray = cidr.addressStart.parsedAddress;
const endIPArray = cidr.addressEnd.parsedAddress;
let count = 0;
endIPArray.forEach((element, idx) => {
if (element === startIPArray[idx]) {
count++;
}
});
this.fixedIPrange = count;
}
onPortCheckChange(serviceCheckbox: Checkbox, checked: boolean) { onPortCheckChange(serviceCheckbox: Checkbox, checked: boolean) {
if (!checked) { if (!checked) {
serviceCheckbox.checked = false; serviceCheckbox.checked = false;
this.serviceChecked = false; this.serviceChecked = false;
} else {
if (!this.tcpChecked && !this.udpChecked) {
this.tcpChecked = true;
this.udpChecked = true;
}
} }
} }
@ -105,6 +129,15 @@ export class SearchConfigComponent implements OnChanges {
} }
} }
onPortTypeCheck(portCheckbox: Checkbox, serviceCheckbox: Checkbox): void {
if (!this.tcpChecked && !this.udpChecked) {
this.portChecked = false;
portCheckbox.checked = false;
this.serviceChecked = false;
serviceCheckbox.checked = false;
}
}
onInputIP(e, idx: number) { onInputIP(e, idx: number) {
const value = e.value; const value = e.value;
if (idx === 0) { if (idx === 0) {

12
@overflow/discovery/component/discovery/search-config/ip-input.component.html
View File

@ -1,12 +0,0 @@
<div class="ui-inputgroup">
<span style="margin-right: 18px">{{title}} </span>
<input id="0" type="text" pInputText placeholder="127" maxlength="3" [(ngModel)]="first" value="{{first}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input id="1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input id="2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input id="3" type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
</div>

71
@overflow/discovery/component/discovery/search-config/search-config.component.html
View File

@ -1,71 +0,0 @@
<div class="ui-g">
<label>IP Version</label>
</div>
<div class="ui-g-12 ui-bottom-space-20">
<div class="ui-g-6 ui-g-nopad">
<p-radioButton name="group1" value="ipv4" label="IPv4" [(ngModel)]="ipVer" inputId="opt1"></p-radioButton>
</div>
<div class="ui-g-6 ui-g-nopad">
<p-radioButton [disabled]="true" name="group1" value="ipv6" label="IPv6" [(ngModel)]="ipVer"></p-radioButton>
</div>
</div>
<div class="ui-g-12">
<div>
<p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
</div>
<label>Range</label>
</div>
<div class="ui-g-12">
<of-ip-input [hostIp]="startIP" (inputIp)="onInputIP($event, 0)" [title]="'From'"></of-ip-input>
</div>
<div class="ui-g-12">
<of-ip-input [hostIp]="endIP" (inputIp)="onInputIP($event, 1)" [title]="'To'"></of-ip-input>
</div>
<div *ngIf="ipErrMsg" class="ui-message ui-messages-error ui-corner-all">
{{ipErrMsg}}
</div>
<div class="ui-g-12">
<div>
<p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
</div>
</div>
<div class="ui-g-12 ui-bottom-space-20">
<div class="ui-g-6 ui-g-nopad">
TCP &nbsp;
<p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
</div>
<div class="ui-g-6 ui-g-nopad">
UDP &nbsp;
<p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
</div>
</div>
<div class="ui-g-12">
<label>Range</label>
</div>
<div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
<div class="ui-g-4">
<input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
(keyup)="onInputPort(startPort.value, 0)">
</div>
<div class="ui-g-4">
<input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
(keyup)="onInputPort(endPort.value, 1)">
</div>
</div>
<div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
{{portErrMsg}}
</div>
<div class="ui-g-12">
<div>
<p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)"
binary="true"></p-checkbox>
</div>
</div>
<div class="ui-g-12 ui-g-nopad">
<of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
</div>
<div class="ui-g-12" dir="rtl">
<button type="submit" [disabled]="!validation" label="Discovery Start" pButton class="ui-button-width-fit" (click)="onRequestDiscovery()"></button>
</div>

0
@overflow/discovery/component/discovery/search-filter/search-filter.component.html → @overflow/discovery/component/discovery/search-filter.component.html
View File

0
@overflow/discovery/component/discovery/search-filter/search-filter.component.ts → @overflow/discovery/component/discovery/search-filter.component.ts
View File

4
@overflow/discovery/component/discovery/search-result.component.html Normal file
View File

@ -0,0 +1,4 @@
<div class="ui-g">
<p-button label="Stop" (click)="stop.emit()"></p-button>
</div>

19
@overflow/discovery/component/discovery/search-result.component.ts Normal file
View File

@ -0,0 +1,19 @@
import {
AfterContentInit, Component, Input,
OnInit,
EventEmitter,
Output
} from '@angular/core';
@Component({
selector: 'of-discovery-result',
templateUrl: './search-result.component.html',
})
export class SearchResultComponent {
@Output() stop = new EventEmitter();
constructor(
) {
}
}

36
@overflow/discovery/component/discovery/search-result/search-result.component.html
View File

@ -1,36 +0,0 @@
<div class="ui-g" *ngIf="probe">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<div class="of-key-value-div">
<span>Name</span>
<span class="ng-star-inserted">
{{probe.displayName}}
</span>
</div>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<div class="of-key-value-div">
<span>Description</span>
<span class="ng-star-inserted">
{{probe.description}}
</span>
</div>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<span>Key</span>
{{probe.probeKey}}
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-nopad">
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
</div>
</div>
</div>

24
@overflow/discovery/component/discovery/search-result/search-result.component.ts
View File

@ -1,24 +0,0 @@
import {
AfterContentInit, Component, Input,
OnInit
} from '@angular/core';
import { Probe } from '@overflow/commons-typescript/model/probe';
@Component({
selector: 'of-discovery-search-result',
templateUrl: './search-result.component.html',
})
export class SearchResultComponent implements OnInit, AfterContentInit {
@Input() selectedProbe: Probe;
constructor(
) {
}
ngOnInit() {
}
ngAfterContentInit() {
}
}

8
@overflow/discovery/component/index.ts
View File

@ -1,9 +1,9 @@
import { ServiceSelectorComponent } from './discovery/service-selector/service-selector.component'; import { ServiceSelectorComponent } from './discovery/service-selector/service-selector.component';
import { DiscoveryComponent } from './discovery/discovery.component'; import { DiscoveryComponent } from './discovery/discovery.component';
import { SearchConfigComponent } from './discovery/search-config/search-config.component'; import { SearchConfigComponent } from './discovery/search-config.component';
import { SearchFilterComponent } from './discovery/search-filter/search-filter.component'; import { SearchFilterComponent } from './discovery/search-filter.component';
import { SearchResultComponent } from './discovery/search-result/search-result.component'; import { SearchResultComponent } from './discovery/search-result.component';
import { IpInputComponent } from './discovery/search-config/ip-input.component'; import { IpInputComponent } from './discovery/ip-input.component';
export const COMPONENTS = [ export const COMPONENTS = [
ServiceSelectorComponent, ServiceSelectorComponent,

1
@overflow/discovery/container/discovery-result/discovery-result-container.component.html Normal file
View File

@ -0,0 +1 @@
<of-discovery-result></of-discovery-result>

15
@overflow/discovery/container/discovery-result/discovery-result-container.component.ts Normal file
View File

@ -0,0 +1,15 @@
import {
Component,
Input,
} from '@angular/core';
@Component({
selector: 'of-discovery-result-container',
templateUrl: './discovery-result-container.component.html',
})
export class DiscoveryResultContainerComponent {
constructor(
) {
}
}

2
@overflow/discovery/container/index.ts
View File

@ -1,5 +1,7 @@
import {DiscoveryContainerComponent} from './discovery/discovery-container.component'; import {DiscoveryContainerComponent} from './discovery/discovery-container.component';
import { DiscoveryResultContainerComponent } from './discovery-result/discovery-result-container.component';
export const CONTAINER_COMPONENTS = [ export const CONTAINER_COMPONENTS = [
DiscoveryContainerComponent, DiscoveryContainerComponent,
DiscoveryResultContainerComponent
]; ];

2
@overflow/probe/component/index.ts
View File

@ -2,10 +2,12 @@ import { ProbeDetailComponent } from './detail/detail.component';
import { ProbeListComponent } from './list/list.component'; import { ProbeListComponent } from './list/list.component';
import { ProbeDownloadComponent } from './download/download.component'; import { ProbeDownloadComponent } from './download/download.component';
import { ProbeSelectorComponent } from './selector/selector.component'; import { ProbeSelectorComponent } from './selector/selector.component';
import { ProbeSummaryComponent } from './summary/summary.component';
export const COMPONENTS = [ export const COMPONENTS = [
ProbeListComponent, ProbeListComponent,
ProbeDetailComponent, ProbeDetailComponent,
ProbeDownloadComponent, ProbeDownloadComponent,
ProbeSelectorComponent, ProbeSelectorComponent,
ProbeSummaryComponent
]; ];

15
@overflow/probe/component/summary/summary.component.html Normal file
View File

@ -0,0 +1,15 @@
<div *ngIf="probeHost else info">
<of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
<of-key-value [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
<of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
<of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
<of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
<of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
<of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6 | uppercase"></of-key-value>
<of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
<of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
</div>
<ng-template #info>
Choose a Probe to perform Network Discovery.
</ng-template>

15
@overflow/probe/component/summary/summary.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, Input } from '@angular/core';
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
@Component({
selector: 'of-probe-summary',
templateUrl: './summary.component.html',
})
export class ProbeSummaryComponent {
@Input() probeHost: ProbeHost;
constructor() {
}
}

2
src/environments/environment.ts
View File

@ -5,7 +5,7 @@
export const environment = { export const environment = {
production: false, production: false,
restBaseURL: 'http://192.168.1.103:19080/webapp', restBaseURL: 'http://192.168.1.101:19080/webapp',
webappRPCConfig: { webappRPCConfig: {
url: 'ws://192.168.1.101:19090/webapp', url: 'ws://192.168.1.101:19090/webapp',
reconnectInterval: 5000, reconnectInterval: 5000,