overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout tabmenu added

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/commons/component/layout/tabbar/app.tabbar.component.html
View File

@ -1,4 +1,5 @@
<p-tabView (onChange)="handleChange($event)"> <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-tabPanel>
</p-tabView> </p-tabView>

4
src/app/pages/probe/probe-page-routing.module.ts
View File

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

4
src/app/pages/probe/probe-page.component.html
View File

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

7
src/app/pages/probe/probe-page.component.ts
View File

@ -13,13 +13,12 @@ export class ProbePageComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
// const id = this.router.url.split('probe/')[1].split('/')[0]; const id = this.router.url.split('probe/')[1].split('/')[0];
const id = '1';
this.tabs = [ 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: '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 },
]; ];
} }

5
src/app/pages/probe/probe-page.module.ts
View File

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

6
src/packages/probe/component/detail/detail.component.html
View File

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

271
src/packages/probe/component/detail/detail.component.ts
View File

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

16
src/packages/probe/component/index.ts
View File

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

5
src/packages/probe/component/list/list.component.html
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> <mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
@ -42,4 +43,4 @@
<mat-paginator [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]"> <mat-paginator [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator> </mat-paginator>
</div> </div> -->

155
src/packages/probe/component/list/list.component.ts
View File

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

57
src/packages/probe/probe.module.ts
View File

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