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/25 14:23:46 UTC
[incubator-dlab] branch develop updated: [DLAB-1836]: Implemented
set of improvements for bucket browser (#763)
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 845aed5 [DLAB-1836]: Implemented set of improvements for bucket browser (#763)
845aed5 is described below
commit 845aed5afdd3b5ab2f3b550f71a0c0cce5dd7536
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Mon May 25 17:23:37 2020 +0300
[DLAB-1836]: Implemented set of improvements for bucket browser (#763)
---
.../bucket-browser/bucket-browser.component.html | 21 +++++++++++++--------
.../bucket-browser/bucket-browser.component.scss | 17 +++++++----------
.../bucket-browser/bucket-browser.component.ts | 9 ++++++++-
.../folder-tree/folder-tree.component.ts | 14 ++++++++++++--
.../detail-dialog/detail-dialog.component.html | 9 ++++++---
.../detail-dialog/detail-dialog.component.ts | 4 ++--
6 files changed, 48 insertions(+), 26 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 20d9437..8dcf4bd 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
@@ -55,7 +55,7 @@
Delete
</button>
</span>
- <div class="action-wrapper" [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
+ <div class="action-wrapper" >
<span class="action-button-wrapper">
<button
type="button" class="butt actions-btn"
@@ -67,14 +67,17 @@
</button>
</span>
<div class="action-menu" *ngIf="isActionsOpen">
+ <span [matTooltip]="'You have not permission to download data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.download}}">
<button
type="button" class="butt action-menu-item"
+ [ngClass]="{'disabled': !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable || isSelectionOpened}"
mat-raised-button
[disabled]=" !selected?.length || this.selectedItems?.length > 1 || !this.bucketStatus.download || allDisable || isSelectionOpened"
(click)="fileAction('download');$event.stopPropagation()"
>
Download
</button>
+ </span>
<button
type="button" class="butt action-menu-item"
mat-raised-button
@@ -150,7 +153,8 @@
<li *ngFor="let file of folderItems" class="folder-item" >
<div class="folder-item-wrapper" *ngIf="file.children && file.item" (click)="showItem(file)">
<div class="name name-folder">
- <span *ngIf="this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isFolderSelected}" (click)="toggleSelectedFile(file, 'folder');$event.stopPropagation()" >
+<!-- <span *ngIf="this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isFolderSelected}" (click)="toggleSelectedFile(file, 'folder');$event.stopPropagation()" >-->
+ <span class="empty-checkbox" [ngClass]="{'checked': file.isFolderSelected}" (click)="toggleSelectedFile(file, 'folder');$event.stopPropagation()" >
<span class="checked-checkbox" *ngIf="file.isFolderSelected"></span>
</span>
<i class="material-icons folder-icon folder-name">folder</i>
@@ -166,15 +170,17 @@
<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 && file.item !== 'ا'" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
+ <div class="folder-item-wrapper" (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children && file.item !== 'ا'">
<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="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file, 'file');$event.stopPropagation()" >
<span class="checked-checkbox" *ngIf="file.isSelected"></span>
</span>
<i class="material-icons folder-icon" >description</i>
+
<span
class="item-name name-wrap"
- [ngClass]="{'removed-checkbox': !this.bucketStatus.download && !this.bucketStatus.delete}"
+
matTooltip="{{file.item}}"
matTooltipPosition="above"
matTooltipShowDelay="1000"
@@ -184,9 +190,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">
<span class="progress-bar-text">{{file.progress || 0}}% Downloading...</span>
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 1042584..1787011 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
@@ -152,6 +152,11 @@
color: #00bcd4;
background-color: #fafafa;
}
+ &.disabled{
+ &:hover{
+ color: #577289;
+ }
+ }
}
input[type="file"] {
@@ -317,9 +322,9 @@
transform: translateX(6px);
}
span.item-name{
- padding-left: 8px;
+ padding-left: 4px;
&.removed-checkbox{
- padding-left: 0;
+ padding-left: 4px;
}
}
}
@@ -480,14 +485,6 @@
}
}
}
-
- &.no-select{
- pointer-events: none;
-
- .name-wrap{
- padding-left: 29px !important;
- }
- }
}
}
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 8d236cd..3fb1117 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
@@ -226,11 +226,18 @@ export class BucketBrowserComponent implements OnInit {
.afterClosed().subscribe((res) => {
res && file.subscr.unsubscribe();
res && this.addedFiles.splice(this.addedFiles.indexOf(file), 1);
+ this.isFileUploading = !!this.addedFiles.filter(v => v.status === 'uploading').length;
+ this.sendFile();
+ }, () => {
+ this.isFileUploading = !!this.addedFiles.filter(v => v.status === 'uploading').length;
+ this.sendFile();
});
} else {
this.addedFiles.splice(this.addedFiles.indexOf(file), 1);
+ this.isFileUploading = !!this.addedFiles.filter(v => v.status === 'uploading').length;
+ this.sendFile();
}
- this.sendFile();
+
}
private uploadNewFile(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 177eca3..e8ee2b3 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
@@ -53,6 +53,7 @@ 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 => {
+
if (data) {
this.dataSource.data = data;
const subject = this.dataSource._flattenedData;
@@ -62,11 +63,16 @@ export class FolderTreeComponent implements OnDestroy {
}
this.expandAllParents(this.selectedFolder || subjectData[0]);
this.showItem(this.selectedFolder || subjectData[0]);
- if (this.selectedFolder) {
+ if (this.selectedFolder && !this.bucketDataService.emptyFolder) {
setTimeout(() => {
const element = document.querySelector('.folder-item-line.active-item');
element && element.scrollIntoView({ block: 'center', behavior: 'smooth' });
}, 0);
+ } else if (this.selectedFolder && this.bucketDataService.emptyFolder) {
+ setTimeout(() => {
+ const element = document.querySelector('#folder-form');
+ element && element.scrollIntoView({ block: 'end', behavior: 'smooth' });
+ }, 0);
}
}
}));
@@ -175,6 +181,9 @@ export class FolderTreeComponent implements OnDestroy {
private addNewItem(node: TodoItemFlatNode, file, isFile) {
const currNode = this.flatNodeMap.get(node);
+ if (!currNode.object) {
+ currNode.object = {bucket: currNode.item, object: ''};
+ }
const emptyFolderObject = currNode.object;
if (emptyFolderObject.object.lastIndexOf('ا') !== emptyFolderObject.object.length - 1 || emptyFolderObject.object === '') {
emptyFolderObject.object += 'ا';
@@ -218,7 +227,8 @@ private addNewItem(node: TodoItemFlatNode, file, isFile) {
this.toastr.success('Folder successfully created!', 'Success!');
this.resetForm();
this.folderCreating = false;
- this.dataSource._flattenedData.getValue().splice(this.dataSource._flattenedData.getValue().indexOf(this.dataSource._flattenedData.getValue().filter(v => v.item === '')[0]));
+ this.dataSource._flattenedData.getValue()
+ .splice(this.dataSource._flattenedData.getValue().indexOf(this.dataSource._flattenedData.getValue().filter(v => v.item === '')[0]));
}
}, error => {
this.folderCreating = false;
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 50756cc..75712d4 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,10 +62,13 @@
<p class="m-top-30">{{ DICTIONARY[PROVIDER].personal_storage }}: </p>
<!-- (click)="bucketBrowser(notebook.bucket_name, notebook.endpoint, this.bucketStatus.view)"-->
<div class="links_block" (mouseleave)="hideCopyIcon()">
- <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.account_name">{{ DICTIONARY[PROVIDER].account }}
+ <p *ngIf="PROVIDER === 'azure' && notebook.account_name">
<span
class="bucket-info"
(mouseover)="showCopyIcon()"
+ [matTooltip]="notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'"
+ matTooltipPosition="above"
+ [matTooltipClass]="'bucket-item-tooltip'"
>
{{notebook.bucket_name + '@' + notebook.account_name + '.blob.core.windows.net'}}
<!-- rc-22-projecta-conteiner@1ebobsvx7t.blob.core.windows.net-->
@@ -124,7 +127,7 @@
<!-- matTooltipPosition="above"-->
<!-- [matTooltipClass]="'bucket-item-tooltip'"-->
<!-- >-->
-<!-- <p *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}-->
+<!-- <p *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.shared_account_name">{{ DICTIONARY[PROVIDER].account }}-->
<!-- <span class="bucket-info bucket-link" [ngClass]="{'not-allow': !this.bucketStatus.view}" (mouseover)="showCopyIcon('shared')">{{ notebook.shared_account_name}}</span>-->
<!-- <span *ngIf="isCopyIconVissible.shared" class="link-icon" (click)="copyBucketName(notebook.shared_account_name)">-->
<!-- <span _ngcontent-xpv-c19="" class="material-icons" matTooltip="Copy bucket name" matTooltipPosition="above">content_copy</span>-->
@@ -146,7 +149,7 @@
<!-- </div>-->
<!-- <br />-->
-<!-- <div *ngIf="DICTIONARY[PROVIDER].cloud_provider === 'azure' && notebook.datalake_name">-->
+<!-- <div *ngIf="DICTIONARY[PROVIDER === 'azure' && notebook.datalake_name">-->
<!-- <p>Data Lake Store: </p>-->
<!-- <div class="links_block">-->
<!-- <p>Data Lake Store Account: <span class="bucket-info">{{ notebook.datalake_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 c972a5d..c6748e2 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,8 +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;
+ // 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' })
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org