This is an automated email from the ASF dual-hosted git repository.
ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push:
new b1b500b [YUNIKORN-2961] Move node utilizations chart to dashboard
page (#224)
b1b500b is described below
commit b1b500b88669e472b2f0dc81e729ecd34ddafd73
Author: SP12893678 <[email protected]>
AuthorDate: Mon Nov 18 14:54:43 2024 -0600
[YUNIKORN-2961] Move node utilizations chart to dashboard page (#224)
Closes: #224
Signed-off-by: Craig Condit <[email protected]>
---
.../app-node-utilizations.component.html | 39 +++++++++++++-------
.../app-node-utilizations.component.scss | 17 +++++----
.../app-node-utilizations.component.ts | 42 +++++++++++++++++-----
.../components/dashboard/dashboard.component.html | 4 +++
.../nodes-view/nodes-view.component.html | 4 ---
.../nodes-view/nodes-view.component.scss | 6 +---
.../vertical-bar-chart.component.html | 9 ++---
.../vertical-bar-chart.component.scss | 11 ++++--
.../vertical-bar-chart.component.ts | 22 +++++++++++-
9 files changed, 107 insertions(+), 47 deletions(-)
diff --git
a/src/app/components/app-node-utilizations/app-node-utilizations.component.html
b/src/app/components/app-node-utilizations/app-node-utilizations.component.html
index 78022bd..808cf6f 100644
---
a/src/app/components/app-node-utilizations/app-node-utilizations.component.html
+++
b/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>
\ No newline at end of file
+</app-card>
\ No newline at end of file
diff --git
a/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
b/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
index c802ee4..f8288db 100644
---
a/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
+++
b/src/app/components/app-node-utilizations/app-node-utilizations.component.scss
@@ -16,13 +16,18 @@
* limitations under the License.
*/
- .app-node-utilizations {
+::ng-deep .app-node-utilizations {
+ .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;
}
- }
\ No newline at end of file
+}
diff --git
a/src/app/components/app-node-utilizations/app-node-utilizations.component.ts
b/src/app/components/app-node-utilizations/app-node-utilizations.component.ts
index 2f16df2..d78f7d5 100644
---
a/src/app/components/app-node-utilizations/app-node-utilizations.component.ts
+++
b/src/app/components/app-node-utilizations/app-node-utilizations.component.ts
@@ -16,12 +16,14 @@
* 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({
@@ -29,14 +31,24 @@ import { SchedulerService } from
'@app/services/scheduler/scheduler.service';
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
@@ -44,14 +56,26 @@ export class AppNodeUtilizationsComponent implements
OnInit, OnChanges {
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() {
diff --git a/src/app/components/dashboard/dashboard.component.html
b/src/app/components/dashboard/dashboard.component.html
index 8195fce..b705340 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -94,3 +94,7 @@
</div>
</div>
</div>
+
+<div class="cluster-info">
+ <app-node-utilizations />
+</div>
\ No newline at end of file
diff --git a/src/app/components/nodes-view/nodes-view.component.html
b/src/app/components/nodes-view/nodes-view.component.html
index b4b1b89..fb40cc1 100644
--- a/src/app/components/nodes-view/nodes-view.component.html
+++ b/src/app/components/nodes-view/nodes-view.component.html
@@ -196,8 +196,4 @@
></mat-paginator>
</div>
</div>
-</div>
-
-<div class="node-utilizations-view">
- <app-node-utilizations [partitionSelected]="partitionSelected" />
</div>
\ No newline at end of file
diff --git a/src/app/components/nodes-view/nodes-view.component.scss
b/src/app/components/nodes-view/nodes-view.component.scss
index eb203ba..aa2cd8b 100644
--- a/src/app/components/nodes-view/nodes-view.component.scss
+++ b/src/app/components/nodes-view/nodes-view.component.scss
@@ -140,8 +140,4 @@
width: 100%;
text-align: center;
}
-}
-
-.node-utilizations-view {
- margin-top: 80px
-}
+}
\ No newline at end of file
diff --git
a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.html
b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.html
index c5cf1e2..91da05e 100644
--- a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.html
+++ b/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>
\ No newline at end of file
+<div class="chart-wrapper">
+ <canvas class="vertical-bar-chart" id="{{ chartContainerId }}"></canvas>
+</div>
diff --git
a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.scss
b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.scss
index ebd91ee..4e1f505 100644
--- a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.scss
+++ b/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%;
+ }
+ }
diff --git
a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
index 5d78c15..4560b58 100644
--- a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
+++ b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts
@@ -98,10 +98,11 @@ export class VerticalBarChartComponent implements OnInit,
AfterViewInit, OnChang
},
options: {
responsive: true,
+ maintainAspectRatio: false,
plugins: {
legend: {
display: true,
- position: 'left',
+ position: 'right',
align: 'start',
onClick: (e) => { }, // disable legend click event
onHover: (event, legendItem, legend) => {
@@ -150,10 +151,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]
}
}
},
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
