From 3dbc0fcdabdc39b99fd760c25c5256b1217b08fa Mon Sep 17 00:00:00 2001
From: Tzu-Hua Lan <blue.tzuhua@gmail.com>
Date: Mon, 21 Oct 2024 17:03:38 +0800
Subject: [PATCH 1/2] [YUNIKORN-2829] Improve table layout for Applications

---
 .../apps-view/apps-view.component.html        | 26 +++++++++++--------
 .../apps-view/apps-view.component.ts          | 10 +++----
 src/app/models/app-info.model.ts              | 21 ++++++++++++---
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/app/components/apps-view/apps-view.component.html b/src/app/components/apps-view/apps-view.component.html
index 5c85aca8..e05ddd61 100644
--- a/src/app/components/apps-view/apps-view.component.html
+++ b/src/app/components/apps-view/apps-view.component.html
@@ -62,15 +62,19 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header [style.flex]="columnDef.colWidth || 1">{{ columnDef.colName
           }}</mat-header-cell>
 
-        <ng-container *ngIf="columnDef.colId === 'submissionTime'; else renderNext_1">
-          <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">{{
-            element['formattedSubmissionTime'] }}</mat-cell>
-        </ng-container>
-
-        <ng-container *ngIf="columnDef.colId === 'lastStateChangeTime'; else renderNext_1">
-          <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">{{
-            element['formattedlastStateChangeTime'] }}</mat-cell>
-        </ng-container>
+          <ng-container *ngIf="columnDef.colId === 'submissionTime'; else renderNext_1">
+            <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
+              <div>{{ element['formattedSubmissionDate'] }}</div>
+              <div>{{ element['formattedSubmissionTime'] }}</div>
+            </mat-cell>
+          </ng-container>
+          
+          <ng-container *ngIf="columnDef.colId === 'lastStateChangeTime'; else renderNext_1">
+            <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
+              <div>{{ element['formattedLastStateChangeDate'] }}</div>
+              <div>{{ element['formattedLastStateChangeTime'] }}</div>
+            </mat-cell>
+          </ng-container>
 
         <ng-template #renderNext_1>
           <ng-container
@@ -98,7 +102,7 @@
 
           <ng-template #renderNext_1>
             <ng-container *ngIf="columnDef.colFormatter; else renderNext_2">
-              <mat-cell *matCellDef="let element">
+              <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
                 <span [innerText]="columnDef.colFormatter(element[columnDef.colId])"></span>
               </mat-cell>
             </ng-container>
@@ -106,7 +110,7 @@
         </ng-template>
 
         <ng-template #renderNext_2>
