loadChildren

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

@@ -15,13 +15,14 @@
         <!-- HOST node template -->
         <ng-template let-node pTemplate="HOST">
             <div @discoveryResultAnim>
-                <div *ngIf="checkHighligtHost(node.label) else unhighlightHost">
+                <div *ngIf="checkHighligt(node.label) else unhighlightHost">
                     <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
                         (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                 </div>
 
                 <ng-template #unhighlightHost>
-                    <div style="opacity: 0.2">{{node.label}}</div>
+                    <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}"
+                        (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                 </ng-template>
             </div>
         </ng-template>
@@ -29,20 +30,21 @@
         <!-- SERVICE node template -->
         <ng-template let-node pTemplate="SERVICE">
             <div @discoveryResultAnim>
-                <div *ngIf="checkHighligtService(node.data.name) else unhighlightServ">
+                <div *ngIf="checkHighligt(node.data.name) else unhighlightServ">
                     <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)"></p-toggleButton>
+                        onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node.data.target)"></p-toggleButton>
                 </div>
 
                 <ng-template #unhighlightServ>
-                    <div style="opacity: 0.2">{{node.label}} {{node.data.portType}}</div>
+                    <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', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node.data.target)"></p-toggleButton>
                 </ng-template>
 
             </div>
         </ng-template>
     </p-tree>
 
-    <button class="ui-button-width-fit" [disabled]="selectedItems.length === 0"
+    <button class="ui-button-width-fit" [disabled]="selectedItems.length === 0" type="button" label="Save" icon="ui-icon-close"
-    type="button" label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>
+        pButton (click)="saveTargets()"></button>
 
 </p-panel>

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

@@ -36,8 +36,8 @@ export class SearchResultComponent implements OnInit, OnChanges {
   selectedItems: TreeNode[] = [];
   msgs: Message[];
 
-  infraHosts = [];
+  discoveredHosts: Host[] = [];
-  infraServices = [];
+  discoveredServices: Service[] = [];
 
   constructor(
   ) {
@@ -56,7 +56,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['finished'] && changes['finished'].currentValue === true) {
-      // this.saveInfras();
+      this.saveInfras();
       // TODO: Comes after save infra
       this.msgs = [];
       this.msgs.push({
@@ -68,6 +68,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
 
 
   addHost(host: Host) {
+    this.discoveredHosts.push(host);
     const idx = this.findHostIndex(host);
     this.hostNode.splice(idx, 0, {
       type: 'HOST',
@@ -77,7 +78,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
         ipv6: host.ipv6,
         mac: host.mac,
         openPorts: [],
-        zone: host.zone,
+        target: host
       },
       expanded: true,
       children: []
@@ -85,6 +86,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
   }
 
   addService(service: Service) {
+    this.discoveredServices.push(service);
     const targetHostNode = this.findHostNodeByService(service);
     const idx = this.findServiceIndex(targetHostNode.children, service);
     targetHostNode.children.splice(idx, 0, {
@@ -94,7 +96,7 @@ export class SearchResultComponent implements OnInit, OnChanges {
         name: service.serviceName,
         portType: service.port.portType,
         portNumber: service.port.portNumber,
-        host: service.port.host
+        target: service
       },
     });
   }
@@ -160,50 +162,45 @@ export class SearchResultComponent implements OnInit, OnChanges {
     });
   }
 
-  checkHighligtHost(label: string) {
+  checkHighligt(label: string) {
-    if (!this.filterWord) {
+    let highlight = true;
-      return true;
+    if (this.filterWord && (label.toUpperCase().indexOf(this.filterWord.toUpperCase()) < 0)) {
+      highlight = false;
     }
-    if (this.filterWord &&
+    if (this.filterServices[label] === false) {
-      label.toUpperCase().indexOf(this.filterWord.toUpperCase()) > 0) {
+      highlight = false;
-      return true;
     }
-    return false;
+    return highlight;
   }
 
-  checkHighligtService(name: string) {
+  saveInfras() {
-    if (this.filterServices && (this.filterServices[name])) {
+    this.discoveredHosts.forEach(host => {
-      return true;
+      const infraHost: InfraHost = {
-    }
+        probe: this.probeHost.probe,
-    return false;
+        infraType: {
-  }
+          id: 2
+        },
+        os: {},
+        ipv4: host.ipv4,
+        ipv6: host.ipv6,
+        mac: host.mac,
+      };
+    });
 
-  saveInfras(host: Host, service: Service) {
+    this.discoveredServices.forEach(service => {
-    //  Host
+      const infraService: InfraService = {
-    const infraHost: InfraHost = {
+        probe: this.probeHost.probe,
-      probe: this.probeHost.probe,
+        infraType: {
-      infraType: {
+          id: 7
-        id: 2
+        },
-      },
+        host: {
-      os: {},
+        },
-      ipv4: host.ipv4,
+        portType: service.port.portType,
-      ipv6: host.ipv6,
+        port: service.port.portNumber,
-      mac:  host.mac,
+        vendor: {
-    };
+        }
-
+      };
-    // Service
+    });
-    const infraService: InfraService = {
-      probe: this.probeHost.probe,
-      infraType: {
-        id: 7
-      },
-      host: {
-      },
-      portType: service.port.portType,
-      port: service.port.portNumber,
-      vendor: {
-      }
-    };
   }
 
   saveTargets() {