sensor / senson-item module is in progress

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

@@ -1,5 +1,5 @@
-// import { ListComponent } from './list/list.component';
+import { ListComponent } from './list/list.component';
 
-// export const COMPONENTS = [
-//   ListComponent,
-// ];
+export const COMPONENTS = [
+  ListComponent,
+];

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

@@ -1,45 +1,13 @@
-<div class="example-container mat-elevation-z8" >
-    <mat-table #table [dataSource]="dataSource" matSort>
-  
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
-      </ng-container>
-  
-      <ng-container matColumnDef="ip">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
-      </ng-container>
-  
-      <ng-container matColumnDef="os">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.os}} </mat-cell>
-      </ng-container>
-  
-      <ng-container matColumnDef="cidr">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
-      </ng-container>
-  
-      <ng-container matColumnDef="targetCnt">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.targetCnt}} </mat-cell>
-      </ng-container>
-  
-      <ng-container matColumnDef="date">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
-      </ng-container>
-  
-      <ng-container matColumnDef="authBy">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.authBy}} </mat-cell>
-      </ng-container>
-  
-      <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
-    </mat-table>
-  
-    <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
-    </mat-paginator>
-  </div>
+<div>SensorItem List</div>
+<p-table [value]="sensorItems" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+    <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+        <tr [pSelectableRow]="sensor">
+            <td>{{rowIndex + 1}}</td>
+            <td>{{sensor.Description}}</td>
+            <td>{{sensor.status.name}}</td>
+            <td>{{sensor.crawler.name}}</td>
+            <td>???</td>
+            <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+        </tr>
+    </ng-template>
+</p-table>

src/packages/sensor-item/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-item/component/list/list.component.ts

@@ -1,63 +1,32 @@
-// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-// import { MatTableDataSource, MatSort } from '@angular/material';
-// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
-// import { Router } from '@angular/router';
+import { Component, OnInit, AfterViewInit, AfterContentInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MetaSensorDisplayItem } from '../../../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;
-// }
+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',
-//   templateUrl: './list.component.html',
-//   styleUrls: ['./list.component.scss']
-// })
-// export class ListComponent implements OnInit, AfterContentInit {
+@Component({
+    selector: 'of-sensor-item-list',
+    templateUrl: './list.component.html',
+})
+export class ListComponent implements OnInit, AfterContentInit {
 
-//   displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
-//   dataSource: MatTableDataSource<Probe>;
-//   @ViewChild(MatSort) sort: MatSort;
+    sensorItems: MetaSensorDisplayItem[];
+    ngAfterContentInit() {
+    }
 
-//   /**
-//    * Set the sort after the view init since this component will
-//    * be able to query its view for the initialized sort.
-//    */
-//   ngAfterContentInit() {
-//     // temporary data
-//     const data: Probe[] = new Array();
-//     for (let i = 0; i < 10; i++) {
-//       const p: Probe = {
-//         id: String('id' + i),
-//         name: String('name' + i),
-//         ip: String('ip' + i),
-//         os: String('os' + i),
-//         cidr: String('cidr' + i),
-//         targetCnt: i,
-//         date: String('date' + i),
-//         authBy: String('insanity')
-//       };
-//       data.push(p);
-//     }
+    constructor(private router: Router) { }
 
-//     this.dataSource = new MatTableDataSource(data);
-//     this.dataSource.sort = this.sort;
-//   }
-
-//   constructor(private router: Router) { }
-
-//   ngOnInit() {
-//   }
-
-//   handleRowClick(obj: Probe) {
-//     this.router.navigate(['probe', obj.id]);
-//   }
-// }
+    ngOnInit() {
+    }
+}
 

src/packages/sensor-item/sensor-item.module.ts

@@ -1,25 +1,24 @@
-// import { NgModule } from '@angular/core';
-// import { CommonModule } from '@angular/common';
-// import { MaterialModule } from 'packages/commons/material/material.module';
-// import { COMPONENTS } from './component';
-// import { SensorItemStoreModule } from './sensor-item-store.module';
-// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
-// import { SERVICES } from './service';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { COMPONENTS } from './component';
+import { SensorItemStoreModule } from './sensor-item-store.module';
+import { SERVICES } from './service';
+import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 
-// @NgModule({
-//   imports: [
-//     CommonModule,
-//     MaterialModule,
-//     SensorItemStoreModule,
-//   ],
-//   declarations: [
-//     COMPONENTS,
-//   ],
-//   exports: [
-//     COMPONENTS,
-//   ],
-//   providers: [
-//     SERVICES,
-//   ],
-// })
-// export class SensorItemModule { }
+@NgModule({
+  imports: [
+    CommonModule,
+    SensorItemStoreModule,
+    PrimeNGModules,
+  ],
+  declarations: [
+    COMPONENTS,
+  ],
+  exports: [
+    COMPONENTS,
+  ],
+  providers: [
+    SERVICES,
+  ],
+})
+export class SensorItemModule { }

