infra map!!!!!!!!!!

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

@@ -1,95 +1,35 @@
-<mat-tab-group>
+<div>
-  <mat-tab label="Zone">
+  ---------------
+</div>
 
-    <!-- zone -->
+<div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
-    <mat-card class="infra-card">
+  <mat-toolbar>
-      <mat-card-header>
+    <mat-toolbar-row>
-        <mat-card-title>Zone - 192.168.1.0/24</mat-card-title>
+      <span>IP : {{infra.host.ip}}</span>
-      </mat-card-header>
+      <span class="pull-right"></span>
+      <button mat-raised-button color="primary" fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
+    </mat-toolbar-row>
+  </mat-toolbar>
 
-      <mat-card-content *ngFor="let infra of infras" matTooltip="이렇게 마우스 오버하면 Meta 정보 출력할꺼야">
+  <mat-card-content *ngFor="let service of infra.services">
-        <mat-grid-list cols="4" rowHeight="5:1">
+    <mat-grid-list cols="6" rowHeight="9:1">
-
+      <mat-grid-tile [rowspan]="2" style="background-color: lightcoral">
-          <mat-grid-tile [colspan]="1" [rowspan]="3">
+        {{service.vendor.name}}
-            {{infra.target.displayName}}
       </mat-grid-tile>
-          <mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
+      <mat-grid-tile [colspan]="3" style="background-color: lightblue">
-            <div class="text-inside-grid">
+        <div class="grid-left-align">
-                {{infra.infraType.name}}
+          Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}}
         </div>
       </mat-grid-tile>
-          <mat-grid-tile [colspan]="1" [rowspan]="1">
+      <mat-grid-tile [rowspan]="2" style="background-color: lightgray">
-              Status: 기본 센서 데이터에서 저장한 metric으로..
+          <span class="pull-right"></span>
+          <button mat-button fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
         </mat-grid-tile>
-          <mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
+      <mat-grid-tile [colspan]="3" style="background-color: lightgreen">
-            <div class="text-inside-grid">
+        <div class="grid-left-align">
-              service list
+          Sensor: 
         </div>
       </mat-grid-tile>
-          <mat-grid-tile [colspan]="1" [rowspan]="1">
-          </mat-grid-tile>
-          <mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
-            <div class="text-inside-grid">
-              sensor list
-            </div>
-          </mat-grid-tile>
-          <mat-grid-tile [colspan]="1" [rowspan]="1">
-            <div class="add-sensor-button">
-              <button mat-raised-button color="primary" (click)="addSensor(infra)">Add Sensor</button>
-            </div>
-          </mat-grid-tile>
-
-        </mat-grid-list>
-
-        <!-- <mat-grid-list cols="3" rowHeight="5:1">
-          <mat-grid-tile>{{infra.infraType.name}}</mat-grid-tile>
-          <mat-grid-tile>192.168.1.162</mat-grid-tile>
-          <mat-grid-tile></mat-grid-tile>
-        </mat-grid-list>
-        <mat-grid-list cols="3" rowHeight="5:1">
-          <mat-grid-tile>Service</mat-grid-tile>
-          <mat-grid-tile>FTP MySQL SMB</mat-grid-tile>
-          <mat-grid-tile></mat-grid-tile>
-        </mat-grid-list>
-        <mat-grid-list cols="3" rowHeight="5:1">
-          <mat-grid-tile>Sensor(2)</mat-grid-tile>
-          <mat-grid-tile>
-            MySQL SNMP
-          </mat-grid-tile>
-          <mat-grid-tile>
-            <button mat-raised-button color="primary" fxLayoutAlign="end">Add Sensor</button>
-          </mat-grid-tile>
-        </mat-grid-list> -->
-
-        <mat-divider></mat-divider>
-      </mat-card-content>
-    </mat-card>
-  </mat-tab>
-
-  <!-- host -->
-  <mat-tab label="Host">
-    <mat-card class="infra-card">
-      <mat-card-header>
-        <mat-card-title>Host - 192.168.1.106</mat-card-title>
-        <mat-card-subtitle>MySQL</mat-card-subtitle>
-      </mat-card-header>
-
-      <mat-card-content>
-        <mat-grid-list cols="2" rowHeight="5:1">
-          <mat-grid-tile>MySQL</mat-grid-tile>
-          <mat-grid-tile>Port : 3306 | TCP | TLS</mat-grid-tile>
-        </mat-grid-list>
-        <mat-grid-list cols="2" rowHeight="5:1">
-          <mat-grid-tile>Sensor</mat-grid-tile>
-          <mat-grid-tile>PostgreSQL
-            <button mat-button>Add Sensor</button>
-          </mat-grid-tile>
     </mat-grid-list>
   </mat-card-content>
-      <!-- <mat-card-actions>
+</div>
-            <button mat-button>LIKE</button>
-            <button mat-button>SHARE</button>
-          </mat-card-actions> -->
-    </mat-card>
-  </mat-tab>
-</mat-tab-group>

src/packages/infra/component/map/map.component.scss

