overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

target filter

Browse Source
This commit is contained in:
insanity 2018-03-08 15:25:57 +09:00
parent 15e507de3b
commit 3b4bbd9c95
11 changed files with 120 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/noauth/component/list/list.component.html
View File

@ -26,7 +26,7 @@
<ng-container matColumnDef="createDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created At </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.createDate}} </mat-cell>
<mat-cell *matCellDef="let element"> {{element.createDate.toLocaleString()}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

@ -1,7 +1,7 @@
<div><h3>{{probeAlias}}</h3></div>
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
<mat-card>Status: UP</mat-card>
<mat-card [style.padding]="'15px 50px'">Status: UP</mat-card>
<div>
<button *ngIf="!isUpState" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
<button *ngIf="isUpState" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>

2
src/packages/probe/component/list/list.component.html
View File

@ -40,6 +40,6 @@
<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 [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>

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

@ -14,6 +14,9 @@ import { Domain } from '../../../domain/model';
})
export class ListComponent implements OnInit, AfterContentInit {
pageSize = '25';
length = '100';
displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
dataSource: MatTableDataSource<Probe>;
@ViewChild(MatSort) sort: MatSort;
@ -31,7 +34,7 @@ export class ListComponent implements OnInit, AfterContentInit {
// temporary data
const data: Probe[] = new Array();
for (let i = 0; i < 10; i++) {
for (let i = 0; i < 100; i++) {
const p: Probe = {
id: i,
displayName: String('displayName' + i),

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

@ -1,7 +1,9 @@
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
];

21
src/packages/target/component/list/filter/filter.component.html Normal file
View File

@ -0,0 +1,21 @@
<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'">
<div>Status</div>
<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'">
<div>Type</div>
<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>

9
src/packages/target/component/list/filter/filter.component.scss Normal file
View File

@ -0,0 +1,9 @@
.radio-group {
display: inline-flex;
flex-direction: column;
}
.radio-button {
margin: 5px;
}

25
src/packages/target/component/list/filter/filter.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FilterComponent } from './filter.component';
describe('FilterComponent', () => {
let component: FilterComponent;
let fixture: ComponentFixture<FilterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FilterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FilterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

17
src/packages/target/component/list/filter/filter.component.ts Normal file
View File

@ -0,0 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'of-target-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.scss']
})
export class FilterComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
}

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

@ -1,49 +1,34 @@
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
<!-- Filter -->
<div fxFlex="30%" fxFlex.lt-sm="30" fxFlex.sm="30" >
Filter Area
<div fxFlex="20%" >
<of-target-filter></of-target-filter>
</div>
<!-- Table -->
<div fxFlex="70%" fxFlex.lt-sm="70" fxFlex.sm="70" class="example-container mat-elevation-z8">
<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.name}} </mat-cell>
<mat-cell *matCellDef="let element"> {{element.target.displayName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ip">
<mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
</ng-container>
<ng-container matColumnDef="os">
<mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.os}} </mat-cell>
</ng-container>
<ng-container matColumnDef="cidr">
<mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
</ng-container>
<ng-container matColumnDef="targetCnt">
<mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.targetCnt}} </mat-cell>
</ng-container>
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="authBy">
<mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.authBy}} </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>

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

@ -2,17 +2,7 @@ import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { Router } from '@angular/router';
export interface Probe {
id: string;
name: string;
ip: string;
os: string;
cidr: string;
targetCnt: number;
date: string;
authBy: string;
}
import { Infra } from '../../../infra/model';
@Component({
@ -22,8 +12,8 @@ export interface Probe {
})
export class ListComponent implements OnInit, AfterContentInit {
displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
dataSource: MatTableDataSource<Probe>;
displayedColumns = ['status', 'type', 'name', 'sensors'];
dataSource: MatTableDataSource<Infra>;
@ViewChild(MatSort) sort: MatSort;
/**
@ -32,19 +22,25 @@ export class ListComponent implements OnInit, AfterContentInit {
*/
ngAfterContentInit() {
// temporary data
const data: Probe[] = new Array();
const data: Infra[] = new Array();
for (let i = 0; i < 10; i++) {
const p: Probe = {
id: String(i),
name: String('name' + i),
ip: String('ip' + i),
os: String('os' + i),
cidr: String('cidr' + i),
targetCnt: i,
date: String('date' + i),
authBy: String('insanity')
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(p);
data.push(t);
}
this.dataSource = new MatTableDataSource(data);
@ -56,7 +52,7 @@ export class ListComponent implements OnInit, AfterContentInit {
ngOnInit() {
}
handleRowClick(obj: Probe) {
handleRowClick(obj: Infra) {
this.router.navigate(['target', obj.id]);
}
}