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

discovery

Browse Source
This commit is contained in:
insanity
2018-05-30 23:05:58 +09:00
parent 50ea7ecacb
commit ef9e3d7d78
18 changed files with 1972 additions and 1863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
@overflow/discovery/component/discovery/animation.ts Normal file
View File

@@ -0,0 +1,35 @@
import { trigger, state, transition, style, animate, query, stagger, keyframes } from '@angular/animations';
export const Anim = [
trigger('discoveryFilterAnim', [
transition('void => *', [
query('*', style({ opacity: 0 }), { optional: true }),
query('*', stagger('3ms', [
animate('0.08s ease-in', keyframes([
style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
]))]), { optional: true }),
]),
// transition('* => void', [
// query('*', style({ opacity: 1 }), { optional: true }),
// query('*', stagger('5ms', [
// animate('0.08s ease-in', keyframes([
// style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
// style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
// style({ opacity: 0, transform: 'translateY(-75%)', offset: 1.0 }),
// ]))]), { optional: true }),
// ])
]),
trigger('discoveryResultAnim', [
transition('void => *', [
query('*', style({ opacity: 0 }), { optional: true }),
query('*', stagger('300ms', [
animate('0.08s ease-in', keyframes([
style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
]))]), { optional: true }),
]),
]),
];

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

