overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
insanity 2018-03-27 20:05:33 +09:00
parent 64d42ebf4a
commit 9eb32c98ff
4 changed files with 155 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/packages/infra/component/map/map.component.html
View File

@ -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>
<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> </div>
</mat-grid-tile> </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>
<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> </div>
</mat-grid-tile> </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-grid-list>
</mat-card-content> </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>

33
src/packages/infra/component/map/map.component.scss
View File

@ -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 { .infra-card {
width: 70%; width: 70%;
} }
.text-inside-grid { .grid-left-align {
position: absolute; position: absolute;
left: 5px; left: 5px;
} }
@ -11,3 +40,5 @@
position: absolute; position: absolute;
right: 1px; right: 1px;
} }

89
src/packages/infra/component/map/map.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit, AfterContentInit } from '@angular/core'; 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 { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc/protocol'; import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { AuthSelector } from 'packages/member/store'; import { AuthSelector } from 'packages/member/store';
@ -9,6 +9,13 @@ import { Page, PageParams } from 'app/commons/model';
import { Domain } from '../../../domain/model'; import { Domain } from '../../../domain/model';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { SettingComponent } from '../../../sensor/component/setting/setting.component'; import { SettingComponent } from '../../../sensor/component/setting/setting.component';
import { Target } from 'packages/target/model';
interface HostData {
target?: Target;
host: InfraHost;
services: InfraService[];
}
@Component({ @Component({
selector: 'of-infra-map', selector: 'of-infra-map',
@ -18,7 +25,7 @@ import { SettingComponent } from '../../../sensor/component/setting/setting.comp
export class MapComponent implements OnInit, AfterContentInit { export class MapComponent implements OnInit, AfterContentInit {
infras$ = this.listStore.pipe(select(ListSelector.select('page'))); infras$ = this.listStore.pipe(select(ListSelector.select('page')));
infras: Infra[]; hostDataList: HostData[] = new Array();
constructor( constructor(
private listStore: Store<ListStore.State>, private listStore: Store<ListStore.State>,
@ -29,20 +36,94 @@ export class MapComponent implements OnInit, AfterContentInit {
this.infras$.subscribe( this.infras$.subscribe(
(page: Page) => { (page: Page) => {
if (page !== null) { if (page !== null) {
console.log(page); // this.generateInfraHostData(page.content);
this.infras = page.content;
} }
}, },
(error: RPCClientError) => { (error: RPCClientError) => {
console.log(error.response.message); 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() { ngAfterContentInit() {
this.getInfraList(); 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() { getInfraList() {
this.listStore.select(AuthSelector.select('domain')).subscribe( this.listStore.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => { (domain: Domain) => {

6
src/packages/meta/infra-vendor/model/MetaInfraVendor.ts
View File

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