inframap test

@overflow/infra/component/infra-map.component.html

@@ -3,8 +3,7 @@
   <div class="ui-g-12 ui-g-nopad">
     <div class="ui-g">
       <div class="ui-g-12 ui-md-5 ui-g-nopad ui-bottom-space-10">
-        <button pButton type="button" class="ui-button-large ui-button-width-fit" 
-        icon="ui-icon-play-arrow" label="Discovery" (click)="discovery.emit()"></button>
+        <button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="discovery.emit()"></button>
       </div>
       <div class="ui-g-12 ui-md-7 ui-g-nopad">
         <div style="float: right;">
@@ -22,13 +21,16 @@
       </div>
     </div>
 
-    <p-tabView (onChange)="onProbeChange($event)" [activeIndex]="probeTabIdx" class="ui-tab-bgcolor">
-      <p-tabPanel [header]="item.label" *ngFor="let item of tabs; let i = index" [selected]="i == 0" cache="true">
-        <ng-template pTemplate="content">
-          <div>
-            <of-infra-tree></of-infra-tree>
-          </div>
-        </ng-template>
-      </p-tabPanel>
-    </p-tabView>
+    <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
+    <p-panel #content [showHeader]="false" class="block-panel">
+      <p-tabView (onChange)="onProbeChange($event)" [activeIndex]="probeTabIdx" class="ui-tab-bgcolor">
+        <p-tabPanel [header]="item.label" *ngFor="let item of tabs; let i = index" [selected]="i == 0" cache="true">
+          <ng-template pTemplate="content">
+            <div>
+              <of-infra-tree [probeHost]="selectedProbeHost"></of-infra-tree>
+            </div>
+          </ng-template>
+        </p-tabPanel>
+      </p-tabView>
+    </p-panel>
   </div>

@overflow/infra/component/infra-map.component.ts

@@ -9,9 +9,6 @@ import { DomainMember } from '@overflow/commons-typescript/model/domain';
 import { Observable, Subscription, of } from 'rxjs';
 import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 import { MenuItem } from 'primeng/primeng';
