sensor page

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

@@ -12,6 +12,7 @@ const routes: Routes = [
       { path: 'probes', loadChildren: './probes/probes-page.module#ProbesPageModule' },
       { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule' },
       { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' },
+      { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' },
       { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
       { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
       { path: 'sensor-setting', loadChildren: './sensor-setting/sensor-setting-page.module#SensorSettingPageModule' },

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SensorPageComponent } from './sensor-page.component';
+import { DetailComponent } from 'packages/sensor/component/detail/detail.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SensorPageComponent,
+    children: [
+      { path: ':id', component: DetailComponent },
+      { path: ':id/history', component: null },
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SensorPageRoutingModule { }

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

@@ -0,0 +1,6 @@
+<div>
+  <of-sub-menubar [tabs]="tabs"></of-sub-menubar>
+  <div style="padding: 15px">
+    <router-outlet></router-outlet>
+  </div>
+</div>

src/app/pages/sensor/sensor-page.component.spec.ts

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

src/app/pages/sensor/sensor-page.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-sensor',
+  templateUrl: './sensor-page.component.html',
+  styleUrls: ['./sensor-page.component.scss']
+})
+export class SensorPageComponent implements OnInit {
+
+  tabs = undefined;
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+  }
+
+  ngOnInit() {
+    const id = this.router.url.split('sensor/')[1].split('/')[0];
+
+    this.tabs = [
+      { label: 'Info', path: '/sensor/' + id },
+      { label: 'History', path: '/sensor/' + id + '/history' },
+    ];
+  }
+
+}

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

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.module';
+import { SensorPageComponent } from './sensor-page.component';
+import { SensorModule } from 'packages/sensor/sensor.module';
+import { SensorPageRoutingModule } from './sensor-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SensorPageRoutingModule,
+    MaterialModule,
+    SensorModule,
+    SubMenubarModule,
+  ],
+  declarations: [
+    SensorPageComponent,
+  ]
+})
+export class SensorPageModule { }

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

@@ -12,12 +12,12 @@
 
 <div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center" [style.margin]="'20px'">
   <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <of-info-table [title]="'Title1'" [data]="data"></of-info-table>
+    <of-info-table [title]="'Title1'" [data]="networkInfo"></of-info-table>
   </mat-card>
   <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <of-info-table [title]="'Title2'" [data]="data"></of-info-table>
+    <of-info-table [title]="'Title2'" [data]="deviceInfo"></of-info-table>
   </mat-card>
   <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <of-info-table [title]="'Title3'" [data]="data"></of-info-table>
+    <of-info-table [title]="'Title3'" [data]="probeInfo"></of-info-table>
   </mat-card>
 </div>

src/packages/probe/component/detail/detail.component.ts

@@ -14,22 +14,52 @@ export class DetailComponent implements OnInit {
   probeId = undefined;
   isUpState = false;
 
-  data = [
+  networkInfo = [
     {
-      key: 'key1',
-      value: 'this is value'
+      key: 'IP',
+      value: '192.168.1.1'
     },
     {
-      key: 'key2',
-      value: 'this is value'
+      key: 'NIC',
+      value: 'enps30'
     },
     {
-      key: 'key3',
-      value: 'this is value'
+      key: 'Targets',
+      value: '12'
+    },
+  ];
+
+  deviceInfo = [
+    {
+      key: 'OS',
+      value: 'Linux'
     },
     {
-      key: 'key4',
-      value: 'this is value'
+      key: 'CPU',
+      value: 'intel7...'
+    },
+    {
+      key: 'Memory',
+      value: '16GB'
+    },
+    {
+      key: '...',
+      value: '...'
+    },
+  ];
+
+  probeInfo = [
+    {
+      key: 'Authorized at',
+      value: String(new Date())
+    },
+    {
+      key: 'Authorized by',
+      value: 'insanity'
+    },
+    {
+      key: 'Installed at',
+      value: String(new Date())
     },
   ];
 
@@ -57,11 +87,6 @@ export class DetailComponent implements OnInit {
       }
     });
 
