src/app/components/queue-rack/queue-rack.component.html

<!--
 * 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.
 -->

<div class="queue-rack">
  <mat-card appearance="outlined" class="queue-item" *ngFor="let item of queueList">
    <div
      class="flex-grid queue-name"
      [ngClass]="{ selected: item.isSelected }"
      (click)="onQueueSelected(item)"
      [ngStyle]="{ backgroundColor: getQueueCapacityColor(item) }"
    >
      <div class="flex-primary queue-label">
        {{ item.queueName }}
      </div>
      <a href="#" *ngIf="!item.isLeaf" (click)="toggleQueueChildren($event, item)">
        <i class="fas fa-plus-circle" *ngIf="!item.isExpanded"></i>
        <i class="fas fa-minus-circle" *ngIf="item.isExpanded"></i>
      </a>
      <span class="fa fa-caret-right" *ngIf="item.isExpanded"></span>
    </div>
    <mat-progress-bar [value]="getProgressBarValue(item)"></mat-progress-bar>
  </mat-card>
</div>