flink-runtime-web/web-dashboard/src/app/pages/task-manager/resource/task-manager-resource.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.
  -->

<ng-container *ngIf="detail">
  <nz-card nzTitle="Allocated Resource">
    <nz-table
      [nzData]="['']"
      [nzShowPagination]="false"
      [nzSize]="'small'"
      class="no-border small">
      <thead>
        <tr>
          <th>Type</th>
          <th>Available</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>CPU Cores</strong></td>
          <td>{{ detail.availableResources.cpuCores | number:'1.0-2' }}</td>
          <td>{{ detail.totalResources.cpuCores | number:'1.0-2' }}</td>
        </tr>
        <tr>
          <td><strong>UserHeapMemory</strong></td>
          <td>{{ detail.availableResources.userHeapMemory | nzHumanizeBytes }}</td>
          <td>{{ detail.totalResources.userHeapMemory | nzHumanizeBytes }}</td>
        </tr>
        <tr>
          <td><strong>UserDirectMemory</strong></td>
          <td>{{ detail.availableResources.userDirectMemory | nzHumanizeBytes }}</td>
          <td>{{ detail.totalResources.userDirectMemory | nzHumanizeBytes }}</td>
        </tr>
        <tr>
          <td><strong>UserNativeMemory</strong></td>
          <td>{{ detail.availableResources.userNativeMemory | nzHumanizeBytes }}</td>
          <td>{{ detail.totalResources.userNativeMemory | nzHumanizeBytes }}</td>
        </tr>
        <tr>
          <td><strong>ManagedMemory</strong></td>
          <td>{{ detail.availableResources.managedMemory | nzHumanizeBytes }}</td>
          <td>{{ detail.totalResources.managedMemory | nzHumanizeBytes }}</td>
        </tr>
        <tr>
          <td><strong>NetworkMemory</strong></td>
          <td>{{ detail.availableResources.networkMemory | nzHumanizeBytes }}</td>
          <td>{{ detail.totalResources.networkMemory | nzHumanizeBytes }}</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
</ng-container>