layout tabmenu added

This commit is contained in:
insanity 2018-04-06 22:02:46 +09:00
parent d33dafbdd2
commit 6baf0ef325
11 changed files with 259 additions and 274 deletions

View File

@ -1,4 +1,5 @@
<p-tabView (onChange)="handleChange($event)">
<p-tabPanel [header]="tab.label" *ngFor="let tab of tabs; let i = index" [selected]="i == 0" [leftIcon]="tab.icon">
<p-tabPanel [header]="tab.label" *ngFor="let tab of tabs; let i = index" [selected]="i == 0" [leftIcon]="tab.icon" [disabled]="tab.disabled">
<router-outlet></router-outlet>
</p-tabPanel>
</p-tabView>

View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProbePageComponent } from './probe-page.component';
// import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component';
import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component';
// import { ListComponent as TargetListComponent } from 'packages/target/component/list/list.component';
const routes: Routes = [
@ -9,7 +9,7 @@ const routes: Routes = [
path: '',
component: ProbePageComponent,
children: [
// { path: ':id', component: ProbeDetailComponent },
{ path: ':id', component: ProbeDetailComponent },
// { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
// { path: ':id/history', component: null },
]

View File

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

View File

@ -13,13 +13,12 @@ export class ProbePageComponent implements OnInit {
}
ngOnInit() {
// const id = this.router.url.split('probe/')[1].split('/')[0];
const id = '1';
const id = this.router.url.split('probe/')[1].split('/')[0];
this.tabs = [
{ label: 'Info', path: '/probe/' + id, icon: 'fa-check' },
{ label: 'Probe Info', path: '/probe/' + id, icon: 'fa-check' },
{ label: 'Targets', path: '/probe/' + id + '/targets', icon: 'fa-check' },
{ label: 'History', path: '/probe/' + id + '/history', icon: 'fa-check' },
{ label: 'History', path: '/probe/' + id + '/history', icon: 'fa-check', disabled: true },
];
}

View File

@ -6,13 +6,14 @@ import { ProbePageComponent } from './probe-page.component';
import { ProbePageRoutingModule } from './probe-page-routing.module';
import { TabbarComponent } from 'app/commons/component/layout/tabbar/app.tabbar.component';
import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
import { ProbeModule } from 'packages/probe/probe.module';
@NgModule({
imports: [
CommonModule,
ProbePageRoutingModule,
PrimeNGModules
// ProbeModule,
PrimeNGModules,
ProbeModule,
],
declarations: [
ProbePageComponent,

View File

@ -1,4 +1,6 @@
<div *ngIf="probe !== null">
<div>probe detail info</div>
<!-- <div *ngIf="probe !== null">
<div>
<h3>{{probe.displayName}}</h3>
</div>
@ -32,4 +34,4 @@
<div *ngIf="probe === null">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
</div> -->

View File

@ -1,156 +1,155 @@
// import { Component, OnInit, Inject, AfterContentInit } from '@angular/core';
// import { ActivatedRoute, Router } from '@angular/router';
// import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
// import { Store, select } from '@ngrx/store';
import { Component, OnInit, Inject, AfterContentInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
// import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
// import * as DetailStore from '../../store/detail';
// import { DetailSelector } from '../../store';
// import { Probe } from '../../model';
import * as DetailStore from '../../store/detail';
import { DetailSelector } from '../../store';
import { Probe } from '../../model';
// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
// import * as CIDR from 'ip-cidr';
import * as CIDR from 'ip-cidr';
// @Component({
// selector: 'of-probe-detail',
// templateUrl: './detail.component.html',
// styleUrls: ['./detail.component.scss']
// })
// export class DetailComponent implements OnInit, AfterContentInit {
@Component({
selector: 'of-probe-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss']
})
export class DetailComponent implements OnInit, AfterContentInit {
// probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
// probe: Probe = null;
// networkInfo = null;
// deviceInfo = null;
// probeInfo = null;
probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
probe: Probe = null;
networkInfo = null;
deviceInfo = null;
probeInfo = null;
// constructor(
// private route: ActivatedRoute,
// private router: Router,
// public dialog: MatDialog,
// private detailStore: Store<DetailStore.State>
// ) { }
constructor(
private route: ActivatedRoute,
private router: Router,
// public dialog: MatDialog,
private detailStore: Store<DetailStore.State>
) { }
// ngOnInit() {
// this.probe$.subscribe(
// (probe: Probe) => {
// if (probe != null) {
// this.probe = probe;
// console.log(probe);
// this.arrangeInfo();
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
// }
ngOnInit() {
this.probe$.subscribe(
(probe: Probe) => {
if (probe != null) {
this.probe = probe;
console.log(probe);
this.arrangeInfo();
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
}
// ngAfterContentInit() {
// const probeId = this.route.snapshot.paramMap.get('id');
// this.detailStore.dispatch(
// new DetailStore.Read(
// { id: probeId }
// )
// );
// }
ngAfterContentInit() {
const probeId = this.route.snapshot.paramMap.get('id');
this.detailStore.dispatch(
new DetailStore.Read(
{ id: probeId }
)
);
}
// arrangeInfo() {
arrangeInfo() {
// const cidr = new CIDR(this.probe.cidr);
// if (!cidr.isValid()) {
// }
// const startIP = cidr.addressStart.address;
// const endIP = cidr.addressEnd.address;
const cidr = new CIDR(this.probe.cidr);
if (!cidr.isValid()) {
}
const startIP = cidr.addressStart.address;
const endIP = cidr.addressEnd.address;
// this.networkInfo = [
// {
// key: 'Probe IP Range',
// value: startIP + '~' + endIP,
// },
// {
// key: 'Installed IP',
// value: '???',
// },
// {
// key: 'NIC',
// value: '???'
// },
// {
// key: 'Targets',
// value: 'count 반정규화 필요 '
// },
// ];
// this.deviceInfo = [
// {
// key: 'OS',
// value: 'Linux'
// },
// {
// key: 'CPU',
// value: 'intel7...'
// },
// {
// key: 'Memory',
// value: '16GB'
// },
// {
// key: '...',
// value: '...'
// },
// ];
// this.probeInfo = [
// {
// key: 'Authorized at',
// value: String(new Date(this.probe.authorizeDate))
// },
// {
// key: 'Authorized by',
// value: 'insanity'
// },
// {
// key: 'Installed at',
// value: String(new Date(this.probe.createDate))
// },
// {
// key: 'Probe Key',
// value: this.probe.probeKey,
// },
// ];
// }
this.networkInfo = [
{
key: 'Probe IP Range',
value: startIP + '~' + endIP,
},
{
key: 'Installed IP',
value: '???',
},
{
key: 'NIC',
value: '???'
},
{
key: 'Targets',
value: 'count 반정규화 필요 '
},
];
this.deviceInfo = [
{
key: 'OS',
value: 'Linux'
},
{
key: 'CPU',
value: 'intel7...'
},
{
key: 'Memory',
value: '16GB'
},
{
key: '...',
value: '...'
},
];
this.probeInfo = [
{
key: 'Authorized at',
value: String(new Date(this.probe.authorizeDate))
},
{
key: 'Authorized by',
value: 'insanity'
},
{
key: 'Installed at',
value: String(new Date(this.probe.createDate))
},
{
key: 'Probe Key',
value: this.probe.probeKey,
},
];
}
// discovery() {
// const dialogRef = this.dialog.open(DiscoverySettingComponent, {
// width: '80%',
// });
discovery() {
// const dialogRef = this.dialog.open(DiscoverySettingComponent, {
// width: '80%',
// });
// dialogRef.afterClosed().subscribe(result => {
// console.log('The dialog was closed');
// dialogRef.afterClosed().subscribe(result => {
// console.log('The dialog was closed');
// });
// }
// });
}
// handleStartStop() {
// // this.isUpState = !this.isUpState;
// }
handleStartStop() {
// this.isUpState = !this.isUpState;
}
// handleRemove() {
// const dialogRef = this.dialog.open(ConfirmDialogComponent, {
// width: '250px',
// data: {
// title: 'Remove',
// message: 'Are you sure?'
// }
// });
handleRemove() {
// const dialogRef = this.dialog.open(ConfirmDialogComponent, {
// width: '250px',
// data: {
// title: 'Remove',
// message: 'Are you sure?'
// }
// });
// dialogRef.afterClosed().subscribe(confirmed => {
// if (confirmed) {
// console.log('confirmed');
// }
// // 삭제 후 list로 back
// });
// }
// }
// dialogRef.afterClosed().subscribe(confirmed => {
// if (confirmed) {
// console.log('confirmed');
// }
// // 삭제 후 list로 back
// });
}
}

View File

@ -1,9 +1,9 @@
// import { DetailComponent } from './detail/detail.component';
// import { ListComponent } from './list/list.component';
// import { DownloadComponent } from './download/download.component';
import { DetailComponent } from './detail/detail.component';
import { ListComponent } from './list/list.component';
import { DownloadComponent } from './download/download.component';
// export const COMPONENTS = [
// ListComponent,
// DetailComponent,
// DownloadComponent,
// ];
export const COMPONENTS = [
ListComponent,
DetailComponent,
DownloadComponent,
];

View File

@ -1,4 +1,5 @@
<div class="example-container mat-elevation-z8">
<div>probe list</div>
<!-- <div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
@ -42,4 +43,4 @@
<mat-paginator [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>
</div> -->

View File

@ -1,93 +1,92 @@
// import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild } from '@angular/core';
// import { MatTableDataSource, MatSort } from '@angular/material';
// import { Router } from '@angular/router';
import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
// import { Store, select } from '@ngrx/store';
import { Store, select } from '@ngrx/store';
// import { RPCClientError } from '@loafer/ng-rpc/protocol';
// import { Domain } from 'packages/domain/model';
// import { AuthSelector } from 'packages/member/store';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { Domain } from 'packages/domain/model';
import { AuthSelector } from 'packages/member/store';
// import { Probe } from '../../model';
// import * as ListStore from '../../store/list';
// import { ListSelector } from '../../store';
import { Probe } from '../../model';
import * as ListStore from '../../store/list';
import { ListSelector } from '../../store';
// @Component({
// selector: 'of-probe-list',
// templateUrl: './list.component.html',
// styleUrls: ['./list.component.scss']
// })
// export class ListComponent implements OnInit, AfterContentInit {
// probes$ = this.store.pipe(select(ListSelector.select('probes')));
// // pageSize = '25';
// // length = '100';
@Component({
selector: 'of-probe-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit, AfterContentInit {
probes$ = this.store.pipe(select(ListSelector.select('probes')));
// pageSize = '25';
// length = '100';
// displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
// dataSource: MatTableDataSource<Probe>;
// @ViewChild(MatSort) sort: MatSort;
// constructor(
// private router: Router,
// private store: Store<ListStore.State>
// ) {
// }
constructor(
private router: Router,
private store: Store<ListStore.State>
) {
}
// ngAfterContentInit() {
ngAfterContentInit() {
// this.store.select(AuthSelector.select('domain')).subscribe(
// (domain: Domain) => {
// this.store.dispatch(new ListStore.ReadAllByDomain(domain));
// },
// (error) => {
// console.log(error);
// }
// );
this.store.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => {
this.store.dispatch(new ListStore.ReadAllByDomain(domain));
},
(error) => {
console.log(error);
}
);
// this.probes$.subscribe(
// (probes: Probe[]) => {
// console.log(probes);
// this.dataSource = new MatTableDataSource(probes);
// this.dataSource.sort = this.sort;
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
this.probes$.subscribe(
(probes: Probe[]) => {
console.log(probes);
// this.dataSource = new MatTableDataSource(probes);
// this.dataSource.sort = this.sort;
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
// // // temporary data
// // const data: Probe[] = new Array();
// // for (let i = 0; i < 100; i++) {
// // const p: Probe = {
// // id: i,
// // displayName: String('displayName' + i),
// // host: {
// // ip: i,
// // os: {
// // meta: 'blahblahblah'
// // },
// // },
// // cidr: String('cidr' + i),
// // targets: [
// // {
// // id: i,
// // },
// // ],
// // authorizeDate: new Date(),
// // authorizeMember: {
// // 'name': String('insanity')
// // },
// // };
// // data.push(p);
// // }
// // temporary data
// const data: Probe[] = new Array();
// for (let i = 0; i < 100; i++) {
// const p: Probe = {
// id: i,
// displayName: String('displayName' + i),
// host: {
// ip: i,
// os: {
// meta: 'blahblahblah'
// },
// },
// cidr: String('cidr' + i),
// targets: [
// {
// id: i,
// },
// ],
// authorizeDate: new Date(),
// authorizeMember: {
// 'name': String('insanity')
// },
// };
// data.push(p);
// }
// // this.dataSource = new MatTableDataSource(data);
// // this.dataSource.sort = this.sort;
// }
// this.dataSource = new MatTableDataSource(data);
// this.dataSource.sort = this.sort;
}
// ngOnInit() {
// }
ngOnInit() {
}
// handleRowClick(obj: Probe) {
// this.router.navigate(['probe', obj.id]);
// }
// }
handleRowClick(obj: Probe) {
this.router.navigate(['probe', obj.id]);
}
}

View File

@ -1,40 +1,27 @@
// import { NgModule } from '@angular/core';
// import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { MaterialModule } from 'packages/commons/material/material.module';
// import { InfoTableModule } from 'packages/commons/component/info-table/info-table.module';
// import { ConfirmDialogModule } from 'packages/commons/component/confirm-dialog/confirm-dialog.module';
// import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialog/confirm-dialog.component';
// import { COMPONENTS } from './component';
// import { ProbeStoreModule } from './probe-store.module';
// import { SERVICES } from './service';
import { COMPONENTS } from './component';
import { ProbeStoreModule } from './probe-store.module';
import { SERVICES } from './service';
// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
// import { DiscoveryModule } from '../discovery/discovery.module';
// @NgModule({
// imports: [
// CommonModule,
// MaterialModule,
// InfoTableModule,
// ConfirmDialogModule,
// ProbeStoreModule,
// DiscoveryModule
// ],
// declarations: [
// COMPONENTS,
// ],
// exports: [
// COMPONENTS,
// ],
// providers: [
// SERVICES,
// ],
// entryComponents: [
// ConfirmDialogComponent,
// DiscoverySettingComponent
// ]
// })
// export class ProbeModule { }
@NgModule({
imports: [
CommonModule,
ProbeStoreModule,
// DiscoveryModule
],
declarations: [
COMPONENTS,
],
exports: [
COMPONENTS,
],
providers: [
SERVICES,
]
})
export class ProbeModule { }