noauthprobe-detail

This commit is contained in:
insanity 2018-06-14 15:45:39 +09:00
parent e46cd4ae7d
commit cd0745c362
15 changed files with 255 additions and 33 deletions

View File

@ -1,7 +1,11 @@
import { InfraMapComponent } from './infra-map.component'; import { InfraMapComponent } from './infra-map.component';
import { InfraTreeComponent } from './infra-tree.component'; import { InfraTreeComponent } from './infra-tree.component';
import { InfraHostOSComponent } from './infra-host-os.component';
import { InfraHostIPsComponent } from './infra-host-ips.component';
export const COMPONENTS = [ export const COMPONENTS = [
InfraMapComponent, InfraMapComponent,
InfraTreeComponent InfraTreeComponent,
InfraHostOSComponent,
InfraHostIPsComponent
]; ];

View File

@ -0,0 +1,29 @@
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<h3>NICs</h3>
</div>
<!-- info -->
<div class="ui-g ui-bottom-space-10">
<p-table *ngIf="infraHostIPs" [value]="infraHostIPs" selectionMode="single" (onRowSelect)="select.emit($event.data)" [resizableColumns]="true">
<ng-template pTemplate="header">
<tr>
<th>Interface</th>
<th style="width:3em">Ver.</th>
<th>Address</th>
<th>Mac address</th>
<th>Gateway</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr [pSelectableRow]="rowData">
<td>{{rowData.iface}}</td>
<td>{{rowData.metaIPType.key}}</td>
<td>{{rowData.address}}</td>
<td>{{rowData.mac}}</td>
<td>{{rowData.gateway}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>

View File

@ -0,0 +1,18 @@
import {
Component, Input, Output, EventEmitter
} from '@angular/core';
import { InfraHostIP } from '@overflow/commons-typescript';
@Component({
selector: 'of-infra-host-ips',
templateUrl: './infra-host-ips.component.html',
})
export class InfraHostIPsComponent {
@Input() infraHostIPs: InfraHostIP[];
@Output() select = new EventEmitter<InfraHostIP>();
constructor(
) {
}
}

View File

@ -0,0 +1,35 @@
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<h3>Host</h3>
</div>
<!-- info -->
<div class="ui-g ui-bottom-space-10">
<div class="ui-g-12 ui-nopad">
<p-panel [showHeader]="false">
<div *ngIf="infraHostOS">
<div class="ui-g">
<div class="ui-g-12 ui-md-6 ui-key-value" *ngIf="infraHostOS.name">
<of-key-value [key]="'Name'" [value]="infraHostOS.name"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value" *ngIf="infraHostOS.os">
<of-key-value [key]="'OS'" [value]="infraHostOS.os"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value" *ngIf="infraHostOS.platform">
<of-key-value [key]="'Platform'" [value]="infraHostOS.platform"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value" *ngIf="infraHostOS.platformFamily">
<of-key-value [key]="'PlatformFamily'" [value]="infraHostOS.platformFamily"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value" *ngIf="infraHostOS.kervelVersion">
<of-key-value [key]="'Kernel'" [value]="infraHostOS.kervelVersion"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value" *ngIf="infraHostOS.hostID">
<of-key-value [key]="'Host ID'" [value]="infraHostOS.hostID"></of-key-value>
</div>
</div>
</div>
</p-panel>
</div>
</div>
</div>

View File

@ -0,0 +1,17 @@
import {
Component, Input
} from '@angular/core';
import { InfraHostOS } from '@overflow/commons-typescript/model/infra';
@Component({
selector: 'of-infra-host-os',
templateUrl: './infra-host-os.component.html',
})
export class InfraHostOSComponent {
@Input() infraHostOS: InfraHostOS;
constructor(
) {
}
}

View File

@ -1,7 +1,9 @@
import { NoAuthProbeListComponent } from './noauth-probe-list.component'; import { NoAuthProbeListComponent } from './noauth-probe-list.component';
import { NoAuthProbeDetailComponent } from './noauth-probe-detail.component'; import { NoAuthProbeDetailComponent } from './noauth-probe-detail.component';
import { NoAuthProbeGeneralComponent } from './noauth-probe-general.component';
export const COMPONENTS = [ export const COMPONENTS = [
NoAuthProbeListComponent, NoAuthProbeListComponent,
NoAuthProbeDetailComponent NoAuthProbeDetailComponent,
NoAuthProbeGeneralComponent,
]; ];

View File

@ -1,11 +1,18 @@
noauthprobe_detail <of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
<!-- <p-panel *ngIf="probeHost" #content [showHeader]="false" class="block-panel"> <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
<of-probe-general [probe]="probeHost.probe" (modified)="modifiedGeneral($event)"></of-probe-general>
<of-probe-host [infraHost]="probeHost.infraHost"></of-probe-host> <p-panel *ngIf="noAuthProbe" #content [showHeader]="false" class="block-panel">
<of-noauth-probe-general [noAuthProbe]="noAuthProbe"></of-noauth-probe-general>
<!-- <<of-infra-host-machine></of-infra-host-machine> -->
<of-infra-host-os [infraHostOS]="noAuthProbe.infraHost.infraHostOS"></of-infra-host-os>
<of-infra-host-ips [infraHostIPs]="noAuthProbe.infraHost.infraHostIPs" (select)="onNICSelect($event)"></of-infra-host-ips>
<div class="ui-g" dir="rtl"> <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" <button class="ui-button-width-fit" [disabled]="!selectedNIC" type="button" label="Accept" icon="ui-icon-check" pButton (click)="accept()"></button>
pButton (click)="remove(probeHost)"></button> <button class="ui-button-danger ui-button-width-fit" [disabled]="!selectedNIC" type="button" label="Deny" icon="ui-icon-close"
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="discovery.emit(probeHost.id)"></button> pButton (click)="deny()"></button>
</div> </div>
</p-panel> --> </p-panel>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>

View File

@ -4,42 +4,86 @@ import { Store, select } from '@ngrx/store';
import { Observable, of, Subscription } from 'rxjs'; import { Observable, of, Subscription } from 'rxjs';
import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators'; import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
import { NoAuthProbeService } from '../service/noauth-probe.service'; import { NoAuthProbeService } from '../service/noauth-probe.service';
import { NoAuthProbe, InfraHostIP } from '@overflow/commons-typescript';
import { ConfirmationService } from 'primeng/primeng';
@Component({ @Component({
selector: 'of-noauth-probe-detail', selector: 'of-noauth-probe-detail',
templateUrl: './noauth-probe-detail.component.html', templateUrl: './noauth-probe-detail.component.html',
providers: [ConfirmationService]
}) })
export class NoAuthProbeDetailComponent implements OnInit { export class NoAuthProbeDetailComponent implements OnInit {
// @Input() probeHostID; @Input() id: number;
pending$: Observable<boolean>; pending$: Observable<boolean>;
noAuthProbe: NoAuthProbe;
error$: Observable<any>; error$: Observable<any>;
selectedNIC: InfraHostIP;
@Output() discovery = new EventEmitter<number>(); @Output() back = new EventEmitter();
constructor( constructor(
private noAuthProbeService: NoAuthProbeService, private noAuthProbeService: NoAuthProbeService,
private confirmationService: ConfirmationService,
) { ) {
} }
ngOnInit() { ngOnInit() {
// this.noAuthProbeService.read(1) this.noAuthProbeService.read(this.id)
// .pipe( .pipe(
// tap(() => { tap(() => {
// this.pending$ = of(true); this.pending$ = of(true);
// }), }),
// map((probeHost: ProbeHost) => { map((noauthProbe: NoAuthProbe) => {
// this.probeHost = probeHost; noauthProbe.infraHost = JSON.parse(noauthProbe.infraHostMeta);
// }), this.noAuthProbe = noauthProbe;
// catchError(error => { }),
// this.error$ = of(error); catchError(error => {
// return of(); this.error$ = of(error);
// }), return of();
// tap(() => { }),
// this.pending$ = of(false); tap(() => {
// }), this.pending$ = of(false);
// take(1), }),
// ).subscribe(); take(1),
).subscribe();
} }
onNICSelect(infraHostIP: InfraHostIP) {
this.selectedNIC = infraHostIP;
console.log(this.selectedNIC);
}
accept() {
this.confirmationService.confirm({
header: 'Are you sure to accept this Probe?',
message: 'Start collecting data as a Probe.',
icon: 'fa-check',
accept: () => {
this.noAuthProbeService.acceptNoAuthProbe(this.id, this.selectedNIC.address)
.pipe(
tap(() => {
this.pending$ = of(true);
}),
map((noauthProbes: NoAuthProbe[]) => {
this.back.emit();
}),
catchError(error => {
this.error$ = of(error);
return of();
}),
tap(() => {
this.pending$ = of(false);
}),
take(1),
).subscribe();
},
reject: () => {
}
});
}
deny() {
alert('609호에 있는 강아지 deny');
}
} }

