discovery

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

@@ -1,10 +1,11 @@
+<of-probe-summary *ngIf="selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
 <div class="ui-g">
   <div class="ui-g-12 ui-md-3">
     <p-accordion [multiple]="true">
       <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>
+        <of-discovery-request-summary *ngIf="discoverZone" @discoveryFilterAnim  [discoverZone]="discoverZone"></of-discovery-request-summary>
       </p-accordionTab>
       <p-accordionTab header="Filter" [selected]="requested" [disabled]="!requested">
         <of-discovery-search-filter></of-discovery-search-filter>
@@ -14,7 +15,11 @@
 
   <div class="ui-g-12 ui-md-9">
     <p-panel>
-      <of-discovery-result [started]="requested" (stop)="onStop($event)"></of-discovery-result>
+      <of-discovery-result *ngIf="requested else info" [started]="requested" (stop)="onRequestDiscoveryStop($event)"></of-discovery-result>
     </p-panel>
   </div>
 </div>
+
+<ng-template #info>
+  INFO
+</ng-template>

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

@@ -16,6 +16,8 @@ export class DiscoveryComponent  {
   @Output() requestDiscovery = new EventEmitter<DiscoverZone>();
   @Output() requestStop = new EventEmitter();
 
+  discoverZone: DiscoverZone;
+
   requested: boolean;
 
   constructor(
@@ -24,11 +26,13 @@ export class DiscoveryComponent  {
 
   onRequestDiscovery(dz: DiscoverZone) {
     this.requested = true;
+    this.discoverZone = dz;
     this.requestDiscovery.emit(dz);
   }
 
-  onStop() {
+  onRequestDiscoveryStop() {
     this.requested = false;
+    this.discoverZone = null;
     this.requestStop.emit();
   }
 }

@overflow/discovery/component/discovery/request-summary.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="discoverZone">
+    <of-key-value [key]="'Host Range'" [value]="hostRange"></of-key-value>
+    <of-key-value [key]="'Port Range'" [value]="portRange"></of-key-value>
+    <span *ngIf="discoverZone.discoverHost.discoverPort.includeTCP">TCP</span>
+    <span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
+    <div *ngFor="let service of services">
+      <span>{{service}}</span>
+    </div>
+</div>

@overflow/discovery/component/discovery/request-summary.component.ts

@@ -0,0 +1,32 @@
+import {
+  Component, Input, OnChanges, SimpleChanges,
+} from '@angular/core';
+import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
+
+@Component({
+  selector: 'of-discovery-request-summary',
+  templateUrl: './request-summary.component.html',
+})
+export class RequestSummaryComponent implements OnChanges {
+
+  @Input() discoverZone: DiscoverZone;
+  hostRange: string;
+  hostExclude: string;
+  portRange: string;
+  portExclude: string;
+  services: string[];
+
+  constructor(
+  ) {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.hostRange = this.discoverZone.discoverHost.firstScanRangev4
+      + ' ~ '
+      + this.discoverZone.discoverHost.lastScanRangev4;
+    this.portRange = this.discoverZone.discoverHost.discoverPort.firstScanRange
+     + ' ~ '
+     + this.discoverZone.discoverHost.discoverPort.lastScanRange;
+    this.services = this.discoverZone.discoverHost.discoverPort.discoverService.includeServices;
+  }
+}

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

@@ -25,8 +25,8 @@
       <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" 
+      <p-multiSelect (onFocus)="onIPExcludeFocus()" [options]="ipArray" optionLabel="ip" [(ngModel)]="excludeIPs" [panelStyle]="{minWidth:'12em'}"
-      [panelStyle]="{minWidth:'12em'}" selectedItemsLabel="{0} hosts are excluded." maxSelectedLabels="2" defaultLabel="Add exclude IP"></p-multiSelect>
+        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}}
@@ -67,7 +67,10 @@
     </div>
   </div>
   <div class="ui-g-12">
-    <a style="cursor: pointer" (click)="displayPortExclude = true">Add Exclude Ports</a>
+    <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">
     {{portErrMsg}}
@@ -81,10 +84,21 @@
   </div>
 
   <div class="ui-g-12 ui-g-nopad">
-    <of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
+    <!-- <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>
+
+<p-dialog [(visible)]="portExcludeDisplay" [modal]="true" [responsive]="true" [width]="400">
+  <p-header>
+    Add Ports to exclude.
+  </p-header>
+  <p-chips [(ngModel)]="portChips" [addOnTab]="true" [allowDuplicate]="false" (onAdd)="onAddExcludePort($event)" (onRemove)="onRemoveExcludePort($event)"
+    [max]="20" placeholder="e.g. 1025~65535"></p-chips>
+  <p-footer>
+    <button type="button" pButton icon="fa-check" (click)="portExcludeDisplay=false" label="Done"></button>
+  </p-footer>
+</p-dialog>

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

@@ -40,6 +40,8 @@ export class SearchConfigComponent implements OnChanges {
 
   fixedIPrange: number;
   ipArray = [];
+  portExcludeDisplay = false;
+  portChips = [];
 
   constructor(
   ) {
@@ -113,7 +115,7 @@ export class SearchConfigComponent implements OnChanges {
         lastScanRange: Number(this.endPort),
         includeTCP: this.tcpChecked,
         includeUDP: this.udpChecked,
-        excludePorts: null,
+        excludePorts: this.excludePorts,
         discoverService: discoverService
       };
     }
@@ -121,7 +123,8 @@ export class SearchConfigComponent implements OnChanges {
       discoverHost: {
         firstScanRangev4: this.startIP,
         lastScanRangev4: this.endIP,
-        discoverPort: discoverPort
+        discoverPort: discoverPort,
+        excludeHostsv4: this.excludeIPs,
       },
     };
 
@@ -249,11 +252,57 @@ export class SearchConfigComponent implements OnChanges {
   }
 
 
-  onSaveIPExclude() {
+  onAddExcludePort(event) {
-
+    const port = event.value.replace(/\s/g, '');
+    if (port.indexOf('~') > 0) { // e.g. 1~3000
+      const splited = port.split('~');
+      this.portChips.pop();
+      const from = Number(splited[0]);
+      const to = Number(splited[1]);
+      if (this.checkInvalidPort(from)
+        || this.checkInvalidPort(to)
+        || !Number.isInteger(from)
+        || !Number.isInteger(to)) {
+        return;
+      }
+      const chipItem = 'All ' + from + ' ~ ' + to;
+      this.portChips.push(chipItem);
+      for (let i = from; i <= to; i++) {
+        this.excludePorts.push(String(i));
+      }
+    } else {
+      const num = Number(event.value);
+      if (!Number.isInteger(num) || this.checkInvalidPort(num) || this.checkExistExcludePort(event.value)) {
+        this.portChips.pop();
+        return;
+      }
+      this.excludePorts.push(event.value);
+    }
   }
-  onSavePortExclude() {
 
+  onRemoveExcludePort(event) {
+    if (event.value.indexOf('~') > 0) {
+      // e.g. 'All 1 ~ 30'
+      const splited = event.value.replace(/\s/g, '').replace('All', '').split('~');
+      for (let i = Number(splited[0]); i <= Number(splited[1]); i++) {
+        console.log(String(i));
+        const index = this.excludePorts.indexOf(String(i));
+        this.excludePorts.splice(index, 1);
+      }
+      return;
+    }
+    const idx = this.excludePorts.indexOf(event.value);
+    this.excludePorts.splice(idx, 1);
+  }
+
+  checkExistExcludePort(portNum) {
+    return this.excludePorts.find((value) => {
+      return value === portNum;
+    });
+  }
+
+  checkInvalidPort(port) {
+    return port <= 0 || port > 65535;
   }
 
 }

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

@@ -1,5 +1,6 @@
 <div class="ui-g">
-    <p-button label="Stop" (click)="onStop()"></p-button>
+    <button class="ui-button-danger ui-button-width-fit" type="button" 
+    label="Stop" icon="ui-icon-close" pButton (click)="onStop()" [disabled]="!started"></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>

@overflow/discovery/component/index.ts

@@ -4,6 +4,7 @@ import { SearchConfigComponent } from './discovery/search-config.component';
 import { SearchFilterComponent } from './discovery/search-filter.component';
 import { SearchResultComponent } from './discovery/search-result.component';
 import { IpInputComponent } from './discovery/ip-input.component';
+import { RequestSummaryComponent } from './discovery/request-summary.component';
 
 export const COMPONENTS = [
   ServiceSelectorComponent,
@@ -12,4 +13,5 @@ export const COMPONENTS = [
   SearchFilterComponent,
   SearchResultComponent,
   IpInputComponent,
+  RequestSummaryComponent,
 ];

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

@@ -1,11 +1,14 @@
-<div *ngIf="probeHost">
+<div *ngIf="probeHost" class="ui-g">
+  <div class="ui-g-12 ui-md-4 ui-nopad ui-key-value">
+    <of-key-value [key]="'Status'" [value]="connectionStatus"></of-key-value>
     <of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
-  <of-key-value [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
+  </div>
-  <of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
+  <div class="ui-g-12 ui-md-4 ui-nopad ui-key-value">
-  <of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
+    <of-key-value [key]="'Name'" [value]="probeHost.probe.displayName"></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>
+  <div class="ui-g-12 ui-md-4 ui-nopad ui-key-value">
+      <of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
+      <of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
+  </div>
+</div>

@overflow/probe/component/summary/summary.component.ts

@@ -1,15 +1,20 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
 
 @Component({
   selector: 'of-probe-summary',
   templateUrl: './summary.component.html',
 })
-export class ProbeSummaryComponent  {
+export class ProbeSummaryComponent implements OnChanges {
 
   @Input() probeHost: ProbeHost;
+  connectionStatus: string;
 
   constructor() {
   }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.connectionStatus = this.probeHost.probe.connectDate ? 'Connected' : 'Not connected';
+  }
 }