target filter

src/packages/noauth/component/list/list.component.html

@@ -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>

src/packages/probe/component/detail/detail.component.html

@@ -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>

src/packages/probe/component/list/list.component.html

@@ -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>

src/packages/probe/component/list/list.component.ts

@@ -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),

src/packages/target/component/index.ts

@@ -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
 ];

src/packages/target/component/list/filter/filter.component.html

@@ -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>

src/packages/target/component/list/filter/filter.component.scss

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

src/packages/target/component/list/filter/filter.component.spec.ts

@@ -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();
+  });
+});

src/packages/target/component/list/filter/filter.component.ts

@@ -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() {
+  }
+}

src/packages/target/component/list/list.component.html

@@ -1,49 +1,34 @@
 <div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
 
   <!-- Filter -->
-  <div fxFlex="30%" fxFlex.lt-sm="30" fxFlex.sm="30" >
+  <div fxFlex="20%"  >
-    Filter Area
+    <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">
+      <ng-container matColumnDef="sensors">
-        <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Sensors </mat-header-cell>
-        <mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
+          <mat-cell *matCellDef="let element"> ? </mat-cell>
-      </ng-container>
+        </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>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>

src/packages/target/component/list/list.component.ts

@@ -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';
-
+import { Infra } from '../../../infra/model';
-export interface Probe {
-  id: string;
-  name: string;
-  ip: string;
-  os: string;
-  cidr: string;
-  targetCnt: number;
-  date: string;
-  authBy: string;
-}
 
 
 @Component({
@@ -22,8 +12,8 @@ export interface Probe {
 })
 export class ListComponent implements OnInit, AfterContentInit {
 
-  displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
+  displayedColumns = ['status', 'type', 'name', 'sensors'];
-  dataSource: MatTableDataSource<Probe>;
+  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 = {
+      const t: Infra = {
-        id: String(i),
+        id: i,
-        name: String('name' + i),
+        infraType: {
-        ip: String('ip' + i),
+          id: 1,
-        os: String('os' + i),
+          name: 'Host'
-        cidr: String('cidr' + i),
+        },
-        targetCnt: i,
+        childId: 1,
-        date: String('date' + i),
+        createDate: new Date(),
-        authBy: String('insanity')
+        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]);
   }
 }