This is an automated email from the ASF dual-hosted git repository. dgnatyshyn pushed a commit to branch DLAB-1662 in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit e588d761a6385176697c0d06111002d52886bb84 Author: Dmytro_Gnatyshyn <[email protected]> AuthorDate: Wed Aug 5 17:13:30 2020 +0300 [DLAB-1662]: Fixed notebook position if user applies any action for it --- .../src/app/core/pipes/keys-pipe/keys.pipe.ts | 2 +- .../underscoreless-pipe/underscoreless.pipe.ts | 2 +- .../bucket-browser/bucket-browser.component.ts | 39 ++++++++++++++++++---- .../buckets-tree/bucket-tree.component.scss | 2 +- .../folder-tree/folder-tree.component.ts | 2 +- ...utational-resource-create-dialog.component.html | 2 +- ...mputational-resource-create-dialog.component.ts | 2 +- .../resources-grid/resources-grid.component.html | 12 +++---- .../resources-grid/resources-grid.component.ts | 35 ++++++------------- .../confirmation-dialog.component.ts | 8 +++-- .../webapp/src/assets/styles/_dialogs.scss | 3 +- 11 files changed, 63 insertions(+), 46 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/keys-pipe/keys.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/keys-pipe/keys.pipe.ts index 5fe18ad..8c6fb0b 100644 --- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/keys-pipe/keys.pipe.ts +++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/keys-pipe/keys.pipe.ts @@ -22,7 +22,7 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'keys' }) export class KeysPipe implements PipeTransform { - transform(value, args: string[]): any { + transform(value): any { const keys = []; for (const key in value) { keys.push({ key: key, value: value[key]}); diff --git a/services/self-service/src/main/resources/webapp/src/app/core/pipes/underscoreless-pipe/underscoreless.pipe.ts b/services/self-service/src/main/resources/webapp/src/app/core/pipes/underscoreless-pipe/underscoreless.pipe.ts index a21da90..32670b0 100644 --- a/services/self-service/src/main/resources/webapp/src/app/core/pipes/underscoreless-pipe/underscoreless.pipe.ts +++ b/services/self-service/src/main/resources/webapp/src/app/core/pipes/underscoreless-pipe/underscoreless.pipe.ts @@ -22,7 +22,7 @@ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'underscoreless' }) export class UnderscorelessPipe implements PipeTransform { - transform(value, args: string[]): any { + transform(value): any { return value.replace(/_/g, ' '); } } 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 3ffcada..2be3dad 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 @@ -17,7 +17,7 @@ * under the License. */ -import { Component, OnInit, ViewChild, Inject } from '@angular/core'; +import {Component, OnInit, ViewChild, Inject, OnDestroy} from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { ToastrService } from 'ngx-toastr'; @@ -31,13 +31,16 @@ import {BucketConfirmationDialogComponent} from './bucket-confirmation-dialog/bu import {logger} from 'codelyzer/util/logger'; import {HttpEventType, HttpResponse} from '@angular/common/http'; import {CopyPathUtils} from '../../core/util/copyPathUtils'; +import {Subject} from 'rxjs'; +import {takeUntil} from 'rxjs/operators'; @Component({ selector: 'dlab-bucket-browser', templateUrl: './bucket-browser.component.html', styleUrls: ['./bucket-browser.component.scss'] }) -export class BucketBrowserComponent implements OnInit { +export class BucketBrowserComponent implements OnInit, OnDestroy { + private unsubscribe$ = new Subject(); public addedFiles = []; public folderItems = []; public originFolderItems = []; @@ -92,6 +95,11 @@ export class BucketBrowserComponent implements OnInit { this.cloud = this.getCloud(); } + ngOnDestroy() { + this.unsubscribe$.next(); + this.unsubscribe$.complete(); + } + public getTokenValidTime() { const token = JSON.parse(atob(this.storage.getToken().split('.')[1])); return token.exp * 1000 - new Date().getTime(); @@ -99,7 +107,11 @@ export class BucketBrowserComponent implements OnInit { private refreshToken() { this.isTokenRefreshing = true; - this.auth.refreshToken().subscribe(tokens => { + this.auth.refreshToken() + .pipe( + takeUntil(this.unsubscribe$) + ) + .subscribe(tokens => { this.storage.storeTokens(tokens); this.isTokenRefreshing = false; this.sendFile(); @@ -152,7 +164,11 @@ export class BucketBrowserComponent implements OnInit { if (res) { if (this.refreshTokenLimit > this.getTokenValidTime()) { this.isTokenRefreshing = true; - this.auth.refreshToken().subscribe(v => { + this.auth.refreshToken() + .pipe( + takeUntil(this.unsubscribe$) + ) + .subscribe(v => { this.uploadingQueue(files); this.isTokenRefreshing = false; }); @@ -164,7 +180,11 @@ export class BucketBrowserComponent implements OnInit { } else { if (this.refreshTokenLimit > this.getTokenValidTime()) { this.isTokenRefreshing = true; - this.auth.refreshToken().subscribe(v => { + this.auth.refreshToken() + .pipe( + takeUntil(this.unsubscribe$) + ) + .subscribe(v => { this.uploadingQueue(files); this.isTokenRefreshing = false; }); @@ -371,6 +391,9 @@ export class BucketBrowserComponent implements OnInit { selected[0]['isDownloading'] = true; this.folderItems.forEach(item => item.isSelected = false); this.bucketBrowserService.downloadFile(`/${this.bucketName}/object/${path}/endpoint/${this.endpoint}/download`) + .pipe( + takeUntil(this.unsubscribe$) + ) .subscribe(event => { if (event['type'] === HttpEventType.DownloadProgress) { selected[0].progress = Math.round(100 * event['loaded'] / selected[0].object.size); @@ -402,7 +425,11 @@ export class BucketBrowserComponent implements OnInit { !res && this.clearSelection(); res && this.bucketBrowserService.deleteFile({ bucket: this.bucketName, endpoint: this.endpoint, 'objects': dataForServer - }).subscribe(() => { + }) + .pipe( + takeUntil(this.unsubscribe$) + ) + .subscribe(() => { this.bucketDataService.refreshBucketdata(this.bucketName, this.endpoint); this.toastr.success('Objects successfully deleted!', 'Success!'); this.clearSelection(); 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 736c6ee..5bd774a 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 @@ -18,7 +18,7 @@ */ .folder{ padding-left: 5px; - max-width: 310px; + max-width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 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 5efc6e0..cd7d199 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 @@ -84,7 +84,7 @@ export class FolderTreeComponent implements OnDestroy { if (this.selectedFolder && !this.bucketDataService.emptyFolder) { setTimeout(() => { const element = document.querySelector('.folder-item-line.active-item'); - element && element.scrollIntoView({ block: 'center', behavior: 'smooth' }); + element && element.scrollIntoView({ block: 'start', behavior: 'smooth' }); }, 0); } else if (this.selectedFolder && this.bucketDataService.emptyFolder) { setTimeout(() => { diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html index 94265fd..62ab6af 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html @@ -149,7 +149,7 @@ <label class="label"> <input #preemptibleNode type="checkbox" (change)="selectPreemptibleNodes($event)" /> <span>Preemptible node</span> - <span class="align" *ngIf="preemptible?.nativeElement['checked'] || false"> count</span> + <span class="align" [hidden]="!preemptible?.nativeElement['checked']"> count</span> </label> <div *ngIf="preemptible?.nativeElement['checked']" class="preemptible-details control" [ngClass]="{ show: preemptible?.nativeElement['checked'] || false}"> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts index 8968a3a..9f319cc 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.ts @@ -134,7 +134,7 @@ export class ComputationalResourceCreateDialogComponent implements OnInit { public createComputationalResource(data) { this.model.createComputationalResource(data, this.selectedImage, this.notebook_instance, this.spotInstance, this.PROVIDER.toLowerCase()) .subscribe((response: any) => { - if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(); + if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(true); }, error => this.toastr.error(error.message, 'Oops!')); } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html index 777f65d..afa556c 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html @@ -19,7 +19,7 @@ <section class="table-wrapper"> <table mat-table [dataSource]="filteredEnvironments" multiTemplateDataRows - class="data-grid resources mat-elevation-z6"> + class="data-grid resources mat-elevation-z6" [trackBy]="trackBy"> <ng-container matColumnDef="project"> <td mat-cell *matCellDef="let element" [attr.colspan]="8" class="project-name"> {{ element.project }} </td> @@ -111,8 +111,8 @@ <!-- ----------------------------------------------------- --> <ng-container matColumnDef="expandedDetail"> - <td mat-cell *matCellDef="let element" class="exploratory" [attr.colspan]="8" - [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" sticky> + <td mat-cell *matCellDef="let element" class="exploratory" [attr.colspan]="8" sticky> +<!-- [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" --> <tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row"> <td class="name-col highlight" (click)="printDetailEnvironmentModal(element)"> @@ -324,9 +324,9 @@ <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true" class="filter-row"></tr> - <tr mat-row *matRowDef="let element; columns: ['project']" class="element-row" - [class.expanded-row]="expandedElement === element" - (click)="expandedElement = expandedElement === element ? null : element"> + <tr mat-row *matRowDef="let element; columns: ['project']" class="element-row"> +<!-- [class.expanded-row]="expandedElement === element"--> +<!-- (click)="expandedElement = expandedElement === element ? null : element">--> </tr> <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr> 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 c05c242..e4e5bf3 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 @@ -120,8 +120,6 @@ export class ResourcesGridComponent implements OnInit { public bucketsList: BucketList; public activeProjectsList: any; - - constructor( public toastr: ToastrService, private userResourceService: UserResourceService, @@ -152,9 +150,8 @@ export class ResourcesGridComponent implements OnInit { this.getDefaultFilterConfiguration(); (this.environments.length) ? this.getUserPreferences() : this.filteredEnvironments = []; this.healthStatus && !this.healthStatus.billingEnabled && this.modifyGrid(); - window.scrollTop = window.scrollTop + 50 this.progressBarService.stopProgressBar(); - }, () => this.progressBarService.stopProgressBar()); + }, () => this.progressBarService.stopProgressBar()); } public toggleFilterRow(): void { @@ -228,7 +225,9 @@ export class ResourcesGridComponent implements OnInit { if (action === 'deploy') { this.dialog.open(ComputationalResourceCreateDialogComponent, { data: { notebook: resource, full_list: this.environments }, panelClass: 'modal-xxl' }) - .afterClosed().subscribe(() => this.buildGrid()); + .afterClosed().subscribe((res) => { + res && this.buildGrid(); + }); } else if (action === 'run') { this.userResourceService .runExploratoryEnvironment({ notebook_instance_name: data.name, project_name: data.project }) @@ -237,7 +236,9 @@ export class ResourcesGridComponent implements OnInit { error => this.toastr.error(error.message || 'Exploratory starting failed!', 'Oops!')); } else if (action === 'stop') { this.dialog.open(ConfirmationDialogComponent, { data: { notebook: data, type: ConfirmationDialogType.StopExploratory }, panelClass: 'modal-sm' }) - .afterClosed().subscribe((res) => res && this.buildGrid()); + .afterClosed().subscribe((res) => { + res && this.buildGrid(); + }); } else if (action === 'terminate') { this.dialog.open(ConfirmationDialogComponent, { data: { notebook: data, type: ConfirmationDialogType.TerminateExploratory }, panelClass: 'modal-sm' }) @@ -285,24 +286,6 @@ export class ResourcesGridComponent implements OnInit { }); this.bucketsList = SortUtils.flatDeep(bucketsList, 1).filter(v => v.children.length); - // this.bucketsList = [ - // { - // children: [{name: 'SERVICE_BASE_NAME-${EDGE_USER_NAME}-bucket.SERVICE_BASE_NAME-${EDGE_USER_NAME}-bucket', endpoint: 'local'}], - // cloud: 'GCP', - // name: 'Proj1 (local)' - // }, - // { - // children: [{name: 'SERVICE_BASE_NAME-${EDGE_USER_NAME}-bucket.SERVICE_BASE_NAME-${EDGE_USER_NAME}-bucket', endpoint: 'local'}], - // cloud: 'GCP', - // name: 'Proj1 (local)' - // }, - // { - // children: [{name: 'SERVICE_BASE_NAME-${EDGE_USER_NAME}-bucket.SERVICE_BASE_NAME-${EDGE_USER_NAME}-bucket', endpoint: 'local'}], - // cloud: 'GCP', - // name: 'Proj1 (local)' - // }, - // ], - // console.log(this.bucketsList); } @@ -450,4 +433,8 @@ export class ResourcesGridComponent implements OnInit { }).subscribe(); } + public trackBy(index, item) { + return null; + } + } diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts index b8a2cff..5d39c68 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts @@ -60,12 +60,12 @@ export class ConfirmationDialogComponent implements OnInit { } ngOnInit() { - if(this.data.type !== 5){ + if (this.data.type !== 5) { this.confirmationType = this.data.type; this.notebook = this.data.notebook; this.model = new ConfirmationDialogModel(this.confirmationType, this.notebook, response => { - if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(); + if (response.status === HTTP_STATUS_CODES.OK) this.dialogRef.close(true); }, error => this.toastr.error(error.message || 'Action failed!', 'Oops'), this.data.manageAction, @@ -75,7 +75,9 @@ export class ConfirmationDialogComponent implements OnInit { if (!this.confirmationType) this.filterResourcesByType(this.notebook.resources); this.isAliveResources = this.model.isAliveResources(this.notebook.resources); - this.onlyKilled = this.notebook.resources ? !this.notebook.resources.some(el => el.status !== 'terminated' && el.status !== 'failed') : false; + this.onlyKilled = this.notebook.resources ? + !this.notebook.resources.some(el => el.status !== 'terminated' && el.status !== 'failed') + : false; } } 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 71ca6da..e4d0418 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 @@ -52,7 +52,8 @@ } .modal-fullscreen { - width: 100vw; + width: 90vw; + max-width: 90vw !important; min-height: 80vh; } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
