tree

@overflow/discovery/component/animation.ts

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

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

@@ -6,7 +6,7 @@
       <p-accordionTab header="Discovery Settings" [selected]="true">
         <span *ngIf="!selectedProbe">Choose a Probe to perform Discovery.</span>
         <of-discovery-search-config *ngIf="!requested && selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
-        <of-discovery-request-summary *ngIf="discoverZone" @discoveryFilterAnim  [discoverZone]="discoverZone"></of-discovery-request-summary>
+        <of-discovery-request-summary *ngIf="discoverZone" @discoveryFilterAnim [discoverZone]="discoverZone"></of-discovery-request-summary>
       </p-accordionTab>
       <p-accordionTab header="Filter" [selected]="requested" [disabled]="!requested">
         <of-discovery-search-filter></of-discovery-search-filter>
@@ -22,5 +22,7 @@
 </div>
 
 <ng-template #info>
-  INFO
+  <div style="min-height: 100vh ">
+    Network Discovery 설명 페이지
+  </div>
 </ng-template>

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

@@ -13,7 +13,7 @@ import { DiscoverySubscriber, DiscoveryNotify } from '../subscriber/discovery.su
 @Component({
   selector: 'of-discovery',
   templateUrl: './discovery.component.html',
-  animations: Anim
+  animations: Anim,
 })
 export class DiscoveryComponent {
 
@@ -26,7 +26,6 @@ export class DiscoveryComponent {
   requested: boolean;
   discoverZone: DiscoverZone;
 
-
   constructor(
     private discoveryService: DiscoveryService,
     private discoverySubscriber: DiscoverySubscriber,

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

@@ -1,8 +1,14 @@
-<div class="ui-g">
+<button class="ui-button-danger ui-button-width-fit" type="button" label="Stop" icon="ui-icon-close" pButton (click)="onStop()"
-    <button class="ui-button-danger ui-button-width-fit" type="button" 
+    [disabled]="!started"></button>
-    label="Stop" icon="ui-icon-close" pButton (click)="onStop()" [disabled]="!started"></button>
 
-    <div *ngFor="let data of tempData" class="ui-g-12 ui-md-12" @discoveryResultAnim>
+<div>
-        <p-button label="TEST" icon="fa fa-check" iconPos="left"></p-button>
+    <button pButton type="button" label="Click" (click)="addHostNode()"></button>
-    </div>
+    <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%">
+            </div>
+        </ng-template>
+    </p-tree>
 </div>

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

@@ -6,6 +6,7 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { Anim } from './animation';
+import { TreeNode } from 'primeng/primeng';
 
 @Component({
   selector: 'of-discovery-result',
@@ -17,28 +18,40 @@ export class SearchResultComponent implements OnChanges {
   @Output() stop = new EventEmitter();
   @Input() started: boolean;
 
-  tempData = [];
+  zoneNode: TreeNode[] = [];
-  tempTimer;
+  hostNode: TreeNode[] = [];
 
   constructor(
   ) {
+    this.zoneNode.push({
+      label: 'zone',
+      children: this.hostNode,
+      expanded: true
+    });
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['started'] && changes['started'].currentValue) {
-      this.tempTimer = setInterval(() => { this.tempFunc(); }, 1000);
-    }
   }
 
   onStop() {
     this.stop.emit();
-    clearInterval(this.tempTimer);
   }
 
-  tempFunc() {
+  test() {
-    this.tempData.push({
+  }
-      name: 'aaa'
+
+  addHostNode() {
+    const idx = Math.floor(Math.random() * (this.hostNode.length - 1));
+    this.hostNode.splice(idx, 0, {
+      label: 'host',
+      expanded: true,
+      children: []
+    });
+  }
+  addServiceNode() {
+    const idx = Math.floor(Math.random() * (this.hostNode.length - 1));
+    this.hostNode[idx].children.push({
+      label: 'service',
     });
   }
-
 }

@overflow/probe/probe.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { COMPONENTS } from './component';
-import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { FormsModule } from '@angular/forms';
 import { MetaModule } from '@overflow/meta/meta.module';
@@ -11,7 +10,6 @@ import { UIModule } from '@overflow/shared/ui/ui.module';
 @NgModule({
   imports: [
     CommonModule,
-    ProbeStoreModule,
     FormsModule,
     UIModule,
     MetaModule,