Merge branch 'master' of https://git.loafle.net/overflow/member_webapp
This commit is contained in:
commit
c694cb96b6
|
@ -39,11 +39,4 @@ export class AppMenuComponent implements OnInit {
|
|||
];
|
||||
}
|
||||
|
||||
changeTheme(theme) {
|
||||
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
|
||||
const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');
|
||||
|
||||
themeLink.href = 'assets/theme/theme-' + theme + '.css';
|
||||
layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,8 +17,7 @@
|
|||
</a>
|
||||
|
||||
<ul class="topbar-items animated fadeInDown" [ngClass]="{'topbar-items-visible': app.topbarMenuActive}">
|
||||
<li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()"
|
||||
[ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
|
||||
<li #profile class="profile-item" *ngIf="app.profileMode==='top'||app.isHorizontal()" [ngClass]="{'active-top-menu':app.activeTopbarItem === profile}">
|
||||
|
||||
<a href="#" (click)="app.onTopbarItemClick($event,profile)">
|
||||
<img class="profile-image" src="assets/layout/images/avatar.png" />
|
||||
|
@ -58,28 +57,71 @@
|
|||
<span class="topbar-item-name">Settings</span>
|
||||
</a>
|
||||
<ul class="ultima-menu animated fadeInDown">
|
||||
|
||||
<li role="menuitem">
|
||||
<a href="#">
|
||||
<a href="#" (click)="app.changeTheme('indigo')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>Change Theme</span>
|
||||
<span>indigo</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#">
|
||||
<i class="material-icons">favorite_border</i>
|
||||
<span>Favorites</span>
|
||||
<a href="#" (click)="app.changeTheme('brown')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>brown</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#">
|
||||
<i class="material-icons">lock</i>
|
||||
<span>Lock Screen</span>
|
||||
<a href="#" (click)="app.changeTheme('blue')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>blue</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#">
|
||||
<i class="material-icons">wallpaper</i>
|
||||
<span>Wallpaper</span>
|
||||
<a href="#" (click)="app.changeTheme('blue-grey')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>blue-grey</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('dark-blue')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>dark-blue</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('dark-green')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>dark-green</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('purple-cyan')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>purple-cyan</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('purple-cyan')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>purple-cyan</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('teal')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>teal</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('cyan')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>cyan</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" (click)="app.changeTheme('grey')">
|
||||
<i class="material-icons">palette</i>
|
||||
<span>grey</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -93,31 +135,31 @@
|
|||
<ul class="ultima-menu animated fadeInDown">
|
||||
<li role="menuitem">
|
||||
<a href="#" class="topbar-message">
|
||||
<img src="assets/layout/images/avatar1.png" width="35"/>
|
||||
<img src="assets/layout/images/avatar1.png" width="35" />
|
||||
<span>Give me a call</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" class="topbar-message">
|
||||
<img src="assets/layout/images/avatar2.png" width="35"/>
|
||||
<img src="assets/layout/images/avatar2.png" width="35" />
|
||||
<span>Sales reports attached</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" class="topbar-message">
|
||||
<img src="assets/layout/images/avatar3.png" width="35"/>
|
||||
<img src="assets/layout/images/avatar3.png" width="35" />
|
||||
<span>About your invoice</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" class="topbar-message">
|
||||
<img src="assets/layout/images/avatar2.png" width="35"/>
|
||||
<img src="assets/layout/images/avatar2.png" width="35" />
|
||||
<span>Meeting today at 10pm</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a href="#" class="topbar-message">
|
||||
<img src="assets/layout/images/avatar4.png" width="35"/>
|
||||
<img src="assets/layout/images/avatar4.png" width="35" />
|
||||
<span>Out of office</span>
|
||||
</a>
|
||||
</li>
|
||||
|
@ -156,8 +198,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}"
|
||||
(click)="app.onTopbarItemClick($event,search)">
|
||||
<li #search class="search-item" [ngClass]="{'active-top-menu':app.activeTopbarItem === search}" (click)="app.onTopbarItemClick($event,search)">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText>
|
||||
<label>Search</label>
|
||||
|
|
|
@ -316,4 +316,13 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
|
|||
isAuthRouteActivated() {
|
||||
return this.router.url.indexOf('/auth') > -1;
|
||||
}
|
||||
|
||||
changeTheme(theme) {
|
||||
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
|
||||
const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');
|
||||
|
||||
themeLink.href = 'assets/theme/theme-' + theme + '.css';
|
||||
layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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 },
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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() {
|
||||
|
|
|
@ -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']);
|
||||
|
|
|
@ -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>
|
|
@ -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() {
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
];
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
|
@ -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]);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 { }
|
||||
|
|
Loading…
Reference in New Issue
Block a user