Merge remote-tracking branch 'origin/master'

src/app/pages/pages-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
       { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' },
       // { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
       { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
-      // { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
+      { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
       { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
       { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
       { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },

src/app/pages/target/target-page-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component';
+import { TargetPageComponent } from 'app/pages/target/target-page.component';
+import { DetailComponent as TargetDetailComponent } from 'packages/target/component/detail/detail.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TargetPageComponent,
+    children: [
+      { path: ':id/info', component: TargetDetailComponent }
+    ]
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TargetPageRoutingModule { }

src/app/pages/target/target-page.component.html

@@ -0,0 +1,10 @@
+<div class="ui-g">
+    <div class="ui-g-12">
+        <div class="card no-margin">
+            <of-tabbar [tabs]="tabs"></of-tabbar>
+        </div>
+        <div class="card no-margin">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

src/app/pages/target/target-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetPageComponent } from './target-page.component';
+
+describe('TargetsComponent', () => {
+  let component: TargetPageComponent;
+  let fixture: ComponentFixture<TargetPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TargetPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TargetPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/target/target-page.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-target',
+  templateUrl: './target-page.component.html',
+})
+export class TargetPageComponent implements OnInit {
+
+  tabs = undefined;
+
+  constructor(private router: Router) {
+  }
+
+  ngOnInit() {
+
+    const id = this.router.url.split('target/')[1].split('/')[0];
+
+    this.tabs = [
+      { label: 'INFO', routerLink: ['/target/', id, 'info'] },
+      { label: 'HISTORY', path: ['/target/', id, 'history'], disabled: true },
+    ];
+
+  }
+}

src/app/pages/target/target-page.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TargetModule } from 'packages/target/target.module';
+import { TargetPageRoutingModule } from './target-page-routing.module';
+import { TargetPageComponent } from './target-page.component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { TabbarModule } from '../../commons/component/layout/tabbar/app.tabbar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TargetPageRoutingModule,
+    TargetModule,
+    PrimeNGModules,
+    TabbarModule
+  ],
+  declarations: [
+    TargetPageComponent
+  ]
+})
+export class TargetPageModule { }

src/app/pages/targets/targets-page.module.ts

@@ -4,12 +4,14 @@ import { CommonModule } from '@angular/common';
 import { TargetModule } from 'packages/target/target.module';
 import { TargetsPageRoutingModule } from './targets-page-routing.module';
 import { TargetsPageComponent } from './targets-page.component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 
 @NgModule({
   imports: [
     CommonModule,
     TargetsPageRoutingModule,
     TargetModule,
+    PrimeNGModules
   ],
   declarations: [
     TargetsPageComponent

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/notification/component/notification/notification.component.ts

@@ -36,7 +36,6 @@ export class NotificationComponent implements OnInit, AfterContentInit, OnDestro
         this.notificationSubscription$ = this.notification$.subscribe(
             (page: Page) => {
                 if (page !== null) {
-                    console.log(page);
                     this.notifications = page.content;
                     this.totalLength = page.totalElements;
                 }

src/packages/sensor/component/detail/detail.component.ts

@@ -71,7 +71,8 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   onTargetClick(target) {
-    this.router.navigate(['sensors'], { queryParams: { target: target.id } });
+    // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
+    this.router.navigate(['target', target.id, 'info']);
   }
 }
 

src/packages/sensor/component/list/list.component.scss

@@ -1,14 +0,0 @@
-.example-container {
-    display: flex;
-    flex-direction: column;
-    min-width: 300px;
-  }
-  
-  .mat-table {
-    overflow: auto;
-    max-height: 500px;
-  }
-  
-  .mat-header-cell.mat-sort-header-sorted {
-    color: black;
-  }

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

@@ -22,7 +22,6 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
   selector: 'of-sensor-list',
   templateUrl: './list.component.html',
-  styleUrls: ['./list.component.scss']
 })
 export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
 
@@ -32,9 +31,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   totalLength = 0;
   sensorSettingDisplay = false;
 
-  paramTarget?: Infra = null;
-  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
-
   sensors: Sensor[];
   target: Target = null;
   targetSensor;
@@ -49,19 +45,9 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     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.sensorsSubscription$ = this.sensorList$.subscribe(
       (page: Page) => {
@@ -76,33 +62,16 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     );
   }
 
+  ngAfterContentInit() {
+    this.getSensors(0);
+  }
+
   ngOnDestroy() {
     if (this.sensorsSubscription$) {
       this.sensorsSubscription$.unsubscribe();
     }
   }
 
-  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);
-  }
 
   getSensors(pageIndex: number) {
     this.store.select(AuthSelector.select('domain')).subscribe(
@@ -113,7 +82,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
           sortCol: 'id',
           sortDirection: 'descending'
         };
-
         this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
       },
       (error) => {
@@ -145,6 +113,7 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     this.generateTargetFilter();
   }
 
