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

src/app/app.module.ts

@@ -12,6 +12,9 @@ import { CovalentModule } from './commons/ui/covalent/covalent.module';
 
 import { AppComponent } from './app.component';
 
+import { RESTService } from './commons/service/rest.service';
+import { RPCService } from './commons/service/rpc.service';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -25,6 +28,9 @@ import { AppComponent } from './app.component';
     CovalentModule,
     HttpClientModule,
   ],
+  providers: [
+    RESTService, RPCService,
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html

@@ -1,3 +1,41 @@
-<p>
-  sensor-item-filter works!
-</p>
+<div class="mat-elevation-z4" style="padding:10px">
+  <!-- Type -->
+  <div>
+    <mat-radio-group class="types-radio-group" [(ngModel)]="selectedType">
+      <mat-radio-button class="types-radio-button" *ngFor="let t of types" [value]="t">
+        {{t}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <!-- Host range -->
+  <div *ngIf="selectedType == 'All' || selectedType == 'Host'">
+    <mat-form-field class="example-full-width">
+      <input matInput placeholder="From" value="">
+    </mat-form-field>
+    ~
+    <mat-form-field class="example-full-width">
+      <input matInput placeholder="To" value="">
+    </mat-form-field>
+  </div>
+  <!-- Crawler type -->
+  <div *ngIf="selectedType == 'All' || selectedType == 'Application'">
+    <mat-radio-group class="types-radio-group" [(ngModel)]="crawlerType">
+      <mat-radio-button class="types-radio-button" *ngFor="let c of crawlerTypes" [value]="c">
+        {{c}}
+      </mat-radio-button>
+    </mat-radio-group>
+  </div>
+  <!-- Applications -->
+  <div *ngIf="selectedType == 'All' || selectedType == 'Application'">
+    <mat-form-field>
+      <mat-select placeholder="Applications">
+        <mat-option *ngFor="let app of applications" [value]="app.value">
+          {{ app.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div fxLayoutAlign="end">
+    <button mat-raised-button color="primary">Search</button>
+  </div>
+</div>

src/app/commons/component/sensor-item-filter/sensor-item-filter.component.scss

@@ -0,0 +1,8 @@
+types-radio-group {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  
+  .types-radio-button {
+    margin: 5px;
+  }

src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts

@@ -7,7 +7,31 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SensorItemFilterComponent implements OnInit {
 
-  constructor() { }
+  selectedType: string;
+
+  types = [
+    'All',
+    'Host',
+    'Application',
+  ];
+
+  crawlerTypes = [
+    'All',
+    'WMI',
+    'SSH',
+    'SNMP'
+  ];
+
+  applications = [
+    {value: 'all', name: 'All'},
+    {value: 'mysql', name: 'MySQL'},
+    {value: 'redis', name: 'Redis'},
+    {value: 'tomcat', name: 'Tomcat'}
+  ];
+
+  constructor() {
+    this.selectedType = 'All';
+  }
 
   ngOnInit() {
   }

src/app/commons/component/sensor-summary/sensor-summary.component.html

@@ -1,4 +1,4 @@
-<div class="sales-list mat-elevation-z4 ">
+<div class="mat-elevation-z4 ">
     <mat-toolbar>
         <mat-toolbar-row>
             <span>Sensor Items Summary</span>

src/app/commons/reducer/state.ts

@@ -1,2 +0,0 @@
-export interface State {
-}

src/app/commons/service/rest.service.ts

@@ -4,31 +4,45 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/timeout';
 
 @Injectable()
 export class RESTService {
   private baseURL: string;
+  private readonly httpHeaders: HttpHeaders;
 
   constructor(
-    @Inject(HttpClient) private httpClient: HttpClient,
+    @Inject(HttpClient) private _httpClient: HttpClient,
   ) {
-
-  }
-
-  public get<T>(entry: string, ...args: any[]): Observable<T> {
-    const headers: HttpHeaders = new HttpHeaders();
-    headers
+    this.httpHeaders = new HttpHeaders()
       .set('Accept', 'application/json')
       .set('Content-Type', 'application/json');
+  }
 
-    this.httpClient
-      .get<T>('')
-      .do(
-        (data: any) => {
+  public get httpClient(): HttpClient {
+    return this._httpClient;
+  }
 
-        }
-      );
-    return undefined;
+  public get<T>(entry: string, params?: {[param: string]: string | string[]}): Observable<T> {
+    const headers: HttpHeaders = this.httpHeaders;
+
+    return this._httpClient
+      .get<T>('', {
+        headers: headers,
+        params: params,
+        responseType: 'json',
+      });
+  }
+
+  public post<T>(entry: string, body: any | null, params?: {[param: string]: string | string[]}): Observable<T> {
+    const headers: HttpHeaders = this.httpHeaders;
+
+    return this._httpClient
+      .post<T>('', body, {
+        headers: headers,
+        params: params,
+        responseType: 'json',
+      });
   }
 
 }

src/app/commons/service/rpc.service.ts

@@ -33,11 +33,15 @@ export class RPCService {
     return undefined;
   }
 
+  public callTimeout<T>(method: string, ...args: any[]): Observable<T> {
+    return undefined;
+  }
+
   public send(method: string, ...args: any[]): void {
 
   }
 
-  private sendData(data: Object): void {
+  private sendInternal(data: Object): void {
     this.wsSocketSubject.next(data);
   }
 

src/app/packages/member/component/reset-password/reset-password.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ResetPasswordComponent } from './reset-password.component';
-import { RouterModule } from '@angular/router';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from 'app/commons/ui/material/material.module';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MaterialModule,
-  ],
-  declarations: [
-    ResetPasswordComponent,
-  ],
-  exports: [
-    ResetPasswordComponent
-  ]
-})
-export class ResetPasswordModule { }

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

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { SigninComponent } from './signin.component';
-import { MaterialModule } from 'app/commons/ui/material/material.module';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MaterialModule,
-  ],
-  declarations: [
-    SigninComponent,
-  ],
-  exports: [
-    SigninComponent,
-  ]
-})
-export class SigninModule { }

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

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SignupComponent } from './signup.component';
-import { MaterialModule } from 'app/commons/ui/material/material.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MaterialModule,
-  ],
-  declarations: [
-    SignupComponent,
-  ],
-  exports: [
-    SignupComponent
-  ]
-})
-export class SignupModule { }

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

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import * as AuthStore from './store/auth';
+import * as SignupStore from './store/signup';
+
+
+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),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MemberStoreModule { }

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