View File

@ -0,0 +1,36 @@
<div class="ui-g">
<div class="ui-g-6 ui-nopad">
<h3>General</h3>
</div>
<!-- info -->
<div class="ui-g ui-bottom-space-10">
<div class="ui-g-12 ui-nopad">
<p-panel [showHeader]="false">
<div *ngIf="noAuthProbe">
<div class="ui-g">
<div class="ui-g-12 ui-md-6 ui-key-value">
<of-key-value [key]="'API Key'" [value]="noAuthProbe.apiKey"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value">
<of-key-value [key]="'Created at'" [value]="noAuthProbe.createDate | date: 'dd/MM/yyyy'"></of-key-value>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value">
<ng-container [ngSwitch]="noAuthProbe.connectDate">
<ng-container *ngSwitchCase="undefined">
<of-key-value [key]="'Connection'" [value]="'Not connected.'"></of-key-value>
</ng-container>
<ng-container *ngSwitchDefault>
<of-key-value [key]="'Connection'" [value]="noAuthProbe.connectDate | date: 'dd/MM/yyyy' (noAuthProbe.connectAddress)"></of-key-value>
</ng-container>
</ng-container>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value">
<of-key-value [key]="'Uptime'" [value]="'TODO'"></of-key-value>
</div>
</div>
</div>
</p-panel>
</div>
</div>
</div>

