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

probe / discovery module refactoring

Browse Source
This commit is contained in:
insanity
2018-05-31 18:45:40 +09:00
parent f7cb8333f0
commit b74d45c303
34 changed files with 219 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
@overflow/probe/component/detail/detail.component.spec.ts
View File

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

25
@overflow/probe/component/download/download.component.spec.ts
View File

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

10
@overflow/probe/component/index.ts
View File

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

25
@overflow/probe/component/list/list.component.spec.ts
View File

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

36
@overflow/probe/component/list/list.component.ts
View File

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

15
@overflow/probe/component/detail/detail.component.html → @overflow/probe/component/probe-detail.component.html
View File

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

65
@overflow/probe/component/detail/detail.component.ts → @overflow/probe/component/probe-detail.component.ts
View File

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

0
@overflow/probe/component/download/download.component.html → @overflow/probe/component/probe-download.component.html
View File

2
@overflow/probe/component/download/download.component.ts → @overflow/probe/component/probe-download.component.ts
View File

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

6
@overflow/probe/component/list/list.component.html → @overflow/probe/component/probe-list.component.html
View File

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

0
@overflow/probe/component/summary/summary.component.html → @overflow/probe/component/probe-summary.component.html
View File

2
@overflow/probe/component/summary/summary.component.ts → @overflow/probe/component/probe-summary.component.ts
View File

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

4
@overflow/probe/component/selector/selector.component.html
View File

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

43
@overflow/probe/component/selector/selector.component.ts
View File

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