src/app/components/dashboard/dashboard.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.
 -->

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