src/packages/sensor/component/detail/detail.component.html

@@ -1 +1,72 @@
-<div><h3>Sensor Detail</h3></div>
+<h1>Sensor Alias 출력</h1>
+
+<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
+    <div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="margin: 0 0 1em 0; display: block">
+        <span class="ui-messages-icon fa fa-fw fa-2x fa-check"></span>
+        <ul>
+            <li>
+                <span class="ui-messages-summary" style="font-size:16px">RUNNING</span>
+            </li>
+        </ul>
+    </div>
+</div>
+<ng-template #STOPPED>
+    <div class="ui-messages ui-widget ui-corner-all ui-messages-error" style="margin: 0 0 1em 0; display: block">
+        <span class="ui-messages-icon fa fa-fw fa-2x fa-warning"></span>
+        <ul>
+            <li>
+                <span class="ui-messages-summary" style="font-size:16px">STOPPED</span>
+            </li>
+        </ul>
+    </div>
+</ng-template>
+
+<div class="ui-bottom-space-10" dir="rtl">
+    <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove" icon="ui-icon-close" pButton (click)="onRemove()"></button>
+    <button class="ui-button-width-fit" type="button" label="Edit" pButton (click)="onEdit()"></button>
+    <button class="ui-button-width-fit" type="button" label="Start/Stop" pButton (click)="onStartOrStop()"></button>
+</div>
+
+<div class="ui-g">
+    <div class="ui-g-12 ui-md-3">
+        <div class="ui-g form-group">
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input type="text" pInputText readonly value="{{sensor.id}}">
+                    <label>ID</label>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input type="text" pInputText readonly value="{{sensor.description}}">
+                    <label>Description</label>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input type="text" pInputText readonly value="{{sensor.crawler.name}}">
+                    <label>Crawler Type</label>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input type="text" pInputText readonly value="{{sensor.itemCount}}">
+                    <label>Items</label>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input type="text" pInputText readonly value="{{sensor.createDate | date: 'dd/MM/yyyy'}}">
+                    <label>Created at</label>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="ui-g-12 ui-md-9">
+        <h1>Monitored Items</h1>
+        <of-sensor-item-list></of-sensor-item-list>
+    </div>
+</div>
+
+<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>

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

@@ -1,19 +1,65 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, AfterContentInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ConfirmationService } from 'primeng/primeng';
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import * as DetailStore from '../../store/detail';
+import { sensorSelector } from '../../store';
+import { Sensor } from '../../model';
 
 @Component({
   selector: 'of-sensor-detail',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+  providers: [ConfirmationService]
 })
-export class DetailComponent implements OnInit {
+export class DetailComponent implements OnInit, AfterContentInit {
+
+  sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
+  sensor: Sensor;
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
+    private confirmationService: ConfirmationService,
+    private detailStore: Store<DetailStore.State>,
   ) { }
 
   ngOnInit() {
+    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 }
+      )
+    );
+  }
+
+  onStartOrStop() { }
+
+  onEdit() { }
+
+  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: () => {
+      }
+    });
   }
 }
 

src/packages/sensor/component/name-tag/name-tag.component.html

@@ -1,5 +0,0 @@
-<mat-chip-list>
-  <mat-chip *ngFor="let sensor of sensors">
-    {{sensor.description}}
-  </mat-chip>
-</mat-chip-list>

src/packages/sensor/component/name-tag/name-tag.component.ts

@@ -1,59 +0,0 @@
-// import { Component, OnInit, AfterViewInit, ViewChild, Input } from '@angular/core';
-// import { MatTableDataSource, MatSort, MatDialog } from '@angular/material';
-// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
-// 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';
-// import { Page, PageParams } from 'app/commons/model';
-// import { Target } from 'packages/target/model';
-
-// @Component({
-//   selector: 'of-sensor-name-tag',
-//   templateUrl: './name-tag.component.html',
-//   styleUrls: ['./name-tag.component.scss']
-// })
-// export class NameTagComponent implements OnInit, AfterContentInit {
-
-//   sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
-//   sensors: Sensor[];
-//   @Input() target: Target;
-
-//   constructor(private router: Router,
-//     private store: Store<ListStore.State>,
-//     private dialog: MatDialog,
-//   ) { }
-
-//   ngOnInit() {
-//     this.sensorList$.subscribe(
-//       (page: Page) => {
-//         if (page != null) {
-//           this.sensors = page.content;
-//         }
-//       },
-//       (error: RPCClientError) => {
-//         console.log(error.response.message);
-//       }
-//     );
-//   }
-
-//   ngAfterContentInit() {
-//     this.getSensors(0);
-//   }
-
-//   getSensors(pageIndex: number) {
-//     const pageParams: PageParams = {
-//       pageNo: pageIndex + '',
-//       countPerPage: '9999',
-//       sortCol: 'id',
-//       sortDirection: 'descending'
-//     };
-//     this.store.dispatch(new ListStore.ReadAllByTarget({ target: this.target, pageParams }));
-//   }
-// }

