arranging

src/app/app-routing.module.ts

@@ -4,9 +4,9 @@ import { AuthGuard } from './commons/guard/auth.guard';
 
 const routes: Routes = [
   { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard]  },
-  // { path: '', loadChildren: './pages/pages.module#PagesModule'},
   { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
-  // { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' },
+  { path: 'error', loadChildren: './pages/error/error-page.module#ErrorPageModule' },
+  { path: '**', redirectTo: 'error' },
 ];
 
 @NgModule({

src/app/commons/component/layout/menu/app.menu.component.ts

@@ -24,7 +24,7 @@ export class AppMenuComponent implements OnInit {
                 label: 'Infra', icon: 'all_inclusive', items: [
                     { label: 'Map', icon: 'map', routerLink: ['/map'] },
                     { label: 'Sensors', icon: 'compare_arrows', routerLink: ['/sensors'] },
-                    { label: 'Probes', icon: 'dock', routerLink: ['/probes/list'] },
+                    { label: 'Probes', icon: 'dock', routerLink: ['/probe/list'] },
                 ]
             },
             {

src/app/commons/component/layout/topbar/app.topbar.component.html

@@ -129,7 +129,7 @@
             <li #messages [ngClass]="{'active-top-menu':app.activeTopbarItem === messages}">
                 <a href="#" (click)="app.onTopbarItemClick($event,messages)">
                     <i class="topbar-icon material-icons animated swing">notifications</i>
-                    <span class="topbar-badge animated rubberBand" *ngIf="notificationCount > 0">
+                    <span class="topbar-badge animated rubberBand" [hidden]="notificationCount > 0">
                         {{notificationCount}}
                     </span>
                     <span class="topbar-item-name">Notifications</span>

src/app/commons/component/layout/topbar/app.topbar.component.ts

@@ -18,7 +18,6 @@ export class AppTopbarComponent implements OnInit {
     }
 
     onNotiLoaded(count) {
-        console.log('count changed');
         this.notificationCount = count;
     }
 }

src/app/commons/service/breadcrumb.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+import { MenuItem } from 'primeng/primeng';
+
+@Injectable()
+export class BreadcrumbService {
+
+    private itemsSource = new Subject<MenuItem[]>();
+
+    itemsHandler = this.itemsSource.asObservable();
+
+    setItems(items: MenuItem[]) {
+        this.itemsSource.next(items);
+    }
+}

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

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

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

@@ -0,0 +1,4 @@
+Error Page
+
+
+<p-button label="Main" (onClick)="onNavigateMain()"></p-button>

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+
+@Component({
+  selector: 'of-pages-error',
+  templateUrl: './error-page.component.html',
+})
+
+export class ErrorPageComponent implements OnInit {
+
+
+  constructor(
+    private router: Router,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onNavigateMain() {
+    this.router.navigate(['home']);
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ErrorPageComponent } from './error-page.component';
+import { ErrorPageRoutingModule } from './error-page-routing.module';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ErrorPageRoutingModule,
+    PrimeNGModules,
+  ],
+  entryComponents: [
+  ],
+  declarations: [ErrorPageComponent]
+})
+export class ErrorPageModule { }

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

@@ -3,6 +3,10 @@
         <div class="ui-g-12">
             <div class="card no-margin">
                 <of-infra-map></of-infra-map>
+                <of-infra-map></of-infra-map>
+                <of-infra-map></of-infra-map>
+                <of-infra-map></of-infra-map>
+                <of-infra-map></of-infra-map>
             </div>
         </div>
     </div>

src/app/pages/pages-animation.ts

@@ -0,0 +1,27 @@
+import {
+  trigger,
+  animate,
+  transition,
+  style,
+  query,
+  stagger,
+  keyframes,
+  state,
+  group,
+} from '@angular/animations';
+
+export const fadeAnimation = trigger('pageRouteAnim', [
+  transition('* => *', [
+    query(':enter',
+      style({ opacity: 0 }), { optional: true }),
+    query(':enter',
+      stagger('300ms', [
+        animate('6s ease-in', keyframes([
+          style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }),
+          style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }),
+          style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
+        ]))]), { optional: true })
+  ])
+]);
+
+

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

