From e15de633c28297ea3afe5563de61d1f8e6b02a4d Mon Sep 17 00:00:00 2001 From: insanity Date: Fri, 25 May 2018 18:18:06 +0900 Subject: [PATCH] probe detail in progress --- .../component/detail/detail.component.html | 68 ++++++---- .../component/detail/detail.component.ts | 125 ++---------------- .../container/probe-detail-container.html | 2 +- .../probe/container/probe-detail-container.ts | 32 ++++- .../probe/container/probe-list-container.ts | 15 +-- .../probe/store/{ => entity}/probe/index.ts | 0 .../store/{ => entity}/probe/probe.action.ts | 27 +++- .../store/{ => entity}/probe/probe.effect.ts | 19 ++- .../store/{ => entity}/probe/probe.reducer.ts | 18 ++- .../store/{ => entity}/probe/probe.state.ts | 0 @overflow/probe/store/index.ts | 2 +- .../breadcrumb/app.breadcrumb.component.ts | 2 +- .../discovery-page-routing.module.ts | 4 + .../discovery/discovery-page.component.ts | 6 + .../notification-page.component.ts | 2 +- src/app/pages/pages.component.ts | 1 - .../download/download-page.component.ts | 2 +- .../noauth-probe-page.component.ts | 2 +- .../probes/probe/probe-page.component.html | 5 +- .../probes/probe/probe-page.component.ts | 18 ++- 20 files changed, 183 insertions(+), 167 deletions(-) rename @overflow/probe/store/{ => entity}/probe/index.ts (100%) rename @overflow/probe/store/{ => entity}/probe/probe.action.ts (68%) rename @overflow/probe/store/{ => entity}/probe/probe.effect.ts (75%) rename @overflow/probe/store/{ => entity}/probe/probe.reducer.ts (82%) rename @overflow/probe/store/{ => entity}/probe/probe.state.ts (100%) diff --git a/@overflow/probe/component/detail/detail.component.html b/@overflow/probe/component/detail/detail.component.html index 9b7a7a7..1b399b8 100644 --- a/@overflow/probe/component/detail/detail.component.html +++ b/@overflow/probe/component/detail/detail.component.html @@ -1,6 +1,6 @@
-

Info

+

Info

