target detail

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

@@ -15,7 +15,7 @@ const routes: Routes = [
       { 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: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
+      { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
       { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
       { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
       { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component';
+import { TargetPageComponent } from 'app/pages/target/target-page.component';
+import { DetailComponent as TargetDetailComponent } from 'packages/target/component/detail/detail.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TargetPageComponent,
+    children: [
+      { path: ':id/info', component: TargetDetailComponent }
+    ]
+  }
+];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TargetPageRoutingModule { }

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

@@ -0,0 +1,10 @@
+<div class="ui-g">
+    <div class="ui-g-12">
+        <div class="card no-margin">
+            <of-tabbar [tabs]="tabs"></of-tabbar>
+        </div>
+        <div class="card no-margin">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-target',
+  templateUrl: './target-page.component.html',
+})
+export class TargetPageComponent implements OnInit {
+
+  tabs = undefined;
+
+  constructor(private router: Router) {
+  }
+
+  ngOnInit() {
+
+    const id = this.router.url.split('target/')[1].split('/')[0];
+
+    this.tabs = [
+      { label: 'INFO', routerLink: ['/target/', id, 'info'] },
+      { label: 'HISTORY', path: ['/target/', id, 'history'], disabled: true },
+    ];
+
+  }
+}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TargetModule } from 'packages/target/target.module';
+import { TargetPageRoutingModule } from './target-page-routing.module';
+import { TargetPageComponent } from './target-page.component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { TabbarModule } from '../../commons/component/layout/tabbar/app.tabbar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TargetPageRoutingModule,
+    TargetModule,
+    PrimeNGModules,
+    TabbarModule
+  ],
+  declarations: [
+    TargetPageComponent
+  ]
+})
+export class TargetPageModule { }

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

