From df15cd56a9e90dd7a8de462af1a4d2031410af10 Mon Sep 17 00:00:00 2001 From: insanity Date: Wed, 11 Apr 2018 15:20:23 +0900 Subject: [PATCH] probes tab bug --- .../layout/tabbar/app.tabbar.module.ts | 19 +++ src/app/pages/probe/probe-page.module.ts | 4 +- .../probes/probes-page-routing.module.ts | 9 +- .../pages/probes/probes-page.component.html | 2 +- src/app/pages/probes/probes-page.module.ts | 6 +- src/packages/noauth/component/index.ts | 8 +- .../noauth/component/list/list.component.html | 39 +---- .../noauth/component/list/list.component.scss | 0 .../noauth/component/list/list.component.ts | 137 ++++++++---------- src/packages/noauth/noauth.module.ts | 47 +++--- .../component/detail/detail.component.html | 42 +----- .../component/detail/detail.component.scss | 0 .../component/detail/detail.component.ts | 114 +++------------ .../probe/component/list/list.component.html | 6 +- .../probe/component/list/list.component.scss | 14 -- .../probe/component/list/list.component.ts | 46 +++--- src/packages/probe/probe.module.ts | 2 + 17 files changed, 168 insertions(+), 327 deletions(-) create mode 100644 src/app/commons/component/layout/tabbar/app.tabbar.module.ts delete mode 100644 src/packages/noauth/component/list/list.component.scss delete mode 100644 src/packages/probe/component/detail/detail.component.scss delete mode 100644 src/packages/probe/component/list/list.component.scss diff --git a/src/app/commons/component/layout/tabbar/app.tabbar.module.ts b/src/app/commons/component/layout/tabbar/app.tabbar.module.ts new file mode 100644 index 0000000..8ce5896 --- /dev/null +++ b/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 { +} diff --git a/src/app/pages/probe/probe-page.module.ts b/src/app/pages/probe/probe-page.module.ts index 1ab87c5..a6573fb 100644 --- a/src/app/pages/probe/probe-page.module.ts +++ b/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 { } diff --git a/src/app/pages/probes/probes-page-routing.module.ts b/src/app/pages/probes/probes-page-routing.module.ts index 6b41277..1c2d220 100644 --- a/src/app/pages/probes/probes-page-routing.module.ts +++ b/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 { DownloadComponent } from 'packages/probe/component/download/download.component'; -// import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component'; +import { ListComponent as NoauthListComponent } from 'packages/noauth/component/list/list.component'; +import { DownloadComponent } from 'packages/probe/component/download/download.component'; const routes: Routes = [ { @@ -12,8 +11,8 @@ const routes: Routes = [ component: ProbesPageComponent, children: [ { path: '', component: ProbeListComponent }, - // { path: 'noauth', component: NoauthListComponent }, - // { path: 'download', component: DownloadComponent }, + { path: 'noauth', component: NoauthListComponent }, + { path: 'download', component: DownloadComponent }, ] } ]; diff --git a/src/app/pages/probes/probes-page.component.html b/src/app/pages/probes/probes-page.component.html index 7120181..7dfee1f 100644 --- a/src/app/pages/probes/probes-page.component.html +++ b/src/app/pages/probes/probes-page.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/probes/probes-page.module.ts b/src/app/pages/probes/probes-page.module.ts index 9453cdb..44a7424 100644 --- a/src/app/pages/probes/probes-page.module.ts +++ b/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, diff --git a/src/packages/noauth/component/index.ts b/src/packages/noauth/component/index.ts index 2642cab..bd78b54 100644 --- a/src/packages/noauth/component/index.ts +++ b/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 = [ -// ListComponent, -// ]; +export const COMPONENTS = [ + ListComponent, +]; diff --git a/src/packages/noauth/component/list/list.component.html b/src/packages/noauth/component/list/list.component.html index d84e594..7c49aee 100644 --- a/src/packages/noauth/component/list/list.component.html +++ b/src/packages/noauth/component/list/list.component.html @@ -1,38 +1 @@ -
- - -
-
- - - - - - - - - - - - - ID - {{element.id}} - - - - Description - {{element.description}} - - - - Created At - {{element.createDate.toLocaleString()}} - - - - - - - - -
\ No newline at end of file +
unauthorized probes
\ No newline at end of file diff --git a/src/packages/noauth/component/list/list.component.scss b/src/packages/noauth/component/list/list.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/packages/noauth/component/list/list.component.ts b/src/packages/noauth/component/list/list.component.ts index 9151979..25dbc13 100644 --- a/src/packages/noauth/component/list/list.component.ts +++ b/src/packages/noauth/component/list/list.component.ts @@ -1,88 +1,75 @@ -// 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 { 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 { 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 * as ListStore from '../../store/noauth-probe'; +import { NoAuthProbeSelector } from '../../store'; +import { NoAuthProbe } from '../../model'; -// @Component({ -// selector: 'of-noauth-list', -// templateUrl: './list.component.html', -// styleUrls: ['./list.component.scss'] -// }) -// export class ListComponent implements OnInit, AfterContentInit { -// noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes'))); +@Component({ + selector: 'of-noauth-list', + templateUrl: './list.component.html', +}) +export class ListComponent implements OnInit, AfterContentInit { + noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes'))); -// selected: NoAuthProbe = null; + selected: NoAuthProbe = null; -// displayedColumns = ['select', 'id', 'description', 'createDate']; -// dataSource: MatTableDataSource; -// @ViewChild(MatSort) sort: MatSort; + constructor( + private router: Router, + private store: Store + ) { + } -// constructor( -// private router: Router, -// private store: Store -// ) { -// } + ngAfterContentInit() { + // this.store.select(AuthSelector.select('domain')).subscribe( + // (domain: Domain) => { + // this.store.dispatch(new ListStore.ReadAllByDomain(domain)); + // } + // ); -// ngAfterContentInit() { -// this.store.select(AuthSelector.select('domain')).subscribe( -// (domain: Domain) => { -// this.store.dispatch(new ListStore.ReadAllByDomain(domain)); -// } -// ); + // this.noAuthProbes$.subscribe( + // (noAuthProbes: NoAuthProbe[]) => { + // }, + // (error: RPCClientError) => { + // console.log(error.response.message); + // } + // ); + } -// 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; + } + handleAccept() { + this.store.dispatch(new ListStore.Accept(this.selected)); + this.noAuthProbes$.subscribe( + (noAuthProbes: NoAuthProbe[]) => { -// ngOnInit() { -// } + }, + (error: RPCClientError) => { + console.log(error.response.message); + } + ); + } -// handleSelect(selected: NoAuthProbe) { -// this.selected = selected; -// } + handleDeny() { + this.store.dispatch(new ListStore.Deny(this.selected)); + this.noAuthProbes$.subscribe( + (noAuthProbes: NoAuthProbe[]) => { -// handleAccept() { -// this.store.dispatch(new ListStore.Accept(this.selected)); -// this.noAuthProbes$.subscribe( -// (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)); -// this.noAuthProbes$.subscribe( -// (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'); -// } -// } + }, + (error: RPCClientError) => { + console.log(error.response.message); + } + ); + } +} diff --git a/src/packages/noauth/noauth.module.ts b/src/packages/noauth/noauth.module.ts index 5289d73..e830483 100644 --- a/src/packages/noauth/noauth.module.ts +++ b/src/packages/noauth/noauth.module.ts @@ -1,25 +1,24 @@ -// import { NgModule } from '@angular/core'; -// import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +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'; - -// import { COMPONENTS } from './component'; -// import { SERVICES } from './service'; - -// @NgModule({ -// imports: [ -// CommonModule, -// NoAuthProbeStoreModule, -// MaterialModule -// ], -// declarations: [ -// COMPONENTS, -// ], -// exports: [ -// COMPONENTS, -// ], -// providers: [ -// SERVICES, -// ] -// }) -// export class NoauthModule { } +@NgModule({ + imports: [ + CommonModule, + NoAuthProbeStoreModule, + PrimeNGModules + ], + declarations: [ + COMPONENTS, + ], + exports: [ + COMPONENTS, + ], + providers: [ + SERVICES, + ] +}) +export class NoauthModule { } diff --git a/src/packages/probe/component/detail/detail.component.html b/src/packages/probe/component/detail/detail.component.html index f1033b1..f7f0653 100644 --- a/src/packages/probe/component/detail/detail.component.html +++ b/src/packages/probe/component/detail/detail.component.html @@ -1,37 +1,5 @@ -
probe detail info
- - \ No newline at end of file +
+ + + +
\ No newline at end of file diff --git a/src/packages/probe/component/detail/detail.component.scss b/src/packages/probe/component/detail/detail.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/packages/probe/component/detail/detail.component.ts b/src/packages/probe/component/detail/detail.component.ts index c2ec8b3..5b845ce 100644 --- a/src/packages/probe/component/detail/detail.component.ts +++ b/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 + private detailStore: Store, + 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() { - // const dialogRef = this.dialog.open(DiscoverySettingComponent, { - // width: '80%', - // }); - - // dialogRef.afterClosed().subscribe(result => { - // console.log('The dialog was closed'); - - // }); + onDiscoveryClick() { + alert('Discovery를 열거라 대훈'); } - - handleStartStop() { - // this.isUpState = !this.isUpState; - } - - 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 - // }); + onRemoveClick() { + this.confirmationService.confirm({ + header: 'Confirmation', + icon: 'fa fa-trash', + message: 'Are you sure to remove this Probe?', + accept: () => { + this.router.navigate(['probes']); + }, + reject: () => { + } + }); } } diff --git a/src/packages/probe/component/list/list.component.html b/src/packages/probe/component/list/list.component.html index dcceac7..dcc4ddd 100644 --- a/src/packages/probe/component/list/list.component.html +++ b/src/packages/probe/component/list/list.component.html @@ -1,4 +1,4 @@ - + Recent Sales @@ -14,13 +14,13 @@ - + {{probe.displayName}} ? ? {{probe.cidr}} ?? - {{probe.authorizeDate}} + {{probe.authorizeDate | date: 'dd.MM.yyyy'}} {{probe.authorizeMember.name}} diff --git a/src/packages/probe/component/list/list.component.scss b/src/packages/probe/component/list/list.component.scss deleted file mode 100644 index 54b8a22..0000000 --- a/src/packages/probe/component/list/list.component.scss +++ /dev/null @@ -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; - } \ No newline at end of file diff --git a/src/packages/probe/component/list/list.component.ts b/src/packages/probe/component/list/list.component.ts index 3ed92f2..1e286d4 100644 --- a/src/packages/probe/component/list/list.component.ts +++ b/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 @@ -29,35 +30,27 @@ export class ListComponent implements OnInit, AfterContentInit { ngAfterContentInit() { - this.store.select(AuthSelector.select('domain')).subscribe( - (domain: Domain) => { - this.store.dispatch(new ListStore.ReadAllByDomain(domain)); - }, - (error) => { - console.log(error); - } - ); + // this.store.select(AuthSelector.select('domain')).subscribe( + // (domain: Domain) => { + // this.store.dispatch(new ListStore.ReadAllByDomain(domain)); + // }, + // (error) => { + // console.log(error); + // } + // ); - this.probes$.subscribe( - (probes: Probe[]) => { - console.log(probes); - }, - (error: RPCClientError) => { - console.log(error.response.message); - } - ); + // this.probes$.subscribe( + // (probes: Probe[]) => { + // console.log(probes); + // }, + // (error: RPCClientError) => { + // 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', obj.id]); + this.router.navigate(['probe', event.data.id]); } } diff --git a/src/packages/probe/probe.module.ts b/src/packages/probe/probe.module.ts index 24a789f..cd1a6fe 100644 --- a/src/packages/probe/probe.module.ts +++ b/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: [