From 1df1e0bb559473137d78ea28e89f620f7c3787bc Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Sun, 27 May 2018 23:17:07 +0900
Subject: [PATCH] sensor list complete

---
 .../infra/component/map/map.component.ts      |   4 +-
 @overflow/probe/component/index.ts            |   7 -
 @overflow/probe/container/index.ts            |   7 +
 ... => probe-detail-container.component.html} |   0
 ...ts => probe-detail-container.component.ts} |   4 +-
 ...ml => probe-list-container.component.html} |   0
 ...r.ts => probe-list-container.component.ts} |  10 +-
 @overflow/probe/probe.module.ts               |   7 +-
 .../component/detail/detail.component.html    |   4 -
 .../component/detail/detail.component.ts      | 116 ++++++-------
 @overflow/sensor/component/index.ts           |   6 +-
 .../sensor/component/list/list.component.html |  43 +++--
 .../sensor/component/list/list.component.ts   | 154 +++++-------------
 @overflow/sensor/container/index.ts           |   4 +-
 ...=> sensor-detail-container.component.html} |   0
 ...s => sensor-detail-container.component.ts} |   2 +-
 .../sensor-list-container.component.html      |   1 +
 .../sensor-list-container.component.ts        |  41 +++++
 .../container/sensor-list-container.html      |   1 -
 .../sensor/container/sensor-list-container.ts |  16 --
 @overflow/sensor/service/sensor.service.ts    |   8 +-
 @overflow/sensor/store/entity/sensor/index.ts |   4 +
 .../store/entity/sensor/sensor.action.ts      |  85 ++++++++++
 .../store/entity/sensor/sensor.effect.ts      |  78 +++++++++
 .../store/entity/sensor/sensor.reducer.ts     |  63 +++++++
 .../store/entity/sensor/sensor.state.ts       |  24 +++
 @overflow/sensor/store/index.ts               |  28 ++--
 .../component/detail/detail.component.ts      |   7 +-
 28 files changed, 463 insertions(+), 261 deletions(-)
 create mode 100644 @overflow/probe/container/index.ts
 rename @overflow/probe/container/{probe-detail-container.html => probe-detail-container.component.html} (100%)
 rename @overflow/probe/container/{probe-detail-container.ts => probe-detail-container.component.ts} (87%)
 rename @overflow/probe/container/{probe-list-container.html => probe-list-container.component.html} (100%)
 rename @overflow/probe/container/{probe-list-container.ts => probe-list-container.component.ts} (80%)
 rename @overflow/sensor/container/{sensor-detail-container.html => sensor-detail-container.component.html} (100%)
 rename @overflow/sensor/container/{sensor-detail-container.ts => sensor-detail-container.component.ts} (86%)
 create mode 100644 @overflow/sensor/container/sensor-list-container.component.html
 create mode 100644 @overflow/sensor/container/sensor-list-container.component.ts
 delete mode 100644 @overflow/sensor/container/sensor-list-container.html
 delete mode 100644 @overflow/sensor/container/sensor-list-container.ts
 create mode 100644 @overflow/sensor/store/entity/sensor/index.ts
 create mode 100644 @overflow/sensor/store/entity/sensor/sensor.action.ts
 create mode 100644 @overflow/sensor/store/entity/sensor/sensor.effect.ts
 create mode 100644 @overflow/sensor/store/entity/sensor/sensor.reducer.ts
 create mode 100644 @overflow/sensor/store/entity/sensor/sensor.state.ts

diff --git a/@overflow/infra/component/map/map.component.ts b/@overflow/infra/component/map/map.component.ts
index 5a804c6..81f7f2a 100644
--- a/@overflow/infra/component/map/map.component.ts
+++ b/@overflow/infra/component/map/map.component.ts
@@ -14,7 +14,7 @@ import { Infra, InfraHost, InfraService } from '@overflow/commons-typescript/mod
 import { Domain } from '@overflow/commons-typescript/model/domain';
 import { AuthSelector } from '@overflow/member/store';
 
