2018-04-27 07:31:27 +00:00
|
|
|
import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
|
2018-04-06 13:02:46 +00:00
|
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
|
|
import { Store, select } from '@ngrx/store';
|
|
|
|
import { RPCClientError } from '@loafer/ng-rpc/protocol';
|
|
|
|
import * as DetailStore from '../../store/detail';
|
2018-04-27 07:31:27 +00:00
|
|
|
import * as ModifyStore from '../../store/modify';
|
|
|
|
import { DetailSelector, ModifySelector } from '../../store';
|
2018-04-06 13:02:46 +00:00
|
|
|
import { Probe } from '../../model';
|
2018-04-29 10:43:14 +00:00
|
|
|
import { ConfirmationService, Message } from 'primeng/primeng';
|
2018-04-06 13:02:46 +00:00
|
|
|
import * as CIDR from 'ip-cidr';
|
2018-04-27 07:31:27 +00:00
|
|
|
import { Subscription } from 'rxjs/Subscription';
|
2018-04-29 10:43:14 +00:00
|
|
|
import { MessageService } from 'primeng/components/common/messageservice';
|
2018-04-11 06:20:23 +00:00
|
|
|
// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
|
|
|
|
|
2018-04-06 13:02:46 +00:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'of-probe-detail',
|
|
|
|
templateUrl: './detail.component.html',
|
2018-04-29 10:43:14 +00:00
|
|
|
providers: [ConfirmationService, MessageService]
|
2018-04-06 13:02:46 +00:00
|
|
|
})
|
2018-04-27 07:31:27 +00:00
|
|
|
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
|
2018-04-06 13:02:46 +00:00
|
|
|
|
2018-04-27 07:31:27 +00:00
|
|
|
probeSubscription$: Subscription;
|
2018-04-06 13:02:46 +00:00
|
|
|
probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
|
2018-04-29 10:43:14 +00:00
|
|
|
modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe')));
|
2018-04-06 13:02:46 +00:00
|
|
|
probe: Probe = null;
|
2018-04-19 06:37:10 +00:00
|
|
|
IPRange: string;
|
2018-04-18 11:39:02 +00:00
|
|
|
display = false;
|
2018-04-29 10:43:14 +00:00
|
|
|
msgs: Message[] = [];
|
2018-04-06 13:02:46 +00:00
|
|
|
|
|
|
|
constructor(
|
|
|
|
private route: ActivatedRoute,
|
|
|
|
private router: Router,
|
2018-04-11 06:20:23 +00:00
|
|
|
private detailStore: Store<DetailStore.State>,
|
2018-04-27 07:31:27 +00:00
|
|
|
private modifyStore: Store<ModifyStore.State>,
|
2018-04-29 10:43:14 +00:00
|
|
|
private confirmationService: ConfirmationService,
|
|
|
|
private messageService: MessageService
|
2018-04-06 13:02:46 +00:00
|
|
|
) { }
|
|
|
|
|
|
|
|
ngOnInit() {
|
2018-04-27 07:31:27 +00:00
|
|
|
this.probeSubscription$ = this.probe$.subscribe(
|
2018-04-06 13:02:46 +00:00
|
|
|
(probe: Probe) => {
|
2018-04-16 08:28:39 +00:00
|
|
|
if (probe) {
|
2018-04-06 13:02:46 +00:00
|
|
|
this.probe = probe;
|
|
|
|
this.arrangeInfo();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
(error: RPCClientError) => {
|
|
|
|
console.log(error.response.message);
|
|
|
|
}
|
|
|
|
);
|
2018-04-27 07:31:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
ngOnDestroy() {
|
2018-04-29 10:43:14 +00:00
|
|
|
if (this.probeSubscription$) {
|
|
|
|
this.probeSubscription$.unsubscribe();
|
|
|
|
}
|
2018-04-06 13:02:46 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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()) {
|
2018-04-19 06:37:10 +00:00
|
|
|
return;
|
2018-04-06 13:02:46 +00:00
|
|
|
}
|
2018-04-19 06:37:10 +00:00
|
|
|
this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
|
2018-04-06 13:02:46 +00:00
|
|
|
}
|
|
|
|
|
2018-04-11 06:20:23 +00:00
|
|
|
onDiscoveryClick() {
|
2018-04-18 11:39:02 +00:00
|
|
|
this.display = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
onDiscoverycloseDialog() {
|
|
|
|
this.display = false;
|
2018-04-06 13:02:46 +00:00
|
|
|
}
|
|
|
|
|
2018-04-11 06:20:23 +00:00
|
|
|
onRemoveClick() {
|
|
|
|
this.confirmationService.confirm({
|
|
|
|
header: 'Confirmation',
|
|
|
|
icon: 'fa fa-trash',
|
|
|
|
message: 'Are you sure to remove this Probe?',
|
|
|
|
accept: () => {
|
2018-04-19 10:26:39 +00:00
|
|
|
this.router.navigate(['probes/list']);
|
2018-04-11 06:20:23 +00:00
|
|
|
},
|
|
|
|
reject: () => {
|
|
|
|
}
|
|
|
|
});
|
2018-04-06 13:02:46 +00:00
|
|
|
}
|
2018-04-27 07:31:27 +00:00
|
|
|
|
|
|
|
onDisplayNameChange(value: string) {
|
2018-04-29 10:43:14 +00:00
|
|
|
if (value === this.probe.displayName) {
|
|
|
|
return;
|
|
|
|
}
|
2018-04-27 07:31:27 +00:00
|
|
|
this.probe.displayName = value;
|
|
|
|
this.modifyStore.dispatch(
|
|
|
|
new ModifyStore.Modify(this.probe)
|
|
|
|
);
|
2018-04-29 10:43:14 +00:00
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
2018-04-27 07:31:27 +00:00
|
|
|
}
|
|
|
|
|
2018-04-06 13:02:46 +00:00
|
|
|
}
|
2018-04-06 11:02:18 +00:00
|
|
|
|