overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

probe arrange

Browse Source
This commit is contained in:
insanity 2018-03-27 14:35:23 +09:00
parent 73d4672cbb
commit 3c636a238a
7 changed files with 69 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/infra/infra-page.component.html
View File

@ -1,5 +1,3 @@
<button mat-raised-button color="primary" (click)="authProbe()">Probe 인증</button>
<button mat-raised-button color="primary" (click)="discovery()">Probe Discovery</button>
<of-infra-map></of-infra-map>

12
src/app/pages/infra/infra-page.component.ts
View File

@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
@Component({
selector: 'of-infra-page',
@ -16,17 +15,6 @@ export class InfraPageComponent implements OnInit {
ngOnInit() {
}
discovery() {
const dialogRef = this.dialog.open(DiscoverySettingComponent, {
width: '80%',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
authProbe() {
}
}

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

@ -6,7 +6,6 @@ import { InfraPageRoutingModule } from './infra-page-routing.module';
import { MaterialModule } from 'packages/commons/material/material.module';
import { InfraModule } from 'packages/infra/infra.module';
import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
import { InfraPageComponent } from './infra-page.component';
import { DiscoveryModule } from 'packages/discovery/discovery.module';
@ -21,8 +20,5 @@ import { DiscoveryModule } from 'packages/discovery/discovery.module';
declarations: [
InfraPageComponent,
],
entryComponents: [
DiscoverySettingComponent
]
})
export class InfraPageModule { }

1
src/packages/infra/component/map/map.component.html
View File

@ -19,6 +19,7 @@
</div>
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="1">
Status: 기본 센서 데이터에서 저장한 metric으로..
</mat-grid-tile>
<mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
<div class="text-inside-grid">????</div>

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

@ -1,23 +1,35 @@
<div><h3>{{probe.displayName}}</h3></div>
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
<mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
<div *ngIf="probe !== null">
<div>
<h3>{{probe.displayName}}</h3>
</div>
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
<mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
<div>
<button mat-raised-button color="primary" (click)="discovery()">Discovery</button>
</div>
</div>
<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]="networkInfo"></of-info-table>
</mat-card>
<mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
<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]="probeInfo"></of-info-table>
</mat-card>
</div>
<div fxLayoutAlign="end">
<button *ngIf="probe.status.id === 1" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
<button *ngIf="probe.status.id === 2" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
<button mat-raised-button color="warn" (click)="handleRemove()">Remove</button>
</div>
</div>
<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]="networkInfo"></of-info-table>
</mat-card>
<mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
<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]="probeInfo"></of-info-table>
</mat-card>
<div *ngIf="probe === null">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>

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

@ -10,6 +10,8 @@ import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialo
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';
@Component({
selector: 'of-probe-detail',
@ -37,6 +39,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
(probe: Probe) => {
if (probe != null) {
this.probe = probe;
console.log(probe);
this.arrangeInfo();
}
},
@ -56,18 +59,29 @@ export class DetailComponent implements OnInit, AfterContentInit {
}
arrangeInfo() {
const cidr = new CIDR(this.probe.cidr);
if (!cidr.isValid()) {
}
const startIP = cidr.addressStart.address;
const endIP = cidr.addressEnd.address;
this.networkInfo = [
{
key: 'IP',
value: '192.168.1.1'
key: 'Probe IP Range',
value: startIP + '~' + endIP,
},
{
key: 'Installed IP',
value: '???',
},
{
key: 'NIC',
value: 'enps30'
value: '???'
},
{
key: 'Targets',
value: '12'
value: 'count 반정규화 필요 '
},
];
this.deviceInfo = [
@ -91,7 +105,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
this.probeInfo = [
{
key: 'Authorized at',
value: String(new Date())
value: String(new Date(this.probe.authorizeDate))
},
{
key: 'Authorized by',
@ -99,11 +113,27 @@ export class DetailComponent implements OnInit, AfterContentInit {
},
{
key: 'Installed at',
value: String(new Date())
value: String(new Date(this.probe.createDate))
},
{
key: 'Probe Key',
value: this.probe.probeKey,
},
];
}
discovery() {
const dialogRef = this.dialog.open(DiscoverySettingComponent, {
width: '80%',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
handleStartStop() {
// this.isUpState = !this.isUpState;
}

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

@ -10,6 +10,9 @@ import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialo
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: [
@ -18,6 +21,7 @@ import { SERVICES } from './service';
InfoTableModule,
ConfirmDialogModule,
ProbeStoreModule,
DiscoveryModule
],
declarations: [
COMPONENTS,
@ -30,6 +34,7 @@ import { SERVICES } from './service';
],
entryComponents: [
ConfirmDialogComponent,
DiscoverySettingComponent
]
})
export class ProbeModule { }