probe list/detail/noauth..

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'] },
+                    { label: 'Probes', icon: 'dock', routerLink: ['/probes/list'] },
                 ]
             },
             {

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

@@ -1,5 +1 @@
-<p-tabView (onChange)="handleChange($event)">
-    <p-tabPanel [header]="tab.label" *ngFor="let tab of tabs; let i = index" [selected]="i == 0" [leftIcon]="tab.icon" [disabled]="tab.disabled">
-        <router-outlet></router-outlet>
-    </p-tabPanel>
-</p-tabView>
+<p-tabMenu [model]="tabs"></p-tabMenu>

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

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Language } from 'angular-l10n';
 
@@ -6,17 +6,11 @@ import { Language } from 'angular-l10n';
   selector: 'of-tabbar',
   templateUrl: './app.tabbar.component.html',
 })
-export class TabbarComponent implements AfterViewInit {
+export class TabbarComponent implements OnInit {
   @Input() tabs: any;
 
   constructor(public router: Router) { }
 
-  ngAfterViewInit() {
-  }
-
-  handleChange(event) {
-    const path: string = this.tabs[event.index].path;
-    if (path.length === 0) { return; }
-    this.router.navigate([path]);
+  ngOnInit() {
   }
 }

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

@@ -9,9 +9,9 @@ const routes: Routes = [
     path: '',
     component: ProbePageComponent,
     children: [
-      { path: ':id', component: ProbeDetailComponent },
-      // { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
-      // { path: ':id/history', component: null },
+      { path: ':id/info', component: ProbeDetailComponent },
+      { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
+      { path: ':id/history', component: null },
     ]
   }
 ];

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

@@ -1 +1,3 @@
-<of-tabbar [tabs]="tabs"></of-tabbar> 
+<of-tabbar [tabs]="tabs">
+</of-tabbar>
+<router-outlet></router-outlet>

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

@@ -15,10 +15,16 @@ export class ProbePageComponent implements OnInit {
   ngOnInit() {
     const id = this.router.url.split('probe/')[1].split('/')[0];
 
+    // this.tabs = [
+    //   { label: 'Probe Info', path: '/probe/' + id, icon: 'fa-check' },
+    //   { label: 'Targets', path: '/probe/' + id + '/targets', icon: 'fa-check' },
+    //   { label: 'History', path: '/probe/' + id + '/history', icon: 'fa-check', disabled: true },
+    // ];
+
     this.tabs = [
-      { label: 'Probe Info', path: '/probe/' + id, icon: 'fa-check' },
-      { label: 'Targets', path: '/probe/' + id + '/targets', icon: 'fa-check' },
-      { label: 'History', path: '/probe/' + id + '/history', icon: 'fa-check', disabled: true },
+      { label: 'Info', routerLink: ['/probe/', id, 'info'], path: '/probe/' + id, icon: 'fa-check' },
+      { label: 'Targets', routerLink: ['/probe/', id, 'targets'], icon: 'fa-check' },
+      { label: 'History', routerLink: ['/probe/', id, 'history'], icon: 'fa-check', disabled: true },
     ];
   }
 

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

@@ -10,7 +10,7 @@ const routes: Routes = [
     path: '',
     component: ProbesPageComponent,
     children: [
-      { path: '', component: ProbeListComponent },
+      { path: 'list', component: ProbeListComponent },
       { path: 'noauth', component: NoauthListComponent },
       { path: 'download', component: DownloadComponent },
     ]

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

@@ -1 +1,3 @@
-<of-tabbar [tabs]="tabs"></of-tabbar> 
+<of-tabbar [tabs]="tabs">
+</of-tabbar> 
+<router-outlet></router-outlet>

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

@@ -7,11 +7,12 @@ import { Component, OnInit } from '@angular/core';
 export class ProbesPageComponent  {
 
   tabs = [
-    { label: 'Probe', path: '/probes' },
-    { label: 'Unauthorized', path: '/probes/noauth' },
-    { label: 'Download', path: '/probes/download' },
+    { label: 'PROBES', routerLink: ['/probes/list'] },
+    { label: 'UNAUTHORIZED', routerLink: ['/probes/noauth'] },
+    { label: 'DOWNLOAD', routerLink: ['/probes/download'] },
   ];
 
+
   constructor() { }
 
 }

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component';
+import { TargetsPageComponent } from 'app/pages/targets/targets-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TargetsPageComponent,
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TargetsPageRoutingModule { }

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

@@ -0,0 +1,2 @@
+<div>targets page</div>
+<!-- <of-target-list></of-target-list> -->

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

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

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

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-pages-targets',
+  templateUrl: './targets-page.component.html',
+})
+export class TargetsPageComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// import { TargetModule } from 'packages/target/target.module';
+import { TargetsPageRoutingModule } from './targets-page-routing.module';
+import { TargetsPageComponent } from './targets-page.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TargetsPageRoutingModule,
+    // TargetModule,
+  ],
+  declarations: [
+    TargetsPageComponent
+  ]
+})
+export class TargetsPageModule { }

