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></of-discovery-search-filter>
+        <of-discovery-search-filter #discoveryFilter></of-discovery-search-filter>
       </p-accordionTab>
     </p-accordion>
   </div>

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

@@ -10,6 +10,7 @@ import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
 import { DiscoverZone, Zone, Host, Port, Service } from '@overflow/commons-typescript/model/discovery';
 import { DiscoverySubscriber, DiscoveryNotify } from '../subscriber/discovery.subscriber';
 import { SearchResultComponent } from './search-result.component';
+import { SearchFilterComponent } from './search-filter.component';
 
 @Component({
   selector: 'of-discovery',
@@ -28,6 +29,7 @@ export class DiscoveryComponent implements OnDestroy {
   discoverZone: DiscoverZone;
 
   @ViewChild('discoveryResult') discoveryResult: SearchResultComponent;
+  @ViewChild('discoveryFilter') discoveryFilter: SearchFilterComponent;
 
   constructor(
     private discoveryService: DiscoveryService,

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

@@ -30,7 +30,4 @@ export class RequestSummaryComponent implements OnChanges {
     this.services = this.discoverZone.discoverHost.discoverPort.discoverService.includeServices;
   }
 
-  showServices() {
-    return '1/n2/n3/n4';
-  }
 }

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

@@ -10,10 +10,7 @@
     <of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
   </div>
 
-  <div class="ui-g" @discoveryFilterAnim>
+  <div class="ui-g" @discoveryResultAnim>
-    <p-toggleButton offLabel="Oracle" onLabel="Oracle" [(ngModel)]="Oracle" [style]="{'width':'150px'}" ></p-toggleButton>
+    <p-toggleButton *ngFor="let service of services" offLabel="{{service.description}}" onLabel="{{service.description}}" [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>
-    <p-toggleButton offLabel="WMI" onLabel="WMI" [(ngModel)]="WMI" [style]="{'width':'150px'}"></p-toggleButton>
   </div>
 </div>

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

@@ -3,6 +3,7 @@ import {
   OnInit
 } from '@angular/core';
 import { Anim } from './animation';
+import { Service } from '@overflow/commons-typescript/model/discovery';
 
 @Component({
   selector: 'of-discovery-search-filter',
@@ -14,6 +15,8 @@ export class SearchFilterComponent implements OnInit, AfterContentInit {
   startHostIp: string;
   endHostIp: string;
 
+  services: Service[] = [];
+
   constructor(
   ) {
   }
@@ -27,4 +30,11 @@ export class SearchFilterComponent implements OnInit, AfterContentInit {
   onInputIP(event, idx) {
 
   }
+
+  addService(service: Service) {
+    if (this.services.includes(service)) {
+      return;
+    }
+    this.services.push(service);
+  }
 }

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

@@ -134,6 +134,7 @@ export class SearchResultComponent implements OnInit {
     this.hostNode.forEach((value, i) => {
       if (value.data.id === service.port.host.id) {
         targetHost = this.hostNode[i];
+        return;
       }
     });
     return targetHost;