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

ing

Browse Source
This commit is contained in:
geek 2018-06-11 18:16:12 +09:00
parent a3c866bb75
commit e908945d3e
10 changed files with 252 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
@overflow/target/component/detail/detail.component.html
View File

@ -1,51 +1,53 @@
<!--<div *ngIf="infra">-->
<!--<div *ngIf="infra.infraType.name == 'HOST'">-->
<!--<button pButton type="button" label="Traceroute" (click)="onTraceroute()"></button>-->
<!--</div>-->
<!--<div class="ui-g">--> <div *ngIf="target">
<!--<div class="ui-g-12">-->
<!--<div class="ui-inputgroup">--> <!--<div *ngIf="target.infraType.name == 'HOST'">-->
<!--<span class="md-inputfield">--> <!--<button pButton type="button" label="Traceroute" (click)="onTraceroute()"></button>-->
<!--<input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">--> <!--</div>-->
<!--<label></label>-->
<!--</span>--> <div class="ui-g">
<!--<button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>--> <div class="ui-g-12">
<!--</div>--> <div class="ui-inputgroup">
<!--</div>--> <span class="md-inputfield">
<!--<div class="ui-g-12">--> <input #input type="text" pInputText value="{{target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
<!--<p-panel [showHeader]="false">--> <label></label>
<!--<div class="ui-key-value">--> </span>
<!--<span>Status</span>--> <button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
<!--<span class="ng-star-inserted">--> </div>
<!--<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>--> </div>
<!--</div>--> <div class="ui-g-12">
<!--<of-key-value [key]="'Description'" [value]="infra.target.description" class="ui-key-value"></of-key-value>--> <p-panel [showHeader]="false">
<!--<of-key-value [key]="'Type'" [value]="infra.infraType.name" class="ui-key-value"></of-key-value>--> <div class="ui-key-value">
<!--<of-key-value [key]="'Created at'" [value]="infra.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>--> <span>Status</span>
<!--<of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value>--> <span class="ng-star-inserted">
<!--</p-panel>--> <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
<!--</div>--> </div>
<!--<div class="ui-g-12">--> <of-key-value [key]="'Description'" [value]="target.description" class="ui-key-value"></of-key-value>
<!--<div class="ui-g">--> <of-key-value [key]="'Type'" [value]="target.displayName" class="ui-key-value"></of-key-value>
<!--<div class="ui-g-12 ui-md-5 ui-g-nopad">--> <of-key-value [key]="'Created at'" [value]="target.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
<!--<of-key-value [key]="'Sensors'" [value]="target.sensorCount" class="ui-key-value"></of-key-value>-->
</p-panel>
</div>
<div class="ui-g-12">
<div class="ui-g">
<div class="ui-g-12 ui-md-5 ui-g-nopad">
<!--<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">--> <!--<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">-->
<!--<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="infra.target" (close)="onSensorSettingClose()"></of-sensor-setting>--> <!--<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="infra.target" (close)="onSensorSettingClose()"></of-sensor-setting>-->
<!--</p-dialog>--> <!--</p-dialog>-->
<!--<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>--> <!--<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>-->
<!--</div>--> </div>
<!--<div class="ui-g-12 ui-md-7 ui-g-nopad">--> <div class="ui-g-12 ui-md-7 ui-g-nopad">
<!--<div style="float: right; margin-top: 30px;">--> <div style="float: right; margin-top: 30px;">
<!--<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up--> <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
<!--<i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down--> <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down
<!--<i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn--> <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
<!--<i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error--> <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
<!--</div>--> </div>
<!--</div>--> </div>
<!--</div>--> </div>
<!--</div>--> </div>
<!--<div class="ui-g-12">--> <div class="ui-g-12">
<!--<p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">--> <!--<p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">-->
<!--<ng-template pTemplate="header">--> <!--<ng-template pTemplate="header">-->
<!--<tr>--> <!--<tr>-->
@ -67,6 +69,6 @@
<!--</ng-template>--> <!--</ng-template>-->
<!--</p-table>--> <!--</p-table>-->
<!--<p-paginator [rows]="pageSize" [totalRecords]="sensorsCount" (onPageChange)="onPaging($event)"></p-paginator>--> <!--<p-paginator [rows]="pageSize" [totalRecords]="sensorsCount" (onPageChange)="onPaging($event)"></p-paginator>-->
<!--</div>--> </div>
<!--</div>--> </div>
<!--</div>--> </div>

313
@overflow/target/component/detail/detail.component.ts
View File