@@ -9,21 +9,19 @@ const routes: Routes = [
     children: [
       { path: '', redirectTo: 'home' },
       { 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: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' },
-      // { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
-      { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
-      { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
-      { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
-      { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
-      { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },
-      { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' },
-      { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' },
-      { path: 'log', loadChildren: './log/log-page.module#LogPageModule' },
-      { path: 'account', loadChildren: './account/account-page.module#AccountPageModule' },
+      { path: 'probe', loadChildren: './probes/probe-tab-page.module#ProbeTabPageModule' },
       { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
+      { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
+      // { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' },
+      // { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' },
+      // { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
+      // { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
+      // { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
+      // { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },
+      // { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' },
+      // { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' },
+      // { path: 'log', loadChildren: './log/log-page.module#LogPageModule' },
+      // { path: 'account', loadChildren: './account/account-page.module#AccountPageModule' },
       // { path: 'settings/member', loadChildren: './settings/member/member-page.module#MemberPageModule' },
     ]
   }

src/app/pages/pages.component.html

@@ -20,11 +20,10 @@
         <div class="layout-main">
             <of-breadcrumb></of-breadcrumb>
 
-            <div class="layout-content">
-                <router-outlet></router-outlet>
+            <div class="layout-content" [@pageRouteAnim]="outlet.isActivated ? outlet.activatedRoute : ''">
+                <router-outlet #outlet="outlet"></router-outlet>
                 <of-footer></of-footer>
             </div>
-            
         </div>
 
         <of-rightpanel></of-rightpanel>

src/app/pages/pages.component.ts

@@ -1,7 +1,7 @@
 import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
 import { ScrollPanel } from 'primeng/primeng';
 import { Router } from '@angular/router';
-
+import { fadeAnimation } from './pages-animation';
 enum MenuOrientation {
   STATIC,
   OVERLAY,
@@ -12,7 +12,8 @@ enum MenuOrientation {
 @Component({
   selector: 'of-pages',
   templateUrl: './pages.component.html',
-  styleUrls: ['./pages.component.scss']
+  styleUrls: ['./pages.component.scss'],
+  animations: [ fadeAnimation ]
 })
 export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
   layoutCompact = true;
@@ -59,7 +60,8 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
   rippleMouseDownListener: any;
 
-  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) { }
+  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) {
+  }
 
   ngOnInit() {
     if (this.isAuthRouteActivated()) {
@@ -323,6 +325,11 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
     themeLink.href = 'assets/theme/theme-' + theme + '.css';
     layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
-}
+  }
+
+  prepareRouteTransition(outlet) {
+    const animation = outlet.activatedRouteData['animation'] || {};
+    return animation['value'] || null;
+  }
 
 }

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

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ProbePageComponent } from './probe-page.component';
-import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component';
-// import { ListComponent as TargetListComponent } from 'packages/target/component/list/list.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ProbePageComponent,
-    children: [
-      { path: ':id/info', component: ProbeDetailComponent },
-      { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
-      { path: ':id/history', component: null },
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ProbePageRoutingModule { }

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

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

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

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

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

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

src/app/pages/probes/download/download-page-routing.module.ts

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

src/app/pages/probes/download/download-page.component.html

@@ -0,0 +1 @@
+<of-download (select)="onSelect($event)" [index]="index"></of-download>

src/app/pages/probes/download/download-page.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-download',
+  templateUrl: './download-page.component.html',
+})
+export class ProbeDownloadPageComponent implements OnInit {
+
+  private index;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+    this.route.params.subscribe((params: any) => {
+      this.index = params['idx'];
+    });
+  }
+
+  onSelect(index) {
+    this.router.navigate(['/probe/download', index]);
+  }
+}

src/app/pages/probes/download/download-page.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { ProbeDownloadPageComponent } from './download-page.component';
+import { ProbeDownloadPageRoutingModule } from './download-page-routing.module';
+import { ProbeModule } from 'packages/probe/probe.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ProbeDownloadPageRoutingModule,
+    ProbeModule
+  ],
+  entryComponents: [
+  ],
+  declarations: [ProbeDownloadPageComponent]
+})
+export class ProbeDownloadPageModule { }

src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { NoAuthProbePageComponent } from './noauth-probe-page.component';
+import { ProbeListComponent } from 'packages/probe/component/list/list.component';
+import { ListComponent } from 'packages/noauth/component/list/list.component';
+import { ProbeDownloadComponent } from 'packages/probe/component/download/download.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NoAuthProbePageComponent,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NoAuthProbePageRoutingModule { }

src/app/pages/probes/noauth-probe/noauth-probe-page.component.html

@@ -0,0 +1,2 @@
+container로 교체
+<!-- <of-noauth-list></of-noauth-list> -->

src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-pages-noauth-probe',
+  templateUrl: './noauth-probe-page.component.html',
+})
+export class NoAuthProbePageComponent {
+
+  constructor(
+  ) {
+  }
+
+}

src/app/pages/probes/noauth-probe/noauth-probe-page.module.ts

@@ -1,21 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ProbeModule } from 'packages/probe/probe.module';
 import { NoauthModule } from 'packages/noauth/noauth.module';
