From 18fd7646f1832301ddb9d9eba4ea51be8423a4ee Mon Sep 17 00:00:00 2001 From: DouPache Date: Fri, 25 Oct 2024 18:48:08 +0800 Subject: [PATCH] [YUNIKORN-2947] enable selection of any partitioned queue in yunikorn cluster --- src/app/app.module.ts | 2 + .../queue-v2/queues-v2.component.html | 34 +++++++++----- .../queue-v2/queues-v2.component.scss | 12 +++-- .../queue-v2/queues-v2.component.ts | 45 +++++++++++++++++-- 4 files changed, 74 insertions(+), 19 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8fcac291..07725a1d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -47,6 +47,7 @@ import { ApiErrorInterceptor } from '@app/interceptors/api-error/api-error.inter import { AppComponent } from '@app/app.component'; import { DashboardComponent } from '@app/components/dashboard/dashboard.component'; import { QueuesViewComponent } from '@app/components/queues-view/queues-view.component'; +import { QueueV2Component } from '@app/components/queue-v2/queues-v2.component'; import { DonutChartComponent } from '@app/components/donut-chart/donut-chart.component'; import { AreaChartComponent } from '@app/components/area-chart/area-chart.component'; import { AppStatusComponent } from '@app/components/app-status/app-status.component'; @@ -71,6 +72,7 @@ import { MatChipsModule } from '@angular/material/chips'; AppComponent, DashboardComponent, QueuesViewComponent, + QueueV2Component, DonutChartComponent, AreaChartComponent, AppStatusComponent, diff --git a/src/app/components/queue-v2/queues-v2.component.html b/src/app/components/queue-v2/queues-v2.component.html index cfa6fc9f..7d4899c1 100644 --- a/src/app/components/queue-v2/queues-v2.component.html +++ b/src/app/components/queue-v2/queues-v2.component.html @@ -21,18 +21,28 @@
Partition
- - + + + + {{ part.name }} + + + + +
diff --git a/src/app/components/queue-v2/queues-v2.component.scss b/src/app/components/queue-v2/queues-v2.component.scss index 3c5e597c..f4027432 100644 --- a/src/app/components/queue-v2/queues-v2.component.scss +++ b/src/app/components/queue-v2/queues-v2.component.scss @@ -28,18 +28,24 @@ .header .title-group { display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-start; padding-bottom: 1rem; } .title-group div { - flex-grow: 1; - text-align: center; + flex-grow: 0; + text-align: left; font-size: 1.25rem; font-weight: 600; color: #010407; + margin-right: 1rem; } + .title-group mat-form-field { + margin-top: 20px; + margin-right: auto; + } + .fit-to-screen-button { position: relative; display: inline-flex; diff --git a/src/app/components/queue-v2/queues-v2.component.ts b/src/app/components/queue-v2/queues-v2.component.ts index 11f5242c..8af88520 100644 --- a/src/app/components/queue-v2/queues-v2.component.ts +++ b/src/app/components/queue-v2/queues-v2.component.ts @@ -20,8 +20,11 @@ import { Component, OnInit} from '@angular/core'; import { Router } from '@angular/router'; import { NgxSpinnerService } from 'ngx-spinner'; import { QueueInfo } from '@app/models/queue-info.model'; +import { PartitionInfo } from '@app/models/partition-info.model'; import { finalize } from 'rxjs/operators'; import { SchedulerService } from '@app/services/scheduler/scheduler.service'; +import { MatSelectChange } from '@angular/material/select'; + import { select, Selection } from "d3-selection"; import * as d3hierarchy from "d3-hierarchy"; @@ -45,6 +48,8 @@ export interface TreeNode { export class QueueV2Component implements OnInit { rootQueue: QueueInfo | null = null; seletedInfo: QueueInfo | null = null; + partitionSelected = ''; + partitionList: PartitionInfo[] = []; resourceValueFormatter = CommonUtil.queueResourceColumnFormatter; memoryValueFormatter = CommonUtil.absoluteUsedMemoryColumnFormatter; cpuValueFormatter = CommonUtil.absoluteUsedCPUColumnFormatter; @@ -56,13 +61,35 @@ export class QueueV2Component implements OnInit { ) {} ngOnInit() { - this.fetchSchedulerQueuesForPartition() + this.scheduler + .fetchPartitionList() + .pipe( + finalize(() => { + this.spinner.hide(); + }) + ) + .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); + + this.fetchSchedulerQueuesForPartition(this.partitionSelected); + } else { + this.partitionList = [new PartitionInfo('-- Select --', '')]; + this.partitionSelected = ''; + CommonUtil.setStoredQueueAndPartition(''); + } + }); } - fetchSchedulerQueuesForPartition() { - let partitionName = 'default'; + fetchSchedulerQueuesForPartition(partitionName: string = '') { this.spinner.show(); + select('.visualize-area').selectAll('*').remove(); + this.scheduler .fetchSchedulerQueues(partitionName) .pipe( @@ -85,13 +112,23 @@ export class QueueV2Component implements OnInit { } showQueueStats(status: string | undefined) { - console.log('sssss', status) if(status !== 'Active'){ return '[Inactive]'; } else{ return null; } } + + onPartitionSelectionChanged(selected: MatSelectChange) { + if (selected.value !== '') { + this.partitionSelected = selected.value; + this.fetchSchedulerQueuesForPartition(this.partitionSelected); + CommonUtil.setStoredQueueAndPartition(this.partitionSelected); + } else { + this.partitionSelected = ''; + CommonUtil.setStoredQueueAndPartition(''); + } + } } function queueVisualization(rawData : QueueInfo , componentInstance: QueueV2Component){