diff --git a/src/app/pages/infra/infra-page.component.html b/src/app/pages/infra/infra-page.component.html index 62da216..465d468 100644 --- a/src/app/pages/infra/infra-page.component.html +++ b/src/app/pages/infra/infra-page.component.html @@ -1,57 +1,5 @@ - - - - - Zone - 192.168.1.0/24 - Windows / Probe - - - - Host - 192.168.1.162 - - - Service - FTP MySQL SMB - - - Sensor(2) - - MySQL SNMP - - - - - - - - - - - Host - 192.168.1.106 - MySQL - + + - - - MySQL - Port : 3306 | TCP | TLS - - - Sensor - PostgreSQL - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/infra/infra-page.component.scss b/src/app/pages/infra/infra-page.component.scss index 3c506eb..e69de29 100644 --- a/src/app/pages/infra/infra-page.component.scss +++ b/src/app/pages/infra/infra-page.component.scss @@ -1,8 +0,0 @@ -.example-card { - width: 400px; -} - -.example-header-image { - background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); - background-size: cover; -} diff --git a/src/app/pages/infra/infra-page.component.ts b/src/app/pages/infra/infra-page.component.ts index be747df..a162522 100644 --- a/src/app/pages/infra/infra-page.component.ts +++ b/src/app/pages/infra/infra-page.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { MatDialog } from '@angular/material'; +import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component'; @Component({ selector: 'of-infra-page', @@ -7,9 +9,24 @@ import { Component, OnInit } from '@angular/core'; }) export class InfraPageComponent implements OnInit { - constructor() { } + constructor( + private dialog: MatDialog + ) { } ngOnInit() { } + discovery() { + const dialogRef = this.dialog.open(DiscoverySettingComponent, { + width: '80%', + }); + + dialogRef.afterClosed().subscribe(result => { + console.log('The dialog was closed'); + + }); + } + + authProbe() { + } } diff --git a/src/app/pages/infra/infra-page.module.ts b/src/app/pages/infra/infra-page.module.ts index f6e7281..e4c6b75 100644 --- a/src/app/pages/infra/infra-page.module.ts +++ b/src/app/pages/infra/infra-page.module.ts @@ -7,6 +7,7 @@ import { InfraPageRoutingModule } from './infra-page-routing.module'; import { MaterialModule } from 'app/commons/ui/material/material.module'; import { InfraModule } from 'packages/infra/infra.module'; +import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component'; @NgModule({ imports: [ @@ -15,6 +16,11 @@ import { InfraModule } from 'packages/infra/infra.module'; MaterialModule, InfraModule ], - declarations: [InfraPageComponent] + declarations: [ + InfraPageComponent + ], + entryComponents: [ + DiscoverySettingComponent + ] }) export class InfraPageModule { } diff --git a/src/packages/infra/component/map/map.component.html b/src/packages/infra/component/map/map.component.html index 41e757e..c08f0c8 100644 --- a/src/packages/infra/component/map/map.component.html +++ b/src/packages/infra/component/map/map.component.html @@ -1,3 +1,90 @@ -

- map works! -