@ -1,151 +1,200 @@
import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core'; import { Component, ViewChild, OnInit, Input } from '@angular/core';
import { Observable, of, Subscription } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import { Router, ActivatedRoute } from '@angular/router';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Infra } from '@overflow/commons-typescript/model/infra';
import { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
// import * as SensorListStore from '@overflow/sensor/store/list';
// import { PageParams, Page } from 'app/commons/model';
import { Target } from '@overflow/commons-typescript/model/target'; import { Target } from '@overflow/commons-typescript/model/target';
import {TargetService} from '../../service/target.service';
import {
Observable,
of
} from 'rxjs';
import { Store } from '@ngrx/store';
import {
catchError,
map,
tap,
take
} from 'rxjs/operators';
@Component({ @Component({
selector: 'of-target-detail', selector: 'of-target-detail',
templateUrl: './detail.component.html', templateUrl: './detail.component.html',
}) })
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy { export class DetailComponent implements OnInit {
// infra$: Observable<Infra>; @Input() targetID: number;
// infraSubscription$: Subscription;
// sensorsSubscription$: Subscription; target: Target;
// // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page'))); pending$: Observable<boolean>;
// target$: Observable<Target>; error$: Observable<any>;
//
// infraId = null;
// infra: Infra;
// sensors: Sensor[];
// sensorsCount = 0;
// sensorSettingDisplay = false;
//
// pageSize = '10';
// totalLength = 0;
// currPage = 0;
constructor( constructor(
// private router: Router, private store: Store<any>,
// private route: ActivatedRoute, private targetService: TargetService,
// private store: Store<any>,
) { } ) { }
ngOnInit() { ngOnInit() {
// this.infraSubscription$ = this.infra$.subscribe( this.targetService.read(this.targetID)
// (infra: Infra) => { .pipe(
// this.infra = infra; tap(() => {
// }, this.pending$ = of(true);
// (error: RPCClientError) => { }),
// console.log(error.response.message); map((target: Target) => {
// } this.target = target;
// ); }),
// this.sensorsSubscription$ = this.sensors$.subscribe( catchError(err => {
// (page: Page) => { console.log(err);
// if (page) { return err;
// this.sensorsCount = page.totalElements; }),
// this.sensors = page.content; tap(() => {
// } this.pending$ = of(false);
// }, }),
// (error: RPCClientError) => { take(1),
// console.log(error.response.message); ).subscribe();
// }
// );
}
ngAfterContentInit() {
// this.infraId = this.route.snapshot.paramMap.get('id');
// this.getInfra();
// this.getSensors(this.currPage);
}
ngOnDestroy() {
// if (this.infraSubscription$) {
// this.infraSubscription$.unsubscribe();
// }
}
getInfra() {
// this.infraDetailStore.dispatch(
// new InfraDetailStore.Read(
// { id: this.infraId }
// )
// );
}
getSensors(pageIndex) {
// const pageParams: PageParams = {
// pageNo: pageIndex + '',
// countPerPage: this.pageSize,
// sortCol: 'id',
// sortDirection: 'descending'
// };
// this.sensorListStore.dispatch(
// new SensorListStore.ReadAllByInfra(
// { id: this.infraId, pageParams: pageParams }
// )
// );
}
onAddSensor() {
// this.sensorSettingDisplay = true;
}
onSensorSettingClose() {
// this.sensorSettingDisplay = false;
}
onPaging(e) {
// this.getSensors(e.page);
}
onRowSelect(event) {
// this.router.navigate(['sensor', event.data.id, 'info']);
}
onTraceroute() {
// alert('지원 예정');
}
onDisplayNameChange(value: string) {
// if (value === this.infra.target.displayName) {
// return;
// }
// const target = this.infra.target;
// target.displayName = value;
// this.targetModifyStore.dispatch(
// new TargetModifyStore.Modify(target)
// );
// const modifySuccessSubscription$: Subscription = this.target$.subscribe(
// (t: Target) => {
// if (t) {
// }
// if (modifySuccessSubscription$) {
// modifySuccessSubscription$.unsubscribe();
// }
// },
// (error: RPCClientError) => {
// console.log(error);
// }
// );
} }
onDisplayNameChangeKeypress(event, value) { onDisplayNameChangeKeypress(event, value) {
// if (event.key === 'Enter') {
// this.onDisplayNameChange(value);
// }
} }
onDisplayNameChange(value) {
}
} }
//
// export class DetailComponent implements OnInit {
//
// @Input() targetID: number;
//
// target: Target;
//
// // infra$: Observable<Infra>;
// // infraSubscription$: Subscription;
// // sensorsSubscription$: Subscription;
// // // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
// // target$: Observable<Target>;
// //
// // infraId = null;
// // infra: Infra;
// // sensors: Sensor[];
// // sensorsCount = 0;
// // sensorSettingDisplay = false;
// //
// // pageSize = '10';
// // totalLength = 0;
// // currPage = 0;
//
// constructor(
// private store: Store<any>,
// private targetService: TargetService,
// ) { }
//
// ngOnInit() {
// this.tar
// // this.infraSubscription$ = this.infra$.subscribe(
// // (infra: Infra) => {
// // this.infra = infra;
// // },
// // (error: RPCClientError) => {
// // console.log(error.response.message);
// // }
// // );
// // this.sensorsSubscription$ = this.sensors$.subscribe(
// // (page: Page) => {
// // if (page) {
// // this.sensorsCount = page.totalElements;
// // this.sensors = page.content;
// // }
// // },
// // (error: RPCClientError) => {
// // console.log(error.response.message);
// // }
// // );
// }
//
// ngAfterContentInit() {
// // this.infraId = this.route.snapshot.paramMap.get('id');
// // this.getInfra();
// // this.getSensors(this.currPage);
// }
//
// ngOnDestroy() {
// // if (this.infraSubscription$) {
// // this.infraSubscription$.unsubscribe();
// // }
// }
//
// getInfra() {
// // this.infraDetailStore.dispatch(
// // new InfraDetailStore.Read(
// // { id: this.infraId }
// // )
// // );
// }
//
// getSensors(pageIndex) {
// // const pageParams: PageParams = {
// // pageNo: pageIndex + '',
// // countPerPage: this.pageSize,
// // sortCol: 'id',
// // sortDirection: 'descending'
// // };
// // this.sensorListStore.dispatch(
// // new SensorListStore.ReadAllByInfra(
// // { id: this.infraId, pageParams: pageParams }
// // )
// // );
// }
//
// onAddSensor() {
// // this.sensorSettingDisplay = true;
// }
//
// onSensorSettingClose() {
// // this.sensorSettingDisplay = false;
// }
//
// onPaging(e) {
// // this.getSensors(e.page);
// }
//
// onRowSelect(event) {
// // this.router.navigate(['sensor', event.data.id, 'info']);
// }
//
// onTraceroute() {
// // alert('지원 예정');
// }
//
//
// onDisplayNameChange(value: string) {
// // if (value === this.infra.target.displayName) {
// // return;
// // }
// // const target = this.infra.target;
// // target.displayName = value;
// // this.targetModifyStore.dispatch(
// // new TargetModifyStore.Modify(target)
// // );
//
// // const modifySuccessSubscription$: Subscription = this.target$.subscribe(
// // (t: Target) => {
// // if (t) {
// // }
// // if (modifySuccessSubscription$) {
// // modifySuccessSubscription$.unsubscribe();
// // }
// // },
// // (error: RPCClientError) => {
// // console.log(error);
// // }
// // );
// }
//
// onDisplayNameChangeKeypress(event, value) {
// // if (event.key === 'Enter') {
// // this.onDisplayNameChange(value);
// // }
// }
//
// }

4
@overflow/target/service/target.service.ts
View File

@ -36,4 +36,8 @@ export class TargetService {
public readAllByProbeID(probeID: number, pageParams: PageParams): Observable<Page<Target>> { public readAllByProbeID(probeID: number, pageParams: PageParams): Observable<Page<Target>> {
return this.rpcService.call<Page<Target>>('TargetService.readAllByProbeID', probeID, pageParams); return this.rpcService.call<Page<Target>>('TargetService.readAllByProbeID', probeID, pageParams);
} }
public read(targetID: number): Observable<Target> {
return this.rpcService.call<Target>('TargetService.read', targetID);
}
} }

