ing infra map

src/packages/discovery/component/setting/setting.component.html

@@ -5,7 +5,7 @@
     <button mat-button color="primary" (click)="discovery()">Start</button>
   </mat-dialog-actions> -->
 
-  <p-card title="Zone" subtitle="192.168.1.0/24" [style]="{width: '360px'}" styleClass="ui-card-shadow">
+  <p-card title="Zone" subtitle="192.168.1.0/24" [style]="{width: '100%'}" styleClass="ui-card-shadow">
     <p-header>
 
     </p-header>
@@ -17,6 +17,7 @@
         </div>
       </div>
 
+      <div style="margin-top: 8px">
       <span class="ui-float-label">
           <input id="float-input" type="text" size="30" pInputText> 
           <label for="float-input">Start Ip</label>
@@ -26,6 +27,7 @@
           <input id="float-input" type="text" size="30" pInputText> 
           <label for="float-input">End Ip</label>
       </span>
+    </div>
 
       <div class="ui-g" style="width:250px;margin-bottom:10px">
           <div class="ui-g-12">
@@ -33,6 +35,7 @@
           </div>
         </div>
   
+        <div style="margin-top: 8px">
         <span class="ui-float-label">
             <input id="float-input" type="text" size="30" pInputText> 
             <label for="float-input">Start Port</label>
@@ -42,17 +45,29 @@
             <input id="float-input" type="text" size="30" pInputText> 
             <label for="float-input">End Port</label>
         </span>
+      </div>
 
-        <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
+        <!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
             <p-header>
               <i class="fa fa-car"></i>
               Cars
             </p-header>
-          </p-listbox>
+          </p-listbox> -->
+
+          <p-pickList [source]="serviceItems" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
+            filterBy="brand" dragdrop="true" dragdropScope="cars" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand"
+            [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
+            <ng-template let-car pTemplate="item">
+              <div class="ui-helper-clearfix">
+                <!-- <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48"> -->
+                <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.name}}</div>
+              </div>
+            </ng-template>
+          </p-pickList>
 
     </div>
     <p-footer>
-        <!-- <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="display=false"></button> -->
+        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="closeDialog()"></button>
         <button pButton type="button" label="Start" icon="fa-check" (click)="discovery()"></button>
     </p-footer>
   </p-card>
@@ -68,7 +83,7 @@
 
 <div *ngIf="started">
 
-  <p-card title="Discovery Result" [style]="{width: '360px'}" styleClass="ui-card-shadow">
+  <p-card title="Discovery Result" [style]="{width: '100%'}" styleClass="ui-card-shadow">
     <p-header>
 
     </p-header>
@@ -79,8 +94,8 @@
       </div>
     </div>
     <p-footer>
+        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="closeDialog()"></button>
         <button pButton type="button" label="Save" icon="fa-check"></button>
-      <!-- <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary"></button> -->
     </p-footer>
   </p-card>
 

