This commit is contained in:
crusader 2018-05-25 20:32:30 +09:00
commit 25d27f0996
89 changed files with 506 additions and 2259 deletions

View File

@ -4,13 +4,9 @@ import {
} from '@angular/core'; } from '@angular/core';
import { Store, select, StateObservable } from '@ngrx/store'; import { Store, select, StateObservable } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc'; import { RPCClientError } from '@loafer/ng-rpc';
// import * as ListStore from '@overflow/probe/store/list';
// import { ListSelector } from '@overflow/probe/store';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { Probe } from '@overflow/commons-typescript/model/probe'; import { Probe } from '@overflow/commons-typescript/model/probe';
import { AuthSelector } from '@overflow/member/store';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { Dropdown } from 'primeng/primeng';
@Component({ @Component({
selector: 'of-probe-selector', selector: 'of-probe-selector',
@ -33,7 +29,7 @@ export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestr
} }
ngOnInit() { ngOnInit() {
this.probesSubscription$ = this.probes$.subscribe( this.probesSubscription$ = this.probes$.subscribe (
(list: Probe[]) => { (list: Probe[]) => {
if (list !== null) { if (list !== null) {
this.probes = list; this.probes = list;

View File

@ -0,0 +1,12 @@
<div class="ui-inputgroup">
<span style="margin-right: 18px">{{title}} </span>
<input id="0" type="text" pInputText placeholder="127" maxlength="3" [(ngModel)]="first" value="{{first}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input id="1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input id="2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
<span class="ui-inputgroup-addon">.</span>
<input id="3" type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
</div>

View File

@ -0,0 +1,56 @@
import {
AfterContentInit,
Component,
EventEmitter,
Input,
Output,
OnInit,
} from '@angular/core';
@Component({
selector: 'of-ip-input',
templateUrl: './ip-input.component.html',
})
export class IpInputComponent implements OnInit, AfterContentInit {
first: string;
second: string;
third: string;
fourth: string;
@Input() hostIp;
@Input() title;
@Output() inputIp = new EventEmitter();
constructor(
) {
}
ngOnInit() {
if (this.hostIp !== '' && this.hostIp !== null && this.hostIp !== undefined) {
const tempIp = this.hostIp.split('.');
this.first = tempIp[0];
this.second = tempIp[1];
this.third = tempIp[2];
this.fourth = tempIp[3];
}
}
ngAfterContentInit() {
}
onIpInput(event) {
if (
(this.first !== '' && this.first !== undefined) &&
(this.second !== '' && this.second !== undefined) &&
(this.third !== '' && this.third !== undefined) &&
(this.fourth !== '' && this.fourth !== undefined) ) {
event.target.data = this.first + '.' + this.second + '.' + this.third + '.' + this.fourth;
this.inputIp.emit(event);
} else {
return;
}
}
}

View File

@ -5,7 +5,7 @@
<label>Probe</label> <label>Probe</label>
</div> </div>
<div class="ui-g-12 ui-bottom-space-20"> <div class="ui-g-12 ui-bottom-space-20">
<of-probe-selector [hidden]="requestStart" [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector> <of-probe-selector [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<label>IP Version</label> <label>IP Version</label>
@ -24,40 +24,13 @@
<input type="hidden" > <input type="hidden" >
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-inputgroup"> <of-ip-input [hostIp]="startHostIp" (inputIp)="onInputIP($event, 0)" [title]="'Start'"></of-ip-input>
<span style="margin-right: 18px">Start </span>
<input type="text" pInputText placeholder="127" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="1" maxlength="3">
</div>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-inputgroup"> <of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
<span style="margin-right: 24px">End </span>
<input type="text" pInputText placeholder="127" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="1" maxlength="3">
</div>
</div> </div>
<div class="ui-g-12 ui-bottom-space-20"> <div class="ui-g-12 ui-bottom-space-20">
<div class="ui-inputgroup"> <of-ip-input [hostIp]="excludeHostIp" (inputIp)="onInputIP($event, 2)" [title]="'Exclude'"></of-ip-input>
<span style="margin-right: 5px">Exclud </span>
<input type="text" pInputText placeholder="127" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="1" maxlength="3">
</div>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<label>Port type</label> <label>Port type</label>
@ -90,7 +63,7 @@
<label>Service</label> <label>Service</label>
</div> </div>
<div class="ui-g-12 ui-g-nopad"> <div class="ui-g-12 ui-g-nopad">
<of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector> <of-service-selector [(includeServices)]="includeServices"></of-service-selector>
</div> </div>
<div class="ui-g-12" dir="rtl"> <div class="ui-g-12" dir="rtl">
<button type="submit" label="Discovery Start" pButton class="ui-button-width-fit" ></button> <button type="submit" label="Discovery Start" pButton class="ui-button-width-fit" ></button>

View File

@ -16,6 +16,8 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
@Output() discoverySearchStartClick = new EventEmitter(); @Output() discoverySearchStartClick = new EventEmitter();
@Output() selectProbe = new EventEmitter(); @Output() selectProbe = new EventEmitter();
includeServices = [];
discoveryFormGroup: FormGroup; discoveryFormGroup: FormGroup;
ipVesion: number; ipVesion: number;
@ -28,6 +30,12 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
endPort: string; endPort: string;
excludePort: string; excludePort: string;
probe: number;
startHostIp: string;
endHostIp: string;
excludeHostIp: string;
constructor( constructor(
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
) { ) {
@ -37,6 +45,7 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
this.ipVesion = 0; this.ipVesion = 0;
this.portType = 0; this.portType = 0;
this.initForm(); this.initForm();
// this.hostIp = '192.168.1.10';
} }
ngAfterContentInit() { ngAfterContentInit() {
@ -56,4 +65,9 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
console.log(probe); console.log(probe);
this.selectProbe.emit(probe); this.selectProbe.emit(probe);
} }
onInputIP(event, idx) {
console.log(idx);
console.log(event.target.data);
}
} }

View File

@ -4,28 +4,10 @@
<input type="hidden" > <input type="hidden" >
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-inputgroup"> <of-ip-input [hostIp]="startHostIp" (inputIp)="onInputIP($event, 0)" [title]="'Start'"></of-ip-input>
<span style="margin-right: 18px">Start </span>
<input type="text" pInputText placeholder="127" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="1" maxlength="3">
</div>
</div> </div>
<div class="ui-g-12 ui-bottom-space-20"> <div class="ui-g-12 ui-bottom-space-20">
<div class="ui-inputgroup"> <of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
<span style="margin-right: 24px">End </span>
<input type="text" pInputText placeholder="127" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="0" maxlength="3">
<span class="ui-inputgroup-addon">.</span>
<input type="text" pInputText placeholder="1" maxlength="3">
</div>
</div> </div>
<div class="ui-g"> <div class="ui-g">

View File

@ -9,6 +9,8 @@ import {
}) })
export class SearchFilterComponent implements OnInit, AfterContentInit { export class SearchFilterComponent implements OnInit, AfterContentInit {
startHostIp: string;
endHostIp: string;
constructor( constructor(
) { ) {
@ -19,4 +21,8 @@ export class SearchFilterComponent implements OnInit, AfterContentInit {
ngAfterContentInit() { ngAfterContentInit() {
} }
onInputIP(event, idx) {
}
} }

View File

@ -1,4 +1,12 @@
import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core'; import {
Component,
OnInit,
Input,
AfterContentInit,
Output,
EventEmitter,
OnDestroy
} from '@angular/core';
import { Store, select, StateObservable } from '@ngrx/store'; import { Store, select, StateObservable } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc'; import { RPCClientError } from '@loafer/ng-rpc';
import * as ListStore from '@overflow/meta/crawler/store/list'; import * as ListStore from '@overflow/meta/crawler/store/list';
@ -18,8 +26,6 @@ export class ServiceSelectorComponent implements OnInit, AfterContentInit, OnDes
@Output() crawlerSelected = new EventEmitter<MetaCrawler>(); @Output() crawlerSelected = new EventEmitter<MetaCrawler>();
@Input() includeServices; @Input() includeServices;
@Input() disabled: boolean;
constructor( constructor(
private listStore: Store<ListStore.State>, private listStore: Store<ListStore.State>,
) { ) {

View File

@ -1,23 +1,17 @@
import { SettingComponent } from './setting/setting.component'; import { ProbeSelectorComponent } from './discovery/probe-selector/probe-selector.component';
import { ProbeSelectorComponent } from './setting/probe-selector/probe-selector.component'; import { ServiceSelectorComponent } from './discovery/service-selector/service-selector.component';
import { ServiceSelectorComponent } from './setting/filter/service-selector/service-selector.component';
import { FilterComponent } from './setting/filter/filter.component';
import { ResultComponent } from './setting/result/result.component';
import { FilterSummaryComponent } from './setting/filter-summary/filter-summary.component';
import { DiscoveryComponent } from './discovery/discovery.component'; import { DiscoveryComponent } from './discovery/discovery.component';
import { SearchConfigComponent } from './discovery/search-config/search-config.component'; import { SearchConfigComponent } from './discovery/search-config/search-config.component';
import { SearchFilterComponent } from './discovery/search-filter/search-filter.component'; import { SearchFilterComponent } from './discovery/search-filter/search-filter.component';
import { SearchResultComponent } from './discovery/search-result/search-result.component'; import { SearchResultComponent } from './discovery/search-result/search-result.component';
import { IpInputComponent } from './discovery/search-config/ip-input.component';
export const COMPONENTS = [ export const COMPONENTS = [
SettingComponent,
FilterComponent,
ServiceSelectorComponent, ServiceSelectorComponent,
ProbeSelectorComponent, ProbeSelectorComponent,
ResultComponent,
FilterSummaryComponent,
DiscoveryComponent, DiscoveryComponent,
SearchConfigComponent, SearchConfigComponent,
SearchFilterComponent, SearchFilterComponent,
SearchResultComponent SearchResultComponent,
IpInputComponent
]; ];

View File

@ -1,11 +0,0 @@
<div *ngIf="data" class="ui-g-12" (click)="onClick()">
<of-key-value *ngIf="data.discoverHost" [key]="'Host'" [value]="hostRange"></of-key-value>
<of-key-value *ngIf="data.discoverHost.discoverPort" [key]="'Port'" [value]="portRange"></of-key-value>
<span *ngIf="includeTCP">
TCP
</span>
<span *ngIf="includeUDP">
UDP
</span>
<of-key-value *ngIf="services !== ''" [key]="'Services'" [value]="services"></of-key-value>
</div>

View File

@ -1,59 +0,0 @@
import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
@Component({
selector: 'of-discovery-filter-summary',
templateUrl: './filter-summary.component.html',
})
export class FilterSummaryComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
@Output() click = new EventEmitter();
@Input() data: DiscoverZone;
private hostRange: string;
private portRange: string;
private includeTCP: boolean;
private includeUDP: boolean;
private services: string;
constructor(
) {
this.services = '';
}
ngOnInit() {
}
ngAfterContentInit() {
}
ngOnChanges(changes: SimpleChanges): void {
if (!this.data) {
return;
}
this.hostRange = this.data.discoverHost.firstScanRangev4 + ' ~ ' + this.data.discoverHost.lastScanRangev4;
if (this.data.discoverHost.discoverPort) {
this.portRange = this.data.discoverHost.discoverPort.firstScanRange + ' ~ ' + this.data.discoverHost.discoverPort.lastScanRange;
this.includeTCP = this.data.discoverHost.discoverPort.includeTCP;
this.includeUDP = this.data.discoverHost.discoverPort.includeUDP;
}
if (this.data.discoverHost.discoverPort.discoverService) {
const services = this.data.discoverHost.discoverPort.discoverService.includeServices;
if (services.length > 3) {
this.services = String(services.length) + ' services selected.';
return;
}
for (const service of services) {
this.services += service;
}
}
}
ngOnDestroy() {
}
onClick() {
this.click.emit();
}
}

View File

@ -1,66 +0,0 @@
<div class="ui-g">
<div>
<div class="ui-g">
<div class="ui-g-12">
<p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
</div>
</div>
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6">
<span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP">
<label for="float-input">Start Ip</label>
</span>
</div>
<div class="ui-g-12 ui-md-6">
<span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP">
<label for="float-input">End Ip</label>
</span>
</div>
</div>
<div class="ui-g">
<div class="ui-g-12">
<p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
</div>
<div class="ui-g-12">
<div class="ui-g-6">
TCP &nbsp;
<p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
</div>
<div class="ui-g-6">
UDP &nbsp;
<p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
</div>
</div>
</div>
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-6">
<span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort" [disabled]="!portChecked">
<label for="float-input">Start Port</label>
</span>
</div>
<div class="ui-g-12 ui-md-6">
<span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort" [disabled]="!portChecked">
<label for="float-input">End Port</label>
</span>
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-12 ui-g-nopad">
<p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)" binary="true"></p-checkbox>
</div>
<of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
</div>
</div>
</div>

View File

@ -1,116 +0,0 @@
import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import * as CIDR from 'ip-cidr';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { DiscoverZone, DiscoverPort, DiscoverService } from '@overflow/commons-typescript/model/discovery';
@Component({
selector: 'of-discovery-filter',
templateUrl: './filter.component.html',
})
export class FilterComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
@Input() probe: Probe;
@Input() requestStart: boolean;
@Output() discoveryRequested = new EventEmitter<DiscoverZone>();
private startIP: string;
private endIP: string;
private startPort: string;
private endPort: string;
private includeServices = [];
private hostChecked = true;
private portChecked = true;
private serviceChecked = true;
private tcpChecked = true;
private udpChecked = true;
constructor(
) {
}
ngOnInit() {
}
ngAfterContentInit() {
}
ngOnDestroy() {
}
hostRange() {
if (!this.probe || this.probe === undefined) {
return;
}
const cidr = new CIDR(this.probe.cidr);
if (!cidr.isValid()) {
alert('Invalid cidr : ' + this.probe.cidr);
return;
}
this.startIP = cidr.addressStart.address;
this.endIP = cidr.addressEnd.address;
}
portRange() {
this.startPort = '1';
this.endPort = '1024';
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['probe']) {
this.hostRange();
this.portRange();
}
if (changes['requestStart'] && this.requestStart) {
this.onStart();
}
}
onPortCheckChange(serviceCheckbox, checked) {
if (!checked) {
serviceCheckbox.checked = false;
this.serviceChecked = false;
}
}
onServiceCheckChange(portCheckbox, checked) {
if (checked) {
portCheckbox.checked = true;
this.portChecked = true;
}
}
onStart() {
let discoverPort: DiscoverPort = null;
let discoverService: DiscoverService = null;
if (this.serviceChecked) {
const services = new Array();
for (const service of this.includeServices) {
services.push(service.description); // FIXME to const name
}
discoverService = {
includeServices: services,
};
}
if (this.portChecked) {
discoverPort = {
firstScanRange: Number(this.startPort),
lastScanRange: Number(this.endPort),
includeTCP: this.tcpChecked,
includeUDP: this.udpChecked,
excludePorts: null,
discoverService: discoverService
};
}
const discoverZone: DiscoverZone = {
discoverHost: {
firstScanRangev4: this.startIP,
lastScanRangev4: this.endIP,
discoverPort: discoverPort
},
};
this.discoveryRequested.emit(discoverZone);
}
}

View File

@ -1,190 +0,0 @@
import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { Store, select, StateObservable } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Subscription } from 'rxjs/Subscription';
import { TreeNode } from 'primeng/primeng';
import * as DiscoveredStore from '@overflow/discovery/store/setting';
import { SettingSelector, DiscoverSelector } from '@overflow/discovery/store';
import * as DiscoverStore from '@overflow/discovery/store/discover';
import * as RegistStore from '@overflow/discovery/store/regist';
import { Zone } from '@overflow/commons-typescript/model/discovery';
import { Host } from '@overflow/commons-typescript/model/discovery';
import { Port } from '@overflow/commons-typescript/model/discovery';
import { Service } from '@overflow/commons-typescript/model/discovery';
@Component({
selector: 'of-discovery-result',
templateUrl: './result.component.html',
})
export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
treeNodes = [];
selectedNodes = [];
zones: Map<string, Zone> = null;
checkedSet = new Set();
resultSubscription$: Subscription;
result$: any;
startedSubscription$: Subscription;
started$: any;
endedSubscription$: Subscription;
ended$: any;
inProgress = false;
selectedDiscoveryResult: TreeNode[];
constructor(
private discoverdStore: Store<DiscoveredStore.State>,
private discoverStore: Store<DiscoverStore.State>,
private registStore: Store<RegistStore.State>,
) {
this.result$ = discoverStore.pipe(select(DiscoverSelector.select('zones')));
this.started$ = discoverStore.pipe(select(DiscoverSelector.select('isStart')));
this.ended$ = discoverStore.pipe(select(DiscoverSelector.select('isEnd')));
}
ngOnInit() {
this.resultSubscription$ = this.result$.subscribe(
(zones: Map<string, Zone>) => {
if (zones !== undefined && zones !== null) {
console.log(zones);
this.treeNodes = this.convertTreeViewZone(zones);
this.zones = zones;
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
this.startedSubscription$ = this.started$.subscribe(
(isStart: boolean) => {
if (isStart !== undefined && isStart !== null && isStart) {
this.inProgress = true;
console.log('##Discovery has started.##');
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
this.endedSubscription$ = this.ended$.subscribe(
(isEnd: boolean) => {
if (isEnd !== undefined && isEnd !== null && isEnd) {
console.log('##Discovery has done.##');
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
}
ngAfterContentInit() {
}
ngOnDestroy() {
if (this.startedSubscription$) {
this.startedSubscription$.unsubscribe();
}
if (this.endedSubscription$) {
this.endedSubscription$.unsubscribe();
}
if (this.resultSubscription$) {
this.resultSubscription$.unsubscribe();
}
}
save() {
}
convertTreeViewZone(zones: Map<string, Zone>) {
if (zones === undefined || zones === null) {
return;
}
const treeNodes: any[] = [];
zones.forEach((value: Zone, key: string, map) => {
const jZone: any = {
label: 'Zone - ' + value.iface,
// className: 'cn' + value.ip,
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
};
jZone.obj = value;
jZone.children = this.convertViewHost(value.hosts);
treeNodes.push(jZone);
});
return treeNodes;
}
convertViewHost(hosts): any[] {
if (hosts === undefined || hosts === null) {
return null;
}
const hostNodes: any[] = [];
hosts.forEach((host, hostKey) => {
const jHost: any = {
label: 'Host - ' + host.ipv4,
// className: 'cn' + host.ip
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
};
jHost.obj = host;
jHost.children = this.convertViewPort(host.ports);
hostNodes.push(jHost);
});
return hostNodes;
}
convertViewPort(ports): any[] {
if (ports === undefined || ports === null || ports.size < 0) {
return null;
}
const portChildren: any[] = [];
ports.forEach((port, portKey) => {
const jPort: any = {
label: 'Port - ' + port.portNumber,
// className: 'cn' + port.portNumber,
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
};
jPort.obj = port;
jPort.children = this.convertViewService(port.services);
portChildren.push(jPort);
});
return portChildren;
}
convertViewService(services): any[] {
if (services === undefined || services === null || services.size <= 0) {
return null;
}
const serviceChildren: any[] = [];
services.forEach((service, serviceKey) => {
const jService: any = {
label: 'Service - ' + service.serviceName,
// className: 'cn' + service.serviceName,
};
jService.obj = service;
serviceChildren.push(jService);
});
return serviceChildren;
}
}

View File

@ -1,13 +0,0 @@
<div class="ui-g-12">
<div *ngIf="inProgress">
<p-progressBar mode="indeterminate"></p-progressBar>
</div>
<p-blockUI [target]="result" [blocked]="inProgress"></p-blockUI>
<p-panel #result [showHeader]="false">
<div>
result
</div>
<p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
</p-panel>
</div>

View File

@ -1,198 +0,0 @@
import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { Store, select, StateObservable } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Subscription } from 'rxjs/Subscription';
import { TreeNode } from 'primeng/primeng';
import * as DiscoveredStore from '@overflow/discovery/store/setting';
import { SettingSelector, DiscoverSelector } from '@overflow/discovery/store';
import * as DiscoverStore from '@overflow/discovery/store/discover';
import * as RegistStore from '@overflow/discovery/store/regist';
import { Zone } from '@overflow/commons-typescript/model/discovery';
import { Host } from '@overflow/commons-typescript/model/discovery';
import { Port } from '@overflow/commons-typescript/model/discovery';
import { Service } from '@overflow/commons-typescript/model/discovery';
@Component({
selector: 'of-discovery-result',
templateUrl: './result.component.html',
})
export class ResultComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
@Input() started: boolean;
treeNodes = [];
selectedNodes = [];
zones: Map<string, Zone> = null;
checkedSet = new Set();
resultSubscription$: Subscription;
result$: any;
startedSubscription$: Subscription;
started$: any;
endedSubscription$: Subscription;
ended$: any;
inProgress = false;
selectedDiscoveryResult: TreeNode[];
constructor(
private discoverdStore: Store<DiscoveredStore.State>,
private discoverStore: Store<DiscoverStore.State>,
private registStore: Store<RegistStore.State>,
) {
this.result$ = discoverStore.pipe(select(DiscoverSelector.select('zones')));
this.started$ = discoverStore.pipe(select(DiscoverSelector.select('isStart')));
this.ended$ = discoverStore.pipe(select(DiscoverSelector.select('isEnd')));
}
ngOnInit() {
this.inProgress = true;
this.resultSubscription$ = this.result$.subscribe(
(zones: Map<string, Zone>) => {
if (zones !== undefined && zones !== null) {
console.log(zones);
this.treeNodes = this.convertTreeViewZone(zones);
this.zones = zones;
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
this.startedSubscription$ = this.started$.subscribe(
(isStart: boolean) => {
if (isStart !== undefined && isStart !== null && isStart) {
console.log('##Discovery has started.##');
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
this.endedSubscription$ = this.ended$.subscribe(
(isEnd: boolean) => {
if (isEnd !== undefined && isEnd !== null && isEnd) {
console.log('##Discovery has done.##');
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
}
ngAfterContentInit() {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['started'] && !changes['started'].currentValue) {
this.inProgress = false;
}
}
ngOnDestroy() {
if (this.startedSubscription$) {
this.startedSubscription$.unsubscribe();
}
if (this.endedSubscription$) {
this.endedSubscription$.unsubscribe();
}
if (this.resultSubscription$) {
this.resultSubscription$.unsubscribe();
}
}
save() {
}
convertTreeViewZone(zones: Map<string, Zone>) {
if (zones === undefined || zones === null) {
return;
}
const treeNodes: any[] = [];
zones.forEach((value: Zone, key: string, map) => {
const jZone: any = {
label: 'Zone - ' + value.iface,
// className: 'cn' + value.ip,
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
};
jZone.obj = value;
jZone.children = this.convertViewHost(value.hosts);
treeNodes.push(jZone);
});
return treeNodes;
}
convertViewHost(hosts): any[] {
if (hosts === undefined || hosts === null) {
return null;
}
const hostNodes: any[] = [];
hosts.forEach((host, hostKey) => {
const jHost: any = {
label: 'Host - ' + host.ipv4,
// className: 'cn' + host.ip
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
};
jHost.obj = host;
jHost.children = this.convertViewPort(host.ports);
hostNodes.push(jHost);
});
return hostNodes;
}
convertViewPort(ports): any[] {
if (ports === undefined || ports === null || ports.size < 0) {
return null;
}
const portChildren: any[] = [];
ports.forEach((port, portKey) => {
const jPort: any = {
label: 'Port - ' + port.portNumber,
// className: 'cn' + port.portNumber,
expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder',
};
jPort.obj = port;
jPort.children = this.convertViewService(port.services);
portChildren.push(jPort);
});
return portChildren;
}
convertViewService(services): any[] {
if (services === undefined || services === null || services.size <= 0) {
return null;
}
const serviceChildren: any[] = [];
services.forEach((service, serviceKey) => {
const jService: any = {
label: 'Service - ' + service.serviceName,
// className: 'cn' + service.serviceName,
};
jService.obj = service;
serviceChildren.push(jService);
});
return serviceChildren;
}
}

View File

@ -1,36 +0,0 @@
<!-- <div [style.height.px]="height">
<div dir="rtl">
<p-button (onClick)="onCancel()" icon="fa fa-fw fa-close"></p-button>
</div>
<div>
<of-probe-selector [hidden]="requestStart" #probeSelectorComponent [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
<p-blockUI [target]="df" [blocked]="!selectedProbe && !probe"></p-blockUI>
<p-panel #df [showHeader]="false">
<div [@discoveryFilter]="!requestStart ? 'full' : 'summary'">
<div [hidden]="requestStart">
<of-discovery-filter #filterComponent [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
</div>
<div [hidden]="!requestStart">
<of-discovery-filter-summary [data]="filterData" (click)="onSummaryClick($event)"></of-discovery-filter-summary>
</div>
</div>
</p-panel>
<div dir="rtl" *ngIf="!requestStart">
<button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
(click)="requestStart = true"></button>
<button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
</div>
</div>
<div *ngIf="requestStart" [@result]="!requestStart ? 'hidden' : 'show'">
<of-discovery-result (close)="onCancel()" [started]="started"></of-discovery-result>
<div dir="rtl">
<button [disabled]="!selectedProbe && !probe" pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit"
(click)="onSave()"></button>
<button pButton type="button" label="Stop" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onStop()"></button>
</div>
</div>
</div> -->

View File

@ -1,156 +0,0 @@
import {
Component, OnInit, AfterContentInit, Output, EventEmitter,
Input, OnDestroy, OnChanges, SimpleChanges, ViewChild
} from '@angular/core';
import { Store } from '@ngrx/store';
import {
DiscoverZone,
} from '@overflow/commons-typescript/model/discovery';
import * as DiscoverStore from '../../store/discover';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ResultComponent } from './result/result.component';
import { ProbeSelectorComponent } from './probe-selector/probe-selector.component';
import { FilterComponent } from './filter/filter.component';
import { trigger, state, transition, style, animate } from '@angular/animations';
@Component({
selector: 'of-discovery-setting',
templateUrl: './setting.component.html',
animations: [
trigger(
'discoveryFilter', [
state('summary', style({
height: '70px',
opacity: 0.9,
})),
state('full', style({
height: '500px',
opacity: 1,
})),
transition('* => *', animate('200ms ease-in')),
]),
trigger(
'result', [
state('show', style({
height: '300px',
opacity: 1,
})),
state('hidden', style({
height: '0px',
opacity: 0,
})),
transition('* => *', animate('200ms ease-in')),
]
)
]
})
export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
@Input() visible: boolean;
@Input() probe: Probe;
@Output() close = new EventEmitter();
private requestStart = false;
private started = false;
private filterData: DiscoverZone;
private selectedProbe: Probe;
private height: number;
@ViewChild('probeSelectorComponent') probeSelectorComponent: ProbeSelectorComponent;
@ViewChild('filterComponent') filterComponent: FilterComponent;
@ViewChild('resultComponent') resultComponent: ResultComponent;
constructor(
private discoverStore: Store<DiscoverStore.State>,
) {
this.height = window.innerHeight * 0.9;
}
ngOnInit() {
this.selectedProbe = this.probe;
}
ngAfterContentInit() {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['visible']) {
const change = changes['visible'];
if (!change.previousValue && change.currentValue) {
this.initAll();
} else if (change.previousValue && !change.currentValue) {
this.destroyAll();
}
}
}
ngOnDestroy() {
this.selectedProbe = null;
this.started = false;
this.close.emit();
this.requestStart = false;
}
initAll() {
this.ngOnInit();
if (this.probeSelectorComponent) {
this.probeSelectorComponent.ngOnInit();
}
if (this.filterComponent) {
this.filterComponent.ngOnInit();
}
if (this.resultComponent) {
this.resultComponent.ngOnInit();
}
}
destroyAll() {
this.ngOnDestroy();
if (this.probeSelectorComponent) {
this.probeSelectorComponent.ngOnDestroy();
}
if (this.filterComponent) {
this.filterComponent.ngOnDestroy();
}
if (this.resultComponent) {
this.resultComponent.ngOnDestroy();
}
}
onProbeSelect(probe: Probe) {
this.selectedProbe = probe;
}
onDiscoveryStart(discoverZone: DiscoverZone) {
this.filterData = discoverZone;
this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
{ probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
setTimeout(() => {
this.started = true;
// this.requestStart = false;
});
}
onCancel() {
this.destroyAll();
}
onSave() {
this.resultComponent.save();
}
onStop() {
this.started = false;
}
onSummaryClick() {
if (this.started) {
return;
}
this.requestStart = false;
}
}

View File

@ -1 +1 @@
<of-discovery></of-discovery>

View File

@ -1,9 +1,8 @@
import { import {
AfterContentInit, Component, AfterContentInit, Component, Input,
OnInit OnInit
} from '@angular/core'; } from '@angular/core';
import { select, StateObservable } from '@ngrx/store'; import { select, StateObservable } from '@ngrx/store';
import { ListSelector } from '../../../probe/store';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
@ -17,13 +16,14 @@ export class DiscoveryContainerComponent implements OnInit, AfterContentInit {
// discovery start // discovery start
// discovery stop // discovery stop
// get service list // get service list
probes$: StateObservable; @Input() hostID;
constructor( constructor(
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
) { ) {
// this.returnURL = this.activatedRoute.snapshot.queryParams['probe'] || null; if (this.hostID > 0 && this.hostID !== undefined ) {
// this.probes$ = listStore.pipe(select(ListSelector.select('probes'))); console.log('ddddddddddddddddddddddddddddddddddddddd');
}
} }
ngOnInit() { ngOnInit() {

View File

@ -9,8 +9,8 @@ import { DiscoveryLoggerModule } from './discovery-logger.module';
import { COMPONENTS } from './component'; import { COMPONENTS } from './component';
import { SERVICES } from './service'; import { SERVICES } from './service';
import { PrimeNGModules } from '@overflow/commons/prime-ng/prime-ng.module'; import { PrimeNGModules } from '@overflow/commons/prime-ng/prime-ng.module';
import { BrowserModule } from '@angular/platform-browser';
import { KeyValueModule } from '@overflow/commons/component/key-value/key-value.module'; import { KeyValueModule } from '@overflow/commons/component/key-value/key-value.module';
import { CONTAINER_COMPONENTS } from './container';
@NgModule({ @NgModule({
imports: [ imports: [
@ -24,10 +24,12 @@ import { KeyValueModule } from '@overflow/commons/component/key-value/key-value.
KeyValueModule KeyValueModule
], ],
declarations: [ declarations: [
COMPONENTS COMPONENTS,
CONTAINER_COMPONENTS
], ],
exports: [ exports: [
COMPONENTS, COMPONENTS,
CONTAINER_COMPONENTS
], ],
providers: [ providers: [
SERVICES, SERVICES,

View File

@ -1,9 +1,13 @@
<h1>Notifications</h1> <h1>Notifications</h1>
<div class="ui-g-12" dir="rtl"> <div *ngIf="!notificationPage; else content">
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button> No data
</div> </div>
<ng-template #content>
<p-table [value]="notificationPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" > <div class="ui-g-12" dir="rtl">
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
</div>
<div>왜 이 div가 없으면 위에 버튼이 안눌릴까요 ㅠㅠ 한참 헤맸자농ㅠㅠ </div>
<p-table [value]="notificationPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th style="width:9em">Date</th> <th style="width:9em">Date</th>
@ -20,5 +24,8 @@
<td>{{notification.member.name}}</td> <td>{{notification.member.name}}</td>
</tr> </tr>
</ng-template> </ng-template>
</p-table> </p-table>
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator> <p-paginator #paginator [rows]="notificationPage.size" [totalRecords]="notificationPage.totalElements"
(onPageChange)="onPaginate($event)" [first]="2"></p-paginator>
</ng-template>

View File

@ -1,105 +1,35 @@
import { Component, Input } from '@angular/core'; import { Component, Input, EventEmitter, Output, ViewChild, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Notification } from '@overflow/commons-typescript/model/notification'; import { Notification } from '@overflow/commons-typescript/model/notification';
import { Page } from '@overflow/commons-typescript/model/commons/Page'; import { Page } from '@overflow/commons-typescript/model/commons/Page';
import { Paginator } from 'primeng/primeng';
@Component({ @Component({
selector: 'of-notification-list', selector: 'of-notification-list',
templateUrl: './list.component.html', templateUrl: './list.component.html',
}) })
export class NotificationListComponent { export class NotificationListComponent implements OnChanges {
@Input() notificationPage: Page<Notification>; @Input() notificationPage: Page<Notification>;
@Output() pageChange = new EventEmitter<number>();
@Output() markAll = new EventEmitter();
@Output() select = new EventEmitter();
@ViewChild('paginator') paginator: Paginator;
constructor( ngOnChanges(changes: SimpleChanges): void {
) { } if (changes['notificationPage']) {
this.paginator.changePage(this.notificationPage.number);
}
}
// ngOnInit() { onPaginate(e) {
// // this.notificationSubscription$ = this.notification$.subscribe( this.pageChange.emit(e.page);
// // (page: Page) => { }
// // if (page !== null) {
// // this.notifications = page.content;
// // this.totalLength = page.totalElements;
// // }
// // },
// // (error: RPCClientError) => {
// // console.log(error.response.message);
// // }
// // );
// this.readSuccess$.subscribe( onRowSelect(e) {
// (noti: Notification) => { this.select.emit(e.data);
// if (noti) { }
// this.getNotifications(this.currPage);
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
// }
// ngAfterContentInit() { onMarkAllAsRead() {
// this.getNotifications(this.currPage); this.markAll.emit();
// } }
// ngOnDestroy() {
// if (this.notificationSubscription$) {
// this.notificationSubscription$.unsubscribe();
// }
// }
// // updateData(noti: Notification) {
// // for (let i = 0; i < this.notifications.length; i++) {
// // const exist = this.notifications[i];
// // if (exist.id === noti.id) {
// // this.notifications[i] = noti;
// // return;
// // }
// // }
// // }
// getNotifications(pageIndex: number) {
// // this.listStore.select(AuthSelector.select('member')).subscribe(
// // (member: Member) => {
// // const pageParams: PageParams = {
// // pageNo: pageIndex + '',
// // countPerPage: this.pageSize,
// // sortCol: 'id',
// // sortDirection: 'descending'
// // };
// // this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
// // this.currPage = pageIndex;
// // },
// // (error) => {
// // console.log(error);
// // }
// // );
// }
// onRowSelect(event) {
// this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
// alert('Will redirect to ' + event.data.url);
// // this.router.navigate([n.url]);
// }
// onPaging(e) {
// this.getNotifications(e.page);
// }
// onMarkAllAsRead() {
// // this.listStore.select(AuthSelector.select('member')).subscribe(
// // (member: Member) => {
// // const pageParams: PageParams = {
// // pageNo: this.currPage + '',
// // countPerPage: this.pageSize,
// // sortCol: 'id',
// // sortDirection: 'descending'
// // };
// // this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
// // },
// // (error) => {
// // console.log(error);
// // }
// // );
// }
} }

View File

@ -1 +1,5 @@
<of-notification-list [notificationPage]="notificationPage$ | async"></of-notification-list> <of-notification-list [notificationPage]="notificationPage$ | async"
(pageChange)="onPageChange($event)"
(markAll)="markAllasRead($event)"
(select)="notificationSelected($event)"
></of-notification-list>

View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks'; import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
@ -10,6 +10,7 @@ import { Member } from '@overflow/commons-typescript/model/member';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams'; import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { Page } from '@overflow/commons-typescript/model/commons/Page'; import { Page } from '@overflow/commons-typescript/model/commons/Page';
import { Notification } from '@overflow/commons-typescript/model/notification'; import { Notification } from '@overflow/commons-typescript/model/notification';
import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'of-notification-container', selector: 'of-notification-container',
@ -17,23 +18,37 @@ import { Notification } from '@overflow/commons-typescript/model/notification';
}) })
export class NotificationListContainerComponent implements OnInit { export class NotificationListContainerComponent implements OnInit {
notificationPage$: Observable<Page<Notification>>; notificationPage$: Observable<Page<Notification>>;
@Output() pageChange = new EventEmitter<number>();
pageNo: number;
constructor( constructor(
private store: Store<ListStore.State>, private store: Store<ListStore.State>,
private route: ActivatedRoute
) { ) {
this.notificationPage$ = store.pipe(select(NotificationSelector.select('page'))); this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
} }
ngOnInit() { ngOnInit() {
this.route.queryParams.subscribe(queryParams => {
this.pageNo = queryParams['page'] || 0;
this.getNotifications();
});
}
onPageChange(pageNo: number) {
this.pageChange.emit(pageNo);
}
getNotifications() {
this.store.select(AuthSelector.select('member')).subscribe( this.store.select(AuthSelector.select('member')).subscribe(
(member: Member) => { (member: Member) => {
const pageParams: PageParams = { const pageParams: PageParams = {
pageNo: 0, pageNo: this.pageNo,
countPerPage: 10, countPerPage: 10,
sortCol: 'id', sortCol: 'id',
sortDirection: 'descending', sortDirection: 'descending',
}; };
this.store.dispatch(new ListStore.ReadAllByMember({member, pageParams})); this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
}, },
(error) => { (error) => {
console.log(error); console.log(error);
@ -41,4 +56,25 @@ export class NotificationListContainerComponent implements OnInit {
); );
} }
markAllasRead() {
this.store.select(AuthSelector.select('member')).subscribe(
(member: Member) => {
const pageParams: PageParams = {
pageNo: this.pageNo,
countPerPage: 10,
sortCol: 'id',
sortDirection: 'descending'
};
this.store.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
},
(error) => {
console.log(error);
}
);
}
notificationSelected(notification: Notification) {
// this.router.navigate([notification.url]);
alert('redirect to ' + notification.url);
}
} }

View File

@ -2,64 +2,83 @@
<div class="ui-g-6 ui-nopad"> <div class="ui-g-6 ui-nopad">
<h1>Info</h1> <h1>Info</h1>
</div> </div>
<!-- <p-messages [(value)]="msgs"></p-messages> -->
<div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px"> <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
<button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button> <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()"></button> <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()"></button>
</div> </div>
</div> </div>
<p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display"> <!-- Probe info -->
<of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
</p-dialog>
<div class="ui-g ui-bottom-space-10"> <div class="ui-g ui-bottom-space-10">
<p-panel [showHeader]="false" class="nopad"> <p-panel [showHeader]="false" class="nopad">
<div *ngIf="probe"> <div *ngIf="probeHost">
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad"> <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"> <div *ngIf="editMode" class="of-key-value-div">
<span>Name</span> <span>Name</span>
<span class="ng-star-inserted"> <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> </span>
</div> </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>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad"> <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>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad"> <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"> <div *ngIf="editMode" class="of-key-value-div">
<span>Description</span> <span>Description</span>
<span class="ng-star-inserted"> <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> </span>
</div> </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>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad"> <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>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad"> <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>
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad"> <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> <of-key-value [key]="'Authrozied by'" [value]="probeHost.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>
</div> </div>
</div> </div>
</div> </div>
</p-panel> </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>
<div class="ui-g" dir="rtl"> <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 <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
(click)="onRemoveClick()"></button> (click)="onRemoveClick()"></button>
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button> <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
</div> </div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog> <!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> <p-growl [(value)]="msgs"></p-growl> -->

View File

@ -1,129 +1,66 @@
import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core'; import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
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 { MessageService } from 'primeng/components/common/messageservice';
// import { SettingComponent as DiscoverySettingComponent } from '@overflow/discovery/component/setting/setting.component';
@Component({ @Component({
selector: 'of-probe-detail', selector: 'of-probe-detail',
templateUrl: './detail.component.html', templateUrl: './detail.component.html',
providers: [ConfirmationService, MessageService] providers: [MessageService]
}) })
export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy { export class ProbeDetailComponent {
probeSubscription$: Subscription; @Input() probeHost: ProbeHost;
// probe$ = this.detailStore.pipe(select(DetailSelector.select('probe'))); @Output() modify = new EventEmitter<ProbeHost>();
// modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe'))); @Output() discovery = new EventEmitter<number>();
probe: Probe = null;
IPRange: string;
display = false;
msgs: Message[] = [];
constructor( editMode = false;
private route: ActivatedRoute,
// private detailStore: Store<DetailStore.State>,
// private modifyStore: Store<ModifyStore.State>,
private confirmationService: ConfirmationService,
private messageService: MessageService
) { }
ngOnInit() { constructor(private messageService: MessageService) {
// this.probeSubscription$ = this.probe$.subscribe(
// (probe: Probe) => {
// if (probe) {
// this.probe = probe;
// this.arrangeInfo();
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
} }
ngOnDestroy() { onEditSave() {
if (this.probeSubscription$) { const displayNameValidation = this.checkValidDisplayName();
this.probeSubscription$.unsubscribe(); if (displayNameValidation) {
} alert(displayNameValidation);
}
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; return;
} }
this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
const descriptionValidation = this.checkValidDescription();
if (descriptionValidation) {
alert(descriptionValidation);
return;
}
this.modify.emit(this.probeHost);
this.editMode = false;
} }
onDiscoveryClick() { onDiscoveryClick() {
this.display = true; this.discovery.emit(this.probeHost.id);
} }
onDiscoveryClose() { checkValidDisplayName(): string {
this.display = false; const displayName = this.probeHost.probe.displayName;
if (displayName.length <= 2 || displayName.length > 20) {
return 'displayname length : 3 ~ 20';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (displayName.match(regex)) {
return 'Cannot use special characters.';
}
return null;
} }
onRemoveClick() { checkValidDescription(): string {
this.confirmationService.confirm({ const description = this.probeHost.probe.description;
header: 'Confirmation', if (description.length > 50) {
icon: 'fa fa-trash', return 'description length : 0 ~ 50';
message: 'Are you sure to remove this Probe?',
accept: () => {
// this.router.navigate(['probes/list']);
},
reject: () => {
} }
}); const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (description.match(regex)) {
return 'Cannot use special characters.';
} }
return null;
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);
}
}
} }

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>

View File

@ -1,9 +1,39 @@
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';
import { RPCClientError } from '@loafer/ng-rpc';
@Component({ @Component({
selector: 'of-probe-detail-container', selector: 'of-probe-detail-container',
templateUrl: './probe-detail-container.html', templateUrl: './probe-detail-container.html',
}) })
export class ProbeDetailContainerComponent { export class ProbeDetailContainerComponent implements OnInit {
@Input() probeHostID;
@Output() discovery = new EventEmitter<number>();
probeHosts$: Observable<ProbeHost[]>;
error$: Observable<RPCClientError>;
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);
}
} }

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 { ProbeHost } from '@overflow/commons-typescript/model/probe';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import * as ProbeStore from '../store/probe'; import * as ProbeStore from '../store/entity/probe';
import { ProbeSelector } from '../store'; import { ProbeSelector } from '../store';
import { AuthSelector } from '@overflow/member/store'; import { AuthSelector } from '@overflow/member/store';
import { Domain } from '@overflow/commons-typescript/model/domain'; 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', selector: 'of-probe-list-container',
templateUrl: './probe-list-container.html', templateUrl: './probe-list-container.html',
}) })
export class ProbeListContainerComponent implements OnInit, AfterContentInit { export class ProbeListContainerComponent implements OnInit {
probeHosts$: Observable<ProbeHost[]>; probeHosts$: Observable<ProbeHost[]>;
@Output() select = new EventEmitter(); @Output() select = new EventEmitter();
@ -20,10 +20,6 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit {
this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts'))); this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
} }
onSelect(probeHost: ProbeHost) {
this.select.emit(probeHost);
}
ngOnInit() { ngOnInit() {
this.store.select(AuthSelector.select('domain')).subscribe( this.store.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => { (domain: Domain) => {
@ -35,7 +31,8 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit {
); );
} }
ngAfterContentInit() { onSelect(probeHost: ProbeHost) {
this.select.emit(probeHost);
} }
} }

View File

@ -0,0 +1,2 @@
export * from './probe-list.reducer';
export * from './probe-list.state';

View File

@ -0,0 +1,36 @@
import { ActionType, Actions } from '../../entity/probe';
import {
State,
initialState,
} from './probe-list.state';
import { Probe } from '@overflow/commons-typescript/model/probe';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByDomainID: {
return {
...state,
pending: true,
};
}
case ActionType.ReadAllByDomainIDSuccess: {
return {
...state,
pending: false,
};
}
case ActionType.ReadAllByDomainIDFailure: {
return {
...state,
pending: true,
};
}
default: {
return state;
}
}
}

View File

@ -0,0 +1,7 @@
export interface State {
pending: boolean;
}
export const initialState: State = {
pending: false,
};

View File

@ -1,6 +1,6 @@
import { Action } from '@ngrx/store'; import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc'; 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 { export enum ActionType {
ReadAllByDomainID = '[probe.list] ReadAllByDomainID', ReadAllByDomainID = '[probe.list] ReadAllByDomainID',
@ -10,6 +10,10 @@ export enum ActionType {
Read = '[probe.detail] Read', Read = '[probe.detail] Read',
ReadSuccess = '[probe.detail] ReadSuccess', ReadSuccess = '[probe.detail] ReadSuccess',
ReadFailure = '[probe.detail] ReadFailure', ReadFailure = '[probe.detail] ReadFailure',
Modify = '[probe.detail] Modify',
ModifySuccess = '[probe.detail] ModifySuccess',
ModifyFailure = '[probe.detail] ModifyFailure',
} }
export class ReadAllByDomainID implements Action { export class ReadAllByDomainID implements Action {
@ -48,6 +52,24 @@ export class ReadFailure implements Action {
constructor(public payload: RPCClientError) {} 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 = export type Actions =
| ReadAllByDomainID | ReadAllByDomainID
| ReadAllByDomainIDSuccess | ReadAllByDomainIDSuccess
@ -55,4 +77,7 @@ export type Actions =
| Read | Read
| ReadSuccess | ReadSuccess
| ReadFailure | ReadFailure
| Modify
| ModifySuccess
| ModifyFailure
; ;

View File

@ -25,9 +25,13 @@ import {
Read, Read,
ReadSuccess, ReadSuccess,
ReadFailure, ReadFailure,
Modify,
ModifySuccess,
ModifyFailure,
ActionType ActionType
} from './probe.action'; } from './probe.action';
import { ProbeHostService } from '../../service/probe-host.service'; import { ProbeHostService } from '../../../service/probe-host.service';
import { ProbeService } from '../../../service/probe.service';
@Injectable() @Injectable()
export class Effects { export class Effects {
@ -35,6 +39,7 @@ export class Effects {
constructor( constructor(
private actions$: Actions, private actions$: Actions,
private probeHostService: ProbeHostService, private probeHostService: ProbeHostService,
private probeService: ProbeService,
private router: Router private router: Router
) { } ) { }
@ -61,4 +66,16 @@ export class Effects {
.catch((error: RPCClientError) => { .catch((error: RPCClientError) => {
return of(new ReadAllByDomainIDFailure(error)); 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));
});
} }

View File

@ -1,7 +1,4 @@
import { import {
ReadAllByDomainID,
ReadAllByDomainIDFailure,
ReadAllByDomainIDSuccess,
ActionType, ActionType,
Actions, Actions,
} from './probe.action'; } from './probe.action';
@ -61,6 +58,36 @@ export function reducer(state = initialState, action: Actions): State {
}; };
} }
case ActionType.Modify: {
return {
...state,
error: null,
};
}
case ActionType.ModifySuccess: {
return {
...state,
probeHosts: state.probeHosts.map(
(probeHost, i) => probeHost.probe.id === action.payload.id ?
{
...probeHost,
probe : action.payload
} : probeHost
),
error: null,
};
}
case ActionType.ModifyFailure: {
return {
...state,
error: action.payload,
probeHosts: null,
};
}
default: { default: {
return state; return state;
} }

View File

@ -8,7 +8,7 @@ import { StateSelector } from '@overflow/core/ngrx/store';
import { MODULE } from '../probe.constant'; import { MODULE } from '../probe.constant';
import * as ProbeStore from './probe'; import * as ProbeStore from './entity/probe';
export interface State { export interface State {
probes: ProbeStore.State; probes: ProbeStore.State;

View File

@ -1,37 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
export enum ActionType {
Read = '[probe.detail] Read',
ReadSuccess = '[probe.detail] ReadSuccess',
ReadFailure = '[probe.detail] ReadFailure',
}
export class Read implements Action {
readonly type = ActionType.Read;
constructor(public payload: {id: string}) {}
}
export class ReadSuccess implements Action {
readonly type = ActionType.ReadSuccess;
constructor(public payload: Probe) {}
}
export class ReadFailure implements Action {
readonly type = ActionType.ReadFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| Read
| ReadSuccess
| ReadFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './detail.effect';
describe('ProbeDetail.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ProbeService } from '../../service/probe.service';
import {
Read,
ReadFailure,
ReadSuccess,
ActionType
} from './detail.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private probeService: ProbeService,
private router: Router
) { }
@Effect()
read$: Observable<Action> = this.actions$
.ofType(ActionType.Read)
.map((action: Read) => action.payload)
.switchMap(payload => this.probeService.read(payload.id))
.map(probe => {
return new ReadSuccess(probe);
})
.catch((error: RPCClientError) => {
return of(new ReadFailure(error));
});
}

View File

@ -1,49 +0,0 @@
import {
Read,
ReadFailure,
ReadSuccess,
ActionType,
Actions,
} from './detail.action';
import {
State,
initialState,
} from './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,
error: null,
isPending: true,
};
}
case ActionType.ReadSuccess: {
return {
...state,
error: null,
isPending: false,
probe: action.payload,
};
}
case ActionType.ReadFailure: {
return {
...state,
error: action.payload,
isPending: false,
probe: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,18 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
export interface State extends EntityState<Probe> {
error: RPCClientError | null;
isPending: boolean;
probe: Probe | null;
}
export const adapter: EntityAdapter<Probe> = createEntityAdapter<Probe>();
export const initialState: State = adapter.getInitialState({
error: null,
isPending: false,
probe: null,
});

View File

@ -1,4 +0,0 @@
export * from './detail.action';
export * from './detail.effect';
export * from './detail.reducer';
export * from './detail.state';

View File

@ -1,4 +0,0 @@
export * from './list.action';
export * from './list.effect';
export * from './list.reducer';
export * from './list.state';

View File

@ -1,38 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { Probe } from '@overflow/commons-typescript/model/probe';
export enum ActionType {
ReadAllByDomain = '[probe.list] ReadAllByDomain',
ReadAllByDomainSuccess = '[probe.list] ReadAllByDomainSuccess',
ReadAllByDomainFailure = '[probe.list] ReadAllByDomainFailure',
}
export class ReadAllByDomain implements Action {
readonly type = ActionType.ReadAllByDomain;
constructor(public payload: Domain) {}
}
export class ReadAllByDomainSuccess implements Action {
readonly type = ActionType.ReadAllByDomainSuccess;
constructor(public payload: Probe[]) {}
}
export class ReadAllByDomainFailure implements Action {
readonly type = ActionType.ReadAllByDomainFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| ReadAllByDomain
| ReadAllByDomainSuccess
| ReadAllByDomainFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './list.effect';
describe('ProbeList.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,51 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ProbeService } from '../../service/probe.service';
import {
ReadAllByDomain,
ReadAllByDomainFailure,
ReadAllByDomainSuccess,
ActionType
} from './list.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private probeService: ProbeService,
private router: Router
) { }
@Effect()
readAllByDomain$: Observable<Action> = this.actions$
.ofType(ActionType.ReadAllByDomain)
.map((action: ReadAllByDomain) => action.payload)
.switchMap(payload => this.probeService.readAllByDomain(payload))
.map(probes => {
return new ReadAllByDomainSuccess(probes);
})
.catch((error: RPCClientError) => {
return of(new ReadAllByDomainFailure(error));
});
}

View File

@ -1,48 +0,0 @@
import {
ReadAllByDomain,
ReadAllByDomainFailure,
ReadAllByDomainSuccess,
ActionType,
Actions,
} from './list.action';
import {
State,
initialState,
} from './list.state';
import { Probe } from '@overflow/commons-typescript/model/probe';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByDomain: {
return {
...state,
error: null,
isPending: true,
};
}
case ActionType.ReadAllByDomainSuccess: {
return {
...state,
error: null,
isPending: false,
probes: action.payload,
};
}
case ActionType.ReadAllByDomainFailure: {
return {
...state,
error: action.payload,
isPending: false,
probes: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,15 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
export interface State {
error: RPCClientError | null;
isPending: boolean;
probes: Probe[] | null;
}
export const initialState: State = {
error: null,
isPending: false,
probes: null,
};

View File

@ -1,4 +0,0 @@
export * from './modify.action';
export * from './modify.effect';
export * from './modify.reducer';
export * from './modify.state';

View File

@ -1,45 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
export enum ActionType {
Modify = '[probe.modify] Modify',
ModifyDisplayName = '[probe.modify] ModifyDisplayName',
ModifySuccess = '[probe.modify] ModifySuccess',
ModifyFailure = '[probe.modify] ModifyFailure',
}
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 class ModifyDisplayName implements Action {
readonly type = ActionType.ModifyDisplayName;
constructor(public payload: {id: string, displayName: string}) {}
}
export type Actions =
| Modify
| ModifySuccess
| ModifyFailure
| ModifyDisplayName
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './detail.effect';
describe('ProbeDetail.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,62 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ProbeService } from '../../service/probe.service';
import {
Modify,
ModifyDisplayName,
ModifySuccess,
ModifyFailure,
ActionType
} from './modify.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private probeService: ProbeService,
private router: Router
) { }
@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));
});
@Effect()
modifyDisplayName$: Observable<Action> = this.actions$
.ofType(ActionType.ModifyDisplayName)
.map((action: ModifyDisplayName) => action.payload)
.switchMap(payload => this.probeService.modifyDisplayName(payload.id, payload.displayName))
.map(probe => {
return new ModifySuccess(probe);
})
.catch((error: RPCClientError) => {
return of(new ModifyFailure(error));
});
}

View File

@ -1,54 +0,0 @@
import {
ActionType,
Actions,
} from './modify.action';
import {
State,
initialState,
} from './modify.state';
import { Probe } from '@overflow/commons-typescript/model/probe';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.Modify: {
return {
...state,
error: null,
isPending: true,
};
}
case ActionType.ModifySuccess: {
return {
...state,
error: null,
isPending: false,
modifiedProbe: action.payload,
};
}
case ActionType.ModifyFailure: {
return {
...state,
error: action.payload,
isPending: false,
modifiedProbe: null,
};
}
case ActionType.ModifyDisplayName: {
return {
...state,
error: null,
isPending: true,
};
}
default: {
return state;
}
}
}

View File

@ -1,18 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
export interface State extends EntityState<Probe> {
error: RPCClientError | null;
isPending: boolean;
modifiedProbe: Probe | null;
}
export const adapter: EntityAdapter<Probe> = createEntityAdapter<Probe>();
export const initialState: State = adapter.getInitialState({
error: null,
isPending: false,
modifiedProbe: null,
});

View File

@ -1,4 +0,0 @@
export * from './list.action';
export * from './list.effect';
export * from './list.reducer';
export * from './list.state';

View File

@ -1,38 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
export enum ActionType {
ReadAllByDomain = '[probeHost.list] ReadAllByDomain',
ReadAllByDomainSuccess = '[probeHost.list] ReadAllByDomainSuccess',
ReadAllByDomainFailure = '[probeHost.list] ReadAllByDomainFailure',
}
export class ReadAllByDomain implements Action {
readonly type = ActionType.ReadAllByDomain;
constructor(public payload: Domain) {}
}
export class ReadAllByDomainSuccess implements Action {
readonly type = ActionType.ReadAllByDomainSuccess;
constructor(public payload: ProbeHost[]) {}
}
export class ReadAllByDomainFailure implements Action {
readonly type = ActionType.ReadAllByDomainFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| ReadAllByDomain
| ReadAllByDomainSuccess
| ReadAllByDomainFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './list.effect';
describe('ProbeList.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,51 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { Probe } from '@overflow/commons-typescript/model/probe';
import {
ReadAllByDomain,
ReadAllByDomainFailure,
ReadAllByDomainSuccess,
ActionType
} from './list.action';
import { ProbeHostService } from '../../service/probe-host.service';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private probeHostService: ProbeHostService,
private router: Router
) { }
@Effect()
readAllByDomain$: Observable<Action> = this.actions$
.ofType(ActionType.ReadAllByDomain)
.map((action: ReadAllByDomain) => action.payload)
.switchMap(payload => this.probeHostService.readAllByDomain(payload))
.map(probeHosts => {
return new ReadAllByDomainSuccess(probeHosts);
})
.catch((error: RPCClientError) => {
return of(new ReadAllByDomainFailure(error));
});
}

View File

@ -1,48 +0,0 @@
import {
ReadAllByDomain,
ReadAllByDomainFailure,
ReadAllByDomainSuccess,
ActionType,
Actions,
} from './list.action';
import {
State,
initialState,
} from './list.state';
import { Probe } from '@overflow/commons-typescript/model/probe';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByDomain: {
return {
...state,
error: null,
isPending: true,
};
}
case ActionType.ReadAllByDomainSuccess: {
return {
...state,
error: null,
isPending: false,
probeHosts: action.payload,
};
}
case ActionType.ReadAllByDomainFailure: {
return {
...state,
error: action.payload,
isPending: false,
probeHosts: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,15 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
export interface State {
error: RPCClientError | null;
isPending: boolean;
probeHosts: ProbeHost[] | null;
}
export const initialState: State = {
error: null,
isPending: false,
probeHosts: null,
};

View File

@ -1,4 +0,0 @@
export * from './probe-host.action';
export * from './probe-host.effect';
export * from './probe-host.reducer';
export * from './probe-host.state';

View File

@ -1,37 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
export enum ActionType {
ReadByProbe = '[probeHost.detail] Read',
ReadByProbeSuccess = '[probeHost.detail] ReadSuccess',
ReadByProbeFailure = '[probeHost.detail] ReadFailure',
}
export class ReadByProbe implements Action {
readonly type = ActionType.ReadByProbe;
constructor(public payload: Probe) {}
}
export class ReadByProbeSuccess implements Action {
readonly type = ActionType.ReadByProbeSuccess;
constructor(public payload: ProbeHost) {}
}
export class ReadByProbeFailure implements Action {
readonly type = ActionType.ReadByProbeFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| ReadByProbe
| ReadByProbeSuccess
| ReadByProbeFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './probe-host.effect';
describe('ProbeDetail.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ProbeHostService } from '../../service/probe-host.service';
import {
ReadByProbe,
ReadByProbeSuccess,
ReadByProbeFailure,
ActionType
} from './probe-host.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private probeHostService: ProbeHostService,
private router: Router
) { }
@Effect()
read$: Observable<Action> = this.actions$
.ofType(ActionType.ReadByProbe)
.map((action: ReadByProbe) => action.payload)
.switchMap(payload => this.probeHostService.readByProbe(payload))
.map(probe => {
return new ReadByProbeSuccess(probe);
})
.catch((error: RPCClientError) => {
return of(new ReadByProbeFailure(error));
});
}

View File

@ -1,49 +0,0 @@
import {
ReadByProbe,
ReadByProbeFailure,
ReadByProbeSuccess,
ActionType,
Actions,
} from './probe-host.action';
import {
State,
initialState,
} from './probe-host.state';
import { Probe } from '@overflow/commons-typescript/model/probe';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadByProbe: {
return {
...state,
error: null,
isPending: true,
};
}
case ActionType.ReadByProbeSuccess: {
return {
...state,
error: null,
isPending: false,
probeHost: action.payload,
};
}
case ActionType.ReadByProbeFailure: {
return {
...state,
error: action.payload,
isPending: false,
probeHost: null,
};
}
default: {
return state;
}
}
}

View File

@ -1,15 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
export interface State {
error: RPCClientError | null;
isPending: boolean;
probeHost: ProbeHost | null;
}
export const initialState: State = {
error: null,
isPending: false,
probeHost: null,
};

View File

@ -1,4 +0,0 @@
export * from './remove.action';
export * from './remove.effect';
export * from './remove.reducer';
export * from './remove.state';

View File

@ -1,37 +0,0 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
export enum ActionType {
Remove = '[probe.remove] Remove',
RemoveSuccess = '[probe.detail] RemoveSuccess',
RemoveFailure = '[probe.detail] RemoveFailure',
}
export class Remove implements Action {
readonly type = ActionType.Remove;
constructor(public payload: {id: string}) {}
}
export class RemoveSuccess implements Action {
readonly type = ActionType.RemoveSuccess;
constructor(public payload: boolean) {}
}
export class RemoveFailure implements Action {
readonly type = ActionType.RemoveFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| Remove
| RemoveSuccess
| RemoveFailure
;

View File

@ -1,15 +0,0 @@
import { TestBed, inject } from '@angular/core/testing';
import { Effects } from './remove.effect';
describe('ProbeDetail.Effects', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [Effects]
});
});
it('should be created', inject([Effects], (effects: Effects) => {
expect(effects).toBeTruthy();
}));
});

View File

@ -1,49 +0,0 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ProbeService } from '../../service/probe.service';
import {
Remove,
RemoveSuccess,
RemoveFailure,
ActionType
} from './remove.action';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private probeService: ProbeService,
private router: Router
) { }
@Effect()
remove$: Observable<Action> = this.actions$
.ofType(ActionType.Remove)
.map((action: Remove) => action.payload)
.switchMap(payload => this.probeService.remove(payload.id))
.map(result => {
return new RemoveSuccess(result);
})
.catch((error: RPCClientError) => {
return of(new RemoveFailure(error));
});
}

View File

@ -1,49 +0,0 @@
import {
Remove,
RemoveFailure,
RemoveSuccess,
ActionType,
Actions,
} from './remove.action';
import {
State,
initialState,
} from './remove.state';
import { Probe } from '@overflow/commons-typescript/model/probe';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.Remove: {
return {
...state,
error: null,
isPending: true,
};
}
case ActionType.RemoveSuccess: {
return {
...state,
error: null,
isPending: false,
succeed: action.payload,
};
}
case ActionType.RemoveFailure: {
return {
...state,
error: action.payload,
isPending: false,
succeed: false,
};
}
default: {
return state;
}
}
}

View File

@ -1,15 +0,0 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { Probe } from '@overflow/commons-typescript/model/probe';
export interface State {
error: RPCClientError | null;
isPending: boolean;
succeed: boolean | null;
}
export const initialState: State = {
error: null,
isPending: false,
succeed: null,
};

View File

@ -1,6 +1,6 @@
import { Component, OnDestroy } from '@angular/core'; import { Component, OnDestroy } from '@angular/core';
import { AppComponent } from '../../../../app.component'; 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 { Subscription } from 'rxjs/Subscription';
import { MenuItem } from 'primeng/primeng'; import { MenuItem } from 'primeng/primeng';

View File

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

View File

@ -2,7 +2,8 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <div class="card no-margin">
<of-discovery></of-discovery> <!--<of-discovery></of-discovery>-->
<of-discovery-container (hostID)="hostId"></of-discovery-container>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'of-discovery-page', selector: 'of-discovery-page',
@ -6,9 +7,16 @@ import { Component, OnInit } from '@angular/core';
}) })
export class DiscoveryPageComponent implements OnInit { export class DiscoveryPageComponent implements OnInit {
hostId: number;
constructor( constructor(
private route: ActivatedRoute
) { } ) { }
ngOnInit() { ngOnInit() {
this.route.params.subscribe((params: any) => {
this.hostId = params['probeHostID'];
// console.log('probeHostID : ' + probeHostID);
});
} }
} }