@@ -1,21 +1,38 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ModifyModule } from 'app/packages/member/component/modify/modify.module';
-import { SigninModule } from 'app/packages/member/component/signin/signin.module';
-import { SignupModule } from 'app/packages/member/component/signup/signup.module';
-import { ResetPasswordModule } from 'app/packages/member/component/reset-password/reset-password.module';
-import { MemberService } from 'app/packages/member/service/member.service';
+import { RouterModule } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+
+import { ModifyComponent } from './component/modify.component';
+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 { MemberStoreModule } from './member-store.module';
+
+export const COMPONENTS = [
+  ModifyComponent,
+  SigninComponent,
+  SignupComponent,
+  ResetPasswordComponent,
+];
 
 @NgModule({
   imports: [
     CommonModule,
-    ModifyModule,
-    SigninModule,
-    SignupModule,
-    ResetPasswordModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MaterialModule,
+    MemberStoreModule,
   ],
+  declarations: COMPONENTS,
+  exports: COMPONENTS,
   providers: [
     MemberService,
-  ]
+  ],
 })
 export class MemberModule { }

src/app/packages/member/model/member.ts

@@ -1,4 +1,4 @@
-export class Member {
+export interface Member {
   id: number;
   email: string;
   password: string;

src/app/packages/member/service/member.service.ts

@@ -1,5 +1,9 @@
 import { Injectable } from '@angular/core';
-import { RPCService } from 'app/commons/service/rpc.service';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RESTService } from 'app/commons/service/rest.service';
 
 import { Member } from '../model/member';
 
@@ -7,19 +11,16 @@ import { Member } from '../model/member';
 export class MemberService {
 
   public constructor(
-    private rpcService: RPCService,
+    private restService: RESTService,
   ) {
 
   }
 
-  public signin(email: string, password: string) {
-    this.rpcService.call<Member>('MemberService.signin', email, password).subscribe(
-      (member: Member) => {
+  public signin(email: string, password: string): Observable<Member> {
+    return this.restService.post('/member/signin', '').map((member: Member) => member);
+  }
 
-      },
-      (error: any) => {
-
-      }
-    );
+  public signup(member: Member): Observable<Member> {
+    return this.restService.post('/member/signup', '').map((_member: Member) => _member);
   }
 }

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

@@ -0,0 +1,59 @@
+import { Action } from '@ngrx/store';
+
+import { Member } from '../model/member';
+
+export enum ActionType {
+  Signin = '[member.auth] Signin',
+  SigninSuccess = '[member.auth] SigninSuccess',
+  SigninFailure = '[member.auth] SigninFailure',
+  SigninRedirect = '[member.auth] SigninRedirect',
+  Signout = '[member.auth] Signout',
+  SignoutSuccess = '[member.auth] SignoutSuccess',
+  SignoutFailure = '[member.auth] SignoutFailure',
+}
+
+export class Signin implements Action {
+  readonly type = ActionType.Signin;
+
+  constructor(public payload: {email: string, password: string}) {}
+}
+
+export class SigninSuccess implements Action {
+  readonly type = ActionType.SigninSuccess;
+
+  constructor(public payload: { member: Member }) {}
+}
+
+export class SigninFailure implements Action {
+  readonly type = ActionType.SigninFailure;
+
+  constructor(public payload: any) {}
+}
+
+export class SigninRedirect implements Action {
+  readonly type = ActionType.SigninRedirect;
+}
+
+export class Signout implements Action {
+  readonly type = ActionType.Signout;
+}
+
+export class SignoutSuccess implements Action {
+  readonly type = ActionType.SignoutSuccess;
+}
+
+export class SignoutFailure implements Action {
+  readonly type = ActionType.SignoutFailure;
+
+  constructor(public payload: any) {}
+}
+
+export type Actions =
+  | Signin
+  | SigninSuccess
+  | SigninFailure
+  | SigninRedirect
+  | Signout
+  | SignoutSuccess
+  | SignoutFailure
+;

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

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

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

@@ -0,0 +1,58 @@
+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/map';
+import 'rxjs/add/operator/take';
+
+import { Member } from '../model/member';
+import { MemberService } from '../service/member.service';
+
+import {
+  Signin,
+  SigninSuccess,
+  SigninFailure,
+  ActionType,
+} from './auth.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private memberService: MemberService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  signin$: Observable<Action> = this.actions$
+    .ofType(ActionType.Signin)
+    .map((action: Signin) => action.payload)
+    .exhaustMap(payload =>
+      this.memberService
+        .signin(payload.email, payload.password)
+        .map(member => new SigninSuccess({ member }))
+        .catch(error => of(new SigninFailure(error)))
+    );
+
+  @Effect({ dispatch: false })
+  signinSuccess$ = this.actions$
+    .ofType(ActionType.SigninSuccess)
+    .do(() => this.router.navigate(['/']));
+
+  @Effect({ dispatch: false })
+  signinRedirect$ = this.actions$
+    .ofType(ActionType.SigninRedirect, ActionType.Signout)
+    .do(authed => {
+      this.router.navigate(['/login']);
+    });
+
+}

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

@@ -0,0 +1,73 @@
+import {
+  Actions,
+  ActionType,
+} from './auth.action';
+
+import {
+  State,
+  initialState,
+} from './auth.state';
+
+import { Member } from '../model/member';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Signin: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.SigninSuccess: {
+      return {
+        ...state,
+        isSignin: true,
+        error: null,
+        isPending: false,
+        member: action.payload.member,
+      };
+    }
+
+    case ActionType.SigninFailure: {
+      return {
+        ...state,
+        isSignin: false,
+        error: action.payload,
+        isPending: false,
+        member: null,
+      };
+    }
+
+    case ActionType.Signout: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.SigninSuccess: {
+      return {
+        ...state,
+        isSignin: false,
+        error: null,
+        isPending: false,
+        member: null,
+      };
+    }
+
+    case ActionType.SigninFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Member } from '../model/member';
+
+export interface State {
+  isSignin: boolean;
+  error: string | null;
+  isPending: boolean;
+  member: Member | null;
+}
+
+export const initialState: State = {
+  isSignin: false,
+  error: null,
+  isPending: false,
+  member: null,
+};
+
+export const isSignin = (state: State) => state.isSignin;
+export const getMember = (state: State) => state.member;
+export const getError = (state: State) => state.error;
+export const isPending = (state: State) => state.isPending;

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+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/map';
+import 'rxjs/add/operator/take';
+
+import { Member } from '../model/member';
+import { MemberService } from '../service/member.service';
+
+import {
+  Signup,
+  SignupSuccess,
+  SignupFailure,
+  ActionType,
+} from './signup.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private memberService: MemberService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  signup$: Observable<Action> = this.actions$
+    .ofType(ActionType.Signup)
+    .map((action: Signup) => action.payload)
+    .exhaustMap(payload =>
+      this.memberService
+        .signup(payload.member)
+        .map(member => new SignupSuccess({ member }))
+        .catch(error => of(new SignupFailure(error)))
+    );
+
+    @Effect({ dispatch: false })
+    signupSuccess$ = this.actions$
+      .ofType(ActionType.SignupSuccess)
+      .do(() => this.router.navigate(['/']));
+
+}

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

