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

probe detail

Browse Source
This commit is contained in:
insanity 2018-04-16 17:28:39 +09:00
parent 1409533337
commit ffc20955fb
14 changed files with 190 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/pages/probe/probe-page.component.ts
View File

@ -15,16 +15,10 @@ export class ProbePageComponent implements OnInit {
ngOnInit() { ngOnInit() {
const id = this.router.url.split('probe/')[1].split('/')[0]; const id = this.router.url.split('probe/')[1].split('/')[0];
// this.tabs = [
// { label: 'Probe Info', path: '/probe/' + id, icon: 'fa-check' },
// { label: 'Targets', path: '/probe/' + id + '/targets', icon: 'fa-check' },
// { label: 'History', path: '/probe/' + id + '/history', icon: 'fa-check', disabled: true },
// ];
this.tabs = [ this.tabs = [
{ label: 'INFO', routerLink: ['/probe/', id, 'info'], path: '/probe/' + id, icon: 'fa-check' }, { label: 'INFO', routerLink: ['/probe/', id, 'info'] },
{ label: 'TARGETS', routerLink: ['/probe/', id, 'targets'], icon: 'fa-check' }, { label: 'TARGETS', routerLink: ['/probe/', id, 'targets']},
{ label: 'HISTORY', routerLink: ['/probe/', id, 'history'], icon: 'fa-check', disabled: true }, { label: 'HISTORY', path: ['/probe/', id, 'history'], disabled: true },
]; ];
} }

3
src/app/pages/targets/targets-page.component.html
View File

@ -2,8 +2,7 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <div class="card no-margin">
<h1>Targets</h1> <of-target-list></of-target-list>
<!-- <of-target-list></of-target-list> -->
</div> </div>
</div> </div>
</div> </div>

4
src/app/pages/targets/targets-page.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
// import { TargetModule } from 'packages/target/target.module'; import { TargetModule } from 'packages/target/target.module';
import { TargetsPageRoutingModule } from './targets-page-routing.module'; import { TargetsPageRoutingModule } from './targets-page-routing.module';
import { TargetsPageComponent } from './targets-page.component'; import { TargetsPageComponent } from './targets-page.component';
@ -9,7 +9,7 @@ import { TargetsPageComponent } from './targets-page.component';
imports: [ imports: [
CommonModule, CommonModule,
TargetsPageRoutingModule, TargetsPageRoutingModule,
// TargetModule, TargetModule,
], ],
declarations: [ declarations: [
TargetsPageComponent TargetsPageComponent

40
src/packages/probe/component/detail/detail.component.html
View File

@ -1,4 +1,42 @@
<h1>Detail</h1> <div *ngIf="probe">
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.displayName}}">
<label>Alias</label>
</span>
</div>
<div class="ui-g-12 ui-md-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.cidr}}">
<label>CIDR</label>
</span>
</div>
<div class="ui-g-12 ui-md-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.description}}">
<label>Description</label>
</span>
</div>
<div class="ui-g-12 ui-md-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.probeKey}}">
<label>Key</label>
</span>
</div>
<div class="ui-g-12 ui-md-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}">
<label>Authrozied at</label>
</span>
</div>
<div class="ui-g-12 ui-md-4">
<span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.authorizeMember.name}}">
<label>Authrozied by</label>
</span>
</div>
</div>
<div> <div>
<button type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button> <button type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
<button class="ui-button-danger" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button> <button class="ui-button-danger" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>

9
src/packages/probe/component/detail/detail.component.ts
View File

