Merge branch 'master' of https://git.loafle.net/overflow/overflow-webapp

src/app/app-store.module.ts

@@ -4,15 +4,19 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {
   StoreRouterConnectingModule,
   RouterStateSerializer,
+  RouterReducerState,
 } from '@ngrx/router-store';
 import { EffectsModule } from '@ngrx/effects';
 import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 
+
 import { environment } from '../environments/environment';
-import { AppState } from './app.state';
 
 import { SimpleRouterStateSerializer } from './commons/router/state/serializer/simple-router-state-serializer';
 
+export interface AppState {
+}
+
 export const reducers: ActionReducerMap<AppState> = {
 };
 
@@ -44,6 +48,7 @@ export const reducers: ActionReducerMap<AppState> = {
      */
     StoreDevtoolsModule.instrument({
       name: 'overFlow WebApp DevTools',
+      maxAge: 50,
       logOnly: environment.production,
     }),
     EffectsModule.forRoot([]),
@@ -58,4 +63,4 @@ export const reducers: ActionReducerMap<AppState> = {
   ],
 
 })
-export class AppReducerModule { }
+export class AppStoreModule { }

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppReducerModule } from './app-reducer.module';
+import { AppStoreModule } from './app-store.module';
 import { MaterialModule } from './commons/ui/material/material.module';
 import { CovalentModule } from './commons/ui/covalent/covalent.module';
 
@@ -23,7 +23,7 @@ import { RPCService } from './commons/service/rpc.service';
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
-    AppReducerModule,
+    AppStoreModule,
     MaterialModule,
     CovalentModule,
     HttpClientModule,

src/app/app.state.ts

@@ -1,3 +0,0 @@
-export interface AppState {
-
-}

src/app/commons/component/sidebar/menu-element.ts

@@ -20,7 +20,7 @@ export const menus = [
             },
             {
                 'name': 'Sensors',
-                'link': '',
+                'link': '/sensors',
                 'icon': 'indeterminate_check_box',
                 'chip': false,
                 'open': false,
@@ -56,7 +56,7 @@ export const menus = [
             },
             {
                 'name': 'Dashboards',
-                'link': '',
+                'link': '/dashboard',
                 'icon': 'indeterminate_check_box',
                 'chip': { 'value': 3, 'color': 'accent'},
                 'open': false,

src/app/packages/member/component/signin.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+
+import * as AuthStore from '../store/auth';
 
 @Component({
   selector: 'of-member-signin',
@@ -17,6 +20,7 @@ export class SigninComponent implements OnInit {
 
   constructor(
     private router: Router,
+    private store: Store<AuthStore.State>,
     private formBuilder: FormBuilder,
   ) { }
 

src/app/packages/member/guard/auth.guard.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuard]
+    });
+  });
+
+  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

src/app/packages/member/guard/auth.guard.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  CanActivateChild,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+import { Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/take';
+import 'rxjs/add/operator/map';
+
+import * as AuthStore from '../store/auth';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild {
+  constructor(
+    private store: Store<AuthStore.State>
+  ) { }
+
+  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
+    return this.store
+      .select(AuthStore.isSignin)
+      .map(isSignin => {
+        if (!isSignin) {
+          this.store.dispatch(new AuthStore.SigninRedirect());
+          return false;
+        }
+
+        return true;
+      })
+      .take(1);
+  }
+
+  canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
+    return this.store
+      .select(AuthStore.isSignin)
+      .map(isSignin => {
+        if (!isSignin) {
+          this.store.dispatch(new AuthStore.SigninRedirect());
+          return false;
+        }
+
+        return true;
+      })
+      .take(1);
+  }
+}

src/app/packages/member/member-store.module.ts