src/packages/discovery/component/setting/setting.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterContentInit } from '@angular/core';
+import { Component, OnInit, AfterContentInit, Output, EventEmitter } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import {
@@ -24,6 +24,9 @@ import { Probe } from 'packages/probe/model';
 
 import { DetailSelector as ProbeDetailSelector } from 'packages/probe/store';
 import { TreeNode } from 'primeng/primeng';
+
+
+
 // import { TreeNode } from 'angular-tree-component';
 
 @Component({
@@ -33,6 +36,7 @@ import { TreeNode } from 'primeng/primeng';
 })
 export class SettingComponent implements OnInit, AfterContentInit {
 
+  @Output() close = new EventEmitter();
 
   probe$ = this.probeDetailStore.pipe(select(ProbeDetailSelector.select('probe')));
 
@@ -71,6 +75,8 @@ export class SettingComponent implements OnInit, AfterContentInit {
     { name: 'NBSS' },
   ];
 
+  targetCars = [];
+
   cities = [
     {name: 'New York', code: 'NY'},
     {name: 'Rome', code: 'RM'},
@@ -128,7 +134,7 @@ export class SettingComponent implements OnInit, AfterContentInit {
     //   (zones: Map<string, Zone>) => {
     //     console.log('ZoneZoneZoneZoneZoneZoneZone');
     //     // console.log(JSON.stringify(zones));
-    //     this.convertTreeViewZone(zones);
+    //     this.treeNodes = this.convertTreeViewZone(zones);
     //     this.zones = zones;
     //   },
     //   (error: RPCClientError) => {
@@ -138,6 +144,10 @@ export class SettingComponent implements OnInit, AfterContentInit {
 
   }
 
+  closeDialog() {
+    this.close.emit();
+  }
+
   isZone(zone: Zone): boolean {
 
     for (let i = 0; i < this.treeNodes.length; ++i) {
@@ -355,7 +365,7 @@ export class SettingComponent implements OnInit, AfterContentInit {
       treeNodes.push(jZone);
     });
 
-    this.treeNodes = treeNodes;
+    return treeNodes;
   }
 
   convertViewHost(hosts): any[] {

src/packages/infra/component/map/map.component.html

@@ -1,7 +1,7 @@
 <div class="ui-g">
   <h1>Map</h1>
   <p-dialog header="Discovery" [width]="400" [(visible)]="display">
-    <of-discovery-setting></of-discovery-setting>
+      <of-discovery-setting (close)="closeDialog()"></of-discovery-setting>
   </p-dialog>
   <div class="ui-g-12 ui-g-nopad">
     <div class="ui-g">

src/packages/infra/component/map/map.component.ts

@@ -7,6 +7,20 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { TreeNode } from 'primeng/primeng';
+import { Store, select } from '@ngrx/store';
+import * as ListStore from '../../store/list';
+import { ListSelector } from '../../store';
+import { Page } from 'app/commons/model';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Target } from 'packages/target/model';
+import { Infra, InfraHost, InfraOSApplication, InfraService } from '../../model';
+
+interface HostData {
+  id: string;
+  target?: Target;
+  host: InfraHost;
+  services: InfraService[];
+}
 
 @Component({
   selector: 'of-infra-map',
@@ -15,18 +29,205 @@ import { TreeNode } from 'primeng/primeng';
 export class MapComponent implements OnInit, AfterContentInit {
   infraTree: TreeNode[] = testInfraList;
 
+  infras$ = this.listStore.pipe(select(ListSelector.select('page')));
+
   display = false;
+  loading = false;
 
-  constructor(private router: Router) {}
+  totalList: Infra[];
+  hostDataList: HostData[] = new Array();
 
-  ngAfterContentInit() {}
+  DEFAULT_EXPANDED: Boolean = true;
+
+  constructor(private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) {}
+
+  ngAfterContentInit() {
+
+    this.infras$.subscribe(
+      (page: Page) => {
+        if (page !== null) {
+          this.totalList = page.content;
+          this.generateInfraHostData();
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      });
+  }
 
   ngOnInit() {}
 
+
+  generateInfraHostData(filterStr?: string) {
+
+    const itl: TreeNode[] = [];
+
+    const root: TreeNode = {
+      label: 'Infra',
+      expandedIcon: 'fa-folder-open',
+      collapsedIcon: 'fa-folder',
+      expanded: true,
+      children: [],
+    };
+
+    const probeMap: Map<number, InfraHost[]> = new Map();
+
+    const hostMap: Map<number, InfraService[]> = new Map();
+
+    this.loading = true;
+
+    const infraTree =  {
+      label: 'Infra',
+      expandedIcon: 'fa-folder-open',
+      collapsedIcon: 'fa-folder',
+      expanded: true,
+      children: [],
+    };
+
+    for (const infra of this.totalList) {
+      const infraType = infra.infraType.name;
+      if (infraType === 'HOST') {
+        const infraHost: InfraHost = infra;
+        if (filterStr && String(infraHost.ip).indexOf(filterStr) < 0) {
+          continue;
+        }
+
+        if (probeMap.has(infraHost.probe.id) === false) {
+          probeMap.set(infraHost.probe.id, []);
+        }
+
+        const ihl: InfraHost[] = probeMap.get(infraHost.probe.id);
+        ihl.push(infraHost);
+        probeMap.set(infraHost.probe.id, ihl);
+        // const data: HostData = {
+        //   id: String(infra.id),
+        //   target: infra.target,
+        //   host: infra,
+        //   services: new Array(),
+        // };
+        // this.hostDataList.push(data);
+      } else if (infraType === 'OS_SERVICE') {
+        const infraService: InfraService = infra;
+        if (filterStr && this.checkFilterString(infraService, filterStr)) {
+          continue;
+        }
+
+        if (hostMap.has(infraService.host.ip) === false) {
+          hostMap.set(infraService.host.ip, []);
+        }
+
+        const isl = hostMap.get(infraService.host.ip);
+        isl.push(infraService);
+
+        // const existHost = this.getExistHost(infraService.host);
+        // if (existHost !== null) {
+        //   existHost.services.push(infraService);
+        // } else {
+        //   const host: HostData = {
+        //     id: String(infra.id),
+        //     target: infra.target,
+        //     host: infraService.host,
+        //     services: new Array()
+        //   };
+        //   host.services.push(infraService);
+        //   this.hostDataList.push(host);
+        // }
+
+
+        const probeTreeNodes: TreeNode[] = [];
+
+        probeMap.forEach((ifhl: InfraHost[], key: number) => {
+
+          const tp: TreeNode = {
+            label: 'Probe - ' + key,
+            expandedIcon: 'fa-folder-open',
+            collapsedIcon: 'fa-folder',
+            expanded: this.DEFAULT_EXPANDED.valueOf(),
+            children: [],
+          };
+
+          ifhl.map((ih: InfraHost, idx: number) => {
+
+            const th: TreeNode = {
+              label: 'Host - ' + ih.ip,
+              expandedIcon: 'fa-folder-open',
+              collapsedIcon: 'fa-folder',
+              expanded: this.DEFAULT_EXPANDED.valueOf(),
+              children: [],
+            };
+
+            if (hostMap.has(ih.ip)) {
+
+              const ifsl = hostMap.get(ih.ip);
+
+              for (let i = 0 ; i < ifsl.length; ++i) {
+                const ts: TreeNode = {
+                  label: 'Service - ' + ifsl[i].vendor.name,
+                  expandedIcon: 'fa-folder-open',
+                  collapsedIcon: 'fa-folder',
+                  expanded: this.DEFAULT_EXPANDED.valueOf(),
+                  children: [],
+                };
+
+                th.children.push(ts);
+              }
+
+            }
+
+
+            tp.children.push(th);
+
+          });
+
+          probeTreeNodes.push(tp);
+        });
+
+
+
+        infraTree.children.push(probeTreeNodes);
+
+
+      }
+
+
+    }
+    this.loading = false;
+
+
+    return infraTree;
+
+  }
+
+  checkFilterString(infraService: InfraService, filterStr: string) {
+    const upperCased = filterStr.toUpperCase().toUpperCase();
+    if (infraService.vendor.name.toUpperCase().indexOf(upperCased) < 0 &&
+      String(infraService.port).toUpperCase().indexOf(upperCased) < 0 &&
+      infraService.portType.toUpperCase().indexOf(upperCased)) {
+        return true;
+    }
+    return false;
+  }
+
+  getExistHost(infraHost: InfraHost): HostData {
+    let node = null;
+    for (const data of this.hostDataList) {
+      if (data.host.ip === infraHost.ip) {
+        node = data;
+      }
+    }
+    return node;
+  }
+
   showDialog() {
     this.display = true;
   }
 
+  closeDialog() {
+    this.display = false;
+  }
+
   expandAll() {
     this.infraTree.forEach(node => {
       this.expandRecursive(node, true);