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

Reply via email to