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

probes tab bug

Browse Source
This commit is contained in:
insanity 2018-04-11 15:20:23 +09:00
parent 2c1dd69ce5
commit df15cd56a9
17 changed files with 168 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/commons/component/layout/tabbar/app.tabbar.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { NgModule, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TabbarComponent } from './app.tabbar.component';
import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
@NgModule({
imports: [
CommonModule,
PrimeNGModules,
],
declarations: [
TabbarComponent,
],
exports: [
TabbarComponent,
],
})
export class TabbarModule {
}

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

@ -4,9 +4,9 @@ import { CommonModule } from '@angular/common';
// import { ProbeModule } from 'packages/probe/probe.module'; // import { ProbeModule } from 'packages/probe/probe.module';
import { ProbePageComponent } from './probe-page.component'; 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 { 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'; import { ProbeModule } from 'packages/probe/probe.module';
import { TabbarModule } from '../../commons/component/layout/tabbar/app.tabbar.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -14,10 +14,10 @@ import { ProbeModule } from 'packages/probe/probe.module';
ProbePageRoutingModule, ProbePageRoutingModule,
PrimeNGModules, PrimeNGModules,
ProbeModule, ProbeModule,
TabbarModule
], ],
declarations: [ declarations: [
ProbePageComponent, ProbePageComponent,
TabbarComponent
] ]
}) })
export class ProbePageModule { } export class ProbePageModule { }

9
src/app/pages/probes/probes-page-routing.module.ts
View File

@ -2,9 +2,8 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { ProbesPageComponent } from './probes-page.component'; import { ProbesPageComponent } from './probes-page.component';
import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component'; import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component';
// import { ListComponent as NoauthListComponent } from 'packages/noauth/component/list/list.component'; import { ListComponent as NoauthListComponent } from 'packages/noauth/component/list/list.component';
// import { DownloadComponent } from 'packages/probe/component/download/download.component'; import { DownloadComponent } from 'packages/probe/component/download/download.component';
// import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -12,8 +11,8 @@ const routes: Routes = [
component: ProbesPageComponent, component: ProbesPageComponent,
children: [ children: [
{ path: '', component: ProbeListComponent }, { path: '', component: ProbeListComponent },
// { path: 'noauth', component: NoauthListComponent }, { path: 'noauth', component: NoauthListComponent },
// { path: 'download', component: DownloadComponent }, { path: 'download', component: DownloadComponent },
] ]
} }
]; ];

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

@ -1 +1 @@
<router-outlet></router-outlet> <of-tabbar [tabs]="tabs"></of-tabbar>

6
src/app/pages/probes/probes-page.module.ts
View File

