From c1cd1e305009b045d13e623aeddffc8485df1c3e Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Wed, 13 Nov 2024 21:37:41 -0800
Subject: [PATCH 01/23] add loading icon while waiting execution data

---
 .../admin/execution/admin-execution.component.html    | 11 ++++++++++-
 .../admin/execution/admin-execution.component.scss    |  6 ++++++
 .../admin/execution/admin-execution.component.ts      |  3 +++
 3 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 115b5b339a2..27d1f474aa7 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -10,7 +10,10 @@
 
 <nz-table
   #basicTable
-  [nzData]="listOfExecutions">
+  [nzData]="listOfExecutions"
+  [nzLoading]="isLoading"
+  [nzLoadingIndicator]="loadingTemplate"
+  [nzTemplateMode]="true">
   <thead>
     <tr>
       <th
@@ -141,3 +144,9 @@
     </tr>
   </tbody>
 </nz-table>
+
+<ng-template #loadingTemplate>
+  <div class="loading-container">
+    <nz-spin nzTip="Loading..." [nzSpinning]="true" nzSize="large"></nz-spin>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
new file mode 100644
index 00000000000..ce8063fdc2c
--- /dev/null
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
@@ -0,0 +1,6 @@
+.loading-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    height: 300px;
+}
\ No newline at end of file
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 84da3db9e4f..c041768249a 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -12,6 +12,7 @@ import { environment } from "../../../../../environments/environment";
 @UntilDestroy()
 @Component({
   templateUrl: "./admin-execution.component.html",
+  styleUrls: ["./admin-execution.component.scss"],
 })
 export class AdminExecutionComponent implements OnInit, OnDestroy {
   Executions: ReadonlyArray<Execution> = [];
@@ -19,6 +20,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
   listOfExecutions = [...this.Executions];
   workflows: Array<Workflow> = [];
   executionMap: Map<number, Execution> = new Map();
+  isLoading: boolean = true;
 
   // Set up an interval to periodically fetch and update execution data.
   // This interval function fetches the latest execution list and checks for updates.
@@ -75,6 +77,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
         this.listOfExecutions = [];
         this.reset();
         this.workflowsCount = this.listOfExecutions.length;
+        this.isLoading = false;
       });
   }
 

From 095317de9d2a8dc42dd6db1ae40e1f99a6a9bc40 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Fri, 15 Nov 2024 10:15:31 -0800
Subject: [PATCH 02/23] fix execution hyperlink

---
 .../component/admin/execution/admin-execution.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 27d1f474aa7..38090592cde 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -63,7 +63,7 @@
     <tr *ngFor="let execution of basicTable.data">
       <td>
         <div *ngIf="execution.access; else normalWorkflowName">
-          <a href="/workflow/{{execution.workflowId}}">
+          <a href="/dashboard/user/workspace/{{execution.workflowId}}">
             {{ maxStringLength(execution.workflowName, 16) }} ({{ execution.workflowId }})
           </a>
         </div>

From 702dcdb69bba588a4aab0b4d086bfbff085cdaf7 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Fri, 15 Nov 2024 10:32:34 -0800
Subject: [PATCH 03/23] remove unnecessary workflow list

