discovery

@overflow/discovery/component/discovery/animation.ts

@@ -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 }),
+        ]),
+    ]),
+];

@overflow/discovery/component/discovery/discovery.component.html

@@ -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">
+      <p-accordionTab header="Discovery Settings" [selected]="true">
-        <of-probe-summary *ngIf="requested" [probeHost]="selectedProbe"></of-probe-summary>
+        <span *ngIf="!selectedProbe">Choose a Probe to perform Discovery.</span>
-        <of-discovery-search-config *ngIf="!requested && selectedProbe" [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
+        <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>

@overflow/discovery/component/discovery/discovery.component.ts

@@ -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();
   }
 }

@overflow/discovery/component/discovery/search-config.component.html

@@ -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>

@overflow/discovery/component/discovery/search-config.component.ts

@@ -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.startIP = cidr.start();
-    this.endIP = cidr.addressEnd.address;
+    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() {
+
+  }
+
 }

@overflow/discovery/component/discovery/search-filter.component.html

@@ -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>

@overflow/discovery/component/discovery/search-filter.component.ts

@@ -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 {
 

@overflow/discovery/component/discovery/search-result.component.html

@@ -1,4 +1,7 @@
 <div class="ui-g">
-    <p-button label="Stop" (click)="stop.emit()"></p-button>
+    <p-button label="Stop" (click)="onStop()"></p-button>
-</div>
 
+    <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>

@overflow/discovery/component/discovery/search-result.component.ts

@@ -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'
+    });
+  }
+
 }

@overflow/discovery/component/index.ts

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

@overflow/discovery/container/discovery-result/discovery-result-container.component.html

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

@overflow/discovery/container/discovery-result/discovery-result-container.component.ts

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

@overflow/discovery/container/discovery/discovery-container.component.html

@@ -1,2 +1,3 @@
 <of-probe-selector-container [probeHostID]="probeHostID" (select)="onProbeSelect($event)"></of-probe-selector-container>
-<of-discovery [selectedProbe]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery>
+<of-discovery [selectedProbe]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"
+    (requestStop)="onRequestStop($event)"></of-discovery>

@overflow/discovery/container/discovery/discovery-container.component.ts

@@ -27,4 +27,8 @@ export class DiscoveryContainerComponent {
     // this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
     //   { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
   }
+
+  onRequestStop() {
+    console.log('onRequestStop');
+  }
 }

@overflow/discovery/container/index.ts

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

@overflow/probe/component/summary/summary.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="probeHost else info">
+<div *ngIf="probeHost">
   <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>
@@ -9,7 +9,3 @@
   <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>

package.json

@@ -42,11 +42,12 @@
     "angular-l10n": "^5.0.0",
     "angularx-qrcode": "^1.1.7",
     "chart.js": "^2.7.2",
-    "ip-cidr": "^2.0.0",
     "core-js": "^2.5.4",
+    "ip-cidr": "^2.0.0",
     "ip-range-check": "0.0.2",
     "jquery": "^3.3.1",
     "ngx-cookie-service": "^1.0.10",
+    "node-cidr": "^1.0.0",
     "openssl": "^1.1.0",
     "primeng": "^5.2.4",
     "reflect-metadata": "^0.1.12",