infra map
This commit is contained in:
insanity
parent
9eb32c98ff
commit
4eb86bf986
|
|
@ -8,7 +8,7 @@ import {
|
|||
MatTabsModule, MatSelectModule, MatRadioModule,
|
||||
MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
|
||||
MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule,
|
||||
MatProgressBarModule
|
||||
MatProgressBarModule, MatProgressSpinnerModule
|
||||
} from '@angular/material';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
|
@ -21,7 +21,7 @@ const MATERIAL_MODULES: any[] = [
|
|||
MatTabsModule, MatSelectModule, MatRadioModule,
|
||||
MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
|
||||
MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule,
|
||||
MatProgressBarModule
|
||||
MatProgressBarModule, MatProgressSpinnerModule
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -1,35 +1,51 @@
|
|||
<div>
|
||||
---------------
|
||||
<div fxLayoutAlign="end" [style.margin]="'10px 10px'">
|
||||
<form class="form">
|
||||
<mat-form-field class="full-width">
|
||||
<input matInput placeholder="Search" [(ngModel)]="searchWord" (ngModelChange)="handleSearch($event)" [ngModelOptions]="{standalone: true}">
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
<div fxLayoutAlign="end" [style.margin]="'10px 10px'">
|
||||
<div class="box up"></div>Up
|
||||
<div class="box down"></div>Down
|
||||
<div class="box warn"></div>Warn
|
||||
<div class="box error"></div>Error
|
||||
</div>
|
||||
|
||||
<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 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">
|
||||
<div *ngIf="loading" fxLayoutAlign="center">
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
<div *ngIf="!loading">
|
||||
<div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
|
||||
<mat-toolbar>
|
||||
<mat-toolbar-row>
|
||||
<span matTooltip="showHostInfo(infra)">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 service of infra.services">
|
||||
<mat-grid-list cols="6" rowHeight="9:1">
|
||||
<mat-grid-tile [rowspan]="2" matTooltip="showServiceInfo(service)" 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>
|
||||
<mat-grid-tile [colspan]="3" style="background-color: lightgreen">
|
||||
<div class="grid-left-align">
|
||||
<span *ngFor="let sensor of infra.target.sensors">{{sensor.name}}</span>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,4 +41,33 @@ cursor: default;
|
|||
right: 1px;
|
||||
}
|
||||
|
||||
|
||||
.box{
|
||||
float: left;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.up{
|
||||
background: green;
|
||||
}
|
||||
.down{
|
||||
background: red;
|
||||
}
|
||||
.warn{
|
||||
background: yellow;
|
||||
}
|
||||
.error{
|
||||
background:red;
|
||||
}
|
||||
|
||||
.form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -27,6 +27,9 @@ 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<ListStore.State>,
|
||||
public dialog: MatDialog
|
||||
|
|
@ -36,7 +39,8 @@ export class MapComponent implements OnInit, AfterContentInit {
|
|||
this.infras$.subscribe(
|
||||
(page: Page) => {
|
||||
if (page !== null) {
|
||||
// this.generateInfraHostData(page.content);
|
||||
// this.totalList = page.content;
|
||||
// this.generateInfraHostData();
|
||||
}
|
||||
},
|
||||
(error: RPCClientError) => {
|
||||
|
|
@ -72,31 +76,40 @@ export class MapComponent implements OnInit, AfterContentInit {
|
|||
portType: 'TCP',
|
||||
port: i,
|
||||
vendor: {
|
||||
name: 'vendor'
|
||||
name: String('vendor' + i)
|
||||
}
|
||||
};
|
||||
list.push(service);
|
||||
}
|
||||
}
|
||||
this.generateInfraHostData(list);
|
||||
this.totalList = list;
|
||||
this.generateInfraHostData();
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this.getInfraList();
|
||||
}
|
||||
|
||||
generateInfraHostData(list: Infra[]) {
|
||||
for (const infra of list) {
|
||||
generateInfraHostData(filterStr?: string) {
|
||||
this.loading = true;
|
||||
for (const infra of this.totalList) {
|
||||
const infraType = infra.infraType.name;
|
||||
if (infraType === 'HOST') {
|
||||
const host: HostData = {
|
||||
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(host);
|
||||
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);
|
||||
|
|
@ -107,13 +120,13 @@ export class MapComponent implements OnInit, AfterContentInit {
|
|||
services: new Array()
|
||||
};
|
||||
host.services.push(infraService);
|
||||
this.hostDataList.push(host);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.hostDataList);
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
|
||||
getExistHost(infraHost: InfraHost): HostData {
|
||||
let node = null;
|
||||
for (const data of this.hostDataList) {
|
||||
|
|
@ -154,7 +167,18 @@ export class MapComponent implements OnInit, AfterContentInit {
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,15 @@ import { SERVICES } from './service';
|
|||
import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting-page.module';
|
||||
import { SensorModule } from '../sensor/sensor.module';
|
||||
import { SettingComponent } from '../sensor/component/setting/setting.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MaterialModule,
|
||||
InfraStoreModule,
|
||||
SensorModule
|
||||
SensorModule,
|
||||
FormsModule
|
||||
],
|
||||
declarations: [
|
||||
COMPONENTS,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user