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/04/28 15:09:22 UTC

[incubator-dlab] branch bucket-browser-gcp updated: [DLAB-1757]: Updated bucket browser according to roles

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch bucket-browser-gcp
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git


The following commit(s) were added to refs/heads/bucket-browser-gcp by this push:
     new 2153e48  [DLAB-1757]: Updated bucket browser according to roles
2153e48 is described below

commit 2153e488b6aa45b62c9611fdaff544003aec07cb
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Apr 28 18:09:00 2020 +0300

    [DLAB-1757]: Updated bucket browser according to roles
---
 .../administration/management/management.model.ts  |  1 +
 .../bucket-browser/bucket-browser.component.html   | 54 ++++++++++++++++++----
 .../bucket-browser/bucket-browser.component.scss   |  5 +-
 .../bucket-browser/bucket-browser.component.ts     |  6 ++-
 .../bucket-browser/bucket-data.service.ts          | 12 ++---
 .../folder-tree/folder-tree.component.ts           |  3 +-
 .../detail-dialog/detail-dialog.component.html     | 23 ++++++---
 .../detail-dialog/detail-dialog.component.scss     |  4 ++
 .../detail-dialog/detail-dialog.component.ts       | 19 ++++----
 .../resources-grid/resources-grid.component.ts     | 15 +++---
 .../multi-level-select-dropdown.component.ts       |  6 ++-
 11 files changed, 108 insertions(+), 40 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts
index b4f0701..2b2fdf3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.model.ts
@@ -75,6 +75,7 @@ export interface GeneralEnvironmentStatus {
   list_resources: any;
   status: string;
   projectAssigned: boolean;
+  bucketBrowser: object;
 }
 
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index 3feda30..1de656e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -22,11 +22,26 @@
     <h4 class="modal-title">Bucket browser</h4>
     <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
   </header>
-  
+
   <div class="dialog-content tabs" [hidden]="!path" >
     <div class="submit m-bott-10 m-top-10">
-      <button mat-raised-button type="button" class="butt action"><input type="file" (change)="handleFileInput($event)">Add file</button>
-      <button mat-raised-button type="button" class="butt action" (click)="folderTreeComponent.addNewItem(selectedFolder, '', false)">Create folder</button>
+      <span [matTooltip]="'You have not permission to upload data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
+        <button mat-raised-button type="button" class="butt action" [disabled]="!this.bucketStatus.upload">
+          <input [ngClass]="{'not-allowed': !this.bucketStatus.upload}" type="file" (change)="handleFileInput($event)">
+          Add file
+        </button>
+      </span>
+      <span [matTooltip]="'You have not permission to create folder'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
+        <button
+          mat-raised-button
+          type="button"
+          class="butt action"
+          (click)="folderTreeComponent.addNewItem(selectedFolder, '', false)"
+          [disabled]="!this.bucketStatus.upload"
+        >
+          Create folder
+        </button>
+      </span>
     </div>
     <p class="path"><span>Bucket path:</span><span class="url"> {{path}}</span></p>
     <div class="backet-wrapper" id="scrolling">
@@ -47,10 +62,10 @@
 
             <div class="folder-item-wrapper"  (click)="toggleSelectedFile(file)" *ngIf="!file.children">
               <div class="name name-file">
-                 <span class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file);$event.stopPropagation()" >
+                 <span *ngIf="this.bucketStatus.download || this.bucketStatus.download" class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file);$event.stopPropagation()" >
                     <span class="checked-checkbox" *ngIf="file.isSelected"></span>
                   </span>
-                <span class="item-name">{{file.item}}</span>
+                <span class="item-name" [ngClass]="{'removed-checkbox': !this.bucketStatus.download && !this.bucketStatus.download}">{{file.item}}</span>
               </div>
               <div class="size">{{file.size.size}}</div>
               <div class="size" *ngIf="!file.isDownloading">{{file.size.lastModifiedDate }}</div>
@@ -77,12 +92,35 @@
     </div>
     <div class="text-center m-top-30 m-bott-30">
       <button type="button" class="butt" mat-raised-button (click)="this.dialogRef.close()">Close</button>
