| <!-- |
| * 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. |
| --> |
| |
| <mat-card appearance="outlined" *ngIf="clusterInfo"> |
| <div class="flex-grid"> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Name</div> |
| <div class="info-value strong-text">{{ clusterInfo.clusterName }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Status</div> |
| <div class="info-value strong-text">{{ clusterInfo.clusterStatus }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Nodes</div> |
| <div class="info-value strong-text">{{ totalNodes | titlecase }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">NodeSort Policy</div> |
| <div class="info-value strong-text">{{ nodeSortPolicy | titlecase }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Applications</div> |
| <div class="info-value strong-text">{{ totalApplications | titlecase }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Containers</div> |
| <div class="info-value strong-text">{{ totalContainers | titlecase }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Partition</div> |
| <div class="info-value strong-text">{{ partitionName | titlecase }}</div> |
| </div> |
| <div class="info-card"> |
| <button |
| class="menu-trigger" |
| mat-icon-button |
| matTooltip="More Info" |
| matTooltipShowDelay="500" |
| [matMenuTriggerFor]="InfoCard" |
| > |
| <i class="fa fa-info"></i> |
| </button> |
| <mat-menu #InfoCard="matMenu" xPosition="before"> |
| <div class="flex-grid about-card"> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Build Date</div> |
| <div class="info-value strong-text">{{ buildInfo.buildDate }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">Build Version</div> |
| <div class="info-value strong-text">{{ buildInfo.buildVersion }}</div> |
| </div> |
| <div class="flex-primary"> |
| <div class="text-uppercase light-text">RM Id</div> |
| <div class="info-value strong-text">{{ buildInfo.rmId }}</div> |
| </div> |
| </div> |
| </mat-menu> |
| </div> |
| </div> |
| </mat-card> |
| |
| <div class="cluster-info"> |
| <div class="flex-grid"> |
| <div class="left-col flex-primary"> |
| <app-application-status [chartData]="appStatusData"></app-application-status> |
| </div> |
| <div class="right-col flex-primary"> |
| <app-application-history [chartData]="appHistoryData"></app-application-history> |
| </div> |
| </div> |
| <div class="flex-grid grid-row"> |
| <div class="left-col flex-primary"> |
| <app-container-status [chartData]="containerStatusData"></app-container-status> |
| </div> |
| <div class="right-col flex-primary"> |
| <app-container-history [chartData]="containerHistoryData"></app-container-history> |
| </div> |
| </div> |
| </div> |