-import { ProbesPageComponent } from './probes-page.component';
-import { ProbesPageRoutingModule } from './probes-page-routing.module';
+import { NoAuthProbePageComponent } from './noauth-probe-page.component';
+import { NoAuthProbePageRoutingModule } from './noauth-probe-page-routing.module';
 import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    ProbesPageRoutingModule,
+    NoAuthProbePageRoutingModule,
     TabbarModule,
-    ProbeModule,
     NoauthModule,
   ],
   declarations: [
-    ProbesPageComponent,
+    NoAuthProbePageComponent,
   ]
 })
-export class ProbesPageModule { }
+export class NoAuthProbePageModule { }

src/app/pages/probes/probe-tab-page-routing.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProbeTabPageComponent } from './probe-tab-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProbeTabPageComponent,
+    children: [
+      { path: 'list', loadChildren: './probe/probe-page.module#ProbePageModule' },
+      { path: 'noauth', loadChildren: './noauth-probe/noauth-probe-page.module#NoAuthProbePageModule' },
+      { path: 'download', loadChildren: './download/download-page.module#ProbeDownloadPageModule' },
+      { path: ':id/info', loadChildren: './probe/probe-page.module#ProbePageModule' },
+      // { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
+      { path: ':id/history', component: null },
+    ]
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProbeTabPageRoutingModule { }

src/app/pages/probes/probe-tab-page.component.html

@@ -9,4 +9,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

src/app/pages/probes/probe-tab-page.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ProbesPageComponent } from './probes-page.component';
+import { ProbeTabPageComponent } from './probe-tab-page.component';
 
