This commit is contained in:
snoop 2018-04-16 20:23:47 +09:00
commit 5330179781
10 changed files with 150 additions and 51 deletions

View File

@ -6,9 +6,9 @@ import 'rxjs/add/operator/map';
import { RPCService } from '@loafer/ng-rpc/service'; import { RPCService } from '@loafer/ng-rpc/service';
import { Infra } from '../model'; import { Infra } from '../model';
import { Page, PageParams } from '../../../app/commons/model'; import { Page, PageParams } from 'app/commons/model';
import { Domain } from '../../domain/model'; import { Domain } from 'packages/domain/model';
import { Probe } from '../../probe/model'; import { Probe } from 'packages/probe/model';
@Injectable() @Injectable()
export class InfraService { export class InfraService {

View File

@ -7,8 +7,7 @@ import {
import { MODULE } from '../infra.constant'; import { MODULE } from '../infra.constant';
import * as ListStore from './list'; import * as ListStore from './list';
import { StateSelector } from '../../core/ngrx/store'; import { StateSelector } from 'packages/core/ngrx/store';
export interface State { export interface State {
list: ListStore.State; list: ListStore.State;

View File

@ -32,6 +32,32 @@ export function reducer(state = initialState, action: Actions): State {
}; };
} }
case ActionType.ReadAllByProbe: {
return {
...state,
error: null,
isPending: true,
};
}
case ActionType.ReadAllByProbeSuccess: {
return {
...state,
error: null,
isPending: false,
page: action.payload
};
}
case ActionType.ReadAllByProbeFailure: {
return {
...state,
error: action.payload,
isPending: false,
page: null
};
}
default: { default: {
return state; return state;
} }

View File

@ -1,12 +1,7 @@
import {
createSelector,
MemoizedSelector,
} from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc/protocol'; import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { Infra } from '../../model'; import { Infra } from '../../model';
import { Page } from '../../../../app/commons/model'; import { Page } from 'app/commons/model';
export interface State { export interface State {
error: RPCClientError | null; error: RPCClientError | null;
@ -20,11 +15,3 @@ export const initialState: State = {
page: null, page: null,
}; };
export class StateSelector {
public constructor(private _selector: MemoizedSelector<any, any>) {
}
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);
}

View File

@ -28,7 +28,6 @@ export class ListComponent implements OnInit, AfterContentInit {
ngOnInit() { ngOnInit() {
this.probes$.subscribe( this.probes$.subscribe(
(probes: Probe[]) => { (probes: Probe[]) => {
console.log(probes);
this.probes = probes; this.probes = probes;
}, },
(error: RPCClientError) => { (error: RPCClientError) => {

View File

@ -13,7 +13,3 @@ export const initialState: State = {
isPending: false, isPending: false,
probes: null, probes: null,
}; };
export const getProbes = (state: State) => state.probes;
export const getError = (state: State) => state.error;
export const isPending = (state: State) => state.isPending;

View File

@ -1,4 +1,4 @@
<div *ngIf="!preTarget"> <div *ngIf="preTarget === null">
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName" (onSelectionChange)="onSelectionChange($event)"> <p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName" (onSelectionChange)="onSelectionChange($event)">
<ng-template let-target pTemplate="item"> <ng-template let-target pTemplate="item">
<div class="ui-helper-clearfix"> <div class="ui-helper-clearfix">

View File

@ -1,5 +1,5 @@
<h1>Targets</h1> <h1>Targets</h1>
<p-table [value]="targets" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true"> <p-table [value]="infras" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>No.</th> <th>No.</th>
@ -11,7 +11,7 @@
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-probe let-rowIndex="rowIndex"> <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">
<tr [pSelectableRow]="infra"> <tr [pSelectableRow]="infra">
<td>{{rowIndex}}</td> <td>{{rowIndex}}</td>
<td>??</td> <td>??</td>
@ -20,8 +20,12 @@
<td>??</td> <td>??</td>
<td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td> <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
<td> <td>
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget()"></button> <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor(infra.target)"></button>
</td> </td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
</p-dialog>

View File

@ -3,50 +3,136 @@ import { Router, ActivatedRoute } from '@angular/router';
import { Infra } from 'packages/infra/model'; import { Infra } from 'packages/infra/model';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import { ListSelector } from 'packages/infra/store'; import { ListSelector } from 'packages/infra/store';
import * as ListStore from 'packages/infra/store/list'; import * as InfraListStore from 'packages/infra/store/list';
import { Page } from 'app/commons/model'; import { Page, PageParams } from 'app/commons/model';
import { RPCClientError } from '@loafer/ng-rpc/protocol'; import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { Probe } from 'packages/probe/model'; import { Probe } from 'packages/probe/model';
import * as ProbeDetailStore from 'packages/probe/store/detail';
import { DetailSelector as ProbeDetailSelector } from 'packages/probe/store';
import { Target } from '../../model';
@Component({ @Component({
selector: 'of-target-list', selector: 'of-target-list',
templateUrl: './list.component.html', templateUrl: './list.component.html',
}) })
export class ListComponent implements OnInit, AfterContentInit { export class ListComponent implements OnInit, AfterContentInit {
infras$ = this.store.pipe(select(ListSelector.select('page'))); probe$ = this.probeDetailStore.pipe(select(ProbeDetailSelector.select('probe')));
infras$ = this.infraListStore.pipe(select(ListSelector.select('page')));
infras: Infra[]; infras: Infra[];
probe: Probe; probe: Probe;
target: Target = null;
sensorSettingDisplay = false;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private store: Store<ListStore.State> private infraListStore: Store<InfraListStore.State>,
private probeDetailStore: Store<ProbeDetailStore.State>,
) { ) {
console.log('PROBE ID: ' + this.route.snapshot.paramMap.get('id'));
this.getProbe();
} }
ngOnInit() { ngOnInit() {
this.infras$.subscribe( // this.probe$.subscribe(
(page: Page) => { // (probe: Probe) => {
if (page) { // if (probe) {
this.infras = page.content; // console.log(probe);
} // this.probe = probe;
}, // this.getInfras(probe);
(error: RPCClientError) => { // }
console.log(error.response.message); // },
} // (error: RPCClientError) => {
); // console.log(error.response.message);
// }
// );
// this.infras$.subscribe(
// (page: Page) => {
// if (!page) {
// return;
// }
// this.infras = page.content;
// },
// (error: RPCClientError) => {
// console.log(error);
// }
// );
} }
ngAfterContentInit() { ngAfterContentInit() {
// if (this.probe) { const probeId = this.route.snapshot.paramMap.get('id');
// this.store.dispatch(new ListStore.ReadAllByProbe(this.probe)); this.getProbe(probeId);
// }
// Temporary
const infra1 = {
id: 1,
infraType: {
id: 1
},
target: {
id: 1,
displayName: 'FakeTarget1',
},
};
const infra2 = {
id: 2,
infraType: {
id: 3
},
target: {
id: 2,
displayName: 'FakeTarget2',
},
};
const infra3 = {
id: 3,
infraType: {
id: 2
},
target: {
id: 3,
displayName: 'FakeTarget3',
},
};
this.infras = [];
this.infras.push(infra1);
this.infras.push(infra2);
this.infras.push(infra3);
} }
getProbe() { getProbe(probeId: string) {
this.probeDetailStore.dispatch(
new ProbeDetailStore.Read(
{ id: probeId }
)
);
}
getInfras(probe) {
const pageParams: PageParams = {
pageNo: '0',
countPerPage: '10',
sortCol: 'id',
sortDirection: 'descending'
};
this.infraListStore.dispatch(
new InfraListStore.ReadAllByProbe(
{ probe, pageParams }
)
);
}
onRowSelect(event) {
console.log(event.data);
}
onAddSensor(target: Target) {
this.target = target;
this.sensorSettingDisplay = true;
}
onSensorSettingClose() {
this.sensorSettingDisplay = false;
} }
} }

View File

@ -4,11 +4,13 @@ import { CommonModule } from '@angular/common';
import { COMPONENTS } from './component'; import { COMPONENTS } from './component';
import { SERVICES } from './service'; import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
import { SensorModule } from '../sensor/sensor.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
PrimeNGModules PrimeNGModules,
SensorModule
], ],
declarations: [ declarations: [
COMPONENTS, COMPONENTS,