-      <button *ngIf="!this.addedFiles.length" type="button" class="butt butt-success" mat-raised-button (click)="fileAction('download')" [disabled]="!selected?.length">Download</button>
-      <button *ngIf="!this.addedFiles.length" type="button" class="butt butt-success" mat-raised-button (click)="fileAction('delete')" [disabled]="!selected?.length">Delete</button>
+      <span [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
+       <button
+         *ngIf="!this.addedFiles.length"
+         type="button" class="butt butt-success"
+         mat-raised-button
+         (click)="fileAction('download')"
+         [disabled]="!selected?.length || !this.bucketStatus.download"
+       >
+         Download
+       </button>
+      </span>
+      <span [matTooltip]="'You have not permission to delete data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.delete}}">
+        <button
+          *ngIf="!this.addedFiles.length"
+          type="button"
+          class="butt butt-success"
+          mat-raised-button
+          (click)="fileAction('delete')"
+          [disabled]="!selected?.length || !this.bucketStatus.delete"
+
+        >
+        Delete
+      </button>
+      </span>
+
       <button *ngIf="this.addedFiles.length !== 0" type="button" class="butt butt-success" mat-raised-button (click)="uploadNewFile()">Upload</button>
     </div>
   </div>
-  
+
   <div class="loading-block" *ngIf="!path">
     <div class="uploading">
       <p>Please wait until DLab loads bucket: <span class="strong">{{data.bucket}}</span>...</p>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index bb16184..eb0c55e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -116,6 +116,9 @@
           padding-left: 4px;
           span.item-name{
             padding-left: 14px;
+            &.removed-checkbox{
+              padding-left: 0;
+            }
           }
         }
       }
@@ -219,7 +222,7 @@
     background-color: #35afd5;
   }
   .checked-checkbox {
-    top: 0px;
+    top: 0;
     left: 4px;
     width: 5px;
     height: 10px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
index cf6a23d..59e447f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
@@ -18,7 +18,7 @@
  */
 
 import { Component, OnInit, ViewChild, Inject } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder } from '@angular/forms';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
 import { ManageUngitService } from '../../core/services';
