test

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

@@ -16,9 +16,7 @@
 
   <div class="ui-g-12 ui-md-9">
     <p-panel>
-      <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onStop()"
+      <!-- <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onRequestStop()"></button> -->
-        [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"

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

@@ -56,7 +56,15 @@ export class DiscoveryComponent implements OnDestroy {
     this.requested = true;
     this.discoverZone = dz;
 
-    this.discoveryService.discoverZone(this.selectedProbe.probe.probeKey, dz);
+    // TODO: fix
+    const zone: Zone = {
+      network: '192.168.1.0/24',
+      ipv4: '192.168.1.101',
+      iface: 'enp3s0',
+      mac: '44:8a:5b:f1:f1:f3',
+      hosts: null,
+    };
+    this.discoveryService.discoverHost(this.selectedProbe.probe.probeKey, zone, dz.discoverHost);
 
     this.discoverySubscription = this.discoverySubscriber.observable().pipe(
       map((discoveryNotify: DiscoveryNotify) => {
@@ -67,6 +75,7 @@ export class DiscoveryComponent implements OnDestroy {
             break;
           }
           case 'DiscoveryService.discoveryStop': {
+            alert('Stopped');
             const stopDate = discoveryNotify.params as Date;
 
             this.discoverySubscription.unsubscribe();
@@ -75,7 +84,7 @@ export class DiscoveryComponent implements OnDestroy {
             break;
           }
           case 'DiscoveryService.discoveredZone': {
-            const zone = discoveryNotify.params as Zone;
+            const _zone = discoveryNotify.params as Zone;
             break;
           }
           case 'DiscoveryService.discoveredHost': {
@@ -105,8 +114,9 @@ export class DiscoveryComponent implements OnDestroy {
     ).subscribe();
   }
 
-  onRequestDiscoveryStop() {
+  onRequestStop() {
     this.discoverZone = null;
     this.requested = false;
+    this.discoveryService.stopDiscovery(this.selectedProbe.probe.probeKey);
   }
 }

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

@@ -1,8 +1,29 @@
 <div class="ui-g">
+  <input type="text" pInputText placeholder="Search..." [(ngModel)]="filterWord" (keyup)="onSearch($event)">
 
-  <input type="text" pInputText placeholder="Search..." [(ngModel)]="searchWord" (keyup)="onSearch($event)">
+  <!-- <div class="ui-g">
+    <div *ngFor="let service of services">
+        <p-toggleButton  offLabel="{{service.serviceName}}" onLabel="{{service.serviceName}}" 
+        [style]="{'width':'100px'}"
+        (onChange)="onServiceFilter($event, service)"
+        ></p-toggleButton>
+    </div>
+  </div> -->
 
-  <div class="ui-g" @discoveryResultAnim>
+  <div class="ui-g" dir="rtl">
-    <p-toggleButton *ngFor="let service of services" offLabel="{{service.description}}" onLabel="{{service.description}}" [style]="{'width':'150px'}"></p-toggleButton>
+    <a style="cursor: pointer" (click)="onUnselectAll()">Unselect All</a>
+    <a style="cursor: pointer" (click)="onSelectAll()">Select All</a>
   </div>
+  <p-table selectionMode="multiple" [value]="services" [(selection)]="filterServices" dataKey="serviceName" (onRowSelect)="onSelect($event.data)"
+    (onRowUnselect)="onUnselect($event.data)">
+    <ng-template pTemplate="body" let-rowData let-columns="columns">
+      <tr [pSelectableRow]="rowData">
+        <td>
+          <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
+          {{rowData.serviceName}}
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+
 </div>

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

@@ -15,7 +15,8 @@ import { Service } from '@overflow/commons-typescript/model/discovery';
 export class SearchFilterComponent implements OnInit {
 
   services: Service[] = [];
-  searchWord: string;
+  filterWord: string;
+  filterServices = [];
 
   @Output() search = new EventEmitter<string>();
   @Output() serviceSelect = new EventEmitter<Service[]>();
@@ -28,16 +29,59 @@ export class SearchFilterComponent implements OnInit {
   }
 
   onSearch(e) {
-    if (e.code !== 'Enter') {
+    if (e.key !== 'Enter') {
       return;
     }
-    this.search.emit(this.searchWord);
+    this.search.emit(this.filterWord);
   }
 
   addService(service: Service) {
-    if (this.services.includes(service)) {
+    if (service.serviceName.indexOf('Not Supported Service') >= 0) {
       return;
     }
-    this.services.push(service);
+    let exist = false;
+    this.services.forEach(value => {
+      if (value.serviceName === service.serviceName) {
+        exist = true;
+        return;
+      }
+    });
+    if (!exist) {
+      this.services.push(service);
+      this.filterServices.push(service);
+    }
   }
+
+  onServiceFilter(e, service: Service) {
+    // if (e.checked) {
+    //   this.filterServices.push(service);
+    // } else {
+    //   const index = this.filterServices.indexOf(service);
+    //   this.filterServices.splice(index, 1);
+    // }
+
+    this.serviceSelect.emit(this.filterServices);
+  }
+
+
+  onSelectAll() {
+    this.filterServices = [];
+    this.services.forEach((value) => {
+      this.filterServices.push(value);
+    });
+    this.serviceSelect.emit(this.filterServices);
+  }
+
+  onUnselectAll() {
+    this.filterServices = [];
+    this.serviceSelect.emit(this.filterServices);
+  }
+
+  onSelect(service: Service) {
+    this.serviceSelect.emit(this.filterServices);
+  }
+  onUnselect(service: Service) {
+    this.serviceSelect.emit(this.filterServices);
+  }
+
 }

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

@@ -16,12 +16,12 @@
         <!-- HOST node template -->
         <ng-template let-node pTemplate="HOST">
             <div @discoveryResultAnim>
-                <div *ngIf="checkUnhighligt(node.label) else normHost">
+                <div *ngIf="checkUnhighligtHost(node.label) else normHost">
                     <div>{{node.label}}</div>
                 </div>
                 <ng-template #normHost>
-                    <p-toggleButton onLabel="{{node.label}} {{node.data.openPorts.length}}" offLabel="{{node.label}} {{node.data.openPorts.length}}"
+                    <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
-                        onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+                        (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
                 </ng-template>
             </div>
         </ng-template>
@@ -29,13 +29,15 @@
         <!-- SERVICE node template -->
         <ng-template let-node pTemplate="SERVICE">
             <div @discoveryResultAnim>
-                <div *ngIf="checkUnhighligt(node.label) else normService">
+                <div *ngIf="checkHighligtService(node.data.name) else unhighlight">
-                    <div>{{node.label}} {{node.data.portType}}</div>
-                </div>
-                <ng-template #normService>
                     <p-toggleButton onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
                         onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+                </div>
+
+                <ng-template #unhighlight>
+                    <div>{{node.label}} {{node.data.portType}}</div>
                 </ng-template>
+
             </div>
         </ng-template>
 

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

@@ -107,10 +107,11 @@ export class SearchResultComponent implements OnInit {
       children: []
     });
   }
+
   addService(service: Service) {
     const targetHostNode = this.findHostNodeByService(service);
     const idx = this.findServiceIndex(targetHostNode.children, service);
-    targetHostNode.children[idx] = {
+    targetHostNode.children.splice(idx, 0, {
       type: 'SERVICE',
       label: service.serviceName + ' (' + service.port.portNumber + ')',
       data: {
@@ -119,11 +120,11 @@ export class SearchResultComponent implements OnInit {
         portType: service.port.portType,
         portNumber: service.port.portNumber,
       },
-    };
+    });
   }
   addPort(port: Port) {
     this.hostNode.forEach(node => {
-      if (node.data.id === port.host.id ) {
+      if (node.data.id === port.host.id) {
         node.data.openPorts.push(port);
         return;
       }
@@ -153,12 +154,12 @@ export class SearchResultComponent implements OnInit {
   findServiceIndex(serviceNodes: TreeNode[], service: Service) {
     let index = 0;
     serviceNodes.forEach(node => {
-      if (node.data.portNumber < service.port.portNumber) {
+      // if (node.data.portNumber < service.port.portNumber) {
-        index++;
-      }
-      // if (!node.data.name.toUpperCase().localeCompare(service.serviceName.toUpperCase())) {
       //   index++;
       // }
+      if (node.data.name.toUpperCase().localeCompare(service.serviceName.toUpperCase()) === -1) {
+        index++;
+      }
     });
     return index;
   }
@@ -166,8 +167,8 @@ export class SearchResultComponent implements OnInit {
   findHostNodeByService(service: Service) {
     let targetHost = null;
     this.hostNode.forEach((value, i) => {
-      if (value.data.id === service.port.host.id) {
+      if (value.data.ip === this.convertIPtoNumber(service.port.host.ipv4)) {
-        targetHost = this.hostNode[i];
+        targetHost = value;
         return;
       }
     });
@@ -183,10 +184,28 @@ export class SearchResultComponent implements OnInit {
     });
   }
 
-  checkUnhighligt(label: string) {
+  checkUnhighligtHost(label: string) {
-    if (this.filterWord && label.indexOf(this.filterWord) === -1) {
+    if (this.filterWord &&
+      label.toUpperCase().indexOf(this.filterWord.toUpperCase()) === -1) {
       return true;
     }
     return false;
   }
+
+  checkHighligtService(name: string) {
+    // if (this.filterWord &&
+    //   name.toUpperCase().indexOf(this.filterWord.toUpperCase()) === -1) {
+    //   return true;
+    // }
+    let highlight = false;
+    if (this.filterServices) {
+      for (const service of this.filterServices) {
+        if (service.serviceName === name) {
+          highlight = true;
+          break;
+        }
+      }
+    }
+    return highlight;
+  }
 }

@overflow/discovery/service/discovery.service.ts

@@ -34,4 +34,7 @@ export class DiscoveryService {
   public discoverService(probeID: string, port: Port, discoverService: MDDiscoverService): void {
     this.rpcService.send('DiscoveryService.discoverService', probeID, port, discoverService);
   }
+  public stopDiscovery(probeID: string): void {
+    this.rpcService.send('DiscoveryService.stopDiscovery', probeID);
+  }
 }

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.103:19090/webapp',
+    url: 'ws://192.168.1.101:19090/webapp',
     reconnectInterval: 5000,
     reconnectRetry: 10,
   },