@ -1,16 +1,18 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ProbeModule } from 'packages/probe/probe.module'; import { ProbeModule } from 'packages/probe/probe.module';
// import { NoauthModule } from 'packages/noauth/noauth.module'; import { NoauthModule } from 'packages/noauth/noauth.module';
import { ProbesPageComponent } from './probes-page.component'; import { ProbesPageComponent } from './probes-page.component';
import { ProbesPageRoutingModule } from './probes-page-routing.module'; import { ProbesPageRoutingModule } from './probes-page-routing.module';
import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
ProbesPageRoutingModule, ProbesPageRoutingModule,
TabbarModule,
ProbeModule, ProbeModule,
// NoauthModule, NoauthModule,
], ],
declarations: [ declarations: [
ProbesPageComponent, ProbesPageComponent,

8
src/packages/noauth/component/index.ts
View File

@ -1,5 +1,5 @@
// import { ListComponent } from './list/list.component'; import { ListComponent } from './list/list.component';
// export const COMPONENTS = [ export const COMPONENTS = [
// ListComponent, ListComponent,
// ]; ];

39
src/packages/noauth/component/list/list.component.html
View File

@ -1,38 +1 @@
<div fxLayoutAlign="end" [style.margin]="'10px'" fxLayoutGap="10px"> <div>unauthorized probes</div>
<button mat-raised-button color="primary" (click)="handleAccept()" [disabled]="selected == null">Accept</button>
<button mat-raised-button color="warn" (click)="handleDeny()" [disabled]="selected == null">Deny</button>
</div>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-radio-button (change)="handleSelect(row)"></mat-radio-button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="createDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created At </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.createDate.toLocaleString()}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
</mat-paginator>
</div>

0
src/packages/noauth/component/list/list.component.scss
View File

137
src/packages/noauth/component/list/list.component.ts
View File

@ -1,88 +1,75 @@
// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks'; import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
// import { Router } from '@angular/router'; import { Router } from '@angular/router';
// import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
// import { AuthSelector } from 'packages/member/store'; import { AuthSelector } from 'packages/member/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 * as ListStore from '../../store/noauth-probe'; import * as ListStore from '../../store/noauth-probe';
// import { NoAuthProbeSelector } from '../../store'; import { NoAuthProbeSelector } from '../../store';
// import { NoAuthProbe } from '../../model'; import { NoAuthProbe } from '../../model';
// @Component({ @Component({
// selector: 'of-noauth-list', selector: 'of-noauth-list',
// templateUrl: './list.component.html', templateUrl: './list.component.html',
// styleUrls: ['./list.component.scss'] })
// }) export class ListComponent implements OnInit, AfterContentInit {
// export class ListComponent implements OnInit, AfterContentInit { noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
// noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
// selected: NoAuthProbe = null; selected: NoAuthProbe = null;
// displayedColumns = ['select', 'id', 'description', 'createDate']; constructor(
// dataSource: MatTableDataSource<NoAuthProbe>; private router: Router,
// @ViewChild(MatSort) sort: MatSort; private store: Store<ListStore.State>
) {
}
// constructor( ngAfterContentInit() {
// private router: Router, // this.store.select(AuthSelector.select('domain')).subscribe(
// private store: Store<ListStore.State> // (domain: Domain) => {
// ) { // this.store.dispatch(new ListStore.ReadAllByDomain(domain));
// } // }
// );
// ngAfterContentInit() { // this.noAuthProbes$.subscribe(
// this.store.select(AuthSelector.select('domain')).subscribe( // (noAuthProbes: NoAuthProbe[]) => {
// (domain: Domain) => { // },
// this.store.dispatch(new ListStore.ReadAllByDomain(domain)); // (error: RPCClientError) => {
// } // console.log(error.response.message);
// ); // }
// );
}
// this.noAuthProbes$.subscribe( ngOnInit() {
// (noAuthProbes: NoAuthProbe[]) => { }
// this.dataSource = new MatTableDataSource(noAuthProbes);
// this.dataSource.sort = this.sort;
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
// }
handleSelect(selected: NoAuthProbe) {
this.selected = selected;
}
handleAccept() {
this.store.dispatch(new ListStore.Accept(this.selected));
this.noAuthProbes$.subscribe(
(noAuthProbes: NoAuthProbe[]) => {
// ngOnInit() { },
// } (error: RPCClientError) => {
console.log(error.response.message);
}
);
}
// handleSelect(selected: NoAuthProbe) { handleDeny() {
// this.selected = selected; this.store.dispatch(new ListStore.Deny(this.selected));
// } this.noAuthProbes$.subscribe(
(noAuthProbes: NoAuthProbe[]) => {
// handleAccept() { },
// this.store.dispatch(new ListStore.Accept(this.selected)); (error: RPCClientError) => {
// this.noAuthProbes$.subscribe( console.log(error.response.message);
// (noAuthProbes: NoAuthProbe[]) => { }
// this.dataSource = new MatTableDataSource(noAuthProbes); );
// this.dataSource.sort = this.sort; }
// }, }
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
// console.log(this.selected.id + ' accept');
// }
// handleDeny() {
// this.store.dispatch(new ListStore.Deny(this.selected));
// this.noAuthProbes$.subscribe(
// (noAuthProbes: NoAuthProbe[]) => {
// this.dataSource = new MatTableDataSource(noAuthProbes);
// this.dataSource.sort = this.sort;
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
// console.log(this.selected.id + ' deny');
// }
// }

47
src/packages/noauth/noauth.module.ts
View File

@ -1,25 +1,24 @@
// import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
// import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NoAuthProbeStoreModule } from './noauth-probe-store.module';
import { COMPONENTS } from './component';
import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
// import { NoAuthProbeStoreModule } from './noauth-probe-store.module'; @NgModule({
imports: [
// import { COMPONENTS } from './component'; CommonModule,
// import { SERVICES } from './service'; NoAuthProbeStoreModule,
PrimeNGModules
// @NgModule({ ],
// imports: [ declarations: [
// CommonModule, COMPONENTS,
// NoAuthProbeStoreModule, ],
// MaterialModule exports: [
// ], COMPONENTS,
// declarations: [ ],
// COMPONENTS, providers: [
// ], SERVICES,
// exports: [ ]
// COMPONENTS, })
// ], export class NoauthModule { }
// providers: [
// SERVICES,
// ]
// })
// export class NoauthModule { }

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

@ -1,37 +1,5 @@
<div>probe detail info</div> <div>
<button type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
<!-- <div *ngIf="probe !== null"> <button class="ui-button-danger" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
<div> <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<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>
<div *ngIf="probe === null">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div> -->

0
src/packages/probe/component/detail/detail.component.scss
View File

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

@ -1,34 +1,30 @@
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 { 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 { ConfirmationService, Message } from 'primeng/primeng';
import * as CIDR from 'ip-cidr'; import * as CIDR from 'ip-cidr';
// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
@Component({ @Component({
selector: 'of-probe-detail', selector: 'of-probe-detail',
templateUrl: './detail.component.html', templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss'] providers: [ConfirmationService]
}) })
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;
deviceInfo = null;
probeInfo = null;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
// public dialog: MatDialog, private detailStore: Store<DetailStore.State>,
private detailStore: Store<DetailStore.State> private confirmationService: ConfirmationService
) { } ) { }
ngOnInit() { ngOnInit() {
@ -56,100 +52,28 @@ export class DetailComponent implements OnInit, AfterContentInit {
} }
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 = [
{
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() { onDiscoveryClick() {
// const dialogRef = this.dialog.open(DiscoverySettingComponent, { alert('Discovery를 열거라 대훈');
// width: '80%',
// });
// dialogRef.afterClosed().subscribe(result => {
// console.log('The dialog was closed');
// });
} }
onRemoveClick() {
handleStartStop() { this.confirmationService.confirm({
// this.isUpState = !this.isUpState; header: 'Confirmation',
icon: 'fa fa-trash',
message: 'Are you sure to remove this Probe?',
accept: () => {
this.router.navigate(['probes']);
},
reject: () => {
} }
});
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
// });
} }
} }

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

@ -1,4 +1,4 @@
<p-table [value]="probes" selectionMode="single" (onRowSelect)="onRowSelect($event)" dataKey="displayName"> <p-table [value]="probes" selectionMode="single" [(selection)]="selectedProbe" (onRowSelect)="onRowSelect($event)">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<ng-template pTemplate="caption"> <ng-template pTemplate="caption">
Recent Sales Recent Sales
@ -14,13 +14,13 @@
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-probe> <ng-template pTemplate="body" let-probe>
<tr> <tr [pSelectableRow]="probe">
<td>{{probe.displayName}}</td> <td>{{probe.displayName}}</td>
<td>?</td> <td>?</td>
<td>?</td> <td>?</td>
<td>{{probe.cidr}}</td> <td>{{probe.cidr}}</td>
<td>??</td> <td>??</td>
<td>{{probe.authorizeDate}}</td> <td>{{probe.authorizeDate | date: 'dd.MM.yyyy'}}</td>
<td>{{probe.authorizeMember.name}}</td> <td>{{probe.authorizeMember.name}}</td>
</tr> </tr>
</ng-template> </ng-template>

14
src/packages/probe/component/list/list.component.scss
View File

@ -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;
}

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

