probe / discovery module refactoring
This commit is contained in:
parent
f7cb8333f0
commit
b74d45c303
|
@ -1,3 +1,4 @@
|
|||
<of-probe-selector [probeHostID]="probeHostID" (select)="selectedProbe=$event"></of-probe-selector>
|
||||
<of-probe-summary *ngIf="selectedProbe" @discoveryFilterAnim [probeHost]="selectedProbe"></of-probe-summary>
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
|
|
|
@ -12,12 +12,12 @@ import { Anim } from './animation';
|
|||
})
|
||||
export class DiscoveryComponent {
|
||||
|
||||
@Input() selectedProbe: ProbeHost;
|
||||
@Output() requestDiscovery = new EventEmitter<DiscoverZone>();
|
||||
@Output() requestStop = new EventEmitter();
|
||||
@Input() probeHostID;
|
||||
selectedProbe: ProbeHost;
|
||||
// @Output() requestDiscovery = new EventEmitter<DiscoverZone>();
|
||||
// @Output() requestStop = new EventEmitter();
|
||||
|
||||
discoverZone: DiscoverZone;
|
||||
|
||||
requested: boolean;
|
||||
|
||||
constructor(
|
||||
|
@ -27,12 +27,12 @@ export class DiscoveryComponent {
|
|||
onRequestDiscovery(dz: DiscoverZone) {
|
||||
this.requested = true;
|
||||
this.discoverZone = dz;
|
||||
this.requestDiscovery.emit(dz);
|
||||
// this.requestDiscovery.emit(dz);
|
||||
}
|
||||
|
||||
onRequestDiscoveryStop() {
|
||||
this.requested = false;
|
||||
this.discoverZone = null;
|
||||
this.requestStop.emit();
|
||||
// this.requestStop.emit();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
<of-probe-selector-container [probeHostID]="probeHostID" (select)="onProbeSelect($event)"></of-probe-selector-container>
|
||||
<of-discovery [selectedProbe]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"
|
||||
(requestStop)="onRequestStop($event)"></of-discovery>
|
|
@ -1,34 +0,0 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
} from '@angular/core';
|
||||
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
|
||||
|
||||
@Component({
|
||||
selector: 'of-discovery-container',
|
||||
templateUrl: './discovery-container.component.html',
|
||||
})
|
||||
export class DiscoveryContainerComponent {
|
||||
|
||||
@Input() probeHostID;
|
||||
selectedProbe: ProbeHost;
|
||||
|
||||
constructor(
|
||||
) {
|
||||
}
|
||||
|
||||
onProbeSelect(probe: ProbeHost) {
|
||||
this.selectedProbe = probe;
|
||||
}
|
||||
|
||||
onRequestDiscovery(dz: DiscoverZone) {
|
||||
console.log(dz);
|
||||
// this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
|
||||
// { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
|
||||
}
|
||||
|
||||
onRequestStop() {
|
||||
console.log('onRequestStop');
|
||||
}
|
||||
}
|
|
@ -1,5 +0,0 @@
|
|||
import {DiscoveryContainerComponent} from './discovery/discovery-container.component';
|
||||
|
||||
export const CONTAINER_COMPONENTS = [
|
||||
DiscoveryContainerComponent,
|
||||
];
|
|
@ -8,7 +8,6 @@ import { DiscoveryLoggerModule } from './discovery-logger.module';
|
|||
|
||||
import { COMPONENTS } from './component';
|
||||
import { SERVICES } from './service';
|
||||
import { CONTAINER_COMPONENTS } from './container';
|
||||
|
||||
import { UIModule } from '@overflow/shared/ui/ui.module';
|
||||
import { ProbeModule } from '@overflow/probe/probe.module';
|
||||
|
@ -28,11 +27,9 @@ import { MetaModule } from '@overflow/meta/meta.module';
|
|||
],
|
||||
declarations: [
|
||||
COMPONENTS,
|
||||
CONTAINER_COMPONENTS
|
||||
],
|
||||
exports: [
|
||||
COMPONENTS,
|
||||
CONTAINER_COMPONENTS
|
||||
],
|
||||
providers: [
|
||||
SERVICES,
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DetailComponent } from './detail.component';
|
||||
|
||||
describe('DetailComponent', () => {
|
||||
let component: DetailComponent;
|
||||
let fixture: ComponentFixture<DetailComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DetailComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DetailComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -1,25 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DownloadComponent } from './download.component';
|
||||
|
||||
describe('DownloadComponent', () => {
|
||||
let component: DownloadComponent;
|
||||
let fixture: ComponentFixture<DownloadComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DownloadComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DownloadComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -1,8 +1,8 @@
|
|||
import { ProbeDetailComponent } from './detail/detail.component';
|
||||
import { ProbeListComponent } from './list/list.component';
|
||||
import { ProbeDownloadComponent } from './download/download.component';
|
||||
import { ProbeSelectorComponent } from './selector/selector.component';
|
||||
import { ProbeSummaryComponent } from './summary/summary.component';
|
||||
import { ProbeListComponent } from './probe-list.component';
|
||||
import { ProbeDetailComponent } from './probe-detail.component';
|
||||
import { ProbeDownloadComponent } from './probe-download.component';
|
||||
import { ProbeSelectorComponent } from './probe-selector.component';
|
||||
import { ProbeSummaryComponent } from './probe-summary.component';
|
||||
|
||||
export const COMPONENTS = [
|
||||
ProbeListComponent,
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProbeListComponent } from './list.component';
|
||||
|
||||
describe('ListComponent', () => {
|
||||
let component: ProbeListComponent;
|
||||
let fixture: ComponentFixture<ProbeListComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ProbeListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProbeListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -1,36 +0,0 @@
|
|||
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-list',
|
||||
templateUrl: './list.component.html',
|
||||
})
|
||||
export class ProbeListComponent {
|
||||
@Output() select = new EventEmitter<ProbeHost>();
|
||||
@Input() pending: boolean;
|
||||
@Input() probeHosts: ProbeHost[];
|
||||
@Input() error: any;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
onProbeSelect(event) {
|
||||
this.select.emit(event.data);
|
||||
}
|
||||
|
||||
getUptime(probe: Probe) {
|
||||
if (!probe.connectDate) {
|
||||
return 'Not Connected.';
|
||||
}
|
||||
const hours = Math.abs(new Date().getTime() - probe.connectDate.getTime());
|
||||
return this.convertUptimeString(hours);
|
||||
}
|
||||
|
||||
convertUptimeString(hours: number) {
|
||||
if (hours === 0) {
|
||||
return 'Less than an hour.';
|
||||
} else {
|
||||
return 'About ' + hours;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,5 +1,5 @@
|
|||
<of-error-message [error]="error" [closable]="false"></of-error-message>
|
||||
<of-block-progressbar [target]="content" [pending]="pending"></of-block-progressbar>
|
||||
<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
|
||||
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
|
||||
|
||||
<p-panel #content [showHeader]="false" class="block-panel">
|
||||
|
||||
|
@ -14,7 +14,6 @@
|
|||
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
|
||||
</div>
|
||||
</div>
|
||||
<p-messages [(value)]="connectionStatus" [closable]="false"></p-messages>
|
||||
|
||||
<!-- Probe info -->
|
||||
<div class="ui-g ui-bottom-space-10">
|
||||
|
@ -54,20 +53,16 @@
|
|||
<div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
|
||||
<of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
</div>
|
||||
</div>
|
||||
</p-panel>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<!-- Host info -->
|
||||
<!--
|
||||
<div class="ui-g ui-bottom-space-10">
|
||||
<p-panel [showHeader]="false">
|
||||
<div *ngIf="probeHost">
|
||||
<div class="ui-g">
|
||||
-->
|
||||
<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>
|
||||
|
@ -83,7 +78,6 @@
|
|||
<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>
|
||||
|
@ -92,9 +86,8 @@
|
|||
<div class="ui-g" dir="rtl">
|
||||
<button class="ui-button-danger ui-button-width-fit" [disabled]="true" 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>
|
||||
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="discovery.emit(probeHost.id)"></button>
|
||||
</div>
|
||||
|
||||
</p-panel>
|
||||
|
||||
|
|
@ -1,21 +1,26 @@
|
|||
import { Component, Input, Output, EventEmitter, ViewChild, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
|
||||
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { MessageService } from 'primeng/components/common/messageservice';
|
||||
import { Message } from 'primeng/primeng';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { Observable, of, Subscription } from 'rxjs';
|
||||
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
|
||||
import { AuthContainerSelector } from '@overflow/shared/auth/store';
|
||||
import { DomainMember } from '@overflow/commons-typescript/model/domain';
|
||||
import { ProbeHostService } from '../service/probe-host.service';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-detail',
|
||||
templateUrl: './detail.component.html',
|
||||
providers: [MessageService]
|
||||
templateUrl: './probe-detail.component.html',
|
||||
})
|
||||
export class ProbeDetailComponent implements OnChanges {
|
||||
export class ProbeDetailComponent implements OnInit {
|
||||
|
||||
@Input() probeHostID;
|
||||
pending$: Observable<boolean>;
|
||||
probeHost: ProbeHost;
|
||||
error$: Observable<any>;
|
||||
|
||||
@Input() pending: boolean;
|
||||
@Input() probeHost: ProbeHost;
|
||||
@Output() modify = new EventEmitter<ProbeHost>();
|
||||
@Output() discovery = new EventEmitter<number>();
|
||||
|
||||
connectionStatus: Message[] = [];
|
||||
|
||||
editMode = false;
|
||||
displayNameErrMsg: string;
|
||||
|
@ -23,27 +28,31 @@ export class ProbeDetailComponent implements OnChanges {
|
|||
displayName: string;
|
||||
description: string;
|
||||
|
||||
constructor(private messageService: MessageService) {
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private probeHostService: ProbeHostService
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes['probeHost'].currentValue) {
|
||||
this.checkConnectStatus();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.probeHostService.read(this.probeHostID)
|
||||
.pipe(
|
||||
tap(() => {
|
||||
this.pending$ = of(true);
|
||||
}),
|
||||
map((probeHost: ProbeHost) => {
|
||||
this.probeHost = probeHost;
|
||||
}),
|
||||
catchError(error => {
|
||||
this.error$ = of(error);
|
||||
return of();
|
||||
}),
|
||||
tap(() => {
|
||||
this.pending$ = of(false);
|
||||
}),
|
||||
).take(1).subscribe();
|
||||
}
|
||||
|
||||
checkConnectStatus() {
|
||||
this.connectionStatus = [];
|
||||
const msg = this.probeHost.probe.connectDate ? {
|
||||
severity: 'success',
|
||||
summary: 'Connected',
|
||||
detail: this.probeHost.probe.connectAddress
|
||||
} : {
|
||||
severity: 'warn', // info, warn, error
|
||||
summary: 'Not Connected',
|
||||
};
|
||||
this.connectionStatus.push(msg);
|
||||
}
|
||||
|
||||
onDisplayNameEditing(value: string) {
|
||||
const msg: string = this.checkValidDisplayName(value);
|
||||
|
@ -72,10 +81,6 @@ export class ProbeDetailComponent implements OnChanges {
|
|||
this.editMode = false;
|
||||
}
|
||||
|
||||
onDiscoveryClick() {
|
||||
this.discovery.emit(this.probeHost.id);
|
||||
}
|
||||
|
||||
checkValidDisplayName(value: string): string | null {
|
||||
if (value.length <= 2 || value.length > 20) {
|
||||
return 'displayname length : 3 ~ 20';
|
|
@ -2,7 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'of-download',
|
||||
templateUrl: './download.component.html',
|
||||
templateUrl: './probe-download.component.html',
|
||||
})
|
||||
export class ProbeDownloadComponent implements OnInit {
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<h1>Probes</h1>
|
||||
<of-error-message [error]="error" [closable]="false"></of-error-message>
|
||||
<of-block-progressbar [target]="content" [pending]="pending"></of-block-progressbar>
|
||||
<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
|
||||
<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
|
||||
|
||||
<p-panel #content [showHeader]="false" class="block-panel">
|
||||
<p-table [value]="probeHosts" selectionMode="single" (onRowSelect)="onProbeSelect($event)" [resizableColumns]="true">
|
||||
<p-table [value]="probeHosts$ | async" selectionMode="single" (onRowSelect)="onProbeSelect($event)" [resizableColumns]="true">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Probe Name</th>
|
70
@overflow/probe/component/probe-list.component.ts
Normal file
70
@overflow/probe/component/probe-list.component.ts
Normal file
|
@ -0,0 +1,70 @@
|
|||
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { ProbeHostService } from '../service/probe-host.service';
|
||||
import { AuthContainerSelector } from '@overflow/shared/auth/store';
|
||||
import { DomainMember } from '@overflow/commons-typescript/model/domain';
|
||||
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-list',
|
||||
templateUrl: './probe-list.component.html',
|
||||
})
|
||||
export class ProbeListComponent implements OnInit {
|
||||
|
||||
probeHosts$: Observable<ProbeHost[]>;
|
||||
pending$: Observable<boolean>;
|
||||
error$: Observable<any>;
|
||||
@Output() select = new EventEmitter<ProbeHost>();
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private probeHostService: ProbeHostService,
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.store.pipe(
|
||||
tap(() => {
|
||||
this.pending$ = of(true);
|
||||
}),
|
||||
select(AuthContainerSelector.selectDomainMember),
|
||||
exhaustMap((domainMember: DomainMember) =>
|
||||
this.probeHostService.readAllByDomainID(domainMember.domain.id)
|
||||
.pipe(
|
||||
map((probeHosts: ProbeHost[]) => {
|
||||
this.probeHosts$ = of(probeHosts);
|
||||
}),
|
||||
catchError(error => {
|
||||
this.error$ = of(error);
|
||||
return of();
|
||||
})
|
||||
)
|
||||
),
|
||||
tap(() => {
|
||||
this.pending$ = of(false);
|
||||
}),
|
||||
).take(1).subscribe();
|
||||
}
|
||||
|
||||
onProbeSelect(event) {
|
||||
this.select.emit(event.data);
|
||||
}
|
||||
|
||||
getUptime(probe: Probe) {
|
||||
if (!probe.connectDate) {
|
||||
return 'Not Connected.';
|
||||
}
|
||||
const hours = Math.abs(new Date().getTime() - probe.connectDate.getTime());
|
||||
return this.convertUptimeString(hours);
|
||||
}
|
||||
|
||||
convertUptimeString(hours: number) {
|
||||
if (hours === 0) {
|
||||
return 'Less than an hour.';
|
||||
} else {
|
||||
return 'About ' + hours;
|
||||
}
|
||||
}
|
||||
}
|
4
@overflow/probe/component/probe-selector.component.html
Normal file
4
@overflow/probe/component/probe-selector.component.html
Normal file
|
@ -0,0 +1,4 @@
|
|||
<div *ngIf="!probeHostID">
|
||||
<p-dropdown [options]="options" [(ngModel)]="selected" optionLabel="displayName" placeholder="Select a Probe"
|
||||
(onChange)="onSelect()"></p-dropdown>
|
||||
</div>
|
85
@overflow/probe/component/probe-selector.component.ts
Normal file
85
@overflow/probe/component/probe-selector.component.ts
Normal file
|
@ -0,0 +1,85 @@
|
|||
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { Observable, of, Subscription } from 'rxjs';
|
||||
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
|
||||
import { AuthContainerSelector } from '@overflow/shared/auth/store';
|
||||
import { DomainMember } from '@overflow/commons-typescript/model/domain';
|
||||
import { ProbeHostService } from '../service/probe-host.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-selector',
|
||||
templateUrl: './probe-selector.component.html',
|
||||
})
|
||||
export class ProbeSelectorComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input() probeHostID: number;
|
||||
probeHosts: ProbeHost[];
|
||||
pending$: Observable<boolean>;
|
||||
error$: Observable<any>;
|
||||
@Output() select = new EventEmitter<ProbeHost>();
|
||||
|
||||
options: Probe[];
|
||||
selected: Probe;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private probeHostService: ProbeHostService,
|
||||
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.pipe(
|
||||
tap(() => {
|
||||
this.pending$ = of(true);
|
||||
}),
|
||||
select(AuthContainerSelector.selectDomainMember),
|
||||
exhaustMap((domainMember: DomainMember) =>
|
||||
this.probeHostService.readAllByDomainID(domainMember.domain.id)
|
||||
.pipe(
|
||||
map((probeHosts: ProbeHost[]) => {
|
||||
this.probeHosts = probeHosts;
|
||||
}),
|
||||
catchError(error => {
|
||||
this.error$ = of(error);
|
||||
return of();
|
||||
})
|
||||
)
|
||||
),
|
||||
tap(() => {
|
||||
this.generate();
|
||||
this.pending$ = of(false);
|
||||
}),
|
||||
).take(1).subscribe();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
|
||||
}
|
||||
|
||||
generate() {
|
||||
this.checkPreselected();
|
||||
this.options = [];
|
||||
for (const ph of this.probeHosts) {
|
||||
this.options.push(ph.probe);
|
||||
}
|
||||
}
|
||||
|
||||
checkPreselected() {
|
||||
if (!this.probeHosts || !this.probeHostID) {
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
const preselected = this.probeHosts.find(probeHost => probeHost.id === Number(this.probeHostID));
|
||||
this.select.emit(preselected);
|
||||
});
|
||||
}
|
||||
|
||||
onSelect() {
|
||||
const optionselected = this.probeHosts.find(probeHost => probeHost.probe.id === this.selected.id);
|
||||
this.select.emit(optionselected);
|
||||
}
|
||||
|
||||
}
|
|
@ -3,7 +3,7 @@ import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
|
|||
|
||||
@Component({
|
||||
selector: 'of-probe-summary',
|
||||
templateUrl: './summary.component.html',
|
||||
templateUrl: './probe-summary.component.html',
|
||||
})
|
||||
export class ProbeSummaryComponent implements OnChanges {
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<div *ngIf="!probeHostID">
|
||||
<p-dropdown *ngIf="options.length > 0" [options]="options" [(ngModel)]="selected" optionLabel="displayName" placeholder="Select a Probe"
|
||||
(onChange)="onSelect()"></p-dropdown>
|
||||
</div>
|
|
@ -1,43 +0,0 @@
|
|||
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-selector',
|
||||
templateUrl: './selector.component.html',
|
||||
})
|
||||
export class ProbeSelectorComponent implements OnChanges {
|
||||
|
||||
@Output() select = new EventEmitter<ProbeHost>();
|
||||
@Input() probeHosts: ProbeHost[];
|
||||
@Input() probeHostID: number;
|
||||
|
||||
options: Probe[];
|
||||
selected: Probe;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
this.checkPreselected();
|
||||
this.options = [];
|
||||
for (const ph of this.probeHosts) {
|
||||
this.options.push(ph.probe);
|
||||
}
|
||||
}
|
||||
|
||||
checkPreselected() {
|
||||
if (!this.probeHosts || !this.probeHostID) {
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
const preselected = this.probeHosts.find(probeHost => probeHost.id === Number(this.probeHostID));
|
||||
this.select.emit(preselected);
|
||||
});
|
||||
}
|
||||
|
||||
onSelect() {
|
||||
const optionselected = this.probeHosts.find(probeHost => probeHost.probe.id === this.selected.id);
|
||||
this.select.emit(optionselected);
|
||||
}
|
||||
|
||||
}
|
|
@ -1,9 +0,0 @@
|
|||
import { ProbeListContainerComponent } from '../container/probe-list-container.component';
|
||||
import { ProbeDetailContainerComponent } from '../container/probe-detail-container.component';
|
||||
import { ProbeSelectorContainerComponent } from './probe-selector-container.component';
|
||||
|
||||
export const CONTAINER_COMPONENTS = [
|
||||
ProbeListContainerComponent,
|
||||
ProbeDetailContainerComponent,
|
||||
ProbeSelectorContainerComponent
|
||||
];
|
|
@ -1 +0,0 @@
|
|||
<of-probe-detail [pending]="pending$ |async" [probeHost]="probeHost$ | async" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>
|
|
@ -1,44 +0,0 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import * as ProbeStore from '../store/entity/probe';
|
||||
import { ProbeDetailContainerSelector } from '../store';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-detail-container',
|
||||
templateUrl: './probe-detail-container.component.html',
|
||||
})
|
||||
export class ProbeDetailContainerComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input() probeHostID: number;
|
||||
@Output() discovery = new EventEmitter<number>();
|
||||
probeHost$: Observable<ProbeHost>;
|
||||
pending$: Observable<boolean>;
|
||||
error$: Observable<any>;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private route: ActivatedRoute,
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.pending$ = this.store.pipe(select(ProbeDetailContainerSelector.selectPending));
|
||||
this.error$ = this.store.pipe(select(ProbeDetailContainerSelector.selectError));
|
||||
this.probeHost$ = this.store.pipe(select(ProbeDetailContainerSelector.selectOne(this.probeHostID)));
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
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 +0,0 @@
|
|||
<of-probe-list [pending]="pending$ | async" (select)="onSelect($event)" [probeHosts]="probeHosts$ | async" [error]="error$ | async"></of-probe-list>
|
|
@ -1,42 +0,0 @@
|
|||
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 ProbeEntityStore from '../store/entity/probe';
|
||||
import { ProbeListContainerSelector } from '../store';
|
||||
import { AuthContainerSelector } from '../../shared/auth/store';
|
||||
import { DomainMember } from '@overflow/commons-typescript/model/domain';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-list-container',
|
||||
templateUrl: './probe-list-container.component.html',
|
||||
})
|
||||
export class ProbeListContainerComponent implements OnInit {
|
||||
|
||||
probeHosts$: Observable<ProbeHost[]>;
|
||||
pending$: Observable<boolean>;
|
||||
error$: Observable<any>;
|
||||
@Output() select = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.probeHosts$ = this.store.pipe(select(ProbeListContainerSelector.selectAll));
|
||||
this.pending$ = this.store.pipe(select(ProbeListContainerSelector.selectPending));
|
||||
this.error$ = this.store.pipe(select(ProbeListContainerSelector.selectError));
|
||||
|
||||
this.store.select(AuthContainerSelector.selectDomainMember).subscribe(
|
||||
(domainMember: DomainMember) => {
|
||||
this.store.dispatch(new ProbeEntityStore.ReadAllByDomainID(domainMember.domain.id));
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onSelect(probeHost: ProbeHost) {
|
||||
this.select.emit(probeHost);
|
||||
}
|
||||
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
<of-probe-selector (select)="select.emit($event)" [probeHosts]="probeHosts$ | async" [probeHostID]="probeHostID"></of-probe-selector>
|
|
@ -1,33 +0,0 @@
|
|||
import { Component, EventEmitter, Output, OnInit, Input } from '@angular/core';
|
||||
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import * as ProbeEntityStore from '@overflow/probe/store/entity/probe';
|
||||
import { ProbeSelectorContainerSelector } from '@overflow/probe/store';
|
||||
import { AuthContainerSelector } from '@overflow/shared/auth/store';
|
||||
import { DomainMember } from '@overflow/commons-typescript/model/domain';
|
||||
|
||||
@Component({
|
||||
selector: 'of-probe-selector-container',
|
||||
templateUrl: './probe-selector-container.component.html',
|
||||
})
|
||||
export class ProbeSelectorContainerComponent implements OnInit {
|
||||
|
||||
probeHosts$: Observable<ProbeHost[]>;
|
||||
@Output() select = new EventEmitter();
|
||||
@Input() probeHostID: number;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.probeHosts$ = this.store.pipe(select(ProbeSelectorContainerSelector.selectAll));
|
||||
this.store.select(AuthContainerSelector.selectDomainMember).subscribe(
|
||||
(domainMember: DomainMember) => {
|
||||
this.store.dispatch(new ProbeEntityStore.ReadAllByDomainID(domainMember.domain.id));
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
|
@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
|
|||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { COMPONENTS } from './component';
|
||||
import { CONTAINER_COMPONENTS } from './container';
|
||||
import { ProbeStoreModule } from './probe-store.module';
|
||||
import { SERVICES } from './service';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
@ -18,11 +17,9 @@ import { UIModule } from '@overflow/shared/ui/ui.module';
|
|||
MetaModule,
|
||||
],
|
||||
declarations: [
|
||||
CONTAINER_COMPONENTS,
|
||||
COMPONENTS,
|
||||
],
|
||||
exports: [
|
||||
CONTAINER_COMPONENTS,
|
||||
COMPONENTS,
|
||||
],
|
||||
providers: [
|
||||
|
|
|
@ -2,8 +2,7 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<!--<of-discovery></of-discovery>-->
|
||||
<of-discovery-container [probeHostID]="probeHostID"></of-discovery-container>
|
||||
<of-discovery [probeHostID]="probeHostID"></of-discovery>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { NoAuthProbePageComponent } from './noauth-probe-page.component';
|
||||
import { ProbeListComponent } from '@overflow/probe/component/list/list.component';
|
||||
import { ProbeDownloadComponent } from '@overflow/probe/component/download/download.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
|
@ -1,10 +1,7 @@
|
|||
<div *ngIf="!isDetail; else detailView">
|
||||
<of-probe-list-container (select)="onProbeSelect($event)"></of-probe-list-container>
|
||||
<of-probe-list (select)="onProbeSelect($event)"></of-probe-list>
|
||||
</div>
|
||||
|
||||
<ng-template #detailView>
|
||||
<of-probe-detail-container [probeHostID]="probeHostID"
|
||||
(targetSelect)="onTargetSelect($event)"
|
||||
(discovery)="onDiscovery($event)"
|
||||
></of-probe-detail-container>
|
||||
<of-probe-detail [probeHostID]="probeHostID" (discovery)="onDiscovery($event)"></of-probe-detail>
|
||||
</ng-template>
|
Loading…
Reference in New Issue
Block a user