@ -19,6 +19,8 @@ export class DetailComponent implements OnInit, AfterContentInit {
probe$ = this.detailStore.pipe(select(DetailSelector.select('probe'))); probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
probe: Probe = null; probe: Probe = null;
startIP: string;
endIP: string;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
@ -30,9 +32,8 @@ export class DetailComponent implements OnInit, AfterContentInit {
ngOnInit() { ngOnInit() {
this.probe$.subscribe( this.probe$.subscribe(
(probe: Probe) => { (probe: Probe) => {
if (probe != null) { if (probe) {
this.probe = probe; this.probe = probe;
console.log(probe);
this.arrangeInfo(); this.arrangeInfo();
} }
}, },
@ -55,8 +56,8 @@ export class DetailComponent implements OnInit, AfterContentInit {
const cidr = new CIDR(this.probe.cidr); const cidr = new CIDR(this.probe.cidr);
if (!cidr.isValid()) { if (!cidr.isValid()) {
} }
const startIP = cidr.addressStart.address; this.startIP = cidr.addressStart.address;
const endIP = cidr.addressEnd.address; this.endIP = cidr.addressEnd.address;
} }
onDiscoveryClick() { onDiscoveryClick() {

23
src/packages/probe/component/list/list.component.ts
View File

@ -25,6 +25,18 @@ export class ListComponent implements OnInit, AfterContentInit {
) { ) {
} }
ngOnInit() {
this.probes$.subscribe(
(probes: Probe[]) => {
console.log(probes);
this.probes = probes;
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
}
ngAfterContentInit() { ngAfterContentInit() {
this.store.select(AuthSelector.select('domain')).subscribe( this.store.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => { (domain: Domain) => {
@ -35,19 +47,8 @@ export class ListComponent implements OnInit, AfterContentInit {
} }
); );
this.probes$.subscribe(
(probes: Probe[]) => {
console.log(probes);
this.probes = probes;
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
} }
ngOnInit() {}
onRowSelect(event) { onRowSelect(event) {
this.router.navigate(['probe', event.data.id, 'info']); this.router.navigate(['probe', event.data.id, 'info']);

60
src/packages/target/component/detail/detail.component.html
View File

@ -1,59 +1 @@
<div fxLayout="column" fxLayoutWrap style=" padding: 8px;"> <div>target detail</div>
<div fxLayout="column" fxLayout.xs="column" style="background-color: white;padding: 10px;">
<div class="mat-headline" style="margin: 20px; border-bottom: 1px solid #dddddd;">
TARGET ALIAS
</div>
<div fxLayoutAlign="end">
<button mat-raised-button (click)="handleCheckAlive">Check Alive</button>
<button mat-raised-button (click)="handleTraceroute">Traceroute</button>
</div>
<div fxLayout="row">
<div fxFlex="20" fxFlex.lt-sm="20" fxFlex.sm="20">
<of-info-table [data]="basicInfo"></of-info-table>
</div>
<div fxFlex="20" fxFlex.lt-sm="20" fxFlex.sm="20">
<of-info-table [data]="metaInfo"></of-info-table>
</div>
<div fxFlex="60" fxFlex.lt-sm="60" fxFlex.sm="60">
<div>
<!-- Sensors -->
<h3 matLine>Sensors</h3>
<mat-table #table [dataSource]="sensors">
<ng-container matColumnDef="crawler">
<mat-header-cell *matHeaderCellDef> SensorType </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.crawler.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="itemCnt">
<mat-header-cell *matHeaderCellDef> Items </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.itemCount}} items </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.status.name}} </mat-cell>
</ng-container>
<!-- <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row> -->
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleSensorClick(row)"></mat-row>
</mat-table>
<mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</div>
</div>
</div>
</div>

115
src/packages/target/component/detail/detail.component.ts
View File

@ -1,103 +1,28 @@
// import { Component, ViewChild, OnInit, Input, AfterContentInit, AfterViewInit } from '@angular/core'; import { Component, ViewChild, OnInit, Input, AfterContentInit } from '@angular/core';
// import { MatPaginator, MatTableDataSource } from '@angular/material'; import { Router } from '@angular/router';
// import { Router } from '@angular/router';
// import { Sensor } from 'packages/sensor/model'; import { Sensor } from 'packages/sensor/model';
// @Component({ @Component({
// selector: 'of-target-detail', selector: 'of-target-detail',
// templateUrl: './detail.component.html', templateUrl: './detail.component.html',
// styleUrls: ['./detail.component.scss'] })
// }) export class DetailComponent implements OnInit, AfterContentInit {
// export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit {
// displayedColumns = ['crawler', 'itemCnt', 'status']; constructor(private router: Router) { }
// sensors: MatTableDataSource<Sensor> = null;
// @ViewChild(MatPaginator) paginator: MatPaginator;
// basicInfo = [ ngOnInit() {
// { }
// key: 'IP',
// value: '192.168.1.105',
// },
// {
// key: 'Mac',
// value: 'aaaaaaaaaaaaa',
// },
// {
// key: 'OS',
// value: 'Ubuntu',
// },
// {
// key: 'Port',
// value: '80',
// },
// ];
// metaInfo = [
// {
// key: 'Meta1',
// value: 'value1',
// },
// {
// key: 'Meta2',
// value: 'value2',
// },
// {
// key: 'Meta3',
// value: 'value3',
// },
// {
// key: 'Meta4',
// value: 'value4',
// },
// ];
// constructor(private router: Router) { } ngAfterContentInit() {
}
// ngOnInit() { handleSensorClick(sensor: Sensor) {
// } }
// ngAfterViewInit() { handleCheckAlive() {
// this.sensors.paginator = this.paginator; }
// }
// ngAfterContentInit() { handleTraceroute() {
// const temporaryData: Sensor[] = [ }
// { }
// id: 0,
// crawler: {
// id: 0,
// name: 'WMI',
// },
// status: {
// id: 0,
// name: 'UP'
// },
// itemCount: 5,
// },
// {
// id: 1,
// crawler: {
// id: 0,
// name: 'SSH',
// },
// status: {
// id: 0,
// name: 'UP'
// },
// itemCount: 5,
// },
// ];
// this.sensors = new MatTableDataSource<any>(temporaryData);
// }
// handleSensorClick(sensor: Sensor) {
// this.router.navigate(['sensor', sensor.id]);
// }
// handleCheckAlive() {
// }
// handleTraceroute() {
// }
// }

16
src/packages/target/component/index.ts
View File

@ -1,9 +1,9 @@
// import { DetailComponent } from './detail/detail.component'; import { DetailComponent } from './detail/detail.component';
// import { ListComponent } from './list/list.component'; import { ListComponent } from './list/list.component';
// import { FilterComponent } from './list/filter/filter.component'; import { FilterComponent } from './list/filter/filter.component';
// export const COMPONENTS = [ export const COMPONENTS = [
// ListComponent, ListComponent,
// DetailComponent, DetailComponent,
// FilterComponent FilterComponent
// ]; ];

20
src/packages/target/component/list/filter/filter.component.html
View File

@ -1,19 +1 @@
<div > <div>filter</div>
<mat-form-field class="example-full-width">
<input matInput placeholder='IP or Application Name' value=''>
</mat-form-field>
</div>
<div [style.margin]="'30px 0px'">
<mat-radio-group class="radio-group" >
<mat-radio-button class="radio-button" value="0">All</mat-radio-button>
<mat-radio-button class="radio-button" value="1">Active</mat-radio-button>
<mat-radio-button class="radio-button" value="2">Inactive</mat-radio-button>
</mat-radio-group>
</div>
<div [style.margin]="'30px 0px'">
<mat-radio-group class="radio-group" >
<mat-radio-button class="radio-button" value="0">All</mat-radio-button>
<mat-radio-button class="radio-button" value="1">Host</mat-radio-button>
<mat-radio-button class="radio-button" value="2">Application</mat-radio-button>
</mat-radio-group>
</div>

69
src/packages/target/component/list/list.component.html
View File

@ -1,42 +1,27 @@
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left"> <h1>Targets</h1>
<p-table [value]="targets" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
<!-- Filter --> <ng-template pTemplate="header">
<div fxFlex="20%" > <tr>
<of-target-filter></of-target-filter> <th>No.</th>
</div> <th>Status</th>
<th>Type</th>
<!-- Table --> <th>Name</th>
<div fxFlex="80%" class="example-container mat-elevation-z8"> <th>Sensors</th>
<th>Created at</th>
<mat-table #table [dataSource]="dataSource" matSort> <th></th>
</tr>
<ng-container matColumnDef="status"> </ng-template>
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell> <ng-template pTemplate="body" let-probe let-rowIndex="rowIndex">
<mat-cell *matCellDef="let element"> ? </mat-cell> <tr [pSelectableRow]="infra">
</ng-container> <td>{{rowIndex}}</td>
<td>??</td>
<ng-container matColumnDef="type"> <td>{{infra.infraType.name}}</td>
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell> <td>{{infra.target.displayName}}</td>
<mat-cell *matCellDef="let element"> {{element.infraType.name}} </mat-cell> <td>??</td>
</ng-container> <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
<td>
<ng-container matColumnDef="name"> <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget()"></button>
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell> </td>
<mat-cell *matCellDef="let element"> {{element.target.displayName}} </mat-cell> </tr>
</ng-container> </ng-template>
</p-table>
<ng-container matColumnDef="sensors">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sensors </mat-header-cell>
<mat-cell *matCellDef="let element"> ? </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
</mat-table>
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
</mat-paginator>
</div>
</div>

14
src/packages/target/component/list/list.component.scss
View File

@ -1,14 +0,0 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
.mat-header-cell.mat-sort-header-sorted {
color: black;
}

95
src/packages/target/component/list/list.component.ts
View File

@ -1,57 +1,52 @@
// import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild } from '@angular/core'; import { Component, OnInit, AfterViewInit, AfterContentInit, Input } from '@angular/core';
// import { MatTableDataSource, MatSort } from '@angular/material'; import { Router, ActivatedRoute } from '@angular/router';
// import { Router } from '@angular/router'; import { Infra } from 'packages/infra/model';
// import { Infra } from '../../../infra/model'; import { Store, select } from '@ngrx/store';
import { ListSelector } from 'packages/infra/store';
import * as ListStore from 'packages/infra/store/list';
import { Page } from 'app/commons/model';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { Probe } from 'packages/probe/model';
@Component({
selector: 'of-target-list',
templateUrl: './list.component.html',
})
export class ListComponent implements OnInit, AfterContentInit {
// @Component({ infras$ = this.store.pipe(select(ListSelector.select('page')));
// selector: 'of-target-list', infras: Infra[];
// templateUrl: './list.component.html', probe: Probe;
// styleUrls: ['./list.component.scss']
// })
// export class ListComponent implements OnInit, AfterContentInit {
// displayedColumns = ['status', 'type', 'name', 'sensors']; constructor(
// dataSource: MatTableDataSource<Infra>; private route: ActivatedRoute,
// @ViewChild(MatSort) sort: MatSort; private router: Router,
private store: Store<ListStore.State>
) {
console.log('PROBE ID: ' + this.route.snapshot.paramMap.get('id'));
this.getProbe();
}
// /** ngOnInit() {
// * Set the sort after the view init since this component will this.infras$.subscribe(
// * be able to query its view for the initialized sort. (page: Page) => {
// */ if (page) {
// ngAfterContentInit() { this.infras = page.content;
// // temporary data }
// const data: Infra[] = new Array(); },
// for (let i = 0; i < 10; i++) { (error: RPCClientError) => {
// const t: Infra = { console.log(error.response.message);
// id: i, }
// infraType: { );
// id: 1, }
// name: 'Host'
// }, ngAfterContentInit() {
// childId: 1, // if (this.probe) {
// createDate: new Date(), // this.store.dispatch(new ListStore.ReadAllByProbe(this.probe));
// probe: {
// id: 1,
// },
// target: {
// id: 1,
// displayName: 'Target Name'
// }
// };
// data.push(t);
// } // }
}
// this.dataSource = new MatTableDataSource(data); getProbe() {
// this.dataSource.sort = this.sort;
// }
// constructor(private router: Router) { } }
}
// ngOnInit() {
// }
// handleRowClick(obj: Infra) {
// this.router.navigate(['target', obj.id]);
// }
// }

44
src/packages/target/target.module.ts
View File

@ -1,25 +1,23 @@
// import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
// import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
// import { MaterialModule } from 'packages/commons/material/material.module';
// import { InfoTableModule } from 'packages/commons/component/info-table/info-table.module';
// import { COMPONENTS } from './component'; import { COMPONENTS } from './component';
// import { SERVICES } from './service'; import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
// @NgModule({ @NgModule({
// imports: [ imports: [
// CommonModule, CommonModule,
// MaterialModule, PrimeNGModules
// InfoTableModule ],
// ], declarations: [
// declarations: [ COMPONENTS,
// COMPONENTS, ],
// ], exports: [
// exports: [ COMPONENTS,
// COMPONENTS, ],
// ], providers: [
// providers: [ SERVICES,
// SERVICES, ],
// ], })
// }) export class TargetModule { }
// export class TargetModule { }