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/05/22 16:15:15 UTC

[incubator-dlab] 01/01: [DLAB-1819]: Fixed bug with data reset while folder creating, limits bug, changed azure backetName, and other small fixes

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

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

commit ec98f2cc068346115b80a2141db2c5f5509aa120
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri May 22 19:12:53 2020 +0300

    [DLAB-1819]: Fixed bug with data reset while folder creating, limits bug, changed azure backetName, and other small fixes
---
 .../bucket-browser/bucket-browser.component.html   |  8 +--
 .../bucket-browser/bucket-browser.component.ts     | 41 ++++++++------
 .../bucket-browser/bucket-data.service.ts          | 23 +++++---
 .../folder-tree/folder-tree.component.ts           | 64 ++++++++++------------
 .../detail-dialog/detail-dialog.component.html     | 56 +++++++++++--------
 .../detail-dialog/detail-dialog.component.scss     |  4 +-
 .../detail-dialog/detail-dialog.component.ts       |  2 +
 .../src/app/resources/resources.component.html     |  5 +-
 .../webapp/src/assets/styles/_dialogs.scss         |  7 ++-
 9 files changed, 117 insertions(+), 93 deletions(-)

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 a64b3df..20d9437 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
@@ -166,7 +166,7 @@
               <div class="size size-folder">-</div>
               <div class="date" *ngIf="!file.isDownloading">-</div>
             </div>
