arrange pages

src/packages/infra/service/infra.service.ts

@@ -26,4 +26,8 @@ export class InfraService {
   public readAllByProbe(probe: Probe, pageParams: PageParams): Observable<Page> {
     return this.rpcService.call('InfraService.readAllByProbe', probe, pageParams);
   }
+
+  public read(id: string): Observable<Infra> {
+    return this.rpcService.call('InfraService.read', id);
+  }
 }

src/packages/infra/store/detail/detail.action.ts

@@ -0,0 +1,35 @@
+import { Action } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Infra } from '../../model';
+
+export enum ActionType {
+  Read = '[Infra.list] Read',
+  ReadSuccess = '[Infra.list] ReadSuccess',
+  ReadFailure = '[Infra.list] ReadFailure',
+}
+
+export class Read implements Action {
+  readonly type = ActionType.Read;
+
+  constructor(public payload: { id: string }) { }
+}
+
+export class ReadSuccess implements Action {
+  readonly type = ActionType.ReadSuccess;
+
+  constructor(public payload: Infra) { }
+}
+
+export class ReadFailure implements Action {
+  readonly type = ActionType.ReadFailure;
+
+  constructor(public payload: RPCClientError) { }
+}
+
+
+
+export type Actions =
+  | Read
+  | ReadSuccess
+  | ReadFailure
+  ;

src/packages/infra/store/detail/detail.effect.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('list.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});

src/packages/infra/store/detail/detail.effect.ts

@@ -0,0 +1,49 @@
+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 { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Infra } from '../../model';
+
+import {
+  Read,
+  ReadSuccess,
+  ReadFailure,
+  ActionType,
+} from './detail.action';
+import { InfraService } from '../../service/infra.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private infraService: InfraService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  read$: Observable<Action> = this.actions$
+    .ofType(ActionType.Read)
+    .map((action: Read) => action.payload)
+    .switchMap(payload => this.infraService.read(payload.id))
+    .map(infra => {
+      return new ReadSuccess(infra);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadFailure(error));
+    });
+
+}

src/packages/infra/store/detail/detail.reducer.ts

@@ -0,0 +1,38 @@
+import { Actions, ActionType } from './detail.action';
+import { State, initialState } from './detail.state';
+
+import { Infra } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Read: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        infra: action.payload
+      };
+    }
+
+    case ActionType.ReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        infra: null
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/infra/store/detail/detail.state.ts

@@ -0,0 +1,16 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Infra } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  isPending: boolean;
+  infra: Infra | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  infra: null,
+};
+

src/packages/infra/store/detail/index.ts

@@ -0,0 +1,4 @@
+export * from './detail.action';
+export * from './detail.effect';
+export * from './detail.reducer';
+export * from './detail.state';

src/packages/infra/store/index.ts