@@ -1,9 +1,10 @@
<div class="ui-g">
<div class="ui-g-12 ui-md-3">
<p-accordion [multiple]="true">
<p-accordionTab header="Discovery Settings" [selected]="selectedProbe">
<of-probe-summary *ngIf="requested" [probeHost]="selectedProbe"></of-probe-summary>
<of-discovery-search-config *ngIf="!requested && selectedProbe" [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
<p-accordionTab header="Discovery Settings" [selected]="true">
<span *ngIf="!selectedProbe">Choose a Probe to perform Discovery.</span>
<of-probe-summary *ngIf="requested" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
<of-discovery-search-config *ngIf="!requested && selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
</p-accordionTab>
<p-accordionTab header="Filter" [selected]="requested" [disabled]="!requested">
<of-discovery-search-filter></of-discovery-search-filter>
@@ -13,7 +14,7 @@
<div class="ui-g-12 ui-md-9" >
<p-panel>
<of-discovery-result-container (stop)="onStop($event)"></of-discovery-result-container>
<of-discovery-result [started]="requested" (stop)="onStop($event)"></of-discovery-result>
</p-panel>
</div>
</div>

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

@@ -3,16 +3,18 @@ import {
} from '@angular/core';
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
import { Anim } from './animation';
@Component({
selector: 'of-discovery',
templateUrl: './discovery.component.html',
animations: Anim
})
export class DiscoveryComponent {
@Input() selectedProbe: ProbeHost;
@Output() requestDiscovery = new EventEmitter<DiscoverZone>();
@Output() stop = new EventEmitter<DiscoverZone>();
@Output() requestStop = new EventEmitter();
requested: boolean;
@@ -27,6 +29,6 @@ export class DiscoveryComponent {
onStop() {
this.requested = false;
this.stop.emit();
this.requestStop.emit();
}
}

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

@@ -24,6 +24,10 @@
<div class="ui-g-12">
<of-ip-input [hostIp]="endIP" (inputIp)="onInputIP($event, 1)" [title]="'To'" [fixed]="fixedIPrange"></of-ip-input>
</div>
<div class="ui-g-12">
<p-multiSelect (onFocus)="onIPExcludeFocus()" [options]="ipArray" optionLabel="ip" [(ngModel)]="excludeIPs"
[panelStyle]="{minWidth:'12em'}" selectedItemsLabel="{0} hosts are excluded." maxSelectedLabels="2" defaultLabel="Add exclude IP"></p-multiSelect>
</div>
<div *ngIf="ipErrMsg" class="ui-message ui-messages-error ui-corner-all">
{{ipErrMsg}}
</div>
@@ -62,6 +66,9 @@
(keyup)="onInputPort(endPort.value, 1)">
</div>
</div>
<div class="ui-g-12">
<a style="cursor: pointer" (click)="displayPortExclude = true">Add Exclude Ports</a>
</div>
<div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
{{portErrMsg}}
</div>

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

@@ -24,6 +24,8 @@ export class SearchConfigComponent implements OnChanges {
endIP: string;
startPort: string;
endPort: string;
excludeIPs = [];
excludePorts = [];
includeServices = [];
hostChecked = true;
@@ -37,6 +39,7 @@ export class SearchConfigComponent implements OnChanges {
portErrMsg: string;
fixedIPrange: number;
ipArray = [];
constructor(
) {
@@ -55,8 +58,8 @@ export class SearchConfigComponent implements OnChanges {
return;
}
this.ipVer = 'v4';
this.startIP = cidr.addressStart.address;
this.endIP = cidr.addressEnd.address;
this.startIP = cidr.start();
this.endIP = cidr.end();
this.startPort = '1';
this.endPort = '1024';
// TODO: Initialize services
@@ -64,6 +67,33 @@ export class SearchConfigComponent implements OnChanges {
this.checkEditableIPrange(cidr);
}
onIPExcludeFocus() {
const cidr = new CIDR(this.probeHost.probe.cidr);
this.ipArray = cidr.toArray().filter((value) => {
return this.inRange(value) || this.excludeIPs.find(obj => obj.ip === value);
}).map(value => {
return { ip: value };
});
}
inRange(value) {
const min = this.startIP;
const max = this.endIP;
if (this.ipToNum(min) <= this.ipToNum(value) && this.ipToNum(max) >= this.ipToNum(value)) {
return true;
}
return false;
}
ipToNum(ip) {
return Number(
ip.split('.')
.map(d => ('000' + d).substr(-3))
.join('')
);
}
onRequestDiscovery() {
let discoverPort: DiscoverPort = null;
let discoverService: DiscoverService = null;
@@ -171,14 +201,14 @@ export class SearchConfigComponent implements OnChanges {
}
isValidIPregex(ip: string): boolean {
if (this.ipVer === 'ipv4') {
if (this.ipVer === 'v4') {
return /^(?=\d+\.\d+\.\d+\.\d+$)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]|[0-9])\.?){4}$/.test(ip);
}
return false;
}
sortIP(ipAddressArray) {
return ipAddressArray.sort(function (a, b) {
return ipAddressArray.sort((a, b) => {
a = a.split('.');
b = b.split('.');
for (let i = 0; i < a.length; i++) {
@@ -218,4 +248,12 @@ export class SearchConfigComponent implements OnChanges {
return null;
}
onSaveIPExclude() {
}
onSavePortExclude() {
}
}

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

@@ -10,7 +10,7 @@
<of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
</div>
<div class="ui-g">
<div class="ui-g" @discoveryFilterAnim>
<p-toggleButton offLabel="Oracle" onLabel="Oracle" [(ngModel)]="Oracle" [style]="{'width':'150px'}" ></p-toggleButton>
<p-toggleButton offLabel="MYSQL" onLabel="MYSQL" [(ngModel)]="MYSQL" [style]="{'width':'150px'}"></p-toggleButton>
<p-toggleButton offLabel="Tomcat" onLabel="Tomcat" [(ngModel)]="Tomcat" [style]="{'width':'150px'}"></p-toggleButton>

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

@@ -2,10 +2,12 @@ import {
AfterContentInit, Component,
OnInit
} from '@angular/core';
import { Anim } from './animation';
@Component({
selector: 'of-discovery-search-filter',
templateUrl: './search-filter.component.html',
animations: Anim
})
export class SearchFilterComponent implements OnInit, AfterContentInit {

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

@@ -1,4 +1,7 @@
<div class="ui-g">
<p-button label="Stop" (click)="stop.emit()"></p-button>
</div>
<p-button label="Stop" (click)="onStop()"></p-button>
<div *ngFor="let data of tempData" class="ui-g-12 ui-md-12" @discoveryResultAnim>
<p-button label="TEST" icon="fa fa-check" iconPos="left"></p-button>
</div>
</div>

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

@@ -1,19 +1,44 @@
import {
AfterContentInit, Component, Input,
OnInit,
EventEmitter,
Output
Output,
OnChanges,
SimpleChanges
} from '@angular/core';
import { Anim } from './animation';
@Component({
selector: 'of-discovery-result',
templateUrl: './search-result.component.html',
animations: Anim
})
export class SearchResultComponent {
export class SearchResultComponent implements OnChanges {
@Output() stop = new EventEmitter();
@Input() started: boolean;
tempData = [];
tempTimer;
constructor(
) {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['started'] && changes['started'].currentValue) {
this.tempTimer = setInterval(() => { this.tempFunc(); }, 1000);
}
}
onStop() {
this.stop.emit();
clearInterval(this.tempTimer);
}
tempFunc() {
this.tempData.push({
name: 'aaa'
});
}
}

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

@@ -11,5 +11,5 @@ export const COMPONENTS = [
SearchConfigComponent,
SearchFilterComponent,
SearchResultComponent,
IpInputComponent
IpInputComponent,
];