-describe('ProbesComponent', () => {
-  let component: ProbesPageComponent;
-  let fixture: ComponentFixture<ProbesPageComponent>;
+describe('ProbeTabPageComponent', () => {
+  let component: ProbeTabPageComponent;
+  let fixture: ComponentFixture<ProbeTabPageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProbesPageComponent ]
+      declarations: [ ProbeTabPageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ProbesPageComponent);
+    fixture = TestBed.createComponent(ProbeTabPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pages/probes/probe-tab-page.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+  selector: 'of-pages-probe-tab',
+  templateUrl: './probe-tab-page.component.html',
+})
+export class ProbeTabPageComponent implements OnDestroy {
+
+  private tabs = undefined;
+  private routerSubscription$: Subscription;
+
+  constructor(
+    private router: Router
+  ) {
+    this.routerSubscription$ = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.generateTabMenu(event);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.routerSubscription$.unsubscribe();
+  }
+
+  generateTabMenu(event: NavigationEnd) {
+    try {
+      const parsedUrl = event.url.split('probe/')[1].split('/')[0];
+      switch (parsedUrl) {
+        case 'list':
+        case 'noauth':
+        case 'download':
+          this.tabs = [
+            { label: 'Probe', routerLink: ['/probe/list'] },
+            { label: 'UNAUTHORIZED', routerLink: ['/probe/noauth'] },
+            { label: 'DOWNLOAD', routerLink: ['/probe/download'] },
+          ];
+          break;
+        default:
+          this.tabs = [
+            { label: 'INFO', routerLink: ['/probe/', parsedUrl, 'info'] },
+            { label: 'TARGETS', path: ['/probe/', parsedUrl, 'targets'], disabled: true },
+            { label: 'HISTORY', path: ['/probe/', parsedUrl, 'history'], disabled: true },
+          ];
+          break;
+      }
+    } catch {
+      this.router.navigate(['error']);
+    }
+  }
+
+}

src/app/pages/probes/probe-tab-page.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ProbeTabPageComponent } from './probe-tab-page.component';
+import { ProbeTabPageRoutingModule } from './probe-tab-page-routing.module';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { ProbeModule } from 'packages/probe/probe.module';
+import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ProbeTabPageRoutingModule,
+    PrimeNGModules,
+    ProbeModule,
+    TabbarModule,
+  ],
+  declarations: [
+    ProbeTabPageComponent,
+  ]
+})
+export class ProbeTabPageModule { }

src/app/pages/probes/probe/probe-page-routing.module.ts

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

src/app/pages/probes/probe/probe-page.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="!isDetail; else detailView">
+    <of-probe-list-container (select)="onProbeSelect($event)"></of-probe-list-container>
+</div>
+
+<ng-template #detailView>
+    <of-probe-detail-container (targetSelect)="onTargetSelect($event)"></of-probe-detail-container>
+</ng-template>

src/app/pages/probes/probe/probe-page.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+import { Target } from '@overflow/commons-typescript/model/target';
+
+@Component({
+  selector: 'of-pages-probe',
+  templateUrl: './probe-page.component.html',
+})
+export class ProbePageComponent {
+
+  private isDetail: boolean;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
+    this.route.params.subscribe(params => {
+      this.isDetail = params['id'] ? true : false;
+    });
+  }
+
+  onProbeSelect(probe: Probe) {
+    this.router.navigate(['probe', probe.id, 'info']);
+  }
+
+  onTargetSelect(target: Target) {
+    console.log(target);
+  }
+}

src/app/pages/probes/probe/probe-page.module.ts

@@ -1,23 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-// import { ProbeModule } from 'packages/probe/probe.module';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { ProbePageComponent } from './probe-page.component';
 import { ProbePageRoutingModule } from './probe-page-routing.module';
-import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { ProbeModule } from 'packages/probe/probe.module';
-import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
     ProbePageRoutingModule,
-    PrimeNGModules,
-    ProbeModule,
-    TabbarModule
+    ProbeModule
   ],
-  declarations: [
-    ProbePageComponent,
-  ]
+  entryComponents: [
+  ],
+  declarations: [ProbePageComponent]
 })
 export class ProbePageModule { }

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

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ProbesPageComponent } from './probes-page.component';
-import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component';
-import { ListComponent as NoauthListComponent } from 'packages/noauth/component/list/list.component';
-import { DownloadComponent } from 'packages/probe/component/download/download.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ProbesPageComponent,
-    children: [
-      { path: 'list', component: ProbeListComponent },
-      { path: 'noauth', component: NoauthListComponent },
-      { path: 'download', component: DownloadComponent },
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ProbesPageRoutingModule { }

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

@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'of-pages-probes',
-  templateUrl: './probes-page.component.html',
-})
-export class ProbesPageComponent  {
-
-  tabs = [
-    { label: 'PROBES', routerLink: ['/probes/list'] },
-    { label: 'UNAUTHORIZED', routerLink: ['/probes/noauth'] },
-    { label: 'DOWNLOAD', routerLink: ['/probes/download'] },
-  ];
-
-
-  constructor() { }
-
-}

