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

probe detail in progress

Browse Source
This commit is contained in:
insanity 2018-05-25 18:18:06 +09:00
parent 68e3115d60
commit e15de633c2
20 changed files with 183 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
@overflow/probe/component/detail/detail.component.html
View File

@ -8,58 +8,76 @@
</div>
</div>
<p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display">
<of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
</p-dialog>
<!-- Probe info -->
<div class="ui-g ui-bottom-space-10">
<p-panel [showHeader]="false" class="nopad">
<div *ngIf="probe">
<div *ngIf="probeHost">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<div *ngIf="editMode" class="of-key-value-div">
<span>Name</span>
<span class="ng-star-inserted">
<input #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
<input #input type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="probeHost.probe.displayName = input.value">
</span>
</div>
<of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probe.displayName"></of-key-value>
<of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
<of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<div *ngIf="editMode" class="of-key-value-div">
<span>Description</span>
<span class="ng-star-inserted">
<input *ngIf="editMode" #input type="text" pInputText value="{{probe.description}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
<input *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value">
</span>
</div>
<of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probe.description"></of-key-value>
<of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
<of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
<of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-nopad">
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
<of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
</div>
</div>
</div>
</p-panel>
<!-- Host info -->
<p-panel [showHeader]="false" class="nopad">
<div *ngIf="probeHost">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
<of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
</div>
</div>
</div>
</p-panel>
</div>
<div class="ui-g" dir="rtl">
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
(click)="onRemoveClick()"></button>
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
</div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl>
<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> -->

125
@overflow/probe/component/detail/detail.component.ts
View File

@ -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<ProbeHost>();
@Output() discovery = new EventEmitter<number>();
constructor(
private route: ActivatedRoute,
// private detailStore: Store<DetailStore.State>,
// private modifyStore: Store<ModifyStore.State>,
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);
}
}
}

2
@overflow/probe/container/probe-detail-container.html
View File

@ -1 +1 @@
<of-probe-detail></of-probe-detail>
<of-probe-detail [probeHost]="(probeHosts$ | async)[0]" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>

32
@overflow/probe/container/probe-detail-container.ts
View File

@ -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<number>();
probeHosts$: Observable<ProbeHost[]>;
constructor(
private store: Store<ProbeStore.State>,
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);
}
}

15
@overflow/probe/container/probe-list-container.ts
View File

@ -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<ProbeHost[]>;
@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);
}
}

0
@overflow/probe/store/probe/index.ts → @overflow/probe/store/entity/probe/index.ts
View File

27
@overflow/probe/store/probe/probe.action.ts → @overflow/probe/store/entity/probe/probe.action.ts
View File

@ -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
;

19
@overflow/probe/store/probe/probe.effect.ts → @overflow/probe/store/entity/probe/probe.effect.ts
View File

@ -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<Action> = 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));
});
}

18
@overflow/probe/store/probe/probe.reducer.ts → @overflow/probe/store/entity/probe/probe.reducer.ts
View File

@ -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;
}

0
@overflow/probe/store/probe/probe.state.ts → @overflow/probe/store/entity/probe/probe.state.ts
View File

2
@overflow/probe/store/index.ts
View File

@ -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;

2
src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.ts
View File

@ -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';

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

@ -8,6 +8,10 @@ const routes: Routes = [
{
path: '',
component: DiscoveryPageComponent,
},
{
path: ':probeHostID',
component: DiscoveryPageComponent,
}
];

6
src/app/pages/discovery/discovery-page.component.ts
View File

@ -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);
});
}
}

2
src/app/pages/notification/notification-page.component.ts
View File

@ -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';

1
src/app/pages/pages.component.ts
View File

@ -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);
}

2
src/app/pages/probes/download/download-page.component.ts
View File

@ -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',

2
src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts
View File

@ -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',

5
src/app/pages/probes/probe/probe-page.component.html
View File

@ -3,5 +3,8 @@
</div>
<ng-template #detailView>
<of-probe-detail-container (targetSelect)="onTargetSelect($event)"></of-probe-detail-container>
<of-probe-detail-container [probeHostID]="probeHostID"
(targetSelect)="onTargetSelect($event)"
(discovery)="onDiscovery($event)"
></of-probe-detail-container>
</ng-template>

18
src/app/pages/probes/probe/probe-page.component.ts
View File

@ -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]);
}
}