-import { sensorListSelector } from '@overflow/sensor/store';
+// import { sensorListSelector } from '@overflow/sensor/store';
 
 import * as SensorListStore from '@overflow/sensor/store/list';
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
@@ -35,7 +35,7 @@ export class MapComponent implements OnInit, AfterContentInit {
   infraTree: TreeNode[] = [];
 
   infras$ = this.listStore.pipe(select(ListSelector.select('page')));
-  sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
+  // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
   display = false;
   loading = false;
   renameProbeVisible = false;
diff --git a/@overflow/probe/component/index.ts b/@overflow/probe/component/index.ts
index 68ba0d4..ffd7e65 100644
--- a/@overflow/probe/component/index.ts
+++ b/@overflow/probe/component/index.ts
@@ -1,13 +1,6 @@
 import { ProbeDetailComponent } from './detail/detail.component';
 import { ProbeListComponent } from './list/list.component';
 import { ProbeDownloadComponent } from './download/download.component';
-import { ProbeListContainerComponent } from '../container/probe-list-container';
-import { ProbeDetailContainerComponent } from '../container/probe-detail-container';
-
-export const CONTAINERS = [
-  ProbeListContainerComponent,
-  ProbeDetailContainerComponent,
-];
 
 export const COMPONENTS = [
   ProbeListComponent,
diff --git a/@overflow/probe/container/index.ts b/@overflow/probe/container/index.ts
new file mode 100644
index 0000000..dfe25b1
--- /dev/null
+++ b/@overflow/probe/container/index.ts
@@ -0,0 +1,7 @@
+import { ProbeListContainerComponent } from '../container/probe-list-container.component';
+import { ProbeDetailContainerComponent } from '../container/probe-detail-container.component';
+
+export const CONTAINER_COMPONENTS = [
+  ProbeListContainerComponent,
+  ProbeDetailContainerComponent,
+];
diff --git a/@overflow/probe/container/probe-detail-container.html b/@overflow/probe/container/probe-detail-container.component.html
similarity index 100%
rename from @overflow/probe/container/probe-detail-container.html
rename to @overflow/probe/container/probe-detail-container.component.html
diff --git a/@overflow/probe/container/probe-detail-container.ts b/@overflow/probe/container/probe-detail-container.component.ts
similarity index 87%
rename from @overflow/probe/container/probe-detail-container.ts
rename to @overflow/probe/container/probe-detail-container.component.ts
index 675e8bb..b9f32db 100644
--- a/@overflow/probe/container/probe-detail-container.ts
+++ b/@overflow/probe/container/probe-detail-container.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 import { Store, select } from '@ngrx/store';
@@ -8,7 +8,7 @@ import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'of-probe-detail-container',
-  templateUrl: './probe-detail-container.html',
+  templateUrl: './probe-detail-container.component.html',
 })
 export class ProbeDetailContainerComponent implements OnInit, OnChanges {
 
diff --git a/@overflow/probe/container/probe-list-container.html b/@overflow/probe/container/probe-list-container.component.html
similarity index 100%
rename from @overflow/probe/container/probe-list-container.html
rename to @overflow/probe/container/probe-list-container.component.html
diff --git a/@overflow/probe/container/probe-list-container.ts b/@overflow/probe/container/probe-list-container.component.ts
similarity index 80%
rename from @overflow/probe/container/probe-list-container.ts
rename to @overflow/probe/container/probe-list-container.component.ts
index 35f3dcb..f090460 100644
--- a/@overflow/probe/container/probe-list-container.ts
+++ b/@overflow/probe/container/probe-list-container.component.ts
@@ -2,14 +2,14 @@ import { Component, EventEmitter, Output, OnInit } from '@angular/core';
 import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
-import * as ProbeStore from '../store/entity/probe';
+import * as ProbeEntityStore from '../store/entity/probe';
 import { ProbeEntitySelector, ProbeListContainerSelector } from '../store';
 import { AuthSelector } from '@overflow/member/store';
 import { Domain } from '@overflow/commons-typescript/model/domain';
 
 @Component({
     selector: 'of-probe-list-container',
-    templateUrl: './probe-list-container.html',
+    templateUrl: './probe-list-container.component.html',
 })
 export class ProbeListContainerComponent implements OnInit {
 
@@ -17,7 +17,9 @@ export class ProbeListContainerComponent implements OnInit {
     pending$: Observable<boolean>;
     @Output() select = new EventEmitter();
 
-    constructor(private store: Store<ProbeStore.State>) {
+    constructor(
+        private store: Store<ProbeEntityStore.State>,
+    ) {
         this.probeHosts$ = store.pipe(select(ProbeEntitySelector.selectAll));
         this.pending$ = store.pipe(select(ProbeListContainerSelector.selectPending));
     }
@@ -25,7 +27,7 @@ export class ProbeListContainerComponent implements OnInit {
     ngOnInit() {
         this.store.select(AuthSelector.select('domain')).subscribe(
             (domain: Domain) => {
-                this.store.dispatch(new ProbeStore.ReadAllByDomainID(domain.id));
+                this.store.dispatch(new ProbeEntityStore.ReadAllByDomainID(domain.id));
             },
             (error) => {
                 console.log(error);
diff --git a/@overflow/probe/probe.module.ts b/@overflow/probe/probe.module.ts
index ebeda2f..e554b08 100644
--- a/@overflow/probe/probe.module.ts
+++ b/@overflow/probe/probe.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { COMPONENTS, CONTAINERS } from './component';
+import { COMPONENTS } from './component';
+import { CONTAINER_COMPONENTS } from './container';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
@@ -21,11 +22,11 @@ import { KeyValueModule } from '@overflow/commons/component/key-value/key-value.
     MetaCrawlerModule
   ],
   declarations: [
-    CONTAINERS,
+    CONTAINER_COMPONENTS,
     COMPONENTS,
   ],
   exports: [
-    CONTAINERS,
+    CONTAINER_COMPONENTS,
     COMPONENTS,
   ],
   providers: [
diff --git a/@overflow/sensor/component/detail/detail.component.html b/@overflow/sensor/component/detail/detail.component.html
index 6dfeb25..6dbe420 100644
--- a/@overflow/sensor/component/detail/detail.component.html
+++ b/@overflow/sensor/component/detail/detail.component.html
@@ -53,7 +53,3 @@
     <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
 </div>
 
-
-<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
-    <of-sensor-setting [visible]="sensorSettingDisplay" (close)="onSensorSettingClose()"></of-sensor-setting>
-</p-dialog>
\ No newline at end of file
diff --git a/@overflow/sensor/component/detail/detail.component.ts b/@overflow/sensor/component/detail/detail.component.ts
index 86d4056..9591e4e 100644
--- a/@overflow/sensor/component/detail/detail.component.ts
+++ b/@overflow/sensor/component/detail/detail.component.ts
@@ -4,7 +4,7 @@ import { ConfirmationService } from 'primeng/primeng';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc';
 import * as DetailStore from '../../store/detail';
-import { sensorSelector } from '../../store';
+// import { sensorSelector } from '../../store';
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -13,71 +13,71 @@ import { Subscription } from 'rxjs/Subscription';
   templateUrl: './detail.component.html',
   providers: [ConfirmationService]
 })
-export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
+export class DetailComponent {
 
-  sensorSubscription$: Subscription;
-  sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
-  sensor: Sensor;
-  sensorSettingDisplay: boolean;
+  // sensorSubscription$: Subscription;
+  // sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
+  // sensor: Sensor;
+  // sensorSettingDisplay: boolean;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private confirmationService: ConfirmationService,
-    private detailStore: Store<DetailStore.State>,
-  ) {
-    this.sensorSettingDisplay = false;
-  }
+  // constructor(
+  //   private route: ActivatedRoute,
+  //   private router: Router,
+  //   private confirmationService: ConfirmationService,
+  //   private detailStore: Store<DetailStore.State>,
+  // ) {
+  //   this.sensorSettingDisplay = false;
+  // }
 
-  ngOnInit() {
-    this.sensorSubscription$ = this.sensor$.subscribe(
-      (sensor: Sensor) => {
-        console.log(sensor);
-        this.sensor = sensor;
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-  }
+  // ngOnInit() {
+  //   this.sensorSubscription$ = this.sensor$.subscribe(
+  //     (sensor: Sensor) => {
+  //       console.log(sensor);
+  //       this.sensor = sensor;
+  //     },
+  //     (error: RPCClientError) => {
+  //       console.log(error.response.message);
+  //     }
+  //   );
+  // }
 
-  ngAfterContentInit() {
-    const sensorId = this.route.snapshot.paramMap.get('id');
-    this.detailStore.dispatch(
-      new DetailStore.Read(
-        { id: sensorId }
-      )
-    );
-  }
+  // ngAfterContentInit() {
+  //   const sensorId = this.route.snapshot.paramMap.get('id');
+  //   this.detailStore.dispatch(
+  //     new DetailStore.Read(
+  //       { id: sensorId }
+  //     )
+  //   );
+  // }
 
-  ngOnDestroy() {
-    if (this.sensorSubscription$) {
-      this.sensorSubscription$.unsubscribe();
-    }
-  }
+  // ngOnDestroy() {
+  //   if (this.sensorSubscription$) {
+  //     this.sensorSubscription$.unsubscribe();
+  //   }
+  // }
 
-  onStartOrStop() { }
+  // onStartOrStop() { }
 
-  onEdit() {
-    this.sensorSettingDisplay = true;
-  }
+  // onEdit() {
+  //   this.sensorSettingDisplay = true;
+  // }
 
-  onRemove() {
-    this.confirmationService.confirm({
-      header: 'Are you sure to remove this Sensor?',
-      icon: 'fa fa-trash',
-      message: 'All the related data will be deleted. ',
-      accept: () => {
-        alert('으앙 안돼 지우지마ㅠㅠ');
-      },
-      reject: () => {
-      }
-    });
-  }
+  // onRemove() {
+  //   this.confirmationService.confirm({
+  //     header: 'Are you sure to remove this Sensor?',
+  //     icon: 'fa fa-trash',
+  //     message: 'All the related data will be deleted. ',
+  //     accept: () => {
+  //       alert('으앙 안돼 지우지마ㅠㅠ');
+  //     },
+  //     reject: () => {
+  //     }
+  //   });
+  // }
 
-  onTargetClick(target) {
-    // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
-    this.router.navigate(['target', target.id, 'info']);
-  }
+  // onTargetClick(target) {
+  //   // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
+  //   this.router.navigate(['target', target.id, 'info']);
+  // }
 }
 
diff --git a/@overflow/sensor/component/index.ts b/@overflow/sensor/component/index.ts
index be62731..b8701ba 100644
--- a/@overflow/sensor/component/index.ts
+++ b/@overflow/sensor/component/index.ts
@@ -1,6 +1,5 @@
-import { ListComponent } from './list/list.component';
+import { SensorListComponent } from './list/list.component';
 
-import { SettingComponent } from './setting/setting.component';
 import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
 import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
 import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
@@ -11,13 +10,12 @@ import { DetailComponent } from './detail/detail.component';
 // import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
 
 export const COMPONENTS = [
-  SettingComponent,
   TargetSelectorComponent,
   CrawlerSelectorComponent,
   CrawlerAuthComponent,
   SensorItemSelectorComponent,
   SettingETCComponent,
-  ListComponent,
+  SensorListComponent,
   DetailComponent,
   //   FilterComponent,
   //   SettingETCComponent,
diff --git a/@overflow/sensor/component/list/list.component.html b/@overflow/sensor/component/list/list.component.html
index edd46cd..ef36f2b 100644
--- a/@overflow/sensor/component/list/list.component.html
+++ b/@overflow/sensor/component/list/list.component.html
@@ -1,29 +1,26 @@
 <h1>Sensors</h1>
 
-<div class="ui-g">
-        <div class="ui-g-12">
-            <p-panel [showHeader]="false" *ngIf="paramTarget">
-                <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]="paramTarget.target.displayName" class="ui-key-value"></of-key-value>
-                <of-key-value [key]="'Description'" [value]="paramTarget.target.description" class="ui-key-value"></of-key-value>
-                <of-key-value [key]="'Type'" [value]="paramTarget.infraType.name" class="ui-key-value"></of-key-value>
-                <of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
-                <of-key-value [key]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
-            </p-panel>
-        </div>
+<!-- <div class="ui-g">
+    <div class="ui-g-12">
+        <p-panel [showHeader]="false" *ngIf="paramTarget">
+            <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]="paramTarget.target.displayName" class="ui-key-value"></of-key-value>
+            <of-key-value [key]="'Description'" [value]="paramTarget.target.description" class="ui-key-value"></of-key-value>
+            <of-key-value [key]="'Type'" [value]="paramTarget.infraType.name" class="ui-key-value"></of-key-value>
+            <of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
+            <of-key-value [key]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
+        </p-panel>
     </div>
+</div> -->
 
-<div class="ui-g">
+<div *ngIf="page" 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]="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">
@@ -72,8 +69,8 @@
             <ng-template let-item pTemplate="item">
                 <div class="clearfix ui-sensors ui-bottom-border-1">
                     <div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
-                        <i class="fa ui-icon-devices ui-icon-lg"></i><br>
-                        {{item.target.id}} - {{item.target.displayName}}
+                        <i class="fa ui-icon-devices ui-icon-lg"></i>
+                        <br> {{item.target.id}} - {{item.target.displayName}}
                     </div>
                     <div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details">
                         <div class="ui-g">
@@ -85,8 +82,8 @@
                             </div>
                             <div class="ui-g-2" style="text-align: center !important">
                                 <div style="width:14px; height:14px; margin: auto;">
-                                <button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button>
-                            </div>
+                                    <button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/@overflow/sensor/component/list/list.component.ts b/@overflow/sensor/component/list/list.component.ts
index 78a2716..d55da7e 100644
--- a/@overflow/sensor/component/list/list.component.ts
+++ b/@overflow/sensor/component/list/list.component.ts
@@ -1,98 +1,31 @@
-import { Component, OnInit, AfterViewInit, ViewChild, AfterContentInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
-import { Store, select } from '@ngrx/store';
-import * as SensorStore from '../../store';
-import { RPCClientError } from '@loafer/ng-rpc';
-import * as ListStore from '../../store/list';
-import { sensorListSelector } from '../../store';
-import { Domain } from '@overflow/commons-typescript/model/domain';
-import { AuthSelector } from '@overflow/member/store';
-// import { Page, PageParams } from 'app/commons/model';
-import { Target } from '@overflow/commons-typescript/model/target';
-import { SettingComponent } from '../setting/setting.component';
-import { SelectItem } from 'primeng/primeng';
-
-import { Infra } from '@overflow/commons-typescript/model/infra';
-import * as InfraDetailStore from '@overflow/infra/store/detail';
-import { DetailSelector as InfraDetailSelector } from '@overflow/infra/store';
-import { Subscription } from 'rxjs/Subscription';
-
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
 
 @Component({
   selector: 'of-sensor-list',
   templateUrl: './list.component.html',
 })
-export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
+export class SensorListComponent implements OnChanges {
 
-  sensorsSubscription$: Subscription;
-  sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
-  PAGE_SIZE = '99999';
-  totalLength = 0;
-  sensorSettingDisplay = false;
+  @Input() page: Page<Sensor>;
 
-  sensors: Sensor[];
-  target: Target = null;
+  totalLength;
   targetSensor;
 
-  // filter
-  targetOptions: SelectItem[];
-  filteredName: string;
-  selectedTargets: string[] = [];
-  selectedStatus: string[] = [];
-
   constructor(
-    private router: Router,
-    private route: ActivatedRoute,
-    private store: Store<ListStore.State>,
   ) { }
 
-  ngOnInit() {
-
-    // this.sensorsSubscription$ = this.sensorList$.subscribe(
-    //   (page: Page) => {
-    //     if (page != null) {
-    //       this.sensors = page.content;
-    //       this.generateSensorMap();
-    //     }
-    //   },
-    //   (error: RPCClientError) => {
-    //     console.log(error.response.message);
-    //   }
-    // );
-  }
-
-  ngAfterContentInit() {
-    this.getSensors(0);
-  }
-
-  ngOnDestroy() {
-    if (this.sensorsSubscription$) {
-      this.sensorsSubscription$.unsubscribe();
-    }
-  }
-
-
-  getSensors(pageIndex: number) {
-    // this.store.select(AuthSelector.select('domain')).subscribe(
-    //   (domain: Domain) => {
-    //     const pageParams: PageParams = {
-    //       pageNo: pageIndex + '',
-    //       countPerPage: this.PAGE_SIZE,
-    //       sortCol: 'id',
-    //       sortDirection: 'descending'
-    //     };
-    //     this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
+  ngOnChanges(changes: SimpleChanges): void {
+    this.generateSensorMap();
   }
 
   generateSensorMap() {
+    if (!this.page) {
+      return;
+    }
     const tempList = [];
-    for (const sensor of this.sensors) {
+    for (const sensor of this.page.content) {
       const targetNode = this.existTarget(sensor, tempList);
       if (targetNode === null) {
         const sensorsNode = [];
@@ -109,20 +42,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     }
     this.totalLength = tempList.length;
     this.targetSensor = tempList;
-
-    this.generateTargetFilter();
-  }
-
-
-  generateTargetFilter() {
-    if (this.targetOptions) {
-      return;
-    }
-    const tempList = [];
-    for (const data of this.targetSensor) {
-      tempList.push({ label: data.target.displayName, value: data.target.id });
-    }
-    this.targetOptions = tempList;
   }
 
   existTarget(sensor: Sensor, tempList) {
@@ -135,29 +54,40 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     return targetNode;
   }
 
-  onAddSensor() {
-    this.target = null;
-    this.sensorSettingDisplay = true;
-  }
+  // generateTargetFilter() {
+  //   if (this.targetOptions) {
+  //     return;
+  //   }
+  //   const tempList = [];
+  //   for (const data of this.targetSensor) {
+  //     tempList.push({ label: data.target.displayName, value: data.target.id });
+  //   }
+  //   this.targetOptions = tempList;
+  // }
 
-  onAddSensorWithTarget(target: Target) {
-    this.target = target;
-    this.sensorSettingDisplay = true;
-  }
+  // onAddSensor() {
+  //   this.target = null;
+  //   this.sensorSettingDisplay = true;
+  // }
 
-  onSensorSettingClose() {
-    this.sensorSettingDisplay = false;
-  }
-  onSensorClick(sensor) {
-    this.router.navigate(['sensor', sensor.id, 'info']);
-  }
+  // onAddSensorWithTarget(target: Target) {
+  //   this.target = target;
+  //   this.sensorSettingDisplay = true;
+  // }
 
-  onSearch() {
-    console.log(this.filteredName);
-    console.log(this.selectedTargets);
-    console.log(this.selectedStatus);
-    alert('서버-검색 기능 구현 필요');
-  }
+  // onSensorSettingClose() {
+  //   this.sensorSettingDisplay = false;
+  // }
+  // onSensorClick(sensor) {
+  //   this.router.navigate(['sensor', sensor.id, 'info']);
+  // }
+
+  // onSearch() {
+  //   console.log(this.filteredName);
+  //   console.log(this.selectedTargets);
+  //   console.log(this.selectedStatus);
+  //   alert('서버-검색 기능 구현 필요');
+  // }
 
 }
 
diff --git a/@overflow/sensor/container/index.ts b/@overflow/sensor/container/index.ts
index 2435478..affa068 100644
--- a/@overflow/sensor/container/index.ts
+++ b/@overflow/sensor/container/index.ts
@@ -1,5 +1,5 @@
-import { SensorListContainerComponent } from './sensor-list-container';
-import { SensorDetailContainerComponent } from './sensor-detail-container';
+import { SensorListContainerComponent } from './sensor-list-container.component';
+import { SensorDetailContainerComponent } from './sensor-detail-container.component';
 
 export const CONTAINER_COMPONENTS = [
     SensorListContainerComponent,
diff --git a/@overflow/sensor/container/sensor-detail-container.html b/@overflow/sensor/container/sensor-detail-container.component.html
similarity index 100%
rename from @overflow/sensor/container/sensor-detail-container.html
rename to @overflow/sensor/container/sensor-detail-container.component.html
diff --git a/@overflow/sensor/container/sensor-detail-container.ts b/@overflow/sensor/container/sensor-detail-container.component.ts
similarity index 86%
rename from @overflow/sensor/container/sensor-detail-container.ts
rename to @overflow/sensor/container/sensor-detail-container.component.ts
index fc06b6d..6496776 100644
--- a/@overflow/sensor/container/sensor-detail-container.ts
+++ b/@overflow/sensor/container/sensor-detail-container.component.ts
@@ -6,7 +6,7 @@ import { Store, select } from '@ngrx/store';
 
 @Component({
   selector: 'of-sensor-detail-container',
-  templateUrl: './sensor-detail-container.html',
+  templateUrl: './sensor-detail-container.component.html',
 })
 export class SensorDetailContainerComponent {
 
diff --git a/@overflow/sensor/container/sensor-list-container.component.html b/@overflow/sensor/container/sensor-list-container.component.html
new file mode 100644
index 0000000..338b9c4
--- /dev/null
+++ b/@overflow/sensor/container/sensor-list-container.component.html
@@ -0,0 +1 @@
+<of-sensor-list [page]="page$ | async"></of-sensor-list>
\ No newline at end of file
diff --git a/@overflow/sensor/container/sensor-list-container.component.ts b/@overflow/sensor/container/sensor-list-container.component.ts
new file mode 100644
index 0000000..121894c
--- /dev/null
+++ b/@overflow/sensor/container/sensor-list-container.component.ts
@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Output, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store, select } from '@ngrx/store';
+import { Sensor } from '@overflow/commons-typescript/model/sensor';
+import * as SensorEntityStore from '../store/entity/sensor';
+import { SensorEntitySelector, SensorPageSelector } from '../store';
+import { AuthSelector } from '../../member/store';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+
+@Component({
+    selector: 'of-sensor-list-container',
+    templateUrl: './sensor-list-container.component.html',
+})
+export class SensorListContainerComponent implements OnInit {
+
+    page$: Observable<Page<Sensor>>;
+    @Output() select = new EventEmitter<Sensor>();
+
+    constructor(private store: Store<SensorEntityStore.State>) {
+        this.page$ = store.pipe(select(SensorPageSelector));
+    }
+
+    ngOnInit() {
+        this.store.select(AuthSelector.select('domain')).subscribe(
+            (domain: Domain) => {
+                const pageParams: PageParams = {
+                    pageNo: 0,
+                    countPerPage: 10,
+                    sortCol: 'id',
+                    sortDirection: 'descending',
+                };
+                this.store.dispatch(new SensorEntityStore.ReadAllByDomainID({domainID : domain.id, pageParams}));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+}
diff --git a/@overflow/sensor/container/sensor-list-container.html b/@overflow/sensor/container/sensor-list-container.html
deleted file mode 100644
index 6844dda..0000000
--- a/@overflow/sensor/container/sensor-list-container.html
+++ /dev/null
@@ -1 +0,0 @@
-<of-sensor-list></of-sensor-list>
\ No newline at end of file
diff --git a/@overflow/sensor/container/sensor-list-container.ts b/@overflow/sensor/container/sensor-list-container.ts
deleted file mode 100644
index 171adbe..0000000
--- a/@overflow/sensor/container/sensor-list-container.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Store, select } from '@ngrx/store';
-import { Sensor } from '@overflow/commons-typescript/model/sensor';
-// import * as ProbeStore from '../store/entity/probe';
-// import { ProbeEntitySelector, ProbeListContainerSelector } from '../store';
-
-@Component({
-    selector: 'of-sensor-list-container',
-    templateUrl: './sensor-list-container.html',
-})
-export class SensorListContainerComponent {
-
-    @Output() select = new EventEmitter<Sensor>();
-
-}
diff --git a/@overflow/sensor/service/sensor.service.ts b/@overflow/sensor/service/sensor.service.ts
index 60aee89..e109fe3 100644
--- a/@overflow/sensor/service/sensor.service.ts
+++ b/@overflow/sensor/service/sensor.service.ts
@@ -10,6 +10,8 @@ import { SensorItem } from '@overflow/commons-typescript/model/sensor-item';
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
 import { Domain } from '@overflow/commons-typescript/model/domain';
 import { Target } from '@overflow/commons-typescript/model/target';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
 
 
 @Injectable()
@@ -21,9 +23,9 @@ export class SensorService {
 
   }
 
-  // public readAllByDomain(domain: Domain, pageParams: PageParams): Observable<Page> {
-  //   return this.rpcService.call('SensorService.readAllByDomain', domain, pageParams);
-  // }
+  public readAllByDomainID(domainID: number, pageParams: PageParams): Observable<Page<Sensor>> {
+    return this.rpcService.call('SensorService.readAllByDomainID', domainID, pageParams);
+  }
 
   public registSensorConfig(sensor: Sensor, sensorItems: SensorItem[]): Observable<Sensor> {
     return this.rpcService.call('SensorService.registSensorConfig', sensor, sensorItems, null);
diff --git a/@overflow/sensor/store/entity/sensor/index.ts b/@overflow/sensor/store/entity/sensor/index.ts
new file mode 100644
index 0000000..7f1866f
--- /dev/null
+++ b/@overflow/sensor/store/entity/sensor/index.ts
@@ -0,0 +1,4 @@
+export * from './sensor.action';
+export * from './sensor.effect';
+export * from './sensor.reducer';
+export * from './sensor.state';
diff --git a/@overflow/sensor/store/entity/sensor/sensor.action.ts b/@overflow/sensor/store/entity/sensor/sensor.action.ts
new file mode 100644
index 0000000..7bf04a2
--- /dev/null
+++ b/@overflow/sensor/store/entity/sensor/sensor.action.ts
@@ -0,0 +1,85 @@
+import { Action } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Sensor } from '@overflow/commons-typescript/model/sensor';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+
+export enum ActionType {
+  ReadAllByDomainID = '[Sensor.list] ReadAllByDomainID',
+  ReadAllByDomainIDSuccess = '[Sensor.list] ReadAllByDomainIDSuccess',
+  ReadAllByDomainIDFailure = '[Sensor.list] ReadAllByDomainIDFailure',
+
+  Read = '[Sensor.detail] Read',
+  ReadSuccess = '[Sensor.detail] ReadSuccess',
+  ReadFailure = '[Sensor.detail] ReadFailure',
+
+  Modify = '[Sensor.detail] Modify',
+  ModifySuccess = '[Sensor.detail] ModifySuccess',
+  ModifyFailure = '[Sensor.detail] ModifyFailure',
+}
+
+export class ReadAllByDomainID implements Action {
+  readonly type = ActionType.ReadAllByDomainID;
+
+  constructor(public payload: {domainID: number, pageParams: PageParams}) {}
+}
+
+export class ReadAllByDomainIDSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainIDSuccess;
+
+  constructor(public payload: Page<Sensor>) {}
+}
+
+export class ReadAllByDomainIDFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainIDFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class Read implements Action {
+  readonly type = ActionType.Read;
+
+  constructor(public payload: number) {}
+}
+
+export class ReadSuccess implements Action {
+  readonly type = ActionType.ReadSuccess;
+
+  constructor(public payload: Sensor) {}
+}
+
+export class ReadFailure implements Action {
+  readonly type = ActionType.ReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class Modify implements Action {
+  readonly type = ActionType.Modify;
+
+  constructor(public payload: Sensor) {}
+}
+
+export class ModifySuccess implements Action {
+  readonly type = ActionType.ModifySuccess;
+
+  constructor(public payload: Sensor) {}
+}
+
+export class ModifyFailure implements Action {
+  readonly type = ActionType.ModifyFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAllByDomainID
+  | ReadAllByDomainIDSuccess
+  | ReadAllByDomainIDFailure
+  | Read
+  | ReadSuccess
+  | ReadFailure
+  | Modify
+  | ModifySuccess
+  | ModifyFailure
+;
diff --git a/@overflow/sensor/store/entity/sensor/sensor.effect.ts b/@overflow/sensor/store/entity/sensor/sensor.effect.ts
new file mode 100644
index 0000000..1185820
--- /dev/null
+++ b/@overflow/sensor/store/entity/sensor/sensor.effect.ts
@@ -0,0 +1,78 @@
+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/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc';
+import { Sensor } from '@overflow/commons-typescript/model/sensor';
+
+import {
+  ReadAllByDomainID,
+  ReadAllByDomainIDFailure,
+  ReadAllByDomainIDSuccess,
+  Read,
+  ReadSuccess,
+  ReadFailure,
+  Modify,
+  ModifySuccess,
+  ModifyFailure,
+  ActionType
+} from './sensor.action';
+import { SensorService } from '../../../service/sensor.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private sensorService: SensorService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  ReadAllByDomainID$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomainID)
+    .map((action: ReadAllByDomainID) => action.payload)
+    .switchMap(payload => this.sensorService.readAllByDomainID(payload.domainID, payload.pageParams))
+    .map(page => {
+      return new ReadAllByDomainIDSuccess(page);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainIDFailure(error));
+    });
+
+  // @Effect()
+  // Read$: Observable<Action> = this.actions$
+  //   .ofType(ActionType.Read)
+  //   .map((action: Read) => action.payload)
+  //   .switchMap(payload => this.sensorHostService.read(payload))
+  //   .map(sensorHost => {
+  //     return new ReadSuccess(sensorHost);
+  //   })
+  //   .catch((error: RPCClientError) => {
+  //     return of(new ReadFailure(error));
+  //   });
+
+  //   @Effect()
+  //   Modify$: Observable<Action> = this.actions$
+  //     .ofType(ActionType.Modify)
+  //     .map((action: Modify) => action.payload)
+  //     .switchMap(payload => this.sensorService.modify(payload))
+  //     .map(sensor => {
+  //       return new ModifySuccess(sensor);
+  //     })
+  //     .catch((error: RPCClientError) => {
+  //       return of(new ModifyFailure(error));
+  //     });
+}
diff --git a/@overflow/sensor/store/entity/sensor/sensor.reducer.ts b/@overflow/sensor/store/entity/sensor/sensor.reducer.ts
new file mode 100644
index 0000000..c17cbee
--- /dev/null
+++ b/@overflow/sensor/store/entity/sensor/sensor.reducer.ts
@@ -0,0 +1,63 @@
+import {
+  ActionType,
+  Actions,
+} from './sensor.action';
+
+import {
+  State,
+  initialState,
+  sensorAdapter,
+} from './sensor.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDomainID: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ReadAllByDomainIDSuccess: {
+      return sensorAdapter.setAll(action.payload.content, {...state, page: action.payload});
+    }
+
+    case ActionType.ReadAllByDomainIDFailure: {
+      return sensorAdapter.setError(action.payload, state);
+    }
+
+    case ActionType.Read: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ReadSuccess: {
+      return sensorAdapter.setOne(action.payload, {...state, page: null});
+    }
+
+    case ActionType.ReadFailure: {
+      return sensorAdapter.setError(action.payload, state);
+    }
+
+    case ActionType.Modify: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ModifySuccess: {
+      return sensorAdapter.upsertOne(action.payload, state);
+    }
+
+    case ActionType.ModifyFailure: {
+      return sensorAdapter.setError(action.payload, state);
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/@overflow/sensor/store/entity/sensor/sensor.state.ts b/@overflow/sensor/store/entity/sensor/sensor.state.ts
new file mode 100644
index 0000000..55d3de5
--- /dev/null
+++ b/@overflow/sensor/store/entity/sensor/sensor.state.ts
@@ -0,0 +1,24 @@
+import { RPCClientError } from '@loafer/ng-rpc';
+import { ProbeHost } from '@overflow/commons-typescript/model/probe';
+import { Selector, createSelector } from '@ngrx/store';
+import { createEntityAdapter, EntityState } from '@loafer/ng-entity';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
+import { Sensor } from '@overflow/commons-typescript/model/sensor';
+
+export const sensorAdapter = createEntityAdapter<Sensor, RPCClientError>();
+
+export interface State extends EntityState<Sensor, RPCClientError> {
+  page: Page<Sensor>;
+}
+
+export const initialState: State = {
+  ids : [],
+  entities : null,
+  page: null,
+  error: null,
+};
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return sensorAdapter.getSelectors(selector);
+}
+
diff --git a/@overflow/sensor/store/index.ts b/@overflow/sensor/store/index.ts
index 09ed7aa..ab23145 100644
--- a/@overflow/sensor/store/index.ts
+++ b/@overflow/sensor/store/index.ts
@@ -8,32 +8,30 @@ import { StateSelector } from '@overflow/core/ngrx/store';
 
 import { MODULE } from '../sensor.constant';
 
-import * as ListStore from './list';
-import * as DetailStore from './detail';
+import * as SensorEntityStore from './entity/sensor';
 
 export interface State {
-  list: ListStore.State;
-  sensor: DetailStore.State;
+  sensor: SensorEntityStore.State;
 }
 
 export const REDUCERS = {
-  list: ListStore.reducer,
-  sensor: DetailStore.reducer,
+  sensor: SensorEntityStore.reducer,
 };
 
 export const EFFECTS = [
-  ListStore.Effects,
-  DetailStore.Effects,
+  SensorEntityStore.Effects,
 ];
 
-export const sensorState = createFeatureSelector<State>(MODULE.name);
+export const selectState = createFeatureSelector<State>(MODULE.name);
 
-export const sensorListSelector = new StateSelector<ListStore.State>(createSelector(
-  sensorState,
-  (state: State) => state.list
-));
-export const sensorSelector = new StateSelector<DetailStore.State>(createSelector(
-  sensorState,
+export const SensorEntitySelector = SensorEntityStore.getSelectors(createSelector(
+  selectState,
   (state: State) => state.sensor
 ));
 
+export const SensorPageSelector = createSelector(
+  selectState,
+  (state: State) => state.sensor.page
+);
+
+
diff --git a/@overflow/target/component/detail/detail.component.ts b/@overflow/target/component/detail/detail.component.ts
index d93edbc..df0a878 100644
--- a/@overflow/target/component/detail/detail.component.ts
+++ b/@overflow/target/component/detail/detail.component.ts
@@ -7,8 +7,7 @@ import { DetailSelector as InfraDetailSelector } from '@overflow/infra/store';
 import * as InfraDetailStore from '@overflow/infra/store/detail';
 import { Subscription } from 'rxjs/Subscription';
 import { RPCClientError } from '@loafer/ng-rpc';
-import { sensorListSelector } from '@overflow/sensor/store';
-import * as SensorListStore from '@overflow/sensor/store/list';
+// import * as SensorListStore from '@overflow/sensor/store/list';
 // import { PageParams, Page } from 'app/commons/model';
 import { ModifySelector } from '@overflow/target/store';
 import * as TargetModifyStore from '@overflow/target/store/modify';
@@ -24,7 +23,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
   infraSubscription$: Subscription;
   infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
   sensorsSubscription$: Subscription;
-  sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
+  // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
   target$ = this.targetModifyStore.pipe(select(ModifySelector.select('target')));
 
   infraId = null;
@@ -41,7 +40,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
     private router: Router,
     private route: ActivatedRoute,
     private infraDetailStore: Store<InfraDetailStore.State>,
-    private sensorListStore: Store<SensorListStore.State>,
+    // private sensorListStore: Store<SensorListStore.State>,
     private targetModifyStore: Store<TargetModifyStore.State>
   ) { }