src/packages/noauth/component/list/list.component.html

@@ -1 +1,31 @@
-<div>unauthorized probes</div>
+<p-table [value]="noauthProbes" selectionMode="single" [(selection)]="selected" [resizableColumns]="true">
+    <ng-template pTemplate="header" let-columns>
+        <tr>
+            <th style="width: 3.25em" pResizableColumn></th>
+            <th>Probe Key</th>
+            <th>Description</th>
+            <th>Created at</th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-probe>
+        <tr [pSelectableRow]="probe">
+            <td>
+                <p-tableRadioButton [value]="probe"></p-tableRadioButton>
+            </td>
+            <td>{{probe.tempProbeKey}}</td>
+            <td>{{probe.description}}</td>
+            <td>{{probe.createDate | date: 'dd/MM/yyyy'}}</td>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="footer" let-columns>
+        <tr>
+            <td colspan="3">
+                <button [disabled]="!selected" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
+                <button [disabled]="!selected" class="ui-button-danger" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
+            </td>
+        </tr>
+    </ng-template>
+</p-table>
+
+<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
+<p-growl [(value)]="msgs"></p-growl>

src/packages/noauth/component/list/list.component.ts

@@ -2,27 +2,31 @@ import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
-
 import { AuthSelector } from 'packages/member/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import { Domain } from 'packages/domain/model';
-
 import * as ListStore from '../../store/noauth-probe';
 import { NoAuthProbeSelector } from '../../store';
 import { NoAuthProbe } from '../../model';
