sensor setting ready

src/app/packages/sensor/sensor.module.ts

@@ -10,6 +10,9 @@ import { SettingComponent } from 'app/packages/sensor/component/setting/setting.
     CommonModule,
     MaterialModule
   ],
-  declarations: [SettingComponent]
+  declarations: [SettingComponent],
+  exports: [
+    SettingComponent
+  ]
 })
 export class SensorModule { }

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

@@ -1,3 +1,57 @@
-<p>
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
-  list works!
+
-</p>
+  <!-- Filter -->
+  <div fxFlex="30%" fxFlex.lt-sm="30" fxFlex.sm="30">
+    Filter Area
+  </div>
+
+  <!-- Table -->
+  <div fxFlex="70%" fxFlex.lt-sm="70" fxFlex.sm="70"  class="example-container mat-elevation-z8">
+
+    <mat-table #table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.name}} </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>
+
+      <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>

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

@@ -0,0 +1,14 @@
+.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;
+  }

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

@@ -1,15 +1,62 @@
-import { Component, OnInit } from '@angular/core';
+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;
+}
+
 
 @Component({
-  selector: 'of-list',
+  selector: 'of-target-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.scss']
 })
-export class ListComponent implements OnInit {
+export class ListComponent implements OnInit, AfterContentInit {
 
-  constructor() { }
+  displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
+  dataSource: MatTableDataSource<Probe>;
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * 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: Probe[] = new Array();
+    for (let i = 0; i < 10; i++) {
+      const p: Probe = {
+        id: String('id' + 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')
+      };
+      data.push(p);
+    }
+
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+
+  constructor(private router: Router) { }
 
   ngOnInit() {
   }
 
+  handleRowClick(obj: Probe) {
+    this.router.navigate(['probe', obj.id]);
+  }
 }

src/app/packages/target/target.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ListComponent } from 'app/packages/target/component/list/list.component';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MaterialModule
   ],
   declarations: [ListComponent],
   exports: [

src/app/pages/targets/targets-page.component.html

@@ -1,3 +1 @@
-<div>
+<of-target-list></of-target-list>
-    target page
-</div>

src/app/pages/targets/targets-page.module.ts

@@ -10,7 +10,8 @@ import { TargetsPageRoutingModule } from 'app/pages/targets/targets-page-routing
   imports: [
     CommonModule,
     MaterialModule,
-    TargetsPageRoutingModule
+    TargetsPageRoutingModule,
+    TargetModule
   ],
   declarations: [
     TargetsPageComponent