[YUNIKORN-1914] Change display for resource lists (#130)

Closes: #130 Signed-off-by: Craig Condit <ccondit@apache.org>
apache · Sep 26, 2023 · f510bd2 · f510bd2
1 parent 27368b6
commit f510bd2
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 98 deletions.
diff --git a/json-db.json b/json-db.json
@@ -263,7 +263,8 @@
       "usedResource": {
         "memory": 50000000,
         "pods": 1,
-        "vcore": 10
+        "vcore": 10,
+        "nvidia.com/gpu": 5
       },
       "maxUsedResource": {
         "memory": 50000000,
@@ -297,7 +298,8 @@
           "resource": {
             "memory": 50000000,
             "pods": 1,
-            "vcore": 10
+            "vcore": 10,
+            "nvidia.com/gpu": 5
           },
           "priority": "0",
           "nodeId": "lima-rancher-desktop",
@@ -545,17 +547,22 @@
         "hugepages-64Ki": 0,
         "memory": 4110970880,
         "pods": 110,
-        "vcore": 2000
+        "vcore": 2000,
+        "nvidia.com/gpu": 10,
+        "amd.com/gpu": 10,
+        "gpu.intel.com/i915": 10
       },
       "allocated": {
         "memory": 200000000,
         "pods": 4,
-        "vcore": 40
+        "vcore": 40,
+        "nvidia.com/gpu": 5
       },
       "occupied": {
         "memory": 1325400064,
         "pods": 4,
-        "vcore": 500
+        "vcore": 500,
+        "nvidia.com/gpu": 5
       },
       "available": {
         "ephemeral-storage": 99833802265,
@@ -565,7 +572,8 @@
         "hugepages-64Ki": 0,
         "memory": 2585570816,
         "pods": 102,
-        "vcore": 1460
+        "vcore": 1460,
+        "nvidia.com/gpu": 5
       },
       "utilized": {
         "memory": 4,
@@ -645,7 +653,8 @@
           "resource": {
             "memory": 50000000,
             "pods": 1,
-            "vcore": 10
+            "vcore": 10,
+            "nvidia.com/gpu": 5
           },
           "priority": "0",
           "nodeId": "lima-rancher-desktop",

diff --git a/src/app/components/apps-view/apps-view.component.html b/src/app/components/apps-view/apps-view.component.html
@@ -17,48 +17,57 @@
  -->
 
 <div class="top-section">
-  <div class="dropdown-wrapper">
-    <label class="dropdown-label">Partition: </label>
-    <mat-form-field>
-      <mat-select
-        [(value)]="partitionSelected"
-        (selectionChange)="onPartitionSelectionChanged($event)"
-      >
-        <mat-option *ngFor="let part of partitionList" [value]="part.value">
-          {{ part.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+  <div class="left-side">
+    <div class="dropdown-wrapper">
+      <label class="dropdown-label">Partition: </label>
+      <mat-form-field>
+        <mat-select
+          [(value)]="partitionSelected"
+          (selectionChange)="onPartitionSelectionChanged($event)"
+        >
+          <mat-option *ngFor="let part of partitionList" [value]="part.value">
+            {{ part.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="dropdown-wrapper">
+      <label class="dropdown-label">Queue: </label>
+      <mat-form-field>
+        <mat-select [(value)]="leafQueueSelected" (selectionChange)="onQueueSelectionChanged($event)">
+          <mat-option *ngFor="let queue of leafQueueList" [value]="queue.value">
+            {{ queue.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
   </div>
-  <div class="dropdown-wrapper">
-    <label class="dropdown-label">Queue: </label>
-    <mat-form-field>
-      <mat-select [(value)]="leafQueueSelected" (selectionChange)="onQueueSelectionChanged($event)">
-        <mat-option *ngFor="let queue of leafQueueList" [value]="queue.value">
-          {{ queue.name }}
-        </mat-option>
-      </mat-select>
+  <div class="right-side">
+    <mat-form-field class="search-wrapper white-mat-form-field">
+      <input
+        matInput
+        type="text"
+        [(ngModel)]="searchText"
+        placeholder="Search By Application ID"
+        #searchInput
+      />
+      <button
+        class="clear-btn"
+        *ngIf="searchText"
+        (click)="onClearSearch()"
+        matTooltip="Clear Search"
+        matTooltipShowDelay="500"
+      >
+        <i class="far fa-times-circle"></i>
+      </button>
+      <i *ngIf="!searchText" class="fas fa-search search-icon"></i>
     </mat-form-field>
+    <div class="btn-wrapper">
+      <button class="btn" (click)="toggle()" [style.background-color]="detailToggle ? '#313d54' : '#f5f5f5'">
+        <i class="material-icons __icon" [style.color]="detailToggle ? '#f5f5f5' : '#313d54' ">more_horiz</i>
+      </button>
+    </div>
   </div>
-  <mat-form-field class="search-wrapper white-mat-form-field">
-    <input
-      matInput
-      type="text"
-      [(ngModel)]="searchText"
-      placeholder="Search By Application ID"
-      #searchInput
-    />
-    <button
-      class="clear-btn"
-      *ngIf="searchText"
-      (click)="onClearSearch()"
-      matTooltip="Clear Search"
-      matTooltipShowDelay="500"
-    >
-      <i class="far fa-times-circle"></i>
-    </button>
-    <i *ngIf="!searchText" class="fas fa-search search-icon"></i>
-  </mat-form-field>
 </div>
 <div class="apps-view">
   <div class="mat-elevation-z8">
@@ -78,7 +87,18 @@
           <ng-container *ngIf="columnDef.colId === 'usedResource'; else renderNext_1">
             <mat-cell *matCellDef="let element">
               <ng-container *ngIf="columnDef.colFormatter; else showAppRawData">
-                <span [innerHTML]="columnDef.colFormatter(element[columnDef.colId])"></span>
+                <ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
+                  <ul class="mat-res-ul">
+                    <ng-container *ngFor="let resource of formatResources(colValue); let i = index">
+                      <li class="mat-res-li" *ngIf="i<2">
+                        {{resource}}
+                      </li>
+                      <li class="mat-res-li" *ngIf="i>=2 && detailToggle">
+                        {{resource}}
+                      </li>
+                    </ng-container>
+                  </ul>
+                </ng-container>
               </ng-container>
               <ng-template #showAppRawData>
                 <span>{{ element[columnDef.colId] }}</span>
@@ -150,8 +170,19 @@ <h3>Allocations</h3>
 
           <ng-container *ngIf="columnDef.colId === 'resource'; else renderNext_3">
             <mat-cell *matCellDef="let element">
-              <ng-container *ngIf="columnDef.colFormatter; else showAllocRowData">
-                <span [innerHTML]="columnDef.colFormatter(element[columnDef.colId])"></span>
+              <ng-container *ngIf="columnDef.colFormatter; else showAllocRowData;">
+                <ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
+                    <ul class="mat-res-ul">
+                      <ng-container *ngFor="let resource of formatResources(colValue); let i = index">
+                        <li class="mat-res-li" *ngIf="i<2">
+                          {{resource}}
+                        </li>
+                        <li class="mat-res-li" *ngIf="i>=2 && detailToggle">
+                          {{resource}}
+                        </li>
+                      </ng-container>
+                    </ul>
+                </ng-container>
               </ng-container>
               <ng-template #showAllocRowData>
                 <span>{{ element[columnDef.colId] }}</span>

diff --git a/src/app/components/apps-view/apps-view.component.scss b/src/app/components/apps-view/apps-view.component.scss
@@ -15,47 +15,86 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";
 
-.top-section {
+ .top-section {
   width: 100%;
   height: 100%;
   display: flex;
-  .search-wrapper {
-    width: 300px;
-    position: absolute;
-    right: 20px;
-    input {
-      width: calc(100% - 22px);
-      color: #333;
-    }
-    .clear-btn {
-      outline: none;
-      border: none;
-      padding: 0 0 0 4px;
-      cursor: pointer;
-      background: transparent;
-      i {
-        font-size: 18px;
-        &:hover {
-          color: #f44336;
-        }
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .left-side{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .dropdown-wrapper {
+      padding-right: 40px;
+      .dropdown-label {
+        color: #333;
+        font-size: 1.2em;
+        margin-right: 10px;
       }
     }
-    .search-icon {
-      margin-left: 4px;
-      font-size: 17px;
-    }
   }
-  .dropdown-wrapper {
-    padding-right: 40px;
-    .dropdown-label {
-      color: #333;
-      font-size: 1.2em;
-      margin-right: 10px;
+  .right-side{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .btn-wrapper {
+      filter: drop-shadow(0px 2px 1px rgba(90, 90, 90, 0.5));
+      &:hover{
+        filter: drop-shadow(0px 3px 3px rgba(90, 90, 90, 0.5));
+      }
+      :hover{
+        cursor: pointer;
+      }
+      .btn{
+        display: block;
+        border: none;
+        padding: 13px 24px;
+        border-radius: 5px;
+        font-size: 24px;
+        transform: translateY(-13px);
+      }
+      .material-icons{
+        transform: translateY(2px);
+      }
+    }
+    .search-wrapper {
+      width: 300px;
+      right: 20px;
+      padding-right: 20px;
+      input {
+        width: calc(100% - 22px);
+        color: #333;
+      }
+      .clear-btn {
+        outline: none;
+        border: none;
+        padding: 0 0 0 4px;
+        cursor: pointer;
+        background: transparent;
+        i {
+          font-size: 18px;
+          &:hover {
+            color: #f44336;
+          }
+        }
+      }
+      .search-icon {
+        margin-left: 4px;
+        font-size: 17px;
+      }
     }
   }
 }
 
+.mdc-button .mdc-button__label{
+  display: flex;
+  align-items: center;
+}
+
 .apps-view {
   width: 100%;
   height: 100%;
@@ -66,6 +105,24 @@
   }
   .mat-mdc-cell {
     color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .mat-res-ul{
+      padding: 0;
+      margin: 0;
+      .mat-res-li{
+        list-style-type: none;
+      }
+    }
+    .mat-toggle-more {
+      display: block;
+      color: #a1a3b7;
+      padding: 5px 45px 0 0;
+      &:hover {
+        color: #8d00d4;
+      }
+    }
   }
   .mat-mdc-row {
     &:hover {
@@ -76,6 +133,12 @@
       background: #303d54;
       .mat-mdc-cell {
         color: #fff;
+        .mat-toggle-more {
+          color: #b8bbff;
+          &:hover {
+            color: #b871dc;
+          }
+        }
       }
     }
   }

diff --git a/src/app/components/apps-view/apps-view.component.ts b/src/app/components/apps-view/apps-view.component.ts
@@ -61,6 +61,8 @@ export class AppsViewComponent implements OnInit {
   partitionSelected = '';
   leafQueueList: DropdownItem[] = [];
   leafQueueSelected = '';
+
+  detailToggle: boolean = false;
 
   constructor(
     private scheduler: SchedulerService,
@@ -301,4 +303,28 @@ export class AppsViewComponent implements OnInit {
       this.removeRowSelection();
     }
   }
+
+  formatResources(colValue:string):string[]{
+    const arr:string[]=colValue.split("<br/>")
+    // Check if there are "cpu" or "Memory" elements in the array
+    const hasCpu = arr.some((item) => item.toLowerCase().includes("cpu"));
+    const hasMemory = arr.some((item) => item.toLowerCase().includes("memory"));
+    if (!hasCpu) {
+      arr.unshift("CPU: n/a");
+    }
+    if (!hasMemory) {
+      arr.unshift("Memory: n/a");
+    }
+
+    // Concatenate the two arrays, with "cpu" and "Memory" elements first
+    const cpuAndMemoryElements = arr.filter((item) => item.toLowerCase().includes("CPU") || item.toLowerCase().includes("Memory"));
+    const otherElements = arr.filter((item) => !item.toLowerCase().includes("CPU") && !item.toLowerCase().includes("Memory"));
+    const result = cpuAndMemoryElements.concat(otherElements);
+
+    return result;
+  }
+
+  toggle(){
+    this.detailToggle = !this.detailToggle;
+  }
 }