+import { ConfirmationService, Message } from 'primeng/primeng';
+import { MessageService } from 'primeng/components/common/messageservice';
 
 @Component({
   selector: 'of-noauth-list',
   templateUrl: './list.component.html',
+  providers: [ConfirmationService, MessageService]
 })
 export class ListComponent implements OnInit, AfterContentInit {
   noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
-
+  noauthProbes: NoAuthProbe[];
   selected: NoAuthProbe = null;
+  msgs: Message[];
 
   constructor(
     private router: Router,
-    private store: Store<ListStore.State>
+    private store: Store<ListStore.State>,
+    private confirmationService: ConfirmationService,
+    private messageService: MessageService
   ) {
   }
 
@@ -43,20 +47,53 @@ export class ListComponent implements OnInit, AfterContentInit {
   }
 
   ngOnInit() {
+    // Temporary Data
+    this.noauthProbes = new Array();
+    for (let i = 0; i < 10; i++) {
+      const p: NoAuthProbe = {
+        id: i,
+        tempProbeKey: 'TempKey' + i,
+        createDate: new Date(),
+        description: 'Description' + i,
+      };
+      this.noauthProbes.push(p);
+    }
   }
 
   handleSelect(selected: NoAuthProbe) {
     this.selected = selected;
   }
 
+  onAcceptOrDeny(isAccept: boolean) {
+    this.msgs = [];
+    const title = isAccept ?
+      'Are you sure to accept this Probe?' : 'Are you sure to deny this Probe';
+    const message = isAccept ?
+      'Start collecting data as a Probe.' : 'It will be permanently deleted.';
+
+    this.confirmationService.confirm({
+      header: title,
+      message: message,
+      icon: isAccept ? 'fa-check' : 'fa fa-trash',
+      accept: () => {
+        isAccept ? this.handleAccept() : this.handleDeny();
+        this.msgs.push({ severity: 'error', summary: 'Failed', detail: '연동 안했지롱' });
+      },
+      reject: () => {
+      }
+    });
+  }
+
   handleAccept() {
     this.store.dispatch(new ListStore.Accept(this.selected));
     this.noAuthProbes$.subscribe(
       (noAuthProbes: NoAuthProbe[]) => {
-
+        if (noAuthProbes) {
+          this.msgs.push({ severity: 'success', summary: 'Success', detail: '개굿' });
+        }
       },
       (error: RPCClientError) => {
-        console.log(error.response.message);
+        this.msgs.push({ severity: 'error', summary: 'Failed', detail: error.response.message });
       }
     );
   }
@@ -65,10 +102,12 @@ export class ListComponent implements OnInit, AfterContentInit {
     this.store.dispatch(new ListStore.Deny(this.selected));
     this.noAuthProbes$.subscribe(
       (noAuthProbes: NoAuthProbe[]) => {
-
+        if (noAuthProbes) {
+          this.msgs.push({ severity: 'success', summary: 'Success', detail: '개굿' });
+        }
       },
       (error: RPCClientError) => {
-        console.log(error.response.message);
+        this.msgs.push({ severity: 'error', summary: 'Failed', detail: error.response.message });
       }
     );
   }

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

@@ -5,7 +5,7 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import * as DetailStore from '../../store/detail';
 import { DetailSelector } from '../../store';
 import { Probe } from '../../model';
-import { ConfirmationService, Message } from 'primeng/primeng';
+import { ConfirmationService } from 'primeng/primeng';
 import * as CIDR from 'ip-cidr';
 // import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
 

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

@@ -1,15 +1,16 @@
-<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAglign="center">
-  <div fxFlex.xs="100" fxFlex.lg="20" fxFlex.md="20" fxFlex.sm="20" >
-    <div class="tab">
-      <button class="tablinks" *ngFor="let os of OS_LIST" (click)="handleTabSelection(os)" >{{os}}</button>
-    </div>
-  </div>
-
-  <div fxFlex.xs="100" fxFlex.lg="80" fxFlex.md="80" fxFlex.sm="80">
-    <div class="tabcontent">
-      <div *ngIf="selected == 'Windows' || selected==undefined">Windows Manual</div>
-      <div *ngIf="selected == 'Ubuntu'">Ubuntu Manual</div>
-      <div *ngIf="selected == 'CentOS'">CentOS Manual</div>
-    </div>
-  </div>
-</div>
+<p-tabView orientation="left">
+  <!-- 
+    <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>
+  <p-tabPanel header="Ubuntu" >
+    Content 2
+  </p-tabPanel>
+  <p-tabPanel header="CentOS">
+    Content 3
+  </p-tabPanel>
+</p-tabView>

src/packages/probe/component/download/download.component.scss

@@ -1,36 +0,0 @@
-.tab {
-    border: 1px solid #ccc;
-    background-color: #f1f1f1;
-    height: 100%;
-}
-
-/* Style the buttons that are used to open the tab content */
-.tab button {
-    display: block;
-    background-color: inherit;
-    color: black;
-    padding: 22px 16px;
-    width: 100%;
-    border: none;
-    outline: none;
-    text-align: left;
-    cursor: pointer;
-    transition: 0.3s;
-}
-
-/* Change background color of buttons on hover */
-.tab button:hover {
-    background-color: #ddd;
-}
-
-/* Create an active/current "tab button" class */
-.tab button.active {
-    background-color: #ccc;
-}
-
-/* Style the tab content */
-.tabcontent {
-    padding: 0px 12px;
-    border: 1px solid #ccc;
-    height: 100%;
-}

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

@@ -7,21 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DownloadComponent implements OnInit {
 
-  selected: string = undefined;
-
-  OS_LIST = [
-    'Windows',
-    'Ubuntu',
-    'CentOS',
-  ];
-
   constructor() { }
 
   ngOnInit() {
   }
-
-  handleTabSelection(osName: string) {
-    console.log(osName);
-    this.selected = osName;
-  }
 }

src/packages/probe/component/list/list.component.html

@@ -1,14 +1,11 @@
-<p-table [value]="probes" selectionMode="single" [(selection)]="selectedProbe" (onRowSelect)="onRowSelect($event)">
+<p-table [value]="probes" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
   <ng-template pTemplate="header">
-    <ng-template pTemplate="caption">
-      Recent Sales
-    </ng-template>
     <tr>
       <th>Probe Name</th>
       <th>IP</th>
       <th>OS</th>
       <th>CIDR</th>
-      <th>Targets</th>
+      <th pResizableColumn>Targets</th>
       <th>Authroized at</th>
       <th>Authroized by</th>
     </tr>

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

@@ -18,9 +18,6 @@ import { ListSelector } from '../../store';
 export class ListComponent implements OnInit, AfterContentInit {
   probes$ = this.store.pipe(select(ListSelector.select('probes')));
   probes: Probe[];
-  cols: any[];
-
-  selectedProbe: Probe;
 
   constructor(
     private router: Router,
@@ -70,6 +67,6 @@ export class ListComponent implements OnInit, AfterContentInit {
   }
 
   onRowSelect(event) {
-    this.router.navigate(['probe', event.data.id]);
+    this.router.navigate(['probe', event.data.id, 'info']);
   }
 }