@@ -8,58 +8,76 @@
- - - +
-
- - +
-
Name - +
- +
- +
- Description - - - -
- + Description + + + +
+
- +
- +
- -
-
- +
+ + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
- - \ No newline at end of file + \ No newline at end of file diff --git a/@overflow/probe/component/detail/detail.component.ts b/@overflow/probe/component/detail/detail.component.ts index 679cc82..d6969ae 100644 --- a/@overflow/probe/component/detail/detail.component.ts +++ b/@overflow/probe/component/detail/detail.component.ts @@ -1,129 +1,30 @@ -import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Store, select } from '@ngrx/store'; -import { RPCClientError } from '@loafer/ng-rpc'; -// import * as DetailStore from '../../store/detail'; -// import * as ModifyStore from '../../store/modify'; -// import { DetailSelector, ModifySelector } from '../../store'; -import { Probe } from '@overflow/commons-typescript/model/probe'; -import { ConfirmationService, Message } from 'primeng/primeng'; -import * as CIDR from 'ip-cidr'; -import { Subscription } from 'rxjs/Subscription'; -import { MessageService } from 'primeng/components/common/messageservice'; -// import { SettingComponent as DiscoverySettingComponent } from '@overflow/discovery/component/setting/setting.component'; +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe'; @Component({ selector: 'of-probe-detail', templateUrl: './detail.component.html', - providers: [ConfirmationService, MessageService] + // providers: [ConfirmationService, MessageService] }) -export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy { +export class ProbeDetailComponent { - probeSubscription$: Subscription; - // probe$ = this.detailStore.pipe(select(DetailSelector.select('probe'))); - // modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe'))); - probe: Probe = null; - IPRange: string; - display = false; - msgs: Message[] = []; + @Input() probeHost: ProbeHost; + @Output() modify = new EventEmitter(); + @Output() discovery = new EventEmitter(); - constructor( - private route: ActivatedRoute, - // private detailStore: Store, - // private modifyStore: Store, - private confirmationService: ConfirmationService, - private messageService: MessageService - ) { } + editMode = false; - ngOnInit() { - // this.probeSubscription$ = this.probe$.subscribe( - // (probe: Probe) => { - // if (probe) { - // this.probe = probe; - // this.arrangeInfo(); - // } - // }, - // (error: RPCClientError) => { - // console.log(error.response.message); - // } - // ); + constructor() { } - ngOnDestroy() { - if (this.probeSubscription$) { - this.probeSubscription$.unsubscribe(); - } - } - - ngAfterContentInit() { - // const probeId = this.route.snapshot.paramMap.get('id'); - // this.detailStore.dispatch( - // new DetailStore.Read( - // { id: probeId } - // ) - // ); - } - - arrangeInfo() { - const cidr = new CIDR(this.probe.cidr); - if (!cidr.isValid()) { - return; - } - this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address; + onEditSave() { + this.modify.emit(this.probeHost); + this.editMode = false; } onDiscoveryClick() { - this.display = true; + this.discovery.emit(this.probeHost.id); } - - onDiscoveryClose() { - this.display = false; - } - - onRemoveClick() { - this.confirmationService.confirm({ - header: 'Confirmation', - icon: 'fa fa-trash', - message: 'Are you sure to remove this Probe?', - accept: () => { - // this.router.navigate(['probes/list']); - }, - reject: () => { - } - }); - } - - onDisplayNameChange(value: string) { - // if (value === this.probe.displayName) { - // return; - // } - // this.probe.displayName = value; - // this.modifyStore.dispatch( - // new ModifyStore.Modify(this.probe) - // ); - - // const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe( - // (probe: Probe) => { - // if (probe) { - // this.msgs = []; - // this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' }); - // } - // if (modifySuccessSubscription$) { - // modifySuccessSubscription$.unsubscribe(); - // } - // }, - // (error: RPCClientError) => { - // console.log(error.response.message); - // } - // ); - } - - onDisplayNameChangeKeypress(event, value) { - if (event.key === 'Enter') { - this.onDisplayNameChange(value); - } - } - } diff --git a/@overflow/probe/container/probe-detail-container.html b/@overflow/probe/container/probe-detail-container.html index 1782169..92c26c4 100644 --- a/@overflow/probe/container/probe-detail-container.html +++ b/@overflow/probe/container/probe-detail-container.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/@overflow/probe/container/probe-detail-container.ts b/@overflow/probe/container/probe-detail-container.ts index ac40d86..348ecc9 100644 --- a/@overflow/probe/container/probe-detail-container.ts +++ b/@overflow/probe/container/probe-detail-container.ts @@ -1,9 +1,37 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter } from '@angular/core'; +import { Observable } from 'rxjs'; +import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe'; +import { Store, select } from '@ngrx/store'; +import * as ProbeStore from '../store/entity/probe'; +import { ProbeSelector } from '../store'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'of-probe-detail-container', templateUrl: './probe-detail-container.html', }) -export class ProbeDetailContainerComponent { +export class ProbeDetailContainerComponent implements OnInit { + @Input() probeHostID; + @Output() discovery = new EventEmitter(); + probeHosts$: Observable; + + constructor( + private store: Store, + private route: ActivatedRoute, + ) { + this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts'))); + } + + ngOnInit() { + this.store.dispatch(new ProbeStore.Read(this.probeHostID)); + } + + onModify(probeHost: ProbeHost) { + this.store.dispatch(new ProbeStore.Modify(probeHost.probe)); + } + + onDiscovery(probeHostID: number) { + this.discovery.emit(probeHostID); + } } diff --git a/@overflow/probe/container/probe-list-container.ts b/@overflow/probe/container/probe-list-container.ts index 71bf0dc..2870a10 100644 --- a/@overflow/probe/container/probe-list-container.ts +++ b/@overflow/probe/container/probe-list-container.ts @@ -1,8 +1,8 @@ -import { Component, EventEmitter, Output, OnInit, AfterContentInit } from '@angular/core'; +import { Component, EventEmitter, Output, OnInit } from '@angular/core'; import { ProbeHost } from '@overflow/commons-typescript/model/probe'; import { Observable } from 'rxjs'; import { Store, select } from '@ngrx/store'; -import * as ProbeStore from '../store/probe'; +import * as ProbeStore from '../store/entity/probe'; import { ProbeSelector } from '../store'; import { AuthSelector } from '@overflow/member/store'; import { Domain } from '@overflow/commons-typescript/model/domain'; @@ -11,7 +11,7 @@ import { Domain } from '@overflow/commons-typescript/model/domain'; selector: 'of-probe-list-container', templateUrl: './probe-list-container.html', }) -export class ProbeListContainerComponent implements OnInit, AfterContentInit { +export class ProbeListContainerComponent implements OnInit { probeHosts$: Observable; @Output() select = new EventEmitter(); @@ -20,10 +20,6 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit { this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts'))); } - onSelect(probeHost: ProbeHost) { - this.select.emit(probeHost); - } - ngOnInit() { this.store.select(AuthSelector.select('domain')).subscribe( (domain: Domain) => { @@ -35,7 +31,8 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit { ); } - ngAfterContentInit() { - + onSelect(probeHost: ProbeHost) { + this.select.emit(probeHost); } + } diff --git a/@overflow/probe/store/probe/index.ts b/@overflow/probe/store/entity/probe/index.ts similarity index 100% rename from @overflow/probe/store/probe/index.ts rename to @overflow/probe/store/entity/probe/index.ts diff --git a/@overflow/probe/store/probe/probe.action.ts b/@overflow/probe/store/entity/probe/probe.action.ts similarity index 68% rename from @overflow/probe/store/probe/probe.action.ts rename to @overflow/probe/store/entity/probe/probe.action.ts index 368bccb..33e81f6 100644 --- a/@overflow/probe/store/probe/probe.action.ts +++ b/@overflow/probe/store/entity/probe/probe.action.ts @@ -1,6 +1,6 @@ import { Action } from '@ngrx/store'; import { RPCClientError } from '@loafer/ng-rpc'; -import { ProbeHost } from '@overflow/commons-typescript/model/probe'; +import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe'; export enum ActionType { ReadAllByDomainID = '[probe.list] ReadAllByDomainID', @@ -10,6 +10,10 @@ export enum ActionType { Read = '[probe.detail] Read', ReadSuccess = '[probe.detail] ReadSuccess', ReadFailure = '[probe.detail] ReadFailure', + + Modify = '[probe.detail] Modify', + ModifySuccess = '[probe.detail] ModifySuccess', + ModifyFailure = '[probe.detail] ModifyFailure', } export class ReadAllByDomainID implements Action { @@ -48,6 +52,24 @@ export class ReadFailure implements Action { constructor(public payload: RPCClientError) {} } +export class Modify implements Action { + readonly type = ActionType.Modify; + + constructor(public payload: Probe) {} +} + +export class ModifySuccess implements Action { + readonly type = ActionType.ModifySuccess; + + constructor(public payload: Probe) {} +} + +export class ModifyFailure implements Action { + readonly type = ActionType.ModifyFailure; + + constructor(public payload: RPCClientError) {} +} + export type Actions = | ReadAllByDomainID | ReadAllByDomainIDSuccess @@ -55,4 +77,7 @@ export type Actions = | Read | ReadSuccess | ReadFailure + | Modify + | ModifySuccess + | ModifyFailure ; diff --git a/@overflow/probe/store/probe/probe.effect.ts b/@overflow/probe/store/entity/probe/probe.effect.ts similarity index 75% rename from @overflow/probe/store/probe/probe.effect.ts rename to @overflow/probe/store/entity/probe/probe.effect.ts index 9d8faba..50dfcc0 100644 --- a/@overflow/probe/store/probe/probe.effect.ts +++ b/@overflow/probe/store/entity/probe/probe.effect.ts @@ -25,9 +25,13 @@ import { Read, ReadSuccess, ReadFailure, + Modify, + ModifySuccess, + ModifyFailure, ActionType } from './probe.action'; -import { ProbeHostService } from '../../service/probe-host.service'; +import { ProbeHostService } from '../../../service/probe-host.service'; +import { ProbeService } from '../../../service/probe.service'; @Injectable() export class Effects { @@ -35,6 +39,7 @@ export class Effects { constructor( private actions$: Actions, private probeHostService: ProbeHostService, + private probeService: ProbeService, private router: Router ) { } @@ -61,4 +66,16 @@ export class Effects { .catch((error: RPCClientError) => { return of(new ReadAllByDomainIDFailure(error)); }); + + @Effect() + Modify$: Observable = this.actions$ + .ofType(ActionType.Modify) + .map((action: Modify) => action.payload) + .switchMap(payload => this.probeService.modify(payload)) + .map(probe => { + return new ModifySuccess(probe); + }) + .catch((error: RPCClientError) => { + return of(new ModifyFailure(error)); + }); } diff --git a/@overflow/probe/store/probe/probe.reducer.ts b/@overflow/probe/store/entity/probe/probe.reducer.ts similarity index 82% rename from @overflow/probe/store/probe/probe.reducer.ts rename to @overflow/probe/store/entity/probe/probe.reducer.ts index c74f63d..a6aad56 100644 --- a/@overflow/probe/store/probe/probe.reducer.ts +++ b/@overflow/probe/store/entity/probe/probe.reducer.ts @@ -1,7 +1,4 @@ import { - ReadAllByDomainID, - ReadAllByDomainIDFailure, - ReadAllByDomainIDSuccess, ActionType, Actions, } from './probe.action'; @@ -61,6 +58,21 @@ export function reducer(state = initialState, action: Actions): State { }; } + case ActionType.Modify: { + return { + ...state, + error: null, + }; + } + + case ActionType.ModifyFailure: { + return { + ...state, + error: action.payload, + probeHosts: null, + }; + } + default: { return state; } diff --git a/@overflow/probe/store/probe/probe.state.ts b/@overflow/probe/store/entity/probe/probe.state.ts similarity index 100% rename from @overflow/probe/store/probe/probe.state.ts rename to @overflow/probe/store/entity/probe/probe.state.ts diff --git a/@overflow/probe/store/index.ts b/@overflow/probe/store/index.ts index 5e333f6..d88608e 100644 --- a/@overflow/probe/store/index.ts +++ b/@overflow/probe/store/index.ts @@ -8,7 +8,7 @@ import { StateSelector } from '@overflow/core/ngrx/store'; import { MODULE } from '../probe.constant'; -import * as ProbeStore from './probe'; +import * as ProbeStore from './entity/probe'; export interface State { probes: ProbeStore.State; diff --git a/src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.ts b/src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.ts index 60f68d8..6eeb2cb 100644 --- a/src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.ts +++ b/src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.ts @@ -1,6 +1,6 @@ import { Component, OnDestroy } from '@angular/core'; import { AppComponent } from '../../../../app.component'; -import { BreadcrumbService } from '../../../../commons/service/breadcrumb.service'; +import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; import { Subscription } from 'rxjs/Subscription'; import { MenuItem } from 'primeng/primeng'; diff --git a/src/app/pages/discovery/discovery-page-routing.module.ts b/src/app/pages/discovery/discovery-page-routing.module.ts index 8a25f46..0cdc9aa 100644 --- a/src/app/pages/discovery/discovery-page-routing.module.ts +++ b/src/app/pages/discovery/discovery-page-routing.module.ts @@ -8,6 +8,10 @@ const routes: Routes = [ { path: '', component: DiscoveryPageComponent, + }, + { + path: ':probeHostID', + component: DiscoveryPageComponent, } ]; diff --git a/src/app/pages/discovery/discovery-page.component.ts b/src/app/pages/discovery/discovery-page.component.ts index cfec397..0fbf1c3 100644 --- a/src/app/pages/discovery/discovery-page.component.ts +++ b/src/app/pages/discovery/discovery-page.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'of-discovery-page', @@ -7,8 +8,13 @@ import { Component, OnInit } from '@angular/core'; export class DiscoveryPageComponent implements OnInit { constructor( + private route: ActivatedRoute ) { } ngOnInit() { + this.route.params.subscribe((params: any) => { + const probeHostID = params['probeHostID']; + console.log('probeHostID : ' + probeHostID); + }); } } diff --git a/src/app/pages/notification/notification-page.component.ts b/src/app/pages/notification/notification-page.component.ts index 1a1e33f..817b4e0 100644 --- a/src/app/pages/notification/notification-page.component.ts +++ b/src/app/pages/notification/notification-page.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { BreadcrumbService } from '../../commons/service/breadcrumb.service'; +import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; import { Router } from '@angular/router'; diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index f3411e8..3c395f9 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -64,7 +64,6 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit { constructor(public renderer: Renderer, public zone: NgZone, private router: Router, private breadcrumbService: BreadcrumbService) { router.events.subscribe((val) => { - console.log(val); if (val instanceof NavigationStart) { breadcrumbService.setItems(null); } diff --git a/src/app/pages/probes/download/download-page.component.ts b/src/app/pages/probes/download/download-page.component.ts index e3c21fa..ac65dce 100644 --- a/src/app/pages/probes/download/download-page.component.ts +++ b/src/app/pages/probes/download/download-page.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; -import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; +import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; @Component({ selector: 'of-pages-download', diff --git a/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts index 44979c3..0ccf121 100644 --- a/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts +++ b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; +import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; @Component({ selector: 'of-pages-noauth-probe', diff --git a/src/app/pages/probes/probe/probe-page.component.html b/src/app/pages/probes/probe/probe-page.component.html index 2e426c2..435ef72 100644 --- a/src/app/pages/probes/probe/probe-page.component.html +++ b/src/app/pages/probes/probe/probe-page.component.html @@ -3,5 +3,8 @@ - + \ No newline at end of file diff --git a/src/app/pages/probes/probe/probe-page.component.ts b/src/app/pages/probes/probe/probe-page.component.ts index ac971ae..9cb132d 100644 --- a/src/app/pages/probes/probe/probe-page.component.ts +++ b/src/app/pages/probes/probe/probe-page.component.ts @@ -1,9 +1,9 @@ import { Component, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; -import { Probe } from '@overflow/commons-typescript/model/probe'; +import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe'; import { Target } from '@overflow/commons-typescript/model/target'; -import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; +import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; @Component({ selector: 'of-pages-probe', @@ -12,6 +12,7 @@ import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; export class ProbePageComponent { private isDetail: boolean; + private probeHostID: string; constructor( private router: Router, @@ -34,19 +35,24 @@ export class ProbePageComponent { this.isDetail = false; } - onDetailContainer(probeId: string) { + onDetailContainer(probeHostID: string) { + this.probeHostID = probeHostID; this.breadcrumbService.setItems([ { label: 'Probe', routerLink: ['/probe/list'] }, - { label: probeId } + { label: this.probeHostID } ]); this.isDetail = true; } - onProbeSelect(probe: Probe) { - this.router.navigate(['probe', probe.id, 'info']); + onProbeSelect(probeHost: ProbeHost) { + this.router.navigate(['probe', probeHost.id, 'info']); } onTargetSelect(target: Target) { console.log(target); } + + onDiscovery(probeHostID: number) { + this.router.navigate(['discovery', probeHostID]); + } }