You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/06/23 16:06:31 UTC
[incubator-dlab] branch audit updated: [DLAB-1889]: Added
resource-type column and filter
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
The following commit(s) were added to refs/heads/audit by this push:
new 05d7f50 [DLAB-1889]: Added resource-type column and filter
05d7f50 is described below
commit 05d7f506f0fa9eb9d1beeb12495f9c224b6b1f47
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Jun 23 19:06:05 2020 +0300
[DLAB-1889]: Added resource-type column and filter
---
.../webapp/src/app/core/services/audit.service.ts | 11 +-
.../audit/audit-grid/audit-grid.component.html | 124 +++++++++++----------
.../audit/audit-grid/audit-grid.component.scss | 14 ++-
.../audit/audit-grid/audit-grid.component.ts | 9 +-
.../src/app/reports/audit/filter-audit.model.ts | 12 +-
.../webapp/src/app/shared/form-controls/index.ts | 17 +--
.../multi-select-dropdown.component.html | 6 +-
7 files changed, 103 insertions(+), 90 deletions(-)
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 9563c08..499c716 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
@@ -11,11 +11,14 @@ export class AuditService {
public getAuditData(filterData, page, itemsPrPage) {
let queryString = `?page-number=${page}&page-size=${itemsPrPage}`;
- if (filterData.project.length) {
- queryString += `&projects=${filterData.project.join(',')}`;
+ if (filterData.projects.length) {
+ queryString += `&projects=${filterData.projects.join(',')}`;
}
- if (filterData.resource.length) {
- queryString += `&resource-names=${filterData.resource.join(',')}`;
+ if (filterData.resources.length) {
+ queryString += `&resource-names=${filterData.resources.join(',')}`;
+ }
+ if (filterData.resource_types.length) {
+ queryString += `&resource_types=${filterData.resource_types.map(v => v.toLowerCase()).join(',')}`;
}
if (filterData.users.length) {
queryString += `&users=${filterData.users.join(',')}`;
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 93a6f08..faf6256 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
@@ -39,7 +39,7 @@
<div class="label"><span class="text">Project</span></div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
- <span *ngIf="filterAuditData.project.length > 0; else user_filtered">filter_list</span>
+ <span *ngIf="filterAuditData.projects.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
</i>
</button>
@@ -53,13 +53,60 @@
<div class="label"><span class="text">Resource type</span></div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
- <span *ngIf="filterAuditData.resource.length > 0; else user_filtered">filter_list</span>
+ <span *ngIf="filterAuditData.resource_types.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
</i>
</button>
</th>
- <td mat-cell *matCellDef="let element"><span class="table-item">{{element.resourceName || 'N/A'}}</span></td>
- <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ <td mat-cell *matCellDef="let element"><span class="table-item">{{element.type ? (element.type | convertaction) : 'N/A'}}</span></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer" [colSpan]="3" >
+ <div class="pagination-wrapper">
+ <div class="selected-items-wrapper">
+ <span>Items per page:</span>
+ <div class="select-wrapper">
+ <div class="mat-reset">
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label></mat-label>
+ <mat-select [(value)]="showItemsPrPage">
+ <mat-option *ngFor="let item of itemsPrPage" [value]="item" (click)="setItemsPrPage(item)">
+ {{ item }}</mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
+ </div>
+ </div>
+ </div>
+ <span>
+ <span>{{firstItem}}</span> - <span>{{(lastItem < allItems) ? lastItem: allItems}}</span> of <span>{{allItems}}</span>
+ </span>
+ <span>
+ <span [ngClass]="{'not-active': isNavigationDisabled || firstItem === 1}">
+ <span class="navigation-butts" (click)="loadItemsForPage('first')" [ngClass]="{'not-allowed': firstItem === 1 || isNavigationDisabled}">
+ <i class="material-icons">first_page</i>
+ </span>
+ </span>
+ <span [ngClass]="{'not-active': firstItem === 1 || isNavigationDisabled}">
+ <span class="navigation-butts" (click)="loadItemsForPage('previous')" [ngClass]="{'not-allowed': firstItem === 1 || isNavigationDisabled}">
+ <i class="material-icons">keyboard_arrow_left</i>
+ </span>
+ </span>
+ <span [ngClass]="{'not-active': lastItem >= allItems || isNavigationDisabled}">
+ <span class="navigation-butts" (click)="loadItemsForPage('next')" [ngClass]="{'not-allowed': lastItem >= allItems || isNavigationDisabled}">
+ <i class="material-icons">keyboard_arrow_right</i>
+ </span>
+ </span>
+ <span [ngClass]="{'not-active': lastItem >= allItems || isNavigationDisabled}">
+ <span class="navigation-butts" (click)="loadItemsForPage('last')" [ngClass]="{'not-allowed': lastItem >= allItems || isNavigationDisabled}">
+ <i class="material-icons">last_page</i>
+ </span>
+ </span>
+ </span>
+ </div>
+ </td>
</ng-container>
<ng-container matColumnDef="resource">
@@ -67,13 +114,15 @@
<div class="label"><span class="text">Resource</span></div>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
- <span *ngIf="filterAuditData.resource.length > 0; else user_filtered">filter_list</span>
+ <span *ngIf="filterAuditData.resources.length > 0; else user_filtered">filter_list</span>
<ng-template #user_filtered>more_vert</ng-template>
</i>
</button>
</th>
<td mat-cell *matCellDef="let element"><span class="table-item">{{element.resourceName || 'N/A'}}</span></td>
- <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true">
+
+ </td>
</ng-container>
<ng-container matColumnDef="action">
@@ -90,27 +139,7 @@
</div>
</div>
</td>
- <td mat-footer-cell *matFooterCellDef class="table-footer">
- <div class="selected-items-wrapper">
- <span>Items per page:</span>
- <div class="select-wrapper">
- <div class="mat-reset">
- <div class="control selector-wrapper">
- <mat-form-field>
- <mat-label></mat-label>
- <mat-select [(value)]="showItemsPrPage">
- <mat-option *ngFor="let item of itemsPrPage" [value]="item" (click)="setItemsPrPage(item)">
- {{ item }}</mat-option>
- </mat-select>
- <button class="caret">
- <i class="material-icons">keyboard_arrow_down</i>
- </button>
- </mat-form-field>
- </div>
- </div>
- </div>
- </div>
- </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
<ng-container matColumnDef="date">
@@ -119,42 +148,17 @@
</th>
<td mat-cell *matCellDef="let element"> {{element.timestamp | date: 'dd/MM/yyyy hh:mm:ss aa'}} </td>
<td mat-footer-cell *matFooterCellDef class="table-footer">
- <div class="pagination-wrapper">
- <span>
- <span>{{firstItem}}</span> - <span>{{(lastItem < allItems) ? lastItem: allItems}}</span> of <span>{{allItems}}</span>
- </span>
- <span>
- <span [ngClass]="{'not-active': isNavigationDisabled || firstItem === 1}">
- <span class="navigation-butts" (click)="loadItemsForPage('first')" [ngClass]="{'not-allowed': firstItem === 1 || isNavigationDisabled}">
- <i class="material-icons">first_page</i>
- </span>
- </span>
- <span [ngClass]="{'not-active': firstItem === 1 || isNavigationDisabled}">
- <span class="navigation-butts" (click)="loadItemsForPage('previous')" [ngClass]="{'not-allowed': firstItem === 1 || isNavigationDisabled}">
- <i class="material-icons">keyboard_arrow_left</i>
- </span>
- </span>
- <span [ngClass]="{'not-active': lastItem >= allItems || isNavigationDisabled}">
- <span class="navigation-butts" (click)="loadItemsForPage('next')" [ngClass]="{'not-allowed': lastItem >= allItems || isNavigationDisabled}">
- <i class="material-icons">keyboard_arrow_right</i>
- </span>
- </span>
- <span [ngClass]="{'not-active': lastItem >= allItems || isNavigationDisabled}">
- <span class="navigation-butts" (click)="loadItemsForPage('last')" [ngClass]="{'not-allowed': lastItem >= allItems || isNavigationDisabled}">
- <i class="material-icons">last_page</i>
- </span>
- </span>
- </span>
- </div>
</td>
</ng-container>
<ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef class="th_buttons label-header"></th>
<td mat-cell *matCellDef="let element"></td>
- <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer" [hidden]="true">
+ </td>
</ng-container>
+<!-- AUDIT FILTER-->
<ng-container matColumnDef="user-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'users'"
@@ -165,21 +169,21 @@
<ng-container matColumnDef="project-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'projects'"
- [items]="filterConfiguration.project" [model]="filterAuditData.project"></multi-select-dropdown>
+ [items]="filterConfiguration.projects" [model]="filterAuditData.projects"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="resource-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resources'"
- [items]="filterConfiguration.resource" [model]="filterAuditData.resource"></multi-select-dropdown>
+ [items]="filterConfiguration.resources" [model]="filterAuditData.resources"></multi-select-dropdown>
</th>
</ng-container>
<ng-container matColumnDef="resource-type-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resources'"
- [items]="filterConfiguration.resource" [model]="filterAuditData.resource"></multi-select-dropdown>
+ <multi-select-dropdown *ngIf="filterConfiguration" (selectionChange)="onUpdate($event)" [type]="'resource_types'"
+ [items]="filterConfiguration.resource_types" [model]="filterAuditData.resource_types"></multi-select-dropdown>
</th>
</ng-container>
@@ -208,7 +212,7 @@
</ng-container>
<ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef colspan="5" class="info">
+ <td mat-footer-cell *matFooterCellDef colspan="7" class="info">
<span *ngIf="!filterConfiguration.users?.length;else noMatch">No data available</span>
<ng-template #noMatch>
<span>No matches found</span>
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 bd3b8c6..125a404 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
@@ -32,27 +32,27 @@
tr {
.th_user {
- width: 18%;
+ width: 19%;
}
.th_action {
- width: 10%;
+ width: 11%;
}
.th_date {
- width: 13%;
+ width: 14%;
}
.th_project{
- width: 10%;
+ width: 11%;
}
.th_resource{
- width: 10%;
+ width: 11%;
}
.th_resource-type{
- width: 13%;
+ width: 14%;
}
.th_buttons{
@@ -257,6 +257,7 @@
display: flex;
align-items: center;
justify-content: space-between;
+ padding-right: 30px;
.navigation-butts{
cursor: pointer;
.not-active{
@@ -272,3 +273,4 @@
.audit-user{
padding-left: 14px;
}
+
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 77f8a44..d0f6e2d 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
@@ -33,8 +33,8 @@ export class AuditGridComponent implements OnInit {
public displayedColumns: string[] = ['date', 'user', 'action', 'project', 'resource-type', 'resource', 'buttons'];
public displayedFilterColumns: string[] = ['action-filter', 'user-filter', 'actions-filter', 'project-filter', 'resource-type-filter', 'resource-filter', 'filter-buttons'];
public collapseFilterRow: boolean = true;
- public filterConfiguration: FilterAuditModel = new FilterAuditModel([], [], [], [], '', '');
- public filterAuditData: FilterAuditModel = new FilterAuditModel([], [], [], [], '', '');
+ public filterConfiguration: FilterAuditModel = new FilterAuditModel([], [], [], [], [], '', '');
+ public filterAuditData: FilterAuditModel = new FilterAuditModel([], [], [], [], [], '', '');
public itemsPrPage: Number[] = [25, 50, 100];
public showItemsPrPage: number;
public firstItem: number = 1;
@@ -75,6 +75,7 @@ export class AuditGridComponent implements OnInit {
this.filterConfiguration = new FilterAuditModel(
auditData[0].user_filter.filter(v => v),
auditData[0].resource_name_filter.filter(v => v),
+ auditData[0].resource_type_filter.filter(v => v),
auditData[0].project_filter.filter(v => v),
[],
'',
@@ -188,9 +189,9 @@ export class AuditGridComponent implements OnInit {
.message-wrapper{min-height: 70px;; display: flex; align-items: center}
.mat-list-wrapper{padding-top: 5px;}
.list-item{color: #718ba6; height: auto; line-height: 20px;}
- .info-item-title{width: 35%; padding: 10px 0}
+ .info-item-title{width: 40%; padding: 10px 0}
.list-header {padding-top: 5px;}
- .info-item-data{width: 65%; text-align: left; padding: 10px 0}
+ .info-item-data{width: 60%; text-align: left; padding: 10px 0}
`]
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/filter-audit.model.ts b/services/self-service/src/main/resources/webapp/src/app/reports/audit/filter-audit.model.ts
index c26fdf7..b4b6845 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/filter-audit.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/filter-audit.model.ts
@@ -1,13 +1,14 @@
export class FilterAuditModel {
static getDefault(): FilterAuditModel {
- return new FilterAuditModel([], [],[],[], '', '');
+ return new FilterAuditModel([], [], [], [], [], '', '');
}
constructor(
public users: Array<string>,
- public resource: Array<string>,
- public project: Array<string>,
+ public resources: Array<string>,
+ public resource_types: Array<string>,
+ public projects: Array<string>,
public actions: Array<string>,
public date_start: string,
public date_end: string,
@@ -15,8 +16,9 @@ export class FilterAuditModel {
defaultConfigurations(): void {
this.users = [];
- this.project = [];
- this.resource = [];
+ this.projects = [];
+ this.resource_types = [];
+ this.resources = [];
this.actions = [];
this.date_start = '';
this.date_end = '';
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/index.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/index.ts
index 4ea5a14..4c8ef02 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/index.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/index.ts
@@ -23,7 +23,7 @@ import { CommonModule } from '@angular/common';
import { DropdownListComponent } from './dropdown-list/dropdown-list.component';
import { MultiSelectDropdownComponent } from './multi-select-dropdown/multi-select-dropdown.component';
import { DirectivesModule } from '../../core/directives';
-import { KeysPipeModule, UnderscorelessPipeModule } from '../../core/pipes';
+import {ConvertActionPipeModule, KeysPipeModule, UnderscorelessPipeModule} from '../../core/pipes';
import { BubbleModule } from '..';
import {MultiLevelSelectDropdownComponent} from './multi-level-select-dropdown/multi-level-select-dropdown.component';
@@ -31,13 +31,14 @@ export * from './multi-select-dropdown/multi-select-dropdown.component';
export * from './dropdown-list/dropdown-list.component';
@NgModule({
- imports: [
- CommonModule,
- DirectivesModule,
- KeysPipeModule,
- UnderscorelessPipeModule,
- BubbleModule
- ],
+ imports: [
+ CommonModule,
+ DirectivesModule,
+ KeysPipeModule,
+ UnderscorelessPipeModule,
+ BubbleModule,
+ ConvertActionPipeModule
+ ],
declarations: [DropdownListComponent, MultiSelectDropdownComponent, MultiLevelSelectDropdownComponent],
exports: [DropdownListComponent, MultiSelectDropdownComponent, MultiLevelSelectDropdownComponent]
})
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
index 60744c4..16c9a0f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html
@@ -19,7 +19,7 @@
<div class="dropdown-multiselect btn-group" ngClass="{{type || ''}}">
<button type="button" #list (click)="multiactions.toggle($event, list)">
- <span class="ellipsis" *ngIf="model.length === 0">Select {{type}}</span>
+ <span class="ellipsis" *ngIf="model.length === 0">Select {{type.replace('_', ' ')}}</span>
<span class="selected-items ellipsis" *ngIf="model.length !== 0">
Selected {{model.length}} item<strong *ngIf="model.length > 1">s</strong>
</span>
@@ -40,8 +40,8 @@
<li role="presentation" *ngIf="model">
<a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions($event, model, item)">
<span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span>
- <ng-container *ngIf="type[0] !== 'resource_type'">{{item}}</ng-container>
- <ng-container *ngIf="type[0] === 'resource_type'">{{item | titlecase}}</ng-container>
+ <ng-container *ngIf="type[0] !== 'resource_type' && type !== 'resource_types'">{{item}}</ng-container>
+ <ng-container *ngIf="type[0] === 'resource_type' || type === 'resource_types'">{{item | convertaction}}</ng-container>
</a>
</li>
</ng-template>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org