---
 .../execution/admin-execution.component.html  |  2 +-
 .../execution/admin-execution.component.ts    | 39 +------------------
 2 files changed, 2 insertions(+), 39 deletions(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 38090592cde..08bfd16e8a1 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -129,7 +129,7 @@
             nzType="redo"></i>
         </button>
         <button
-          (click)="clickToViewHistory(execution.workflowId)"
+          (click)="clickToViewHistory(execution.workflowId, execution.workflowName)"
           nz-button
           nz-tooltip="previous execution of the workflow: {{
                       execution.workflowName
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index c041768249a..231005863f3 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -18,7 +18,6 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
   Executions: ReadonlyArray<Execution> = [];
   workflowsCount: number = 0;
   listOfExecutions = [...this.Executions];
-  workflows: Array<Workflow> = [];
   executionMap: Map<number, Execution> = new Map();
   isLoading: boolean = true;
 
@@ -108,30 +107,6 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  initWorkflows() {
-    for (let i = 0; i < this.listOfExecutions.length; i++) {
-      const execution = this.listOfExecutions[i];
-      let tempWorkflow: Workflow = {
-        content: {
-          operators: [],
-          operatorPositions: {},
-          links: [],
-          commentBoxes: [],
-          settings: { dataTransferBatchSize: environment.defaultDataTransferBatchSize },
-        },
-        name: execution.workflowName,
-        wid: execution.workflowId,
-        description: "",
-        creationTime: 0,
-        lastModifiedTime: 0,
-        isPublished: 0,
-        readonly: false,
-      };
-
-      this.workflows.push(tempWorkflow);
-    }
-  }
-
   filterExecutions() {
     for (let i = 0; i < this.Executions.length; i++) {
       const execution = this.Executions[i];
@@ -142,7 +117,6 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
 
   reset() {
     this.filterExecutions();
-    this.initWorkflows();
 
     this.specifyCompletedStatus();
     this.updateTimeDifferences();
@@ -249,18 +223,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     });
   };
 
-  clickToViewHistory(workflowId: number) {
-    let wid!: number;
-    let name!: string;
-    for (let i = 0; i < this.workflows.length; i++) {
-      const workflow = this.workflows[i];
-      if (workflow.wid == workflowId) {
-        wid = workflow.wid;
-        name = workflow.name;
-        break;
-      }
-    }
-
+  clickToViewHistory(wid: number, name: string) {
     this.modalService.create({
       nzContent: WorkflowExecutionHistoryComponent,
       nzData: { wid: wid },

From f9e4a72e3439add8af5224415c8a2a5a27e58821 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Fri, 15 Nov 2024 14:37:32 -0800
Subject: [PATCH 04/23] optimize the query that only send the latest execution
 for each workflow

---
 .../execution/AdminExecutionResource.scala    | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 7831bd0b774..575ee534c4c 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -5,6 +5,8 @@ import edu.uci.ics.texera.web.auth.SessionUser
 import edu.uci.ics.texera.web.model.jooq.generated.Tables._
 import edu.uci.ics.texera.web.resource.dashboard.admin.execution.AdminExecutionResource._
 import io.dropwizard.auth.Auth
+import org.jooq.Field
+import org.jooq.impl.DSL
 import org.jooq.types.UInteger
 
 import javax.annotation.security.RolesAllowed
@@ -59,6 +61,16 @@ class AdminExecutionResource {
   @Path("/executionList")
   @Produces(Array(MediaType.APPLICATION_JSON))
   def listWorkflows(@Auth current_user: SessionUser): List[dashboardExecution] = {
+    val latestExecutionId = context.select(
+        WORKFLOW_VERSION.WID,
+        DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
+      )
+      .from(WORKFLOW_EXECUTIONS)
+      .join(WORKFLOW_VERSION)
+      .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
+      .groupBy(WORKFLOW_VERSION.WID)
+      .asTable("latest_execution_id")
+
     val workflowEntries = context
       .select(
         WORKFLOW_EXECUTIONS.UID,
@@ -66,19 +78,25 @@ class AdminExecutionResource {
         WORKFLOW_VERSION.WID,
         WORKFLOW.NAME,
         WORKFLOW_EXECUTIONS.EID,
-        WORKFLOW_EXECUTIONS.VID,
         WORKFLOW_EXECUTIONS.STARTING_TIME,
         WORKFLOW_EXECUTIONS.LAST_UPDATE_TIME,
         WORKFLOW_EXECUTIONS.STATUS,
         WORKFLOW_EXECUTIONS.NAME
       )
       .from(WORKFLOW_EXECUTIONS)
-      .leftJoin(WORKFLOW_VERSION)
+      .join(WORKFLOW_VERSION)
       .on(WORKFLOW_EXECUTIONS.VID.eq(WORKFLOW_VERSION.VID))
-      .leftJoin(USER)
+      .join(USER)
       .on(WORKFLOW_EXECUTIONS.UID.eq(USER.UID))
-      .leftJoin(WORKFLOW)
+      .join(WORKFLOW)
       .on(WORKFLOW.WID.eq(WORKFLOW_VERSION.WID))
+      .join(latestExecutionId)
+      .on(
+        DSL.and(
+          WORKFLOW_EXECUTIONS.EID.eq(latestExecutionId.field("max_eid").asInstanceOf[Field[UInteger]]),
+          WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
+        )
+      )
       .fetch()
 
     val availableWorkflowIds = context

From ba9857a9f313746ff7bd3e84fafd72fee542c7b3 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 16 Nov 2024 16:23:39 -0800
Subject: [PATCH 05/23] add api function to retrieve the number of executed
 workflows

---
 .../execution/AdminExecutionResource.scala     | 17 +++++++++++++++++
 .../execution/admin-execution.component.ts     | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 575ee534c4c..5d29a23c534 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -54,6 +54,23 @@ object AdminExecutionResource {
 @RolesAllowed(Array("ADMIN"))
 class AdminExecutionResource {
 
+  @GET
+  @Path("/totalWorkflow")
+  @Produces()
+  def getTotalWorkflows: Int = {
+    context.select(
+        DSL.countDistinct(WORKFLOW.WID)
+      )
+      .from(WORKFLOW_EXECUTIONS)
+      .join(WORKFLOW_VERSION)
+      .on(WORKFLOW_EXECUTIONS.VID.eq(WORKFLOW_VERSION.VID))
+      .join(USER)
+      .on(WORKFLOW_EXECUTIONS.UID.eq(USER.UID))
+      .join(WORKFLOW)
+      .on(WORKFLOW.WID.eq(WORKFLOW_VERSION.WID))
+      .fetchOne(0, classOf[Int])
+  }
+
   /**
     * This method retrieves all existing executions
     */
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 231005863f3..566602c24f2 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -20,6 +20,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
   listOfExecutions = [...this.Executions];
   executionMap: Map<number, Execution> = new Map();
   isLoading: boolean = true;
+  totalWorkflows: number = 0;
 
   // Set up an interval to periodically fetch and update execution data.
   // This interval function fetches the latest execution list and checks for updates.
@@ -33,6 +34,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
         this.listOfExecutions.forEach((oldExecution, index) => {
           const updatedExecution = executionList.find(execution => execution.executionId === oldExecution.executionId);
           if (updatedExecution && this.dataCheck(this.listOfExecutions[index], updatedExecution)) {
+            // refresh when any of the information changed.
             this.ngOnInit();
           } else if (!updatedExecution) {
             this.ngOnInit();
@@ -50,16 +52,25 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
           if (this.executionMap.has(execution.workflowId)) {
             let tempExecution = this.executionMap.get(execution.workflowId);
             if (tempExecution) {
+              // new execution of the workflow
               if (tempExecution.executionId < execution.executionId) {
                 this.ngOnInit();
               }
             }
           } else if (!this.executionMap.has(execution.workflowId)) {
+            // new workflow
             this.ngOnInit();
           }
         });
         this.updateTimeDifferences();
       });
+    
+    this.adminExecutionService
+      .getTotalWorkflows()
+      .pipe(untilDestroyed(this))
+      .subscribe(
+        total => this.totalWorkflows = total
+      );
   }, 1000); // 1 second interval
 
   constructor(
@@ -78,6 +89,13 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
         this.workflowsCount = this.listOfExecutions.length;
         this.isLoading = false;
       });
+    
+    this.adminExecutionService
+      .getTotalWorkflows()
+      .pipe(untilDestroyed(this))
+      .subscribe(
+        total => this.totalWorkflows = total
+      );
   }
 
   ngOnDestroy(): void {

From 665213b5d006d940df517346896300d5ca74e9e6 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 16 Nov 2024 16:24:11 -0800
Subject: [PATCH 06/23] frontend service function

---
 .../service/admin/execution/admin-execution.service.ts        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
index 6b268316547..f7d015714fb 100644
--- a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
+++ b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
@@ -15,4 +15,8 @@ export class AdminExecutionService {
   public getExecutionList(): Observable<ReadonlyArray<Execution>> {
     return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList`);
   }
+
+  public getTotalWorkflows(): Observable<number> {
+    return this.http.get<number>(`${WORKFLOW_BASE_URL}/totalWorkflow`);
+  }
 }

From 8b4e81388ff0efa48142714eeb4ead24745724cd Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sun, 17 Nov 2024 16:11:38 -0800
Subject: [PATCH 07/23] remove frontend pagination and put it in the backend

---
 .../execution/AdminExecutionResource.scala    |  6 +-
 .../execution/admin-execution.component.html  |  8 +-
 .../execution/admin-execution.component.scss  |  6 ++
 .../execution/admin-execution.component.ts    | 83 ++++---------------
 .../execution/admin-execution.service.ts      |  4 +-
 5 files changed, 33 insertions(+), 74 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 5d29a23c534..cc027ff1bc3 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -75,9 +75,9 @@ class AdminExecutionResource {
     * This method retrieves all existing executions
     */
   @GET
-  @Path("/executionList")
+  @Path("/executionList/{pageSize}/{pageIndex}")
   @Produces(Array(MediaType.APPLICATION_JSON))
-  def listWorkflows(@Auth current_user: SessionUser): List[dashboardExecution] = {
+  def listWorkflows(@Auth current_user: SessionUser, @PathParam("pageSize") page_size: Int = 20, @PathParam("pageIndex") page_index: Int = 0): List[dashboardExecution] = {
     val latestExecutionId = context.select(
         WORKFLOW_VERSION.WID,
         DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
@@ -114,6 +114,8 @@ class AdminExecutionResource {
           WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
         )
       )
+      .limit(page_size)
+      .offset(page_index * page_size)
       .fetch()
 
     val availableWorkflowIds = context
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 08bfd16e8a1..45c6f5ba20e 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -13,7 +13,13 @@
   [nzData]="listOfExecutions"
   [nzLoading]="isLoading"
   [nzLoadingIndicator]="loadingTemplate"
-  [nzTemplateMode]="true">
+  [nzTemplateMode]="true"
+  [nzFrontPagination]="false"
+  [nzTotal]="totalWorkflows"
+  [nzPageSize]="pageSize"
+  [nzPageIndex]="currentPageIndex + 1"
+  (nzPageIndexChange)="onPageIndexChange($event)"
+  class="execution-table">
   <thead>
     <tr>
       <th
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
index ce8063fdc2c..cc34f8c7306 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
@@ -3,4 +3,10 @@
     justify-content: center;
     flex-direction: column;
     height: 300px;
+}
+
+.execution-table {
+    display: block;
+    grid-row-start: 3;
+    grid-row-end: 4;
 }
\ No newline at end of file
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 566602c24f2..c802472be3e 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -15,63 +15,15 @@ import { environment } from "../../../../../environments/environment";
   styleUrls: ["./admin-execution.component.scss"],
 })
 export class AdminExecutionComponent implements OnInit, OnDestroy {
-  Executions: ReadonlyArray<Execution> = [];
-  workflowsCount: number = 0;
-  listOfExecutions = [...this.Executions];
-  executionMap: Map<number, Execution> = new Map();
+  listOfExecutions: ReadonlyArray<Execution> = [];
   isLoading: boolean = true;
   totalWorkflows: number = 0;
+  pageSize: number = 6;
+  currentPageIndex: number = 0;
 
-  // Set up an interval to periodically fetch and update execution data.
-  // This interval function fetches the latest execution list and checks for updates.
-  // If some execution's data has changed, it triggers a component refresh.
+  // This interval function fetches the latest execution list.
   // The interval runs every 1 second (1000 milliseconds).
-  timer = setInterval(() => {
-    this.adminExecutionService
-      .getExecutionList()
-      .pipe(untilDestroyed(this))
-      .subscribe(executionList => {
-        this.listOfExecutions.forEach((oldExecution, index) => {
-          const updatedExecution = executionList.find(execution => execution.executionId === oldExecution.executionId);
-          if (updatedExecution && this.dataCheck(this.listOfExecutions[index], updatedExecution)) {
-            // refresh when any of the information changed.
-            this.ngOnInit();
-          } else if (!updatedExecution) {
-            this.ngOnInit();
-
-            // this if statement checks whether the workflow has no executions or the workflow has been deleted.
-            let check_execution = this.executionMap.get(oldExecution.workflowId);
-            if (check_execution && check_execution.executionId === oldExecution.executionId) {
-              this.executionMap.delete(oldExecution.workflowId);
-              this.listOfExecutions = [...this.executionMap.values()];
-            }
-          }
-        });
-
-        executionList.forEach(execution => {
-          if (this.executionMap.has(execution.workflowId)) {
-            let tempExecution = this.executionMap.get(execution.workflowId);
-            if (tempExecution) {
-              // new execution of the workflow
-              if (tempExecution.executionId < execution.executionId) {
-                this.ngOnInit();
-              }
-            }
-          } else if (!this.executionMap.has(execution.workflowId)) {
-            // new workflow
-            this.ngOnInit();
-          }
-        });
-        this.updateTimeDifferences();
-      });
-    
-    this.adminExecutionService
-      .getTotalWorkflows()
-      .pipe(untilDestroyed(this))
-      .subscribe(
-        total => this.totalWorkflows = total
-      );
-  }, 1000); // 1 second interval
+  timer = setInterval(() => this.ngOnInit(), 1000); // 1 second interval
 
   constructor(
     private adminExecutionService: AdminExecutionService,
@@ -80,13 +32,11 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.adminExecutionService
-      .getExecutionList()
+      .getExecutionList(this.pageSize, this.currentPageIndex)
       .pipe(untilDestroyed(this))
       .subscribe(executionList => {
-        this.Executions = executionList;
-        this.listOfExecutions = [];
-        this.reset();
-        this.workflowsCount = this.listOfExecutions.length;
+        this.listOfExecutions = [...executionList];
+        this.updateTimeStatus();
         this.isLoading = false;
       });
     
@@ -125,17 +75,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  filterExecutions() {
-    for (let i = 0; i < this.Executions.length; i++) {
-      const execution = this.Executions[i];
-      this.executionMap.set(execution.workflowId, execution);
-    }
-    this.listOfExecutions = [...this.executionMap.values()];
-  }
-
-  reset() {
-    this.filterExecutions();
-
+  updateTimeStatus() {
     this.specifyCompletedStatus();
     this.updateTimeDifferences();
   }
@@ -285,6 +225,11 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     // socket.closeWebsocket();
   }
 
+  onPageIndexChange(pageIndex: number): void {
+    this.currentPageIndex = pageIndex - 1;
+    this.ngOnInit();
+  }
+
   public sortByWorkflowName: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
     (b.workflowName || "").localeCompare(a.workflowName);
   public sortByExecutionName: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
diff --git a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
index f7d015714fb..6e87c74098f 100644
--- a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
+++ b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
@@ -12,8 +12,8 @@ export const WORKFLOW_BASE_URL = `${AppSettings.getApiEndpoint()}/admin/executio
 export class AdminExecutionService {
   constructor(private http: HttpClient) {}
 
-  public getExecutionList(): Observable<ReadonlyArray<Execution>> {
-    return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList`);
+  public getExecutionList(pageSize: number, pageIndex: number): Observable<ReadonlyArray<Execution>> {
+    return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}`);
   }
 
   public getTotalWorkflows(): Observable<number> {

From 1272bc8ed05a0e9effe12ff58d414d7a7ce256e3 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Tue, 19 Nov 2024 15:24:45 -0800
Subject: [PATCH 08/23] move sorting to backend

---
 .../execution/AdminExecutionResource.scala    | 31 +++++++++++++++----
 .../execution/admin-execution.component.html  | 24 +++++++++-----
 .../execution/admin-execution.component.ts    | 24 ++++++++------
 .../execution/admin-execution.service.ts      |  4 +--
 4 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index cc027ff1bc3..cb5c79b1d76 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -47,6 +47,13 @@ object AdminExecutionResource {
     }
   }
 
+  val sortFieldMapping = Map(
+    "workflow_name" -> WORKFLOW.NAME,
+    "execution_name" -> WORKFLOW_EXECUTIONS.NAME,
+    "initiator" -> USER.NAME,
+    "end_time" -> WORKFLOW_EXECUTIONS.LAST_UPDATE_TIME
+  )
+
 }
 
 @Produces(Array(MediaType.APPLICATION_JSON))
@@ -75,9 +82,15 @@ class AdminExecutionResource {
     * This method retrieves all existing executions
     */
   @GET
-  @Path("/executionList/{pageSize}/{pageIndex}")
+  @Path("/executionList/{pageSize}/{pageIndex}/{sortField}/{sortDirection}")
   @Produces(Array(MediaType.APPLICATION_JSON))
-  def listWorkflows(@Auth current_user: SessionUser, @PathParam("pageSize") page_size: Int = 20, @PathParam("pageIndex") page_index: Int = 0): List[dashboardExecution] = {
+  def listWorkflows(
+                     @Auth current_user: SessionUser,
+                     @PathParam("pageSize") page_size: Int = 20,
+                     @PathParam("pageIndex") page_index: Int = 0,
+                     @PathParam("sortField") sortField: String = "end_time",
+                     @PathParam("sortDirection") sortDirection: String = "desc"
+                   ): List[dashboardExecution] = {
     val latestExecutionId = context.select(
         WORKFLOW_VERSION.WID,
         DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
@@ -88,7 +101,7 @@ class AdminExecutionResource {
       .groupBy(WORKFLOW_VERSION.WID)
       .asTable("latest_execution_id")
 
-    val workflowEntries = context
+    val executions = context
       .select(
         WORKFLOW_EXECUTIONS.UID,
         USER.NAME,
@@ -114,9 +127,15 @@ class AdminExecutionResource {
           WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
         )
       )
-      .limit(page_size)
-      .offset(page_index * page_size)
-      .fetch()
+
+    var executions_order = executions.limit(page_size).offset(page_index * page_size)
+    if (sortField != "NO_SORTING") {
+      val orderByField = sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME)
+      val order = if (sortDirection == "desc") orderByField.desc() else orderByField.asc()
+      executions_order = executions.orderBy(order).limit(page_size).offset(page_index * page_size)
+    }
+
+    val workflowEntries = executions_order.fetch()
 
     val availableWorkflowIds = context
       .select(WORKFLOW_USER_ACCESS.WID)
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 45c6f5ba20e..1af7b9245d0 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -23,20 +23,26 @@
   <thead>
     <tr>
       <th
-        [nzSortFn]="sortByWorkflowName"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('workflow_name', $event)"
         nzWidth="16%">
         Workflow (ID)
       </th>
       <th
-        [nzSortFn]="sortByExecutionName"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('execution_name', $event)"
         nzWidth="16%">
         Execution Name (ID)
       </th>
       <th
-        [nzSortFn]="sortByInitiator"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('initiator', $event)"
         nzWidth="12%">
         Initiator
       </th>
@@ -57,8 +63,10 @@
       </th>
       <th nzWidth="10%">Time Used (hh:mm:ss)</th>
       <th
-        [nzSortFn]="sortByCompletedTime"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('end_time', $event)"
         nzWidth="15%">
         End Time
       </th>
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index c802472be3e..6d8a271f8b3 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AdminExecutionService } from "../../../service/admin/execution/admin-execution.service";
 import { Execution } from "../../../../common/type/execution";
-import { NzTableFilterFn, NzTableSortFn } from "ng-zorro-antd/table";
+import { NzTableFilterFn, NzTableQueryParams, NzTableSortFn } from "ng-zorro-antd/table";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { Workflow } from "../../../../common/type/workflow";
@@ -20,6 +20,8 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
   totalWorkflows: number = 0;
   pageSize: number = 6;
   currentPageIndex: number = 0;
+  sortField: string = "NO_SORTING";
+  sortDirection: string = "NO_SORTING";
 
   // This interval function fetches the latest execution list.
   // The interval runs every 1 second (1000 milliseconds).
@@ -32,7 +34,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.adminExecutionService
-      .getExecutionList(this.pageSize, this.currentPageIndex)
+      .getExecutionList(this.pageSize, this.currentPageIndex, this.sortField, this.sortDirection)
       .pipe(untilDestroyed(this))
       .subscribe(executionList => {
         this.listOfExecutions = [...executionList];
@@ -230,11 +232,15 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     this.ngOnInit();
   }
 
-  public sortByWorkflowName: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
-    (b.workflowName || "").localeCompare(a.workflowName);
-  public sortByExecutionName: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
-    (b.executionName || "").localeCompare(a.executionName);
-  public sortByCompletedTime: NzTableSortFn<Execution> = (a: Execution, b: Execution) => b.endTime - a.endTime;
-  public sortByInitiator: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
-    (b.userName || "").localeCompare(a.userName);
+  onSortChange(sortField: string, sortOrder: string | null): void {
+    if (sortField == this.sortField && sortOrder == null) {
+      this.sortField = "NO_SORTING";
+      this.sortDirection = "NO_SORTING";
+      this.ngOnInit();
+    } else if (sortOrder != null) {
+      this.sortField = sortField;
+      this.sortDirection = sortOrder === 'descend' ? 'desc' : 'asc';
+      this.ngOnInit();
+    }
+  }
 }
diff --git a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
index 6e87c74098f..04d93b1784b 100644
--- a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
+++ b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
@@ -12,8 +12,8 @@ export const WORKFLOW_BASE_URL = `${AppSettings.getApiEndpoint()}/admin/executio
 export class AdminExecutionService {
   constructor(private http: HttpClient) {}
 
-  public getExecutionList(pageSize: number, pageIndex: number): Observable<ReadonlyArray<Execution>> {
-    return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}`);
+  public getExecutionList(pageSize: number, pageIndex: number, sortField: string, sortDirection: string): Observable<ReadonlyArray<Execution>> {
+    return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}/${sortField}/${sortDirection}`);
   }
 
   public getTotalWorkflows(): Observable<number> {

From 47ed7a28e4d8b7746534879f0b29c9e0cbde0182 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Wed, 20 Nov 2024 00:01:45 -0800
Subject: [PATCH 09/23] filter function

---
 .../execution/AdminExecutionResource.scala    | 30 ++++++++++++++++---
 .../execution/admin-execution.component.html  |  3 +-
 .../execution/admin-execution.component.ts    | 12 +++++---
 .../execution/admin-execution.service.ts      | 16 ++++++++--
 4 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index cb5c79b1d76..e4fa30b8ad3 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -13,6 +13,7 @@ import javax.annotation.security.RolesAllowed
 import javax.ws.rs._
 import javax.ws.rs.core.MediaType
 import scala.jdk.CollectionConverters.IterableHasAsScala
+import scala.jdk.CollectionConverters._
 
 /**
   * This file handles various request related to saved-executions.
@@ -47,6 +48,18 @@ object AdminExecutionResource {
     }
   }
 
+  def mapToStatus(status: String): Int = {
+    status match {
+      case "READY" => 0
+      case "RUNNING" => 1
+      case "PAUSED" => 2
+      case "COMPLETED" => 3
+      case "FAILED" => 4
+      case "KILLED" => 5
+      case _ => -1 // or throw an exception, depends on your needs
+    }
+  }
+
   val sortFieldMapping = Map(
     "workflow_name" -> WORKFLOW.NAME,
     "execution_name" -> WORKFLOW_EXECUTIONS.NAME,
@@ -89,8 +102,11 @@ class AdminExecutionResource {
                      @PathParam("pageSize") page_size: Int = 20,
                      @PathParam("pageIndex") page_index: Int = 0,
                      @PathParam("sortField") sortField: String = "end_time",
-                     @PathParam("sortDirection") sortDirection: String = "desc"
+                     @PathParam("sortDirection") sortDirection: String = "desc",
+                     @QueryParam("filter") filter: java.util.List[String]
                    ): List[dashboardExecution] = {
+    val filter_status = filter.asScala.map(mapToStatus).toSeq.filter(_ != -1).asJava
+
     val latestExecutionId = context.select(
         WORKFLOW_VERSION.WID,
         DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
@@ -101,7 +117,7 @@ class AdminExecutionResource {
       .groupBy(WORKFLOW_VERSION.WID)
       .asTable("latest_execution_id")
 
-    val executions = context
+    val executions_base = context
       .select(
         WORKFLOW_EXECUTIONS.UID,
         USER.NAME,
@@ -128,11 +144,17 @@ class AdminExecutionResource {
         )
       )
 
-    var executions_order = executions.limit(page_size).offset(page_index * page_size)
+    val executions_filter = if (!filter_status.isEmpty) {
+      executions_base.where(WORKFLOW_EXECUTIONS.STATUS.in(filter_status))
+    } else {
+      executions_base
+    }
+
+    var executions_order = executions_filter.limit(page_size).offset(page_index * page_size)
     if (sortField != "NO_SORTING") {
       val orderByField = sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME)
       val order = if (sortDirection == "desc") orderByField.desc() else orderByField.asc()
-      executions_order = executions.orderBy(order).limit(page_size).offset(page_index * page_size)
+      executions_order = executions_filter.orderBy(order).limit(page_size).offset(page_index * page_size)
     }
 
     val workflowEntries = executions_order.fetch()
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 1af7b9245d0..c5faeab91f9 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -57,7 +57,8 @@
           { text: 'KILLED', value: 'KILLED'},
           { text: 'JUST COMPLETED', value: 'JUST COMPLETED'},
           { text: 'UNKNOWN', value: 'UNKNOWN'}]"
-        [nzFilterFn]="filterByStatus"
+        [nzFilterFn]="true"
+        (nzFilterChange)="onFilterChange($event)"
         nzWidth="16%">
         Status
       </th>
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 6d8a271f8b3..5c5fad6dbd9 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -2,12 +2,10 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AdminExecutionService } from "../../../service/admin/execution/admin-execution.service";
 import { Execution } from "../../../../common/type/execution";
-import { NzTableFilterFn, NzTableQueryParams, NzTableSortFn } from "ng-zorro-antd/table";
+import { NzTableFilterFn } from "ng-zorro-antd/table";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
-import { Workflow } from "../../../../common/type/workflow";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
-import { environment } from "../../../../../environments/environment";
 
 @UntilDestroy()
 @Component({
@@ -22,6 +20,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
   currentPageIndex: number = 0;
   sortField: string = "NO_SORTING";
   sortDirection: string = "NO_SORTING";
+  filter: string[] = [];
 
   // This interval function fetches the latest execution list.
   // The interval runs every 1 second (1000 milliseconds).
@@ -34,7 +33,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.adminExecutionService
-      .getExecutionList(this.pageSize, this.currentPageIndex, this.sortField, this.sortDirection)
+      .getExecutionList(this.pageSize, this.currentPageIndex, this.sortField, this.sortDirection, this.filter)
       .pipe(untilDestroyed(this))
       .subscribe(executionList => {
         this.listOfExecutions = [...executionList];
@@ -243,4 +242,9 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
       this.ngOnInit();
     }
   }
+
+  onFilterChange(filter: any[]): void {
+    this.filter = filter.map(item => String(item));
+    this.ngOnInit();
+  }
 }
diff --git a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
index 04d93b1784b..9bfef471267 100644
--- a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
+++ b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
@@ -1,4 +1,4 @@
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpParams } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
 import { AppSettings } from "../../../../common/app-setting";
@@ -12,8 +12,18 @@ export const WORKFLOW_BASE_URL = `${AppSettings.getApiEndpoint()}/admin/executio
 export class AdminExecutionService {
   constructor(private http: HttpClient) {}
 
-  public getExecutionList(pageSize: number, pageIndex: number, sortField: string, sortDirection: string): Observable<ReadonlyArray<Execution>> {
-    return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}/${sortField}/${sortDirection}`);
+  public getExecutionList(
+    pageSize: number, 
+    pageIndex: number, 
+    sortField: string, 
+    sortDirection: string,
+    filter: string[]
+  ): Observable<ReadonlyArray<Execution>> {
+    const params = new HttpParams().set('filter', filter.join(','));
+    return this.http.get<ReadonlyArray<Execution>>(
+      `${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}/${sortField}/${sortDirection}`,
+      { params }
+    );
   }
 
   public getTotalWorkflows(): Observable<number> {

From 4f112132a7206d97fc856b241a6d7520c79e9655 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Thu, 21 Nov 2024 13:42:38 -0800
Subject: [PATCH 10/23] removing hardcode pageSize

---
 .../admin/execution/admin-execution.component.ts     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 5c5fad6dbd9..3143703596f 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, AfterViewInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AdminExecutionService } from "../../../service/admin/execution/admin-execution.service";
 import { Execution } from "../../../../common/type/execution";
@@ -12,7 +12,7 @@ import { WorkflowWebsocketService } from "../../../../workspace/service/workflow
   templateUrl: "./admin-execution.component.html",
   styleUrls: ["./admin-execution.component.scss"],
 })
-export class AdminExecutionComponent implements OnInit, OnDestroy {
+export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit {
   listOfExecutions: ReadonlyArray<Execution> = [];
   isLoading: boolean = true;
   totalWorkflows: number = 0;
@@ -49,6 +49,14 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
       );
   }
 
+  ngAfterViewInit() {
+    const tableContainer = document.querySelector('.execution-table');
+    if (tableContainer) {
+      const containerHeight = tableContainer.clientHeight;
+      this.pageSize = Math.floor(containerHeight / 12);
+    };
+  }
+
   ngOnDestroy(): void {
     clearInterval(this.timer);
   }

From 21efcb64150c71dbd9d1dd3da6a4ee7824535016 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Thu, 21 Nov 2024 13:52:37 -0800
Subject: [PATCH 11/23] comments added.

---
 .../execution/AdminExecutionResource.scala    | 25 ++++++++++++-------
 .../execution/admin-execution.component.ts    | 20 ++++++++++++++-
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index e4fa30b8ad3..aaaf0d77ade 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -92,7 +92,8 @@ class AdminExecutionResource {
   }
 
   /**
-    * This method retrieves all existing executions
+    * This method retrieves latest execution of each workflow.
+    * The returned executions are sorted and filtered according to the parameters.
     */
   @GET
   @Path("/executionList/{pageSize}/{pageIndex}/{sortField}/{sortDirection}")
@@ -107,6 +108,7 @@ class AdminExecutionResource {
                    ): List[dashboardExecution] = {
     val filter_status = filter.asScala.map(mapToStatus).toSeq.filter(_ != -1).asJava
 
+    // Retrieve the latest execution id for each workflow
     val latestExecutionId = context.select(
         WORKFLOW_VERSION.WID,
         DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
@@ -117,7 +119,8 @@ class AdminExecutionResource {
       .groupBy(WORKFLOW_VERSION.WID)
       .asTable("latest_execution_id")
 
-    val executions_base = context
+    // Base query that retrieves latest execution info for each workflow without sorting and filtering.
+    val executions_base_query = context
       .select(
         WORKFLOW_EXECUTIONS.UID,
         USER.NAME,
@@ -144,28 +147,32 @@ class AdminExecutionResource {
         )
       )
 
-    val executions_filter = if (!filter_status.isEmpty) {
-      executions_base.where(WORKFLOW_EXECUTIONS.STATUS.in(filter_status))
+    // Apply filter if the status are not empty.
+    val executions_apply_filter = if (!filter_status.isEmpty) {
+      executions_base_query.where(WORKFLOW_EXECUTIONS.STATUS.in(filter_status))
     } else {
-      executions_base
+      executions_base_query
     }
 
-    var executions_order = executions_filter.limit(page_size).offset(page_index * page_size)
+    // Apply sorting if user specified.
+    var executions_apply_order = executions_apply_filter.limit(page_size).offset(page_index * page_size)
     if (sortField != "NO_SORTING") {
       val orderByField = sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME)
       val order = if (sortDirection == "desc") orderByField.desc() else orderByField.asc()
-      executions_order = executions_filter.orderBy(order).limit(page_size).offset(page_index * page_size)
+      executions_apply_order = executions_apply_filter.orderBy(order).limit(page_size).offset(page_index * page_size)
     }
 
-    val workflowEntries = executions_order.fetch()
+    val executions = executions_apply_order.fetch()
 
+    // Retrieve the id of each workflow that the user has access to.
     val availableWorkflowIds = context
       .select(WORKFLOW_USER_ACCESS.WID)
       .from(WORKFLOW_USER_ACCESS)
       .where(WORKFLOW_USER_ACCESS.UID.eq(current_user.getUid))
       .fetchInto(classOf[UInteger])
 
-    workflowEntries
+    // Calculate the statistics needed for each execution.
+    executions
       .map(workflowRecord => {
         val startingTime =
           workflowRecord.get(WORKFLOW_EXECUTIONS.STARTING_TIME).getTime
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 3143703596f..5905b35cb78 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -49,11 +49,14 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
       );
   }
 
+  /**
+   * Update the page size according to table's height after all components being rendered.
+   */
   ngAfterViewInit() {
     const tableContainer = document.querySelector('.execution-table');
     if (tableContainer) {
       const containerHeight = tableContainer.clientHeight;
-      this.pageSize = Math.floor(containerHeight / 12);
+      this.pageSize = Math.floor((containerHeight - 11) / 11);
     };
   }
 
@@ -234,11 +237,21 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
     // socket.closeWebsocket();
   }
 
+  /**
+   * Update the current page index when user selects page.
+   * @param pageIndex 
+   */
   onPageIndexChange(pageIndex: number): void {
     this.currentPageIndex = pageIndex - 1;
     this.ngOnInit();
   }
 
+  /**
+   * Reorder the executions based on the selected field and order.
+   * The sorting function is implemented in the backend.
+   * @param sortField 
+   * @param sortOrder 
+   */
   onSortChange(sortField: string, sortOrder: string | null): void {
     if (sortField == this.sortField && sortOrder == null) {
       this.sortField = "NO_SORTING";
@@ -251,6 +264,11 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+  /**
+   * Filter the executions based on the status user checked.
+   * The filtering function in implemented in the backend.
+   * @param filter 
+   */
   onFilterChange(filter: any[]): void {
     this.filter = filter.map(item => String(item));
     this.ngOnInit();

From 3acada286262b5854428f32ba497dfddb331fe2c Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Thu, 21 Nov 2024 13:54:15 -0800
Subject: [PATCH 12/23] update

---
 .../dashboard/admin/execution/AdminExecutionResource.scala     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index aaaf0d77ade..4008f187592 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -92,7 +92,7 @@ class AdminExecutionResource {
   }
 
   /**
-    * This method retrieves latest execution of each workflow.
+    * This method retrieves latest execution of each workflow for specified page.
     * The returned executions are sorted and filtered according to the parameters.
     */
   @GET
@@ -120,6 +120,7 @@ class AdminExecutionResource {
       .asTable("latest_execution_id")
 
     // Base query that retrieves latest execution info for each workflow without sorting and filtering.
+    // Only retrieving executions in current page according to pageSize and pageIndex parameters.
     val executions_base_query = context
       .select(
         WORKFLOW_EXECUTIONS.UID,

From 1ab88740aabc4305ab8f13c391021a03498d365d Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Thu, 21 Nov 2024 13:56:27 -0800
Subject: [PATCH 13/23] frontend format fix

---
 .../execution/admin-execution.component.html  |  7 +++++--
 .../execution/admin-execution.component.scss  | 16 +++++++--------
 .../execution/admin-execution.component.ts    | 20 +++++++++----------
 .../execution/admin-execution.service.ts      |  8 ++++----
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index c5faeab91f9..7f3b2f993d1 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -162,6 +162,9 @@
 
 <ng-template #loadingTemplate>
   <div class="loading-container">
-    <nz-spin nzTip="Loading..." [nzSpinning]="true" nzSize="large"></nz-spin>
+    <nz-spin
+      nzTip="Loading..."
+      [nzSpinning]="true"
+      nzSize="large"></nz-spin>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
index cc34f8c7306..0fd92175e9c 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
@@ -1,12 +1,12 @@
 .loading-container {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    height: 300px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 300px;
 }
 
 .execution-table {
-    display: block;
-    grid-row-start: 3;
-    grid-row-end: 4;
-}
\ No newline at end of file
+  display: block;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 5905b35cb78..eaebd53726c 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -40,24 +40,22 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
         this.updateTimeStatus();
         this.isLoading = false;
       });
-    
+
     this.adminExecutionService
       .getTotalWorkflows()
       .pipe(untilDestroyed(this))
-      .subscribe(
-        total => this.totalWorkflows = total
-      );
+      .subscribe(total => (this.totalWorkflows = total));
   }
 
   /**
    * Update the page size according to table's height after all components being rendered.
    */
   ngAfterViewInit() {
-    const tableContainer = document.querySelector('.execution-table');
+    const tableContainer = document.querySelector(".execution-table");
     if (tableContainer) {
       const containerHeight = tableContainer.clientHeight;
       this.pageSize = Math.floor((containerHeight - 11) / 11);
-    };
+    }
   }
 
   ngOnDestroy(): void {
@@ -239,7 +237,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
 
   /**
    * Update the current page index when user selects page.
-   * @param pageIndex 
+   * @param pageIndex
    */
   onPageIndexChange(pageIndex: number): void {
     this.currentPageIndex = pageIndex - 1;
@@ -249,8 +247,8 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
   /**
    * Reorder the executions based on the selected field and order.
    * The sorting function is implemented in the backend.
-   * @param sortField 
-   * @param sortOrder 
+   * @param sortField
+   * @param sortOrder
    */
   onSortChange(sortField: string, sortOrder: string | null): void {
     if (sortField == this.sortField && sortOrder == null) {
@@ -259,7 +257,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
       this.ngOnInit();
     } else if (sortOrder != null) {
       this.sortField = sortField;
-      this.sortDirection = sortOrder === 'descend' ? 'desc' : 'asc';
+      this.sortDirection = sortOrder === "descend" ? "desc" : "asc";
       this.ngOnInit();
     }
   }
@@ -267,7 +265,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
   /**
    * Filter the executions based on the status user checked.
    * The filtering function in implemented in the backend.
-   * @param filter 
+   * @param filter
    */
   onFilterChange(filter: any[]): void {
     this.filter = filter.map(item => String(item));
diff --git a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
index 9bfef471267..82cda727f6a 100644
--- a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
+++ b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
@@ -13,13 +13,13 @@ export class AdminExecutionService {
   constructor(private http: HttpClient) {}
 
   public getExecutionList(
-    pageSize: number, 
-    pageIndex: number, 
-    sortField: string, 
+    pageSize: number,
+    pageIndex: number,
+    sortField: string,
     sortDirection: string,
     filter: string[]
   ): Observable<ReadonlyArray<Execution>> {
-    const params = new HttpParams().set('filter', filter.join(','));
+    const params = new HttpParams().set("filter", filter.join(","));
     return this.http.get<ReadonlyArray<Execution>>(
       `${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}/${sortField}/${sortDirection}`,
       { params }

From c2ac1a07bfa97bc66bde311e31f6c4c65a70e864 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Thu, 21 Nov 2024 13:58:52 -0800
Subject: [PATCH 14/23] backend format fix

---
 .../execution/AdminExecutionResource.scala    | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 4008f187592..0533a3f4fc8 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -12,7 +12,6 @@ import org.jooq.types.UInteger
 import javax.annotation.security.RolesAllowed
 import javax.ws.rs._
 import javax.ws.rs.core.MediaType
-import scala.jdk.CollectionConverters.IterableHasAsScala
 import scala.jdk.CollectionConverters._
 
 /**
@@ -50,13 +49,13 @@ object AdminExecutionResource {
 
   def mapToStatus(status: String): Int = {
     status match {
-      case "READY" => 0
-      case "RUNNING" => 1
-      case "PAUSED" => 2
+      case "READY"     => 0
+      case "RUNNING"   => 1
+      case "PAUSED"    => 2
       case "COMPLETED" => 3
-      case "FAILED" => 4
-      case "KILLED" => 5
-      case _ => -1 // or throw an exception, depends on your needs
+      case "FAILED"    => 4
+      case "KILLED"    => 5
+      case _           => -1 // or throw an exception, depends on your needs
     }
   }
 
@@ -78,7 +77,8 @@ class AdminExecutionResource {
   @Path("/totalWorkflow")
   @Produces()
   def getTotalWorkflows: Int = {
-    context.select(
+    context
+      .select(
         DSL.countDistinct(WORKFLOW.WID)
       )
       .from(WORKFLOW_EXECUTIONS)
@@ -99,17 +99,18 @@ class AdminExecutionResource {
   @Path("/executionList/{pageSize}/{pageIndex}/{sortField}/{sortDirection}")
   @Produces(Array(MediaType.APPLICATION_JSON))
   def listWorkflows(
-                     @Auth current_user: SessionUser,
-                     @PathParam("pageSize") page_size: Int = 20,
-                     @PathParam("pageIndex") page_index: Int = 0,
-                     @PathParam("sortField") sortField: String = "end_time",
-                     @PathParam("sortDirection") sortDirection: String = "desc",
-                     @QueryParam("filter") filter: java.util.List[String]
-                   ): List[dashboardExecution] = {
+      @Auth current_user: SessionUser,
+      @PathParam("pageSize") page_size: Int = 20,
+      @PathParam("pageIndex") page_index: Int = 0,
+      @PathParam("sortField") sortField: String = "end_time",
+      @PathParam("sortDirection") sortDirection: String = "desc",
+      @QueryParam("filter") filter: java.util.List[String]
+  ): List[dashboardExecution] = {
     val filter_status = filter.asScala.map(mapToStatus).toSeq.filter(_ != -1).asJava
 
     // Retrieve the latest execution id for each workflow
-    val latestExecutionId = context.select(
+    val latestExecutionId = context
+      .select(
         WORKFLOW_VERSION.WID,
         DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
       )
@@ -143,7 +144,8 @@ class AdminExecutionResource {
       .join(latestExecutionId)
       .on(
         DSL.and(
-          WORKFLOW_EXECUTIONS.EID.eq(latestExecutionId.field("max_eid").asInstanceOf[Field[UInteger]]),
+          WORKFLOW_EXECUTIONS.EID
+            .eq(latestExecutionId.field("max_eid").asInstanceOf[Field[UInteger]]),
           WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
         )
       )
@@ -156,11 +158,13 @@ class AdminExecutionResource {
     }
 
     // Apply sorting if user specified.
-    var executions_apply_order = executions_apply_filter.limit(page_size).offset(page_index * page_size)
+    var executions_apply_order =
+      executions_apply_filter.limit(page_size).offset(page_index * page_size)
     if (sortField != "NO_SORTING") {
       val orderByField = sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME)
       val order = if (sortDirection == "desc") orderByField.desc() else orderByField.asc()
-      executions_apply_order = executions_apply_filter.orderBy(order).limit(page_size).offset(page_index * page_size)
+      executions_apply_order =
+        executions_apply_filter.orderBy(order).limit(page_size).offset(page_index * page_size)
     }
 
     val executions = executions_apply_order.fetch()

From 8ecbf34b57ba6c45ab17dc258e33b83458e84b4f Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Thu, 21 Nov 2024 18:21:39 -0800
Subject: [PATCH 15/23] set min page size to 6

---
 .../component/admin/execution/admin-execution.component.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index eaebd53726c..4a74ff97cc4 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -54,7 +54,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
     const tableContainer = document.querySelector(".execution-table");
     if (tableContainer) {
       const containerHeight = tableContainer.clientHeight;
-      this.pageSize = Math.floor((containerHeight - 11) / 11);
+      this.pageSize = Math.max(6, Math.floor((containerHeight - 11) / 11));
     }
   }
 

From b2f441215e3ae92552cc9f0938a2245f87d07265 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 12:47:14 -0800
Subject: [PATCH 16/23] make no_sorting constant

---
 .../admin/execution/admin-execution.component.ts       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 4a74ff97cc4..2a4a16a0dd3 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -7,6 +7,8 @@ import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
 
+export const NO_SORT = "NO_SORTING";
+
 @UntilDestroy()
 @Component({
   templateUrl: "./admin-execution.component.html",
@@ -18,8 +20,8 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
   totalWorkflows: number = 0;
   pageSize: number = 6;
   currentPageIndex: number = 0;
-  sortField: string = "NO_SORTING";
-  sortDirection: string = "NO_SORTING";
+  sortField: string = NO_SORT;
+  sortDirection: string = NO_SORT;
   filter: string[] = [];
 
   // This interval function fetches the latest execution list.
@@ -252,8 +254,8 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
    */
   onSortChange(sortField: string, sortOrder: string | null): void {
     if (sortField == this.sortField && sortOrder == null) {
-      this.sortField = "NO_SORTING";
-      this.sortDirection = "NO_SORTING";
+      this.sortField = NO_SORT;
+      this.sortDirection = NO_SORT;
       this.ngOnInit();
     } else if (sortOrder != null) {
       this.sortField = sortField;

From 118011d8eb41ca3cd2e533b3f19f632366e45d0c Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 15:57:47 -0800
Subject: [PATCH 17/23] merge two queries together

---
 .../execution/AdminExecutionResource.scala    | 43 +++++++++++--------
 .../execution/admin-execution.component.ts    |  2 +-
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 0533a3f4fc8..0cd499e41d7 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -109,16 +109,16 @@ class AdminExecutionResource {
     val filter_status = filter.asScala.map(mapToStatus).toSeq.filter(_ != -1).asJava
 
     // Retrieve the latest execution id for each workflow
-    val latestExecutionId = context
-      .select(
-        WORKFLOW_VERSION.WID,
-        DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
-      )
-      .from(WORKFLOW_EXECUTIONS)
-      .join(WORKFLOW_VERSION)
-      .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
-      .groupBy(WORKFLOW_VERSION.WID)
-      .asTable("latest_execution_id")
+//    val latestExecutionId = context
+//      .select(
+//        WORKFLOW_VERSION.WID,
+//        DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
+//      )
+//      .from(WORKFLOW_EXECUTIONS)
+//      .join(WORKFLOW_VERSION)
+//      .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
+//      .groupBy(WORKFLOW_VERSION.WID)
+//      .asTable("latest_execution_id")
 
     // Base query that retrieves latest execution info for each workflow without sorting and filtering.
     // Only retrieving executions in current page according to pageSize and pageIndex parameters.
@@ -141,14 +141,23 @@ class AdminExecutionResource {
       .on(WORKFLOW_EXECUTIONS.UID.eq(USER.UID))
       .join(WORKFLOW)
       .on(WORKFLOW.WID.eq(WORKFLOW_VERSION.WID))
-      .join(latestExecutionId)
-      .on(
-        DSL.and(
-          WORKFLOW_EXECUTIONS.EID
-            .eq(latestExecutionId.field("max_eid").asInstanceOf[Field[UInteger]]),
-          WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
-        )
+      .naturalJoin(
+        context
+          .select(
+            DSL.max(WORKFLOW_EXECUTIONS.EID).as("eid")
+          )
+          .from(WORKFLOW_EXECUTIONS)
+          .join(WORKFLOW_VERSION)
+          .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
+          .groupBy(WORKFLOW_VERSION.WID)
       )
+//      .on(
+//        DSL.and(
+//          WORKFLOW_EXECUTIONS.EID
+//            .eq(latestExecutionId.field("max_eid").asInstanceOf[Field[UInteger]]),
+//          WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
+//        )
+//      )
 
     // Apply filter if the status are not empty.
     val executions_apply_filter = if (!filter_status.isEmpty) {
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 2a4a16a0dd3..68b0efe60a0 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -7,7 +7,7 @@ import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
 
-export const NO_SORT = "NO_SORTING";
+export const NO_SORT = "NO_SORTING"; 
 
 @UntilDestroy()
 @Component({

From ab7bf5182bbc6cddf6c28f42a3db72c1d91fdc6b Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 16:15:57 -0800
Subject: [PATCH 18/23] add page size changer

---
 .../execution/AdminExecutionResource.scala    | 19 ---------
 .../execution/admin-execution.component.html  |  4 +-
 .../execution/admin-execution.component.ts    | 39 +++++++------------
 3 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 0cd499e41d7..bd61a9cd510 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -108,18 +108,6 @@ class AdminExecutionResource {
   ): List[dashboardExecution] = {
     val filter_status = filter.asScala.map(mapToStatus).toSeq.filter(_ != -1).asJava
 
-    // Retrieve the latest execution id for each workflow
-//    val latestExecutionId = context
-//      .select(
-//        WORKFLOW_VERSION.WID,
-//        DSL.max(WORKFLOW_EXECUTIONS.EID).as("max_eid")
-//      )
-//      .from(WORKFLOW_EXECUTIONS)
-//      .join(WORKFLOW_VERSION)
-//      .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
-//      .groupBy(WORKFLOW_VERSION.WID)
-//      .asTable("latest_execution_id")
-
     // Base query that retrieves latest execution info for each workflow without sorting and filtering.
     // Only retrieving executions in current page according to pageSize and pageIndex parameters.
     val executions_base_query = context
@@ -151,13 +139,6 @@ class AdminExecutionResource {
           .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
           .groupBy(WORKFLOW_VERSION.WID)
       )
-//      .on(
-//        DSL.and(
-//          WORKFLOW_EXECUTIONS.EID
-//            .eq(latestExecutionId.field("max_eid").asInstanceOf[Field[UInteger]]),
-//          WORKFLOW_VERSION.WID.eq(latestExecutionId.field(WORKFLOW_VERSION.WID))
-//        )
-//      )
 
     // Apply filter if the status are not empty.
     val executions_apply_filter = if (!filter_status.isEmpty) {
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 7f3b2f993d1..8bd0b71b826 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -10,6 +10,7 @@
 
 <nz-table
   #basicTable
+  nzShowSizeChanger
   [nzData]="listOfExecutions"
   [nzLoading]="isLoading"
   [nzLoadingIndicator]="loadingTemplate"
@@ -18,7 +19,8 @@
   [nzTotal]="totalWorkflows"
   [nzPageSize]="pageSize"
   [nzPageIndex]="currentPageIndex + 1"
-  (nzPageIndexChange)="onPageIndexChange($event)"
+  [nzPageSizeOptions]="[5, 10, 20, 50]"
+  (nzQueryParams)="onQueryParamsChange($event)"
   class="execution-table">
   <thead>
     <tr>
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 68b0efe60a0..75dc5ce8e69 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnDestroy, OnInit, AfterViewInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AdminExecutionService } from "../../../service/admin/execution/admin-execution.service";
 import { Execution } from "../../../../common/type/execution";
-import { NzTableFilterFn } from "ng-zorro-antd/table";
+import { NzTableFilterFn, NzTableQueryParams } from "ng-zorro-antd/table";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
@@ -14,11 +14,11 @@ export const NO_SORT = "NO_SORTING";
   templateUrl: "./admin-execution.component.html",
   styleUrls: ["./admin-execution.component.scss"],
 })
-export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit {
+export class AdminExecutionComponent implements OnInit, OnDestroy {
   listOfExecutions: ReadonlyArray<Execution> = [];
   isLoading: boolean = true;
   totalWorkflows: number = 0;
-  pageSize: number = 6;
+  pageSize: number = 5;
   currentPageIndex: number = 0;
   sortField: string = NO_SORT;
   sortDirection: string = NO_SORT;
@@ -49,17 +49,6 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
       .subscribe(total => (this.totalWorkflows = total));
   }
 
-  /**
-   * Update the page size according to table's height after all components being rendered.
-   */
-  ngAfterViewInit() {
-    const tableContainer = document.querySelector(".execution-table");
-    if (tableContainer) {
-      const containerHeight = tableContainer.clientHeight;
-      this.pageSize = Math.max(6, Math.floor((containerHeight - 11) / 11));
-    }
-  }
-
   ngOnDestroy(): void {
     clearInterval(this.timer);
   }
@@ -237,15 +226,6 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
     // socket.closeWebsocket();
   }
 
-  /**
-   * Update the current page index when user selects page.
-   * @param pageIndex
-   */
-  onPageIndexChange(pageIndex: number): void {
-    this.currentPageIndex = pageIndex - 1;
-    this.ngOnInit();
-  }
-
   /**
    * Reorder the executions based on the selected field and order.
    * The sorting function is implemented in the backend.
@@ -264,6 +244,17 @@ export class AdminExecutionComponent implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+  onQueryParamsChange(params: NzTableQueryParams): void {
+    const { pageSize, pageIndex, sort, filter } = params;
+    if (pageSize != this.pageSize) {
+      this.pageSize = pageSize;
+      this.ngOnInit();
+    } else if (pageIndex != this.currentPageIndex) {
+      this.currentPageIndex = pageIndex - 1;
+      this.ngOnInit();
+    }
+  }
+
   /**
    * Filter the executions based on the status user checked.
    * The filtering function in implemented in the backend.

From ae05ded147370cece3904ffe44a2327e4972d280 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 16:22:33 -0800
Subject: [PATCH 19/23] change page index when page size changed if necessary

---
 .../admin/execution/admin-execution.component.ts      | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 75dc5ce8e69..c595713d830 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -19,6 +19,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
   isLoading: boolean = true;
   totalWorkflows: number = 0;
   pageSize: number = 5;
+  // CurrentPageIndex is 0-indexed, but pageIndex in HTML is 1-indexed.
   currentPageIndex: number = 0;
   sortField: string = NO_SORT;
   sortDirection: string = NO_SORT;
@@ -244,12 +245,20 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Function that displays executions in respond to page size and page index changes.
+   * @param params 
+   */
   onQueryParamsChange(params: NzTableQueryParams): void {
     const { pageSize, pageIndex, sort, filter } = params;
     if (pageSize != this.pageSize) {
       this.pageSize = pageSize;
+      // If the user is at the last page, and increment the pageSize, move user to new last page index if necessary.
+      if (Math.ceil(this.totalWorkflows / pageSize) < (this.currentPageIndex + 1)) {
+        this.currentPageIndex = Math.ceil(this.totalWorkflows / pageSize) - 1;
+      }
       this.ngOnInit();
-    } else if (pageIndex != this.currentPageIndex) {
+    } else if ((pageIndex - 1) != this.currentPageIndex) {
       this.currentPageIndex = pageIndex - 1;
       this.ngOnInit();
     }

From 182fae517871dcfbcd37e255450e077af994e2f8 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 16:26:04 -0800
Subject: [PATCH 20/23] give more width to end time column

---
 .../admin/execution/admin-execution.component.html          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 8bd0b71b826..a7945171c1b 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -61,7 +61,7 @@
           { text: 'UNKNOWN', value: 'UNKNOWN'}]"
         [nzFilterFn]="true"
         (nzFilterChange)="onFilterChange($event)"
-        nzWidth="16%">
+        nzWidth="13%">
         Status
       </th>
       <th nzWidth="10%">Time Used (hh:mm:ss)</th>
@@ -70,10 +70,10 @@
         [nzSortFn]="true"
         [nzSortDirections]="['ascend', 'descend', null]"
         (nzSortOrderChange)="onSortChange('end_time', $event)"
-        nzWidth="15%">
+        nzWidth="20%">
         End Time
       </th>
-      <th nzWidth="15%">Action</th>
+      <th nzWidth="13%">Action</th>
     </tr>
   </thead>
   <tbody>

From 2ccd0d9051406f9d60e442a16c67669c4c1b6f06 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 17:00:10 -0800
Subject: [PATCH 21/23] fmt fix

---
 .../admin/execution/AdminExecutionResource.scala          | 1 -
 .../admin/execution/admin-execution.component.ts          | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index bd61a9cd510..3927b6aef43 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -5,7 +5,6 @@ import edu.uci.ics.texera.web.auth.SessionUser
 import edu.uci.ics.texera.web.model.jooq.generated.Tables._
 import edu.uci.ics.texera.web.resource.dashboard.admin.execution.AdminExecutionResource._
 import io.dropwizard.auth.Auth
-import org.jooq.Field
 import org.jooq.impl.DSL
 import org.jooq.types.UInteger
 
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index c595713d830..315664ccf75 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -7,7 +7,7 @@ import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
 
-export const NO_SORT = "NO_SORTING"; 
+export const NO_SORT = "NO_SORTING";
 
 @UntilDestroy()
 @Component({
@@ -247,18 +247,18 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
 
   /**
    * Function that displays executions in respond to page size and page index changes.
-   * @param params 
+   * @param params
    */
   onQueryParamsChange(params: NzTableQueryParams): void {
     const { pageSize, pageIndex, sort, filter } = params;
     if (pageSize != this.pageSize) {
       this.pageSize = pageSize;
       // If the user is at the last page, and increment the pageSize, move user to new last page index if necessary.
-      if (Math.ceil(this.totalWorkflows / pageSize) < (this.currentPageIndex + 1)) {
+      if (Math.ceil(this.totalWorkflows / pageSize) < this.currentPageIndex + 1) {
         this.currentPageIndex = Math.ceil(this.totalWorkflows / pageSize) - 1;
       }
       this.ngOnInit();
-    } else if ((pageIndex - 1) != this.currentPageIndex) {
+    } else if (pageIndex - 1 != this.currentPageIndex) {
       this.currentPageIndex = pageIndex - 1;
       this.ngOnInit();
     }

From 6944137999463e87233eb8c2135906779e39b5df Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sat, 23 Nov 2024 17:07:00 -0800
Subject: [PATCH 22/23] make the table scrollable

---
 .../component/admin/execution/admin-execution.component.html     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index a7945171c1b..66ebf1dbfcd 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -11,6 +11,7 @@
 <nz-table
   #basicTable
   nzShowSizeChanger
+  [nzScroll]="{y: '500px'}"
   [nzData]="listOfExecutions"
   [nzLoading]="isLoading"
   [nzLoadingIndicator]="loadingTemplate"

From 3bc61f29f4669f861792ef7bcd38f0319a3eb1f2 Mon Sep 17 00:00:00 2001
From: MiuMiuMiue <zhey16@uci.edu>
Date: Sun, 24 Nov 2024 20:22:44 -0800
Subject: [PATCH 23/23] refactor backend code

---
 .../admin/execution/AdminExecutionResource.scala      | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 3927b6aef43..7fe59eef34f 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -150,10 +150,13 @@ class AdminExecutionResource {
     var executions_apply_order =
       executions_apply_filter.limit(page_size).offset(page_index * page_size)
     if (sortField != "NO_SORTING") {
-      val orderByField = sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME)
-      val order = if (sortDirection == "desc") orderByField.desc() else orderByField.asc()
-      executions_apply_order =
-        executions_apply_filter.orderBy(order).limit(page_size).offset(page_index * page_size)
+      executions_apply_order = executions_apply_filter
+        .orderBy(
+          if (sortDirection == "desc") sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME).desc()
+          else sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME).asc()
+        )
+        .limit(page_size)
+        .offset(page_index * page_size)
     }
 
     val executions = executions_apply_order.fetch()