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

arrange

Browse Source
This commit is contained in:
insanity
2018-05-26 18:08:40 +09:00
parent 67a924bcf1
commit 2149e32246
18 changed files with 241 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
@overflow/probe/component/detail/detail.component.html
View File

@@ -1,84 +1,97 @@
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<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-blockUI [target]="content" [blocked]="pending">
<i class="fa ui-icon-lock block-icon"></i>
</p-blockUI>
<!-- Probe info -->
<div class="ui-g ui-bottom-space-10">
<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">
<div *ngIf="editMode" class="of-key-value-div">
<span>Name</span>
<span class="ng-star-inserted">
<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]="probeHost.probe.displayName"></of-key-value>
</div>
<p-panel #content [showHeader]="false" class="block-panel">
<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 *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value">
</span>
<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]="displayNameErrMsg || 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">
<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">
<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 *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value"> -->
<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>
<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>
</p-panel>
<!-- Host info -->
<p-panel [showHeader]="false" class="nopad">
<div *ngIf="probeHost">
<div class="ui-g form-group">
<!-- 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 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>
</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-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> -->

53
@overflow/probe/component/detail/detail.component.ts
View File

@@ -9,28 +9,43 @@ import { MessageService } from 'primeng/components/common/messageservice';
})
export class ProbeDetailComponent {
@Input() pending: boolean;
@Input() probeHost: ProbeHost;
@Output() modify = new EventEmitter<ProbeHost>();
@Output() discovery = new EventEmitter<number>();
editMode = false;
displayNameErrMsg: string;
descriptionErrMsg: string;
displayName: string;
description: string;
constructor(private messageService: MessageService) {
}
onDisplayNameEditing(value: string) {
const msg: string = this.checkValidDisplayName(value);
if (msg !== null) {
this.displayNameErrMsg = msg;
} else {
this.displayNameErrMsg = null;
this.displayName = value;
}
}
onDescriptionEditing(value: string) {
const msg: string = this.checkValidDescription(value);
if (msg !== null) {
this.descriptionErrMsg = msg;
} else {
this.descriptionErrMsg = null;
this.description = value;
}
}
onEditSave() {
const displayNameValidation = this.checkValidDisplayName();
if (displayNameValidation) {
alert(displayNameValidation);
return;
}
const descriptionValidation = this.checkValidDescription();
if (descriptionValidation) {
alert(descriptionValidation);
return;
}
this.probeHost.probe.displayName = this.displayName;
this.probeHost.probe.description = this.description;
this.modify.emit(this.probeHost);
this.editMode = false;
}
@@ -39,25 +54,23 @@ export class ProbeDetailComponent {
this.discovery.emit(this.probeHost.id);
}
checkValidDisplayName(): string {
const displayName = this.probeHost.probe.displayName;
if (displayName.length <= 2 || displayName.length > 20) {
checkValidDisplayName(value: string): string | null {
if (value.length <= 2 || value.length > 20) {
return 'displayname length : 3 ~ 20';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (displayName.match(regex)) {
if (value.match(regex)) {
return 'Cannot use special characters.';
}
return null;
}
checkValidDescription(): string {
const description = this.probeHost.probe.description;
if (description.length > 50) {
checkValidDescription(value: string): string | null {
if (value.length > 50) {
return 'description length : 0 ~ 50';
}
const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
if (description.match(regex)) {
if (value.match(regex)) {
return 'Cannot use special characters.';
}
return null;

57
@overflow/probe/component/list/list.component.html
View File

@@ -1,27 +1,32 @@
<h1>Probes</h1>
<p-table [value]="probeHosts" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<ng-template pTemplate="header">
<tr>
<th>Probe Name</th>
<th>Uptime</th>
<th style="width:10em">IP</th>
<th style="width:8em">OS</th>
<th style="width:10em">CIDR</th>
<th pResizableColumn>Targets</th>
<th style="width:8em">Authroized at</th>
<th style="width:9em">Authroized by</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-probeHost>
<tr [pSelectableRow]="probeHost">
<td>{{probeHost.probe.displayName}}</td>
<td>{{getUptime(probeHost.probe)}}</td>
<td>{{probeHost.host.ipv4}}</td>
<td>{{probeHost.host.os.vendor.name}}</td>
<td>{{probeHost.probe.cidr}}</td>
<td>{{probeHost.probe.targetCount}}</td>
<td>{{probeHost.probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
<td>{{probeHost.probe.authorizeMember.name}}</td>
</tr>
</ng-template>
</p-table>
<p-blockUI [target]="content" [blocked]="pending">
<i class="fa ui-icon-lock block-icon"></i>
</p-blockUI>
<p-panel #content [showHeader]="false" class="block-panel">
<p-table [value]="probeHosts" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<ng-template pTemplate="header">
<tr>
<th>Probe Name</th>
<th>Uptime</th>
<th style="width:10em">IP</th>
<th style="width:8em">OS</th>
<th style="width:10em">CIDR</th>
<th pResizableColumn>Targets</th>
<th style="width:8em">Authroized at</th>
<th style="width:9em">Authroized by</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-probeHost>
<tr [pSelectableRow]="probeHost">
<td>{{probeHost.probe.displayName}}</td>
<td>{{getUptime(probeHost.probe)}}</td>
<td>{{probeHost.host.ipv4}}</td>
<td>{{probeHost.host.os.vendor.name}}</td>
<td>{{probeHost.probe.cidr}}</td>
<td>{{probeHost.probe.targetCount}}</td>
<td>{{probeHost.probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
<td>{{probeHost.probe.authorizeMember.name}}</td>
</tr>
</ng-template>
</p-table>
</p-panel>

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

@@ -7,6 +7,7 @@ import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
})
export class ProbeListComponent {
@Output() select = new EventEmitter<ProbeHost>();
@Input() pending;
@Input() probeHosts: ProbeHost[];
constructor() {