@@ -0,0 +1,45 @@
+import {
+  Actions,
+  ActionType,
+} from './signup.action';
+
+import {
+  State,
+  initialState,
+} from './signup.state';
+
+import { Member } from '../model/member';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Signup: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.SignupSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        member: action.payload.member,
+      };
+    }
+
+    case ActionType.SignupFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        member: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Member } from '../model/member';
+
+export interface State {
+  error: string | null;
+  isPending: boolean;
+  member: Member | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  member: null,
+};
+
+export const getMember = (state: State) => state.member;
+export const getError = (state: State) => state.error;
+export const isPending = (state: State) => state.isPending;

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

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

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

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

src/app/packages/sensor-item/component/list/list.component.spec.ts

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

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

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

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

@@ -1,17 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ModifyComponent } from './modify.component';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
 
 
 @NgModule({
   imports: [
     CommonModule,
+    MaterialModule,
   ],
   declarations: [
-    ModifyComponent,
   ],
   exports: [
-    ModifyComponent
   ]
 })
-export class ModifyModule { }
+export class SensorItemModule { }

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

@@ -2,15 +2,19 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthPageComponent } from './auth-page.component';
 
+import { SigninPageComponent } from './signin/signin-page.component';
+import { SignupPageComponent } from './signup/signup-page.component';
+import { ResetPasswordPageComponent } from './reset-password/reset-password-page.component';
+
 const routes: Routes = [
   {
     path: '',
     component: AuthPageComponent,
     children: [
       { path: '', redirectTo: 'signin' },
-      { path: 'signin', loadChildren: './signin/signin-page.module#SigninPageModule' },
-      { path: 'signup', loadChildren: './signup/signup-page.module#SignupPageModule' },
-      { path: 'reset-password', loadChildren: './reset-password/reset-password-page.module#ResetPasswordPageModule' },
+      { path: 'signin', component: SigninPageComponent },
+      { path: 'signup', component: SignupPageComponent },
+      { path: 'reset-password', component: ResetPasswordPageComponent },
     ]
   }
 ];

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

