ing
This commit is contained in:
parent
a3c866bb75
commit
e908945d3e
|
@ -1,51 +1,53 @@
|
|||
<!--<div *ngIf="infra">-->
|
||||
<!--<div *ngIf="infra.infraType.name == 'HOST'">-->
|
||||
|
||||
<div *ngIf="target">
|
||||
|
||||
<!--<div *ngIf="target.infraType.name == 'HOST'">-->
|
||||
<!--<button pButton type="button" label="Traceroute" (click)="onTraceroute()"></button>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div class="ui-g">-->
|
||||
<!--<div class="ui-g-12">-->
|
||||
<!--<div class="ui-inputgroup">-->
|
||||
<!--<span class="md-inputfield">-->
|
||||
<!--<input #input type="text" pInputText value="{{infra.target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">-->
|
||||
<!--<label></label>-->
|
||||
<!--</span>-->
|
||||
<!--<button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="ui-g-12">-->
|
||||
<!--<p-panel [showHeader]="false">-->
|
||||
<!--<div class="ui-key-value">-->
|
||||
<!--<span>Status</span>-->
|
||||
<!--<span class="ng-star-inserted">-->
|
||||
<!--<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>-->
|
||||
<!--</div>-->
|
||||
<!--<of-key-value [key]="'Description'" [value]="infra.target.description" class="ui-key-value"></of-key-value>-->
|
||||
<!--<of-key-value [key]="'Type'" [value]="infra.infraType.name" class="ui-key-value"></of-key-value>-->
|
||||
<!--<of-key-value [key]="'Created at'" [value]="infra.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>-->
|
||||
<!--<of-key-value [key]="'Sensors'" [value]="infra.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">-->
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-inputgroup">
|
||||
<span class="md-inputfield">
|
||||
<input #input type="text" pInputText value="{{target.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
|
||||
<label></label>
|
||||
</span>
|
||||
<button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<p-panel [showHeader]="false">
|
||||
<div class="ui-key-value">
|
||||
<span>Status</span>
|
||||
<span class="ng-star-inserted">
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
|
||||
</div>
|
||||
<of-key-value [key]="'Description'" [value]="target.description" class="ui-key-value"></of-key-value>
|
||||
<of-key-value [key]="'Type'" [value]="target.displayName" class="ui-key-value"></of-key-value>
|
||||
<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">-->
|
||||
<!--<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="infra.target" (close)="onSensorSettingClose()"></of-sensor-setting>-->
|
||||
<!--</p-dialog>-->
|
||||
|
||||
<!--<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="ui-g-12 ui-md-7 ui-g-nopad">-->
|
||||
<!--<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-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-error"></i>Error-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="ui-g-12">-->
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-7 ui-g-nopad">
|
||||
<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-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-error"></i>Error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<!--<p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">-->
|
||||
<!--<ng-template pTemplate="header">-->
|
||||
<!--<tr>-->
|
||||
|
@ -67,6 +69,6 @@
|
|||
<!--</ng-template>-->
|
||||
<!--</p-table>-->
|
||||
<!--<p-paginator [rows]="pageSize" [totalRecords]="sensorsCount" (onPageChange)="onPaging($event)"></p-paginator>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,151 +1,200 @@
|
|||
import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } 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 { Component, ViewChild, OnInit, Input } from '@angular/core';
|
||||
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({
|
||||
selector: 'of-target-detail',
|
||||
templateUrl: './detail.component.html',
|
||||
})
|
||||
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
export class DetailComponent implements OnInit {
|
||||
|
||||
// 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;
|
||||
@Input() targetID: number;
|
||||
|
||||
target: Target;
|
||||
pending$: Observable<boolean>;
|
||||
error$: Observable<any>;
|
||||
|
||||
constructor(
|
||||
// private router: Router,
|
||||
// private route: ActivatedRoute,
|
||||
// private store: Store<any>,
|
||||
private store: Store<any>,
|
||||
private targetService: TargetService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
// 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);
|
||||
// }
|
||||
// );
|
||||
this.targetService.read(this.targetID)
|
||||
.pipe(
|
||||
tap(() => {
|
||||
this.pending$ = of(true);
|
||||
}),
|
||||
map((target: Target) => {
|
||||
this.target = target;
|
||||
}),
|
||||
catchError(err => {
|
||||
console.log(err);
|
||||
return err;
|
||||
}),
|
||||
tap(() => {
|
||||
this.pending$ = of(false);
|
||||
}),
|
||||
take(1),
|
||||
).subscribe();
|
||||
}
|
||||
|
||||
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);
|
||||
// // }
|
||||
// }
|
||||
//
|
||||
// }
|
||||
|
|
|
@ -36,4 +36,8 @@ export class TargetService {
|
|||
public readAllByProbeID(probeID: number, pageParams: PageParams): Observable<Page<Target>> {
|
||||
return this.rpcService.call<Page<Target>>('TargetService.readAllByProbeID', probeID, pageParams);
|
||||
}
|
||||
|
||||
public read(targetID: number): Observable<Target> {
|
||||
return this.rpcService.call<Target>('TargetService.read', targetID);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,7 +16,8 @@ const routes: Routes = [
|
|||
{ path: 'download', component: ProbeDownloadPageComponent },
|
||||
{ path: 'download/:idx', component: ProbeDownloadPageComponent },
|
||||
{ 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 },
|
||||
]
|
||||
},
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<!--<of-discovery [probeHostID]="probeHostID"></of-discovery>-->
|
||||
sdfsdfasdasdasd
|
||||
<of-target-detail [targetID]="targetID"></of-target-detail>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'of-pages-target-detail',
|
||||
|
@ -7,11 +7,15 @@ import { ActivatedRoute } from '@angular/router';
|
|||
})
|
||||
export class TargetDetailPageComponent implements OnInit {
|
||||
|
||||
// probeHostID: number;
|
||||
targetID: number;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute
|
||||
) { }
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute
|
||||
) {
|
||||
this.targetID = this.activatedRoute.snapshot.params['targetID'];
|
||||
console.log(this.targetID);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@ import { Target } from '@overflow/commons-typescript';
|
|||
})
|
||||
export class TargetListPageComponent implements OnInit {
|
||||
|
||||
@Input() probeID: number;
|
||||
probeID: number;
|
||||
pageIdx: number;
|
||||
|
||||
constructor(
|
||||
|
@ -17,6 +17,7 @@ export class TargetListPageComponent implements OnInit {
|
|||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.probeID = this.activatedRoute.snapshot.params['probeID'];
|
||||
this.activatedRoute.queryParams.subscribe(queryParams => {
|
||||
this.pageIdx = Number(queryParams['page']);
|
||||
|
||||
|
@ -27,14 +28,11 @@ export class TargetListPageComponent implements OnInit {
|
|||
}
|
||||
|
||||
onPageChange(pageNo: number) {
|
||||
this.pageIdx = pageNo;
|
||||
this.router.navigate(['/probe', this.probeID, 'target'], { queryParams: { page: pageNo } });
|
||||
}
|
||||
|
||||
onTargetSelect(target: Target) {
|
||||
// console.log(target);
|
||||
// this.router.navigate(['target'], { queryParams: { target: event.data.id } });
|
||||
// this.router.navigate(['target', event.data.id, 'info']);
|
||||
|
||||
this.router.navigate(['/target', target.id, 'info']);
|
||||
this.router.navigate(['probe', this.probeID, 'target', target.id, 'info'], { queryParams: { page: this.pageIdx } });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,8 +10,8 @@ const routes: Routes = [
|
|||
path: '',
|
||||
component: TargetPageComponent,
|
||||
children: [
|
||||
// { path: ':id/target', component: TargetListPageComponent },
|
||||
{ path: ':id/info', component: TargetDetailPageComponent }
|
||||
{ path: '', component: TargetListPageComponent },
|
||||
{ path: ':targetID/info', component: TargetDetailPageComponent }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
<div class="card no-margin">
|
||||
<!--<router-outlet *ngIf="probeID !== undefined" else complete></router-outlet>-->
|
||||
<!--<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>-->
|
||||
<!--<router-outlet></router-outlet>-->
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -7,13 +7,7 @@ import {BreadcrumbService} from '../../commons/service/breadcrumb.service';
|
|||
templateUrl: './target-page.component.html',
|
||||
})
|
||||
export class TargetPageComponent implements OnInit {
|
||||
probeID: number;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
) {
|
||||
this.probeID = this.activatedRoute.snapshot.params['id'];
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
Loading…
Reference in New Issue
Block a user