3
src/app/pages/probes/probe-tab-page-routing.module.ts
View File

@ -16,7 +16,8 @@ const routes: Routes = [
{ path: 'download', component: ProbeDownloadPageComponent }, { path: 'download', component: ProbeDownloadPageComponent },
{ path: 'download/:idx', component: ProbeDownloadPageComponent }, { path: 'download/:idx', component: ProbeDownloadPageComponent },
{ path: ':id/info', component: ProbeDetailPageComponent }, { path: ':id/info', component: ProbeDetailPageComponent },
{ path: ':id/target', loadChildren: '@app/pages/targets/target-page.module#TargetPageModule' }, { path: ':probeID/target', loadChildren: '@app/pages/targets/target-page.module#TargetPageModule' },
// { path: ':id/target/:id/info', loadChildren: '@app/pages/targets/target-page.module#TargetPageModule' },
{ path: ':id/history', component: null }, { path: ':id/history', component: null },
] ]
}, },

2
src/app/pages/targets/target-detail-page.component.html
View File

@ -3,7 +3,7 @@
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <div class="card no-margin">
<!--<of-discovery [probeHostID]="probeHostID"></of-discovery>--> <!--<of-discovery [probeHostID]="probeHostID"></of-discovery>-->
sdfsdfasdasdasd <of-target-detail [targetID]="targetID"></of-target-detail>
</div> </div>
</div> </div>
</div> </div>

