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

ing

Browse Source
This commit is contained in:
crusader
2018-06-04 17:25:29 +09:00
parent 607b74e9b0
commit cd1e53f67a
58 changed files with 490 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,10 +4,15 @@ import { ProbeDownloadComponent } from './probe-download.component';
import { ProbeSelectorComponent } from './probe-selector.component';
import { ProbeSummaryComponent } from './probe-summary.component';
import { ProbeGeneralComponent } from './probe-general.component';
import { ProbeHostComponent } from './probe-host.component';
export const COMPONENTS = [
ProbeListComponent,
ProbeDetailComponent,
ProbeDownloadComponent,
ProbeSelectorComponent,
ProbeSummaryComponent
ProbeSummaryComponent,
ProbeGeneralComponent,
ProbeHostComponent,
];

90
@overflow/probe/component/probe-detail.component.html
View File

@@ -1,95 +1,13 @@
<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">
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<h1>Info</h1>
</div>
<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()" [disabled]="displayNamedisplayNameErrMsg || descriptionErrMsg"></button>
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
</div>
</div>
<!-- Probe info -->
<div class="ui-g ui-bottom-space-10">
<div class="ui-g-12 ui-nopad">
<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">
<div *ngIf="editMode" class="of-key-value-div">
<span>Name</span>
<span class="ng-star-inserted">
<input #displayName type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="onDisplayNameEditing(displayName.value)"/>
<div *ngIf="displayNameErrMsg" class="ui-message ui-messages-error ui-corner-all">{{displayNameErrMsg}}</div>
</span>
</div>
<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]="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 #description type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
<div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
</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]="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]="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]="probeHost.probe.authorizeMember.name"></of-key-value>
</div>
</div>
</div>
</p-panel>
</div>
</div>
<!-- Host info -->
<div class="ui-g ui-bottom-space-10">
<div class="ui-g-12 ui-nopad">
<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>
<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 | uppercase"></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>
<p-panel *ngIf="probeHost" #content [showHeader]="false" class="block-panel">
<of-probe-general [probe]="probeHost.probe" (modified)="modifiedGeneral($event)"></of-probe-general>
<of-probe-host [infraHost]="probeHost.host"></of-probe-host>
<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>
(click)="remove(probeHost)"></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>

70
@overflow/probe/component/probe-detail.component.ts
View File

