test

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

@@ -9,7 +9,7 @@
         <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 #discoveryFilter></of-discovery-search-filter>
+        <of-discovery-search-filter #discoveryFilter (search)="filterWord=$event" (serviceSelect)="filterServices=$event"></of-discovery-search-filter>
       </p-accordionTab>
     </p-accordion>
   </div>
@@ -19,7 +19,12 @@
       <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onStop()"
         [disabled]="!started"></button>
       <!-- <of-discovery-result *ngIf="requested else info" [started]="requested" (stop)="onRequestDiscoveryStop($event)"></of-discovery-result> -->
-      <of-discovery-result #discoveryResult *ngIf="requested else info" [probeHost]="selectedProbe" [started]="requested"></of-discovery-result>
+      <of-discovery-result #discoveryResult *ngIf="requested else info" 
+      [probeHost]="selectedProbe" 
+      [started]="requested"
+      [filterWord]="filterWord"
+      [filterServices]="filterServices"
+      ></of-discovery-result>
     </p-panel>
   </div>
 </div>

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

@@ -28,6 +28,9 @@ export class DiscoveryComponent implements OnDestroy {
   requested: boolean;
   discoverZone: DiscoverZone;
 
+  filterWord: string;
+  filterServices: Service[];
+
   @ViewChild('discoveryResult') discoveryResult: SearchResultComponent;
   @ViewChild('discoveryFilter') discoveryFilter: SearchFilterComponent;
 
@@ -48,9 +51,9 @@ export class DiscoveryComponent implements OnDestroy {
   onRequestDiscovery(dz: DiscoverZone) {
     this.requested = true;
     this.discoverZone = dz;
+    // this.discoveryService.discoverZone(this.selectedProbe.probe.probeKey, dz);
     this.discoverySubscription = this.discoverySubscriber.observable().pipe(
       tap(() => {
-        this.discoveryService.discoverZone(this.selectedProbe.probe.probeKey, dz);
       }),
       map((discoveryNotify: DiscoveryNotify) => {
         switch (discoveryNotify.method) {
@@ -69,22 +72,22 @@ export class DiscoveryComponent implements OnDestroy {
           }
           case 'DiscoveryService.discoveredZone': {
             const zone = discoveryNotify.params as Zone;
-
             break;
           }
           case 'DiscoveryService.discoveredHost': {
             const host = discoveryNotify.params as Host;
-
+            this.discoveryResult.addHost(host);
             break;
           }
           case 'DiscoveryService.discoveredPort': {
             const port = discoveryNotify.params as Port;
-
+            this.discoveryResult.addPort(port);
             break;
           }
           case 'DiscoveryService.discoveredService': {
             const service = discoveryNotify.params as Service;
-
+            this.discoveryFilter.addService(service);
+            this.discoveryResult.addService(service);
             break;
           }
           default: {

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

@@ -1,16 +1,8 @@
 <div class="ui-g">
-  <div class="ui-g-12">
-    <label>IP Adress</label>
-    <input type="hidden" >
-  </div>
-  <div class="ui-g-12">
-    <of-ip-input [hostIp]="startHostIp" (inputIp)="onInputIP($event, 0)" [title]="'Start'"></of-ip-input>
-  </div>
-  <div class="ui-g-12 ui-bottom-space-20">
-    <of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
-  </div>
+
+  <input #filterWord type="text" [(ngModel)]="searchWord" pInputText (keyup)="onSearch($event)"/>
 
   <div class="ui-g" @discoveryResultAnim>
-    <p-toggleButton *ngFor="let service of services" offLabel="{{service.description}}" onLabel="{{service.description}}" [style]="{'width':'150px'}" ></p-toggleButton>
+    <p-toggleButton *ngFor="let service of services" offLabel="{{service.description}}" onLabel="{{service.description}}" [style]="{'width':'150px'}"></p-toggleButton>
   </div>
-</div>
+</div>

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

@@ -1,6 +1,8 @@
 import {
-  AfterContentInit, Component,
-  OnInit
+  Component,
+  OnInit,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { Anim } from './animation';
 import { Service } from '@overflow/commons-typescript/model/discovery';
@@ -10,12 +12,13 @@ import { Service } from '@overflow/commons-typescript/model/discovery';
   templateUrl: './search-filter.component.html',
   animations: Anim
 })
-export class SearchFilterComponent implements OnInit, AfterContentInit {
-
-  startHostIp: string;
-  endHostIp: string;
+export class SearchFilterComponent implements OnInit {
 
   services: Service[] = [];
+  searchWord: string;
+
+  @Output() search = new EventEmitter<string>();
+  @Output() serviceSelect = new EventEmitter<Service[]>();
 
   constructor(
   ) {
@@ -24,11 +27,11 @@ export class SearchFilterComponent implements OnInit, AfterContentInit {
   ngOnInit() {
   }
 
-  ngAfterContentInit() {
-  }
-
-  onInputIP(event, idx) {
-
+  onSearch(e) {
+    if (e.code !== 'Enter') {
+      return;
+    }
+    this.search.emit(this.searchWord);
   }
 
   addService(service: Service) {

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

@@ -1,6 +1,7 @@
 <div>
     <button pButton type="button" label="TestHost" (click)="tempHost()"></button>
     <button pButton type="button" label="TestService" (click)="tempService()"></button>
+    <button pButton type="button" label="tempPort" (click)="tempPort()"></button>
 
     <p-tree [value]="zoneNode" layout="vertical">
 
@@ -15,8 +16,10 @@
         <!-- HOST node template -->
         <ng-template let-node pTemplate="HOST">
             <div @discoveryResultAnim>
-                <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'150px'}"
-                    (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+                <div>
+                    <p-toggleButton onLabel="{{node.label}} {{node.data.openPorts.length}}" offLabel="{{node.label}} {{node.data.openPorts.length}}"
+                        onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+                </div>
             </div>
         </ng-template>
 

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

@@ -20,6 +20,9 @@ import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 export class SearchResultComponent implements OnInit {
 
   @Input() probeHost: ProbeHost;
+  @Input() filterWord: string;
+  @Input() filterServices: Service[];
+
   @Output() stop = new EventEmitter();
   @Input() started: boolean; // Temporary
 
@@ -51,7 +54,21 @@ export class SearchResultComponent implements OnInit {
       id: this.tempHostId++,
       ipv4: '192.168.1.' + idx,
     };
-    this.addHostNode(host);
+    this.addHost(host);
+  }
+
+  tempPort() {
+    const idx = Math.floor(Math.random() * (5000));
+    const hostId = Math.floor(Math.random() * (this.tempHostId - 1));
+    const port: Port = {
+      id: idx,
+      portNumber: idx,
+      portType: idx % 2 === 0 ? 'TCP' : 'UDP',
+      host: {
+        id: hostId
+      },
+    };
+    this.addPort(port);
   }
 
   tempService() {
@@ -68,10 +85,10 @@ export class SearchResultComponent implements OnInit {
         }
       }
     };
-    this.addServiceNode(service);
+    this.addService(service);
   }
 
-  addHostNode(host: Host) {
+  addHost(host: Host) {
     const idx = this.findHostIndex(host);
     this.hostNode.splice(idx, 0, {
       type: 'HOST',
@@ -79,12 +96,13 @@ export class SearchResultComponent implements OnInit {
       data: {
         id: host.id,
         ip: this.convertIPtoNumber(host.ipv4),
+        openPorts: []
       },
       expanded: true,
       children: []
     });
   }
-  addServiceNode(service: Service) {
+  addService(service: Service) {
     const targetHostNode = this.findHostNodeByService(service);
     const idx = this.findServiceIndex(targetHostNode.children, service);
     targetHostNode.children[idx] = {
@@ -97,7 +115,14 @@ export class SearchResultComponent implements OnInit {
       },
     };
   }
-
+  addPort(port: Port) {
+    this.hostNode.forEach(node => {
+      if (node.data.id === port.host.id ) {
+        node.data.openPorts.push(port);
+        return;
+      }
+    });
+  }
 
   onTargetSelect(e, data) {
     if (e.checked) {
@@ -148,4 +173,8 @@ export class SearchResultComponent implements OnInit {
       return prev + curr;
     });
   }
+
+  checkFilter(label: string) {
+    return label.indexOf(this.filterWord) > 0 ? true : false;
+  }
 }

src/environments/environment.ts

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