probe detail

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

View File

@ -15,16 +15,10 @@ export class ProbePageComponent implements OnInit {
ngOnInit() {
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 = [
{ label: 'INFO', routerLink: ['/probe/', id, 'info'], path: '/probe/' + id, icon: 'fa-check' },
{ label: 'TARGETS', routerLink: ['/probe/', id, 'targets'], icon: 'fa-check' },
{ label: 'HISTORY', routerLink: ['/probe/', id, 'history'], icon: 'fa-check', disabled: true },
{ label: 'INFO', routerLink: ['/probe/', id, 'info'] },
{ label: 'TARGETS', routerLink: ['/probe/', id, 'targets']},
{ label: 'HISTORY', path: ['/probe/', id, 'history'], disabled: true },
];
}

View File

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

View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
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 { TargetsPageComponent } from './targets-page.component';
@ -9,7 +9,7 @@ import { TargetsPageComponent } from './targets-page.component';
imports: [
CommonModule,
TargetsPageRoutingModule,
// TargetModule,
TargetModule,
],
declarations: [
TargetsPageComponent

View File

@ -1,6 +1,44 @@
<h1>Detail</h1>
<div>
<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>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
</div>
<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>
<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>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
</div>

View File

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

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() {
this.store.select(AuthSelector.select('domain')).subscribe(
(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) {
this.router.navigate(['probe', event.data.id, 'info']);

View File

@ -1,59 +1 @@
<div fxLayout="column" fxLayoutWrap style=" padding: 8px;">
<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>
<div>target detail</div>

View File

@ -1,103 +1,28 @@
// import { Component, ViewChild, OnInit, Input, AfterContentInit, AfterViewInit } from '@angular/core';
// import { MatPaginator, MatTableDataSource } from '@angular/material';
// import { Router } from '@angular/router';
import { Component, ViewChild, OnInit, Input, AfterContentInit } from '@angular/core';
import { Router } from '@angular/router';
// import { Sensor } from 'packages/sensor/model';
import { Sensor } from 'packages/sensor/model';
// @Component({
// selector: 'of-target-detail',
// templateUrl: './detail.component.html',
// styleUrls: ['./detail.component.scss']
// })
// export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit {
@Component({
selector: 'of-target-detail',
templateUrl: './detail.component.html',
})
export class DetailComponent implements OnInit, AfterContentInit {
// displayedColumns = ['crawler', 'itemCnt', 'status'];
// sensors: MatTableDataSource<Sensor> = null;
// @ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private router: Router) { }
// basicInfo = [
// {
// 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',
// },
// ];
ngOnInit() {
}
// constructor(private router: Router) { }
ngAfterContentInit() {
}
// ngOnInit() {
// }
handleSensorClick(sensor: Sensor) {
}
// ngAfterViewInit() {
// this.sensors.paginator = this.paginator;
// }
handleCheckAlive() {
}
// ngAfterContentInit() {
// 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() {
// }
// }
handleTraceroute() {
}
}

View File

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

View File

@ -1,19 +1 @@
<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>
<div>filter</div>

View File

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

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

View File

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

View File

@ -1,25 +1,23 @@
// import { NgModule } from '@angular/core';
// 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 { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { COMPONENTS } from './component';
// import { SERVICES } from './service';
import { COMPONENTS } from './component';
import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
// @NgModule({
// imports: [
// CommonModule,
// MaterialModule,
// InfoTableModule
// ],
// declarations: [
// COMPONENTS,
// ],
// exports: [
// COMPONENTS,
// ],
// providers: [
// SERVICES,
// ],
// })
// export class TargetModule { }
@NgModule({
imports: [
CommonModule,
PrimeNGModules
],
declarations: [
COMPONENTS,
],
exports: [
COMPONENTS,
],
providers: [
SERVICES,
],
})
export class TargetModule { }