overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

probes tab bug

Browse Source
This commit is contained in:
insanity 2018-04-11 15:20:23 +09:00
parent 2c1dd69ce5
commit df15cd56a9
17 changed files with 168 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/commons/component/layout/tabbar/app.tabbar.module.ts Normal file
View File

@ -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 {
}

4
src/app/pages/probe/probe-page.module.ts
View File

@ -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 { }

9
src/app/pages/probes/probes-page-routing.module.ts
View File

@ -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 },
]
}
];

2
src/app/pages/probes/probes-page.component.html
View File

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

6
src/app/pages/probes/probes-page.module.ts
View File

@ -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,

8
src/packages/noauth/component/index.ts
View File

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

39
src/packages/noauth/component/list/list.component.html
View File

@ -1,38 +1 @@
<div fxLayoutAlign="end" [style.margin]="'10px'" fxLayoutGap="10px">
<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>
<div>unauthorized probes</div>

0
src/packages/noauth/component/list/list.component.scss
View File

137
src/packages/noauth/component/list/list.component.ts
View File

@ -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<NoAuthProbe>;
// @ViewChild(MatSort) sort: MatSort;
constructor(
private router: Router,
private store: Store<ListStore.State>
) {
}
// constructor(
// 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));
// }
// );
// 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);
}
);
}
}

47
src/packages/noauth/noauth.module.ts
View File

@ -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 { }

42
src/packages/probe/component/detail/detail.component.html
View File

@ -1,37 +1,5 @@
<div>probe detail info</div>
<!-- <div *ngIf="probe !== null">
<div>
<h3>{{probe.displayName}}</h3>
</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> -->
<div>
<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>

0
src/packages/probe/component/detail/detail.component.scss
View File

114
src/packages/probe/component/detail/detail.component.ts
View File

@ -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() {
// 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: () => {
}
});
}
}

6
src/packages/probe/component/list/list.component.html
View File

@ -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>

14
src/packages/probe/component/list/list.component.scss
View File

@ -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;
}

46
src/packages/probe/component/list/list.component.ts
View File

@ -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(
(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]);
}
}

2
src/packages/probe/probe.module.ts
View File

@ -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: [