import { Component, OnInit, AfterContentInit } from '@angular/core'; 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'; import * as ListStore from '../../store/list'; import { ListSelector } from '../../store'; 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', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'] }) export class MapComponent implements OnInit, AfterContentInit { infras$ = this.listStore.pipe(select(ListSelector.select('page'))); hostDataList: HostData[] = new Array(); totalList: Infra[]; loading = false; constructor( private listStore: Store, public dialog: MatDialog ) { } ngOnInit() { this.infras$.subscribe( (page: Page) => { if (page !== null) { // this.totalList = page.content; // this.generateInfraHostData(); } }, (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: String('vendor' + i) } }; list.push(service); } } this.totalList = list; this.generateInfraHostData(); } ngAfterContentInit() { this.getInfraList(); } generateInfraHostData(filterStr?: string) { this.loading = true; 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; } const data: HostData = { target: infra.target, host: infra, services: new Array(), }; this.hostDataList.push(data); } else if (infraType === 'OS_SERVICE') { const infraService: InfraService = infra; if (filterStr && infraService.vendor.name.indexOf(filterStr) < 0) { continue; } 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); this.hostDataList.push(host); } } } this.loading = false; } 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) => { const pageParams: PageParams = { pageNo: '0', countPerPage: '9999999', sortCol: 'id', sortDirection: 'descending' }; this.listStore.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams })); }, (error) => { console.log(error); } ); } addSensor(infra: Infra) { const targetId = infra.target.id; const dialogRef = this.dialog.open(SettingComponent, { width: '80%', data: { 'infra': infra } }); dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); }); } showHostInfo(infraHost: InfraHost) { return 'Meta'; } showServiceInfo(infraService: InfraService) { return 'Meta'; } handleSearch(filterStr: string) { this.hostDataList.length = 0; this.generateInfraHostData(filterStr); } }