[YUNIKORN-2961] Move node utilizations chart to dashboard page

src/app/components/app-node-utilizations/app-node-utilizations.component.html

@@ -15,17 +15,30 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
-<div class="app-node-utilizations">
-  <mat-card-title class="title">Node Resource Utilization</mat-card-title>
-  <div class="mat-elevation-z8">
-    <mat-card appearance="outlined" class="box-card">
-      <mat-card-content>
-        <div class="status-wrapper flex-grid">
-          <div class="chart-wrapper flex-primary">
-            <app-vertical-bar-chart [bucketList]="bucketList" [barChartDataSets]="barChartDataSets" />
-          </div>
-        </div>
-      </mat-card-content>
-    </mat-card>
+
+ <app-card class="app-node-utilizations">
+  <ng-container header>
+    <div>
+      <i class="fa fa-chart-column" aria-hidden="true"></i>
+      Node Resource Utilization
+    </div>
+    <div>
+      <mat-form-field appearance="outline" class="partition-selector">
+        <mat-label>Partition</mat-label>
+        <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>
+  </ng-container>
+  <div class="status-wrapper flex-grid">
+    <div class="chart-wrapper flex-primary">
+      <app-vertical-bar-chart [bucketList]="bucketList" [barChartDataSets]="barChartDataSets" />
+    </div>
   </div>
-</div>
+</app-card>

src/app/components/app-node-utilizations/app-node-utilizations.component.scss

@@ -16,13 +16,22 @@
  * limitations under the License.
  */
 
- .app-node-utilizations {
+::ng-deep .app-node-utilizations {
+    .card-wrapper {
+        max-width: 800px;
+    }
+
+    .header {
+        justify-content: space-between;
+    }
 
-    .title {
-        margin-bottom: 28px;
+    .partition-selector {
+        .mat-mdc-form-field-subscript-wrapper {
+            display: none;
+        }
     }
 
-    .mat-mdc-card-content {
-        padding: 30px 30px;
+    .chart-wrapper {
+        max-height: 400px;
     }
- }
+}

src/app/components/app-node-utilizations/app-node-utilizations.component.ts

@@ -16,42 +16,66 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { BarChartDataSet } from '@app/models/chart-data.model';
 import { CHART_COLORS, DEFAULT_BAR_COLOR } from '@app/utils/constants';
 import { CommonUtil } from '@app/utils/common.util';
 import { NodeUtilization, NodeUtilizationsInfo } from '@app/models/node-utilization.model';
 import { SchedulerService } from '@app/services/scheduler/scheduler.service';
+import { PartitionInfo } from '@app/models/partition-info.model';
+import { MatSelectChange } from '@angular/material/select';
 
 
 @Component({
   selector: 'app-node-utilizations',
   templateUrl: './app-node-utilizations.component.html',
   styleUrls: ['./app-node-utilizations.component.scss']
 })
-export class AppNodeUtilizationsComponent implements OnInit, OnChanges {
+export class AppNodeUtilizationsComponent implements OnInit {
+  private _partitionSelected: string = "";
   nodeUtilizations: NodeUtilization[] = [];
 
   // input data for vertical bar chart, key is resource type
   bucketList: string[] = [];                                          // one bucket list for all resource types, length should be exactly 10
   barChartDataSets: BarChartDataSet[] = new Array<BarChartDataSet>(); // one dataset for each type
+  partitionList: PartitionInfo[] = [];
 
-  @Input() partitionSelected: string = "";
+  @Input()
+  set partitionSelected(value: string) {
+    this._partitionSelected = value;
+    this.reloadBarChartData();
+  }
+
+  get partitionSelected(): string {
+    return this._partitionSelected;
+  }
 
   constructor(
     private scheduler: SchedulerService
   ) { }
 
   ngOnInit() {
     this.reloadBarChartData()
+
+    this.scheduler
+      .fetchPartitionList()
+      .subscribe((list) => {
+        if (list && list.length > 0) {
+          list.forEach((part) => {
+            this.partitionList.push(new PartitionInfo(part.name, part.name));
+          });
+
+          this.partitionSelected = CommonUtil.getStoredPartition(list[0].name);
+        } else {
+          this.partitionList = [];
+          this.partitionSelected = '';
+          CommonUtil.setStoredQueueAndPartition('');
+        }
+      });
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (
-      changes['partitionSelected']
-    ) {
-      this.reloadBarChartData()
-    }
+  onPartitionSelectionChanged(selected: MatSelectChange) {
+    this.partitionSelected = selected.value;
   }
 
   reloadBarChartData() {

src/app/components/dashboard/dashboard.component.html

@@ -94,3 +94,7 @@
     </div>
   </div>
 </div>
+
+<div class="cluster-info">
+  <app-node-utilizations />
+</div>

src/app/components/nodes-view/nodes-view.component.html

@@ -196,8 +196,4 @@ <h3>Allocations</h3>
       ></mat-paginator>
     </div>
   </div>
-</div>
-
-<div class="node-utilizations-view">
-  <app-node-utilizations [partitionSelected]="partitionSelected" />
 </div>

src/app/components/nodes-view/nodes-view.component.scss

@@ -140,8 +140,4 @@
     width: 100%;
     text-align: center;
   }
-}
-
-.node-utilizations-view {
-  margin-top: 80px
-}
+}

src/app/components/vertical-bar-chart/vertical-bar-chart.component.html

@@ -15,9 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  -->
-<!-- <div class="chart-container"> -->
-<div class="flex-grid">
-    <div class="canvas-div">
-        <canvas class="vertical-bar-chart" id="{{ chartContainerId }}"></canvas>
-    </div>
-</div>
+<div class="chart-wrapper">
+    <canvas class="vertical-bar-chart" id="{{ chartContainerId }}"></canvas>
+</div>

src/app/components/vertical-bar-chart/vertical-bar-chart.component.scss

@@ -16,7 +16,12 @@
  * limitations under the License.
  */
 
-.canvas-div {
-    height: 50vh;
+ .chart-wrapper {
     width: 100%;
-}
+    height: 100%;
+
+    .vertical-bar-chart {
+        width: 100%;
+        height: 100%;
+    }
+ }

src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts

@@ -101,7 +101,7 @@ export class VerticalBarChartComponent implements OnInit, AfterViewInit, OnChang
         plugins: {
           legend: {
             display: true,
-            position: 'left',
+            position: 'right',
             align: 'start',
             onClick: (e) => { }, // disable legend click event
             onHover: (event, legendItem, legend) => {
@@ -150,10 +150,29 @@ export class VerticalBarChartComponent implements OnInit, AfterViewInit, OnChang
           },
         },
         scales: {
+          x: {
+            grid: {
+              display: false,
+            },
+            ticks: {
+              color: '#666'
+            },
+            border: {
+              display: false,
+            }
+          },
           y: {
             ticks: {
               stepSize: 1,
               precision: 0
+            },
+            grid: {
+              color: '#ccc',
+              tickWidth: 0
+            },
+            border: {
+              display: false,
+              dash: [6, 6]
             }
           }
         },