-    // const dialogRef = this.dialog.open(RemoveWarningComponent, {
-    //   width: '250px',
-    //   data: {  }
-    // });
-
     dialogRef.afterClosed().subscribe(confirmed => {
       if (confirmed) {
         console.log('confirmed');

src/packages/sensor/component/detail/detail.component.html

@@ -0,0 +1 @@
+<div><h3>Sensor Detail</h3></div>

src/packages/sensor/component/detail/detail.component.spec.ts

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

src/packages/sensor/component/detail/detail.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { ConfirmDialogComponent } from 'app/commons/component/confirm-dialog/confirm-dialog.component';
+
+@Component({
+  selector: 'of-sensor-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent implements OnInit {
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public dialog: MatDialog,
+  ) { }
+
+  ngOnInit() {
+  }
+}
+

src/packages/sensor/component/index.ts

@@ -2,10 +2,12 @@ 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';
+import { DetailComponent } from './detail/detail.component';
 
 export const COMPONENTS = [
   DiscoverySettingComponent,
   SettingResultComponent,
   ListComponent,
-  FilterComponent
+  FilterComponent,
+  DetailComponent,
 ];

src/packages/target/component/detail/detail.component.html

@@ -29,19 +29,19 @@
           <h3 matLine>Sensors</h3>
           <mat-table #table [dataSource]="sensors">
 
-            <ng-container matColumnDef="sensorType">
+            <ng-container matColumnDef="crawler">
               <mat-header-cell *matHeaderCellDef> SensorType </mat-header-cell>
-              <mat-cell *matCellDef="let element"> {{element.sensorType}} </mat-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.itemCnt}} items </mat-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}} </mat-cell>
+              <mat-cell *matCellDef="let element"> {{element.status.name}} </mat-cell>
             </ng-container>
 
             <!-- <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row> -->

src/packages/target/component/detail/detail.component.ts

@@ -1,6 +1,8 @@
 import { Component, ViewChild, OnInit, Input } from '@angular/core';
 import { MatPaginator, MatTableDataSource } from '@angular/material';
 import { AfterContentInit, AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Sensor } from '../../../sensor/model';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'of-target-detail',
@@ -9,8 +11,8 @@ import { AfterContentInit, AfterViewInit } from '@angular/core/src/metadata/life
 })
 export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit {
 
-  displayedColumns = ['sensorType', 'itemCnt', 'status'];
-  sensors: MatTableDataSource<any> = null;
+  displayedColumns = ['crawler', 'itemCnt', 'status'];
+  sensors: MatTableDataSource<Sensor> = null;
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
   basicInfo = [
@@ -50,7 +52,7 @@ export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit
     },
   ];
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() {
   }
@@ -60,23 +62,37 @@ export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit
   }
 
   ngAfterContentInit() {
-    const sensors = [
+    const temporaryData: Sensor[] = [
       {
-        sensorType: 'WMI',
-        itemCnt: '5',
-        status: 'Up',
+        id: 0,
+        crawler: {
+          id: 0,
+          name: 'WMI',
+        },
+        status: {
+          id: 0,
+          name: 'UP'
+        },
+        itemCount: 5,
       },
       {
-        sensorType: 'SSH',
-        itemCnt: '5',
-        status: 'Up',
+        id: 1,
+        crawler: {
+          id: 0,
+          name: 'SSH',
+        },
+        status: {
+          id: 0,
+          name: 'UP'
+        },
+        itemCount: 5,
       },
     ];
-    this.sensors = new MatTableDataSource<any>(sensors);
+    this.sensors = new MatTableDataSource<any>(temporaryData);
   }
 
-  handleSensorClick(row: any) {
-    console.log(row);
+  handleSensorClick(sensor: Sensor) {
+    this.router.navigate(['sensor', sensor.id]);
   }
 
   handleCheckAlive() {