@@ -46,6 +46,7 @@ export class BucketBrowserComponent implements OnInit {
   private isUploading: boolean;
   private selected: any[];
   private uploadForm: FormGroup;
+  private bucketStatus: object;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -64,6 +65,7 @@ export class BucketBrowserComponent implements OnInit {
   ngOnInit() {
     this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
     this.endpoint = this.data.endpoint;
+    this.bucketStatus = this.data.bucketStatus;
     this.uploadForm = this.formBuilder.group({
       file: ['']
     });
@@ -131,7 +133,7 @@ export class BucketBrowserComponent implements OnInit {
     formData.append('endpoint', this.endpoint);
     this.isUploading = true;
     this.bucketBrowserService.uploadFile(formData)
-      .subscribe((event: any) => {
+      .subscribe(() => {
         this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
         this.addedFiles = [];
         this.isUploading = false;
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
index 7be63d4..f87c575 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
@@ -18,7 +18,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, of } from 'rxjs';
+import { BehaviorSubject} from 'rxjs';
 import {BucketBrowserService, TodoItemNode} from '../../core/services/bucket-browser.service';
 
 const array = [{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '4.txt', 'size': '18 bytes', 'creationDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '5.txt', 'size': '18 bytes', 'creationDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitled', 'size': '5 bytes', 'creationDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adasdas', 'size': '1 KB', 'creationDate': '15-4-2020 02:17 [...]
@@ -43,10 +43,10 @@ export class BucketDataService {
       this._bucketData.next(data);
     });
 
-    //   this.serverData = array;
-    //   backetData = this.convertToFolderTree(array);
-    //   const data = this.buildFileTree({[bucket]: backetData}, 0);
-    //   this._bucketData.next(data);
+      // this.serverData = array;
+      // backetData = this.convertToFolderTree(array);
+      // const data = this.buildFileTree({[bucket]: backetData}, 0);
+      // this._bucketData.next(data);
     // }
   }
   public buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
@@ -85,7 +85,7 @@ export class BucketDataService {
 
     public processFiles = (files, target) => {
       let pointer = target;
-      files.forEach((file, index) => {
+      files.forEach((file) => {
         if (!pointer[file]) {
           pointer[file] = {};
         }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
index 2e93cc1..179a4c1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
@@ -82,7 +82,6 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.folderTreeSubs.unsubscribe();
     this.bucketDataService._bucketData.next([]);
   }
 
@@ -197,7 +196,7 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
     }
     return null;
   }
-  
+
   private addNewItem(node: TodoItemFlatNode, file, isFile, path) {
     const parentNode = this.flatNodeMap.get(node);
     this.bucketDataService.insertItem(parentNode!, file, isFile);
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 9e669b6..cd39c46 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
@@ -60,18 +60,29 @@
                 class="strong">{{ notebook.password }}</span></p>
 
             <p class="m-top-30">{{ DICTIONARY[PROVIDER].personal_storage }}: &nbsp;</p>
-            <div class="links_block" (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint)">
+            <div class="links_block"
+                 (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view)"
+                 [matTooltip]="'You have not permission to open project bucket'"
+                 matTooltipDisabled="{{this.bucketStatus.view}}"
+                 matTooltipPosition="above"
+                 [ngClass]="{'not-allow': !this.bucketStatus.view}"
+            >
               <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY[PROVIDER].account }}
-                <span class="bucket-info">{{ notebook.account_name}}</span></p>
+                <span class="bucket-info" [ngClass]="{'not-allow': !this.bucketStatus.view}">{{ notebook.account_name}}</span></p>
               <p *ngIf="notebook.bucket_name">{{ DICTIONARY[PROVIDER].container }} <span
-                  class="bucket-info">{{ notebook.bucket_name }}</span></p>
+                  class="bucket-info" [ngClass]="{'not-allow': !this.bucketStatus.view}">{{ notebook.bucket_name }}</span></p>
             </div>
             <p>Shared endpoint bucket: &nbsp;</p>
-            <div class="links_block" (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint)">
+            <div class="links_block" (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus.view)"
+                 [matTooltip]="'You have not permission to open shared endpoint bucket'"
+                 matTooltipDisabled="{{this.bucketStatus.view}}"
+                 matTooltipPosition="above"
+                 [ngClass]="{'not-allow': !this.bucketStatus.view}"
+            >
               <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}
-                <span class="bucket-info">{{ notebook.shared_account_name}}</span></p>
+                <span class="bucket-info" [ngClass]="{'not-allow': !this.bucketStatus.view}">{{ notebook.shared_account_name}}</span></p>
               <p *ngIf="notebook.shared_bucket_name">{{ DICTIONARY[PROVIDER].container }}
-                <span class="bucket-info">{{ notebook.shared_bucket_name }}</span></p>
+                <span class="bucket-info" [ngClass]="{'not-allow': !this.bucketStatus.view}">{{ notebook.shared_bucket_name }}</span></p>
             </div>
             <br />
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
index 12be81b..24d273f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
@@ -88,3 +88,7 @@
   color: $blue-grey-color;
   cursor: pointer;
 }
+
+.not-allow{
+  cursor: not-allowed;
+}
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 ac5b6ba..ed359c8 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
@@ -36,12 +36,13 @@ import {BucketBrowserComponent} from '../../bucket-browser/bucket-browser.compon
 
 export class DetailDialogComponent implements OnInit {
   readonly DICTIONARY = DICTIONARY;
-  readonly PROVIDER = this.data.cloud_provider;
+  readonly PROVIDER = this.data.notebook.cloud_provider;
   notebook: any;
   upTimeInHours: number;
   upTimeSince: string = '';
   tooltip: boolean = false;
   config: Array<{}> = [];
+  bucketStatus: object = {};
 
   public configurationForm: FormGroup;
 
@@ -52,15 +53,15 @@ export class DetailDialogComponent implements OnInit {
     private dataengineConfigurationService: DataengineConfigurationService,
     private _fb: FormBuilder,
     public dialogRef: MatDialogRef<DetailDialogComponent>,
-    public toastr: ToastrService,
     private dialog: MatDialog,
+    public toastr: ToastrService,
   ) {
-    this.notebook = data;
+
   }
 
   ngOnInit() {
-    this.notebook;
-
+    this.bucketStatus = this.data.bucketStatus;
+    this.notebook = this.data.notebook;
     if (this.notebook) {
       this.tooltip = false;
 
@@ -98,7 +99,7 @@ export class DetailDialogComponent implements OnInit {
   public editClusterConfiguration(data): void {
     this.dataengineConfigurationService
       .editExploratorySparkConfiguration(data.configuration_parameters, this.notebook.project, this.notebook.name)
-      .subscribe(result => {
+      .subscribe(() => {
         this.dialogRef.close();
       },
         error => this.toastr.error(error.message || 'Edit onfiguration failed!', 'Oops!'));
@@ -123,8 +124,10 @@ export class DetailDialogComponent implements OnInit {
         : null;
   }
 
-  public bucketBrowser(bucketName, endpoint): void {
-  this.dialog.open(BucketBrowserComponent, { data: {bucket: bucketName, endpoint: endpoint}, panelClass: 'modal-fullscreen' })
+  public bucketBrowser(bucketName, endpoint, permition): void {
+    permition && this.dialog.open(BucketBrowserComponent, { data:
+        {bucket: bucketName, endpoint: endpoint, bucketStatus: this.bucketStatus},
+      panelClass: 'modal-fullscreen' })
     .afterClosed().subscribe();
   }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
index 3a7aabd..738059a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
@@ -168,7 +168,10 @@ export class ResourcesGridComponent implements OnInit {
   }
 
   public printDetailEnvironmentModal(data): void {
-    this.dialog.open(DetailDialogComponent, { data: data, panelClass: 'modal-lg' })
+    this.dialog.open(DetailDialogComponent, { data:
+        {notebook: data, bucketStatus: this.healthStatus.bucketBrowser},
+      panelClass: 'modal-lg'
+    })
       .afterClosed().subscribe(() => this.buildGrid());
   }
 
@@ -312,12 +315,12 @@ export class ResourcesGridComponent implements OnInit {
     this.displayedFilterColumns = this.displayedFilterColumns.filter(el => el !== 'cost-filter');
   }
 
-  private aliveStatuses(сonfig): void {
+  private aliveStatuses(config): void {
     for (const index in this.filterConfiguration) {
-      if (сonfig[index] && сonfig[index] instanceof Array)
-        сonfig[index] = сonfig[index].filter(item => this.filterConfiguration[index].includes(item));
+      if (config[index] && config[index] instanceof Array)
+        config[index] = config[index].filter(item => this.filterConfiguration[index].includes(item));
     }
-    return сonfig;
+    return config;
   }
 
   isActiveFilter(filterConfig): void {
@@ -344,7 +347,7 @@ export class ResourcesGridComponent implements OnInit {
 
   private updateUserPreferences(filterConfiguration: FilterConfigurationModel): void {
     this.userResourceService.updateUserPreferences(filterConfiguration)
-      .subscribe((result) => { },
+      .subscribe(() => { },
         (error) => console.log('UPDATE USER PREFERENCES ERROR ', error));
   }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
index 5b9c1a9..e4cca34 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
@@ -43,9 +43,13 @@ export class MultiLevelSelectDropdownComponent {
   public labels = {
     COMPUTATIONAL_SHAPE: 'Compute shapes',
     NOTEBOOK_SHAPE: 'Notebook shapes',
-    COMPUTATIONAL: 'Compute'
+    COMPUTATIONAL: 'Compute',
+    BUCKET_BROWSER: 'Bucket browser'
   };
 
+  constructor() {
+  }
+
   toggleSelectedOptions($event, model, value) {
     $event.preventDefault();
     const currRole = model.filter(v => v.role === value.role).length;


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org