test

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

@@ -55,10 +55,10 @@ export class DiscoveryComponent implements OnDestroy {
   onRequestDiscovery(dz: DiscoverZone) {
     this.requested = true;
     this.discoverZone = dz;
-    // this.discoveryService.discoverZone(this.selectedProbe.probe.probeKey, dz);
+
+    this.discoveryService.discoverZone(this.selectedProbe.probe.probeKey, dz);
+
     this.discoverySubscription = this.discoverySubscriber.observable().pipe(
-      tap(() => {
-      }),
       map((discoveryNotify: DiscoveryNotify) => {
         switch (discoveryNotify.method) {
           case 'DiscoveryService.discoveryStart': {

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

@@ -1,6 +1,6 @@
 <div class="ui-g">
 
-  <input #filterWord type="text" [(ngModel)]="searchWord" pInputText (keyup)="onSearch($event)"/>
+  <input type="text" pInputText placeholder="Search..." [(ngModel)]="searchWord" (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>

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

@@ -16,18 +16,26 @@
         <!-- HOST node template -->
         <ng-template let-node pTemplate="HOST">
             <div @discoveryResultAnim>
-                <div>
+                <div *ngIf="checkUnhighligt(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}}"
                         onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
-                </div>
+                </ng-template>
             </div>
         </ng-template>
 
         <!-- SERVICE node template -->
         <ng-template let-node pTemplate="SERVICE">
             <div @discoveryResultAnim>
-                <p-toggleButton onLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
+                <div *ngIf="checkUnhighligt(node.label) else normService">
+                    <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>
+                </ng-template>
             </div>
         </ng-template>
 

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

@@ -76,11 +76,12 @@ export class SearchResultComponent implements OnInit {
   }
 
   tempService() {
+    const randStr = Math.random().toString(36).substr(2, 5);
     const idx = Math.floor(Math.random() * (255));
     const hostId = Math.floor(Math.random() * (this.tempHostId - 1));
     const service: Service = {
       id: idx,
-      serviceName: 'Service',
+      serviceName: String(randStr),
       port: {
         portNumber: idx,
         portType: idx % 2 === 0 ? 'TCP' : 'UDP',
@@ -111,9 +112,10 @@ export class SearchResultComponent implements OnInit {
     const idx = this.findServiceIndex(targetHostNode.children, service);
     targetHostNode.children[idx] = {
       type: 'SERVICE',
-      label: service.serviceName,
+      label: service.serviceName + ' (' + service.port.portNumber + ')',
       data: {
         id: service.id,
+        name: service.serviceName,
         portType: service.port.portType,
         portNumber: service.port.portNumber,
       },
@@ -154,6 +156,9 @@ export class SearchResultComponent implements OnInit {
       if (node.data.portNumber < service.port.portNumber) {
         index++;
       }
+      // if (!node.data.name.toUpperCase().localeCompare(service.serviceName.toUpperCase())) {
+      //   index++;
+      // }
     });
     return index;
   }
@@ -178,7 +183,10 @@ export class SearchResultComponent implements OnInit {
     });
   }
 
-  checkFilter(label: string) {
-    return label.indexOf(this.filterWord) > 0 ? true : false;
+  checkUnhighligt(label: string) {
+    if (this.filterWord && label.indexOf(this.filterWord) === -1) {
+      return true;
+    }
+    return false;
   }
 }