test

src/packages/infra/component/map/map.component.ts

@@ -430,7 +430,7 @@ export class MapComponent implements OnInit, AfterContentInit {
     if (nodeType === 'probe') {
       this.router.navigate(['probe', event.node.obj.id, 'info']);
     } else if (nodeType === 'host' || nodeType === 'service') {
-      this.router.navigate(['sensors'], { queryParams: { target: event.node.obj.target.id } });
+      this.router.navigate(['target', event.node.obj.id, 'info']);
     } else if (nodeType === 'sensor') {
       this.router.navigate(['sensor', event.node.obj.id, 'info']);
     }

src/packages/target/component/detail/detail.component.html

@@ -1,13 +1,25 @@
 <div *ngIf="infra">
+    <div *ngIf="infra.infraType.name == 'HOST'">
+        <button pButton type="button" label="Traceroute" (click)="onTraceroute()"></button>
+    </div>
+
     <div class="ui-g">
         <div class="ui-g-12">
+
+            <div class="ui-inputgroup">
+                <span class="md-inputfield">
+                    <input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+                    <label></label>
+                </span>
+                <button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
+            </div>
+
             <p-panel [showHeader]="false">
                 <div class="ui-key-value">
                     <span>Status</span>
                     <span class="ng-star-inserted">
                         <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
                 </div>
-                <of-key-value [key]="'Alias'" [value]="infra.target.displayName" class="ui-key-value"></of-key-value>
                 <of-key-value [key]="'Description'" [value]="infra.target.description" class="ui-key-value"></of-key-value>
                 <of-key-value [key]="'Type'" [value]="infra.infraType.name" class="ui-key-value"></of-key-value>
                 <of-key-value [key]="'Created at'" [value]="infra.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>

src/packages/target/component/detail/detail.component.ts

@@ -7,10 +7,11 @@ import { DetailSelector as InfraDetailSelector } from 'packages/infra/store';
 import * as InfraDetailStore from 'packages/infra/store/detail';
 import { Subscription } from 'rxjs/Subscription';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
-
 import { sensorListSelector } from 'packages/sensor/store';
 import * as SensorListStore from 'packages/sensor/store/list';
 import { PageParams, Page } from 'app/commons/model';
+// import { target } from 'packages/target/store';
+// import * as SensorListStore from 'packages/sensor/store/list';
 
 
 @Component({
@@ -24,6 +25,8 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
   sensorsSubscription$: Subscription;
   sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
 
+  targetSubscription$: Subscription;
+
   infraId = null;
   infra: Infra;
   sensors: Sensor[];
@@ -107,6 +110,47 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
   onPaging(e) {
     this.getSensors(e.page);
-}
+  }
+
+  onRowSelect(event) {
+    this.router.navigate(['sensor', event.data.id, 'info']);
+  }
+
+  onTraceroute() {
+    alert('지원 예정');
+  }
+
+
+  onDisplayNameChange(value: string) {
+    console.log(value);
+    // if (value === this.probe.displayName) {
+    //   return;
+    // }
+    // this.probe.displayName = value;
+    // this.modifyStore.dispatch(
+    //   new ModifyStore.Modify(this.probe)
+    // );
+
+    // const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
+    //   (probe: Probe) => {
+    //     if (probe) {
+    //       this.msgs = [];
+    //       this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
+    //     }
+    //     if (modifySuccessSubscription$) {
+    //       modifySuccessSubscription$.unsubscribe();
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+  }
+
+  onDisplayNameChangeKeypress(event, value) {
+    if (event.key === 'Enter') {
+      this.onDisplayNameChange(value);
+    }
+  }
 
 }

src/packages/target/service/target.service.ts

@@ -6,7 +6,6 @@ import 'rxjs/add/operator/map';
 import { RPCService } from '@loafer/ng-rpc/service';
 
 import { Target } from '../model';
-import { Domain } from '../../domain/model';
 
 
 @Injectable()
@@ -18,21 +17,8 @@ export class TargetService {
 
   }
 
-  public readAllByDomain(domain: Domain): Observable<Target[]> {
+  public modify(target: Target): Observable<Target> {
-    const body = {
+    return this.rpcService.call('TargetService.modify', target);
-        domain: domain,
-    };
-
-    return this.rpcService.call('TargetService.readAllByDomain', domain);
   }
 
-//   public readAllByProbe(domain: Domain): Observable<Target[]> {
-//     const body = {
-//         domain: domain,
-//     };
-
-//     return this.rpcService.call('TargetService.readAllByDomain', domain);
-//   }
-
-
 }

src/packages/target/store/index.ts

@@ -8,23 +8,23 @@ import {
 
   import { MODULE } from '../target.constant';
 
-  import * as TargetStore from './target';
+  import * as TargetModifyStore from './modify';
 
   export interface State {
-    readallbydomain: TargetStore.State;
+    modify: TargetModifyStore.State;
   }
 
   export const REDUCERS = {
-    readallbydomain: TargetStore.reducer,
+    modify: TargetModifyStore.reducer,
   };
 
   export const EFFECTS = [
-    TargetStore.Effects,
+    TargetModifyStore.Effects,
   ];
 
   export const selectTargetState = createFeatureSelector<State>(MODULE.name);
 
-  export const ReadAllByDomainSelector = new StateSelector<TargetStore.State>(createSelector(
+  export const ReadAllByDomainSelector = new StateSelector<TargetModifyStore.State>(createSelector(
     selectTargetState,
-    (state: State) => state.readallbydomain
+    (state: State) => state.modify
   ));

src/packages/target/store/modify/index.ts

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

src/packages/target/store/modify/modify.action.ts

@@ -0,0 +1,35 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Target } from '../../model';
+
+export enum ActionType {
+  Modify = '[Target.modify] Modify',
+  ModifySuccess = '[Target.modify] ModifySuccess',
+  ModifyFailure = '[Target.modify] ModifyFailure',
+}
+
+export class Modify implements Action {
+  readonly type = ActionType.Modify;
+
+  constructor(public payload: Target) {}
+}
+
+export class ModifySuccess implements Action {
+  readonly type = ActionType.ModifySuccess;
+
+  constructor(public payload: Target) {}
+}
+
+export class ModifyFailure implements Action {
+  readonly type = ActionType.ModifyFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | Modify
+  | ModifySuccess
+  | ModifyFailure
+;

src/packages/target/store/modify/modify.effect.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { Effects } from './target.effect';
+import { Effects } from './modify.effect';
 
 describe('Target.Effects', () => {
   beforeEach(() => {

src/packages/target/store/modify/modify.effect.ts

@@ -17,11 +17,11 @@ import { Target } from '../../model';
 import { TargetService } from '../../service/target.service';
 
 import {
-  ReadAllByDomain,
+  Modify,
-  ReadAllByDomainSuccess,
+  ModifySuccess,
-  ReadAllByDomainFailure,
+  ModifyFailure,
   ActionType,
-} from './target.action';
+} from './modify.action';
 
 @Injectable()
 export class Effects {
@@ -33,14 +33,13 @@ export class Effects {
   ) { }
 
   @Effect()
-  readAllByMember$: Observable<Action> = this.actions$
+  modify$: Observable<Action> = this.actions$
-    .ofType(ActionType.ReadAllByDomain)
+    .ofType(ActionType.Modify)
-    .map((action: ReadAllByDomain) => action.payload)
+    .map((action: Modify) => action.payload)
-    .exhaustMap(domain =>
+    .exhaustMap(target =>
-      this.targetService
+      this.targetService.modify(target)
-      .readAllByDomain(domain)
+        .map(targets => new ModifySuccess(targets))
-        .map(targets => new ReadAllByDomainSuccess(targets))
+        .catch(error => of(new ModifyFailure(error)))
-        .catch(error => of(new ReadAllByDomainFailure(error)))
     );
 
 }

src/packages/target/store/modify/modify.reducer.ts

@@ -1,18 +1,18 @@
 import {
     Actions,
     ActionType,
-  } from './target.action';
+  } from './modify.action';
 
   import {
     State,
     initialState,
-  } from './target.state';
+  } from './modify.state';
 
   import { Target } from '../../model';
 
   export function reducer(state = initialState, action: Actions): State {
     switch (action.type) {
-      case ActionType.ReadAllByDomain: {
+      case ActionType.Modify: {
         return {
           ...state,
           error: null,
@@ -20,21 +20,21 @@ import {
         };
       }
 
-      case ActionType.ReadAllByDomainSuccess: {
+      case ActionType.ModifySuccess: {
         return {
           ...state,
           error: null,
           pending: false,
-          targets: action.payload
+          target: action.payload
         };
       }
 
-      case ActionType.ReadAllByDomainFailure: {
+      case ActionType.ModifyFailure: {
         return {
           ...state,
           error: action.payload,
           pending: false,
-          targets: null,
+          target: null,
         };
       }
 

src/packages/target/store/modify/modify.state.ts

@@ -1,15 +1,14 @@
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
-
 import { Target } from '../../model';
 
 export interface State {
   error: RPCClientError | null;
   pending: boolean;
-  targets: Target[] | null;
+  target: Target | null;
 }
 
 export const initialState: State = {
   error: null,
   pending: false,
-  targets: null,
+  target: null,
 };

src/packages/target/store/target/index.ts

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

src/packages/target/store/target/target.action.ts

@@ -1,36 +0,0 @@
-import { Action } from '@ngrx/store';
-
-import { RPCClientError } from '@loafer/ng-rpc/protocol';
-
-import { Target } from '../../model';
-import { Domain } from '../../../domain/model';
-
-export enum ActionType {
-  ReadAllByDomain = '[Target.ReadAllByDomain] ReadAllByDomain',
-  ReadAllByDomainSuccess = '[Target.ReadAllByDomainSuccess] ReadAllByDomainSuccess',
-  ReadAllByDomainFailure = '[Target.ReadAllByDomainFailure] ReadAllByDomainFailure',
-}
-
-export class ReadAllByDomain implements Action {
-  readonly type = ActionType.ReadAllByDomain;
-
-  constructor(public payload: Domain) {}
-}
-
-export class ReadAllByDomainSuccess implements Action {
-  readonly type = ActionType.ReadAllByDomainSuccess;
-
-  constructor(public payload: Target[]) {}
-}
-
-export class ReadAllByDomainFailure implements Action {
-  readonly type = ActionType.ReadAllByDomainFailure;
-
-  constructor(public payload: RPCClientError) {}
-}
-
-export type Actions =
-  | ReadAllByDomain
-  | ReadAllByDomainSuccess
-  | ReadAllByDomainFailure
-;