-          <mat-cell *matCellDef="let element">{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
+          <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
         </ng-template>
       </ng-container>
 
diff --git a/src/app/components/apps-view/apps-view.component.ts b/src/app/components/apps-view/apps-view.component.ts
index c65d5cba..df548c69 100644
--- a/src/app/components/apps-view/apps-view.component.ts
+++ b/src/app/components/apps-view/apps-view.component.ts
@@ -101,30 +101,28 @@ export class AppsViewComponent implements OnInit {
     this.appSort.sort({ id: 'submissionTime', start: 'desc', disableClear: false });
 
     this.appColumnDef = [
-      { colId: 'applicationId', colName: 'Application ID', colWidth: 1 },
-      { colId: 'applicationState', colName: 'Application State', colWidth: 1 },
+      { colId: 'applicationId', colName: 'Application ID', colWidth: 2 },
+      { colId: 'applicationState', colName: 'Application State', colWidth: 0.5 },
       {
         colId: 'lastStateChangeTime',
         colName: 'Last State Change Time',
-        colFormatter: CommonUtil.timeColumnFormatter,
         colWidth: 1,
       },
       {
         colId: 'usedResource',
         colName: 'Used Resource',
         colFormatter: CommonUtil.resourceColumnFormatter,
-        colWidth: 2,
+        colWidth: 1.5,
       },
       {
         colId: 'pendingResource',
         colName: 'Pending Resource',
         colFormatter: CommonUtil.resourceColumnFormatter,
-        colWidth: 2,
+        colWidth: 1.5,
       },
       {
         colId: 'submissionTime',
         colName: 'Submission Time',
-        colFormatter: CommonUtil.timeColumnFormatter,
         colWidth: 1,
       },
     ];
diff --git a/src/app/models/app-info.model.ts b/src/app/models/app-info.model.ts
index 3e3c1a07..33f1b083 100644
--- a/src/app/models/app-info.model.ts
+++ b/src/app/models/app-info.model.ts
@@ -36,17 +36,30 @@ export class AppInfo {
     public allocations: AllocationInfo[] | null
   ) {}
 
+  get formattedSubmissionDate() {
+    const millisecs = Math.round(this.submissionTime / (1000 * 1000));
+    return moment(millisecs).format('YYYY/MM/DD');
+  }
+  
   get formattedSubmissionTime() {
     const millisecs = Math.round(this.submissionTime / (1000 * 1000));
-    return moment(millisecs).format('YYYY/MM/DD HH:mm:ss');
+    return moment(millisecs).format('HH:mm:ss');
   }
-
-  get formattedlastStateChangeTime() {
+  
+  get formattedLastStateChangeDate() {
+    if(this.lastStateChangeTime==null){
+      return 'n/a'
+    }
+    const millisecs = Math.round(this.lastStateChangeTime! / (1000 * 1000));
+    return moment(millisecs).format('YYYY/MM/DD');
+  }
+  
+  get formattedLastStateChangeTime() {
     if(this.lastStateChangeTime==null){
       return 'n/a'
     }
     const millisecs = Math.round(this.lastStateChangeTime! / (1000 * 1000));
-    return moment(millisecs).format('YYYY/MM/DD HH:mm:ss');
+    return moment(millisecs).format('HH:mm:ss');
   }
 
   get formattedFinishedTime() {

From 19e36ef3a81a2bf42c916b49ca17cde5bf763e7d Mon Sep 17 00:00:00 2001
From: Tzu-Hua Lan <blue.tzuhua@gmail.com>
Date: Fri, 15 Nov 2024 17:56:40 +0800
Subject: [PATCH 2/2] revert changes

---
 .../apps-view/apps-view.component.html        |  4 ++--
 src/app/models/app-info.model.ts              | 21 ++++---------------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/app/components/apps-view/apps-view.component.html b/src/app/components/apps-view/apps-view.component.html
index 411f4a60..5e44df06 100644
--- a/src/app/components/apps-view/apps-view.component.html
+++ b/src/app/components/apps-view/apps-view.component.html
@@ -95,7 +95,7 @@
 
           <ng-template #renderNext_1>
             <ng-container *ngIf="columnDef.colFormatter; else renderNext_2">
-              <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">
+              <mat-cell *matCellDef="let element">
                 <span [innerText]="columnDef.colFormatter(element[columnDef.colId])"></span>
               </mat-cell>
             </ng-container>
@@ -103,7 +103,7 @@
         </ng-template>
 
         <ng-template #renderNext_2>
-          <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth || 1">{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
+          <mat-cell *matCellDef="let element">{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
         </ng-template>
       </ng-container>
 
diff --git a/src/app/models/app-info.model.ts b/src/app/models/app-info.model.ts
index 33f1b083..3e3c1a07 100644
--- a/src/app/models/app-info.model.ts
+++ b/src/app/models/app-info.model.ts
@@ -36,30 +36,17 @@ export class AppInfo {
     public allocations: AllocationInfo[] | null
   ) {}
 
-  get formattedSubmissionDate() {
-    const millisecs = Math.round(this.submissionTime / (1000 * 1000));
-    return moment(millisecs).format('YYYY/MM/DD');
-  }
-  
   get formattedSubmissionTime() {
     const millisecs = Math.round(this.submissionTime / (1000 * 1000));
-    return moment(millisecs).format('HH:mm:ss');
-  }
-  
-  get formattedLastStateChangeDate() {
-    if(this.lastStateChangeTime==null){
-      return 'n/a'
-    }
-    const millisecs = Math.round(this.lastStateChangeTime! / (1000 * 1000));
-    return moment(millisecs).format('YYYY/MM/DD');
+    return moment(millisecs).format('YYYY/MM/DD HH:mm:ss');
   }
-  
-  get formattedLastStateChangeTime() {
+
+  get formattedlastStateChangeTime() {
     if(this.lastStateChangeTime==null){
       return 'n/a'
     }
     const millisecs = Math.round(this.lastStateChangeTime! / (1000 * 1000));
-    return moment(millisecs).format('HH:mm:ss');
+    return moment(millisecs).format('YYYY/MM/DD HH:mm:ss');
   }
 
   get formattedFinishedTime() {