Merge remote-tracking branch 'origin/master'

@overflow/discovery/component/animation.ts

@@ -24,11 +24,11 @@ export const Anim = [
     trigger('discoveryResultAnim', [
         transition('void => *', [
             query('*', style({ opacity: 0 }), { optional: true }),
-            query('*', stagger('500ms', [
+            query('*', stagger('30ms', [
                 animate('0.08s ease-in', keyframes([
-                    style({ opacity: 0, transform: 'translateX(-75%)', offset: 0 }),
+                    style({ opacity: 0, transform: 'translateX(-95%)', offset: 0 }),
-                    style({ opacity: .5, transform: 'translateX(35px)', offset: 0.3 }),
+                    style({ opacity: .5, transform: 'translateX(95px)', offset: 0.3 }),
-                    style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
+                    style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
                 ]))]), { optional: true }),
         ]),
     ]),

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

@@ -16,13 +16,16 @@
 
   <div class="ui-g-12 ui-md-9">
     <p-panel>
-      <of-discovery-result *ngIf="requested else info" [started]="requested" (stop)="onRequestDiscoveryStop($event)"></of-discovery-result>
+      <button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onStop()"
+        [disabled]="!started"></button>
+      <!-- <of-discovery-result *ngIf="requested else info" [started]="requested" (stop)="onRequestDiscoveryStop($event)"></of-discovery-result> -->
+      <of-discovery-result #discoveryResult *ngIf="requested else info" [probeHost]="selectedProbe" [started]="requested"></of-discovery-result>
     </p-panel>
   </div>
 </div>
 
 <ng-template #info>
-  <div style="min-height: 100vh ">
+  <div style="min-height: 100vh">
     Network Discovery 설명 페이지
   </div>
 </ng-template>

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

@@ -1,5 +1,5 @@
 import {
-  Component, Input, Output, EventEmitter, OnDestroy,
+  Component, Input, Output, EventEmitter, OnDestroy, ViewChild,
 } from '@angular/core';
 import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
 import { Anim } from './animation';
@@ -9,6 +9,7 @@ import { DiscoveryService } from '../service/discovery.service';
 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';
 
 @Component({
   selector: 'of-discovery',
@@ -26,6 +27,8 @@ export class DiscoveryComponent implements OnDestroy {
   requested: boolean;
   discoverZone: DiscoverZone;
 
+  @ViewChild('discoveryResult') discoveryResult: SearchResultComponent;
+
   constructor(
     private discoveryService: DiscoveryService,
     private discoverySubscriber: DiscoverySubscriber,
@@ -58,6 +61,7 @@ export class DiscoveryComponent implements OnDestroy {
 
             this.discoverySubscription.unsubscribe();
             this.discoverySubscription = null;
+
             break;
           }
           case 'DiscoveryService.discoveredZone': {

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

@@ -1,14 +1,32 @@
-<button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onStop()"
-    [disabled]="!started"></button>
-
 <div>
-    <button pButton type="button" label="Click" (click)="addHostNode()"></button>
+    <button pButton type="button" label="TestHost" (click)="tempHost()"></button>
-    <button pButton type="button" label="Click" (click)="addServiceNode()"></button>
+    <button pButton type="button" label="TestService" (click)="tempService()"></button>
-    <p-tree [value]="zoneNode" layout="horizontal">
+
-        <ng-template let-node pTemplate="default">
+    <p-tree [value]="zoneNode" layout="vertical">
-            <div @discoveryResultAnim>
+
-                <input [(ngModel)]="node.label" type="text" style="width:100%">
+        <!-- ZONE node template -->
+        <ng-template let-node pTemplate="ZONE">
+            <div>
+                {{node.label}}
             </div>
         </ng-template>
+
+
+        <!-- HOST node template -->
+        <ng-template let-node pTemplate="HOST">
+            <div @discoveryResultAnim>
+                <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'150px'}"
+                    (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+            </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}}"
+                    onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
+            </div>
+        </ng-template>
+
     </p-tree>
 </div>

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

@@ -2,56 +2,149 @@ import {
   AfterContentInit, Component, Input,
   EventEmitter,
   Output,
-  OnChanges,
+  SimpleChanges,
-  SimpleChanges
+  OnInit,
 } from '@angular/core';
 import { Anim } from './animation';
 import { TreeNode } from 'primeng/primeng';
+import { DiscoveryNotify } from '../subscriber/discovery.subscriber';
+import { DiscoverZone, Zone, Host, Port, Service } from '@overflow/commons-typescript/model/discovery';
+import { Subscription } from 'rxjs';
+import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 
 @Component({
   selector: 'of-discovery-result',
   templateUrl: './search-result.component.html',
   animations: Anim
 })
-export class SearchResultComponent implements OnChanges {
+export class SearchResultComponent implements OnInit {
 
+  @Input() probeHost: ProbeHost;
   @Output() stop = new EventEmitter();
-  @Input() started: boolean;
+  @Input() started: boolean; // Temporary
 
+  discoverySubscription: Subscription;
   zoneNode: TreeNode[] = [];
   hostNode: TreeNode[] = [];
+  selectedItems = [];
+
+  tempHostId = 0; // Temporary
 
   constructor(
   ) {
+  }
+
+  ngOnInit(): void {
     this.zoneNode.push({
-      label: 'zone',
+      label: this.probeHost.probe.cidr,
+      type: 'ZONE',
+      data: {
+      },
       children: this.hostNode,
       expanded: true
     });
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
+  tempHost() {
+    const idx = Math.floor(Math.random() * (255));
+    const host: Host = {
+      id: this.tempHostId++,
+      ipv4: '192.168.1.' + idx,
+    };
+    this.addHostNode(host);
   }
 
-  onStop() {
+  tempService() {
-    this.stop.emit();
+    const idx = Math.floor(Math.random() * (255));
+    const hostId = Math.floor(Math.random() * (this.tempHostId - 1));
+    const service: Service = {
+      id: idx,
+      serviceName: 'Service',
+      port: {
+        portNumber: idx,
+        portType: idx % 2 === 0 ? 'TCP' : 'UDP',
+        host: {
+          id: hostId
+        }
+      }
+    };
+    this.addServiceNode(service);
   }
 
-  test() {
+  addHostNode(host: Host) {
-  }
+    const idx = this.findHostIndex(host);
-
-  addHostNode() {
-    const idx = Math.floor(Math.random() * (this.hostNode.length - 1));
     this.hostNode.splice(idx, 0, {
-      label: 'host',
+      type: 'HOST',
+      label: host.ipv4,
+      data: {
+        id: host.id,
+        ip: this.convertIPtoNumber(host.ipv4),
+      },
       expanded: true,
       children: []
     });
   }
-  addServiceNode() {
+  addServiceNode(service: Service) {
-    const idx = Math.floor(Math.random() * (this.hostNode.length - 1));
+    const targetHostNode = this.findHostNodeByService(service);
-    this.hostNode[idx].children.push({
+    const idx = this.findServiceIndex(targetHostNode.children, service);
-      label: 'service',
+    targetHostNode.children[idx] = {
+      type: 'SERVICE',
+      label: service.serviceName,
+      data: {
+        id: service.id,
+        portType: service.port.portType,
+        portNumber: service.port.portNumber,
+      },
+    };
+  }
+
+
+  onTargetSelect(e, data) {
+    if (e.checked) {
+      this.selectedItems.push(data);
+    } else {
+      const index = this.selectedItems.indexOf(data);
+      this.selectedItems.splice(index, 1);
+    }
+  }
+
+
+  findHostIndex(host: Host): number {
+    let index = 0;
+    this.hostNode.forEach(node => {
+      if (node.data.ip < this.convertIPtoNumber(host.ipv4)) {
+        index++;
+      }
+    });
+    return index;
+  }
+
+  findServiceIndex(serviceNodes: TreeNode[], service: Service) {
+    let index = 0;
+    serviceNodes.forEach(node => {
+      if (node.data.portNumber < service.port.portNumber) {
+        index++;
+      }
+    });
+    return index;
+  }
+
+  findHostNodeByService(service: Service) {
+    let targetHost = null;
+    this.hostNode.forEach((value, i) => {
+      if (value.data.id === service.port.host.id) {
+        targetHost = this.hostNode[i];
+      }
+    });
+    return targetHost;
+  }
+
+  convertIPtoNumber(ip: string) {
+    return ip.split('.').map((octet, index, array) => {
+      // tslint:disable-next-line:radix
+      return parseInt(octet) * Math.pow(256, (array.length - index - 1));
+    }).reduce((prev, curr) => {
+      return prev + curr;
     });
   }
 }

@overflow/probe/component/probe-download.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  selector: 'of-download',
+  selector: 'of-probe-download',
   templateUrl: './probe-download.component.html',
 })
 export class ProbeDownloadComponent implements OnInit {

@overflow/sensor/component/index.ts

@@ -1,5 +1,5 @@
-import { SensorListComponent } from './list/list.component';
+import { SensorListComponent } from './sensor-list.component';
-import { SensorDetailComponent } from './detail/detail.component';
+import { SensorDetailComponent } from './sensor-detail.component';
 import { SensorSettingComponent } from './setting/setting.component';
 
 export const COMPONENTS = [

@overflow/sensor/component/sensor-detail.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ListComponent } from './list.component';
+import { SensorDetailComponent } from './sensor-detail.component';
 
-describe('ListComponent', () => {
+describe('SensorDetailComponent', () => {
-  let component: ListComponent;
+  let component: SensorDetailComponent;
-  let fixture: ComponentFixture<ListComponent>;
+  let fixture: ComponentFixture<SensorDetailComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ListComponent ]
+      declarations: [ SensorDetailComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ListComponent);
+    fixture = TestBed.createComponent(SensorDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

@overflow/sensor/component/sensor-detail.component.ts

@@ -9,7 +9,7 @@ import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'of-sensor-detail',
-  templateUrl: './detail.component.html',
+  templateUrl: './sensor-detail.component.html',
   providers: [ConfirmationService]
 })
 export class SensorDetailComponent {

@overflow/sensor/component/sensor-list-filter.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FilterComponent } from './filter.component';
+import { SensorListFilterComponent } from './sensor-list-filter.component';
 
-describe('FilterComponent', () => {
+describe('SensorListFilterComponent', () => {
-  let component: FilterComponent;
+  let component: SensorListFilterComponent;
-  let fixture: ComponentFixture<FilterComponent>;
+  let fixture: ComponentFixture<SensorListFilterComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FilterComponent ]
+      declarations: [ SensorListFilterComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FilterComponent);
+    fixture = TestBed.createComponent(SensorListFilterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

@overflow/sensor/component/sensor-list-filter.component.ts

@@ -3,11 +3,11 @@ import { Router } from '@angular/router';
 
 
 @Component({
-  selector: 'of-target-filter',
+  selector: 'of-sensor-list-filter',
-  templateUrl: './filter.component.html',
+  templateUrl: './sensor-list-filter.component.html',
-  styleUrls: ['./filter.component.scss']
+  styleUrls: ['./sensor-list-filter.component.scss']
 })
-export class FilterComponent implements OnInit {
+export class SensorListFilterComponent implements OnInit {
 
   crawlers = [
     {value: 'ALL', name: 'All'},

@overflow/sensor/component/sensor-list.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DetailComponent } from './detail.component';
+import { SensorListComponent } from './sensor-list.component';
 
-describe('DetailComponent', () => {
+describe('SensorListComponent', () => {
-  let component: DetailComponent;
+  let component: SensorListComponent;
-  let fixture: ComponentFixture<DetailComponent>;
+  let fixture: ComponentFixture<SensorListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DetailComponent ]
+      declarations: [ SensorListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DetailComponent);
+    fixture = TestBed.createComponent(SensorListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

@overflow/sensor/component/sensor-list.component.ts

@@ -1,23 +1,77 @@
 import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { AuthSelector } from '@overflow/shared/auth/store';
+
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
 import { Page } from '@overflow/commons-typescript/model/commons/Page';
 import { Target } from '@overflow/commons-typescript/model/target';
+import { DomainMember } from '@overflow/commons-typescript/model/domain';
+import { SensorService } from '../service/sensor.service';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
 
 @Component({
   selector: 'of-sensor-list',
-  templateUrl: './list.component.html',
+  templateUrl: './sensor-list.component.html',
 })
-export class SensorListComponent implements OnChanges {
+export class SensorListComponent implements OnInit, OnChanges {
-
+  @Input() pageNo: number;
-  @Input() page: Page<Sensor>;
-  @Output() addSensor = new EventEmitter();
   @Output() select = new EventEmitter<Sensor>();
+  @Output() addSensor = new EventEmitter();
+
+  page: Page<Sensor>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
 
   totalLength: number;
   targetSensors: Object;
 
   constructor(
-  ) { }
+    private store: Store<any>,
+    private sensorService: SensorService,
+  ) {
+
+  }
+
+  ngOnInit() {
+    if (1 > this.pageNo) {
+      this.pageNo = 0;
+    }
+
+    this.store.pipe(
+      tap(() => {
+        this.pending$ = of(true);
+      }),
+      select(AuthSelector.selectDomainMember),
+      exhaustMap((domainMember: DomainMember) => {
+        const pageParams: PageParams = {
+          pageNo: this.pageNo,
+          countPerPage: 10,
+          sortCol: 'id',
+          sortDirection: 'descending',
+        };
+
+        return this.sensorService.readAllByDomainID(domainMember.domain.id, pageParams)
+          .pipe(
+            map((page: Page<Sensor>) => {
+              this.page = page;
+            }),
+            catchError(error => {
+              this.error$ = of(error);
+              return of();
+            })
+          );
+      }
+      ),
+      tap(() => {
+        this.pending$ = of(false);
+      }),
+    ).take(1).subscribe();
+
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.generateSensorMap();

@overflow/sensor/container/index.ts

@@ -1,9 +0,0 @@
-import { SensorListContainerComponent } from './sensor-list-container.component';
-import { SensorDetailContainerComponent } from './sensor-detail-container.component';
-import { SensorSettingContainerComponent } from './sensor-setting-container.component';
-
-export const CONTAINER_COMPONENTS = [
-    SensorListContainerComponent,
-    SensorDetailContainerComponent,
-    SensorSettingContainerComponent
-];

@overflow/sensor/container/sensor-detail-container.component.html

@@ -1 +0,0 @@
-<of-sensor-detail></of-sensor-detail>

@overflow/sensor/container/sensor-detail-container.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-// import * as ProbeStore from '../store/entity/probe';
-// import { ProbeEntitySelector, ProbeDetailContainerSelector } from '../store';
-
-@Component({
-  selector: 'of-sensor-detail-container',
-  templateUrl: './sensor-detail-container.component.html',
-})
-export class SensorDetailContainerComponent {
-
-
-}

@overflow/sensor/container/sensor-list-container.component.html

@@ -1 +0,0 @@
-<of-sensor-list [page]="page$ | async" (addSensor)="addSensor.emit($event)" (select)="select.emit($event)"></of-sensor-list>

@overflow/sensor/container/sensor-list-container.component.ts

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, Output, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-import { Sensor } from '@overflow/commons-typescript/model/sensor';
-import { AuthSelector } from '@overflow/shared/auth/store';
-import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
-import { Page } from '@overflow/commons-typescript/model/commons/Page';
-import { Target } from '@overflow/commons-typescript/model/target';
-import { DomainMember } from '@overflow/commons-typescript/model/domain';
-
-@Component({
-    selector: 'of-sensor-list-container',
-    templateUrl: './sensor-list-container.component.html',
-})
-export class SensorListContainerComponent implements OnInit {
-
-    page$: Observable<Page<Sensor>>;
-    pending$: Observable<boolean>;
-    @Output() select = new EventEmitter<Sensor>();
-    @Output() addSensor = new EventEmitter();
-    pageNo: number;
-
-    constructor(private store: Store<any>) {
-        this.pageNo = 0;
-    }
-
-    ngOnInit() {
-        // this.page$ = this.store.pipe(select(SensorListContainerSelector.selectPage));
-        // this.page$ = this.store.pipe(select(SensorListContainerSelector.selectPage));
-
-        this.getSensors();
-    }
-
-    getSensors() {
-        this.store.select(AuthSelector.selectDomainMember).subscribe(
-            (domainMember: DomainMember) => {
-                const pageParams: PageParams = {
-                    pageNo: this.pageNo,
-                    countPerPage: 10,
-                    sortCol: 'id',
-                    sortDirection: 'descending',
-                };
-                // this.store.dispatch(new SensorEntityStore.ReadAllByDomainID({ domainID: domainMember.domain.id, pageParams }));
-            }
-        );
-    }
-}

@overflow/sensor/container/sensor-setting-container.component.html

@@ -1 +0,0 @@
-<of-sensor-setting></of-sensor-setting>

@overflow/sensor/container/sensor-setting-container.component.ts

@@ -1,15 +0,0 @@
-import { Component, EventEmitter, Output, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-import { Sensor } from '@overflow/commons-typescript/model/sensor';
-
-@Component({
-    selector: 'of-sensor-setting-container',
-    templateUrl: './sensor-setting-container.component.html',
-})
-export class SensorSettingContainerComponent {
-
-    constructor(private store: Store<any>) {
-    }
-
-}

@overflow/sensor/sensor.module.ts

@@ -7,10 +7,6 @@ import { UIModule } from '@overflow/shared/ui/ui.module';
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { SensorItemModule } from '../sensor-item/sensor-item.module';
-import { CONTAINER_COMPONENTS } from './container';
-// import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
-// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
-// import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
 
 @NgModule({
     imports: [
@@ -20,11 +16,9 @@ import { CONTAINER_COMPONENTS } from './container';
         SensorItemModule,
     ],
     declarations: [
-        CONTAINER_COMPONENTS,
         COMPONENTS,
     ],
     exports: [
-        CONTAINER_COMPONENTS,
         COMPONENTS,
     ],
     providers: [

src/app/pages/probes/download/download-page.component.html

@@ -1 +1 @@
-<of-download (select)="onSelect($event)" [index]="index"></of-download>
+<of-probe-download (select)="onSelect($event)" [index]="index"></of-probe-download>

src/app/pages/probes/download/download-page.component.ts

@@ -3,7 +3,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 
 @Component({
-  selector: 'of-pages-download',
+  selector: 'of-pages-probe-download',
   templateUrl: './download-page.component.html',
 })
 export class ProbeDownloadPageComponent implements OnInit {

src/app/pages/sensors/sensor/sensor-page.component.html

@@ -1,4 +1,4 @@
-<of-sensor-list-container *ngIf="containerType === 1" (select)="onSensorSelect($event)" (addSensor)="onAddSensor($event)">
+<of-sensor-list *ngIf="containerType === 1" (select)="onSensorSelect($event)" (addSensor)="onAddSensor($event)">
-</of-sensor-list-container>
+</of-sensor-list>
-<of-sensor-detail-container *ngIf="containerType === 2"></of-sensor-detail-container>
+<of-sensor-detail *ngIf="containerType === 2"></of-sensor-detail>
-<of-sensor-setting-container *ngIf="containerType === 3"></of-sensor-setting-container>
+<of-sensor-setting *ngIf="containerType === 3"></of-sensor-setting>