Merge branch 'master' of https://git.loafle.net/overflow/member_webapp
This commit is contained in:
crusader
commit
25d27f0996
|
|
@ -4,13 +4,9 @@ import {
|
|||
} from '@angular/core';
|
||||
import { Store, select, StateObservable } from '@ngrx/store';
|
||||
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 { 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({
|
||||
selector: 'of-probe-selector',
|
||||
|
|
@ -33,7 +29,7 @@ export class ProbeSelectorComponent implements OnInit, AfterContentInit, OnDestr
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.probesSubscription$ = this.probes$.subscribe(
|
||||
this.probesSubscription$ = this.probes$.subscribe (
|
||||
(list: Probe[]) => {
|
||||
if (list !== null) {
|
||||
this.probes = list;
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<label>Probe</label>
|
||||
</div>
|
||||
<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 class="ui-g-12">
|
||||
<label>IP Version</label>
|
||||
|
|
@ -24,40 +24,13 @@
|
|||
<input type="hidden" >
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-inputgroup">
|
||||
<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>
|
||||
<of-ip-input [hostIp]="startHostIp" (inputIp)="onInputIP($event, 0)" [title]="'Start'"></of-ip-input>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-inputgroup">
|
||||
<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>
|
||||
<of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-bottom-space-20">
|
||||
<div class="ui-inputgroup">
|
||||
<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>
|
||||
<of-ip-input [hostIp]="excludeHostIp" (inputIp)="onInputIP($event, 2)" [title]="'Exclude'"></of-ip-input>
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<label>Port type</label>
|
||||
|
|
@ -70,7 +43,7 @@
|
|||
<p-radioButton name="group2" value="1" label="UDP" [(ngModel)]="portType" inputId="opt4"></p-radioButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g-12">
|
||||
<label>Port</label>
|
||||
</div>
|
||||
|
|
@ -85,12 +58,12 @@
|
|||
<p-inputMask mask="9999" [(ngModel)]="excludePort" placeholder="Exclude" [autoClear]="false"></p-inputMask>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g-12">
|
||||
<label>Service</label>
|
||||
</div>
|
||||
<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 class="ui-g-12" dir="rtl">
|
||||
<button type="submit" label="Discovery Start" pButton class="ui-button-width-fit" ></button>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
|
|||
@Output() discoverySearchStartClick = new EventEmitter();
|
||||
@Output() selectProbe = new EventEmitter();
|
||||
|
||||
includeServices = [];
|
||||
|
||||
discoveryFormGroup: FormGroup;
|
||||
|
||||
ipVesion: number;
|
||||
|
|
@ -28,6 +30,12 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
|
|||
endPort: string;
|
||||
excludePort: string;
|
||||
|
||||
probe: number;
|
||||
|
||||
startHostIp: string;
|
||||
endHostIp: string;
|
||||
excludeHostIp: string;
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
) {
|
||||
|
|
@ -37,6 +45,7 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
|
|||
this.ipVesion = 0;
|
||||
this.portType = 0;
|
||||
this.initForm();
|
||||
// this.hostIp = '192.168.1.10';
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
|
|
@ -56,4 +65,9 @@ export class SearchConfigComponent implements OnInit, AfterContentInit {
|
|||
console.log(probe);
|
||||
this.selectProbe.emit(probe);
|
||||
}
|
||||
|
||||
onInputIP(event, idx) {
|
||||
console.log(idx);
|
||||
console.log(event.target.data);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,28 +4,10 @@
|
|||
<input type="hidden" >
|
||||
</div>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-inputgroup">
|
||||
<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>
|
||||
<of-ip-input [hostIp]="startHostIp" (inputIp)="onInputIP($event, 0)" [title]="'Start'"></of-ip-input>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-bottom-space-20">
|
||||
<div class="ui-inputgroup">
|
||||
<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>
|
||||
<of-ip-input [hostIp]="endHostIp" (inputIp)="onInputIP($event, 1)" [title]="'End'"></of-ip-input>
|
||||
</div>
|
||||
|
||||
<div class="ui-g">
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import {
|
|||
})
|
||||
export class SearchFilterComponent implements OnInit, AfterContentInit {
|
||||
|
||||
startHostIp: string;
|
||||
endHostIp: string;
|
||||
|
||||
constructor(
|
||||
) {
|
||||
|
|
@ -19,4 +21,8 @@ export class SearchFilterComponent implements OnInit, AfterContentInit {
|
|||
|
||||
ngAfterContentInit() {
|
||||
}
|
||||
|
||||
onInputIP(event, idx) {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { RPCClientError } from '@loafer/ng-rpc';
|
||||
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>();
|
||||
@Input() includeServices;
|
||||
|
||||
@Input() disabled: boolean;
|
||||
|
||||
constructor(
|
||||
private listStore: Store<ListStore.State>,
|
||||
) {
|
||||
|
|
@ -1,23 +1,17 @@
|
|||
import { SettingComponent } from './setting/setting.component';
|
||||
import { ProbeSelectorComponent } from './setting/probe-selector/probe-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 { ProbeSelectorComponent } from './discovery/probe-selector/probe-selector.component';
|
||||
import { ServiceSelectorComponent } from './discovery/service-selector/service-selector.component';
|
||||
import { DiscoveryComponent } from './discovery/discovery.component';
|
||||
import { SearchConfigComponent } from './discovery/search-config/search-config.component';
|
||||
import { SearchFilterComponent } from './discovery/search-filter/search-filter.component';
|
||||
import { SearchResultComponent } from './discovery/search-result/search-result.component';
|
||||
import { IpInputComponent } from './discovery/search-config/ip-input.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
SettingComponent,
|
||||
FilterComponent,
|
||||
ServiceSelectorComponent,
|
||||
ProbeSelectorComponent,
|
||||
ResultComponent,
|
||||
FilterSummaryComponent,
|
||||
DiscoveryComponent,
|
||||
SearchConfigComponent,
|
||||
SearchFilterComponent,
|
||||
SearchResultComponent
|
||||
SearchResultComponent,
|
||||
IpInputComponent
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
<p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
|
||||
</div>
|
||||
<div class="ui-g-6">
|
||||
UDP
|
||||
<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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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> -->
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
|
||||
<of-discovery></of-discovery>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import {
|
||||
AfterContentInit, Component,
|
||||
AfterContentInit, Component, Input,
|
||||
OnInit
|
||||
} from '@angular/core';
|
||||
import { select, StateObservable } from '@ngrx/store';
|
||||
import { ListSelector } from '../../../probe/store';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
|
|
@ -17,13 +16,14 @@ export class DiscoveryContainerComponent implements OnInit, AfterContentInit {
|
|||
// discovery start
|
||||
// discovery stop
|
||||
// get service list
|
||||
probes$: StateObservable;
|
||||
@Input() hostID;
|
||||
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
) {
|
||||
// this.returnURL = this.activatedRoute.snapshot.queryParams['probe'] || null;
|
||||
// this.probes$ = listStore.pipe(select(ListSelector.select('probes')));
|
||||
if (this.hostID > 0 && this.hostID !== undefined ) {
|
||||
console.log('ddddddddddddddddddddddddddddddddddddddd');
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import { DiscoveryLoggerModule } from './discovery-logger.module';
|
|||
import { COMPONENTS } from './component';
|
||||
import { SERVICES } from './service';
|
||||
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 { CONTAINER_COMPONENTS } from './container';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -24,10 +24,12 @@ import { KeyValueModule } from '@overflow/commons/component/key-value/key-value.
|
|||
KeyValueModule
|
||||
],
|
||||
declarations: [
|
||||
COMPONENTS
|
||||
COMPONENTS,
|
||||
CONTAINER_COMPONENTS
|
||||
],
|
||||
exports: [
|
||||
COMPONENTS,
|
||||
CONTAINER_COMPONENTS
|
||||
],
|
||||
providers: [
|
||||
SERVICES,
|
||||
|
|
|
|||
|
|
@ -1,24 +1,31 @@
|
|||
<h1>Notifications</h1>
|
||||
<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 *ngIf="!notificationPage; else content">
|
||||
No data
|
||||
</div>
|
||||
|
||||
<p-table [value]="notificationPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:9em">Date</th>
|
||||
<th style="width:12em">Title</th>
|
||||
<th pResizableColumn>Message</th>
|
||||
<th style="width:8em">User</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
<td>{{notification.title}}</td>
|
||||
<td>{{notification.message}}</td>
|
||||
<td>{{notification.member.name}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
|
||||
<ng-template #content>
|
||||
<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">
|
||||
<tr>
|
||||
<th style="width:9em">Date</th>
|
||||
<th style="width:12em">Title</th>
|
||||
<th pResizableColumn>Message</th>
|
||||
<th style="width:8em">User</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
<td>{{notification.title}}</td>
|
||||
<td>{{notification.message}}</td>
|
||||
<td>{{notification.member.name}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-paginator #paginator [rows]="notificationPage.size" [totalRecords]="notificationPage.totalElements"
|
||||
(onPageChange)="onPaginate($event)" [first]="2"></p-paginator>
|
||||
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -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 { Page } from '@overflow/commons-typescript/model/commons/Page';
|
||||
import { Paginator } from 'primeng/primeng';
|
||||
|
||||
@Component({
|
||||
selector: 'of-notification-list',
|
||||
templateUrl: './list.component.html',
|
||||
})
|
||||
export class NotificationListComponent {
|
||||
export class NotificationListComponent implements OnChanges {
|
||||
|
||||
@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() {
|
||||
// // this.notificationSubscription$ = this.notification$.subscribe(
|
||||
// // (page: Page) => {
|
||||
// // if (page !== null) {
|
||||
// // this.notifications = page.content;
|
||||
// // this.totalLength = page.totalElements;
|
||||
// // }
|
||||
// // },
|
||||
// // (error: RPCClientError) => {
|
||||
// // console.log(error.response.message);
|
||||
// // }
|
||||
// // );
|
||||
onPaginate(e) {
|
||||
this.pageChange.emit(e.page);
|
||||
}
|
||||
|
||||
// this.readSuccess$.subscribe(
|
||||
// (noti: Notification) => {
|
||||
// if (noti) {
|
||||
// this.getNotifications(this.currPage);
|
||||
// }
|
||||
// },
|
||||
// (error: RPCClientError) => {
|
||||
// console.log(error.response.message);
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
onRowSelect(e) {
|
||||
this.select.emit(e.data);
|
||||
}
|
||||
|
||||
// ngAfterContentInit() {
|
||||
// this.getNotifications(this.currPage);
|
||||
// }
|
||||
|
||||
// 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);
|
||||
// // }
|
||||
// // );
|
||||
// }
|
||||
onMarkAllAsRead() {
|
||||
this.markAll.emit();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 { Store, select } from '@ngrx/store';
|
||||
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 { Page } from '@overflow/commons-typescript/model/commons/Page';
|
||||
import { Notification } from '@overflow/commons-typescript/model/notification';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'of-notification-container',
|
||||
|
|
@ -17,23 +18,37 @@ import { Notification } from '@overflow/commons-typescript/model/notification';
|
|||
})
|
||||
export class NotificationListContainerComponent implements OnInit {
|
||||
notificationPage$: Observable<Page<Notification>>;
|
||||
@Output() pageChange = new EventEmitter<number>();
|
||||
pageNo: number;
|
||||
|
||||
constructor(
|
||||
private store: Store<ListStore.State>,
|
||||
private route: ActivatedRoute
|
||||
) {
|
||||
this.notificationPage$ = store.pipe(select(NotificationSelector.select('page')));
|
||||
}
|
||||
|
||||
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(
|
||||
(member: Member) => {
|
||||
const pageParams: PageParams = {
|
||||
pageNo: 0,
|
||||
pageNo: this.pageNo,
|
||||
countPerPage: 10,
|
||||
sortCol: 'id',
|
||||
sortDirection: 'descending',
|
||||
};
|
||||
this.store.dispatch(new ListStore.ReadAllByMember({member, pageParams}));
|
||||
this.store.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
|
||||
},
|
||||
(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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,84 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-6 ui-nopad">
|
||||
<h1>Info</h1>
|
||||
<h1>Info</h1>
|
||||
</div>
|
||||
<!-- <p-messages [(value)]="msgs"></p-messages> -->
|
||||
<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="Save" (click)="onEditSave()"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display">
|
||||
<of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
|
||||
</p-dialog>
|
||||
<!-- Probe info -->
|
||||
<div class="ui-g ui-bottom-space-10">
|
||||
<p-panel [showHeader]="false" class="nopad">
|
||||
<div *ngIf="probe">
|
||||
|
||||
|
||||
<div *ngIf="probeHost">
|
||||
<div class="ui-g form-group">
|
||||
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<div *ngIf="editMode" class="of-key-value-div">
|
||||
<span>Name</span>
|
||||
<span class="ng-star-inserted">
|
||||
<input #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
|
||||
<input #input type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="probeHost.probe.displayName = input.value">
|
||||
</span>
|
||||
</div>
|
||||
<of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probe.displayName"></of-key-value>
|
||||
<of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
|
||||
<of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<div *ngIf="editMode" class="of-key-value-div">
|
||||
<span>Description</span>
|
||||
<span class="ng-star-inserted">
|
||||
<input *ngIf="editMode" #input type="text" pInputText value="{{probe.description}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
|
||||
</span>
|
||||
</div>
|
||||
<of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probe.description"></of-key-value>
|
||||
<span>Description</span>
|
||||
<span class="ng-star-inserted">
|
||||
<input *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value">
|
||||
</span>
|
||||
</div>
|
||||
<of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
|
||||
<of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
|
||||
<of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-nopad">
|
||||
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
|
||||
<of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p-panel>
|
||||
|
||||
<!-- Host info -->
|
||||
<p-panel [showHeader]="false" class="nopad">
|
||||
<div *ngIf="probeHost">
|
||||
<div class="ui-g form-group">
|
||||
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6"></of-key-value>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</p-panel>
|
||||
|
||||
</div>
|
||||
<div class="ui-g" dir="rtl">
|
||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
|
||||
(click)="onRemoveClick()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
|
||||
</div>
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
<p-growl [(value)]="msgs"></p-growl>
|
||||
<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
<p-growl [(value)]="msgs"></p-growl> -->
|
||||
|
|
@ -1,129 +1,66 @@
|
|||
import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { RPCClientError } from '@loafer/ng-rpc';
|
||||
// import * as DetailStore from '../../store/detail';
|
||||
// import * as ModifyStore from '../../store/modify';
|
||||
// import { DetailSelector, ModifySelector } from '../../store';
|
||||
import { Probe } from '@overflow/commons-typescript/model/probe';
|
||||
import { ConfirmationService, Message } from 'primeng/primeng';
|
||||
import * as CIDR from 'ip-cidr';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
|
||||
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { MessageService } from 'primeng/components/common/messageservice';
|
||||
// import { SettingComponent as DiscoverySettingComponent } from '@overflow/discovery/component/setting/setting.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-detail',
|
||||
templateUrl: './detail.component.html',
|
||||
providers: [ConfirmationService, MessageService]
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
export class ProbeDetailComponent {
|
||||
|
||||
probeSubscription$: Subscription;
|
||||
// probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
|
||||
// modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe')));
|
||||
probe: Probe = null;
|
||||
IPRange: string;
|
||||
display = false;
|
||||
msgs: Message[] = [];
|
||||
@Input() probeHost: ProbeHost;
|
||||
@Output() modify = new EventEmitter<ProbeHost>();
|
||||
@Output() discovery = new EventEmitter<number>();
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
// private detailStore: Store<DetailStore.State>,
|
||||
// private modifyStore: Store<ModifyStore.State>,
|
||||
private confirmationService: ConfirmationService,
|
||||
private messageService: MessageService
|
||||
) { }
|
||||
editMode = false;
|
||||
|
||||
ngOnInit() {
|
||||
// this.probeSubscription$ = this.probe$.subscribe(
|
||||
// (probe: Probe) => {
|
||||
// if (probe) {
|
||||
// this.probe = probe;
|
||||
// this.arrangeInfo();
|
||||
// }
|
||||
// },
|
||||
// (error: RPCClientError) => {
|
||||
// console.log(error.response.message);
|
||||
// }
|
||||
// );
|
||||
constructor(private messageService: MessageService) {
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.probeSubscription$) {
|
||||
this.probeSubscription$.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
// const probeId = this.route.snapshot.paramMap.get('id');
|
||||
// this.detailStore.dispatch(
|
||||
// new DetailStore.Read(
|
||||
// { id: probeId }
|
||||
// )
|
||||
// );
|
||||
}
|
||||
|
||||
arrangeInfo() {
|
||||
const cidr = new CIDR(this.probe.cidr);
|
||||
if (!cidr.isValid()) {
|
||||
onEditSave() {
|
||||
const displayNameValidation = this.checkValidDisplayName();
|
||||
if (displayNameValidation) {
|
||||
alert(displayNameValidation);
|
||||
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() {
|
||||
this.display = true;
|
||||
this.discovery.emit(this.probeHost.id);
|
||||
}
|
||||
|
||||
onDiscoveryClose() {
|
||||
this.display = false;
|
||||
}
|
||||
|
||||
onRemoveClick() {
|
||||
this.confirmationService.confirm({
|
||||
header: 'Confirmation',
|
||||
icon: 'fa fa-trash',
|
||||
message: 'Are you sure to remove this Probe?',
|
||||
accept: () => {
|
||||
// this.router.navigate(['probes/list']);
|
||||
},
|
||||
reject: () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onDisplayNameChange(value: string) {
|
||||
// if (value === this.probe.displayName) {
|
||||
// return;
|
||||
// }
|
||||
// this.probe.displayName = value;
|
||||
// this.modifyStore.dispatch(
|
||||
// new ModifyStore.Modify(this.probe)
|
||||
// );
|
||||
|
||||
// const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
|
||||
// (probe: Probe) => {
|
||||
// if (probe) {
|
||||
// this.msgs = [];
|
||||
// this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
|
||||
// }
|
||||
// if (modifySuccessSubscription$) {
|
||||
// modifySuccessSubscription$.unsubscribe();
|
||||
// }
|
||||
// },
|
||||
// (error: RPCClientError) => {
|
||||
// console.log(error.response.message);
|
||||
// }
|
||||
// );
|
||||
}
|
||||
|
||||
onDisplayNameChangeKeypress(event, value) {
|
||||
if (event.key === 'Enter') {
|
||||
this.onDisplayNameChange(value);
|
||||
checkValidDisplayName(): string {
|
||||
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;
|
||||
}
|
||||
|
||||
checkValidDescription(): string {
|
||||
const description = this.probeHost.probe.description;
|
||||
if (description.length > 50) {
|
||||
return 'description length : 0 ~ 50';
|
||||
}
|
||||
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
|
||||
if (description.match(regex)) {
|
||||
return 'Cannot use special characters.';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<of-probe-detail></of-probe-detail>
|
||||
<of-probe-detail [probeHost]="(probeHosts$ | async)[0]" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>
|
||||
|
|
@ -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({
|
||||
selector: 'of-probe-detail-container',
|
||||
templateUrl: './probe-detail-container.html',
|
||||
})
|
||||
export class ProbeDetailContainerComponent {
|
||||
export class ProbeDetailContainerComponent implements OnInit {
|
||||
|
||||
@Input() probeHostID;
|
||||
@Output() discovery = new EventEmitter<number>();
|
||||
probeHosts$: Observable<ProbeHost[]>;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Component, EventEmitter, Output, OnInit, AfterContentInit } from '@angular/core';
|
||||
import { Component, EventEmitter, Output, OnInit } from '@angular/core';
|
||||
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import * as ProbeStore from '../store/probe';
|
||||
import * as ProbeStore from '../store/entity/probe';
|
||||
import { ProbeSelector } from '../store';
|
||||
import { AuthSelector } from '@overflow/member/store';
|
||||
import { Domain } from '@overflow/commons-typescript/model/domain';
|
||||
|
|
@ -11,7 +11,7 @@ import { Domain } from '@overflow/commons-typescript/model/domain';
|
|||
selector: 'of-probe-list-container',
|
||||
templateUrl: './probe-list-container.html',
|
||||
})
|
||||
export class ProbeListContainerComponent implements OnInit, AfterContentInit {
|
||||
export class ProbeListContainerComponent implements OnInit {
|
||||
|
||||
probeHosts$: Observable<ProbeHost[]>;
|
||||
@Output() select = new EventEmitter();
|
||||
|
|
@ -20,10 +20,6 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit {
|
|||
this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
|
||||
}
|
||||
|
||||
onSelect(probeHost: ProbeHost) {
|
||||
this.select.emit(probeHost);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.select(AuthSelector.select('domain')).subscribe(
|
||||
(domain: Domain) => {
|
||||
|
|
@ -35,7 +31,8 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit {
|
|||
);
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
|
||||
onSelect(probeHost: ProbeHost) {
|
||||
this.select.emit(probeHost);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
2
@overflow/probe/store/container/probe-list/index.ts
Normal file
2
@overflow/probe/store/container/probe-list/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export * from './probe-list.reducer';
|
||||
export * from './probe-list.state';
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export interface State {
|
||||
pending: boolean;
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
pending: false,
|
||||
};
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Action } from '@ngrx/store';
|
||||
import { RPCClientError } from '@loafer/ng-rpc';
|
||||
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
|
||||
export enum ActionType {
|
||||
ReadAllByDomainID = '[probe.list] ReadAllByDomainID',
|
||||
|
|
@ -10,6 +10,10 @@ export enum ActionType {
|
|||
Read = '[probe.detail] Read',
|
||||
ReadSuccess = '[probe.detail] ReadSuccess',
|
||||
ReadFailure = '[probe.detail] ReadFailure',
|
||||
|
||||
Modify = '[probe.detail] Modify',
|
||||
ModifySuccess = '[probe.detail] ModifySuccess',
|
||||
ModifyFailure = '[probe.detail] ModifyFailure',
|
||||
}
|
||||
|
||||
export class ReadAllByDomainID implements Action {
|
||||
|
|
@ -48,6 +52,24 @@ export class ReadFailure implements Action {
|
|||
constructor(public payload: RPCClientError) {}
|
||||
}
|
||||
|
||||
export class Modify implements Action {
|
||||
readonly type = ActionType.Modify;
|
||||
|
||||
constructor(public payload: Probe) {}
|
||||
}
|
||||
|
||||
export class ModifySuccess implements Action {
|
||||
readonly type = ActionType.ModifySuccess;
|
||||
|
||||
constructor(public payload: Probe) {}
|
||||
}
|
||||
|
||||
export class ModifyFailure implements Action {
|
||||
readonly type = ActionType.ModifyFailure;
|
||||
|
||||
constructor(public payload: RPCClientError) {}
|
||||
}
|
||||
|
||||
export type Actions =
|
||||
| ReadAllByDomainID
|
||||
| ReadAllByDomainIDSuccess
|
||||
|
|
@ -55,4 +77,7 @@ export type Actions =
|
|||
| Read
|
||||
| ReadSuccess
|
||||
| ReadFailure
|
||||
| Modify
|
||||
| ModifySuccess
|
||||
| ModifyFailure
|
||||
;
|
||||
|
|
@ -25,9 +25,13 @@ import {
|
|||
Read,
|
||||
ReadSuccess,
|
||||
ReadFailure,
|
||||
Modify,
|
||||
ModifySuccess,
|
||||
ModifyFailure,
|
||||
ActionType
|
||||
} from './probe.action';
|
||||
import { ProbeHostService } from '../../service/probe-host.service';
|
||||
import { ProbeHostService } from '../../../service/probe-host.service';
|
||||
import { ProbeService } from '../../../service/probe.service';
|
||||
|
||||
@Injectable()
|
||||
export class Effects {
|
||||
|
|
@ -35,6 +39,7 @@ export class Effects {
|
|||
constructor(
|
||||
private actions$: Actions,
|
||||
private probeHostService: ProbeHostService,
|
||||
private probeService: ProbeService,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
|
|
@ -61,4 +66,16 @@ export class Effects {
|
|||
.catch((error: RPCClientError) => {
|
||||
return of(new ReadAllByDomainIDFailure(error));
|
||||
});
|
||||
|
||||
@Effect()
|
||||
Modify$: Observable<Action> = this.actions$
|
||||
.ofType(ActionType.Modify)
|
||||
.map((action: Modify) => action.payload)
|
||||
.switchMap(payload => this.probeService.modify(payload))
|
||||
.map(probe => {
|
||||
return new ModifySuccess(probe);
|
||||
})
|
||||
.catch((error: RPCClientError) => {
|
||||
return of(new ModifyFailure(error));
|
||||
});
|
||||
}
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
import {
|
||||
ReadAllByDomainID,
|
||||
ReadAllByDomainIDFailure,
|
||||
ReadAllByDomainIDSuccess,
|
||||
ActionType,
|
||||
Actions,
|
||||
} 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: {
|
||||
return state;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ import { StateSelector } from '@overflow/core/ngrx/store';
|
|||
|
||||
import { MODULE } from '../probe.constant';
|
||||
|
||||
import * as ProbeStore from './probe';
|
||||
import * as ProbeStore from './entity/probe';
|
||||
|
||||
export interface State {
|
||||
probes: ProbeStore.State;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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();
|
||||
}));
|
||||
});
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './detail.action';
|
||||
export * from './detail.effect';
|
||||
export * from './detail.reducer';
|
||||
export * from './detail.state';
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './list.action';
|
||||
export * from './list.effect';
|
||||
export * from './list.reducer';
|
||||
export * from './list.state';
|
||||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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();
|
||||
}));
|
||||
});
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './modify.action';
|
||||
export * from './modify.effect';
|
||||
export * from './modify.reducer';
|
||||
export * from './modify.state';
|
||||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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();
|
||||
}));
|
||||
});
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
});
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './list.action';
|
||||
export * from './list.effect';
|
||||
export * from './list.reducer';
|
||||
export * from './list.state';
|
||||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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();
|
||||
}));
|
||||
});
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './probe-host.action';
|
||||
export * from './probe-host.effect';
|
||||
export * from './probe-host.reducer';
|
||||
export * from './probe-host.state';
|
||||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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();
|
||||
}));
|
||||
});
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export * from './remove.action';
|
||||
export * from './remove.effect';
|
||||
export * from './remove.reducer';
|
||||
export * from './remove.state';
|
||||
|
|
@ -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
|
||||
;
|
||||
|
|
@ -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();
|
||||
}));
|
||||
});
|
||||
|
|
@ -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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { AppComponent } from '../../../../app.component';
|
||||
import { BreadcrumbService } from '../../../../commons/service/breadcrumb.service';
|
||||
import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { MenuItem } from 'primeng/primeng';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ const routes: Routes = [
|
|||
{
|
||||
path: '',
|
||||
component: DiscoveryPageComponent,
|
||||
},
|
||||
{
|
||||
path: ':probeHostID',
|
||||
component: DiscoveryPageComponent,
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<of-discovery></of-discovery>
|
||||
<!--<of-discovery></of-discovery>-->
|
||||
<of-discovery-container (hostID)="hostId"></of-discovery-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'of-discovery-page',
|
||||
|
|
@ -6,9 +7,16 @@ import { Component, OnInit } from '@angular/core';
|
|||
})
|
||||
export class DiscoveryPageComponent implements OnInit {
|
||||
|
||||
hostId: number;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.route.params.subscribe((params: any) => {
|
||||
this.hostId = params['probeHostID'];
|
||||
// console.log('probeHostID : ' + probeHostID);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const routes: Routes = [
|
|||
{
|
||||
path: '',
|
||||
component: NotificationPageComponent,
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<of-notification-container></of-notification-container>
|
||||
<of-notification-container (pageChange)="onPageChange($event)"></of-notification-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
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({
|
||||
|
|
@ -9,7 +10,8 @@ import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
|
|||
export class NotificationPageComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private breadcrumbService: BreadcrumbService
|
||||
private breadcrumbService: BreadcrumbService,
|
||||
private router: Router
|
||||
) {
|
||||
breadcrumbService.setItems([
|
||||
{ label: 'Notifications', routerLink: ['/notification'] },
|
||||
|
|
@ -19,4 +21,8 @@ export class NotificationPageComponent implements OnInit {
|
|||
ngOnInit() {
|
||||
}
|
||||
|
||||
onPageChange(pageNo: number) {
|
||||
this.router.navigate(['/notification'], { queryParams: { page: pageNo } });
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,6 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
|
|||
|
||||
constructor(public renderer: Renderer, public zone: NgZone, private router: Router, private breadcrumbService: BreadcrumbService) {
|
||||
router.events.subscribe((val) => {
|
||||
console.log(val);
|
||||
if (val instanceof NavigationStart) {
|
||||
breadcrumbService.setItems(null);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
|
||||
import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
|
||||
|
||||
@Component({
|
||||
selector: 'of-pages-download',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
|
||||
import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
|
||||
|
||||
@Component({
|
||||
selector: 'of-pages-noauth-probe',
|
||||
|
|
|
|||
|
|
@ -3,5 +3,8 @@
|
|||
</div>
|
||||
|
||||
<ng-template #detailView>
|
||||
<of-probe-detail-container (targetSelect)="onTargetSelect($event)"></of-probe-detail-container>
|
||||
<of-probe-detail-container [probeHostID]="probeHostID"
|
||||
(targetSelect)="onTargetSelect($event)"
|
||||
(discovery)="onDiscovery($event)"
|
||||
></of-probe-detail-container>
|
||||
</ng-template>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { Probe } from '@overflow/commons-typescript/model/probe';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
import { Target } from '@overflow/commons-typescript/model/target';
|
||||
import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
|
||||
import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
|
||||
|
||||
@Component({
|
||||
selector: 'of-pages-probe',
|
||||
|
|
@ -12,6 +12,7 @@ import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
|
|||
export class ProbePageComponent {
|
||||
|
||||
private isDetail: boolean;
|
||||
private probeHostID: string;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
|
|
@ -34,19 +35,24 @@ export class ProbePageComponent {
|
|||
this.isDetail = false;
|
||||
}
|
||||
|
||||
onDetailContainer(probeId: string) {
|
||||
onDetailContainer(probeHostID: string) {
|
||||
this.probeHostID = probeHostID;
|
||||
this.breadcrumbService.setItems([
|
||||
{ label: 'Probe', routerLink: ['/probe/list'] },
|
||||
{ label: probeId }
|
||||
{ label: this.probeHostID }
|
||||
]);
|
||||
this.isDetail = true;
|
||||
}
|
||||
|
||||
onProbeSelect(probe: Probe) {
|
||||
this.router.navigate(['probe', probe.id, 'info']);
|
||||
onProbeSelect(probeHost: ProbeHost) {
|
||||
this.router.navigate(['probe', probeHost.id, 'info']);
|
||||
}
|
||||
|
||||
onTargetSelect(target: Target) {
|
||||
console.log(target);
|
||||
}
|
||||
|
||||
onDiscovery(probeHostID: number) {
|
||||
this.router.navigate(['discovery', probeHostID]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user