overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing infra map

Browse Source
This commit is contained in:
snoop 2018-04-13 19:32:17 +09:00
parent f66d2fa42d
commit a336a3affb
4 changed files with 239 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/packages/discovery/component/setting/setting.component.html
View File

@ -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>

16
src/packages/discovery/component/setting/setting.component.ts
View File

@ -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[] {

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

@ -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">

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

@ -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);