12
src/app/pages/targets/target-detail-page.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
@Component({ @Component({
selector: 'of-pages-target-detail', selector: 'of-pages-target-detail',
@ -7,11 +7,15 @@ import { ActivatedRoute } from '@angular/router';
}) })
export class TargetDetailPageComponent implements OnInit { export class TargetDetailPageComponent implements OnInit {
// probeHostID: number; targetID: number;
constructor( constructor(
private route: ActivatedRoute private router: Router,
) { } private activatedRoute: ActivatedRoute
) {
this.targetID = this.activatedRoute.snapshot.params['targetID'];
console.log(this.targetID);
}
ngOnInit() { ngOnInit() {
} }

10
src/app/pages/targets/target-list-page.component.ts
View File

@ -8,7 +8,7 @@ import { Target } from '@overflow/commons-typescript';
}) })
export class TargetListPageComponent implements OnInit { export class TargetListPageComponent implements OnInit {
@Input() probeID: number; probeID: number;
pageIdx: number; pageIdx: number;
constructor( constructor(
@ -17,6 +17,7 @@ export class TargetListPageComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
this.probeID = this.activatedRoute.snapshot.params['probeID'];
this.activatedRoute.queryParams.subscribe(queryParams => { this.activatedRoute.queryParams.subscribe(queryParams => {
this.pageIdx = Number(queryParams['page']); this.pageIdx = Number(queryParams['page']);
@ -27,14 +28,11 @@ export class TargetListPageComponent implements OnInit {
} }
onPageChange(pageNo: number) { onPageChange(pageNo: number) {
this.pageIdx = pageNo;
this.router.navigate(['/probe', this.probeID, 'target'], { queryParams: { page: pageNo } }); this.router.navigate(['/probe', this.probeID, 'target'], { queryParams: { page: pageNo } });
} }
onTargetSelect(target: Target) { onTargetSelect(target: Target) {
// console.log(target); this.router.navigate(['probe', this.probeID, 'target', target.id, 'info'], { queryParams: { page: this.pageIdx } });
// this.router.navigate(['target'], { queryParams: { target: event.data.id } });
// this.router.navigate(['target', event.data.id, 'info']);
this.router.navigate(['/target', target.id, 'info']);
} }
} }

4
src/app/pages/targets/target-page-routing.module.ts
View File

@ -10,8 +10,8 @@ const routes: Routes = [
path: '', path: '',
component: TargetPageComponent, component: TargetPageComponent,
children: [ children: [
// { path: ':id/target', component: TargetListPageComponent }, { path: '', component: TargetListPageComponent },
{ path: ':id/info', component: TargetDetailPageComponent } { path: ':targetID/info', component: TargetDetailPageComponent }
] ]
} }
]; ];

4
src/app/pages/targets/target-page.component.html
View File

@ -3,9 +3,9 @@
<div class="card no-margin"> <div class="card no-margin">
<!--<router-outlet *ngIf="probeID !== undefined" else complete></router-outlet>--> <!--<router-outlet *ngIf="probeID !== undefined" else complete></router-outlet>-->
<!--<ng-template #complete>--> <!--<ng-template #complete>-->
<of-pages-target-list [probeID]="probeID" ></of-pages-target-list> <!--<of-pages-target-list [probeID]="probeID" ></of-pages-target-list>-->
<!--</ng-template>--> <!--</ng-template>-->
<!--<router-outlet></router-outlet>--> <router-outlet></router-outlet>
</div> </div>
</div> </div>
</div> </div>

8
src/app/pages/targets/target-page.component.ts
View File

@ -7,13 +7,7 @@ import {BreadcrumbService} from '../../commons/service/breadcrumb.service';
templateUrl: './target-page.component.html', templateUrl: './target-page.component.html',
}) })
export class TargetPageComponent implements OnInit { export class TargetPageComponent implements OnInit {
probeID: number; constructor() {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) {
this.probeID = this.activatedRoute.snapshot.params['id'];
} }
ngOnInit() { ngOnInit() {