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/14 14:51:08 UTC

[incubator-dlab] branch DLAB-1738 created (now 9dd41b6)

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

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


      at 9dd41b6  [DLAB-1738]: Added multi bucket support

This branch includes the following new commits:

     new 9dd41b6  [DLAB-1738]: Added multi bucket support

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



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


[incubator-dlab] 01/01: [DLAB-1738]: Added multi bucket support

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 9dd41b624187c3c09e9a2c47d6ee3dfad8a8ddef
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Thu May 14 17:50:44 2020 +0300

    [DLAB-1738]: Added multi bucket support
---
 .../bucket-browser/bucket-browser.component.html   | 37 +++++-----
 .../bucket-browser/bucket-browser.component.ts     | 19 +++--
 .../buckets-tree/bucket-tree.component.html        |  6 +-
 .../buckets-tree/bucket-tree.component.scss        |  5 ++
 .../buckets-tree/bucket-tree.component.ts          | 80 +++++++++++++---------
 .../detail-dialog/detail-dialog.component.html     |  2 +-
 .../detail-dialog/detail-dialog.component.ts       |  3 +-
 .../resources-grid/resources-grid.component.ts     | 19 ++++-
 .../resources-grid/resources-grid.model.ts         |  4 ++
 .../src/app/resources/resources.component.html     |  6 +-
 .../src/app/resources/resources.component.ts       | 13 +++-
 .../webapp/src/assets/styles/_dialogs.scss         |  4 ++
 12 files changed, 130 insertions(+), 68 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 c6b1d17..d8c109e 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
@@ -24,11 +24,11 @@
   </header>
 
 <!--  <div class="dialog-content tabs">-->
-  <div class="dialog-content tabs" [hidden]="!path">
+  <div class="dialog-content tabs">
     <div class="submit m-bott-10 m-top-10">
       <div class="left-side-butts">
       <span [matTooltip]="'You have not permission to upload data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
-        <button mat-raised-button type="button" class="butt first-btn" [disabled]="!this.bucketStatus.upload || allDisable || isSelectionOpened" (click)="handleFileInput($event)">
+        <button mat-raised-button type="button" class="butt first-btn" [disabled]="!this.bucketStatus.upload || allDisable || isSelectionOpened || !path" (click)="handleFileInput($event)">
           <input [ngClass]="{'not-allowed': !this.bucketStatus.upload}" type="file" (change)="handleFileInput($event)" title="" multiple>
           Upload files
         </button>
@@ -39,7 +39,7 @@
           type="button"
           class="butt"
           (click)="createFolder(selectedFolder)"
-          [disabled]="!this.bucketStatus.upload || allDisable"
+          [disabled]="!this.bucketStatus.upload || allDisable || !path"
         >
           Create folder
         </button>
@@ -50,7 +50,7 @@
           class="butt"
           mat-raised-button
           (click)="fileAction('delete')"
-          [disabled]="(!selected?.length && !selectedFolderForAction?.length) || !this.bucketStatus.delete || allDisable"
+          [disabled]="(!selected?.length && !selectedFolderForAction?.length) || !this.bucketStatus.delete || allDisable || !path"
         >
         Delete
       </button>
@@ -60,7 +60,7 @@
           <button
             type="button" class="butt actions-btn"
             mat-raised-button
-            [disabled]=" selectedItems?.length !== 1 || allDisable"
+            [disabled]=" selectedItems?.length !== 1 || allDisable || !path"
             (click)="toogleActions();$event.stopPropagation()"
           >
             Actions <i class="material-icons" >{{ !isActionsOpen ?  'expand_more' : 'expand_less' }}</i>
@@ -70,7 +70,7 @@
           <button
             type="button" class="butt action-menu-item"
             mat-raised-button