src/packages/sensor/sensor.module.ts

@@ -5,9 +5,9 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { SensorStoreModule } from './sensor-store.module';
+import { SensorItemModule } from '../sensor-item/sensor-item.module';
 // import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
 // import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
-// import { SensorItemModule } from '../sensor-item/sensor-item.module';
 // import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
 
 @NgModule({
@@ -16,7 +16,7 @@ import { SensorStoreModule } from './sensor-store.module';
         FormsModule,
         SensorStoreModule,
         PrimeNGModules,
-        // SensorItemModule,
+        SensorItemModule
         // MetaCrawlerModule,
         // MetaSensorDisplayItemModule,
     ],

src/packages/sensor/service/sensor.service.ts

@@ -36,4 +36,8 @@ export class SensorService {
   public readAllByTarget(target: Target, pageParams: PageParams): Observable<Page> {
     return this.rpcService.call('SensorService.readAllByTarget', target, pageParams);
   }
+
+  public read(id: string): Observable<Sensor> {
+    return this.rpcService.call<Sensor>('SensorService.read', id);
+  }
 }

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

@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Sensor } from '../../model';
+
+
+export enum ActionType {
+  Read = '[sensor.detail] Read',
+  ReadSuccess = '[sensor.detail] ReadSuccess',
+  ReadFailure = '[sensor.detail] 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: Sensor) {}
+}
+
+export class ReadFailure implements Action {
+  readonly type = ActionType.ReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | Read
+  | ReadSuccess
+  | ReadFailure
+;

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

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

src/packages/sensor/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/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Sensor } from '../../model';
+import { SensorService } from '../../service/sensor.service';
+
+import {
+  Read,
+  ReadFailure,
+  ReadSuccess,
+  ActionType
+} from './detail.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private sensorService: SensorService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  read$: Observable<Action> = this.actions$
+    .ofType(ActionType.Read)
+    .map((action: Read) => action.payload)
+    .switchMap(payload => this.sensorService.read(payload.id))
+    .map(sensor => {
+      return new ReadSuccess(sensor);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadFailure(error));
+    });
+}

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

@@ -0,0 +1,49 @@
+import {
+  Read,
+  ReadFailure,
+  ReadSuccess,
+  ActionType,
+  Actions,
+} from './detail.action';
+
+import {
+  State,
+  initialState,
+} from './detail.state';
+
+import { Sensor } 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,
+        sensor: action.payload,
+      };
+    }
+
+    case ActionType.ReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        sensor: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Sensor } from '../../model';
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+
+export interface State extends EntityState<Sensor> {
+  error: RPCClientError | null;
+  isPending: boolean;
+  sensor: Sensor | null;
+}
+export const adapter: EntityAdapter<Sensor> = createEntityAdapter<Sensor>();
+export const initialState: State = adapter.getInitialState({
+  error: null,
+  isPending: false,
+  sensor: null,
+});

src/packages/sensor/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/sensor/store/index.ts

@@ -9,21 +9,21 @@ import { StateSelector } from 'packages/core/ngrx/store';
 import { MODULE } from '../sensor.constant';
 
 import * as ListStore from './list';
-import * as RegistStore from './regist';
+import * as DetailStore from './detail';
 
 export interface State {
   list: ListStore.State;
-  sensor: RegistStore.State;
+  sensor: DetailStore.State;
 }
 
 export const REDUCERS = {
   list: ListStore.reducer,
-  sensor: RegistStore.reducer,
+  sensor: DetailStore.reducer,
 };
 
 export const EFFECTS = [
   ListStore.Effects,
-  RegistStore.Effects,
+  DetailStore.Effects,
 ];
 
 export const sensorState = createFeatureSelector<State>(MODULE.name);
@@ -32,7 +32,7 @@ export const sensorListSelector = new StateSelector<ListStore.State>(createSelec
   sensorState,
   (state: State) => state.list
 ));
-export const sensorSelector = new StateSelector<RegistStore.State>(createSelector(
+export const sensorSelector = new StateSelector<DetailStore.State>(createSelector(
   sensorState,
   (state: State) => state.sensor
 ));