probes tab bug

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

@@ -0,0 +1,19 @@
+import { NgModule, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TabbarComponent } from './app.tabbar.component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrimeNGModules,
+  ],
+  declarations: [
+    TabbarComponent,
+  ],
+  exports: [
+    TabbarComponent,
+  ],
+})
+export class TabbarModule {
+}

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

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

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

@@ -2,9 +2,8 @@ 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 { ListComponent as NoauthListComponent } from 'packages/noauth/component/list/list.component';
-// import { DownloadComponent } from 'packages/probe/component/download/download.component';
+import { DownloadComponent } from 'packages/probe/component/download/download.component';
-// import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component';
 
 const routes: Routes = [
   {
@@ -12,8 +11,8 @@ const routes: Routes = [
     component: ProbesPageComponent,
     children: [
       { path: '', component: ProbeListComponent },
-      // { path: 'noauth', component: NoauthListComponent },
+      { path: 'noauth', component: NoauthListComponent },
-      // { path: 'download', component: DownloadComponent },
+      { path: 'download', component: DownloadComponent },
     ]
   }
 ];

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

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

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

@@ -1,16 +1,18 @@
 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 { NoauthModule } from 'packages/noauth/noauth.module';
 import { ProbesPageComponent } from './probes-page.component';
 import { ProbesPageRoutingModule } from './probes-page-routing.module';
+import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
 
 @NgModule({
   imports: [
     CommonModule,
     ProbesPageRoutingModule,
+    TabbarModule,
     ProbeModule,
-    // NoauthModule,
+    NoauthModule,
   ],
   declarations: [
     ProbesPageComponent,

src/packages/noauth/component/index.ts

@@ -1,5 +1,5 @@
-// import { ListComponent } from './list/list.component';
+import { ListComponent } from './list/list.component';
 
-// export const COMPONENTS = [
+export const COMPONENTS = [
-//   ListComponent,
+    ListComponent,
-// ];
+];

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

@@ -1,38 +1 @@
-<div fxLayoutAlign="end" [style.margin]="'10px'" fxLayoutGap="10px">
+<div>unauthorized probes</div>
-  <button mat-raised-button color="primary" (click)="handleAccept()" [disabled]="selected == null">Accept</button>
-  <button mat-raised-button color="warn" (click)="handleDeny()" [disabled]="selected == null">Deny</button>
-</div>
-<div class="example-container mat-elevation-z8">
-  <mat-table #table [dataSource]="dataSource" matSort>
-
-
-    <ng-container matColumnDef="select">
-      <mat-header-cell *matHeaderCellDef></mat-header-cell>
-      <mat-cell *matCellDef="let row">
-          <mat-radio-button (change)="handleSelect(row)"></mat-radio-button>
-      </mat-cell>
-    </ng-container>
-
-
-    <ng-container matColumnDef="id">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="description">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="createDate">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Created At </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.createDate.toLocaleString()}} </mat-cell>
-    </ng-container>
-
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-  </mat-table>
-
-  <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
-  </mat-paginator>
-</div>

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

@@ -1,37 +1,32 @@
-// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
-// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
-// import { Router } from '@angular/router';
+import { Router } from '@angular/router';
-// import { Store, select } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
 
-// import { AuthSelector } from 'packages/member/store';
+import { AuthSelector } from 'packages/member/store';
-// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
-// import { Domain } from 'packages/domain/model';
+import { Domain } from 'packages/domain/model';
 
-// import * as ListStore from '../../store/noauth-probe';
+import * as ListStore from '../../store/noauth-probe';
-// import { NoAuthProbeSelector } from '../../store';
+import { NoAuthProbeSelector } from '../../store';
-// import { NoAuthProbe } from '../../model';
+import { NoAuthProbe } from '../../model';
 
-// @Component({
+@Component({
-//   selector: 'of-noauth-list',
+  selector: 'of-noauth-list',
-//   templateUrl: './list.component.html',
+  templateUrl: './list.component.html',
-//   styleUrls: ['./list.component.scss']
+})
-// })
+export class ListComponent implements OnInit, AfterContentInit {
-// export class ListComponent implements OnInit, AfterContentInit {
+  noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
-//   noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
 
-//   selected: NoAuthProbe = null;
+  selected: NoAuthProbe = null;
 
-//   displayedColumns = ['select', 'id', 'description', 'createDate'];
+  constructor(
-//   dataSource: MatTableDataSource<NoAuthProbe>;
+    private router: Router,
-//   @ViewChild(MatSort) sort: MatSort;
+    private store: Store<ListStore.State>
+  ) {
+  }
 
-//   constructor(
+  ngAfterContentInit() {
-//     private router: Router,
-//     private store: Store<ListStore.State>
-//   ) {
-//   }
-
-//   ngAfterContentInit() {
     // this.store.select(AuthSelector.select('domain')).subscribe(
     //   (domain: Domain) => {
     //     this.store.dispatch(new ListStore.ReadAllByDomain(domain));
@@ -40,49 +35,41 @@
 
     // this.noAuthProbes$.subscribe(
     //   (noAuthProbes: NoAuthProbe[]) => {
-//         this.dataSource = new MatTableDataSource(noAuthProbes);
-//         this.dataSource.sort = this.sort;
     //   },
     //   (error: RPCClientError) => {
     //     console.log(error.response.message);
     //   }
     // );
-//   }
+  }
 
+  ngOnInit() {
+  }
 
+  handleSelect(selected: NoAuthProbe) {
+    this.selected = selected;
+  }
 
-//   ngOnInit() {
+  handleAccept() {
-//   }
+    this.store.dispatch(new ListStore.Accept(this.selected));
+    this.noAuthProbes$.subscribe(
+      (noAuthProbes: NoAuthProbe[]) => {
 
-//   handleSelect(selected: NoAuthProbe) {
+      },
-//     this.selected = selected;
+      (error: RPCClientError) => {
-//   }
+        console.log(error.response.message);
+      }
+    );
+  }
 
-//   handleAccept() {
+  handleDeny() {
-//     this.store.dispatch(new ListStore.Accept(this.selected));
+    this.store.dispatch(new ListStore.Deny(this.selected));
-//     this.noAuthProbes$.subscribe(
+    this.noAuthProbes$.subscribe(
-//       (noAuthProbes: NoAuthProbe[]) => {
+      (noAuthProbes: NoAuthProbe[]) => {
-//         this.dataSource = new MatTableDataSource(noAuthProbes);
-//         this.dataSource.sort = this.sort;
-//       },
-//       (error: RPCClientError) => {
-//         console.log(error.response.message);
-//       }
-//     );
-//     console.log(this.selected.id + ' accept');
-//   }
 
-//   handleDeny() {
+      },
-//     this.store.dispatch(new ListStore.Deny(this.selected));
+      (error: RPCClientError) => {
-//     this.noAuthProbes$.subscribe(
+        console.log(error.response.message);
-//       (noAuthProbes: NoAuthProbe[]) => {
+      }
-//         this.dataSource = new MatTableDataSource(noAuthProbes);
+    );
-//         this.dataSource.sort = this.sort;
+  }
-//       },
+}
-//       (error: RPCClientError) => {
-//         console.log(error.response.message);
-//       }
-//     );
-//     console.log(this.selected.id + ' deny');
-//   }
-// }

src/packages/noauth/noauth.module.ts

@@ -1,25 +1,24 @@
-// import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
-// import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NoAuthProbeStoreModule } from './noauth-probe-store.module';
+import { COMPONENTS } from './component';
+import { SERVICES } from './service';
+import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 
-// import { NoAuthProbeStoreModule } from './noauth-probe-store.module';
+@NgModule({
-
+  imports: [
-// import { COMPONENTS } from './component';
+    CommonModule,
-// import { SERVICES } from './service';
+    NoAuthProbeStoreModule,
-
+    PrimeNGModules
-// @NgModule({
+  ],
-//   imports: [
+  declarations: [
-//     CommonModule,
+    COMPONENTS,
-//     NoAuthProbeStoreModule,
+  ],
-//     MaterialModule
+  exports: [
-//   ],
+    COMPONENTS,
-//   declarations: [
+  ],
-//     COMPONENTS,
+  providers: [
-//   ],
+    SERVICES,
-//   exports: [
+  ]
-//     COMPONENTS,
+})
-//   ],
+export class NoauthModule { }
-//   providers: [
-//     SERVICES,
-//   ]
-// })
-// export class NoauthModule { }

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

@@ -1,37 +1,5 @@
-<div>probe detail info</div>
-
-<!-- <div *ngIf="probe !== null">
 <div>
-    <h3>{{probe.displayName}}</h3>
+  <button type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
+  <button class="ui-button-danger" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
+  <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
 </div>
-
-  <div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
-    <mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
-    <div>
-      <button mat-raised-button color="primary" (click)="discovery()">Discovery</button>
-    </div>
-  </div>
-
-  <div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center" [style.margin]="'20px'">
-    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-      <of-info-table [title]="'Title1'" [data]="networkInfo"></of-info-table>
-    </mat-card>
-    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-      <of-info-table [title]="'Title2'" [data]="deviceInfo"></of-info-table>
-    </mat-card>
-    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-      <of-info-table [title]="'Title3'" [data]="probeInfo"></of-info-table>
-    </mat-card>
-  </div>
-
-  <div fxLayoutAlign="end">
-    <button *ngIf="probe.status.id === 1" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
-    <button *ngIf="probe.status.id === 2" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
-
-    <button mat-raised-button color="warn" (click)="handleRemove()">Remove</button>
-  </div>
-</div>
-
-<div *ngIf="probe === null">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-</div> -->

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

@@ -1,34 +1,30 @@
 import { Component, OnInit, Inject, AfterContentInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
-
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
-
 import * as DetailStore from '../../store/detail';
 import { DetailSelector } from '../../store';
 import { Probe } from '../../model';
-// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+import { ConfirmationService, Message } from 'primeng/primeng';
 import * as CIDR from 'ip-cidr';
+// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+
 
 @Component({
   selector: 'of-probe-detail',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+  providers: [ConfirmationService]
 })
 export class DetailComponent implements OnInit, AfterContentInit {
 
   probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
   probe: Probe = null;
-  networkInfo = null;
-  deviceInfo = null;
-  probeInfo = null;
-
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    // public dialog: MatDialog,
+    private detailStore: Store<DetailStore.State>,
-    private detailStore: Store<DetailStore.State>
+    private confirmationService: ConfirmationService
   ) { }
 
   ngOnInit() {
@@ -56,100 +52,28 @@ export class DetailComponent implements OnInit, AfterContentInit {
   }
 
   arrangeInfo() {
-
     const cidr = new CIDR(this.probe.cidr);
     if (!cidr.isValid()) {
     }
     const startIP = cidr.addressStart.address;
     const endIP = cidr.addressEnd.address;
-
-    this.networkInfo = [
-      {
-        key: 'Probe IP Range',
-        value: startIP + '~' + endIP,
-      },
-      {
-        key: 'Installed IP',
-        value: '???',
-      },
-      {
-        key: 'NIC',
-        value: '???'
-      },
-      {
-        key: 'Targets',
-        value: 'count 반정규화 필요 '
-      },
-    ];
-    this.deviceInfo = [
-      {
-        key: 'OS',
-        value: 'Linux'
-      },
-      {
-        key: 'CPU',
-        value: 'intel7...'
-      },
-      {
-        key: 'Memory',
-        value: '16GB'
-      },
-      {
-        key: '...',
-        value: '...'
-      },
-    ];
-    this.probeInfo = [
-      {
-        key: 'Authorized at',
-        value: String(new Date(this.probe.authorizeDate))
-      },
-      {
-        key: 'Authorized by',
-        value: 'insanity'
-      },
-      {
-        key: 'Installed at',
-        value: String(new Date(this.probe.createDate))
-      },
-      {
-        key: 'Probe Key',
-        value: this.probe.probeKey,
-      },
-    ];
   }
 
-  discovery() {
+  onDiscoveryClick() {
-    // const dialogRef = this.dialog.open(DiscoverySettingComponent, {
+    alert('Discovery를 열거라 대훈');
-    //   width: '80%',
-    // });
-
-    // dialogRef.afterClosed().subscribe(result => {
-    //   console.log('The dialog was closed');
-
-    // });
   }
 
-
+  onRemoveClick() {
-  handleStartStop() {
+    this.confirmationService.confirm({
-    // this.isUpState = !this.isUpState;
+      header: 'Confirmation',
+      icon: 'fa fa-trash',
+      message: 'Are you sure to remove this Probe?',
+      accept: () => {
+        this.router.navigate(['probes']);
+      },
+      reject: () => {
       }
-
+    });
-  handleRemove() {
-    // const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-    //   width: '250px',
-    //   data: {
-    //     title: 'Remove',
-    //     message: 'Are you sure?'
-    //   }
-    // });
-
-    // dialogRef.afterClosed().subscribe(confirmed => {
-    //   if (confirmed) {
-    //     console.log('confirmed');
-    //   }
-    //   // 삭제 후 list로 back
-    // });
   }
 }
 

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

@@ -1,4 +1,4 @@
-<p-table [value]="probes" selectionMode="single" (onRowSelect)="onRowSelect($event)" dataKey="displayName">
+<p-table [value]="probes" selectionMode="single" [(selection)]="selectedProbe" (onRowSelect)="onRowSelect($event)">
   <ng-template pTemplate="header">
     <ng-template pTemplate="caption">
       Recent Sales
@@ -14,13 +14,13 @@
     </tr>
   </ng-template>
   <ng-template pTemplate="body" let-probe>
-    <tr>
+    <tr [pSelectableRow]="probe">
       <td>{{probe.displayName}}</td>
       <td>?</td>
       <td>?</td>
       <td>{{probe.cidr}}</td>
       <td>??</td>
-      <td>{{probe.authorizeDate}}</td>
+      <td>{{probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
       <td>{{probe.authorizeMember.name}}</td>
     </tr>
   </ng-template>

src/packages/probe/component/list/list.component.scss

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

@@ -14,13 +14,14 @@ import { ListSelector } from '../../store';
 @Component({
   selector: 'of-probe-list',
   templateUrl: './list.component.html',
-  styleUrls: ['./list.component.scss']
 })
 export class ListComponent implements OnInit, AfterContentInit {
   probes$ = this.store.pipe(select(ListSelector.select('probes')));
   probes: Probe[];
   cols: any[];
 
+  selectedProbe: Probe;
+
   constructor(
     private router: Router,
     private store: Store<ListStore.State>
@@ -29,35 +30,27 @@ export class ListComponent implements OnInit, AfterContentInit {
 
   ngAfterContentInit() {
 
-    this.store.select(AuthSelector.select('domain')).subscribe(
+    // this.store.select(AuthSelector.select('domain')).subscribe(
-      (domain: Domain) => {
+    //   (domain: Domain) => {
-        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+    //     this.store.dispatch(new ListStore.ReadAllByDomain(domain));
-      },
+    //   },
-      (error) => {
+    //   (error) => {
-        console.log(error);
+    //     console.log(error);
-      }
+    //   }
-    );
+    // );
 
-    this.probes$.subscribe(
+    // this.probes$.subscribe(
-      (probes: Probe[]) => {
+    //   (probes: Probe[]) => {
-        console.log(probes);
+    //     console.log(probes);
-      },
+    //   },
-      (error: RPCClientError) => {
+    //   (error: RPCClientError) => {
-        console.log(error.response.message);
+    //     console.log(error.response.message);
-      }
+    //   }
-    );
+    // );
 
   }
 
   ngOnInit() {
-    this.cols = [
-      { field: 'displayName', header: 'displayName' },
-      { field: 'createDate', header: 'createDate' },
-      { field: 'cidr', header: 'CIDR' },
-      { field: 'authorizeDate', header: 'authorizeDate' },
-      { field: 'authorizeMember', authorizeMember: 'Color' }
-    ];
-
     // Temporary data
     this.probes = new Array();
     for (let i = 0; i < 10; i++) {
@@ -77,7 +70,6 @@ export class ListComponent implements OnInit, AfterContentInit {
   }
 
   onRowSelect(event) {
-    console.log(event.data);
+    this.router.navigate(['probe', event.data.id]);
-    // this.router.navigate(['probe', obj.id]);
   }
 }

src/packages/probe/probe.module.ts

@@ -5,6 +5,7 @@ import { COMPONENTS } from './component';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
+import { FormsModule } from '@angular/forms';
 // import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
 // import { DiscoveryModule } from '../discovery/discovery.module';
 
@@ -14,6 +15,7 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
     CommonModule,
     PrimeNGModules,
     ProbeStoreModule,
+    FormsModule
     // DiscoveryModule
   ],
   declarations: [