@@ -6,7 +6,6 @@ import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import { AuthSelector } from '@overflow/shared/auth/store';
import { DomainMember } from '@overflow/commons-typescript/model/domain';
import { ProbeHostService } from '../service/probe-host.service';
import { ProbeService } from '../service/probe.service';
@Component({
selector: 'of-probe-detail',
@@ -21,16 +20,9 @@ export class ProbeDetailComponent implements OnInit {
@Output() discovery = new EventEmitter<number>();
editMode = false;
displayNameErrMsg: string;
descriptionErrMsg: string;
displayName: string;
description: string;
constructor(
private store: Store<any>,
private probeHostService: ProbeHostService,
private probeService: ProbeService,
) {
}
@@ -53,70 +45,12 @@ export class ProbeDetailComponent implements OnInit {
).take(1).subscribe();
}
modifiedGeneral(probe: Probe) {
onDisplayNameEditing(value: string) {
const msg: string = this.checkValidDisplayName(value);
if (msg !== null) {
this.displayNameErrMsg = msg;
} else {
this.displayNameErrMsg = null;
this.displayName = value.trim();
}
}
onDescriptionEditing(value: string) {
const msg: string = this.checkValidDescription(value);
if (msg !== null) {
this.descriptionErrMsg = msg;
} else {
this.descriptionErrMsg = null;
this.description = value.trim();
}
}
remove(probeHost: ProbeHost) {
onEditSave() {
this.probeHost.probe.displayName = this.displayName ? this.displayName : this.probeHost.probe.displayName;
this.probeHost.probe.description = this.description ? this.description : this.probeHost.probe.description;
this.probeService.modify(this.probeHost.probe)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((probe: Probe) => {
this.editMode = false;
this.probeHost.probe = probe;
}),
catchError(error => {
this.error$ = of(error);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
checkValidDisplayName(value: string): string | null {
if (value.length <= 2 || value.length > 20) {
return 'displayname length : 3 ~ 20';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (value.match(regex)) {
return 'Cannot use special characters.';
}
return null;
}
checkValidDescription(value: string): string | null {
if (value.length > 50) {
return 'description length : 0 ~ 50';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (value.match(regex)) {
return 'Cannot use special characters.';
}
return null;
}
}

66
@overflow/probe/component/probe-general.component.html Normal file
View File

@@ -0,0 +1,66 @@
<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">
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<h3>General</h3>
</div>
<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()" [disabled]="displayNamedisplayNameErrMsg || descriptionErrMsg"></button>
<button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
</div>
</div>
<!-- Probe info -->
<div class="ui-g ui-bottom-space-10">
<div class="ui-g-12 ui-nopad">
<p-panel [showHeader]="false">
<div *ngIf="probe">
<div class="ui-g">
<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 #displayName type="text" pInputText value="{{probe.displayName}}" (keyup)="onDisplayNameEditing(displayName.value)"/>
<div *ngIf="displayNameErrMsg" class="ui-message ui-messages-error ui-corner-all">{{displayNameErrMsg}}</div>
</span>
</div>
<of-key-value *ngIf="!editMode" [key]="'Name'" [value]="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>
</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 #description type="text" pInputText value="{{probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
<div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
</span>
</div>
<of-key-value *ngIf="!editMode" [key]="'Description'" [value]="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>
</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>
</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>
</div>
</p-panel>
</div>
</div>
</p-panel>
<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> -->

129
@overflow/probe/component/probe-general.component.ts Normal file
View File

@@ -0,0 +1,129 @@
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Probe, ProbeHost } 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 { AuthSelector } from '@overflow/shared/auth/store';
import { DomainMember } from '@overflow/commons-typescript/model/domain';
import { ProbeHostService } from '../service/probe-host.service';
import { ProbeService } from '../service/probe.service';
@Component({
selector: 'of-probe-general',
templateUrl: './probe-general.component.html',
})
export class ProbeGeneralComponent implements OnInit {
@Input() probeID: number;
@Input() probe: Probe;
@Output() modified = new EventEmitter<Probe>();
error$: Observable<any>;
pending$: Observable<boolean>;
editMode = false;
displayNameErrMsg: string;
descriptionErrMsg: string;
displayName: string;
description: string;
constructor(
private probeService: ProbeService,
) {
}
ngOnInit() {
if (undefined === this.probe && undefined === this.probeID) {
// Create
} else if (undefined !== this.probe && undefined === this.probeID) {
// use probe
} else if (undefined === this.probe && undefined !== this.probeID) {
// get probe
this.probeService.read(this.probeID)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((probe: Probe) => {
this.probe = probe;
}),
catchError(error => {
this.error$ = of(error);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
} else {
// error
}
}
onDisplayNameEditing(value: string) {
const msg: string = this.checkValidDisplayName(value);
if (msg !== null) {
this.displayNameErrMsg = msg;
} else {
this.displayNameErrMsg = null;
this.displayName = value.trim();
}
}
onDescriptionEditing(value: string) {
const msg: string = this.checkValidDescription(value);
if (msg !== null) {
this.descriptionErrMsg = msg;
} else {
this.descriptionErrMsg = null;
this.description = value.trim();
}
}
onEditSave() {
this.probe.displayName = this.displayName ? this.displayName : this.probe.displayName;
this.probe.description = this.description ? this.description : this.probe.description;
this.probeService.modify(this.probe)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((probe: Probe) => {
this.editMode = false;
this.probe = probe;
this.modified.emit(probe);
}),
catchError(error => {
this.error$ = of(error);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
).take(1).subscribe();
}
checkValidDisplayName(value: string): string | null {
if (value.length <= 2 || value.length > 20) {
return 'displayname length : 3 ~ 20';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (value.match(regex)) {
return 'Cannot use special characters.';
}
return null;
}
checkValidDescription(value: string): string | null {
if (value.length > 50) {
return 'description length : 0 ~ 50';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (value.match(regex)) {
return 'Cannot use special characters.';
}
return null;
}
}

46
@overflow/probe/component/probe-host.component.html Normal file
View File

@@ -0,0 +1,46 @@
<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">
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<h3>Host</h3>
</div>
<div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
</div>
</div>
<!-- Host info -->
<div class="ui-g ui-bottom-space-10">
<div class="ui-g-12 ui-nopad">
<p-panel [showHeader]="false">
<div *ngIf="infraHost">
<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]="infraHost.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]="infraHost.ipv6 | uppercase"></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]="infraHost.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]="infraHost.os.vendor.name"></of-key-value>
</div>
</div>
</div>
</p-panel>
</div>
</div>
</p-panel>
<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> -->

38
@overflow/probe/component/probe-host.component.ts Normal file
View File

@@ -0,0 +1,38 @@
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable, of, Subscription } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import { AuthSelector } from '@overflow/shared/auth/store';
import { DomainMember } from '@overflow/commons-typescript/model/domain';
import { InfraHost } from '@overflow/commons-typescript/model/infra';
@Component({
selector: 'of-probe-host',
templateUrl: './probe-host.component.html',
})
export class ProbeHostComponent implements OnInit {
@Input() infraHost: InfraHost;
@Input() infraHostID: number;
error$: Observable<any>;
pending$: Observable<boolean>;
constructor(
) {
}
ngOnInit() {
if (undefined === this.infraHost && undefined === this.infraHostID) {
// Create
} else if (undefined !== this.infraHost && undefined === this.infraHostID) {
// use infraHost
} else if (undefined === this.infraHost && undefined !== this.infraHostID) {
// get infraHost
} else {
// error
}
}
}