View File

@ -0,0 +1,18 @@
import { Component, OnInit, Input } from '@angular/core';
import { NoAuthProbe } from '@overflow/commons-typescript';
@Component({
selector: 'of-noauth-probe-general',
templateUrl: './noauth-probe-general.component.html',
})
export class NoAuthProbeGeneralComponent implements OnInit {
@Input() noAuthProbe: NoAuthProbe;
constructor(
) {
}
ngOnInit() {
}
}

View File

@ -8,6 +8,7 @@ import { NoAuthProbeLoggerModule } from './noauth-probe-logger.module';
import { COMPONENTS } from './component'; import { COMPONENTS } from './component';
import { SERVICES } from './service'; import { SERVICES } from './service';
import { InfraModule } from '../infra/infra.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -15,6 +16,7 @@ import { SERVICES } from './service';
NoAuthProbeRPCModule, NoAuthProbeRPCModule,
NoAuthProbeLoggerModule, NoAuthProbeLoggerModule,
UIModule, UIModule,
InfraModule
], ],
declarations: [ declarations: [
COMPONENTS, COMPONENTS,

View File

@ -28,4 +28,8 @@ export class NoAuthProbeService {
public denyNoauthProbe(id: number): Observable<NoAuthProbe[]> { public denyNoauthProbe(id: number): Observable<NoAuthProbe[]> {
return this.rpcService.call<NoAuthProbe[]>('NoAuthProbeService.denyNoauthProbe', id); return this.rpcService.call<NoAuthProbe[]>('NoAuthProbeService.denyNoauthProbe', id);
} }
public read(id: number): Observable<NoAuthProbe> {
return this.rpcService.call<NoAuthProbe>('NoAuthProbeService.read', id);
}
} }

View File

@ -1 +1 @@
<of-noauth-probe-detail [id]="id"></of-noauth-probe-detail> <of-noauth-probe-detail [id]="id" (back)="onBack($event)"></of-noauth-probe-detail>

View File

@ -1,7 +1,6 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { BreadcrumbService } from '@app/commons/service/breadcrumb.service'; import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { NoAuthProbe } from '@overflow/commons-typescript';
@Component({ @Component({
selector: 'of-pages-noauth-probe-detail', selector: 'of-pages-noauth-probe-detail',
@ -14,14 +13,17 @@ export class NoAuthProbeDetailPageComponent {
constructor( constructor(
private breadcrumbService: BreadcrumbService, private breadcrumbService: BreadcrumbService,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private router: Router, private router: Router
) { ) {
breadcrumbService.setItems([ breadcrumbService.setItems([
{ label: 'Probe', routerLink: ['/probe/list'] }, { label: 'Probe', routerLink: ['/probe/list'] },
{ label: 'Unauthroized', routerLink: ['/probe/noauth'] }, { label: 'Unauthroized', routerLink: ['/probe/noauth'] },
]); ]);
this.id = this.activatedRoute.snapshot.params['id']; this.id = this.activatedRoute.snapshot.params['id'];
}
onBack() {
this.router.navigate(['probe/noauth']);
} }
} }

View File

@ -29,4 +29,8 @@ export class ProbeDetailPageComponent {
onDiscovery(probeHostID: number) { onDiscovery(probeHostID: number) {
this.router.navigate(['discovery', probeHostID]); this.router.navigate(['discovery', probeHostID]);
} }
onBack() {
this.router.navigate
}
} }