sensor ing

src/app/pages/probe/probe-page-routing.module.ts

@@ -11,7 +11,7 @@ const routes: Routes = [
     children: [
       { path: ':id', component: ProbeDetailComponent },
       { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
-      { path: ':id/history', component: ProbeDetailComponent },
+      { path: ':id/history', component: null },
     ]
   }
 ];

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

@@ -1,3 +1,3 @@
-<p>
-  sensors works!
-</p>
+<div style="padding: 15px">
+  <of-sensor-list></of-sensor-list>
+</div>

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

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from '../../commons/ui/material/material.module';
 import { SensorsPageComponent } from './sensors-page.component';
 import { SensorsPageRoutingModule } from './sensors-page-routing.module';
+import { SensorModule } from 'packages/sensor/sensor.module';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
-    SensorsPageRoutingModule
+    SensorsPageRoutingModule,
+    SensorModule
   ],
   declarations: [
     SensorsPageComponent

src/packages/sensor/component/index.ts

@@ -1,7 +1,11 @@
 import { DiscoverySettingComponent } from './setting/setting.component';
 import { SettingResultComponent } from './setting-result/setting-result.component';
+import { FilterComponent } from './list/filter/filter.component';
+import { ListComponent } from './list/list.component';
 
 export const COMPONENTS = [
   DiscoverySettingComponent,
   SettingResultComponent,
+  ListComponent,
+  FilterComponent
 ];

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

@@ -0,0 +1,30 @@
+<div>
+  <mat-form-field >
+    <input matInput placeholder='IP or Application Name' value=''>
+  </mat-form-field>
+</div>
+<div [style.margin]="'30px 0px'">
+  <mat-form-field>
+    <mat-select placeholder="Crawler">
+      <mat-option *ngFor="let crawler of crawlers" value="crawler.value">
+        {{ crawler.name }}
+      </mat-option>
+    </mat-select>
+  </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/sensor/component/list/filter/filter.component.scss

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

src/packages/sensor/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/sensor/component/list/filter/filter.component.ts

@@ -0,0 +1,24 @@
+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 {
+
+  crawlers = [
+    {value: 'ALL', name: 'All'},
+    {value: 'WMI', name: 'WMI'},
+    {value: 'SSH', name: 'SSH'},
+    {value: 'MySQL', name: 'MySQL'},
+    {value: 'Redis', name: 'Redis'},
+  ];
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}

src/packages/sensor/component/list/list.component.html

@@ -0,0 +1,57 @@
+<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">
+    <div [style.margin]="'10px'">
+      <div>Target : </div>
+      <div>Sensor : </div>
+      <div>Activated Sensor : </div>
+      <div>Inactivated Sensor : </div>
+      <div fxLayoutAlign="end">
+        <button mat-raised-button color="primary">Add Sensor</button>
+      </div>
+    </div>
+
+    <!-- target 별 sensor list -->
+    <div fxFlex="80%" class="example-container mat-elevation-z8">
+      <!-- <div fxLayout="row" >
+        <div fxFlex="20">aaaaaaaaaaaaaaaaaaa</div>
+
+        <div fxFlex="80">
+          <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-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+          </mat-table>
+        </div>
+      </div> -->
+      
+    </div>
+
+  </div>
+
+</div>

src/packages/sensor/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/packages/sensor/component/list/list.component.spec.ts

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

src/packages/sensor/component/list/list.component.ts

@@ -0,0 +1,53 @@
+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 { Sensor } from '../../model';
+
+
+@Component({
+  selector: 'of-sensor-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent implements OnInit, AfterContentInit {
+
+  displayedColumns = ['crawler', 'type', 'name', 'sensors'];
+  dataSource: MatTableDataSource<Sensor>;
+  @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: Sensor[] = new Array();
+    for (let i = 0; i < 3; i++) {
+      const t: Sensor = {
+        id: i,
+        target: {
+          id: 1,
+          displayName: '192.168.1.1',
+        },
+        crawler: {
+          id: 1,
+          name: 'WMI'
+        },
+      };
+      data.push(t);
+    }
+
+    this.dataSource = new MatTableDataSource(data);
+    this.dataSource.sort = this.sort;
+  }
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  handleRowClick(obj: Sensor) {
+    this.router.navigate(['target', obj.id]);
+  }
+}

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

@@ -4,7 +4,6 @@
   </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>
@@ -12,7 +11,6 @@
   </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>