View File

@ -6,7 +6,7 @@ const routes: Routes = [
{ {
path: '', path: '',
component: NotificationPageComponent, component: NotificationPageComponent,
} },
]; ];
@NgModule({ @NgModule({

View File

@ -2,7 +2,7 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <div class="card no-margin">
<of-notification-container></of-notification-container> <of-notification-container (pageChange)="onPageChange($event)"></of-notification-container>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; 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';
@Component({ @Component({
@ -9,7 +10,8 @@ import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
export class NotificationPageComponent implements OnInit { export class NotificationPageComponent implements OnInit {
constructor( constructor(
private breadcrumbService: BreadcrumbService private breadcrumbService: BreadcrumbService,
private router: Router
) { ) {
breadcrumbService.setItems([ breadcrumbService.setItems([
{ label: 'Notifications', routerLink: ['/notification'] }, { label: 'Notifications', routerLink: ['/notification'] },
@ -19,4 +21,8 @@ export class NotificationPageComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
onPageChange(pageNo: number) {
this.router.navigate(['/notification'], { queryParams: { page: pageNo } });
}
} }

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) { constructor(public renderer: Renderer, public zone: NgZone, private router: Router, private breadcrumbService: BreadcrumbService) {
router.events.subscribe((val) => { router.events.subscribe((val) => {
console.log(val);
if (val instanceof NavigationStart) { if (val instanceof NavigationStart) {
breadcrumbService.setItems(null); breadcrumbService.setItems(null);
} }

View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
@Component({ @Component({
selector: 'of-pages-download', selector: 'of-pages-download',

View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
@Component({ @Component({
selector: 'of-pages-noauth-probe', selector: 'of-pages-noauth-probe',

View File

@ -3,5 +3,8 @@
</div> </div>
<ng-template #detailView> <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> </ng-template>

View File

@ -1,9 +1,9 @@
import { Component, OnDestroy } from '@angular/core'; import { Component, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs/Subscription'; 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 { Target } from '@overflow/commons-typescript/model/target';
import { BreadcrumbService } from '../../../commons/service/breadcrumb.service'; import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
@Component({ @Component({
selector: 'of-pages-probe', selector: 'of-pages-probe',
@ -12,6 +12,7 @@ import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
export class ProbePageComponent { export class ProbePageComponent {
private isDetail: boolean; private isDetail: boolean;
private probeHostID: string;
constructor( constructor(
private router: Router, private router: Router,
@ -34,19 +35,24 @@ export class ProbePageComponent {
this.isDetail = false; this.isDetail = false;
} }
onDetailContainer(probeId: string) { onDetailContainer(probeHostID: string) {
this.probeHostID = probeHostID;
this.breadcrumbService.setItems([ this.breadcrumbService.setItems([
{ label: 'Probe', routerLink: ['/probe/list'] }, { label: 'Probe', routerLink: ['/probe/list'] },
{ label: probeId } { label: this.probeHostID }
]); ]);
this.isDetail = true; this.isDetail = true;
} }
onProbeSelect(probe: Probe) { onProbeSelect(probeHost: ProbeHost) {
this.router.navigate(['probe', probe.id, 'info']); this.router.navigate(['probe', probeHost.id, 'info']);
} }
onTargetSelect(target: Target) { onTargetSelect(target: Target) {
console.log(target); console.log(target);
} }
onDiscovery(probeHostID: number) {
this.router.navigate(['discovery', probeHostID]);
}
} }