[YUNIKORN-2947] enable selection of any partitioned queue in yunikorn cluster (apache#216)

Closes: apache#216

Signed-off-by: Wilfred Spiegelenburg <wilfreds@apache.org>

Author: doupache

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';
@@ -70,6 +71,7 @@ import { CardComponent } from './components/card/card.component';
     AppComponent,
     DashboardComponent,
     QueuesViewComponent,
+    QueueV2Component,
     DonutChartComponent,
     AreaChartComponent,
     AppStatusComponent,

src/app/components/queue-v2/queues-v2.component.html

@@ -21,18 +21,28 @@
       <div class="header">
         <div class="title-group">
           <div>Partition</div>
-            <button id="ortButton" class="ort-button">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
-                <path d="M21 12c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.39 0 4.68-0.94 6.36-2.62l-1.41-1.41C15.54 18.37 13.85 19 12 19c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7h-3l4 4 4-4h-3z" />
-              </svg>
-              <span class="tooltip" role="tooltip">rotate </span>
-            </button>
-            <button id="fitButton" class="fit-to-screen-button">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
-                <path d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />          
-              </svg>
-              <span id="tooltip" class="tooltip" role="tooltip">fit to screen</span>
-            </button>
+          <mat-form-field clss="partitionSelect">
+            <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>
+          <button id="ortButton" class="ort-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+              <path d="M21 12c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.39 0 4.68-0.94 6.36-2.62l-1.41-1.41C15.54 18.37 13.85 19 12 19c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7h-3l4 4 4-4h-3z" />
+            </svg>
+            <span class="tooltip" role="tooltip">rotate </span>
+          </button>
+          <button id="fitButton" class="fit-to-screen-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
+              <path d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />          
+            </svg>
+            <span id="tooltip" class="tooltip" role="tooltip">fit to screen</span>
+          </button>
         </div>
       </div>
       <div class="body">

src/app/components/queue-v2/queues-v2.component.scss

@@ -35,18 +35,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;

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){