This is an automated email from the ASF dual-hosted git repository. pingsutw pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/submarine.git
The following commit(s) were added to refs/heads/master by this push: new 267aefec SUBMARINE-1334. Optimising notebook asynchronous refresh handling 267aefec is described below commit 267aefec592dd4bc618a236d090a958864ae5eb8 Author: cdmikechen <cdmikec...@apache.org> AuthorDate: Tue Oct 4 15:37:14 2022 +0800 SUBMARINE-1334. Optimising notebook asynchronous refresh handling ### What is this PR for? Notebook currently does not fetch list information on first load. Notebook's asynchronous refresh will cancel the confirmation tooltip for the delete button. ### What type of PR is it? Improvement ### Todos * [x] - List loaded immediately after page initialisation * [x] - Adjust the asynchronous refresh logic to update only the changed values ### What is the Jira issue? https://issues.apache.org/jira/browse/SUBMARINE-1334 ### How should this be tested? No ### Screenshots (if appropriate) https://user-images.githubusercontent.com/12069428/193764732-8246a266-013c-4b4e-bfe4-755f37525f5e.mov ### Questions: * Do the license files need updating? No * Are there breaking changes for older versions? No * Does this need new documentation? No Author: cdmikechen <cdmikec...@apache.org> Signed-off-by: Kevin <pings...@apache.org> Closes #1001 from cdmikechen/SUBMARINE-1334 and squashes the following commits: ec11c0d9 [cdmikechen] Optimising notebook asynchronous refresh handling --- .../notebook-form/notebook-form.component.ts | 7 ++- .../notebook-home/notebook-home.component.html | 2 +- .../notebook-home/notebook-home.component.ts | 63 ++++++++++++++++++---- 3 files changed, 59 insertions(+), 13 deletions(-) diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-form/notebook-form.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-form/notebook-form.component.ts index 5296eb95..443bd729 100644 --- a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-form/notebook-form.component.ts +++ b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-form/notebook-form.component.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; import { FormArray, FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; import { ExperimentValidatorService } from '@submarine/services/experiment.validator.service'; import { EnvironmentService } from '@submarine/services/environment-services/environment.service'; @@ -45,6 +45,9 @@ export class NotebookFormComponent implements OnInit { notebookForm: FormGroup; MEMORY_UNITS = ['M', 'Gi']; + // refresh notebook list function + @Output() private refreshNotebook = new EventEmitter<boolean>(); + constructor( private fb: FormBuilder, private experimentValidatorService: ExperimentValidatorService, @@ -212,6 +215,8 @@ export class NotebookFormComponent implements OnInit { nzPauseOnHover: true, }); this.isVisible = false; + // refresh list after created a new notebook + this.refreshNotebook.emit(true); }, }); } diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.html b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.html index e895d649..8b6ad741 100644 --- a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.html +++ b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.html @@ -34,5 +34,5 @@ [notebookList]="notebookList" (deleteNotebook)="onDeleteNotebook($event)" ></submarine-notebook-list> - <submarine-notebook-form #form></submarine-notebook-form> + <submarine-notebook-form #form (refreshNotebook)="refreshNotebook($event)" ></submarine-notebook-form> </div> diff --git a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.ts b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.ts index 9522d85f..e76d4a03 100644 --- a/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.ts +++ b/submarine-workbench/workbench-web/src/app/pages/workbench/notebook/notebook-home/notebook-home.component.ts @@ -17,13 +17,14 @@ * under the License. */ -import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { NotebookInfo } from "@submarine/interfaces/notebook-interfaces/notebook-info"; import { NotebookService } from '@submarine/services/notebook-services/notebook.service'; -import { NzMessageService } from 'ng-zorro-antd/message'; import { UserService } from '@submarine/services/user.service'; import { isEqual } from 'lodash'; -import { NotebookFormComponent } from './notebook-form/notebook-form.component'; +import { NzMessageService } from 'ng-zorro-antd/message'; import { interval, Subscription } from 'rxjs'; +import { NotebookFormComponent } from './notebook-form/notebook-form.component'; @Component({ selector: 'submarine-notebook-home', @@ -35,7 +36,7 @@ export class NotebookHomeComponent implements OnInit, OnDestroy { userId; // Notebook list - notebookList; + notebookList: NotebookInfo[] = []; subscribtions = new Subscription(); @@ -50,19 +51,57 @@ export class NotebookHomeComponent implements OnInit, OnDestroy { ngOnInit() { this.userService.fetchUserInfo().subscribe((res) => { this.userId = res.id; + // get notebook list first + this.refreshNotebook(true); }); + // add a loop to refresh notebook const resourceSub = interval(10000).subscribe(() => { - this.notebookService.fetchNotebookList(this.userId).subscribe((res) => { - if (!isEqual(this.notebookList, res)) { - this.notebookList = res; - } - }); + this.refreshNotebook(false); }); - this.subscribtions.add(resourceSub); } + /** + * refresh notebook list + * @param total total refresh + */ + refreshNotebook(total: boolean) { + this.notebookService.fetchNotebookList(this.userId).subscribe((res) => { + if (total) { + // Direct override of all, suitable in case of add/delete + this.notebookList = res; + } else {// Partial refresh required + // exists list size + const currentListSize = this.notebookList.length; + // The backend returns a real-time list + const newListSize = res.length; + for (let i = 0; i < newListSize; i++) { + // The latest notebook info + const notebook = res[i] + // If a new row is found, insert it directly into + if (i > currentListSize - 1) { + this.notebookList = [...this.notebookList, notebook] + } else { + // Otherwise compare relevant information and update + let current = this.notebookList[i]; + // compare + const keys = Object.keys(current); + for (const key of keys) { + if (!isEqual(current[key], notebook[key])) { + current[key] = notebook[key] + } + } + } + } + // Delete redundant rows + if (currentListSize > newListSize) { + this.notebookList = this.notebookList.splice(0, newListSize - currentListSize); + } + } + }); + } + ngOnDestroy() { this.subscribtions.unsubscribe(); } @@ -76,9 +115,11 @@ export class NotebookHomeComponent implements OnInit, OnDestroy { }); }, complete: () => { - this.nzMessageService.info(`Delete Notebook...`, { + this.nzMessageService.info(`Deleted Notebook!`, { nzPauseOnHover: true, }); + // refresh notebook list after deleted a row + this.refreshNotebook(true); }, }); } --------------------------------------------------------------------- To unsubscribe, e-mail: dev-unsubscr...@submarine.apache.org For additional commands, e-mail: dev-h...@submarine.apache.org