@@ -1,8 +1,37 @@
+@mixin infra-list($theme) {
+    
+  .infra-list{
+      margin: 10px 5px;
+      background: white;
+  }
+  .pull-right{
+      flex: 1 1 auto;
+  }
+  mat-list-item:hover {
+      background: #e8eaf6;
+      cursor: pointer;
+  }
+  .mat-chip {
+      padding: 1px 13px;
+  }
+  
+}
+.nav-item {
+transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+cursor: default;
+
+&:hover {
+  transform: translate(0, -8px);
+  box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
+}
+}
+
+
 .infra-card {
     width: 70%;
   }
 
-  .text-inside-grid {
+  .grid-left-align {
     position: absolute;
     left: 5px;
   }
@@ -11,3 +40,5 @@
     position: absolute;
     right: 1px;
   }
+
+  

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, AfterContentInit } from '@angular/core';
-import { Infra, InfraHost, InfraOSApplication } from '../../model';
+import { Infra, InfraHost, InfraOSApplication, InfraService } from '../../model';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import { AuthSelector } from 'packages/member/store';
@@ -9,6 +9,13 @@ import { Page, PageParams } from 'app/commons/model';
 import { Domain } from '../../../domain/model';
 import { MatDialog } from '@angular/material';
 import { SettingComponent } from '../../../sensor/component/setting/setting.component';
+import { Target } from 'packages/target/model';
+
+interface HostData {
+  target?: Target;
+  host: InfraHost;
+  services: InfraService[];
+}
 
 @Component({
   selector: 'of-infra-map',
@@ -18,7 +25,7 @@ import { SettingComponent } from '../../../sensor/component/setting/setting.comp
 export class MapComponent implements OnInit, AfterContentInit {
 
   infras$ = this.listStore.pipe(select(ListSelector.select('page')));
-  infras: Infra[];
+  hostDataList: HostData[] = new Array();
 
   constructor(
     private listStore: Store<ListStore.State>,
@@ -29,20 +36,94 @@ export class MapComponent implements OnInit, AfterContentInit {
     this.infras$.subscribe(
       (page: Page) => {
         if (page !== null) {
-          console.log(page);
+          // this.generateInfraHostData(page.content);
-          this.infras = page.content;
         }
       },
       (error: RPCClientError) => {
         console.log(error.response.message);
       }
     );
+
+    // Test
+    const list = new Array();
+    for (let i = 0; i < 10; i++) {
+      const host: InfraHost = {
+        target: {
+          id: 1
+        },
+        infraType: {
+          name: 'HOST'
+        },
+        ip: i,
+      };
+      list.push(host);
+
+      for (let j = 0; j < 3; j++) {
+        const service: InfraService = {
+          target: {
+            id: 1
+          },
+          infraType: {
+            name: 'OS_SERVICE'
+          },
+          host: {
+            ip: i,
+          },
+          portType: 'TCP',
+          port: i,
+          vendor: {
+            name: 'vendor'
+          }
+        };
+        list.push(service);
+      }
+    }
+    this.generateInfraHostData(list);
   }
 
   ngAfterContentInit() {
     this.getInfraList();
   }
 
+  generateInfraHostData(list: Infra[]) {
+    for (const infra of list) {
+      const infraType = infra.infraType.name;
+      if (infraType === 'HOST') {
+        const host: HostData = {
+          target: infra.target,
+          host: infra,
+          services: new Array(),
+        };
+        this.hostDataList.push(host);
+      } else if (infraType === 'OS_SERVICE') {
+        const infraService: InfraService = infra;
+        const existHost = this.getExistHost(infraService.host);
+        if (existHost !== null) {
+          existHost.services.push(infraService);
+        } else {
+          const host: HostData = {
+            target: infra.target,
+            host: infraService.host,
+            services: new Array()
+          };
+          host.services.push(infraService);
+        }
+      }
+    }
+    console.log(this.hostDataList);
+  }
+
+
+  getExistHost(infraHost: InfraHost): HostData {
+    let node = null;
+    for (const data of this.hostDataList) {
+      if (data.host.ip === infraHost.ip) {
+        node = data;
+      }
+    }
+    return node;
+  }
+
   getInfraList() {
     this.listStore.select(AuthSelector.select('domain')).subscribe(
       (domain: Domain) => {
@@ -52,7 +133,7 @@ export class MapComponent implements OnInit, AfterContentInit {
           sortCol: 'id',
           sortDirection: 'descending'
         };
-        this.listStore.dispatch(new ListStore.ReadAllByDomain({domain, pageParams}));
+        this.listStore.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
       },
       (error) => {
         console.log(error);

src/packages/meta/infra-vendor/model/MetaInfraVendor.ts

@@ -3,9 +3,9 @@ import { MetaInfraType } from 'packages/meta/infra-type/model/MetaInfraType';
 
 export interface MetaInfraVendor {
   id?: number;
-  name: string;
+  name?: string;
-  createDate: Date;
+  createDate?: Date;
-  infraType: MetaInfraType;
+  infraType?: MetaInfraType;
 }
 
 export enum MetaInfraVendor_Machine_ID {