src/packages/probe/component/detail/detail.component.ts

@@ -18,7 +18,7 @@ import { MessageService } from 'primeng/components/common/messageservice';
   templateUrl: './detail.component.html',
   providers: [ConfirmationService, MessageService]
 })
-export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
   probeSubscription$: Subscription;
   probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
@@ -30,7 +30,6 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router,
     private detailStore: Store<DetailStore.State>,
     private modifyStore: Store<ModifyStore.State>,
     private confirmationService: ConfirmationService,
@@ -88,7 +87,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
       icon: 'fa fa-trash',
       message: 'Are you sure to remove this Probe?',
       accept: () => {
-        this.router.navigate(['probes/list']);
+        // this.router.navigate(['probes/list']);
       },
       reject: () => {
       }

src/packages/probe/component/download/download.component.html

@@ -1,17 +1,23 @@
 <h1>Download</h1>
-<p-tabView orientation="left">
+<p-tabView orientation="left" (onChange)="onChange($event)" [activeIndex]="index">
   <!-- 
     <p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
         {{item.content}}
     </p-tabPanel>
    -->
-  <p-tabPanel header="Windows" [selected]="true">
-    Content 1
+  <p-tabPanel header="Ubuntu">
+    <ng-template pTemplate="content">
+      Complex Content to Lazy Load1
+    </ng-template>
   </p-tabPanel>
-  <p-tabPanel header="Ubuntu" >
-    Content 2
+  <p-tabPanel header="Windows" >
+    <ng-template pTemplate="content">
+      Complex Content to Lazy Load2
+    </ng-template>
   </p-tabPanel>
   <p-tabPanel header="CentOS">
-    Content 3
+    <ng-template pTemplate="content">
+      Complex Content to Lazy Load3
+    </ng-template>
   </p-tabPanel>
 </p-tabView>

src/packages/probe/component/download/download.component.ts

@@ -1,13 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'of-download',
   templateUrl: './download.component.html',
 })
-export class DownloadComponent implements OnInit {
+export class ProbeDownloadComponent implements OnInit {
 
-  constructor() { }
+  @Input() index;
+  @Output() select = new EventEmitter();
+
+  constructor(
+  ) { }
 
   ngOnInit() {
   }
+
+  onChange(event) {
+    this.select.emit(event.index);
+  }
 }

src/packages/probe/component/index.ts

@@ -1,9 +1,16 @@
-import { DetailComponent } from './detail/detail.component';
-import { ListComponent } from './list/list.component';
-import { DownloadComponent } from './download/download.component';
+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 = [
-  ListComponent,
-  DetailComponent,
-  DownloadComponent,
+  ProbeListComponent,
+  ProbeDetailComponent,
+  ProbeDownloadComponent,
 ];

src/packages/probe/component/list/list.component.spec.ts

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

src/packages/probe/component/list/list.component.ts

@@ -1,6 +1,4 @@
-import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
-
+import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
@@ -16,13 +14,15 @@ import { Subscription } from 'rxjs/Subscription';
   selector: 'of-probe-list',
   templateUrl: './list.component.html',
 })