@@ -8,28 +8,15 @@ import {
 import { EffectsModule } from '@ngrx/effects';
 import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 
-import * as AuthStore from './store/auth';
+import { State as MemberState } from './store/state';
-import * as SignupStore from './store/signup';
+import { reducers as memberReducers } from './store/reducer';
+import { EFFECTS } from './store/effect';
 
-
+import { MODULE } from './member.constant';
-export interface State {
-  auth: AuthStore.State;
-  signup: SignupStore.Signup;
-}
-
-export const reducers = {
-  auth: AuthStore.reducer,
-  signup: SignupStore.reducer,
-};
-
-export const EFFECTS = [
-  AuthStore.Effects,
-  SignupStore.Effects,
-];
 
 @NgModule({
   imports: [
-    StoreModule.forFeature('', reducers),
+    StoreModule.forFeature(MODULE.name, memberReducers),
     EffectsModule.forFeature(EFFECTS),
   ],
 })

src/app/packages/member/member.constant.ts

@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'Member'
+};

src/app/packages/member/member.module.ts

@@ -10,6 +10,7 @@ import { SigninComponent } from './component/signin.component';
 import { SignupComponent } from './component/signup.component';
 import { ResetPasswordComponent } from './component/reset-password.component';
 import { MemberService } from './service/member.service';
+import { AuthGuard } from './guard/auth.guard';
 
 import { MemberStoreModule } from './member-store.module';
 
@@ -32,6 +33,7 @@ export const COMPONENTS = [
   declarations: COMPONENTS,
   exports: COMPONENTS,
   providers: [
+    AuthGuard,
     MemberService,
   ],
 })

