From cae76a196db5219a83b318320f82fb108d4a3660 Mon Sep 17 00:00:00 2001 From: insanity Date: Mon, 30 Apr 2018 17:12:31 +0900 Subject: [PATCH] target detail --- src/app/pages/pages-routing.module.ts | 2 +- .../target/target-page-routing.module.ts | 22 +++++++ .../pages/target/target-page.component.html | 10 +++ .../target/target-page.component.spec.ts | 25 +++++++ src/app/pages/target/target-page.component.ts | 25 +++++++ src/app/pages/target/target-page.module.ts | 22 +++++++ src/app/pages/targets/targets-page.module.ts | 2 + .../notification/notification.component.ts | 1 - .../component/detail/detail.component.ts | 3 +- .../sensor/component/list/list.component.scss | 14 ---- .../sensor/component/list/list.component.ts | 41 ++---------- .../component/detail/detail.component.html | 66 ++++++++++++++++++- .../component/detail/detail.component.scss | 37 ----------- .../component/detail/detail.component.ts | 58 +++++++++++++--- .../target/component/list/list.component.html | 8 ++- .../target/component/list/list.component.ts | 24 +++++-- src/packages/target/model/Target.ts | 1 + 17 files changed, 252 insertions(+), 109 deletions(-) create mode 100644 src/app/pages/target/target-page-routing.module.ts create mode 100644 src/app/pages/target/target-page.component.html create mode 100644 src/app/pages/target/target-page.component.spec.ts create mode 100644 src/app/pages/target/target-page.component.ts create mode 100644 src/app/pages/target/target-page.module.ts delete mode 100644 src/packages/sensor/component/list/list.component.scss delete mode 100644 src/packages/target/component/detail/detail.component.scss diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index 71367fb..01b4c46 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/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' }, diff --git a/src/app/pages/target/target-page-routing.module.ts b/src/app/pages/target/target-page-routing.module.ts new file mode 100644 index 0000000..544f933 --- /dev/null +++ b/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 { } diff --git a/src/app/pages/target/target-page.component.html b/src/app/pages/target/target-page.component.html new file mode 100644 index 0000000..3fd7827 --- /dev/null +++ b/src/app/pages/target/target-page.component.html @@ -0,0 +1,10 @@ +
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/pages/target/target-page.component.spec.ts b/src/app/pages/target/target-page.component.spec.ts new file mode 100644 index 0000000..e068786 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TargetPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TargetPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/target/target-page.component.ts b/src/app/pages/target/target-page.component.ts new file mode 100644 index 0000000..2dad0b9 --- /dev/null +++ b/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 }, + ]; + + } +} diff --git a/src/app/pages/target/target-page.module.ts b/src/app/pages/target/target-page.module.ts new file mode 100644 index 0000000..becab2f --- /dev/null +++ b/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 { } diff --git a/src/app/pages/targets/targets-page.module.ts b/src/app/pages/targets/targets-page.module.ts index 265f214..3d9549f 100644 --- a/src/app/pages/targets/targets-page.module.ts +++ b/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 diff --git a/src/packages/notification/component/notification/notification.component.ts b/src/packages/notification/component/notification/notification.component.ts index bfa2c8c..305536d 100644 --- a/src/packages/notification/component/notification/notification.component.ts +++ b/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; } diff --git a/src/packages/sensor/component/detail/detail.component.ts b/src/packages/sensor/component/detail/detail.component.ts index b2d2023..48187be 100644 --- a/src/packages/sensor/component/detail/detail.component.ts +++ b/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']); } } diff --git a/src/packages/sensor/component/list/list.component.scss b/src/packages/sensor/component/list/list.component.scss deleted file mode 100644 index 54b8a22..0000000 --- a/src/packages/sensor/component/list/list.component.scss +++ /dev/null @@ -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; - } \ No newline at end of file diff --git a/src/packages/sensor/component/list/list.component.ts b/src/packages/sensor/component/list/list.component.ts index 587053a..0407b9d 100644 --- a/src/packages/sensor/component/list/list.component.ts +++ b/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, - private infraDetailStore: Store, ) { } 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; diff --git a/src/packages/target/component/detail/detail.component.html b/src/packages/target/component/detail/detail.component.html index 280a75c..88a87d2 100644 --- a/src/packages/target/component/detail/detail.component.html +++ b/src/packages/target/component/detail/detail.component.html @@ -1 +1,65 @@ -
target detail
\ No newline at end of file +

Sensors

+
+
+
+ +
+ Status + + Up +
+ + + + + + +
+
+ +
+
+
+
+ + + + + +
+
+
+ Up + Down + Warn + Error +
+
+
+ + + + + + No. + Description + Status + Crawler + Items + Created at + + + + + {{rowIndex + 1}} + {{sensor.Description}} + {{sensor.status.name}} + {{sensor.crawler.name}} + ??? + {{sensor.createDate | date: 'dd.MM.yyyy'}} + + + +
+
+
\ No newline at end of file diff --git a/src/packages/target/component/detail/detail.component.scss b/src/packages/target/component/detail/detail.component.scss deleted file mode 100644 index 6cbe979..0000000 --- a/src/packages/target/component/detail/detail.component.scss +++ /dev/null @@ -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; - } diff --git a/src/packages/target/component/detail/detail.component.ts b/src/packages/target/component/detail/detail.component.ts index d14baaf..61c4f4b 100644 --- a/src/packages/target/component/detail/detail.component.ts +++ b/src/packages/target/component/detail/detail.component.ts @@ -1,28 +1,70 @@ -import { Component, ViewChild, OnInit, Input, AfterContentInit } from '@angular/core'; -import { Router } from '@angular/router'; - +import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core'; +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, + private sensorListStore: Store + ) { } 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; } + } diff --git a/src/packages/target/component/list/list.component.html b/src/packages/target/component/list/list.component.html index 1232915..dec729f 100644 --- a/src/packages/target/component/list/list.component.html +++ b/src/packages/target/component/list/list.component.html @@ -14,18 +14,20 @@ - {{rowIndex}} + {{rowIndex + 1}} ?? {{infra.infraType.name}} {{infra.target.displayName}} - ?? + {{infra.target.sensorCount}} {{infra.createDate | date: 'dd.MM.yyyy'}} - + + + diff --git a/src/packages/target/component/list/list.component.ts b/src/packages/target/component/list/list.component.ts index ac3c534..b6f8718 100644 --- a/src/packages/target/component/list/list.component.ts +++ b/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', - countPerPage: '10', + pageNo: pageNo + '', + 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); + } + } diff --git a/src/packages/target/model/Target.ts b/src/packages/target/model/Target.ts index 873070e..77404de 100644 --- a/src/packages/target/model/Target.ts +++ b/src/packages/target/model/Target.ts @@ -7,5 +7,6 @@ export interface Target { createDate?: Date; displayName?: string; description?: string; + sensorCount?: number; sensors?: Sensor[]; }