diff --git a/@overflow/target/component/detail/detail.component.html b/@overflow/target/component/detail/detail.component.html index 4ef797d..f72d480 100644 --- a/@overflow/target/component/detail/detail.component.html +++ b/@overflow/target/component/detail/detail.component.html @@ -1,51 +1,53 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + +
+
+
+ + + + + +
+
+
+ +
+ Status + + Up +
+ + + + + +
+
+
+
- - - - - - - - - - - - +
+
+
+ Up + Down + Warn + Error +
+
+
+
+
@@ -67,6 +69,6 @@ - - - +
+
+
diff --git a/@overflow/target/component/detail/detail.component.ts b/@overflow/target/component/detail/detail.component.ts index a86b13d..1f20881 100644 --- a/@overflow/target/component/detail/detail.component.ts +++ b/@overflow/target/component/detail/detail.component.ts @@ -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; - // infraSubscription$: Subscription; - // sensorsSubscription$: Subscription; - // // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page'))); - // target$: Observable; - // - // infraId = null; - // infra: Infra; - // sensors: Sensor[]; - // sensorsCount = 0; - // sensorSettingDisplay = false; - // - // pageSize = '10'; - // totalLength = 0; - // currPage = 0; + @Input() targetID: number; + + target: Target; + pending$: Observable; + error$: Observable; constructor( - // private router: Router, - // private route: ActivatedRoute, - // private store: Store, + private store: Store, + 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; +// // infraSubscription$: Subscription; +// // sensorsSubscription$: Subscription; +// // // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page'))); +// // target$: Observable; +// // +// // infraId = null; +// // infra: Infra; +// // sensors: Sensor[]; +// // sensorsCount = 0; +// // sensorSettingDisplay = false; +// // +// // pageSize = '10'; +// // totalLength = 0; +// // currPage = 0; +// +// constructor( +// private store: Store, +// 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); +// // } +// } +// +// } diff --git a/@overflow/target/service/target.service.ts b/@overflow/target/service/target.service.ts index 63bdc56..ebd0225 100644 --- a/@overflow/target/service/target.service.ts +++ b/@overflow/target/service/target.service.ts @@ -36,4 +36,8 @@ export class TargetService { public readAllByProbeID(probeID: number, pageParams: PageParams): Observable> { return this.rpcService.call>('TargetService.readAllByProbeID', probeID, pageParams); } + + public read(targetID: number): Observable { + return this.rpcService.call('TargetService.read', targetID); + } } diff --git a/src/app/pages/probes/probe-tab-page-routing.module.ts b/src/app/pages/probes/probe-tab-page-routing.module.ts index 9da7457..7828dcd 100644 --- a/src/app/pages/probes/probe-tab-page-routing.module.ts +++ b/src/app/pages/probes/probe-tab-page-routing.module.ts @@ -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 }, ] }, diff --git a/src/app/pages/targets/target-detail-page.component.html b/src/app/pages/targets/target-detail-page.component.html index a580c97..5cad108 100644 --- a/src/app/pages/targets/target-detail-page.component.html +++ b/src/app/pages/targets/target-detail-page.component.html @@ -3,7 +3,7 @@
- sdfsdfasdasdasd +
diff --git a/src/app/pages/targets/target-detail-page.component.ts b/src/app/pages/targets/target-detail-page.component.ts index 21f87c9..b41f2da 100644 --- a/src/app/pages/targets/target-detail-page.component.ts +++ b/src/app/pages/targets/target-detail-page.component.ts @@ -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() { } diff --git a/src/app/pages/targets/target-list-page.component.ts b/src/app/pages/targets/target-list-page.component.ts index 24a5b8a..9f4541d 100644 --- a/src/app/pages/targets/target-list-page.component.ts +++ b/src/app/pages/targets/target-list-page.component.ts @@ -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 } }); } } diff --git a/src/app/pages/targets/target-page-routing.module.ts b/src/app/pages/targets/target-page-routing.module.ts index b9c66fb..2518621 100644 --- a/src/app/pages/targets/target-page-routing.module.ts +++ b/src/app/pages/targets/target-page-routing.module.ts @@ -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 } ] } ]; diff --git a/src/app/pages/targets/target-page.component.html b/src/app/pages/targets/target-page.component.html index 0178f5d..8ad7d25 100644 --- a/src/app/pages/targets/target-page.component.html +++ b/src/app/pages/targets/target-page.component.html @@ -3,9 +3,9 @@
- + - +
diff --git a/src/app/pages/targets/target-page.component.ts b/src/app/pages/targets/target-page.component.ts index dc8d892..4a6ae1f 100644 --- a/src/app/pages/targets/target-page.component.ts +++ b/src/app/pages/targets/target-page.component.ts @@ -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() {