infra map!!!!!!!!!!
This commit is contained in:
insanity
parent
64d42ebf4a
commit
9eb32c98ff
|
|
@ -1,95 +1,35 @@
|
|||
<mat-tab-group>
|
||||
<mat-tab label="Zone">
|
||||
<div>
|
||||
---------------
|
||||
</div>
|
||||
|
||||
<!-- zone -->
|
||||
<mat-card class="infra-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Zone - 192.168.1.0/24</mat-card-title>
|
||||
</mat-card-header>
|
||||
<div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
|
||||
<mat-toolbar>
|
||||
<mat-toolbar-row>
|
||||
<span>IP : {{infra.host.ip}}</span>
|
||||
<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-grid-list cols="4" rowHeight="5:1">
|
||||
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="3">
|
||||
{{infra.target.displayName}}
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
|
||||
<div class="text-inside-grid">
|
||||
{{infra.infraType.name}}
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
Status: 기본 센서 데이터에서 저장한 metric으로..
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
|
||||
<div class="text-inside-grid">
|
||||
service list
|
||||
</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>
|
||||
<button mat-button>LIKE</button>
|
||||
<button mat-button>SHARE</button>
|
||||
</mat-card-actions> -->
|
||||
</mat-card>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<mat-card-content *ngFor="let service of infra.services">
|
||||
<mat-grid-list cols="6" rowHeight="9:1">
|
||||
<mat-grid-tile [rowspan]="2" style="background-color: lightcoral">
|
||||
{{service.vendor.name}}
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="3" style="background-color: lightblue">
|
||||
<div class="grid-left-align">
|
||||
Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}}
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [rowspan]="2" style="background-color: lightgray">
|
||||
<span class="pull-right"></span>
|
||||
<button mat-button fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="3" style="background-color: lightgreen">
|
||||
<div class="grid-left-align">
|
||||
Sensor:
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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.infras = page.content;
|
||||
// this.generateInfraHostData(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);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { MetaInfraType } from 'packages/meta/infra-type/model/MetaInfraType';
|
|||
|
||||
export interface MetaInfraVendor {
|
||||
id?: number;
|
||||
name: string;
|
||||
createDate: Date;
|
||||
infraType: MetaInfraType;
|
||||
name?: string;
|
||||
createDate?: Date;
|
||||
infraType?: MetaInfraType;
|
||||
}
|
||||
|
||||
export enum MetaInfraVendor_Machine_ID {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user