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:21:04 UTC
[incubator-dlab] branch DLAB-1836 created (now b0d20ff)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DLAB-1836
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.
at b0d20ff [DLAB-1836]: Implemented set of improvements for bucket browser
This branch includes the following new commits:
new b0d20ff [DLAB-1836]: Implemented set of improvements for bucket browser
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-1836]: Implemented set of
improvements for bucket browser
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1836
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit b0d20ff8e71c7f6c76478dda5df90d3c3a88ac9d
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Mon May 25 17:20:28 2020 +0300
[DLAB-1836]: Implemented set of improvements for bucket browser
---
.../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