discovery save in progress

2018-06-05 11:56:45 +09:00 · 2018-06-05 11:56:45 +09:00 · 5077020864
commit 5077020864
parent 9bbfb19200
7 changed files with 58 additions and 130 deletions
--- a/@overflow/discovery/component/discovery.component.html
+++ b/@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>
--- a/@overflow/discovery/component/discovery.component.ts
+++ b/@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;

--- a/@overflow/discovery/component/search-filter.component.html
+++ b/@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">
-    <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>
+        <!-- <p-checkbox [(ngModel)]="filterServices" label="{{service.serviceName}}" value="{{service.serviceName}}"></p-checkbox> -->
+
+    </div>
+  </div>
+

 </div>
--- a/@overflow/discovery/component/search-filter.component.ts
+++ b/@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);
-  }
-
 }
--- a/@overflow/discovery/component/search-result.component.html
+++ b/@overflow/discovery/component/search-result.component.html
@ -1,10 +1,10 @@
-<div>
-    <button pButton type="button" label="TestHost" (click)="tempHost()"></button>
-    <button pButton type="button" label="TestService" (click)="tempService()"></button>
-    <button pButton type="button" label="tempPort" (click)="tempPort()"></button>
+<of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar>
+
+<p-panel #content [showHeader]="false" class="block-panel">
+
+    <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>{{node.label}}</div>
-                </div>
-                <ng-template #normHost>
+                <div *ngIf="checkHighligtHost(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.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>
--- a/@overflow/discovery/component/search-result.component.ts
+++ b/@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[];
-
-  @Output() stop = new EventEmitter();
-  @Input() started: boolean; // Temporary
+  @Input() filterServices: Map<string, boolean>;
+  @Input() finished: boolean;

  discoverySubscription: Subscription;
  zoneNode: TreeNode[] = [];
  hostNode: TreeNode[] = [];
  selectedItems = [];
-
-  tempHostId = 0; // Temporary
+  msgs: Message[];

  constructor(
  ) {
@ -52,46 +50,16 @@ export class SearchResultComponent implements OnInit {
    });
  }

-  tempHost() {
-    const idx = Math.floor(Math.random() * (255));
-    const host: Host = {
-      id: this.tempHostId++,
-      ipv4: '192.168.1.' + idx,
-    };
-    this.addHost(host);
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['finished'] && changes['finished'].currentValue === true) {
+      this.msgs = [];
+      this.msgs.push({
+        severity: 'success',
+        summary: 'Discovery가 완료되었습니다. 모니터링 대상(들)을 선택 후 저장하세요.',
+      });
+    }
  }

-  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 &&
-    //   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;
+    if (this.filterServices && (this.filterServices[name])) {
+      return true;
+    }
+    return false;
+  }
+
+  saveTargets() {
+    console.log(this.selectedItems);
  }
 }
--- a/@overflow/shared/ui/component/message.component.ts
+++ b/@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);
-      }
-    }
  }
 }