test

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

@@ -27,7 +27,7 @@ export const menus = [
             },
             {
                 'name': 'Probes',
-                'link': '/probes',
+                'link': '/probe',
                 'icon': 'indeterminate_check_box',
                 'chip': false,
                 'open': false,

src/app/commons/layouts/sub-menubar/sub-menubar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
@@ -8,11 +8,7 @@ import { Router } from '@angular/router';
 })
 export class SubMenubarComponent implements OnInit {
 
-  tabs  = [
-    {label: 'Probe', path: '/probes'},
-    {label: 'Unauthorized', path: '/probes/noauth'},
-    {label: 'Download', path: '/probes/download'},
-  ];
+  @Input() tabs: any;
 
   constructor(public router: Router) { }
 

src/app/packages/probe/component/detail/detail.component.html

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

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

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

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

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

src/app/packages/probe/probe.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { ListComponent } from 'app/packages/probe/component/list/list.component';
 import { DownloadComponent } from 'app/packages/probe/component/download/download.component';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { DetailComponent } from 'app/packages/probe/component/detail/detail.component';
 
 @NgModule({
   imports: [
@@ -11,7 +12,8 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
   ],
   declarations: [
     ListComponent,
-    DownloadComponent
+    DownloadComponent,
+    DetailComponent
   ],
 })
 export class ProbeModule { }

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

@@ -9,7 +9,7 @@ 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: './probes/probes-page.module#ProbesPageModule' },
 
       { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
       { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },

src/app/pages/pages.component.html

@@ -26,7 +26,7 @@
                 <of-header [sidenav]="sidenav" [drawer]="drawer" [sidebar]="sidenav2" [matDrawerShow]="matDrawerShow" style="z-index: 500"></of-header>
 
                 <perfect-scrollbar style="height: calc(100% - 33px);">
-                    <div style="height: 100%;">
+                    <div style="height: 100%; padding: 0px 10px 0px 10px">
                         <router-outlet #route="outlet"></router-outlet>
                     </div>
                 </perfect-scrollbar>

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

@@ -4,6 +4,7 @@ import { ProbesPageComponent } from './probes-page.component';
 import { ListComponent as ProbeListComponent } from 'app/packages/probe/component/list/list.component';
 import { ListComponent as NoauthListComponent } from 'app/packages/noauth/component/list/list.component';
 import { DownloadComponent } from 'app/packages/probe/component/download/download.component';
+import { DetailComponent as ProbeDetailComponent } from 'app/packages/probe/component/detail/detail.component';
 
 const routes: Routes = [
   {
@@ -11,6 +12,7 @@ const routes: Routes = [
     component: ProbesPageComponent,
     children: [
       { path: '', component: ProbeListComponent },
+      { path: 'detail/:id', component: ProbeDetailComponent },
       { path: 'noauth', component: NoauthListComponent },
       { path: 'download', component: DownloadComponent },
     ]

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

@@ -1,4 +1,4 @@
 <div>
-  <of-sub-menubar></of-sub-menubar>
+  <of-sub-menubar [tabs]="tabs"></of-sub-menubar>
   <router-outlet></router-outlet>
 </div>

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

@@ -1,15 +1,25 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, Route } from '@angular/router';
 
 @Component({
   selector: 'of-pages-probes',
   templateUrl: './probes-page.component.html',
   styleUrls: ['./probes-page.component.scss']
 })
-export class ProbesPageComponent implements OnInit {
+export class ProbesPageComponent  {
 
-  constructor() { }
+  tabs = [
+    { label: 'Probe', path: '/probe' },
+    { label: 'Unauthorized', path: '/probe/noauth' },
+    { label: 'Download', path: '/probe/download' },
+  ];
 
-  ngOnInit() {
-  }
+  // tabs2 = [
+  //   { label: 'Info', path: '/probe/' },
+  //   { label: 'Targets', path: '/target' },
+  //   { label: 'History', path: '/probe/history' },
+  // ];
+
+  constructor(private router: Router) { }
 
 }