infra map

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({

src/packages/infra/component/map/map.component.html

@@ -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">
+<div *ngIf="loading" fxLayoutAlign="center">
-  <mat-toolbar>
+  <mat-spinner></mat-spinner>
-    <mat-toolbar-row>
+</div>
-      <span>IP : {{infra.host.ip}}</span>
+<div *ngIf="!loading">
-      <span class="pull-right"></span>
+  <div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
-      <button mat-raised-button color="primary" fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
+    <mat-toolbar>
-    </mat-toolbar-row>
+      <mat-toolbar-row>
-  </mat-toolbar>
+        <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-card-content *ngFor="let service of infra.services">
-    <mat-grid-list cols="6" rowHeight="9:1">
+      <mat-grid-list cols="6" rowHeight="9:1">
-      <mat-grid-tile [rowspan]="2" style="background-color: lightcoral">
+        <mat-grid-tile [rowspan]="2" matTooltip="showServiceInfo(service)" style="background-color: lightcoral">
-        {{service.vendor.name}}
+          {{service.vendor.name}}
-      </mat-grid-tile>
+        </mat-grid-tile>
-      <mat-grid-tile [colspan]="3" style="background-color: lightblue">
+        <mat-grid-tile [colspan]="3" style="background-color: lightblue">
-        <div class="grid-left-align">
+          <div class="grid-left-align">
-          Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}}
+            Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}}
-        </div>
+          </div>
-      </mat-grid-tile>
+        </mat-grid-tile>
-      <mat-grid-tile [rowspan]="2" style="background-color: lightgray">
+        <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">
+        <mat-grid-tile [colspan]="3" style="background-color: lightgreen">
-        <div class="grid-left-align">
+          <div class="grid-left-align">
-          Sensor: 
+            <span *ngFor="let sensor of infra.target.sensors">{{sensor.name}}</span>
-        </div>
+          </div>
-      </mat-grid-tile>
+        </mat-grid-tile>
-    </mat-grid-list>
+      </mat-grid-list>
-  </mat-card-content>
+    </mat-card-content>
+  </div>
 </div>

src/packages/infra/component/map/map.component.scss

@@ -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%;
+  }

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<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[]) {
+  generateInfraHostData(filterStr?: string) {
-    for (const infra of list) {
+    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);
+  }
 }

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,