-            [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable"
+            [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable "
             (click)="fileAction('download');$event.stopPropagation()"
           >
             Download
@@ -94,7 +94,6 @@
       >
         <i class="material-icons">autorenew</i>Refresh
       </button>
-
     </div>
     <p class="path"><span>Bucket path:</span>
     <span class="url ellipsis">
@@ -118,13 +117,14 @@
           <i (click)="toggleBucketSelection()" class="material-icons close">{{isSelectionOpened ? 'chevron_left' : 'chevron_right'}}</i>
         </div>
         <dlab-bucket-tree
-          *ngIf="isSelectionOpened"
-          (emitActiveBucket)=onFolderClick($event)
+          [hidden] = "!isSelectionOpened"
+          (emitActiveBucket)=openBucket($event)
+          [buckets]='buckets'
           [openedBucket] = this.bucketName
         >
         </dlab-bucket-tree>
       </div>
-      <div class="navigation" [ngClass]="{'selection-opened': isSelectionOpened}">
+      <div class="navigation" [ngClass]="{'selection-opened': isSelectionOpened}" [hidden]="!path">
         <dlab-folder-tree
           (showFolderContent)=onFolderClick($event)
           (disableAll) = dissableAll($event)
@@ -132,7 +132,7 @@
           [endpoint] = endpoint
         > </dlab-folder-tree>
       </div>
-      <div class="directory" [ngClass]="{'selection-opened': isSelectionOpened}">
+      <div class="directory" [ngClass]="{'selection-opened': isSelectionOpened}" [hidden]="!path">
         <div class="folder-item t_header">
           <div class="folder-item-wrapper header-wrapper folder-tree header-item">
             <div class="name">
@@ -202,6 +202,12 @@
           </li>
         </ul>
       </div>
+      <div class="loading-block" *ngIf="!path">
+        <div class="uploading">
+          <p>Please wait until DLab loads bucket: <span class="strong">{{data.bucket}}</span>...</p>
+          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        </div>
+      </div>
     </div>
     <div class="upload-window" *ngIf="addedFiles.length">
       <header class="upload-header">
@@ -242,14 +248,5 @@
         <li id="upload-list"></li>
       </ul>
     </div>
-<!--    <div class="text-center m-top-30 m-bott-20">-->
-<!--      <button type="button" class="butt" mat-raised-button (click)="this.dialogRef.close()">Close</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>
-      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    </div>
   </div>
 </div>
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 5f549a2..03e0c42 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
@@ -44,7 +44,6 @@ export class BucketBrowserComponent implements OnInit {
   public pathInsideBucket = '';
   public bucketName = '';
   public endpoint = '';
-  public isUploadWindowOpened = false;
   public selectedFolder: any;
   public selectedFolderForAction: any;
   public selected: any[];
@@ -58,6 +57,7 @@ export class BucketBrowserComponent implements OnInit {
   @ViewChild(FolderTreeComponent, {static: true}) folderTreeComponent;
   public isSelectionOpened: any;
   isFilterVisible: boolean;
+  public buckets;
 
 
 
@@ -75,9 +75,11 @@ export class BucketBrowserComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
+    this.bucketName = this.data.bucket;
+    this.bucketDataService.refreshBucketdata(this.bucketName, this.data.endpoint);
     this.endpoint = this.data.endpoint;
     this.bucketStatus = this.data.bucketStatus;
+    this.buckets = this.data.buckets;
   }
 
   public showItem(item) {
@@ -173,7 +175,7 @@ export class BucketBrowserComponent implements OnInit {
       this.path = event.path;
       this.originFolderItems = this.folderItems.map(v => v);
       this.pathInsideBucket = this.path.indexOf('/') !== -1 ?  this.path.slice(this.path.indexOf('/') + 1) + '/' : '';
-      this.bucketName = this.path.substring(0, this.path.indexOf('/')) || this.path;
+      // this.bucketName = this.path.substring(0, this.path.indexOf('/')) || this.path;
       this.folderItems.forEach(item => item.isSelected = false);
     }
   }
@@ -218,7 +220,16 @@ export class BucketBrowserComponent implements OnInit {
   }
 
   public refreshBucket() {
-    this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
+    this.path = '';
+    this.bucketDataService.refreshBucketdata(this.bucketName, this.data.endpoint);
+    this.isSelectionOpened = false;
+  }
+
+  public openBucket($event) {
+    this.bucketName = $event.name;
+    this.path = '';
+    this.bucketDataService.refreshBucketdata(this.bucketName, $event.endpoint);
+    this.isSelectionOpened = false;
   }
 
   public createFolder(folder) {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html
index ba3f2a3..d80891d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.html
@@ -1,5 +1,9 @@
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="17" (click)="openBucketData(node)" [ngClass]="{'active-item': activeBucket === node}">
+  <mat-tree-node
+    *matTreeNodeDef="let node"
+    matTreeNodePadding matTreeNodePaddingIndent="17"
+    (click)="openBucketData(node)"
+    [ngClass]="{'active-item': activeBacket === node, 'd-none': !node.name}">
     <button mat-icon-button disabled></button>
     {{node.name}}
   </mat-tree-node>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss
index 202d4e0..fd06d7a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.scss
@@ -92,6 +92,11 @@
   .mat-error {
     background-color: #ffffff;
   }
+
+  .d-none{
+    display: none;
+  }
+
 }
 
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts
index 56ef4cc..b093a84 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/buckets-tree/bucket-tree.component.ts
@@ -2,36 +2,20 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
 
-interface FoodNode {
+
+interface BucketNode {
   name: string;
-  children?: FoodNode[];
+  endpoint?: string;
+  children?: BucketNode[];
 }
 
-const TREE_DATA: FoodNode[] = [
-      {
-        name: 'ProjectA(local)',
-        children: [
-          {name: 'vi-aws-11-05-projectb-local-bucket.'},
-          {name: 'ad-aws-11-05-projectb-local-bucket.'},
-        ]
-      }, {
-        name: 'ProjectA(local1)',
-        children: [
-          {name: 'rt-aws-11-05-projectb-local-bucket.'},
-          {name: 'rt-aws-11-05-projectb-local-bucket.'},
-        ]
-      },
-    ];
-
 /** Flat node with expandable and level information */
-interface ExampleFlatNode {
+interface BucketFlatNode {
   expandable: boolean;
   name: string;
   level: number;
 }
 
-
-
 @Component({
   selector: 'dlab-bucket-tree',
   templateUrl: './bucket-tree.component.html',
@@ -39,20 +23,20 @@ interface ExampleFlatNode {
 })
 
 export class BucketTreeComponent implements OnInit {
-  public activeBucket;
-
   @Output() emitActiveBucket: EventEmitter<{}> = new EventEmitter();
   @Input() openedBucket: string;
+  @Input() buckets: BucketNode[];
 
-  private _transformer = (node: FoodNode, level: number) => {
+  private _transformer = (node: BucketNode, level: number) => {
     return {
       expandable: !!node.children && node.children.length > 0,
       name: node.name,
+      endpoint: node.endpoint,
       level: level,
     };
   }
 
-  treeControl = new FlatTreeControl<ExampleFlatNode>(
+  treeControl = new FlatTreeControl<BucketFlatNode>(
     node => node.level, node => node.expandable);
 
   treeFlattener = new MatTreeFlattener(
@@ -60,22 +44,52 @@ export class BucketTreeComponent implements OnInit {
 
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
   private activeBucketName: string;
+  private activeBacket: any;
 
   constructor() {
-    this.dataSource.data = TREE_DATA;
   }
 
   ngOnInit() {
     this.activeBucketName = this.openedBucket || '';
-    // console.log(this.activeBucketName);
-    // console.log(...this.dataSource._flattenedData.getValue().filter(v => v.name === this.activeBucketName));
+    this.dataSource.data = this.buckets;
+    this.setActiveBucket();
   }
-
   public openBucketData(bucket) {
-    this.treeControl.expand(bucket);
-    this.activeBucket = bucket;
-    // console.log(bucket);
+    this.setActiveBucket(bucket);
+    this.emitActiveBucket.emit(bucket);
+  }
+
+  public setActiveBucket(bucket?) {
+    this.activeBacket = bucket || this.dataSource._flattenedData.getValue().filter(v => v.name === this.openedBucket)[0];
+    this.expandAllParents(this.activeBacket);
+  }
+
+  private expandAllParents(el) {
+    if (el) {
+      this.treeControl.expand(el);
+      if (this.getParentNode(el) !== null) {
+        this.expandAllParents(this.getParentNode(el));
+      }
+    }
+  }
+
+  private getParentNode(node: BucketFlatNode): BucketFlatNode | null {
+    const currentLevel = node.level;
+    if (currentLevel < 1) {
+      return null;
+    }
+
+    const startIndex = this.treeControl.dataNodes.indexOf(node) - 1;
+
+    for (let i = startIndex; i >= 0; i--) {
+      const currentNode = this.treeControl.dataNodes[i];
+
+      if (currentNode.level < currentLevel) {
+        return currentNode;
+      }
+    }
+    return null;
   }
 
-  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
+  public hasChild = (_: number, node: BucketFlatNode) => node.expandable;
 }
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 024bb1e..4d77b72 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,7 +62,7 @@
             <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"
-                 (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view && this.isBucketAllowed)"
+                 (click)="bucketBrowser('ofuks-1304-pr2-local-bucket', notebook.endpoint, this.bucketStatus.view && this.isBucketAllowed)"
             >
               <span
                 [matTooltip]="!this.bucketStatus.view
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 d228f8d..829b22f 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
@@ -70,7 +70,6 @@ export class DetailDialogComponent implements OnInit {
       this.upTimeSince = (this.notebook.time) ? new Date(this.notebook.time).toString() : '';
       this.initFormModel();
       this.getClusterConfiguration();
-    console.log(this.notebook.edgeNodeStatus);
     if (this.notebook.edgeNodeStatus === 'terminated' ||
       this.notebook.edgeNodeStatus === 'terminating' ||
       this.notebook.edgeNodeStatus === 'failed'){
@@ -133,7 +132,7 @@ export class DetailDialogComponent implements OnInit {
 
   public bucketBrowser(bucketName, endpoint, permition): void {
     permition && this.dialog.open(BucketBrowserComponent, { data:
-        {bucket: bucketName, endpoint: endpoint, bucketStatus: this.bucketStatus},
+        {bucket: bucketName, endpoint: endpoint, bucketStatus: this.bucketStatus, buckets: this.data.buckets},
       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 738059a..4aa1fa1 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
@@ -89,6 +89,7 @@ export class ResourcesGridComponent implements OnInit {
 
   public displayedColumns: string[] = this.filteringColumns.map(item => item.name);
   public displayedFilterColumns: string[] = this.filteringColumns.map(item => item.filter_class);
+  public bucketsList;
 
 
   constructor(
@@ -100,6 +101,7 @@ export class ResourcesGridComponent implements OnInit {
 
   ngOnInit(): void {
     this.buildGrid();
+
   }
 
   public buildGrid(): void {
@@ -107,6 +109,7 @@ export class ResourcesGridComponent implements OnInit {
     this.userResourceService.getUserProvisionedResources()
       .subscribe((result: any) => {
         this.environments = ExploratoryModel.loadEnvironments(result);
+        this.getBuckets();
         this.getDefaultFilterConfiguration();
         (this.environments.length) ? this.getUserPreferences() : this.filteredEnvironments = [];
         this.healthStatus && !this.healthStatus.billingEnabled && this.modifyGrid();
@@ -169,7 +172,7 @@ export class ResourcesGridComponent implements OnInit {
 
   public printDetailEnvironmentModal(data): void {
     this.dialog.open(DetailDialogComponent, { data:
-        {notebook: data, bucketStatus: this.healthStatus.bucketBrowser},
+        {notebook: data, bucketStatus: this.healthStatus.bucketBrowser, buckets: this.bucketsList},
       panelClass: 'modal-lg'
     })
       .afterClosed().subscribe(() => this.buildGrid());
@@ -330,6 +333,20 @@ export class ResourcesGridComponent implements OnInit {
       if (filterConfig[index].length) this.activeFiltering = true;
   }
 
+  public getBuckets() {
+    const bucketsList = this.environments.map(project => {
+      return Object.keys(project.projectEndpoints).map(key => {
+        const currEndpoint = project.projectEndpoints[key];
+        const provider: string =  project.endpoints.filter(endpoint => endpoint['name'] === key)[0]['cloudProvider'];
+        return {name: `${project.project}(${key})`, children: [
+            {name: currEndpoint[this.DICTIONARY[provider.toLowerCase()].bucket_name], endpoint: key},
+            {name: currEndpoint[DICTIONARY[provider.toLowerCase()].shared_bucket_name], endpoint: key}
+          ]};
+      });
+    });
+    this.bucketsList = SortUtils.flatDeep(bucketsList, 1);
+  }
+
   private getUserPreferences(): void {
     this.userResourceService.getUserPreferences()
       .subscribe((result: FilterConfigurationModel) => {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
index e769dbe..c4ad5800 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.model.ts
@@ -58,6 +58,8 @@ export class ExploratoryModel {
       return data.map((value) => {
         return {
           project: value.project,
+          projectEndpoints: value.shared,
+          endpoints: value.endpoints,
           exploratory: value.exploratory.map(el => {
             const provider = el.cloud_provider.toLowerCase();
             const billing = value.exploratoryBilling.filter(res => res.name === el.exploratory_name)[0];
@@ -101,5 +103,7 @@ export class ExploratoryModel {
 
 export interface Exploratory {
   project: string;
+  endpoints: [];
+  projectEndpoints: [];
   exploratory: ExploratoryModel[];
 }
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 545412d..06c6f7f 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
@@ -46,9 +46,9 @@
     </div>
 
     <div>
-<!--      <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser()">-->
-<!--        <i class="material-icons"></i>Bucket browser-->
-<!--      </button>-->
+      <button mat-raised-button class="butt butt-tool" (click)="bucketBrowser('ofuks-1304-pr2-local-bucket', 'local', true)">
+        <i class="material-icons"></i>Bucket browser
+      </button>
       <button mat-raised-button class="butt butt-tool" (click)="manageUngit()">
         <i class="material-icons"></i>Git credentials
       </button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
index 7933fec..50b6c9d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.component.ts
@@ -41,6 +41,7 @@ export class ResourcesComponent implements OnInit {
   projects: Project[] = [];
 
   @ViewChild(ResourcesGridComponent, { static: true }) resourcesGrid: ResourcesGridComponent;
+  private bucketStatus: ((bucketName, endpoint, permition) => void) | Object;
 
   constructor(
     public toastr: ToastrService,
@@ -52,6 +53,7 @@ export class ResourcesComponent implements OnInit {
   ngOnInit() {
     this.getEnvironmentHealthStatus();
     this.exploratoryEnvironments = this.resourcesGrid.environments;
+
   }
 
   public createEnvironment(): void {
@@ -65,6 +67,8 @@ export class ResourcesComponent implements OnInit {
     this.exploratoryEnvironments = this.resourcesGrid.environments;
   }
 
+
+
   public toggleFiltering(): void {
     if (this.resourcesGrid.activeFiltering) {
       this.resourcesGrid.resetFilterConfigurations();
@@ -78,9 +82,11 @@ export class ResourcesComponent implements OnInit {
       .afterClosed().subscribe(() => this.refreshGrid());
   }
 
-  public bucketBrowser(): void {
-    this.dialog.open(BucketBrowserComponent, { panelClass: 'modal-fullscreen' })
-      .afterClosed().subscribe(() => this.refreshGrid());
+  public bucketBrowser(bucketName, endpoint, permition): void {
+      permition && this.dialog.open(BucketBrowserComponent, { data:
+        {bucket: this.resourcesGrid.bucketsList[0].children[0].name, endpoint: endpoint, bucketStatus: this.bucketStatus, buckets: this.resourcesGrid.bucketsList},
+      panelClass: 'modal-fullscreen' })
+      .afterClosed().subscribe();
   }
 
   public setActiveProject(project): void {
@@ -106,6 +112,7 @@ export class ResourcesComponent implements OnInit {
       (result: any) => {
         this.healthStatus = result;
         this.resourcesGrid.healthStatus = this.healthStatus;
+        this.bucketStatus = this.healthStatus.bucketBrowser;
       },
       error => this.toastr.error(error.message, 'Oops!'));
   }
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 571de23..b0ee3a0 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
@@ -358,6 +358,10 @@ mat-dialog-container {
   height: 30px;
 }
 
+.d-none{
+  display: none !important;
+}
+
 
 @media screen and (max-width: 1280px) {
   .modal-fullscreen {


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