@@ -7,18 +7,22 @@ import {
 import { MODULE } from '../infra.constant';
 
 import * as ListStore from './list';
+import * as DetailStore from './detail';
 import { StateSelector } from 'packages/core/ngrx/store';
 
 export interface State {
   list: ListStore.State;
+  sensor: DetailStore.State;
 }
 
 export const REDUCERS = {
   list: ListStore.reducer,
+  sensor: DetailStore.reducer
 };
 
 export const EFFECTS = [
   ListStore.Effects,
+  DetailStore.Effects
 ];
 
 export const selectInfraState = createFeatureSelector<State>(MODULE.name);
@@ -28,3 +32,7 @@ export const ListSelector = new StateSelector<ListStore.State>(createSelector(
   (state: State) => state.list
 ));
 
+export const DetailSelector = new StateSelector<DetailStore.State>(createSelector(
+  selectInfraState,
+  (state: State) => state.sensor
+));

src/packages/probe/component/detail/detail.component.ts

@@ -74,7 +74,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
       icon: 'fa fa-trash',
       message: 'Are you sure to remove this Probe?',
       accept: () => {
-        this.router.navigate(['probes']);
+        this.router.navigate(['probes/list']);
       },
       reject: () => {
       }

src/packages/sensor-item/component/list/list.component.ts

@@ -1,18 +1,6 @@
 import { Component, OnInit, AfterViewInit, AfterContentInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { MetaSensorDisplayItem } from '../../../meta/sensor-display-item/model/MetaSensorDisplayItem';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
-
-export interface Probe {
-    id: string;
-    name: string;
-    ip: string;
-    os: string;
-    cidr: string;
-    targetCnt: number;
-    date: string;
-    authBy: string;
-}
-
 
 @Component({
     selector: 'of-sensor-item-list',

src/packages/sensor/component/list/list.component.html

@@ -1,12 +1,23 @@
 <h1>Sensors</h1>
 
+<div *ngIf="paramTarget" class="card clearfix">
+    <span>
+        <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
+    </span>
+    <of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName"></of-key-value>
+    <of-key-value [key]="'Description'" [value]="paramTarget.target.description"></of-key-value>
+    <of-key-value [key]="'Type'" [value]="paramTarget.infraType.name"></of-key-value>
+    <of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'"></of-key-value>
+    <of-key-value [key]="'Sensors'" [value]="'todo: count'"></of-key-value>
+</div>
+
 <div class="ui-g">
     <div class="ui-g-12 ui-md-3">
         <div class="ui-bottom-space-10">
             <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>
-        
+
             <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large" (click)="onAddSensor()"></button>
         </div>
         <p-panel [showHeader]="false">

src/packages/sensor/component/list/list.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild, AfterContentInit } from '@angular/core';
-import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Router, ActivatedRoute } from '@angular/router';
-import { Router } from '@angular/router';
 import { Sensor } from '../../model';
-
 import { Store, select } from '@ngrx/store';
-
 import * as SensorStore from '../../store';
-
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import * as ListStore from '../../store/list';
 import { sensorListSelector } from '../../store';
@@ -17,6 +13,11 @@ import { Target } from 'packages/target/model';
 import { SettingComponent } from '../setting/setting.component';
 import { SelectItem } from 'primeng/primeng';
 
+import { Infra } from 'packages/infra/model';
+import * as InfraDetailStore from 'packages/infra/store/detail';
+import { DetailSelector as InfraDetailSelector } from 'packages/infra/store';
+
+
 @Component({
   selector: 'of-sensor-list',
   templateUrl: './list.component.html',
@@ -29,23 +30,37 @@ export class ListComponent implements OnInit, AfterContentInit {
   totalLength = 0;
   sensorSettingDisplay = false;
 
+  paramTarget?: Infra = null;
+  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
+
   sensors: Sensor[];
   target: Target = null;
-
   targetSensor;
 
   // filter
   targetOptions: SelectItem[];
-
   filteredName: string;
   selectedTargets: string[] = [];
   selectedStatus: string[] = [];
 
-  constructor(private router: Router,
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
     private store: Store<ListStore.State>,
+    private infraDetailStore: Store<InfraDetailStore.State>,
   ) { }
 
   ngOnInit() {
+    let infraID = null;
+    this.route.queryParams.subscribe((queryParams: any) => {
+      infraID = queryParams.target;
+      if (infraID) {
+        this.getInfraInfo(infraID);
+      } else {
+        this.paramTarget = null;
+      }
+    });
+
     this.sensorList$.subscribe(
       (page: Page) => {
         if (page != null) {
@@ -59,6 +74,24 @@ export class ListComponent implements OnInit, AfterContentInit {
     );
   }
 
+  getInfraInfo(infraID: string) {
+    this.infraDetailStore.dispatch(
+      new InfraDetailStore.Read(
+        { id: infraID }
+      )
+    );
+    this.infra$.subscribe(
+      (infra: Infra) => {
+        console.log(infra);
+        this.paramTarget = infra;
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+
+  }
+
   ngAfterContentInit() {
     this.getSensors(0);
   }

src/packages/target/component/list/list.component.html

@@ -1,9 +1,8 @@
 <h1>Targets</h1>
 
-<p-table [value]="infras" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" dataKey="id">
+<p-table [value]="infras" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
-  <ng-template pTemplate="header" let-columns>
+  <ng-template pTemplate="header">
     <tr>
-      <th style="width: 3.5em"></th>
       <th style="width: 4em">No.</th>
       <th style="width: 8em">Status</th>
       <th style="width: 8em">Type</th>
@@ -13,13 +12,8 @@
       <th style="width: 10em"></th>
     </tr>
   </ng-template>
-  <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex" let-expanded="expanded" let-columns="infras">
+  <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">
-    <tr>
+    <tr [pSelectableRow]="infra">
-      <td>
-        <a href="javascript:void(0)" [pRowToggler]="infra">
-          <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
-        </a>
-      </td>
       <td>{{rowIndex}}</td>
       <td>??</td>
       <td>{{infra.infraType.name}}</td>
@@ -27,21 +21,10 @@
       <td>??</td>
       <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
       <td>
-        <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button>
+        <!-- <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button> -->
       </td>
     </tr>
   </ng-template>
-
-  <ng-template pTemplate="rowexpansion" let-rowData let-columns="infras">
-    <tr>
-      <td [attr.colspan]="8">
-        <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
-          <div>요기다가 센서 리스트와 상태 출력</div>
-        </div>
-      </td>
-    </tr>
-  </ng-template>
-
 </p-table>
 
 <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">

src/packages/target/component/list/list.component.ts

@@ -124,8 +124,7 @@ export class ListComponent implements OnInit, AfterContentInit {
     }
 
     onRowSelect(event) {
-        console.log(event.data.target);
+        this.router.navigate(['sensors'], { queryParams: {target: event.data.id}});
-        // this.router.navigate(['notification']);
     }
 
     onAddSensor(target: Target) {
@@ -136,4 +135,5 @@ export class ListComponent implements OnInit, AfterContentInit {
     onSensorSettingClose() {
         this.sensorSettingDisplay = false;
     }
+
 }

src/packages/target/target.module.ts

@@ -5,12 +5,14 @@ import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { SensorModule } from '../sensor/sensor.module';
+import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
 
 @NgModule({
   imports: [
     CommonModule,
     PrimeNGModules,
-    SensorModule
+    SensorModule,
+    KeyValueModule
   ],
   declarations: [
     COMPONENTS,