diff --git a/@overflow/commons/prime-ng/prime-ng.module.ts b/@overflow/commons/prime-ng/prime-ng.module.ts index f0de78f..a1fbf57 100644 --- a/@overflow/commons/prime-ng/prime-ng.module.ts +++ b/@overflow/commons/prime-ng/prime-ng.module.ts @@ -69,6 +69,7 @@ import { TreeTableModule } from 'primeng/primeng'; import { CardModule } from 'primeng/card'; import { DataViewModule } from 'primeng/dataview'; import { SidebarModule } from 'primeng/sidebar'; +import { ProgressSpinnerModule } from 'primeng/progressspinner'; const PRIME_NG_MODULES: any[] = [ AccordionModule, @@ -142,7 +143,8 @@ const PRIME_NG_MODULES: any[] = [ DataViewModule, SidebarModule, BlockUIModule, - InplaceModule + InplaceModule, + ProgressSpinnerModule ]; @NgModule({ diff --git a/@overflow/probe/component/detail/detail.component.html b/@overflow/probe/component/detail/detail.component.html index cc107ab..dc06010 100644 --- a/@overflow/probe/component/detail/detail.component.html +++ b/@overflow/probe/component/detail/detail.component.html @@ -1,84 +1,97 @@ -
-
-

Info

-
- -
- - -
-
+ + + - -
- -
-
-
-
- Name - - - -
- -
+ -
- -
-
-
- Description - - - +
+
+

Info

+
+
+ + + +
+
+ + +
+ +
+
+
+
+ Name + + +
{{displayNameErrMsg}}
+ +
+ +
+ +
+ +
+
+
+ Description + + + +
{{descriptionErrMsg}}
+ +
+ +
+
+ +
+
+ +
+
+
- -
-
- -
-
- -
-
-
-
- + - - -
-
+ + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
-
-
- -
- -
- -
- -
- -
- -
-
-
- + + +
+
+ + +
+ + + -
-
- - -
\ 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 9b2be79..a5f74ce 100644 --- a/@overflow/probe/component/detail/detail.component.ts +++ b/@overflow/probe/component/detail/detail.component.ts @@ -9,28 +9,43 @@ import { MessageService } from 'primeng/components/common/messageservice'; }) export class ProbeDetailComponent { + @Input() pending: boolean; @Input() probeHost: ProbeHost; @Output() modify = new EventEmitter(); @Output() discovery = new EventEmitter(); editMode = false; + displayNameErrMsg: string; + descriptionErrMsg: string; + displayName: string; + description: string; constructor(private messageService: MessageService) { } + onDisplayNameEditing(value: string) { + const msg: string = this.checkValidDisplayName(value); + if (msg !== null) { + this.displayNameErrMsg = msg; + } else { + this.displayNameErrMsg = null; + this.displayName = value; + } + } + + onDescriptionEditing(value: string) { + const msg: string = this.checkValidDescription(value); + if (msg !== null) { + this.descriptionErrMsg = msg; + } else { + this.descriptionErrMsg = null; + this.description = value; + } + } + onEditSave() { - const displayNameValidation = this.checkValidDisplayName(); - if (displayNameValidation) { - alert(displayNameValidation); - return; - } - - const descriptionValidation = this.checkValidDescription(); - if (descriptionValidation) { - alert(descriptionValidation); - return; - } - + this.probeHost.probe.displayName = this.displayName; + this.probeHost.probe.description = this.description; this.modify.emit(this.probeHost); this.editMode = false; } @@ -39,25 +54,23 @@ export class ProbeDetailComponent { this.discovery.emit(this.probeHost.id); } - checkValidDisplayName(): string { - const displayName = this.probeHost.probe.displayName; - if (displayName.length <= 2 || displayName.length > 20) { + checkValidDisplayName(value: string): string | null { + if (value.length <= 2 || value.length > 20) { return 'displayname length : 3 ~ 20'; } const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi; - if (displayName.match(regex)) { + if (value.match(regex)) { return 'Cannot use special characters.'; } return null; } - checkValidDescription(): string { - const description = this.probeHost.probe.description; - if (description.length > 50) { + checkValidDescription(value: string): string | null { + if (value.length > 50) { return 'description length : 0 ~ 50'; } const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi; - if (description.match(regex)) { + if (value.match(regex)) { return 'Cannot use special characters.'; } return null; diff --git a/@overflow/probe/component/list/list.component.html b/@overflow/probe/component/list/list.component.html index 54164c4..e701c5a 100644 --- a/@overflow/probe/component/list/list.component.html +++ b/@overflow/probe/component/list/list.component.html @@ -1,27 +1,32 @@

Probes

- - - - Probe Name - Uptime - IP - OS - CIDR - Targets - Authroized at - Authroized by - - - - - {{probeHost.probe.displayName}} - {{getUptime(probeHost.probe)}} - {{probeHost.host.ipv4}} - {{probeHost.host.os.vendor.name}} - {{probeHost.probe.cidr}} - {{probeHost.probe.targetCount}} - {{probeHost.probe.authorizeDate | date: 'dd.MM.yyyy'}} - {{probeHost.probe.authorizeMember.name}} - - - \ No newline at end of file + + + + + + + + Probe Name + Uptime + IP + OS + CIDR + Targets + Authroized at + Authroized by + + + + + {{probeHost.probe.displayName}} + {{getUptime(probeHost.probe)}} + {{probeHost.host.ipv4}} + {{probeHost.host.os.vendor.name}} + {{probeHost.probe.cidr}} + {{probeHost.probe.targetCount}} + {{probeHost.probe.authorizeDate | date: 'dd.MM.yyyy'}} + {{probeHost.probe.authorizeMember.name}} + + + + \ No newline at end of file diff --git a/@overflow/probe/component/list/list.component.ts b/@overflow/probe/component/list/list.component.ts index 501ca13..d7aa8c7 100644 --- a/@overflow/probe/component/list/list.component.ts +++ b/@overflow/probe/component/list/list.component.ts @@ -7,6 +7,7 @@ import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe'; }) export class ProbeListComponent { @Output() select = new EventEmitter(); + @Input() pending; @Input() probeHosts: ProbeHost[]; constructor() { diff --git a/@overflow/probe/container/probe-detail-container.html b/@overflow/probe/container/probe-detail-container.html index 03606c3..c913044 100644 --- a/@overflow/probe/container/probe-detail-container.html +++ b/@overflow/probe/container/probe-detail-container.html @@ -1 +1,2 @@ - \ No newline at end of file +
An error has occurred.
+ \ 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 e3dcf9b..57b07a6 100644 --- a/@overflow/probe/container/probe-detail-container.ts +++ b/@overflow/probe/container/probe-detail-container.ts @@ -3,9 +3,8 @@ 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 { ProbeSelector, ProbeDetailContainerSelector } from '../store'; import { ActivatedRoute } from '@angular/router'; -import { RPCClientError } from '@loafer/ng-rpc'; @Component({ selector: 'of-probe-detail-container', @@ -16,12 +15,15 @@ export class ProbeDetailContainerComponent implements OnInit { @Input() probeHostID: number; @Output() discovery = new EventEmitter(); probeHost$: Observable; - error$: Observable; + pending$: Observable; + error$: Observable; constructor( private store: Store, private route: ActivatedRoute, ) { + this.pending$ = this.store.pipe(select(ProbeDetailContainerSelector.selectPending)); + this.error$ = this.store.pipe(select(ProbeSelector.selectError)); } ngOnInit() { diff --git a/@overflow/probe/container/probe-list-container.html b/@overflow/probe/container/probe-list-container.html index faf16b2..6362c8f 100644 --- a/@overflow/probe/container/probe-list-container.html +++ b/@overflow/probe/container/probe-list-container.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/@overflow/probe/container/probe-list-container.ts b/@overflow/probe/container/probe-list-container.ts index 8d9f19a..576ded2 100644 --- a/@overflow/probe/container/probe-list-container.ts +++ b/@overflow/probe/container/probe-list-container.ts @@ -3,7 +3,7 @@ import { ProbeHost } from '@overflow/commons-typescript/model/probe'; import { Observable } from 'rxjs'; import { Store, select } from '@ngrx/store'; import * as ProbeStore from '../store/entity/probe'; -import { ProbeSelector } from '../store'; +import { ProbeSelector, ProbeListContainerSelector } from '../store'; import { AuthSelector } from '@overflow/member/store'; import { Domain } from '@overflow/commons-typescript/model/domain'; @@ -14,10 +14,12 @@ import { Domain } from '@overflow/commons-typescript/model/domain'; export class ProbeListContainerComponent implements OnInit { probeHosts$: Observable; + pending$: Observable; @Output() select = new EventEmitter(); constructor(private store: Store) { this.probeHosts$ = store.pipe(select(ProbeSelector.selectAll)); + this.pending$ = store.pipe(select(ProbeListContainerSelector.selectPending)); } ngOnInit() { diff --git a/@overflow/probe/store/container/probe-detail/index.ts b/@overflow/probe/store/container/probe-detail/index.ts new file mode 100644 index 0000000..f603af8 --- /dev/null +++ b/@overflow/probe/store/container/probe-detail/index.ts @@ -0,0 +1,2 @@ +export * from './probe-detail.reducer'; +export * from './probe-detail.state'; diff --git a/@overflow/probe/store/container/probe-detail/probe-detail.reducer.ts b/@overflow/probe/store/container/probe-detail/probe-detail.reducer.ts new file mode 100644 index 0000000..43c19c4 --- /dev/null +++ b/@overflow/probe/store/container/probe-detail/probe-detail.reducer.ts @@ -0,0 +1,36 @@ +import { ActionType, Actions } from '../../entity/probe'; +import { + State, + initialState, +} from './probe-detail.state'; + +import { Probe } from '@overflow/commons-typescript/model/probe'; + +export function reducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionType.Read: { + return { + ...state, + pending: true, + }; + } + + case ActionType.ReadSuccess: { + return { + ...state, + pending: false, + }; + } + + case ActionType.ReadFailure: { + return { + ...state, + pending: true, + }; + } + + default: { + return state; + } + } +} diff --git a/@overflow/probe/store/container/probe-detail/probe-detail.state.ts b/@overflow/probe/store/container/probe-detail/probe-detail.state.ts new file mode 100644 index 0000000..236ecca --- /dev/null +++ b/@overflow/probe/store/container/probe-detail/probe-detail.state.ts @@ -0,0 +1,15 @@ +import { Selector, createSelector } from '@ngrx/store'; +import { createEntityAdapter, EntityState } from '@loafer/ng-entity'; + +export interface State { + pending: boolean; +} +export const initialState: State = { + pending: false, +}; + +export function getSelectors(selector: Selector) { + return { + selectPending: createSelector(selector, (state: State) => state.pending), + }; +} diff --git a/@overflow/probe/store/entity/probe/probe.effect.ts b/@overflow/probe/store/entity/probe/probe.effect.ts index 50dfcc0..b912fe7 100644 --- a/@overflow/probe/store/entity/probe/probe.effect.ts +++ b/@overflow/probe/store/entity/probe/probe.effect.ts @@ -64,7 +64,7 @@ export class Effects { return new ReadSuccess(probeHost); }) .catch((error: RPCClientError) => { - return of(new ReadAllByDomainIDFailure(error)); + return of(new ReadFailure(error)); }); @Effect() diff --git a/@overflow/probe/store/index.ts b/@overflow/probe/store/index.ts index 0b6dd0e..ee28bdd 100644 --- a/@overflow/probe/store/index.ts +++ b/@overflow/probe/store/index.ts @@ -10,15 +10,18 @@ import { MODULE } from '../probe.constant'; import * as ProbeEntityStore from './entity/probe'; import * as ProbeListContainerStore from './container/probe-list'; +import * as ProbeDetailContainerStore from './container/probe-detail'; export interface State { probes: ProbeEntityStore.State; probe_list_container: ProbeListContainerStore.State; + probe_detail_container: ProbeDetailContainerStore.State; } export const REDUCERS = { probes: ProbeEntityStore.reducer, probe_list_container: ProbeListContainerStore.reducer, + probe_detail_container: ProbeDetailContainerStore.reducer }; export const EFFECTS = [ @@ -36,3 +39,8 @@ export const ProbeListContainerSelector = ProbeListContainerStore.getSelectors(c selectState, (state: State) => state.probe_list_container )); + +export const ProbeDetailContainerSelector = ProbeDetailContainerStore.getSelectors(createSelector( + selectState, + (state: State) => state.probe_detail_container +)); diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 6018817..38984d4 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -20,7 +20,8 @@
-
+ +
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 3c395f9..e6cfe84 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -15,7 +15,7 @@ enum MenuOrientation { selector: 'of-pages', templateUrl: './pages.component.html', styleUrls: ['./pages.component.scss'], - animations: [ slide ], + // animations: [ fade ], }) export class PagesComponent implements AfterViewInit, OnDestroy, OnInit { layoutCompact = true; diff --git a/src/app/pages/probes/probe/probe-page.component.ts b/src/app/pages/probes/probe/probe-page.component.ts index 9cb132d..7b37e8b 100644 --- a/src/app/pages/probes/probe/probe-page.component.ts +++ b/src/app/pages/probes/probe/probe-page.component.ts @@ -11,8 +11,8 @@ import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; }) export class ProbePageComponent { - private isDetail: boolean; - private probeHostID: string; + isDetail: boolean; + probeHostID: string; constructor( private router: Router, diff --git a/src/styles.scss b/src/styles.scss index d6d5ed1..149bcb8 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -404,4 +404,14 @@ body .ui-progressbar .ui-progressbar-value { } .footer { height: 50px; +} +.block-icon { + position: absolute; + top: 40%; + left: 45%; + font-size: 50px; + color: #ffffff !important; +} +.ui-panel { + border: none !important; } \ No newline at end of file