@@ -1,15 +1,30 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MemberModule } from 'app/packages/member/member.module';
+
 import { AuthPageComponent } from './auth-page.component';
 import { AuthPageRoutingModule } from './auth-page-routing.module';
 
+import { SigninPageComponent } from './signin/signin-page.component';
+import { SignupPageComponent } from './signup/signup-page.component';
+import { ResetPasswordPageComponent } from './reset-password/reset-password-page.component';
+
+export const COMPONENTS = [
+  AuthPageComponent,
+  SigninPageComponent,
+  SignupPageComponent,
+  ResetPasswordPageComponent,
+];
+
 @NgModule({
   imports: [
     CommonModule,
     AuthPageRoutingModule,
+    MemberModule,
   ],
-  declarations: [
-    AuthPageComponent,
-  ]
+  declarations: COMPONENTS,
 })
 export class AuthPageModule { }

src/app/pages/auth/reset-password/reset-password-page-routing.module.ts

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

src/app/pages/auth/reset-password/reset-password-page.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ResetPasswordPageRoutingModule } from './reset-password-page-routing.module';
-import { ResetPasswordPageComponent } from './reset-password-page.component';
-import {ResetPasswordModule} from 'app/packages/member/component/reset-password/reset-password.module';
-import {FlexLayoutModule} from '@angular/flex-layout';
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ResetPasswordPageRoutingModule,
-    ResetPasswordModule,
-    FlexLayoutModule
-  ],
-  declarations: [
-    ResetPasswordPageComponent,
-  ]
-})
-export class ResetPasswordPageModule { }