+ + + + + + + Zone - 192.168.1.0/24 + + + + + + + {{infra.target.displayName}} + + +
+ {{infra.infraType.name}} +
+
+ + + +
????
+
+ + + +
?????
+
+ +
+ +
+
+ +
+ + + + +
+
+
+ + + + + + Host - 192.168.1.106 + MySQL + + + + + MySQL + Port : 3306 | TCP | TLS + + + Sensor + PostgreSQL + + + + + + + +
\ No newline at end of file diff --git a/src/packages/infra/component/map/map.component.scss b/src/packages/infra/component/map/map.component.scss index e69de29..1e53192 100644 --- a/src/packages/infra/component/map/map.component.scss +++ b/src/packages/infra/component/map/map.component.scss @@ -0,0 +1,13 @@ +.infra-card { + width: 70%; + } + + .text-inside-grid { + position: absolute; + left: 5px; + } + + .add-sensor-button { + position: absolute; + right: 1px; + } \ 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 182e1ca..9c7116d 100644 --- a/src/packages/infra/component/map/map.component.ts +++ b/src/packages/infra/component/map/map.component.ts @@ -1,15 +1,78 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, AfterContentInit } from '@angular/core'; +import { Infra, InfraHost, InfraOSApplication } from '../../model'; +import { Store, select } from '@ngrx/store'; +import { RPCError } from 'packages/core/rpc/error'; +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 { SensorSettingPageComponent } from 'app/pages/sensor-setting/sensor-setting-page.component'; @Component({ - selector: 'of-map', + selector: 'of-infra-map', templateUrl: './map.component.html', styleUrls: ['./map.component.scss'] }) -export class MapComponent implements OnInit { +export class MapComponent implements OnInit, AfterContentInit { - constructor() { } + infras$ = this.listStore.pipe(select(ListSelector.select('page'))); + infras: Infra[]; + + constructor( + private listStore: Store, + public dialog: MatDialog + ) { } ngOnInit() { + this.infras$.subscribe( + (page: Page) => { + if (page !== null) { + console.log(page); + this.infras = page.content; + } + }, + (error: RPCError) => { + console.log(error.message); + } + ); + } + + ngAfterContentInit() { + this.getInfraList(); + } + + 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; + console.log(targetId); + + const dialogRef = this.dialog.open(SensorSettingPageComponent, { + width: '80%', + data: { } + }); + + dialogRef.afterClosed().subscribe(result => { + console.log('The dialog was closed'); + }); + } } diff --git a/src/packages/infra/infra.module.ts b/src/packages/infra/infra.module.ts index 3d61753..03f3de6 100644 --- a/src/packages/infra/infra.module.ts +++ b/src/packages/infra/infra.module.ts @@ -7,12 +7,15 @@ import { InfraStoreModule } from './infra-store.module'; import { COMPONENTS } from './component'; import { SERVICES } from './service'; +import { SensorSettingPageComponent } from 'app/pages/sensor-setting/sensor-setting-page.component'; +import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting-page.module'; @NgModule({ imports: [ CommonModule, MaterialModule, - InfraStoreModule + InfraStoreModule, + SensorSettingPageModule ], declarations: [ COMPONENTS, @@ -22,6 +25,9 @@ import { SERVICES } from './service'; ], providers: [ SERVICES + ], + entryComponents: [ + SensorSettingPageComponent, ] }) export class InfraModule { } diff --git a/src/packages/infra/service/infra.service.ts b/src/packages/infra/service/infra.service.ts index eaa30cb..465d712 100644 --- a/src/packages/infra/service/infra.service.ts +++ b/src/packages/infra/service/infra.service.ts @@ -6,7 +6,7 @@ import 'rxjs/add/operator/map'; import { RPCClient } from 'packages/core/rpc/client/RPCClient'; import { Infra } from '../model'; -import { Page } from '../../../app/commons/model'; +import { Page, PageParams } from '../../../app/commons/model'; import { Domain } from '../../domain/model'; import { Probe } from '../../probe/model'; @@ -19,11 +19,11 @@ export class InfraService { } - public readByDomain(domain: Domain): Observable { - return this.rpcClient.call('InfraService.', domain); + public readAllByDomain(domain: Domain, pageParams: PageParams): Observable { + return this.rpcClient.call('InfraService.readAllByDomain', domain, pageParams); } - public readByProbe(probe: Probe): Observable { - return this.rpcClient.call('InfraService.', probe); + public readAllByProbe(probe: Probe, pageParams: PageParams): Observable { + return this.rpcClient.call('InfraService.readAllByProbe', probe, pageParams); } } diff --git a/src/packages/infra/store/index.ts b/src/packages/infra/store/index.ts index cea992e..5c1dd3f 100644 --- a/src/packages/infra/store/index.ts +++ b/src/packages/infra/store/index.ts @@ -1,37 +1,31 @@ import { - createSelector, - createFeatureSelector, - ActionReducerMap, - } from '@ngrx/store'; + createSelector, + createFeatureSelector, + ActionReducerMap, +} from '@ngrx/store'; - import { MODULE } from '../infra.constant'; +import { MODULE } from '../infra.constant'; - import * as ReadByDomainStore from './readbydomain'; +import * as ListStore from './list'; +import { StateSelector } from '../../core/ngrx/store'; - export interface State { - readbydomain: ReadByDomainStore.State; - } +export interface State { + list: ListStore.State; +} - export const REDUCERS = { - readbydomain: ReadByDomainStore.reducer, - }; +export const REDUCERS = { + list: ListStore.reducer, +}; - export const EFFECTS = [ - ReadByDomainStore.Effects, - ]; +export const EFFECTS = [ + ListStore.Effects, +]; - export const selectInfraState = createFeatureSelector(MODULE.name); +export const selectInfraState = createFeatureSelector(MODULE.name); - export const selectInfraReadByDomainState = createSelector( - selectInfraState, - (state: State) => state.readbydomain - ); +export const ListSelector = new StateSelector(createSelector( + selectInfraState, + (state: State) => state.list +)); - export const AuthSelector = new ReadByDomainStore.StateSelector(selectInfraReadByDomainState); - - - export const selectInfraReadByDomianState = createSelector( - selectInfraState, - (state: State) => state.readbydomain - ); diff --git a/src/packages/infra/store/list/index.ts b/src/packages/infra/store/list/index.ts new file mode 100644 index 0000000..7fd86e0 --- /dev/null +++ b/src/packages/infra/store/list/index.ts @@ -0,0 +1,4 @@ +export * from './list.action'; +export * from './list.effect'; +export * from './list.reducer'; +export * from './list.state'; diff --git a/src/packages/infra/store/list/list.action.ts b/src/packages/infra/store/list/list.action.ts new file mode 100644 index 0000000..0e0fdd0 --- /dev/null +++ b/src/packages/infra/store/list/list.action.ts @@ -0,0 +1,63 @@ +import { Action } from '@ngrx/store'; + +import { RPCError } from 'packages/core/rpc/error'; + +import { PageParams, Page } from 'app/commons/model'; +import { Domain } from '../../../domain/model'; +import { Probe } from '../../../probe/model'; + +export enum ActionType { + ReadAllByDomain = '[Infra.list] ReadAllByDomain', + ReadAllByDomainSuccess = '[Infra.list] ReadAllByDomainSuccess', + ReadAllByDomainFailure = '[Infra.list] ReadAllByDomainFailure', + + ReadAllByProbe = '[Infra.list] ReadAllByProbe', + ReadAllByProbeSuccess = '[Infra.list] ReadAllByProbeSuccess', + ReadAllByProbeFailure = '[Infra.list] ReadAllByProbeFailure', +} + +export class ReadAllByDomain implements Action { + readonly type = ActionType.ReadAllByDomain; + + constructor(public payload: { domain: Domain, pageParams: PageParams }) { } +} + +export class ReadAllByDomainSuccess implements Action { + readonly type = ActionType.ReadAllByDomainSuccess; + + constructor(public payload: Page) { } +} + +export class ReadAllByDomainFailure implements Action { + readonly type = ActionType.ReadAllByDomainFailure; + + constructor(public payload: RPCError) { } +} + +export class ReadAllByProbe implements Action { + readonly type = ActionType.ReadAllByProbe; + + constructor(public payload: { probe: Probe, pageParams: PageParams }) { } +} + +export class ReadAllByProbeSuccess implements Action { + readonly type = ActionType.ReadAllByProbeSuccess; + + constructor(public payload: Page) { } +} + +export class ReadAllByProbeFailure implements Action { + readonly type = ActionType.ReadAllByProbeFailure; + + constructor(public payload: RPCError) { } +} + + +export type Actions = + | ReadAllByDomain + | ReadAllByDomainSuccess + | ReadAllByDomainFailure + | ReadAllByProbe + | ReadAllByProbeSuccess + | ReadAllByProbeFailure + ; diff --git a/src/packages/infra/store/readbydomain/readbydomain.effect.spec.ts b/src/packages/infra/store/list/list.effect.spec.ts similarity index 76% rename from src/packages/infra/store/readbydomain/readbydomain.effect.spec.ts rename to src/packages/infra/store/list/list.effect.spec.ts index 714d760..a77b6b1 100644 --- a/src/packages/infra/store/readbydomain/readbydomain.effect.spec.ts +++ b/src/packages/infra/store/list/list.effect.spec.ts @@ -1,8 +1,8 @@ import { TestBed, inject } from '@angular/core/testing'; -import { Effects } from './readbydomain.effect'; +import { Effects } from './list.effect'; -describe('Signup.Effects', () => { +describe('list.Effects', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [Effects] diff --git a/src/packages/infra/store/list/list.effect.ts b/src/packages/infra/store/list/list.effect.ts new file mode 100644 index 0000000..34c23d9 --- /dev/null +++ b/src/packages/infra/store/list/list.effect.ts @@ -0,0 +1,64 @@ +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Effect, Actions, ofType } from '@ngrx/effects'; +import { Action } from '@ngrx/store'; + +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; + +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/exhaustMap'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/take'; + +import { RPCError } from 'packages/core/rpc/error'; + +import { Infra } from '../../model'; +import { InfraService } from '../../service/infra.service'; + +import { + ReadAllByDomain, + ReadAllByDomainSuccess, + ReadAllByDomainFailure, + ReadAllByProbe, + ReadAllByProbeSuccess, + ReadAllByProbeFailure, + ActionType, +} from './list.action'; +import { Domain } from 'packages/domain/model'; + +@Injectable() +export class Effects { + + constructor( + private actions$: Actions, + private infraService: InfraService, + private router: Router + ) { } + + @Effect() + readAllByDomain$: Observable = this.actions$ + .ofType(ActionType.ReadAllByDomain) + .map((action: ReadAllByDomain) => action.payload) + .switchMap(payload => this.infraService.readAllByDomain(payload.domain, payload.pageParams)) + .map(page => { + return new ReadAllByDomainSuccess(page); + }) + .catch((error: RPCError) => { + return of(new ReadAllByDomainFailure(error)); + }); + + @Effect() + readAllByProbe$: Observable = this.actions$ + .ofType(ActionType.ReadAllByProbe) + .map((action: ReadAllByProbe) => action.payload) + .switchMap(payload => this.infraService.readAllByProbe(payload.probe, payload.pageParams)) + .map(page => { + return new ReadAllByProbeSuccess(page); + }) + .catch((error: RPCError) => { + return of(new ReadAllByProbeFailure(error)); + }); +} diff --git a/src/packages/infra/store/readbydomain/readbydomain.reducer.ts b/src/packages/infra/store/list/list.reducer.ts similarity index 57% rename from src/packages/infra/store/readbydomain/readbydomain.reducer.ts rename to src/packages/infra/store/list/list.reducer.ts index 4ca408f..698b9d4 100644 --- a/src/packages/infra/store/readbydomain/readbydomain.reducer.ts +++ b/src/packages/infra/store/list/list.reducer.ts @@ -1,34 +1,34 @@ -import { Actions, ActionType } from './readbydomain.action'; +import { Actions, ActionType } from './list.action'; -import { State, initialState } from './readbydomain.state'; +import { State, initialState } from './list.state'; import { Infra } from '../../model'; export function reducer(state = initialState, action: Actions): State { switch (action.type) { - case ActionType.Readbydomain: { + case ActionType.ReadAllByDomain: { return { ...state, error: null, - isPending: true + isPending: true, }; } - case ActionType.ReadbydomainSuccess: { + case ActionType.ReadAllByDomainSuccess: { return { ...state, error: null, isPending: false, - infraList: action.payload.content + page: action.payload }; } - case ActionType.ReadbydomainFailure: { + case ActionType.ReadAllByDomainFailure: { return { ...state, error: action.payload, isPending: false, - infraList: null + page: null }; } diff --git a/src/packages/infra/store/readbydomain/readbydomain.state.ts b/src/packages/infra/store/list/list.state.ts similarity index 86% rename from src/packages/infra/store/readbydomain/readbydomain.state.ts rename to src/packages/infra/store/list/list.state.ts index 4d0c084..18ccc29 100644 --- a/src/packages/infra/store/readbydomain/readbydomain.state.ts +++ b/src/packages/infra/store/list/list.state.ts @@ -9,24 +9,22 @@ import { Infra } from '../../model'; import { Page } from '../../../../app/commons/model'; export interface State { - isSignin: boolean; error: RPCError | null; isPending: boolean; - infraList: Page | null; + page: Page | null; } export const initialState: State = { - isSignin: false, error: null, isPending: false, - infraList: null, + page: null, }; export class StateSelector { public constructor(private _selector: MemoizedSelector) { } - public getInfraList = createSelector(this._selector, (state: State) => state.infraList); + public getInfraList = createSelector(this._selector, (state: State) => state.page); public getError = createSelector(this._selector, (state: State) => state.error); public isPending = createSelector(this._selector, (state: State) => state.isPending); } diff --git a/src/packages/infra/store/readbydomain/index.ts b/src/packages/infra/store/readbydomain/index.ts deleted file mode 100644 index 65f75f2..0000000 --- a/src/packages/infra/store/readbydomain/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './readbydomain.action'; -export * from './readbydomain.effect'; -export * from './readbydomain.reducer'; -export * from './readbydomain.state'; diff --git a/src/packages/infra/store/readbydomain/readbydomain.action.ts b/src/packages/infra/store/readbydomain/readbydomain.action.ts deleted file mode 100644 index dd39c71..0000000 --- a/src/packages/infra/store/readbydomain/readbydomain.action.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Action } from '@ngrx/store'; - -import { RPCError } from 'packages/core/rpc/error'; - -import { Infra } from '../../model'; -import { Page } from '../../../../app/commons/model'; - -export enum ActionType { - Readbydomain = '[infra.readbydomain] Readbydomain', - ReadbydomainSuccess = '[infra.readbydomain] ReadbydomainSuccess', - ReadbydomainFailure = '[infra.readbydomain] ReadbydomainFailure', -} - -export class Readbydomain implements Action { - readonly type = ActionType.Readbydomain; - - constructor(public payload: Infra) {} -} - -export class ReadbydomainSuccess implements Action { - readonly type = ActionType.ReadbydomainSuccess; - - constructor(public payload: Page) {} -} - -export class ReadbydomainFailure implements Action { - readonly type = ActionType.ReadbydomainFailure; - - constructor(public payload: RPCError) {} -} - -export type Actions = - | Readbydomain - | ReadbydomainSuccess - | ReadbydomainFailure -; diff --git a/src/packages/infra/store/readbydomain/readbydomain.effect.ts b/src/packages/infra/store/readbydomain/readbydomain.effect.ts deleted file mode 100644 index fd53cf4..0000000 --- a/src/packages/infra/store/readbydomain/readbydomain.effect.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Effect, Actions, ofType } from '@ngrx/effects'; -import { Action } from '@ngrx/store'; - -import { Observable } from 'rxjs/Observable'; -import { of } from 'rxjs/observable/of'; - -import 'rxjs/add/operator/catch'; -import 'rxjs/add/operator/do'; -import 'rxjs/add/operator/exhaustMap'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/take'; - -import { RPCError } from 'packages/core/rpc/error'; - -import { Infra } from '../../model'; -import { InfraService } from '../../service/infra.service'; - -import { - Readbydomain, - ReadbydomainSuccess, - ReadbydomainFailure, - ActionType, -} from './readbydomain.action'; -import { Domain } from 'packages/domain/model'; - -@Injectable() -export class Effects { - - constructor( - private actions$: Actions, - private infraService: InfraService, - private router: Router - ) { } - - @Effect() - readbydomain$: Observable = this.actions$ - .ofType(ActionType.Readbydomain) - .map((action: Readbydomain) => action.payload) - .exhaustMap(member => - this.infraService - .readByDomain(member) - .map(_member => new ReadbydomainSuccess(_member)) - .catch(error => of(new ReadbydomainFailure(error))) - ); - - @Effect({ dispatch: false }) - readbydomainSuccess$ = this.actions$ - .ofType(ActionType.ReadbydomainSuccess) - .do(() => this.router.navigate(['/'])); - -} diff --git a/src/packages/notification/store/index.ts b/src/packages/notification/store/index.ts index 157fe40..ae3136a 100644 --- a/src/packages/notification/store/index.ts +++ b/src/packages/notification/store/index.ts @@ -32,7 +32,7 @@ export const ReadAllByMemberSelector = new StateSelector(create selectNotificationState, (state: State) => state.notifications )); - export const ReadSelector = new StateSelector(createSelector( - selectNotificationState, - (state: State) => state.notification - )); +export const ReadSelector = new StateSelector(createSelector( + selectNotificationState, + (state: State) => state.notification +)); diff --git a/src/packages/sensor/component/index.ts b/src/packages/sensor/component/index.ts index 840a72b..7d11086 100644 --- a/src/packages/sensor/component/index.ts +++ b/src/packages/sensor/component/index.ts @@ -1,11 +1,11 @@ -import { DiscoverySettingComponent } from './setting/setting.component'; +import { SettingComponent } from './setting/setting.component'; import { SettingResultComponent } from './setting-result/setting-result.component'; import { FilterComponent } from './list/filter/filter.component'; import { ListComponent } from './list/list.component'; import { DetailComponent } from './detail/detail.component'; export const COMPONENTS = [ - DiscoverySettingComponent, + SettingComponent, SettingResultComponent, ListComponent, FilterComponent, diff --git a/src/packages/sensor/component/setting/setting.component.spec.ts b/src/packages/sensor/component/setting/setting.component.spec.ts index 009aeb2..0f66542 100644 --- a/src/packages/sensor/component/setting/setting.component.spec.ts +++ b/src/packages/sensor/component/setting/setting.component.spec.ts @@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SettingComponent } from './setting.component'; -describe('SettingComponent', () => { +describe('SensorSettingComponent', () => { let component: SettingComponent; let fixture: ComponentFixture; diff --git a/src/packages/sensor/component/setting/setting.component.ts b/src/packages/sensor/component/setting/setting.component.ts index 03c2323..14d667c 100644 --- a/src/packages/sensor/component/setting/setting.component.ts +++ b/src/packages/sensor/component/setting/setting.component.ts @@ -7,7 +7,7 @@ import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks'; templateUrl: './setting.component.html', styleUrls: ['./setting.component.scss'] }) -export class DiscoverySettingComponent implements OnInit, AfterContentInit { +export class SettingComponent implements OnInit, AfterContentInit { constructor() { }