discovery save in progress

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

@@ -19,9 +19,9 @@
       <!-- <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onRequestStop()"></button> -->
       <of-discovery-result #discoveryResult *ngIf="requested else info" 
       [probeHost]="selectedProbe" 
-      [started]="requested"
       [filterWord]="filterWord"
       [filterServices]="filterServices"
+      [finished]="finished"
       ></of-discovery-result>
     </p-panel>
   </div>

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

@@ -31,6 +31,7 @@ export class DiscoveryComponent implements OnDestroy {
   selectedProbe: ProbeHost;
   requested: boolean;
   discoverZone: DiscoverZone;
+  finished: boolean;
 
   filterWord: string;
   filterServices: Service[];
@@ -44,6 +45,7 @@ export class DiscoveryComponent implements OnDestroy {
     private store: Store<any>
   ) {
     this.discoverySubscription = null;
+    this.finished = false;
   }
 
   ngOnDestroy(): void {
@@ -75,9 +77,9 @@ export class DiscoveryComponent implements OnDestroy {
             break;
           }
           case 'DiscoveryService.discoveryStop': {
-            alert('Stopped');
             const stopDate = discoveryNotify.params as Date;
 
+            this.finished = true;
             this.discoverySubscription.unsubscribe();
             this.discoverySubscription = null;
 

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

@@ -1,29 +1,18 @@
 <div class="ui-g">
   <input type="text" pInputText placeholder="Search..." [(ngModel)]="filterWord" (keyup)="onSearch($event)">
 
-  <!-- <div class="ui-g">
+  <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)"
+        [(ngModel)]="filterServices[service.serviceName]"
         ></p-toggleButton>
-    </div>
-  </div> -->
 
-  <div class="ui-g" dir="rtl">
+        <!-- <p-checkbox [(ngModel)]="filterServices" label="{{service.serviceName}}" value="{{service.serviceName}}"></p-checkbox> -->
-    <a style="cursor: pointer" (click)="onUnselectAll()">Unselect All</a>
+
-    <a style="cursor: pointer" (click)="onSelectAll()">Select All</a>
+    </div>
   </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

@@ -16,10 +16,10 @@ export class SearchFilterComponent implements OnInit {
 
   services: Service[] = [];
   filterWord: string;
-  filterServices = [];
+  filterServices = new Map<string, boolean>();
 
   @Output() search = new EventEmitter<string>();
-  @Output() serviceSelect = new EventEmitter<Service[]>();
+  @Output() serviceSelect = new EventEmitter<Map<string, boolean>>();
 
   constructor(
   ) {
@@ -48,8 +48,9 @@ export class SearchFilterComponent implements OnInit {
     });
     if (!exist) {
       this.services.push(service);
-      this.filterServices.push(service);
+      this.filterServices[service.serviceName] = true;
     }
+    this.serviceSelect.emit(this.filterServices);
   }
 
   onServiceFilter(e, service: Service) {
@@ -63,25 +64,4 @@ export class SearchFilterComponent implements OnInit {
     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

@@ -1,10 +1,10 @@
-<div>
+<of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar>
-    <button pButton type="button" label="TestHost" (click)="tempHost()"></button>
+
-    <button pButton type="button" label="TestService" (click)="tempService()"></button>
+<p-panel #content [showHeader]="false" class="block-panel">
-    <button pButton type="button" label="tempPort" (click)="tempPort()"></button>
+
+    <p-messages [(value)]="msgs"></p-messages>
 
     <p-tree [value]="zoneNode" layout="vertical">
-
         <!-- ZONE node template -->
         <ng-template let-node pTemplate="ZONE">
             <div>
@@ -12,16 +12,16 @@
             </div>
         </ng-template>
 
-
         <!-- HOST node template -->
         <ng-template let-node pTemplate="HOST">
             <div @discoveryResultAnim>
-                <div *ngIf="checkUnhighligtHost(node.label) else normHost">
+                <div *ngIf="checkHighligtHost(node.label) else unhighlightHost">
-                    <div>{{node.label}}</div>
-                </div>
-                <ng-template #normHost>
                     <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
                         (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+                </div>
+
+                <ng-template #unhighlightHost>
+                    <div>{{node.label}}</div>
                 </ng-template>
             </div>
         </ng-template>
@@ -29,17 +29,20 @@
         <!-- SERVICE node template -->
         <ng-template let-node pTemplate="SERVICE">
             <div @discoveryResultAnim>
-                <div *ngIf="checkHighligtService(node.data.name) else unhighlight">
+                <div *ngIf="checkHighligtService(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.data)"></p-toggleButton>
                 </div>
 
-                <ng-template #unhighlight>
+                <ng-template #unhighlightServ>
                     <div>{{node.label}} {{node.data.portType}}</div>
                 </ng-template>
 
             </div>
         </ng-template>
-
     </p-tree>
-</div>
+
+    <button class="ui-button-width-fit" [disabled]="selectedItems.length === 0"
+    type="button" label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>
+
+</p-panel>

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

@@ -4,12 +4,13 @@ import {
   Output,
   SimpleChanges,
   OnInit,
+  OnChanges,
 } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
 import { DiscoverZone, Zone, Host, Port, Service } from '@overflow/commons-typescript/model/discovery';
-import { TreeNode } from 'primeng/primeng';
+import { TreeNode, Message } from 'primeng/primeng';
 
 import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 
@@ -21,21 +22,18 @@ import { DiscoveryNotify } from '../subscriber/discovery.subscriber';
   templateUrl: './search-result.component.html',
   animations: Anim
 })
-export class SearchResultComponent implements OnInit {
+export class SearchResultComponent implements OnInit, OnChanges {
 
   @Input() probeHost: ProbeHost;
   @Input() filterWord: string;
-  @Input() filterServices: Service[];
+  @Input() filterServices: Map<string, boolean>;
-
+  @Input() finished: boolean;
-  @Output() stop = new EventEmitter();
-  @Input() started: boolean; // Temporary
 
   discoverySubscription: Subscription;
   zoneNode: TreeNode[] = [];
   hostNode: TreeNode[] = [];
   selectedItems = [];
-
+  msgs: Message[];
-  tempHostId = 0; // Temporary
 
   constructor(
   ) {
@@ -52,46 +50,16 @@ export class SearchResultComponent implements OnInit {
     });
   }
 
-  tempHost() {
+  ngOnChanges(changes: SimpleChanges): void {
-    const idx = Math.floor(Math.random() * (255));
+    if (changes['finished'] && changes['finished'].currentValue === true) {
-    const host: Host = {
+      this.msgs = [];
-      id: this.tempHostId++,
+      this.msgs.push({
-      ipv4: '192.168.1.' + idx,
+        severity: 'success',
-    };
+        summary: 'Discovery가 완료되었습니다. 모니터링 대상(들)을 선택 후 저장하세요.',
-    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() {
-    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: String(randStr),
-      port: {
-        portNumber: idx,
-        portType: idx % 2 === 0 ? 'TCP' : 'UDP',
-        host: {
-          id: hostId
-        }
-      }
-    };
-    this.addService(service);
-  }
 
   addHost(host: Host) {
     const idx = this.findHostIndex(host);
@@ -184,28 +152,25 @@ export class SearchResultComponent implements OnInit {
     });
   }
 
-  checkUnhighligtHost(label: string) {
+  checkHighligtHost(label: string) {
+    if (!this.filterWord) {
+      return true;
+    }
     if (this.filterWord &&
-      label.toUpperCase().indexOf(this.filterWord.toUpperCase()) === -1) {
+      label.toUpperCase().indexOf(this.filterWord.toUpperCase()) > 0) {
       return true;
     }
     return false;
   }
 
   checkHighligtService(name: string) {
-    // if (this.filterWord &&
+    if (this.filterServices && (this.filterServices[name])) {
-    //   name.toUpperCase().indexOf(this.filterWord.toUpperCase()) === -1) {
+      return true;
-    //   return true;
-    // }
-    let highlight = false;
-    if (this.filterServices) {
-      for (const service of this.filterServices) {
-        if (service.serviceName === name) {
-          highlight = true;
-          break;
-        }
-      }
     }
-    return highlight;
+    return false;
+  }
+
+  saveTargets() {
+    console.log(this.selectedItems);
   }
 }

@overflow/shared/ui/component/message.component.ts

@@ -7,10 +7,9 @@ import { Message } from 'primeng/primeng';
 })
 export class MessageComponent implements OnInit, OnChanges {
 
-  @Input() error: any;
+  @Input() msgs: Message[];
   @Input() closeAfter: number;
   @Input() closable: boolean;
-  msgs: Message[] = [];
 
   constructor(
   ) {
@@ -20,15 +19,5 @@ export class MessageComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['error'].currentValue) {
-      const detail = ' (' + this.error.response.code + ')';
-      this.msgs = [];
-      this.msgs.push({ severity: 'error', summary: 'Sorry. An Error has occurred.', detail: detail });
-      if (this.closeAfter) {
-        setTimeout(() => {
-          this.msgs = [];
-        }, this.closeAfter * 1000);
-      }
-    }
   }
 }