noauth probe design
This commit is contained in:
parent
c3ac713f99
commit
2ba7ecb888
|
@ -1,5 +1,78 @@
|
||||||
<h1>Unauthorized</h1>
|
<h1>Unauthorized</h1>
|
||||||
<p-table [value]="noauthProbes" selectionMode="single" [(selection)]="selected" [resizableColumns]="true">
|
|
||||||
|
<p-table #dt [value]="noauthProbes" selectionMode="single" dataKey="id">
|
||||||
|
<ng-template pTemplate="header">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 3.25em" pResizableColumn></th>
|
||||||
|
<th style="width: 20em">Probe Key</th>
|
||||||
|
<th>Host Name</th>
|
||||||
|
<th>OS</th>
|
||||||
|
<th style="width: 7em">Created at</th>
|
||||||
|
</tr>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
|
||||||
|
<tr [pSelectableRow]="rowData.data" [pRowToggler]="rowData">
|
||||||
|
<td>
|
||||||
|
<a href="#">
|
||||||
|
<i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td>{{rowData.data.tempProbeKey}}</td>
|
||||||
|
<td>{{rowData.meta.host.name}}</td>
|
||||||
|
<td>{{rowData.meta.host.os}}</td>
|
||||||
|
<td>{{rowData.data.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||||
|
</tr>
|
||||||
|
</ng-template>
|
||||||
|
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
|
||||||
|
<tr>
|
||||||
|
<td [attr.colspan]="5">
|
||||||
|
<div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
|
||||||
|
|
||||||
|
<div class="ui-g-12 ui-md-6">
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>Platform:</b> {{rowData.meta.host.platform}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>Platform family:</b> {{rowData.meta.host.platformFamily}}
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>Kernel:</b> {{rowData.meta.host.kernelVersion}}
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>HostID:</b> {{rowData.meta.host.hostID}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui-g-12 ui-md-6">
|
||||||
|
<div class="ui-g">
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>NIC:</b> {{rowData.meta.network.name}}
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>Network Address:</b> {{rowData.meta.network.address}}
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>Gateway:</b> {{rowData.meta.network.gateway}}
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12">
|
||||||
|
<b>Mac Address:</b> {{rowData.meta.network.macAddress}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td [attr.colspan]="5">
|
||||||
|
<button class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
|
||||||
|
<button class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</ng-template>
|
||||||
|
</p-table>
|
||||||
|
|
||||||
|
<!-- <p-table [value]="noauthProbes" selectionMode="single" [(selection)]="selected" [resizableColumns]="true">
|
||||||
<ng-template pTemplate="header" let-columns>
|
<ng-template pTemplate="header" let-columns>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 3.25em" pResizableColumn></th>
|
<th style="width: 3.25em" pResizableColumn></th>
|
||||||
|
@ -13,9 +86,9 @@
|
||||||
<td>
|
<td>
|
||||||
<p-tableRadioButton [value]="probe"></p-tableRadioButton>
|
<p-tableRadioButton [value]="probe"></p-tableRadioButton>
|
||||||
</td>
|
</td>
|
||||||
<td>{{probe.tempProbeKey}}</td>
|
<td>{{probe.data.tempProbeKey}}</td>
|
||||||
<td style="overflow: auto;">{{probe.description}}</td>
|
<td style="overflow: auto;">{{probe.meta.host.name}}</td>
|
||||||
<td>{{probe.createDate | date: 'dd/MM/yyyy'}}</td>
|
<td>{{probe.data.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</p-table>
|
</p-table>
|
||||||
|
@ -25,4 +98,4 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||||
<p-growl [(value)]="msgs"></p-growl>
|
<p-growl [(value)]="msgs"></p-growl> -->
|
|
@ -11,6 +11,31 @@ import { NoAuthProbe } from '../../model';
|
||||||
import { ConfirmationService, Message } from 'primeng/primeng';
|
import { ConfirmationService, Message } from 'primeng/primeng';
|
||||||
import { MessageService } from 'primeng/components/common/messageservice';
|
import { MessageService } from 'primeng/components/common/messageservice';
|
||||||
|
|
||||||
|
class NoauthProbeDesc {
|
||||||
|
host: {
|
||||||
|
name: string;
|
||||||
|
os: string;
|
||||||
|
platform: string;
|
||||||
|
platformFamily: string;
|
||||||
|
platformVersion: string;
|
||||||
|
kernelVersion: string;
|
||||||
|
hostID: string;
|
||||||
|
};
|
||||||
|
network: {
|
||||||
|
name: string;
|
||||||
|
address: string;
|
||||||
|
gateway: string;
|
||||||
|
macAddress: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class NoauthProbeResult {
|
||||||
|
id: number;
|
||||||
|
data: NoAuthProbe;
|
||||||
|
meta: NoauthProbeDesc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'of-noauth-list',
|
selector: 'of-noauth-list',
|
||||||
templateUrl: './list.component.html',
|
templateUrl: './list.component.html',
|
||||||
|
@ -18,10 +43,11 @@ import { MessageService } from 'primeng/components/common/messageservice';
|
||||||
})
|
})
|
||||||
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')));
|
||||||
noauthProbes: NoAuthProbe[];
|
noauthProbes: NoauthProbeResult[];
|
||||||
selected: NoAuthProbe = null;
|
selected: NoAuthProbe = null;
|
||||||
msgs: Message[];
|
msgs: Message[];
|
||||||
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private store: Store<ListStore.State>,
|
private store: Store<ListStore.State>,
|
||||||
|
@ -30,17 +56,11 @@ export class ListComponent implements OnInit, AfterContentInit {
|
||||||
) {
|
) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterContentInit() {
|
ngOnInit() {
|
||||||
this.store.select(AuthSelector.select('domain')).subscribe(
|
|
||||||
(domain: Domain) => {
|
|
||||||
this.store.dispatch(new ListStore.ReadAllByDomain(domain));
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
this.noAuthProbes$.subscribe(
|
this.noAuthProbes$.subscribe(
|
||||||
(result: NoAuthProbe[]) => {
|
(result: NoAuthProbe[]) => {
|
||||||
if (result) {
|
if (result) {
|
||||||
this.noauthProbes = result;
|
this.arrangeData(result);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
(error: RPCClientError) => {
|
(error: RPCClientError) => {
|
||||||
|
@ -49,22 +69,28 @@ export class ListComponent implements OnInit, AfterContentInit {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngAfterContentInit() {
|
||||||
// Temporary Data
|
this.store.select(AuthSelector.select('domain')).subscribe(
|
||||||
this.noauthProbes = new Array();
|
(domain: Domain) => {
|
||||||
for (let i = 0; i < 10; i++) {
|
this.store.dispatch(new ListStore.ReadAllByDomain(domain));
|
||||||
const p: NoAuthProbe = {
|
}
|
||||||
id: i,
|
);
|
||||||
tempProbeKey: 'TempKey' + i,
|
|
||||||
createDate: new Date(),
|
|
||||||
description: 'Description' + i,
|
|
||||||
};
|
|
||||||
this.noauthProbes.push(p);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSelect(selected: NoAuthProbe) {
|
arrangeData(list) {
|
||||||
this.selected = selected;
|
if (!list || list.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.noauthProbes = [];
|
||||||
|
for (const np of list) {
|
||||||
|
const desc: NoauthProbeDesc = JSON.parse(np.description);
|
||||||
|
const result: NoauthProbeResult = {
|
||||||
|
id: np.id,
|
||||||
|
data: np,
|
||||||
|
meta: desc
|
||||||
|
};
|
||||||
|
this.noauthProbes.push(result);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onAcceptOrDeny(isAccept: boolean) {
|
onAcceptOrDeny(isAccept: boolean) {
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<h1>Notifications</h1>
|
<h1>Notifications</h1>
|
||||||
<div class="ui-g-12" dir="rtl">
|
<div class="ui-g-12" dir="rtl">
|
||||||
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
|
<button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
|
<p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
|
||||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||||
|
|
|
@ -34,6 +34,7 @@ export class NotificationComponent implements OnInit, AfterContentInit {
|
||||||
this.notification$.subscribe(
|
this.notification$.subscribe(
|
||||||
(page: Page) => {
|
(page: Page) => {
|
||||||
if (page !== null) {
|
if (page !== null) {
|
||||||
|
console.log(page);
|
||||||
this.notifications = page.content;
|
this.notifications = page.content;
|
||||||
this.totalLength = page.totalElements;
|
this.totalLength = page.totalElements;
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,7 +48,6 @@ export class ListComponent implements OnInit, AfterContentInit {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onRowSelect(event) {
|
onRowSelect(event) {
|
||||||
this.router.navigate(['probe', event.data.id, 'info']);
|
this.router.navigate(['probe', event.data.id, 'info']);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user