src/app/packages/member/store/auth/auth.action.ts

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export enum ActionType {
   Signin = '[member.auth] Signin',
@@ -21,7 +21,7 @@ export class Signin implements Action {
 export class SigninSuccess implements Action {
   readonly type = ActionType.SigninSuccess;
 
-  constructor(public payload: { member: Member }) {}
+  constructor(public payload: Member) {}
 }
 
 export class SigninFailure implements Action {

src/app/packages/member/store/auth/auth.effect.ts

@@ -13,8 +13,8 @@ import 'rxjs/add/operator/exhaustMap';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/take';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
-import { MemberService } from '../service/member.service';
+import { MemberService } from '../../service/member.service';
 
 import {
   Signin,
@@ -39,7 +39,7 @@ export class Effects {
     .exhaustMap(payload =>
       this.memberService
         .signin(payload.email, payload.password)
-        .map(member => new SigninSuccess({ member }))
+        .map(member => new SigninSuccess(member))
         .catch(error => of(new SigninFailure(error)))
     );
 

src/app/packages/member/store/auth/auth.reducer.ts

@@ -8,7 +8,7 @@ import {
   initialState,
 } from './auth.state';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export function reducer(state = initialState, action: Actions): State {
   switch (action.type) {
@@ -26,7 +26,7 @@ export function reducer(state = initialState, action: Actions): State {
         isSignin: true,
         error: null,
         isPending: false,
-        member: action.payload.member,
+        member: action.payload,
       };
     }
 

src/app/packages/member/store/auth/auth.state.ts

@@ -1,4 +1,4 @@
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export interface State {
   isSignin: boolean;

src/app/packages/member/store/effect.ts

@@ -0,0 +1,7 @@
+import * as AuthStore from './auth';
+import * as SignupStore from './signup';
+
+export const EFFECTS = [
+  AuthStore.Effects,
+  SignupStore.Effects,
+];

src/app/packages/member/store/reducer.ts

@@ -0,0 +1,7 @@
+import * as AuthStore from './auth';
+import * as SignupStore from './signup';
+
+export const reducers = {
+  auth: AuthStore.reducer,
+  signup: SignupStore.reducer,
+};

src/app/packages/member/store/signup/signup.action.ts

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export enum ActionType {
   Signup = '[member.signup] Signup',
@@ -11,13 +11,13 @@ export enum ActionType {
 export class Signup implements Action {
   readonly type = ActionType.Signup;
 
-  constructor(public payload: {member: Member}) {}
+  constructor(public payload: Member) {}
 }
 
 export class SignupSuccess implements Action {
   readonly type = ActionType.SignupSuccess;
 
-  constructor(public payload: { member: Member }) {}
+  constructor(public payload: Member) {}
 }
 
 export class SignupFailure implements Action {

src/app/packages/member/store/signup/signup.effect.ts

@@ -13,8 +13,8 @@ import 'rxjs/add/operator/exhaustMap';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/take';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
-import { MemberService } from '../service/member.service';
+import { MemberService } from '../../service/member.service';
 
 import {
   Signup,
@@ -36,10 +36,10 @@ export class Effects {
   signup$: Observable<Action> = this.actions$
     .ofType(ActionType.Signup)
     .map((action: Signup) => action.payload)
-    .exhaustMap(payload =>
+    .exhaustMap(member =>
       this.memberService
-        .signup(payload.member)
+        .signup(member)
-        .map(member => new SignupSuccess({ member }))
+        .map(_member => new SignupSuccess(_member))
         .catch(error => of(new SignupFailure(error)))
     );
 

src/app/packages/member/store/signup/signup.reducer.ts

@@ -8,7 +8,7 @@ import {
   initialState,
 } from './signup.state';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export function reducer(state = initialState, action: Actions): State {
   switch (action.type) {
@@ -25,7 +25,7 @@ export function reducer(state = initialState, action: Actions): State {
         ...state,
         error: null,
         isPending: false,
-        member: action.payload.member,
+        member: action.payload,
       };
     }
 

src/app/packages/member/store/signup/signup.state.ts

@@ -1,4 +1,4 @@
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export interface State {
   error: string | null;

src/app/packages/member/store/state.ts

@@ -0,0 +1,8 @@
+import * as AuthStore from './auth';
+import * as SignupStore from './signup';
+
+export interface State {
+  auth: AuthStore.State;
+  signup: SignupStore.Signup;
+}
+

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

@@ -1,3 +1,45 @@
-<p>
+<div class="example-container mat-elevation-z8" >
-  list works!
+    <mat-table #table [dataSource]="dataSource" matSort>
-</p>
+  
+      <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>

src/app/packages/sensor-item/component/list/list.component.scss

@@ -0,0 +1,14 @@
+.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/app/packages/sensor-item/component/list/list.component.ts

@@ -1,15 +1,63 @@
-import { Component, OnInit } from '@angular/core';
+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';
+
+export interface Probe {
+  id: string;
+  name: string;
+  ip: string;
+  os: string;
+  cidr: string;
+  targetCnt: number;
+  date: string;
+  authBy: string;
+}
+
 
 @Component({
-  selector: 'of-list',
+  selector: 'of-sensor-item-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss']
 })
-export class ListComponent implements OnInit {
+export class ListComponent implements OnInit, AfterContentInit {
 
-  constructor() { }
+  displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
+  dataSource: MatTableDataSource<Probe>;
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * 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);
+    }
+
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+
+  constructor(private router: Router) { }
 
   ngOnInit() {
   }
 
+  handleRowClick(obj: Probe) {
+    this.router.navigate(['probe', obj.id]);
   }
+}
+

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { ListComponent } from './component/list/list.component';
 
 
 @NgModule({
@@ -9,8 +10,10 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
     MaterialModule,
   ],
   declarations: [
+    ListComponent
   ],
   exports: [
+    ListComponent
   ]
 })
 export class SensorItemModule { }

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {DashboardPageComponent} from './dashboard-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardPageComponent,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+
+export class DashboardPageRoutingModule { }

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

@@ -0,0 +1,3 @@
+<p>
+  dashboard-page works!
+</p>

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-dashboard-page',
+  templateUrl: './dashboard-page.component.html',
+  styleUrls: ['./dashboard-page.component.scss']
+})
+export class DashboardPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DashboardPageRoutingModule } from './dashboard-page-routing.module';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import {DashboardPageComponent} from './dashboard-page.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DashboardPageRoutingModule,
+    MaterialModule,
+  ],
+  declarations: [
+    DashboardPageComponent
+  ]
+})
+export class DashboardPageModule { }

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

@@ -1,29 +1,36 @@
 <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlexFil fxFill fxLayoutGap="1px">
   <div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
+    <perfect-scrollbar>
+
+      <div fxLayoutAlign="start center" fxLayout="row">
+        <div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
+          <of-dashboard-card [dashData]="dash"></of-dashboard-card>
+        </div>
+      </div>
 
       <div fxLayout="row" fxLayoutAlign="space-between center">
         <of-host-summary-card></of-host-summary-card>
         <of-app-summary-card></of-app-summary-card>
       </div>
 
-    <!-- <div fxLayoutAlign="start center" fxLayout="row">
-      <div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
-        <of-dashboard-card [dashData]="dash"></of-dashboard-card>
-      </div>
-    </div> -->
-
       <div fxLayout="row" fxLayoutWrap [style.margin]="'20px 0px'">
         <of-sensor-summary fxFlex="40" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70"></of-sensor-summary>
         <of-sensor-item-filter fxFlex="60"></of-sensor-item-filter>
       </div>
 
+      <div fxLayout="row" [style.margin]="'20px 0px'">
+        <of-sensor-item-list fxFlex="100"></of-sensor-item-list>
+      </div>
+
       <div fxLayout="row" fxLayoutWrap fxLayoutAlign="end">
-        <!-- <of-sensor-item-table></of-sensor-item-table> -->
         <button mat-raised-button (click)="openDialog()">대시보드에 추가</button>
       </div>
 
+    </perfect-scrollbar>
   </div>
 
+
+
   <div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add">
     <div fxFlex="10" fxLayout="row" fxLayoutAlign="space-between center">
       <h3 class="mat-headline" fxFlex="80">Activities</h3>
@@ -44,5 +51,3 @@
     </perfect-scrollbar>
   </div>
 </div>
-<div>
-</div>

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

@@ -13,6 +13,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { HostSummaryCardComponent } from '../../commons/component/host-summary-card/host-summary-card.component';
 import { AppSummaryCardComponent } from '../../commons/component/app-summary-card/app-summary-card.component';
 import { FormsModule } from '@angular/forms';
+import { SensorItemModule } from '../../packages/sensor-item/sensor-item.module';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { FormsModule } from '@angular/forms';
     MaterialModule,
     PerfectScrollbarModule,
     NgxChartsModule,
-    FormsModule
+    FormsModule,
+    SensorItemModule,
   ],
   declarations: [
     OverviewPageComponent,

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

@@ -11,11 +11,13 @@ const routes: Routes = [
       { path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
       { path: 'probes', loadChildren: './probes/probes-page.module#ProbesPageModule' },
       { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule' },
+      { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' },
       { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
       { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
       { path: 'sensor-setting', loadChildren: './sensor-setting/sensor-setting-page.module#SensorSettingPageModule' },
       { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
       { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
+      { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
     ]
   }
 ];

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SensorsPageComponent } from './sensors-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SensorsPageComponent,
+    children: [
+      // { path: '', component: SensorListComponent },
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SensorsPageRoutingModule { }

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

@@ -0,0 +1,3 @@
+<p>
+  sensors works!
+</p>

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

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

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

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-pages-sensors',
+  templateUrl: './sensors-page.component.html',
+  styleUrls: ['./sensors-page.component.scss']
+})
+export class SensorsPageComponent implements OnInit {
+
+  tabs = [
+    { label: 'Overview', path: '/sensors' },
+    { label: 'History', path: '/sensors/history' },
+    { label: 'Settings', path: '/sensors/setting' },
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from '../../commons/ui/material/material.module';
+import { SensorsPageComponent } from './sensors-page.component';
+import { SensorsPageRoutingModule } from './sensors-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    SensorsPageRoutingModule
+  ],
+  declarations: [
+    SensorsPageComponent
+  ]
+})
+export class SensorsPageModule { }