@@ -4,12 +4,14 @@ import { CommonModule } from '@angular/common';
 import { TargetModule } from 'packages/target/target.module';
 import { TargetsPageRoutingModule } from './targets-page-routing.module';
 import { TargetsPageComponent } from './targets-page.component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 
 @NgModule({
   imports: [
     CommonModule,
     TargetsPageRoutingModule,
     TargetModule,
+    PrimeNGModules
   ],
   declarations: [
     TargetsPageComponent

src/packages/notification/component/notification/notification.component.ts

@@ -36,7 +36,6 @@ export class NotificationComponent implements OnInit, AfterContentInit, OnDestro
         this.notificationSubscription$ = this.notification$.subscribe(
             (page: Page) => {
                 if (page !== null) {
-                    console.log(page);
                     this.notifications = page.content;
                     this.totalLength = page.totalElements;
                 }

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

@@ -71,7 +71,8 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   onTargetClick(target) {
-    this.router.navigate(['sensors'], { queryParams: { target: target.id } });
+    // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
+    this.router.navigate(['target', target.id, 'info']);
   }
 }
 

src/packages/sensor/component/list/list.component.scss

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

@@ -22,7 +22,6 @@ import { Subscription } from 'rxjs/Subscription';
 @Component({
   selector: 'of-sensor-list',
   templateUrl: './list.component.html',
-  styleUrls: ['./list.component.scss']
 })
 export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
 
@@ -32,9 +31,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   totalLength = 0;
   sensorSettingDisplay = false;
 
-  paramTarget?: Infra = null;
-  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
-
   sensors: Sensor[];
   target: Target = null;
   targetSensor;
@@ -49,19 +45,9 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     private router: Router,
     private route: ActivatedRoute,
     private store: Store<ListStore.State>,
-    private infraDetailStore: Store<InfraDetailStore.State>,
   ) { }
 
   ngOnInit() {
-    let infraID = null;
-    this.route.queryParams.subscribe((queryParams: any) => {
-      infraID = queryParams.target;
-      if (infraID) {
-        this.getInfraInfo(infraID);
-      } else {
-        this.paramTarget = null;
-      }
-    });
 
     this.sensorsSubscription$ = this.sensorList$.subscribe(
       (page: Page) => {
@@ -76,33 +62,16 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     );
   }
 
+  ngAfterContentInit() {
+    this.getSensors(0);
+  }
+
   ngOnDestroy() {
     if (this.sensorsSubscription$) {
       this.sensorsSubscription$.unsubscribe();
     }
   }
 
-  getInfraInfo(infraID: string) {
-    this.infraDetailStore.dispatch(
-      new InfraDetailStore.Read(
-        { id: infraID }
-      )
-    );
-    this.infra$.subscribe(
-      (infra: Infra) => {
-        console.log(infra);
-        this.paramTarget = infra;
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-
-  }
-
-  ngAfterContentInit() {
-    this.getSensors(0);
-  }
 
   getSensors(pageIndex: number) {
     this.store.select(AuthSelector.select('domain')).subscribe(
@@ -113,7 +82,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
           sortCol: 'id',
           sortDirection: 'descending'
         };
-
         this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
       },
       (error) => {
@@ -145,6 +113,7 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     this.generateTargetFilter();
   }
 
+
   generateTargetFilter() {
     if (this.targetOptions) {
       return;

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

@@ -1 +1,65 @@
-<div>target detail</div>
+<h1>Sensors</h1>
+<div *ngIf="infra">
+    <div class="ui-g">
+        <div class="ui-g-12">
+            <p-panel [showHeader]="false">
+                <div class="ui-key-value">
+                    <span>Status</span>
+                    <span class="ng-star-inserted">
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
+                </div>
+                <of-key-value [key]="'Alias'" [value]="infra.target.displayName" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Description'" [value]="infra.target.description" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Type'" [value]="infra.infraType.name" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Created at'" [value]="infra.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
+                <of-key-value [key]="'Sensors'" [value]="infra.target.sensorCount" class="ui-key-value"></of-key-value>
+            </p-panel>
+        </div>
+    </div>
+
+    <div class="ui-g">
+        <div class="ui-g-12">
+            <div class="ui-g">
+                <div class="ui-g-12 ui-md-5 ui-g-nopad">
+                    <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
+                        <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="infra.target" (close)="onSensorSettingClose()"></of-sensor-setting>
+                    </p-dialog>
+
+                    <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>
+                </div>
+                <div class="ui-g-12 ui-md-7 ui-g-nopad">
+                    <div style="float: right; margin-top: 30px;">
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
+                        <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
+                    </div>
+                </div>
+            </div>
+
+
+            <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>No.</th>
+                        <th>Description</th>
+                        <th>Status</th>
+                        <th>Crawler</th>
+                        <th>Items</th>
+                        <th>Created at</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+                    <tr [pSelectableRow]="sensor">
+                        <td>{{rowIndex + 1}}</td>
+                        <td>{{sensor.Description}}</td>
+                        <td>{{sensor.status.name}}</td>
+                        <td>{{sensor.crawler.name}}</td>
+                        <td>???</td>
+                        <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+                    </tr>
+                </ng-template>
+            </p-table>
+        </div>
+    </div>
+</div>

src/packages/target/component/detail/detail.component.scss

@@ -1,37 +0,0 @@
-.table {
-    width: 100%;
-    max-width: 100%;
-    border-collapse: collapse;
-}
-.table tr:first-child td {
-    border-top: none;
-}
-
-.text-right {
-	text-align: right;
-}
-
-th, td {
-    padding: 8px;
-    text-align: left;
-    border-top: 1px solid #ddd;
-}
-.nav-item {
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  cursor: default;
-
-  &:hover {
-    transform: translate(0, -8px);
-    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
-  }
-}
-.example-container {
-    display: flex;
-    flex-direction: column;
-    min-width: 300px;
-  }
-  
-  .mat-table {
-    overflow: auto;
-    max-height: 500px;
-  }

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

@@ -1,28 +1,70 @@
-import { Component, ViewChild, OnInit, Input, AfterContentInit } from '@angular/core';
+import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
-
 import { Sensor } from 'packages/sensor/model';
+import { Infra } from 'packages/infra/model';
+import { Store, select } from '@ngrx/store';
+import { DetailSelector as InfraDetailSelector } from 'packages/infra/store';
+import * as InfraDetailStore from 'packages/infra/store/detail';
+import { Subscription } from 'rxjs/Subscription';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { sensorListSelector } from 'packages/sensor/store';
+import * as SensorListStore from 'packages/sensor/store/list';
+
 
 @Component({
   selector: 'of-target-detail',
   templateUrl: './detail.component.html',
 })
-export class DetailComponent implements OnInit, AfterContentInit {
+export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
 
-  constructor(private router: Router) { }
+  infraSubscription$: Subscription;
+  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
+  sensorsSubscription$: Subscription;
+  sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
+
+  infra: Infra;
+  sensorSettingDisplay = false;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private infraDetailStore: Store<InfraDetailStore.State>,
+    private sensorListStore: Store<SensorListStore.State>
+  ) { }
 
   ngOnInit() {
+    this.infraSubscription$ = this.infra$.subscribe(
+      (infra: Infra) => {
+        this.infra = infra;
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
   }
 
   ngAfterContentInit() {
+    const infraId = this.route.snapshot.paramMap.get('id');
+    this.infraDetailStore.dispatch(
+      new InfraDetailStore.Read(
+        { id: infraId }
+      )
+    );
   }
 
-  handleSensorClick(sensor: Sensor) {
+  ngOnDestroy() {
+    if (this.infraSubscription$) {
+      this.infraSubscription$.unsubscribe();
+    }
   }
 
-  handleCheckAlive() {
+  onAddSensor() {
+    this.sensorSettingDisplay = true;
   }
 
-  handleTraceroute() {
+  onSensorSettingClose() {
+    this.sensorSettingDisplay = false;
   }
+
 }

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

@@ -14,18 +14,20 @@
   </ng-template>
   <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">
     <tr [pSelectableRow]="infra">
-      <td>{{rowIndex}}</td>
+      <td>{{rowIndex + 1}}</td>
       <td>??</td>
       <td>{{infra.infraType.name}}</td>
       <td>{{infra.target.displayName}}</td>
-      <td>??</td>
+      <td>{{infra.target.sensorCount}}</td>
       <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
       <td>
-        <!-- <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button> -->
+        <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button>
       </td>
     </tr>
   </ng-template>
 </p-table>
+<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
+
 
 <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
   <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>

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

@@ -27,6 +27,10 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
     target: Target = null;
     sensorSettingDisplay = false;
 
+    pageSize = '10';
+    totalLength = 0;
+    currPage = 0;
+
     constructor(
         private route: ActivatedRoute,
         private router: Router,
@@ -40,6 +44,7 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
                 if (!page) {
                     return;
                 }
+                this.totalLength = page.totalElements;
                 this.infras = page.content;
             },
             (error: RPCClientError) => {
@@ -50,10 +55,10 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
 
     ngAfterContentInit() {
         this.route.params.subscribe((params: any) => {
-            const probe = {
+            this.probe = {
                 id: params['id'],
             };
-            this.getInfras(probe);
+            this.getInfras(0);
         });
     }
 
@@ -63,22 +68,23 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
         }
     }
 
-    getInfras(probe) {
+    getInfras(pageNo) {
         const pageParams: PageParams = {
-            pageNo: '0',
+            pageNo: pageNo + '',
-            countPerPage: '10',
+            countPerPage: this.pageSize,
             sortCol: 'id',
             sortDirection: 'descending'
         };
         this.infraListStore.dispatch(
             new InfraListStore.ReadAllByProbe(
-                { probe, pageParams }
+                { probe: this.probe, pageParams: pageParams }
             )
         );
     }
 
     onRowSelect(event) {
-        this.router.navigate(['sensors'], { queryParams: { target: event.data.id } });
+        // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
+        this.router.navigate(['target', event.data.id, 'info']);
     }
 
     onAddSensor(target: Target) {
@@ -90,4 +96,8 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
         this.sensorSettingDisplay = false;
     }
 
+    onPaging(e) {
+        this.getInfras(e.page);
+    }
+
 }

src/packages/target/model/Target.ts

@@ -7,5 +7,6 @@ export interface Target {
   createDate?: Date;
   displayName?: string;
   description?: string;
+  sensorCount?: number;
   sensors?: Sensor[];
 }