+
   generateTargetFilter() {
     if (this.targetOptions) {
       return;

src/packages/sensor/model/Sensor.ts

@@ -11,4 +11,5 @@ export interface Sensor {
   crawler?: MetaCrawler;
   crawlerInputItems?: string;
   itemCount?: number;
+  displayName?: string;
 }

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

@@ -1 +1,75 @@
-<div>target detail</div>
+<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]="'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>
+                <of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value>
+            </p-panel>
+        </div>
+    </div>
+
+    <div class="ui-g">
+        <div class="ui-g-12">
+            <div class="ui-g">
+                <div class="ui-g-12 ui-md-5 ui-g-nopad">
+                    <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
+                        <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="infra.target" (close)="onSensorSettingClose()"></of-sensor-setting>
+                    </p-dialog>
+
+                    <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>
+                </div>
+                <div class="ui-g-12 ui-md-7 ui-g-nopad">
+                    <div style="float: right; margin-top: 30px;">
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
+                    </div>
+                </div>
+            </div>
+
+
+            <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>Alias</th>
+                        <th>Status</th>
+                        <th>Crawler</th>
+                        <th>Items</th>
+                        <th>Created at</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-sensor>
+                    <tr [pSelectableRow]="sensor">
+                        <td>{{sensor.displayName}}</td>
+                        <td>{{sensor.status.name}}</td>
+                        <td>{{sensor.crawler.name}}</td>
+                        <td>{{sensor.itemCount}}</td>
+                        <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+            <p-paginator [rows]="pageSize" [totalRecords]="sensorsCount" (onPageChange)="onPaging($event)"></p-paginator>
+        </div>
+    </div>
+</div>

src/packages/target/component/detail/detail.component.scss

@@ -1,37 +0,0 @@
-.table {
-    width: 100%;
-    max-width: 100%;
-    border-collapse: collapse;
-}
-.table tr:first-child td {
-    border-top: none;
-}
-
-.text-right {
-	text-align: right;
-}
-
-th, td {
-    padding: 8px;
-    text-align: left;
-    border-top: 1px solid #ddd;
-}
-.nav-item {
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  cursor: default;
-
-  &:hover {
-    transform: translate(0, -8px);
-    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
-  }
-}
-.example-container {
-    display: flex;
-    flex-direction: column;
-    min-width: 300px;
-  }
-  
-  .mat-table {
-    overflow: auto;
-    max-height: 500px;
-  }

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

@@ -1,28 +1,156 @@
-import { Component, ViewChild, OnInit, Input, AfterContentInit } from '@angular/core';
-import { Router } from '@angular/router';
-
+import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 import { Sensor } from 'packages/sensor/model';
+import { Infra } from 'packages/infra/model';
+import { Store, select } from '@ngrx/store';
+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({
   selector: 'of-target-detail',
   templateUrl: './detail.component.html',
 })
-export class DetailComponent implements OnInit, AfterContentInit {
+export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
-  constructor(private router: Router) { }
+  infraSubscription$: Subscription;
+  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
+  sensorsSubscription$: Subscription;
+  sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
+
+  targetSubscription$: Subscription;
+
+  infraId = null;
+  infra: Infra;
+  sensors: Sensor[];
+  sensorsCount = 0;
+  sensorSettingDisplay = false;
+
+  pageSize = '10';
+  totalLength = 0;
+  currPage = 0;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private infraDetailStore: Store<InfraDetailStore.State>,
+    private sensorListStore: Store<SensorListStore.State>
+  ) { }
 
   ngOnInit() {
+    this.infraSubscription$ = this.infra$.subscribe(
+      (infra: Infra) => {
+        this.infra = infra;
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+    this.sensorsSubscription$ = this.sensors$.subscribe(
+      (page: Page) => {
+        if (page) {
+          this.sensorsCount = page.totalElements;
+          this.sensors = page.content;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
   }
 
   ngAfterContentInit() {
+    this.infraId = this.route.snapshot.paramMap.get('id');
+    this.getInfra();
+    this.getSensors(this.currPage);
   }
 
-  handleSensorClick(sensor: Sensor) {
+  ngOnDestroy() {
+    if (this.infraSubscription$) {
+      this.infraSubscription$.unsubscribe();
+    }
   }
 
-  handleCheckAlive() {
+  getInfra() {
+    this.infraDetailStore.dispatch(
+      new InfraDetailStore.Read(
+        { id: this.infraId }
+      )
+    );
   }
 
-  handleTraceroute() {
+  getSensors(pageIndex) {
+    const pageParams: PageParams = {
+      pageNo: pageIndex + '',
+      countPerPage: this.pageSize,
+      sortCol: 'id',
+      sortDirection: 'descending'
+    };
+    this.sensorListStore.dispatch(
+      new SensorListStore.ReadAllByInfra(
+        { id: this.infraId, pageParams: pageParams }
+      )
+    );
   }
+
+  onAddSensor() {
+    this.sensorSettingDisplay = true;
+  }
+
+  onSensorSettingClose() {
+    this.sensorSettingDisplay = false;
+  }
+
+  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/component/list/list.component.html

@@ -14,18 +14,20 @@
   </ng-template>
   <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">
     <tr [pSelectableRow]="infra">
-      <td>{{rowIndex}}</td>
+      <td>{{rowIndex + 1}}</td>
       <td>??</td>
       <td>{{infra.infraType.name}}</td>
       <td>{{infra.target.displayName}}</td>
-      <td>??</td>
+      <td>{{infra.target.sensorCount}}</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>
 </p-table>
+<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
+
 
 <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
   <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>

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

@@ -27,6 +27,10 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     target: Target = null;
     sensorSettingDisplay = false;
 
+    pageSize = '10';
+    totalLength = 0;
+    currPage = 0;
+
     constructor(
         private route: ActivatedRoute,
         private router: Router,
@@ -40,6 +44,7 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
                 if (!page) {
                     return;
                 }
+                this.totalLength = page.totalElements;
                 this.infras = page.content;
             },
             (error: RPCClientError) => {
@@ -50,10 +55,10 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
 
     ngAfterContentInit() {
         this.route.params.subscribe((params: any) => {
-            const probe = {
+            this.probe = {
                 id: params['id'],
             };
-            this.getInfras(probe);
+            this.getInfras(0);
         });
     }
 
@@ -63,22 +68,23 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
         }
     }
 
-    getInfras(probe) {
+    getInfras(pageNo) {
         const pageParams: PageParams = {
-            pageNo: '0',
-            countPerPage: '10',
+            pageNo: pageNo + '',
+            countPerPage: this.pageSize,
             sortCol: 'id',
             sortDirection: 'descending'
         };
         this.infraListStore.dispatch(
             new InfraListStore.ReadAllByProbe(
-                { probe, pageParams }
+                { probe: this.probe, pageParams: pageParams }
             )
         );
     }
 
     onRowSelect(event) {
-        this.router.navigate(['sensors'], { queryParams: { target: event.data.id } });
+        // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
+        this.router.navigate(['target', event.data.id, 'info']);
     }
 
     onAddSensor(target: Target) {
@@ -90,4 +96,8 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
         this.sensorSettingDisplay = false;
     }
 
+    onPaging(e) {
+        this.getInfras(e.page);
+    }
+
 }

src/packages/target/model/Target.ts

@@ -7,5 +7,6 @@ export interface Target {
   createDate?: Date;
   displayName?: string;
   description?: string;
+  sensorCount?: number;
   sensors?: Sensor[];
 }

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[]> {
-    const body = {
-        domain: domain,
-    };
-
-    return this.rpcService.call('TargetService.readAllByDomain', domain);
+  public modify(target: Target): Observable<Target> {
+    return this.rpcService.call('TargetService.modify', target);
   }
 
-//   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,
-  ReadAllByDomainSuccess,
-  ReadAllByDomainFailure,
+  Modify,
+  ModifySuccess,
+  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$
-    .ofType(ActionType.ReadAllByDomain)
-    .map((action: ReadAllByDomain) => action.payload)
-    .exhaustMap(domain =>
-      this.targetService
-      .readAllByDomain(domain)
-        .map(targets => new ReadAllByDomainSuccess(targets))
-        .catch(error => of(new ReadAllByDomainFailure(error)))
+  modify$: Observable<Action> = this.actions$
+    .ofType(ActionType.Modify)
+    .map((action: Modify) => action.payload)
+    .exhaustMap(target =>
+      this.targetService.modify(target)
+        .map(targets => new ModifySuccess(targets))
+        .catch(error => of(new ModifyFailure(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
-;