src/app/components/queues-view/queues-view.component.ts

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { MatDrawer } from '@angular/material/sidenav';
import { MatSelectChange } from '@angular/material/select';
import { NgxSpinnerService } from 'ngx-spinner';
import { finalize } from 'rxjs/operators';

import { QueueInfo, ToggleQueueChildrenEvent } from '@app/models/queue-info.model';
import { PartitionInfo } from '@app/models/partition-info.model';
import { SchedulerService } from '@app/services/scheduler/scheduler.service';
import { CommonUtil } from '@app/utils/common.util';

export interface QueueList {
  [level: string]: QueueInfo[] | null;
}

export interface QueueLevel {
  level: string;
  next: string;
}

export const MAX_QUEUE_LEVELS = 5;

@Component({
  selector: 'app-queues-view',
  templateUrl: './queues-view.component.html',
  styleUrls: ['./queues-view.component.scss'],
})
export class QueuesViewComponent implements OnInit {
  @ViewChild('matDrawer', { static: false }) matDrawer!: MatDrawer;

  isDrawerContainerOpen = false;
  partitionSelected = '';
  partitionList: PartitionInfo[] = [];
  rootQueue: QueueInfo | null = null;
  selectedQueue: QueueInfo | null = null;
  queueList: QueueList = {};
  queueLevels: QueueLevel[] = [
    { level: 'level_00', next: 'level_01' },
    { level: 'level_01', next: 'level_02' },
    { level: 'level_02', next: 'level_03' },
    { level: 'level_03', next: 'level_04' },
    { level: 'level_04', next: 'level_05' },
    { level: 'level_05', next: 'level_06' },
    { level: 'level_06', next: 'level_07' },
    { level: 'level_07', next: 'level_08' },
    { level: 'level_08', next: 'level_09' },
  ];
  resourceValueFormatter = CommonUtil.resourceColumnFormatter;

  constructor(
    private scheduler: SchedulerService,
    private spinner: NgxSpinnerService,
    private router: Router
  ) {}

  ngOnInit() {
    this.queueLevels.forEach((obj) => {
      this.queueList[obj.level] = null;
    });

    this.spinner.show();

    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 = list[0].name;
          this.fetchSchedulerQueuesForPartition(this.partitionSelected);
        } else {
          this.partitionList = [new PartitionInfo('-- Select --', '')];
          this.partitionSelected = '';
          this.queueList = {};
        }
      });
  }

  fetchSchedulerQueuesForPartition(partitionName: string) {
    this.spinner.show();

    this.scheduler
      .fetchSchedulerQueues(partitionName)
      .pipe(
        finalize(() => {
          this.spinner.hide();
        })
      )
      .subscribe((data) => {
        this.queueList = {};

        if (data && data.rootQueue) {
          this.rootQueue = data.rootQueue;
          this.queueList['level_00'] = [this.rootQueue!];
        }
      });
  }

  toggleQueueChildrenView(data: ToggleQueueChildrenEvent) {
    const isExpanded = data.queueItem.isExpanded;
    const children = data.queueItem.children;
    if (isExpanded && data.nextLevel && children) {
      this.queueList[data.nextLevel] = this.sortQueueListByName(children);
    } else {
      this.queueList[data.nextLevel] = null;
      this.closeQueueRacks(data.nextLevel);
      this.collapseChildrenQueues(data.queueItem);
      this.closeQueueDrawer();
    }
  }

  sortQueueListByName(queueList: QueueInfo[]) {
    return queueList.sort((queue1, queue2) => {
      const queueName1 = queue1.queueName.toLowerCase();
      const queueName2 = queue2.queueName.toLowerCase();
      if (queueName1 > queueName2) {
        return 1;
      }
      if (queueName1 < queueName2) {
        return -1;
      }
      return 0;
    });
  }

  closeQueueRacks(currentLevel: string) {
    const level = +currentLevel.split('_')[1];
    for (let index = MAX_QUEUE_LEVELS; index >= level; index--) {
      this.queueList[`level_0${index}`] = null;
    }
  }

  collapseChildrenQueues(queue: QueueInfo) {
    if (queue && queue.children) {
      queue.children.forEach((child) => {
        child.isExpanded = false;
        return this.collapseChildrenQueues(child);
      });
    }
  }

  unselectChildrenQueues(queue: QueueInfo, selected: QueueInfo) {
    if (queue !== selected) {
      queue.isSelected = false;
    }
    if (queue && queue.children) {
      queue.children.forEach((child) => {
        return this.unselectChildrenQueues(child, selected);
      });
    }
  }

  closeQueueDrawer() {
    if (this.selectedQueue) {
      this.selectedQueue.isSelected = false;
    }
    this.selectedQueue = null;
    this.closeMatDrawer();
  }

  closeMatDrawer() {
    this.matDrawer.close();
    setTimeout(() => {
      this.isDrawerContainerOpen = false;
    }, 100);
  }

  onQueueItemSelected(selected: QueueInfo) {
    this.unselectChildrenQueues(this.rootQueue!, selected);
    if (selected.isSelected) {
      this.selectedQueue = selected;
      this.isDrawerContainerOpen = true;
      this.matDrawer.open();
    } else {
      this.selectedQueue = null;
      this.closeMatDrawer();
    }
  }

  onPartitionSelectionChanged(selected: MatSelectChange) {
    if (selected.value !== '') {
      this.partitionSelected = selected.value;
      this.closeQueueDrawer();
      this.fetchSchedulerQueuesForPartition(this.partitionSelected);
    } else {
      this.partitionSelected = '';
      this.queueList = {};
    }
  }

  gotoApplicationsForPartitionAndQueue(event: MouseEvent, queueName: string) {
    event.preventDefault();

    if (this.partitionSelected && queueName) {
      this.router.navigate(['/applications'], {
        queryParams: {
          partition: this.partitionSelected,
          queue: queueName,
        },
      });
    }
  }
}