-import { InfraService } from '../service/infra.service';
-import { Page, PageParams } from '@overflow/commons-typescript/core/model';
-import { Infra } from '@overflow/commons-typescript/model/infra';
 
 
 @Component({
@@ -23,7 +20,6 @@ import { Infra } from '@overflow/commons-typescript/model/infra';
 })
 export class InfraMapComponent implements OnInit {
 
-  infras: Infra[];
   pending$: Observable<boolean>;
   error$: Observable<any>;
 
@@ -31,12 +27,13 @@ export class InfraMapComponent implements OnInit {
   probeHosts: ProbeHost[];
   probeTabIdx: number;
 
+  selectedProbeHost: ProbeHost;
+
   @Output() discovery = new EventEmitter();
 
   constructor(
     private store: Store<any>,
     private probeHostService: ProbeHostService,
-    private infraService: InfraService,
   ) {
   }
 
@@ -55,8 +52,8 @@ export class InfraMapComponent implements OnInit {
           .pipe(
             map((probeHosts: ProbeHost[]) => {
               this.probeHosts = probeHosts;
+              this.selectedProbeHost = probeHosts[0];
               this.generateTabs();
-              this.getInfras(probeHosts[0].probe.id);
             }),
             catchError(error => {
               this.error$ = of(error);
@@ -78,37 +75,18 @@ export class InfraMapComponent implements OnInit {
         label: ph.probe.cidr
       });
     });
+
+    this.tabs.push({
+      label: 'fake probe1'
+    });
+
+    this.tabs.push({
+      label: 'fake probe2'
+    });
   }
 
   onProbeChange(event) {
-    this.getInfras(this.probeHosts[event.index].probe.id);
-  }
-
-  getInfras(probeID: number) {
-    const pageParams: PageParams = {
-      pageNo: 0,
-      countPerPage: 99999,
-      sortCol: 'id',
-      sortDirection: 'descending'
-    };
-    this.infraService.readAllByProbeID(probeID, pageParams)
-      .pipe(
-        tap(() => {
-          this.pending$ = of(true);
-        }),
-        map((infraPage: Page<Infra>) => {
-          this.infras = infraPage.content;
-          console.log(this.infras);
-        }),
-        catchError(error => {
-          this.error$ = of(error);
-          return of();
-        }),
-        tap(() => {
-          this.pending$ = of(false);
-        }),
-        take(1),
-    ).subscribe();
+    this.selectedProbeHost = this.probeHosts[event.index];
   }
 
 }

@overflow/infra/component/infra-tree.component.html

@@ -1 +1,66 @@
-TREE
+<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
+<p-panel #content [showHeader]="false" class="block-panel">
+
+  <p-tree [value]="zoneNode" layout="horizontal">
+    <!-- ZONE node template -->
+    <ng-template let-node pTemplate="ZONE">
+      <div>
+        {{node.label}}
+      </div>
+    </ng-template>
+
+    <!-- HOST node template -->
+    <ng-template let-node pTemplate="HOST">
+      {{node.label}}
+    </ng-template>
+
+    <!-- SERVICE node template -->
+    <ng-template let-node pTemplate="SERVICE">
+      {{node.label}}
+    </ng-template>
+  </p-tree>
+
+</p-panel>
+
+<!-- <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" (onNodeSelect)="onNodeSelect($event)">
+
+      <ng-template let-node pTemplate="default">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="infra">
+        <div (contextmenu)="nodeMenu($event, node)">
+          <div>{{node.label}}</div>
+        </div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="probe">
+        <div (contextmenu)="nodeMenu($event, node)">
+          <div>{{node.label}}</div>
+        </div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="host">
+        <div (contextmenu)="nodeMenu($event, node)">
+          <div>{{node.label}}</div>
+        </div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="service">
+        <div (contextmenu)="nodeMenu($event, node)">
+          <div>{{node.label}}</div>
+        </div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="sensor">
+        <div (contextmenu)="nodeMenu($event, node)">
+          <div>
+            <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>{{node.label}}
+          </div>
+          <div>
+            {{node.obj.itemCount}} SensorItems
+          </div>
+        </div>
+      </ng-template>
+
+    </p-tree> -->

@overflow/infra/component/infra-tree.component.ts

@@ -1,15 +1,112 @@
 import {
-  Component
+  Component, Input, OnChanges, SimpleChanges, OnInit
 } from '@angular/core';
-
+import { Infra } from '@overflow/commons-typescript/model/infra';
+import { InfraHost as InfraTypeHost } from '@overflow/commons-typescript/model/infra';
+import { InfraService as InfraTypeService } from '@overflow/commons-typescript/model/infra';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
+import { TreeNode } from 'primeng/primeng';
+import { PageParams, Page } from '@overflow/commons-typescript/core/model';
+import { ProbeHost } from '@overflow/commons-typescript';
+import { InfraService } from '../service/infra.service';
 
 @Component({
   selector: 'of-infra-tree',
   templateUrl: './infra-tree.component.html',
 })
-export class InfraTreeComponent  {
+export class InfraTreeComponent implements OnInit, OnChanges {
+
+  @Input() probeHost: ProbeHost;
+
+  infras: Infra[];
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
+
+  zoneNode: TreeNode[] = [];
+  hostNode: TreeNode[] = [];
 
   constructor(
+    private infraService: InfraService,
   ) {
   }
+
+  ngOnInit(): void {
+    this.zoneNode.push({
+      label: this.probeHost.probe.cidr,
+      type: 'ZONE',
+      data: {
+      },
+      children: this.hostNode,
+      expanded: true
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.getInfras();
+  }
+
+  getInfras() {
+    const pageParams: PageParams = {
+      pageNo: 0,
+      countPerPage: 99999,
+      sortCol: 'id',
+      sortDirection: 'descending'
+    };
+    this.infraService.readAllByProbeID(this.probeHost.probe.id, pageParams)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((infraPage: Page<Infra>) => {
+          this.infras = infraPage.content;
+          this.generateTreeData(this.infras);
+        }),
+        catchError(error => {
+          this.error$ = of(error);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+        take(1),
+    ).subscribe();
+  }
+
+  generateTreeData(infras: Infra[]) {
+    infras.forEach(infra => {
+      switch (infra.metaInfraType.id) { // TODO: fix to enum
+        case 2: // InfraHost
+          this.addHost(infra);
+          break;
+        case 7: // InfraService
+          // this.addService(infra);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  addHost(infraHost: InfraTypeHost) {
+    this.hostNode.push({
+      type: 'HOST',
+      label: infraHost.ipv4,
+      data: {
+        target: infraHost
+      },
+      expanded: true,
+      children: []
+    });
+  }
+
+  addService(infraService: InfraTypeService) {
+    this.hostNode[0].children.push({
+      type: 'SERVICE',
+      label: 'TODO',
+      data: {
+        target: infraService
+      },
+    });
+  }
 }

@overflow/target/component/list/list.component.ts

@@ -61,11 +61,9 @@ export class ListComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    console.log(changes);
     if (changes['pageIdx'] && this.paginator) {
-
       const pageParams: PageParams = {
-        pageNo: this.pageIdx - 1,
+        pageNo: this.pageIdx,
         countPerPage: 2,
         sortCol: 'id',
         sortDirection: 'descending',