@ -14,13 +14,14 @@ 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']
}) })
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')));
probes: Probe[]; probes: Probe[];
cols: any[]; cols: any[];
selectedProbe: Probe;
constructor( constructor(
private router: Router, private router: Router,
private store: Store<ListStore.State> private store: Store<ListStore.State>
@ -29,35 +30,27 @@ export class ListComponent implements OnInit, AfterContentInit {
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);
}, // },
(error: RPCClientError) => { // (error: RPCClientError) => {
console.log(error.response.message); // console.log(error.response.message);
} // }
); // );
} }
ngOnInit() { ngOnInit() {
this.cols = [
{ field: 'displayName', header: 'displayName' },
{ field: 'createDate', header: 'createDate' },
{ field: 'cidr', header: 'CIDR' },
{ field: 'authorizeDate', header: 'authorizeDate' },
{ field: 'authorizeMember', authorizeMember: 'Color' }
];
// Temporary data // Temporary data
this.probes = new Array(); this.probes = new Array();
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
@ -77,7 +70,6 @@ export class ListComponent implements OnInit, AfterContentInit {
} }
onRowSelect(event) { onRowSelect(event) {
console.log(event.data); this.router.navigate(['probe', event.data.id]);
// this.router.navigate(['probe', obj.id]);
} }
} }

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

@ -5,6 +5,7 @@ import { COMPONENTS } from './component';
import { ProbeStoreModule } from './probe-store.module'; import { ProbeStoreModule } from './probe-store.module';
import { SERVICES } from './service'; import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
import { FormsModule } from '@angular/forms';
// 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';
@ -14,6 +15,7 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
CommonModule, CommonModule,
PrimeNGModules, PrimeNGModules,
ProbeStoreModule, ProbeStoreModule,
FormsModule
// DiscoveryModule // DiscoveryModule
], ],
declarations: [ declarations: [