This is an automated email from the ASF dual-hosted git repository. dgnatyshyn pushed a commit to branch DLAB-1758 in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit b26657b80fbcad683d0095487f977d06519b3aec Author: Dmytro_Gnatyshyn <di1...@ukr.net> AuthorDate: Fri Jun 5 18:04:03 2020 +0300 [DLAB-1758]: Added info dialogs, log url clicks, added styles --- .../webapp/src/app/core/services/audit.service.ts | 6 ++ .../audit/audit-grid/audit-grid.component.html | 9 ++- .../audit/audit-grid/audit-grid.component.scss | 10 +++ .../audit/audit-grid/audit-grid.component.ts | 91 +++++++++++++++++++++- .../src/app/reports/audit/audit.component.ts | 4 +- .../webapp/src/app/reports/audit/audit.module.ts | 7 +- .../cluster-details/cluster-details.component.html | 2 +- .../cluster-details/cluster-details.component.ts | 4 + .../detail-dialog/detail-dialog.component.html | 6 +- .../detail-dialog/detail-dialog.component.ts | 4 + 10 files changed, 131 insertions(+), 12 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 faebecf..f699632 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 @@ -10,12 +10,18 @@ export class AuditService { public getAuditData() { 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 db3f6f0..d280224 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 @@ -78,7 +78,14 @@ </i> </button> </th> - <td mat-cell *matCellDef=" let element"> {{element.action}} </td> + <td mat-cell *matCellDef=" let element"> + <div class="action-wrapper"> + <span>{{element.action}}</span> + <div class="audit-info" (click)="openActionInfo(element)" *ngIf="element.info"> + <i class="material-icons">info</i> + </div> + </div> + </td> <td mat-footer-cell *matFooterCellDef class="table-footer"></td> </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 e9e44bc..09b1baa 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 @@ -208,6 +208,16 @@ } } + .action-wrapper{ + display: flex; + align-items: center; + .audit-info{ + color: lightgray; + cursor: pointer; + margin-left: 5px; + } + } + .dashboard_table_body { td:first-child { cursor: default; 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 34454ef..d18908c 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 @@ -17,8 +17,10 @@ * under the License. */ -import {Component, OnInit} from '@angular/core'; +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'; @Component({ selector: 'dlab-audit-grid', @@ -31,8 +33,14 @@ export class AuditGridComponent implements OnInit { public displayedColumns: string[] = ['user', 'project', 'resource', 'action', 'date']; public displayedFilterColumns: string[] = ['user-filter', 'project-filter', 'resource-filter', 'action-filter', 'date-filter']; public collapseFilterRow: boolean = true; - public filterConfiguration: FilterAuditModel = new FilterAuditModel([], [], [], [],'', ''); - public filterAuditData: FilterAuditModel = new FilterAuditModel([], [], [], [],'', ''); + public filterConfiguration: FilterAuditModel = new FilterAuditModel([], [], [], [], '', ''); + public filterAuditData: FilterAuditModel = new FilterAuditModel([], [], [], [], '', ''); + + constructor( + public dialogRef: MatDialogRef<AuditInfoDialogComponent>, + public dialog: MatDialog + ) { + } ngOnInit() {} @@ -47,4 +55,81 @@ export class AuditGridComponent implements OnInit { onUpdate($event): void { this.filterAuditData[$event.type] = $event.model; } + + openActionInfo(element) { + // console.log('Open audit info ' + action.action); + this.dialog.open(AuditInfoDialogComponent, { data: {data: element.info, action: element.action}, panelClass: 'modal-sm' }); + } +} + +@Component({ + selector: 'audit-info-dialog', + template: ` + <div id="dialog-box"> + <header class="dialog-header"> + <h4 class="modal-title">{{data.action}}</h4> + <button type="button" class="close" (click)="dialogRef.close()">×</button> + </header> + <div mat-dialog-content class="content"> + <ul info-items-list> + <li class="info-item"> + <span class="info-item-title">Group:</span> + <span class="info-item-data"> {{data.data.name}}</span> + </li> + <li class="info-item"> + <span class="info-item-title">Users:</span> + <span class="info-item-data"> + <span>{{data.data.objects}}</span> + </span> + </li> + </ul> + <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> + </div> + </div> + `, + styles: [` + .content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400; margin: 0; } + .info { color: #35afd5; } + .info .confirm-dialog { color: #607D8B; } + header { display: flex; justify-content: space-between; color: #607D8B; } + 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;} + .info-item{display: flex; justify-content: space-between; padding: 10px 0; width: 100%} + .info-item-title{width: 50%} + .info-item-data{width: 50%; text-align: left;} + + + `] +}) +export class AuditInfoDialogComponent { + constructor( + public dialogRef: MatDialogRef<AuditInfoDialogComponent>, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + console.log(data); + } + } diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts index b468141..4bdd0ee 100644 --- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts @@ -18,13 +18,15 @@ */ -import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; +import {Component, OnInit, OnDestroy, ViewChild, Inject} from '@angular/core'; import { ToastrService } from 'ngx-toastr'; import {HealthStatusService} from '../../core/services'; import { DICTIONARY} from '../../../dictionary/global.dictionary'; import {AuditToolbarComponent} from './audit-toolbar/audit-toolbar.component'; import {AuditGridComponent} from './audit-grid/audit-grid.component'; import {AuditService} from '../../core/services/audit.service'; +import {Endpoint} from '../../administration/project/project.component'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; @Component({ diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.module.ts b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.module.ts index abe259d..ae4d245 100644 --- a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.module.ts +++ b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.module.ts @@ -16,7 +16,6 @@ * specific language governing permissions and limitations * under the License. */ - import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @@ -25,7 +24,7 @@ import { MaterialModule } from '../../shared/material.module'; import { FormControlsModule } from '../../shared/form-controls'; import { KeysPipeModule, LineBreaksPipeModule } from '../../core/pipes'; import {AuditComponent} from './audit.component'; -import {AuditGridComponent} from './audit-grid/audit-grid.component'; +import {AuditGridComponent, AuditInfoDialogComponent} from './audit-grid/audit-grid.component'; import {AuditToolbarComponent} from './audit-toolbar/audit-toolbar.component'; @NgModule({ @@ -41,8 +40,10 @@ import {AuditToolbarComponent} from './audit-toolbar/audit-toolbar.component'; declarations: [ AuditGridComponent, AuditToolbarComponent, - AuditComponent + AuditComponent, + AuditInfoDialogComponent ], + entryComponents: [AuditInfoDialogComponent], exports: [AuditComponent] }) export class AuditModule { } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html index 04ea086..44718bd 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.html @@ -100,7 +100,7 @@ <div class="m-top-10"> <p *ngFor="let item of resource.computational_url" class="ellipsis flex"> <span class="strong">{{ item.description }}:</span> - <a href="{{item.url}}" target="_blank" matTooltip="{{item.url}}" + <a (click)="logAction(resource.computational_name, item.description)" href="{{item.url}}" target="_blank" matTooltip="{{item.url}}" matTooltipPosition="above">{{ item.url }}</a> </p> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts index 6180f96..20bb53a 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/cluster-details/cluster-details.component.ts @@ -115,4 +115,8 @@ export class DetailComputationalResourcesComponent implements OnInit { ? (control.value && control.value !== null && CheckUtils.isJSON(control.value) ? null : { valid: false }) : null; } + + private logAction(name: any, description: string) { + console.log(`${name}: ${description}`); + } } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html index b757c02..2095926 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.html @@ -45,8 +45,8 @@ <p *ngFor="let item of notebook.exploratory_urls"> <span class="description">{{item.description}}: </span> <a class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}" - target="_blank"> - {{item.url}} + target="_blank" (click)="logAction(notebook.name, item.description)"> + {{item.url}}{{notebook.name}} </a> </p> </div> @@ -60,7 +60,7 @@ <div class="links_block"> <p *ngFor="let item of notebook.url"> <span class="description">{{item.description}}: </span> - <a class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}" + <a (click)="logAction(notebook.name, item.description)" class="ellipsis" matTooltip="{{item.url}}" matTooltipPosition="above" href="{{item.url}}" target="_blank"> {{item.url}} </a> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts index f282d0d..f30189c 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.ts @@ -157,4 +157,8 @@ export class DetailDialogComponent implements OnInit { protected copyBucketName(copyValue) { CopyPathUtils.copyPath(copyValue); } + + private logAction(name: any, description: string) { + console.log(`${name}: ${description}`); + } } --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@dlab.apache.org For additional commands, e-mail: commits-h...@dlab.apache.org