-export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ProbeListComponent implements OnInit, AfterContentInit, OnDestroy {
   probeHostsSubscription$: Subscription;
   probeHosts$ = this.store.pipe(select(ProbeHostListSelector.select('probeHosts')));
   probeHosts: ProbeHost[];
 
+  @Output() select = new EventEmitter<Probe>();
+  val;
+
   constructor(
-    private router: Router,
     private store: Store<ListStore.State>
   ) {
   }
@@ -30,7 +30,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   ngOnInit() {
     this.probeHostsSubscription$ = this.probeHosts$.subscribe(
       (probeHosts: ProbeHost[]) => {
-        console.log(probeHosts);
         this.probeHosts = probeHosts;
       },
       (error: RPCClientError) => {
@@ -40,14 +39,40 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit() {
-    this.store.select(AuthSelector.select('domain')).subscribe(
-      (domain: Domain) => {
-        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+    // this.store.select(AuthSelector.select('domain')).subscribe(
+    //   (domain: Domain) => {
+    //     this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // );
+
+    // temp
+    const probeHost: ProbeHost = {
+      id: 1,
+      probe: {
+        id: 1,
+        displayName: 'ddd',
+        cidr: 'dddd',
+        authorizeDate: new Date(),
+        authorizeMember: {
+          name: 'ddd'
+        }
       },
-      (error) => {
-        console.log(error);
+      host: {
+        id: 1,
+        ipv4: 'aaaa',
+        os: {
+          vendor: {
+            name: 'dd'
+          }
+        },
       }
-    );
+    };
+    this.probeHosts = [];
+    this.probeHosts.push(probeHost);
+
   }
 
   ngOnDestroy() {
@@ -57,7 +82,7 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   onRowSelect(event) {
-    this.router.navigate(['probe', event.data.probe.id, 'info']);
+    this.select.emit(event.data.probe);
   }
 
   getUptime(probe: Probe) {
@@ -65,7 +90,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     //   return 'Not Connected.';
     // }
     // const currentDate = new Date();
-
-    return 'Uptime구해와';
+    return 'Uptime';
   }
 }

src/packages/probe/container/probe-detail-container.html

@@ -0,0 +1 @@
+<of-probe-detail></of-probe-detail>

src/packages/probe/container/probe-detail-container.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'of-probe-detail-container',
+  templateUrl: './probe-detail-container.html',
+})
+export class ProbeDetailContainerComponent  {
+
+}

src/packages/probe/container/probe-list-container.html

@@ -0,0 +1 @@
+<of-probe-list (select)="onSelect($event)"></of-probe-list>

src/packages/probe/container/probe-list-container.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Probe } from '@overflow/commons-typescript/model/probe';
+
+@Component({
+  selector: 'of-probe-list-container',
+  templateUrl: './probe-list-container.html',
+})
+export class ProbeListContainerComponent  {
+    @Output() select = new EventEmitter();
+
+    onSelect(probe: Probe) {
+        this.select.emit(probe);
+    }
+}

src/packages/probe/probe.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { COMPONENTS } from './component';
+import { COMPONENTS, CONTAINERS } from './component';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
@@ -21,9 +21,11 @@ import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
     MetaCrawlerModule
   ],
   declarations: [
+    CONTAINERS,
     COMPONENTS,
   ],
   exports: [
+    CONTAINERS,
     COMPONENTS,
   ],
   providers: [

src/packages/probe/service/probe-host.service.ts

@@ -16,7 +16,7 @@ export class ProbeHostService {
   }
 
   public readByProbe(probe: Probe): Observable<Probe> {
-    return this.rpcService.call<Probe>('ProbeHostService.readByProbe', probe);
+    return this.rpcService.call<ProbeHost>('ProbeHostService.readByProbe', probe);
   }
 
   public readAllByDomain(domain: Domain): Observable<ProbeHost[]> {

src/styles.scss

@@ -318,4 +318,12 @@ body .ui-progressbar .ui-progressbar-value {
 }
 .font-s{
     font-size: 80%;
-}
+}
+
+
+.footer {
+    clear: both;
+    position: relative;
+    z-index: 10;
+    height: 3em;
+  }