discovery

@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: .5, transform: 'translateX(35px)', offset: 0.3 }),
-                    style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
+                    style({ opacity: 0, transform: 'translateX(-95%)', offset: 0 }),
+                    style({ opacity: .5, transform: 'translateX(95px)', offset: 0.3 }),
+                    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="Click" (click)="addServiceNode()"></button>
-    <p-tree [value]="zoneNode" layout="horizontal">
-        <ng-template let-node pTemplate="default">
-            <div @discoveryResultAnim>
-                <input [(ngModel)]="node.label" type="text" style="width:100%">
+    <button pButton type="button" label="TestHost" (click)="tempHost()"></button>
+    <button pButton type="button" label="TestService" (click)="tempService()"></button>
+
+    <p-tree [value]="zoneNode" layout="vertical">
+
+        <!-- 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() {
-    this.stop.emit();
+  tempService() {
+    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() {
-    const idx = Math.floor(Math.random() * (this.hostNode.length - 1));
+  addHostNode(host: Host) {
+    const idx = this.findHostIndex(host);
     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() {
-    const idx = Math.floor(Math.random() * (this.hostNode.length - 1));
-    this.hostNode[idx].children.push({
-      label: 'service',
+  addServiceNode(service: Service) {
+    const targetHostNode = this.findHostNodeByService(service);
+    const idx = this.findServiceIndex(targetHostNode.children, 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;
     });
   }
 }