This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch audit
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit e044d811ec80dfffefb7c5aa01985c5bfa7b96e0
Author: Dmytro_Gnatyshyn <di1...@ukr.net>
AuthorDate: Fri Jun 19 18:56:53 2020 +0300
Connected UI pagination, filtration with BA
---
.../services/applicationServiceFacade.service.ts | 4 +-
.../webapp/src/app/core/services/audit.service.ts | 40 +++----
.../audit/audit-grid/audit-grid.component.html | 47 ++++++--
.../audit/audit-grid/audit-grid.component.scss | 4 +
.../audit/audit-grid/audit-grid.component.ts | 129 +++++++++------------
.../webapp/src/assets/styles/_dialogs.scss | 4 +
.../resources/webapp/src/assets/styles/_theme.scss | 6 +-
7 files changed, 127 insertions(+), 107 deletions(-)
diff --git
a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
index 7f125b3..b125b6f 100644
---
a/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/core/services/applicationServiceFacade.service.ts
@@ -628,10 +628,10 @@ export class ApplicationServiceFacade {
null);
}
- public getAuditList(): Observable<any> {
+ public getAuditList(data): Observable<any> {
return this.buildRequest(HTTPMethod.GET,
this.requestRegistry.Item(ApplicationServiceFacade.AUDIT),
- null);
+ data);
}
public postActionToAudit(data): Observable<any> {
diff --git
a/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
b/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
index 70d1f17..9563c08 100644
---
a/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/core/services/audit.service.ts
@@ -7,12 +7,28 @@ import {ErrorUtils} from '../util';
providedIn: 'root'
})
export class AuditService {
- constructor(private applicationServiceFacade: ApplicationServiceFacade) {
- }
+ constructor(private applicationServiceFacade: ApplicationServiceFacade) { }
+
+ public getAuditData(filterData, page, itemsPrPage) {
+ let queryString = `?page-number=${page}&page-size=${itemsPrPage}`;
+ if (filterData.project.length) {
+ queryString += `&projects=${filterData.project.join(',')}`;
+ }
+ if (filterData.resource.length) {
+ queryString += `&resource-names=${filterData.resource.join(',')}`;
+ }
+ if (filterData.users.length) {
+ queryString += `&users=${filterData.users.join(',')}`;
+ }
+ if (filterData.date_start) {
+ queryString += `&date-start=${filterData.date_start}`;
+ }
+ if (filterData.date_end) {
+ queryString += `&date-end=${filterData.date_end}`;
+ }
- public getAuditData() {
return this.applicationServiceFacade
- .getAuditList()
+ .getAuditList(queryString)
.pipe(
map(response => response),
catchError(ErrorUtils.handleServiceError));
@@ -25,20 +41,4 @@ export class AuditService {
map(response => response),
catchError(ErrorUtils.handleServiceError));
}
- // return [
- // {user: 'Dlab-test-user1', action: 'Deleted users from group',
project: '', date: new Date().toLocaleString(), info: {name: 'admin', objects:
['user1', 'user2', 'user3', 'Dlab-test-user1', 'Dlab-test-user1',
'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1']}},
- // {user: 'Dlab-test-user1', action: 'Created project', project:
'ProjectA', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Created project', project:
'ProjectA', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Created project', project:
'ProjectA', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user2', action: 'Created notebook ', project:
'ProjectA', resource: 'Rstudio', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Deleted user to group', project:
'', date: new Date().toLocaleString(), info: {name: 'admin', objects: ['user1',
'user2', 'user3', 'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1',
'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1']}},
- // {user: 'Dlab-test-user1', action: 'Stopped notebook', project:
'ProjectA', resource: 'Rstudio', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Started notebook', project:
'ProjectA', resource: 'Rstudio', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Deleted Users from group',
project: '', date: new Date().toLocaleString(), info: {name: 'admin', objects:
['user1', 'user2', 'user3', 'Dlab-test-user1', 'Dlab-test-user1',
'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1']}},
- // {user: 'Dlab-test-user3', action: 'Created EMR', project: 'ProjectA',
resource: 'Rstudio:Emr1', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Created notebook', project:
'ProjectA', resource: 'Rstudio', date: new Date().toLocaleString()},
- // {user: 'Dlab-test-user1', action: 'Deleted user to group', project:
'', date: new Date().toLocaleString(), info: {name: 'admin', objects: ['user1',
'user2', 'user3', 'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1',
'Dlab-test-user1', 'Dlab-test-user1', 'Dlab-test-user1']}},
- // {user: 'Dlab-test-user2', action: 'Terminated notebook', project:
'ProjectA', resource: 'Rstudio', date: new Date().toLocaleString()},
- // ];
-
}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
index acb9f45..c18b82e 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
@@ -121,20 +121,28 @@
<td mat-footer-cell *matFooterCellDef class="table-footer">
<div class="pagination-wrapper">
<span>
- <span>{{firstItem}}</span> - <span>{{lastItem}}</span> of
<span>{{auditData?.length}}</span>
+ <span>{{firstItem}}</span> - <span>{{(lastItem < allItems) ?
lastItem: allItems}}</span> of <span>{{allItems}}</span>
</span>
<span>
- <span class="navigation-butts" [ngClass]="{'not-active': firstItem
=== 1}" (click)="loadItems('first')">
- <i class="material-icons">first_page</i>
+ <span [ngClass]="{'not-active': firstItem === 1}">
+ <span class="navigation-butts" (click)="loadItems('first')"
[ngClass]="{'not-allowed': firstItem === 1}">
+ <i class="material-icons">first_page</i>
+ </span>
</span>
- <span class="navigation-butts" [ngClass]="{'not-active': firstItem
=== 1}" (click)="loadItems('previous')">
- <i class="material-icons">keyboard_arrow_left</i>
+ <span [ngClass]="{'not-active': firstItem === 1}">
+ <span class="navigation-butts" (click)="loadItems('previous')"
[ngClass]="{'not-allowed': firstItem === 1}">
+ <i class="material-icons">keyboard_arrow_left</i>
+ </span>
</span>
- <span class="navigation-butts" [ngClass]="{'not-active': lastItem
>= auditData?.length}" (click)="loadItems('next')">
- <i class="material-icons">keyboard_arrow_right</i>
+ <span [ngClass]="{'not-active': lastItem >= allItems}">
+ <span class="navigation-butts" (click)="loadItems('next')"
[ngClass]="{'not-allowed': lastItem >= allItems}">
+ <i class="material-icons">keyboard_arrow_right</i>
+ </span>
</span>
- <span class="navigation-butts" [ngClass]="{'not-active': lastItem
>= auditData?.length}" (click)="loadItems('last')">
- <i class="material-icons">last_page</i>
+ <span [ngClass]="{'not-active': lastItem >= allItems}">
+ <span class="navigation-butts" (click)="loadItems('last')"
[ngClass]="{'not-allowed': lastItem >= allItems}">
+ <i class="material-icons">last_page</i>
+ </span>
</span>
</span>
</div>
@@ -162,15 +170,30 @@
</th>
</ng-container>
- <ng-container matColumnDef="action-filter">
+ <ng-container matColumnDef="actions-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<!-- <multi-select-dropdown *ngIf="filterConfiguration"
(selectionChange)="onUpdate($event)" [type]="'actions'"-->
<!-- [items]="filterConfiguration.actions"
[model]="filterAuditData.actions"></multi-select-dropdown>-->
</th>
</ng-container>
- <ng-container matColumnDef="date-filter">
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+<!-- <ng-container matColumnDef="date-filter">-->
+<!-- <th mat-header-cell *matHeaderCellDef class="filter-row-item">-->
+
+<!-- </th>-->
+<!-- </ng-container>-->
+ <ng-container matColumnDef="action-filter" stickyEnd>
+ <th mat-header-cell *matHeaderCellDef>
+ <div class="actions audit-actions">
+<!-- <button mat-icon-button class="btn reset"
(click)="resetFilterConfigurations()" [disabled]="filteredEnvironments.length
== 0 && !filtering">-->
+ <button mat-icon-button class="btn reset"
(click)="resetFilterConfigurations()">
+ <i class="material-icons">close</i>
+ </button>
+ <button mat-icon-button class="btn apply" (click)="refreshAudit()">
+<!-- [disabled]="filteredEnvironments.length == 0 &&
!filtering">-->
+ <i class="material-icons">done</i>
+ </button>
+ </div>
</th>
</ng-container>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
index 2daf193..10e1184 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
@@ -256,3 +256,7 @@
}
}
}
+
+.audit-actions{
+ text-align: right;
+}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
index 49c9d5a..107574c 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
@@ -19,27 +19,27 @@
import {Component, Inject, OnInit} from '@angular/core';
import {FilterAuditModel} from '../filter-audit.model';
-import {NotificationDialogComponent} from
'../../../shared/modal-dialog/notification-dialog';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from
'@angular/material/dialog';
import {AuditService} from '../../../core/services/audit.service';
@Component({
selector: 'dlab-audit-grid',
templateUrl: './audit-grid.component.html',
- styleUrls: ['./audit-grid.component.scss'],
+ styleUrls: ['./audit-grid.component.scss',
'../../../resources/resources-grid/resources-grid.component.scss'],
})
export class AuditGridComponent implements OnInit {
public auditData: Array<object>;
public displayedColumns: string[] = ['user', 'project', 'resource',
'action', 'date'];
- public displayedFilterColumns: string[] = ['user-filter', 'project-filter',
'resource-filter', 'action-filter', 'date-filter'];
+ public displayedFilterColumns: string[] = ['user-filter', 'project-filter',
'resource-filter', 'actions-filter', 'action-filter'];
public collapseFilterRow: boolean = true;
public filterConfiguration: FilterAuditModel = new FilterAuditModel([], [],
[], [], '', '');
public filterAuditData: FilterAuditModel = new FilterAuditModel([], [], [],
[], '', '');
public itemsPrPage: Number[] = [25, 50, 100];
- public showItemsPrPage: number = 25;
+ public showItemsPrPage: number;
public firstItem: number = 1;
- public lastItem: number = this.showItemsPrPage;
+ public lastItem: number;
+ public allItems: number;
constructor(
@@ -52,37 +52,36 @@ export class AuditGridComponent implements OnInit {
ngOnInit() {}
public refreshAudit() {
- this.auditService.getAuditData().subscribe(auditData => {
- this.auditData = auditData;
- this.createFilterData(this.auditData);
- });
+ if (!this.showItemsPrPage) {
+ if (window.localStorage.getItem('audit_per_page')) {
+ this.showItemsPrPage = +window.localStorage.getItem('audit_per_page');
+ } else {
+ this.showItemsPrPage = 50;
+ }
+ this.lastItem = this.showItemsPrPage;
+ }
+ this.getAuditData();
}
- public setAvaliblePeriod(period) {
- this.filterConfiguration.date_start = period.start_date;
- this.filterConfiguration.date_end = period.end_date;
+ public getAuditData() {
+ const page = Math.ceil(this.lastItem / this.showItemsPrPage);
+ this.auditService.getAuditData(this.filterAuditData, page,
this.showItemsPrPage).subscribe(auditData => {
+ this.auditData = auditData[0].audit;
+ this.allItems = auditData[0]['page_count'];
+ this.filterConfiguration = new FilterAuditModel(
+ auditData[0].user_filter,
+ auditData[0].resource_name_filter,
+ auditData[0].project_filter,
+ [],
+ '',
+ ''
+ );
+ });
}
- public createFilterData (auditData) {
- const users = [];
- const resource = [];
- const project = [];
- const actions = [];
- auditData.forEach(auditItem => {
- if (auditItem.user && !users.includes(auditItem.user)) {
- users.push(auditItem.user);
- }
- if (auditItem.resourceName &&
!resource.includes(auditItem.resourceName)) {
- resource.push(auditItem.resourceName);
- }
- if (auditItem.project && !project.includes(auditItem.project)) {
- project.push(auditItem.project);
- }
- if (auditItem.action && !actions.includes(auditItem.action)) {
- actions.push(auditItem.action);
- }
- });
- this.filterConfiguration = new FilterAuditModel(users, resource, project
|| [], actions, '', '');
+ public setAvaliblePeriod(period) {
+ this.filterAuditData.date_start = period.start_date;
+ this.filterAuditData.date_end = period.end_date;
}
toggleFilterRow(): void {
@@ -94,12 +93,16 @@ export class AuditGridComponent implements OnInit {
}
openActionInfo(element) {
- // console.log('Open audit info ' + action.action);
- this.dialog.open(AuditInfoDialogComponent, { data: {data: element.info,
action: element.action}, panelClass: 'modal-xl-s' });
+ this.dialog.open(AuditInfoDialogComponent, { data: {data: element.info,
action: element.action}, panelClass: 'modal-xl-m' });
}
public setItemsPrPage(item: number) {
- this.lastItem = item;
+ window.localStorage.setItem('audit_per_page', item.toString());
+ this.firstItem = 1;
+ if (this.lastItem !== item) {
+ this.lastItem = item;
+ this.refreshAudit();
+ }
}
public loadItems(action) {
@@ -111,11 +114,18 @@ export class AuditGridComponent implements OnInit {
this.lastItem = this.lastItem % this.showItemsPrPage === 0 ?
this.lastItem - this.showItemsPrPage : this.lastItem - (this.lastItem %
this.showItemsPrPage);
} else if (action === 'next') {
this.firstItem = this.firstItem + this.showItemsPrPage;
- this.lastItem = (this.lastItem + this.showItemsPrPage) >
this.auditData.length ? this.auditData.length : this.lastItem +
this.showItemsPrPage;
+ this.lastItem = (this.lastItem + this.showItemsPrPage) > this.allItems ?
this.allItems : this.lastItem + this.showItemsPrPage;
} else if (action === 'last') {
- this.firstItem = this.auditData.length % this.showItemsPrPage === 0 ?
this.auditData.length - this.showItemsPrPage : this.auditData.length -
(this.auditData.length % this.showItemsPrPage) + 1;
- this.lastItem = this.auditData.length;
+ this.firstItem = this.allItems % this.showItemsPrPage === 0 ?
this.allItems - this.showItemsPrPage : this.allItems - (this.allItems %
this.showItemsPrPage) + 1;
+ this.lastItem = this.allItems;
}
+ this.refreshAudit();
+ }
+
+ resetFilterConfigurations() {
+ this.filterAuditData = FilterAuditModel.getDefault();
+ this.refreshAudit();
+ console.log(this.filterAuditData);
}
}
@@ -128,12 +138,7 @@ export class AuditGridComponent implements OnInit {
<button type="button" class="close"
(click)="dialogRef.close()">×</button>
</header>
<div mat-dialog-content class="content audit-info-content">
-<!-- <ul info-items-list *ngIf=" dattypeofa.data.length>1;else
message">-->
<mat-list *ngIf="actionList[0].length > 1;else message">
-<!-- <li class="info-item">-->
-<!-- <span class="info-item-title">Action</span>-->
-<!-- <span class="info-item-data"> Description </span>-->
-<!-- </li>-->
<mat-list-item class="list-header">
<div class="info-item-title">Action</div>
<div class="info-item-data"> Description </div>
@@ -147,14 +152,11 @@ export class AuditGridComponent implements OnInit {
</mat-list-item>
</div>
</mat-list>
- <ng-template #message><p>{{data.data}}.</p></ng-template>
-<!-- <p >{{data.data}}</p>-->
- <div class="text-center m-top-30 m-bott-10">
-<!-- <button type="button" class="butt" mat-raised-button
(click)="dialogRef.close()">No</button>-->
-<!-- <button type="button" class="butt butt-success"
mat-raised-button-->
-<!-- (click)="dialogRef.close(true)">Yes-->
-<!-- </button>-->
- </div>
+ <ng-template #message>
+ <div class="message-wrapper">
+ <p>{{data.data}}.</p>
+ </div>
+ </ng-template>
</div>
</div>
`,
@@ -166,27 +168,13 @@ export class AuditGridComponent implements OnInit {
header h4 i { vertical-align: bottom; }
header a i { font-size: 20px; }
header a:hover i { color: #35afd5; cursor: pointer; }
- .plur { font-style: normal; }
.scrolling-content{overflow-y: auto; max-height: 200px; }
- .endpoint { width: 70%; text-align: left; color: #577289;}
- .status { width: 30%;text-align: left;}
- .label { font-size: 15px; font-weight: 500; font-family: "Open
Sans",sans-serif;}
- .node { font-weight: 300;}
- .resource-name { width: 280px;text-align: left; padding: 10px
0;line-height: 26px;}
- .project { width: 30%;text-align: left; padding: 10px 0;line-height: 26px;}
- .resource-list{max-width: 100%; margin: 0 auto;margin-top: 20px; }
- .resource-list-header{display: flex; font-weight: 600; font-size:
16px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid
#edf1f5; padding: 0 20px;}
- .resource-list-row{display: flex; border-bottom: 1px solid
#edf1f5;padding: 0 20px;}
- .confirm-resource-terminating{text-align: left; padding: 10px 20px;}
- .confirm-message{color: #ef5c4b;font-size: 13px;min-height: 18px;
text-align: center; padding-top: 20px}
- .checkbox{margin-right: 5px;vertical-align: middle; margin-bottom: 3px;}
label{cursor: pointer}
- .bottom-message{padding-top: 15px;}
- .table-header{padding-bottom: 10px;}
+ .message-wrapper{height: 100%; display: flex; align-items: center}
.mat-list-wrapper{padding-top: 5px;}
- .list-item{color: #718ba6; height: auto;}
- .info-item-title{width: 40%; padding: 10px 0}
- .info-item-data{width: 60%; text-align: left; padding: 10px 0}
+ .list-item{color: #718ba6; height: auto; line-height: 20px;}
+ .info-item-title{width: 35%; padding: 10px 0}
+ .info-item-data{width: 65%; text-align: left; padding: 10px 0}
`]
@@ -197,8 +185,7 @@ export class AuditInfoDialogComponent {
public dialogRef: MatDialogRef<AuditInfoDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
- this.actionList = data.data.split('.').map(v => v.split(':')).filter(v =>
v[0] !== '');
- console.log(this.actionList);
+ this.actionList = data.data.split('\n').map(v => v.split(':')).filter(v =>
v[0] !== '');
}
}
diff --git
a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
index c10f66d..0720db0 100644
---
a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
+++
b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
@@ -39,6 +39,10 @@
width: 660px;
}
+.modal-xl-m {
+ width: 715px;
+}
+
.modal-xl {
width: 900px;
}
diff --git
a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index deb477e..454315d 100644
---
a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++
b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -92,7 +92,7 @@
display: flex;
align-self: center;
width: 100%;
- height: 25px;
+ height: 36px;
padding-left: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
@@ -138,8 +138,10 @@
.mat-reset{
.selector-wrapper{
height: 25px;
+
.mat-form-field .mat-form-field-wrapper .mat-form-field-infix{
- padding-top: 5px;
+ padding-top: 6px;
+ font-size: 13px;
}
.caret {
width: 25px;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org
For additional commands, e-mail: commits-h...@dlab.apache.org
