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/11 17:31:00 UTC
[incubator-dlab] branch develop updated: [DLAB-1773]: Make
breadCramp clickable, filter by name, the Action button (#724)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
The following commit(s) were added to refs/heads/develop by this push:
new ba00e4f [DLAB-1773]: Make breadCramp clickable, filter by name, the Action button (#724)
ba00e4f is described below
commit ba00e4ff4abbcca08933a34b5d1fdaa895adc4cc
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Mon May 11 20:30:50 2020 +0300
[DLAB-1773]: Make breadCramp clickable, filter by name, the Action button (#724)
[DLAB-1773]: Make breadCramp clickable, filter by name, the Action button
---
.../bucket-browser/bucket-browser.component.html | 134 ++++++++++++++-------
.../bucket-browser/bucket-browser.component.scss | 85 ++++++++++++-
.../bucket-browser/bucket-browser.component.ts | 45 ++++++-
.../bucket-confirmation-dialog.component.html | 22 ++--
.../bucket-confirmation-dialog.component.scss | 12 +-
.../bucket-browser/bucket-data.service.ts | 13 +-
.../folder-tree/folder-tree.component.ts | 7 +-
.../detail-dialog/detail-dialog.component.html | 21 ++--
.../detail-dialog/detail-dialog.component.ts | 7 ++
.../webapp/src/app/resources/resources.module.ts | 20 +--
.../webapp/src/app/shared/material.module.ts | 3 +-
.../src/assets/img/blank-file-svgrepo-com.svg | 41 +++++++
.../webapp/src/assets/styles/_dialogs.scss | 5 +
13 files changed, 326 insertions(+), 89 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 760a02d..e38fadd 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
@@ -17,17 +17,17 @@
~ under the License.
-->
-<div class="bucket-browser" id="dialog-box">
+<div class="bucket-browser" id="dialog-box" (click)="closeActions()">
<header class="dialog-header">
<h4 class="modal-title">Bucket browser</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
</header>
<!-- <div class="dialog-content tabs">-->
- <div class="dialog-content tabs" [hidden]="!path" >
+ <div class="dialog-content tabs" [hidden]="!path">
<div class="submit m-bott-10 m-top-10">
<span [matTooltip]="'You have not permission to upload data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
- <button mat-raised-button type="button" class="butt action first-btn" [disabled]="!this.bucketStatus.upload || allDisable">
+ <button mat-raised-button type="button" class="butt action first-btn" [disabled]="!this.bucketStatus.upload || allDisable" (click)="handleFileInput($event)">
<input [ngClass]="{'not-allowed': !this.bucketStatus.upload}" type="file" (change)="handleFileInput($event)" title="" multiple>
Upload files
</button>
@@ -55,20 +55,86 @@
</button>
</span>
- <span [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
- <button
- type="button" class="butt"
- mat-raised-button
- (click)="fileAction('download')"
- [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable"
- >
- Download
- </button>
- </span>
+<!-- <div [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">-->
+<!-- <button-->
+<!-- type="button" class="butt"-->
+<!-- mat-raised-button-->
+<!-- (click)="fileAction('download')"-->
+<!-- [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable"-->
+<!-- >-->
+<!-- Download-->
+<!-- </button>-->
+<!-- </div>-->
+
+ <div class="action-wrapper" [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
+ <span class="action-button-wrapper">
+ <button
+ type="button" class="butt actions-btn"
+ mat-raised-button
+ [disabled]=" selectedItems?.length !== 1 || allDisable"
+ (click)="toogleActions();$event.stopPropagation()"
+ >
+ Actions <i class="material-icons" >{{ !isActionsOpen ? 'expand_more' : 'expand_less' }}</i>
+ </button>
+ </span>
+ <div class="action-menu" *ngIf="isActionsOpen">
+ <button
+ type="button" class="butt action-menu-item"
+ mat-raised-button
+ [disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable"
+ (click)="fileAction('download');$event.stopPropagation()"
+ >
+ Download
+ </button>
+ <button
+ type="button" class="butt action-menu-item"
+ mat-raised-button
+ (click)="copyPath();$event.stopPropagation()"
+ >
+ Copy path
+ </button>
+ </div>
+ </div>
+
+ </div>
+ <p class="path"><span>Bucket path:</span>
+ <span class="url ellipsis">
+ <span *ngFor="let folder of this.objectPath">
+ <span class="url-icon" *ngIf="this.objectPath.indexOf(folder) !== 0"> <i class="material-icons">
+ chevron_right
+ </i> </span>
+ <span class="url-folder" (click)="folderTreeComponent.showItem(folder);">{{folder.item}}</span>
+ </span>
+ </span></p>
+
+ <div class="navigation-line">
+ <div class="endpoint-select selection">
+ <div class="mat-reset">
+ <div class="control selector-wrapper">
+ <mat-form-field>
+ <mat-label>{{bucketName}}</mat-label>
+ <mat-select [(value)]="bucketName">
+<!-- <mat-option *ngIf="projects.length > 1" (click)="setActiveProject()">Show all</mat-option>-->
+<!-- <mat-option *ngFor="let project of projects" [value]="project.name"-->
+<!-- (click)="setActiveProject(project.name)">-->
+<!-- {{ project.name }}</mat-option>-->
+ <mat-option class="multiple-select ml-10" disabled>Bucket list is empty
+ </mat-option>
+ </mat-select>
+ <button class="caret">
+ <i class="material-icons">keyboard_arrow_down</i>
+ </button>
+ </mat-form-field>
+ </div>
+ </div>
+ </div>
+ <div class="filter-files">
+ <input _ngcontent-yns-c13="" [(ngModel)]="searchValue" (keyup)=filterObjects($event) class="form-control filter-field" placeholder="Filter by name" type="text">
+ </div>
</div>
- <p class="path"><span>Bucket path:</span><span class="url ellipsis"> {{path}}</span></p>
- <div class="backet-wrapper" [ngClass]="{'added-upload': addedFiles.length}" id="scrolling">
+
+ <div class="bucket-wrapper" [ngClass]="{'added-upload': addedFiles.length}" id="scrolling">
<div class="navigation">
<dlab-folder-tree
(showFolderContent)=onFolderClick($event)
@@ -148,42 +214,26 @@
<div class="remove"></div>
</li>
<li *ngFor="let file of addedFiles" class="file">
- <div class="name ellipsis" matTooltip="{{file.name}}">{{file.name}}</div>
- <div class="upload-path ellipsis" matTooltip="{{file.path}}">{{file.path}}</div>
+ <div class="name">
+ <span class="ellipsis" matTooltip="{{file.name}}" matTooltipPosition="above">{{file.name}}</span>
+ </div>
+ <div class="upload-path">
+ <span class="ellipsis" matTooltip="{{file.path}}" matTooltipPosition="above">{{file.path}}</span>
+ </div>
<div class="size">{{file.size}}MB</div>
<div class="state">
<button mat-raised-button (click)="uploadNewFile(file)" *ngIf="!file.isUploading && !file.uploaded && !file.errorUploading">Upload</button>
<mat-progress-bar mode="indeterminate" *ngIf="file.isUploading"></mat-progress-bar>
- <span *ngIf="file.uploaded">Uploaded</span>
- <span *ngIf="file.errorUploading" class="error">Uploading error</span>
+ <span *ngIf="file.uploaded" class="running">Uploaded</span>
+ <span *ngIf="file.errorUploading" class="error">Failed</span>
</div>
<div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
</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="upload-window" *ngIf="isUploadWindowOpened">
- <header class="upload-header">
- <h4 class="modal-title">Upload files</h4>
- <button type="button" class="close" (click)="closeUploadWindow()">×</button>
- </header>
- <ul class="upload-files">
- <li *ngFor="let file of addedFiles" class="file">
- <div class="name ellipsis" matTooltip="{{file.name}}">{{file.name}}</div>
- <div class="upload-path ellipsis" matTooltip="{{file.path}}">{{file.path}}</div>
- <div class="size">{{file.size}}MB</div>
- <div class="state">
- <button mat-raised-button (click)="uploadNewFile(file)" *ngIf="!file.isUploading && !file.doneUploading && !file.errorUploading">Upload</button>
- <mat-progress-bar mode="indeterminate" *ngIf="file.isUploading"></mat-progress-bar>
- <span *ngIf="file.uploaded">Uploaded</span>
- <span *ngIf="file.errorUploading" class="error">Uploading error</span>
- </div>
- <div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
- </li>
- </ul>
+<!-- <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">
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 7fc77d6..564a803 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
@@ -41,8 +41,52 @@
}
}
+ .action-wrapper{
+ position: relative;
+ .action-button-wrapper{
+ position: relative;
+ width: 160px;
+ }
+
+ .mat-raised-button.butt{
+ margin-bottom: 0;
+ &.actions-btn{
+ padding-right: 38px;
+ .material-icons{
+ transition: ease-in-out 1s;
+ font-size: 25px;
+ position: absolute;
+ top: 7px;
+ right: 30px;
+ }
+ }
+ }
+ .action-menu{
+ position: absolute;
+ margin: 0 10px;
+ text-align: center;
+ //box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+ &-item.mat-raised-button.butt{
+ z-index: 1;
+ margin: 0;
+ box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 0px 0px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+ width: 160px;
+ padding: 0 20px;
+ border-radius: 0;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 15px;
+ font-family: 'Open Sans', sans-serif;
+ color: #577289;
+ position: relative;
+ overflow: hidden;
+ line-height: 36px;
+ }
+ }
+ }
+
.path{
- margin: 0 4px 20px 0;
+ margin: 0 4px 10px 0;
padding: 4px 4px 4px 0;
color: rgba(0,0,0,.87);
overflow: hidden;
@@ -52,7 +96,17 @@
font-weight: 600;
overflow: hidden;
display: block;
- padding-left: 10px;
+ direction: rtl;
+ &-folder{
+ padding-left: 5px;
+ padding-right: 5px;
+ color: #00bcd4;
+ cursor: pointer;
+ }
+ &-icon i{
+ transform: translateY(2px);
+ font-size: 15px;
+ }
}
}
bottom: 0;
@@ -85,7 +139,23 @@
}
}
-.backet-wrapper{
+.navigation-line{
+ display: flex;
+ margin-bottom: 25px;
+
+ .endpoint-select{
+ flex: 1;
+ position: relative;
+ opacity: 0;
+ }
+
+ .filter-files{
+ flex: 2;
+ }
+}
+
+
+.bucket-wrapper{
height: 53vh;
border: 2px solid rgba(0,0,0,.12);
border-radius: 5px;
@@ -280,7 +350,7 @@
}
input[type='file'] {
- opacity:0
+ opacity:1
}
@@ -380,11 +450,14 @@ input[type='file'] {
.name{
flex:12;
padding-right: 5px;
+ overflow: hidden;
+ display: flex;
}
.upload-path{
flex:12;
padding-right: 5px;
+ display: flex;
}
.size{
@@ -433,7 +506,7 @@ input[type='file'] {
}
@media only screen and (max-height: 840px) {
- .backet-wrapper {
+ .bucket-wrapper {
height: 45vh;
&.added-upload{
height: 30vh;
@@ -442,7 +515,7 @@ input[type='file'] {
}
@media only screen and (max-height: 690px) {
- .backet-wrapper {
+ .bucket-wrapper {
height: 40vh;
&.added-upload{
height: 25vh;
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 9e3cfe6..7570c9d 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
@@ -38,6 +38,8 @@ import {logger} from 'codelyzer/util/logger';
export class BucketBrowserComponent implements OnInit {
public addedFiles = [];
public folderItems = [];
+ public originFolderItems = [];
+ public objectPath;
public path = '';
public pathInsideBucket = '';
public bucketName = '';
@@ -48,8 +50,10 @@ export class BucketBrowserComponent implements OnInit {
public selected: any[];
public bucketStatus;
public allDisable: boolean;
+ public isActionsOpen: boolean;
public folders: any[];
public selectedItems;
+ public searchValue: string;
@ViewChild(FolderTreeComponent, {static: true}) folderTreeComponent;
@@ -83,9 +87,10 @@ export class BucketBrowserComponent implements OnInit {
if (event.target.files.length > 0) {
let askForAll = true;
let skipAll = false;
+
+ const folderFiles = this.folderItems.filter(v => !v.children).map(v => v.item);
for (const file of Object['values'](event.target.files)) {
- const folderFiles = this.folderItems.filter(v => !v.children).map(v => v.item);
- const existFile = folderFiles.filter(v => v === file['name'])[0];
+ const existFile = folderFiles.includes(v => v === file['name'])[0];
const uploadItem = {
name: file['name'],
file: file,
@@ -131,6 +136,8 @@ export class BucketBrowserComponent implements OnInit {
this.selected = this.folderItems.filter(item => item.isSelected);
this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected);
this.selectedItems = [...this.selected, ...this.selectedFolderForAction];
+ this.isActionsOpen = false;
+
}
filesPicked(files) {
@@ -144,6 +151,7 @@ export class BucketBrowserComponent implements OnInit {
}
public onFolderClick(event) {
+ this.searchValue = '';
this.clearSelection();
this.selectedFolder = event.flatNode;
this.folderItems = event.element ? event.element.children : event.children;
@@ -151,13 +159,20 @@ export class BucketBrowserComponent implements OnInit {
this.folders = this.folderItems.filter(v => v.children).sort((a, b) => a.item > b.item ? 1 : -1);
const files = this.folderItems.filter(v => !v.children).sort((a, b) => a.item > b.item ? 1 : -1);
this.folderItems = [...this.folders, ...files];
+ this.objectPath = event.pathObject;
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.folderItems.forEach(item => item.isSelected = false);
}
}
+ filterObjects(event) {
+ console.log(event);
+ this.folderItems = this.originFolderItems.filter(v => v.item.indexOf(event.target.value) !== -1);
+ }
+
private clearSelection() {
this.folderItems.forEach(item => item.isSelected = false);
this.folderItems.forEach(item => item.isFolderSelected = false);
@@ -240,6 +255,32 @@ export class BucketBrowserComponent implements OnInit {
}
}
+
+ public toogleActions() {
+ this.isActionsOpen = !this.isActionsOpen;
+ }
+
+ public closeActions() {
+ this.isActionsOpen = false;
+ }
+
+ public copyPath() {
+ const selBox = document.createElement('textarea');
+ const selected = this.folderItems.filter(item => item.isSelected || item.isFolderSelected)[0];
+ selBox.style.position = 'fixed';
+ selBox.style.left = '0';
+ selBox.style.top = '0';
+ selBox.style.opacity = '0';
+ selBox.value = selected.object.bucket + '/' + selected.object.object;
+ document.body.appendChild(selBox);
+ selBox.focus();
+ selBox.select();
+ document.execCommand('copy');
+ document.body.removeChild(selBox);
+ this.clearSelection();
+ this.isActionsOpen = false;
+ this.toastr.success('Object path successfully copied!', 'Success!');
+ }
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
index d09d9a8..a512221 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.html
@@ -20,7 +20,7 @@
<div id="dialog-box" class="confirmation-dialog">
<header class="dialog-header">
<h4 class="modal-title">
- <span *ngIf="data.type === 'delete'">Delete objects</span>
+ <span *ngIf="data.type === 'delete'">Delete</span>
<span *ngIf="data.type === 'upload-dublicat'">Resolve conflicts</span>
</h4>
<button type="button" class="close" (click)="dialogRef.close()">×</button>
@@ -30,11 +30,12 @@
<div *ngIf="data.type === 'delete'">
<mat-list class="resources">
<mat-list-item class="list-header">
- <div class="object">Objects</div>
+
+ <div class="object">Object</div>
<div class="size">Size</div>
</mat-list-item>
- <div class="scrolling-content" id="scrolling">
- <mat-list-item *ngFor="let object of data.items">
+ <div class="scrolling-content delete-list" id="scrolling">
+ <mat-list-item *ngFor="let object of data.items" class="delete-item">
<div class="object">
<span *ngIf="object['children']"><i class="material-icons folder-icon" >folder</i></span>
<div class="ellipsis"
@@ -48,16 +49,21 @@
</div>
</mat-list>
<div mat-dialog-content class="bottom-message" *ngIf="data.type === 'delete'">
- <span class="confirm-message" *ngIf="isFolders">All affected objects will be deleted.</span>
- <span class="confirm-message" *ngIf="!isFolders">These objects will be deleted.</span>
+ <span class="confirm-message" *ngIf="isFolders">All affected object <span *ngIf="data.items.length > 1">s</span> will be deleted.</span>
+ <span class="confirm-message" *ngIf="!isFolders"><span *ngIf="data.items.length > 1">These objects</span><span *ngIf="data.items.length === 1">This object</span> will be deleted.</span>
</div>
<div class="text-center m-top-20">
<p class="strong">Do you want to proceed?</p>
</div>
</div>
<div *ngIf="data.type === 'upload-dublicat'">
- <p><span class="strong">{{data.items}}</span> already exist in selected folder. How would you like to resolve this conflict?</p>
-
+ <p><span
+ class="strong upload-item-name ellipsis"
+ matTooltip="{{data.items}}"
+ matTooltipPosition="above"
+ matTooltipShowDelay="1000"
+ [matTooltipClass]="'bucket-item-tooltip'"
+ >{{data.items}}</span> already exist in selected folder. How would you like to resolve this conflict?</p>
<mat-radio-group
aria-labelledby="upload-radio-group-label"
class="upload-radio-group"
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
index f02c915..179fb05 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component.scss
@@ -37,18 +37,24 @@
}
}
.resources {
+ .mat-list-base .mat-list-item.delete-item{
+ height: 30px;
+ }
+
.object {
width: 70%;
display: flex;
align-items: center;
+ padding-right: 10px;
}
.size {
width: 30%;
}
- .scrolling-content {
+ .scrolling-content.delete-list {
max-height: 200px;
overflow-y: auto;
+ padding-top: 11px;
}
}
.empty-list {
@@ -76,6 +82,10 @@
text-align: center;
padding-top: 20px}
}
+.upload-item-name{
+ max-width: 300px;
+}
+
.mat-radio-button{
font-family: inherit;
.mat-radio-ripple{
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 c52fe1c..c3180d7 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
@@ -40,13 +40,12 @@ export class BucketDataService {
public refreshBucketdata(bucket, endpoint) {
let backetData = [];
- this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
- this.serverData = v;
- backetData = this.convertToFolderTree(v);
- const data = this.buildFileTree({[bucket]: backetData}, 0);
- this._bucketData.next(data);
- });
-
+ this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
+ this.serverData = v;
+ backetData = this.convertToFolderTree(v);
+ 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);
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 ff1ae69..ed3ccea 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
@@ -124,7 +124,8 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
const data = {
flatNode: el,
element: this.flatNodeMap.get(el),
- path: path.join('/')
+ path: path.map(v => v.item).join('/'),
+ pathObject: path
};
this.showFolderContent.emit(data);
}
@@ -133,10 +134,10 @@ export class FolderTreeComponent implements OnInit, OnDestroy {
private getPath(el) {
if (el) {
if (this.path.length === 0) {
- this.path.unshift(el.item);
+ this.path.unshift(el);
}
if (this.getParentNode(el) !== null) {
- this.path.unshift(this.getParentNode(el).item);
+ this.path.unshift(this.getParentNode(el));
this.getPath(this.getParentNode(el));
}
return this.path;
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 09351f0..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
@@ -60,24 +60,29 @@
class="strong">{{ notebook.password }}</span></p>
<p class="m-top-30">{{ DICTIONARY[PROVIDER].personal_storage }}: </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)"
- [matTooltip]="'You have not permission to open project bucket'"
- matTooltipDisabled="{{this.bucketStatus.view}}"
- matTooltipPosition="above"
- [ngClass]="{'not-allow': !this.bucketStatus.view}"
+ (click)="bucketBrowser('ofuks-1304-pr2-local-bucket', notebook.endpoint, this.bucketStatus.view && this.isBucketAllowed)"
>
+ <span
+ [matTooltip]="!this.bucketStatus.view
+ ? 'You have not permission to open project 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}">{{ notebook.account_name}}</span></p>
+ <span class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus.view || !this.isBucketAllowed}">{{ notebook.account_name}}</span></p>
<p *ngIf="notebook.bucket_name">{{ DICTIONARY[PROVIDER].container }} <span
- class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus.view}">{{ notebook.bucket_name }}</span></p>
+ class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus.view || !this.isBucketAllowed}">{{ notebook.bucket_name }}</span></p></span>
</div>
<p>Shared endpoint bucket: </p>
<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}"
+ [matTooltipClass]="'bucket-item-tooltip'"
>
<p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}
<span class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus.view}">{{ notebook.shared_account_name}}</span></p>
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 ed359c8..d228f8d 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
@@ -43,6 +43,7 @@ export class DetailDialogComponent implements OnInit {
tooltip: boolean = false;
config: Array<{}> = [];
bucketStatus: object = {};
+ isBucketAllowed = true;
public configurationForm: FormGroup;
@@ -69,6 +70,12 @@ 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'){
+ this.isBucketAllowed = false;
+ }
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
index 0da7bd4..c02d1f6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources.module.ts
@@ -33,17 +33,17 @@ import {MatTreeModule} from '@angular/material/tree';
import {BucketDataService} from './bucket-browser/bucket-data.service';
import {BucketConfirmationDialogComponent} from './bucket-browser/bucket-confirmation-dialog/bucket-confirmation-dialog.component';
-
@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- ResourcesGridModule,
- ExploratoryEnvironmentCreateModule,
- MaterialModule,
- MatTreeModule
- ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ ResourcesGridModule,
+ ExploratoryEnvironmentCreateModule,
+ MaterialModule,
+ MatTreeModule,
+ BubbleModule
+ ],
declarations: [
ResourcesComponent,
ManageUngitComponent,
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts b/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
index c677b05..0eb5554 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/material.module.ts
@@ -19,7 +19,6 @@
import { NgModule } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
-
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -51,7 +50,7 @@ import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
-import {STEPPER_GLOBAL_OPTIONS} from "@angular/cdk/stepper";
+import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
@NgModule({
exports: [
diff --git a/services/self-service/src/main/resources/webapp/src/assets/img/blank-file-svgrepo-com.svg b/services/self-service/src/main/resources/webapp/src/assets/img/blank-file-svgrepo-com.svg
new file mode 100644
index 0000000..4c88fd9
--- /dev/null
+++ b/services/self-service/src/main/resources/webapp/src/assets/img/blank-file-svgrepo-com.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve">
+<g>
+ <path style="fill:lightgray;" d="M20.266,4.207c-0.244-0.24-0.494-0.484-0.74-0.732c-0.248-0.246-0.492-0.496-0.732-0.74
+ C17.082,0.988,16.063,0,15,0H7C4.795,0,3,1.795,3,4v18c0,2.205,1.795,4,4,4h12c2.205,0,4-1.795,4-4V8
+ C23,6.938,22.012,5.918,20.266,4.207z M21,22c0,1.104-0.896,2-2,2H7c-1.104,0-2-0.896-2-2V4c0-1.104,0.896-2,2-2l7.289-0.004
+ C15.01,2.18,15,3.066,15,3.953V7c0,0.551,0.449,1,1,1h3c0.998,0,2,0.005,2,1V22z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
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 e900c5e..571de23 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
@@ -354,6 +354,11 @@ mat-dialog-container {
white-space: pre-line;
}
+.mat-list-base .mat-list-item.delete-item{
+ height: 30px;
+}
+
+
@media screen and (max-width: 1280px) {
.modal-fullscreen {
max-width: 100vw !important;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org