From 4eb86bf986f9434b1280ddaafa78bab7b1697ac7 Mon Sep 17 00:00:00 2001 From: insanity Date: Wed, 28 Mar 2018 15:22:45 +0900 Subject: [PATCH] infra map --- .../commons/material/material.module.ts | 4 +- .../infra/component/map/map.component.html | 76 +++++++++++-------- .../infra/component/map/map.component.scss | 31 +++++++- .../infra/component/map/map.component.ts | 44 ++++++++--- src/packages/infra/infra.module.ts | 4 +- 5 files changed, 115 insertions(+), 44 deletions(-) diff --git a/src/packages/commons/material/material.module.ts b/src/packages/commons/material/material.module.ts index 2670a60..3e6dbd9 100644 --- a/src/packages/commons/material/material.module.ts +++ b/src/packages/commons/material/material.module.ts @@ -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({ diff --git a/src/packages/infra/component/map/map.component.html b/src/packages/infra/component/map/map.component.html index 071c743..d99e89a 100644 --- a/src/packages/infra/component/map/map.component.html +++ b/src/packages/infra/component/map/map.component.html @@ -1,35 +1,51 @@ -
- --------------- +
+
+ + + search + +
+
+
+
Up +
Down +
Warn +
Error
-
- - - IP : {{infra.host.ip}} - - - - - - - - - {{service.vendor.name}} - - -
- Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}} -
- - +
+ +
+
+
+ + + IP : {{infra.host.ip}} + + + + + + + + + {{service.vendor.name}} + + +
+ Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}} +
+ + - -
- Sensor: -
- - - -
\ No newline at end of file + +
+ {{sensor.name}} +
+ + + +
+
diff --git a/src/packages/infra/component/map/map.component.scss b/src/packages/infra/component/map/map.component.scss index ea4e2b4..64e772e 100644 --- a/src/packages/infra/component/map/map.component.scss +++ b/src/packages/infra/component/map/map.component.scss @@ -41,4 +41,33 @@ cursor: default; right: 1px; } - \ No newline at end of file + .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%; + } \ No newline at end of file diff --git a/src/packages/infra/component/map/map.component.ts b/src/packages/infra/component/map/map.component.ts index 2e74aea..a56f05c 100644 --- a/src/packages/infra/component/map/map.component.ts +++ b/src/packages/infra/component/map/map.component.ts @@ -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, 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); + } } diff --git a/src/packages/infra/infra.module.ts b/src/packages/infra/infra.module.ts index ce72315..66ed8ac 100644 --- a/src/packages/infra/infra.module.ts +++ b/src/packages/infra/infra.module.ts @@ -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,