-            <div class="folder-item-wrapper"  (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
+            <div class="folder-item-wrapper"  (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children && file.item !== 'ا'" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
               <div class="name name-file">
                  <span *ngIf="this.bucketStatus.download || this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file, 'file');$event.stopPropagation()" >
                     <span class="checked-checkbox" *ngIf="file.isSelected"></span>
@@ -184,8 +184,8 @@
                 </span>
               </div>
               <div class="size">{{file.object?.size | convertFileSize}}</div>
-              <div class="date" *ngIf="!file.isDownloading">{{convertDate(file.object?.lastModifiedDate) | date: 'dd/MM/yyyy hh:mm:ss aa'  }}</div>
-<!--              <div class="date" *ngIf="!file.isDownloading">{{file.object?.lastModifiedDate }}</div>-->
+<!--              <div class="date" *ngIf="!file.isDownloading">{{convertDate(file.object?.lastModifiedDate) | date: 'dd/MM/yyyy hh:mm:ss aa'  }}</div>-->
+              <div class="date" *ngIf="!file.isDownloading">{{file.object?.lastModifiedDate }}</div>
 
               <div class="progress-wrapper" *ngIf="file.isDownloading">
                 <div class="progres">
@@ -252,7 +252,7 @@
               <span *ngIf="file.status === 'failed'" class="error">Failed</span>
               <span *ngIf="file.status === 'waiting'" class="stopped">Waiting for uploading...</span>
             </div>
-            <div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">delete</i></div>
+            <div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
           </div>
         </li>
         <li id="upload-list"></li>
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 da40a18..8d236cd 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
@@ -63,6 +63,7 @@ export class BucketBrowserComponent implements OnInit {
   isFilterVisible: boolean;
   public buckets;
   private isFileUploading: boolean;
+  private isFileUploaded: boolean;
 
 
 
@@ -87,8 +88,6 @@ export class BucketBrowserComponent implements OnInit {
     this.endpoint = this.data.endpoint;
     this.bucketStatus = this.data.bucketStatus;
     this.buckets = this.data.buckets;
-    const time = [...'2-02-2020 10:57:02'.split(' ')[0].split('-').reverse(), ...'2-02-2020 10:57:02'.split(' ')[1].split(':')].map(v => + v);
-    this.convertDate('2020-05-19T18:47:10');
   }
 
   public showItem(item) {
@@ -120,10 +119,8 @@ export class BucketBrowserComponent implements OnInit {
   }
 
   public handleFileInput(event) {
-    console.log('handleFileInput');
     const fullFilesList = Object['values'](event.target.files);
     if (fullFilesList.length > 0) {
-      console.log('handleFileInputLength');
       const files = fullFilesList.filter(v => v.size < 4294967296);
       const toBigFile = fullFilesList.length !== files.length;
       const toMany = files.length > 50;
@@ -142,17 +139,12 @@ export class BucketBrowserComponent implements OnInit {
       }
     }
     event.target.value = '';
-    setTimeout(() => {
-      const element = document.querySelector('#upload-list');
-      element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
-    }, 0);
   }
 
   private async uploadingQueue(files) {
     if (files.length) {
       let askForAll = true;
       let skipAll = false;
-      console.log('uploadingQueue');
       // this.auth.refreshToken().subscribe();
       const folderFiles = this.folderItems.filter(v => !v.children).map(v => v.item);
       for (const file of files) {
@@ -181,7 +173,10 @@ export class BucketBrowserComponent implements OnInit {
         }
       }
     }
-
+    setTimeout(() => {
+      const element = document.querySelector('#upload-list');
+      element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+    }, 0);
   }
 
   async openResolveDialog(existFile) {
@@ -214,7 +209,7 @@ export class BucketBrowserComponent implements OnInit {
   }
 
   public filterObjects() {
-    this.folderItems = this.originFolderItems.filter(v => v.item.indexOf(this.searchValue) !== -1);
+    this.folderItems = this.originFolderItems.filter(v => v.item.toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1);
   }
 
   private clearSelection() {
@@ -254,27 +249,33 @@ export class BucketBrowserComponent implements OnInit {
   public sendFile(file?) {
     const waitUploading = this.addedFiles.filter(v => v.status === 'waiting');
     const uploading = this.addedFiles.filter(v => v.status === 'uploading');
-    this.isFileUploading = !!uploading.length;
-    this.isQueueFull = this.addedFiles.filter(v => v.status === 'uploading').length >= 9;
-    console.log(this.addedFiles.filter(v => v.status === 'uploading').length);
+    this.isQueueFull = !!waitUploading.length;
+    this.isFileUploading = !!this.addedFiles.filter(v => v.status === 'uploading').length;
     if (waitUploading.length && uploading.length < 10) {
       if (!file) {
         file = waitUploading[0];
       }
       file.status = 'uploading';
-      this.isFileUploading = true;
-      this.isQueueFull = this.addedFiles.filter(v => v.status === 'uploading').length === 10;
+      this.isQueueFull = !!this.addedFiles.filter(v => v.status === 'waiting').length;
       file.subscr =  file.request.subscribe((event: any) => {
           if (event.type === HttpEventType.UploadProgress) {
-            file.progress = Math.round(95 * event.loaded / event.total);
+             file.progress = Math.round(95 * event.loaded / event.total);
+            if (file.progress === 95 && !file.interval) {
+              file.interval = setInterval(() => {
+                if (file.progress < 99) {
+                  return file.progress++;
+                }
+              }, file.size < 1094967296 ? 12000 : 20000);
+            }
           } else if (event['type'] === HttpEventType.Response) {
-            console.log('upload response');
+            window.clearInterval(file.interval);
             file.status = 'uploaded';
             delete file.request;
             this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]);
             this.bucketDataService.refreshBucketdata(this.bucketName, this.data.endpoint);
           }
         }, error => {
+        window.clearInterval(file.interval);
           file.status = 'failed';
           delete file.request;
           this.sendFile(this.addedFiles.filter(v => v.status === 'waiting')[0]);
@@ -387,6 +388,10 @@ export class BucketBrowserComponent implements OnInit {
     const utcDate = new Date(date);
     return new Date(utcDate.setTime( utcDate.getTime() - utcDate.getTimezoneOffset() * 60 * 1000 ));
   }
+
+  // public toggleFileUploaded($event: any) {
+  //   this.isFileUploaded = $event;
+  // }
 }
 
 
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 9cbabec..003e615 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
@@ -31,6 +31,7 @@ export class BucketDataService {
   public _bucketData = new BehaviorSubject<any>(null);
   public serverData: any = [];
   get data(): TodoItemNode[] { return this._bucketData.value; }
+  emptyFolder = null;
   constructor(
     private bucketBrowserService: BucketBrowserService,
   ) {
@@ -39,8 +40,13 @@ export class BucketDataService {
   public refreshBucketdata(bucket, endpoint) {
     let backetData = [];
      this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
+     const copiedData = JSON.parse(JSON.stringify(v));
+
      this.serverData = v;
-     backetData = this.convertToFolderTree(v);
+     if (this.emptyFolder) {
+       copiedData.push(this.emptyFolder);
+     }
+     backetData = this.convertToFolderTree(copiedData);
      const data = this.buildFileTree({[bucket]: backetData}, 0);
      this._bucketData.next(data);
      });
@@ -77,12 +83,13 @@ export class BucketDataService {
       }, []);
     }
 
-  public insertItem(parent: TodoItemNode, name, isFile) {
+  public insertItem(parent: TodoItemNode, name, isFile, emptyFolderObj?) {
       if (parent.children) {
         if (isFile) {
           parent.children.push(name as TodoItemNode);
         } else {
-          parent.children.unshift({item: name ? name + '/' : name, children: []} as TodoItemNode);
+          parent.children.push({item: '', children: [], object: {}} as TodoItemNode);
+          this.emptyFolder = emptyFolderObj;
           this._bucketData.next(this.data);
         }
       }
@@ -93,8 +100,8 @@ export class BucketDataService {
       this._bucketData.next(this.data);
     }
 
-  public removeItem(parent) {
-     parent.children.shift();
+  public removeItem(parent, child) {
+     parent.children.splice( parent.children.indexOf(child), 1);
      this._bucketData.next(this.data);
     }
 
@@ -108,16 +115,15 @@ export class BucketDataService {
         if (!pointer.obj) {
           pointer.obj = object;
         }
-
       });
-    }
+    };
 
     public processFolderArray = (acc, curr) => {
       const files = curr.object.split('/');
       this.processFiles(files, acc, curr);
 
       return acc;
-    }
+    };
 
     public convertToFolderTree = (data) => {
       const finalData = data.reduce(this.processFolderArray, {});
@@ -126,5 +132,4 @@ export class BucketDataService {
       }
       return finalData;
     }
-
 }
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 0dffae3..177eca3 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
@@ -43,7 +43,6 @@ export class FolderTreeComponent implements OnDestroy {
   public treeControl: FlatTreeControl<TodoItemFlatNode>;
   private treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
   public dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;
-  private folderCreationParent;
 
   constructor(
     public toastr: ToastrService,
@@ -54,8 +53,6 @@ export class FolderTreeComponent implements OnDestroy {
     this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
     this.subscriptions.add(this.bucketDataService._bucketData.subscribe(data => {
-      // const emptyFolder = this.dataSource._flattenedData.getValue().filter(v => v.item === '')[0];
-      // console.log(emptyFolder);
       if (data) {
         this.dataSource.data = data;
         const subject = this.dataSource._flattenedData;
@@ -65,17 +62,12 @@ export class FolderTreeComponent implements OnDestroy {
           }
           this.expandAllParents(this.selectedFolder || subjectData[0]);
           this.showItem(this.selectedFolder || subjectData[0]);
-          // if (emptyFolder || this.folderFormControl.value) {
-          //   const folderName = this.folderFormControl.value;
-          //   this.folderFormControl.setValue('');
-          //   this.folderFormControl.updateValueAndValidity();
-          //   this.folderFormControl.markAsPristine();
-          //   console.log(this.folderCreationParent);
-          //   this.addNewItem(this.folderCreationParent, folderName, false);
-          // } else {
-          //   console.log('false');
-          //   this.disableAll.emit(false);
-          // }
+          if (this.selectedFolder) {
+            setTimeout(() => {
+              const element = document.querySelector('.folder-item-line.active-item');
+              element && element.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }, 0);
+          }
       }
     }));
     this.dataSource._flattenedData.subscribe();
@@ -89,7 +81,7 @@ export class FolderTreeComponent implements OnDestroy {
 
   hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;
 
-  hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
+  hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '' || _nodeData.item === 'ا';
 
   transformer = (node: TodoItemNode, level: number) => {
     const existingNode = this.nestedNodeMap.get(node);
@@ -102,7 +94,7 @@ export class FolderTreeComponent implements OnDestroy {
     this.flatNodeMap.set(flatNode, node);
     this.nestedNodeMap.set(node, flatNode);
     return flatNode;
-  };
+  }
 
   ngOnDestroy() {
     this.bucketDataService._bucketData.next([]);
@@ -180,25 +172,26 @@ export class FolderTreeComponent implements OnDestroy {
     return null;
   }
 
-  private addNewItem(node: TodoItemFlatNode, file, isFile) {
-    this.folderCreationParent = node;
-    this.folderCreationRefresh(node, file, isFile);
-  }
 
-  public folderCreationRefresh(node: TodoItemFlatNode, file, isFile) {
-    this.folderFormControl.setValue(file);
-    const currNode = this.flatNodeMap.get(node);
-    this.bucketDataService.insertItem(currNode!, file, isFile);
-    this.treeControl.expand(node);
-    setTimeout(() => {
-      const element = document.querySelector('#folder-form');
-      element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
-    }, 0);
+private addNewItem(node: TodoItemFlatNode, file, isFile) {
+  const currNode = this.flatNodeMap.get(node);
+  const emptyFolderObject = currNode.object;
+  if (emptyFolderObject.object.lastIndexOf('ا') !== emptyFolderObject.object.length - 1 || emptyFolderObject.object === '') {
+    emptyFolderObject.object += 'ا';
+  }
+  this.bucketDataService.insertItem(currNode!, file, isFile, emptyFolderObject);
+  this.treeControl.expand(node);
+  setTimeout(() => {
+    const element = document.querySelector('#folder-form');
+    element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+  }, 0);
   }
 
   private removeItem(node: TodoItemFlatNode) {
     const parentNode = this.flatNodeMap.get(this.getParentNode(node));
-    this.bucketDataService.removeItem(parentNode!);
+    const childNode = this.flatNodeMap.get(node);
+    this.bucketDataService.emptyFolder = null;
+    this.bucketDataService.removeItem(parentNode!, childNode);
     this.resetForm();
   }
 
@@ -206,13 +199,18 @@ export class FolderTreeComponent implements OnDestroy {
     this.folderCreating = true;
     const parent = this.getParentNode(node);
     const flatParent = this.flatNodeMap.get(parent);
-    const path = `${ flatParent.object ? flatParent.object.object : ''}${itemValue}/`;
+    let flatObject = flatParent.object.object;
+    if (flatObject.indexOf('ا') === flatObject.length - 1) {
+      flatObject = flatObject.substring(0, flatParent.object.object.length - 1);
+    }
+    const path = `${ flatParent.object ? flatObject : ''}${itemValue}/`;
     const bucket = flatParent.object ? flatParent.object.bucket : flatParent.item;
     const formData = new FormData();
     formData.append('file', '');
     formData.append('object', path);
     formData.append('bucket', bucket);
     formData.append('endpoint', this.endpoint);
+    this.bucketDataService.emptyFolder = null;
     this.bucketBrowserService.uploadFile(formData)
       .subscribe((event) => {
           if (event instanceof HttpResponse) {
@@ -220,13 +218,11 @@ export class FolderTreeComponent implements OnDestroy {
             this.toastr.success('Folder successfully created!', 'Success!');
             this.resetForm();
             this.folderCreating = false;
-            this.folderCreationParent = null;
             this.dataSource._flattenedData.getValue().splice(this.dataSource._flattenedData.getValue().indexOf(this.dataSource._flattenedData.getValue().filter(v => v.item === '')[0]));
           }
         }, error => {
-          this.toastr.error(error.message || 'Folder creation error!', 'Oops!');
           this.folderCreating = false;
-          this.folderCreationParent = null;
+          this.toastr.error(error.message || 'Folder creation error!', 'Oops!');
         }
       );
   }
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 59cdba2..50756cc 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
@@ -62,52 +62,60 @@
             <p class="m-top-30">{{ DICTIONARY[PROVIDER].personal_storage }}: &nbsp;</p>
             <!--                 (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view)"-->
             <div class="links_block" (mouseleave)="hideCopyIcon()">
-              <span
-                [matTooltip]="!this.bucketStatus.view
-                 ? 'You have not permission to open bucket'
-                 : 'The bucket ' + notebook.bucket_name + ' is deleted. To start working with data choose available bucket.'"
-                matTooltipDisabled="{{this.bucketStatus.view && this.isBucketAllowed}}"
-                matTooltipPosition="above"
-                [matTooltipClass]="'bucket-item-tooltip'"
-              >
                 <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY[PROVIDER].account }}
                   <span
-                    class="bucket-info bucket-link"
-                    [ngClass]="{'not-allow': !this.bucketStatus.view || !this.isBucketAllowed}"
+                    class="bucket-info"
                     (mouseover)="showCopyIcon()"
                   >
-                    {{ notebook.account_name}}
+                    {{notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'}}
+<!--                    rc-22-projecta-conteiner@1ebobsvx7t.blob.core.windows.net-->
+                  </span>
+
+                  <span  *ngIf="isCopyIconVissible" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above">
+                    <span  class="link-icon" (click)="copyBucketName(notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net');$event.stopPropagation()" >
+                    <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
                   </span>
-                  <span *ngIf="isCopyIconVissible" class="link-icon" (click)="copyBucketName(notebook.account_name)">
-                    <span class="material-icons" [matTooltip]="isCopied" matTooltipPosition="above">content_copy</span>
                   </span>
                 </p>
-                <p *ngIf="notebook.bucket_name">{{ DICTIONARY[PROVIDER].container }}
+                <p *ngIf="notebook.bucket_name && PROVIDER !== 'azure'">{{ DICTIONARY[PROVIDER].container }}
                   <span
                     class="bucket-info"
                     (mouseover)="showCopyIcon()"
                   >
-<!--                    (click)="bucketBrowser('ofuks-1304-pr2-local-bucket', notebook.endpoint, this.bucketStatus.view && this.isBucketAllowed)"-->
                     {{ notebook.bucket_name }}
                 </span>
-
                   <span  *ngIf="isCopyIconVissible" [matTooltip]="isCopied ? 'Copy bucket name' : 'Copied'" matTooltipPosition="above">
                     <span  class="link-icon" (click)="copyBucketName(notebook.bucket_name);$event.stopPropagation()" >
                     <span _ngcontent-xpv-c19="" class="material-icons" (click)="this.isCopied = false">content_copy</span>
                   </span>
                   </span>
-
                 </p>
-              </span>
             </div>
             <div class="bucket-info bucket-link">
               <span></span>
-              <span class="description open-bucket"
-                 [ngClass]="{'not-allow': !this.bucketStatus.view || !this.isBucketAllowed}"
-                (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view && this.isBucketAllowed)"
-              >
-                Open bucket browser
-              </span>
+<!--              <button-->
+<!--                type="button"-->
+<!--                class="butt"-->
+<!--                mat-raised-button-->
+<!--              >-->
+<!--                Open bucket browser-->
+<!--              </button>-->
+<!--              <span class="description open-bucket"-->
+<!--                 [ngClass]="{'not-allow': !this.bucketStatus.view || !thisdata.buckets.length}"-->
+<!--                (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view && thisdata.buckets.length)"-->
+<!--              >-->
+                <span class="description open-bucket"
+                      [matTooltip]="!this.bucketStatus.view
+                 ? 'You have not permission to open bucket'
+                 : 'You have not any bucket'"
+                      matTooltipDisabled="{{this.bucketStatus.view && this.data.buckets.length}}"
+                      matTooltipPosition="above"
+                      [matTooltipClass]="'bucket-item-tooltip'"
+                      [ngClass]="{'not-allow': !this.bucketStatus.view || !this.data.buckets.length}"
+                      (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view && this.data.buckets.length)"
+                >
+                  Open bucket browser
+                </span>
             </div>
 <!--            <p>Shared endpoint bucket: &nbsp;</p>-->
 <!--            <div class="links_block" (click)="bucketBrowser(notebook.shared_bucket_name, notebook.endpoint, this.bucketStatus.view)"-->
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 2779633..c6722ef 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
@@ -83,6 +83,7 @@
 
 .bucket-info {
   padding-left: 7px;
+  margin-right: 10px;
   font-weight: 600;
   color: $blue-grey-color;
 }
@@ -93,10 +94,11 @@
   color: #35afd5;
   .open-bucket{
     cursor: pointer;
+    font-size: 14px;
   }
   &.not-allow{
     cursor: not-allowed;
-    color: $blue-grey-color;
+    color: $blue-grey-color !important;
   }
 }
 
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 b78ee1e..c972a5d 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
@@ -135,6 +135,8 @@ export class DetailDialogComponent implements OnInit {
   }
 
   public bucketBrowser(bucketName, endpoint, permition): void {
+    bucketName = 'ofuks-1304-pr2-local-bucket';
+    // bucketName = this.isBucketAllowed ? this.notebook.bucket_name : this.data.buckets[0].children[0].name;
     permition && this.dialog.open(BucketBrowserComponent, { data:
         {bucket: bucketName, endpoint: endpoint, bucketStatus: this.bucketStatus, buckets: this.data.buckets},
       panelClass: 'modal-fullscreen' })
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
index 1236d13..513d7fe 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.html
@@ -48,10 +48,11 @@
     <div>
       <span  matTooltip="{{!this.bucketStatus?.view ? 'You have not permission to open bucket browser' : 'You have not any bucket'}}"
              matTooltipPosition="above"
-             matTooltipDisabled="{{resourcesGrid.bucketsList?.length > 0 || !this.bucketStatus?.view}}"
+             matTooltipDisabled="{{resourcesGrid.bucketsList?.length > 0 && this.bucketStatus?.view}}"
              [matTooltipClass]="'bucket-item-tooltip'"
       >
-        <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser(this.bucketStatus?.view)" [disabled]="!this.bucketStatus?.view || resourcesGrid.bucketsList?.length === 0">
+        <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser(this.bucketStatus?.view)"
+                [disabled]="!this.bucketStatus?.view || resourcesGrid.bucketsList?.length === 0">
         <i class="material-icons"></i>Bucket browser
       </button>
       </span>
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 3dddb7d..ccde6f7 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
@@ -276,8 +276,10 @@ mat-dialog-container {
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
+    max-width: 450px;
+    white-space: nowrap;
     &.link-icon{
-      margin-left: 10px;
+      //margin-left: 10px;
       cursor: pointer;
       padding-top: 3px;
     }
@@ -397,6 +399,9 @@ mat-dialog-container {
 
 .not-allow{
   cursor: not-allowed !important;
+  &.open-bucket{
+    color: $blue-grey-color !important;
+  }
 }
 
 


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