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/05 15:04:33 UTC
[incubator-dlab] 02/02: [DLAB-1758]: Added info dialogs,
log url clicks, added styles
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 <di...@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-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org