src/app/pages/auth/signin/signin-page-routing.module.ts

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

src/app/pages/auth/signin/signin-page.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SigninPageRoutingModule } from './signin-page-routing.module';
-import { SigninPageComponent } from './signin-page.component';
-import { SigninModule } from 'app/packages/member/component/signin/signin.module';
-import { FlexLayoutModule } from '@angular/flex-layout';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    SigninPageRoutingModule,
-    SigninModule,
-    FlexLayoutModule
-  ],
-  declarations: [
-    SigninPageComponent,
-  ]
-})
-export class SigninPageModule { }

src/app/pages/auth/signup/signup-page-routing.module.ts

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

src/app/pages/auth/signup/signup-page.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SignupPageRoutingModule } from './signup-page-routing.module';
-import { SignupPageComponent } from './signup-page.component';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { SignupModule } from 'app/packages/member/component/signup/signup.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    SignupPageRoutingModule,
-    FlexLayoutModule,
-    SignupModule
-  ],
-  declarations: [
-    SignupPageComponent,
-  ]
-})
-export class SignupPageModule { }

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

@@ -14,10 +14,11 @@
 
     <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></of-sensor-item-filter>
+      <of-sensor-item-filter fxFlex="60"></of-sensor-item-filter>
     </div>
 
     <div fxLayout="row" fxLayoutWrap fxLayoutAlign="end">
+        <!-- <of-sensor-item-table></of-sensor-item-table> -->
         <button mat-raised-button (click)="openDialog()">대시보드에 추가</button>
     </div>
 

yarn.lock

@@ -1422,18 +1422,14 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
+commander@2, commander@^2.12.1, commander@^2.9.0, commander@~2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
 
 commander@2.12.x:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
-commander@^2.12.1, commander@^2.9.0, commander@~2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
-
 common-tags@^1.3.1:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.7.2.tgz#24d9768c63d253a56ecff93845b44b4df1d52771"