[FLINK-20258][WebUI] Format configured memory sizes

flink-runtime-web/web-dashboard/src/app/pages/job-manager/metrics/job-manager-metrics.component.html

@@ -31,7 +31,7 @@
  <img src="assets/images/process_mem_model.svg">
  </td>
  <td class="table-header">JVM Heap</td>
- <td>{{ config['jobmanager.memory.heap.size'] || '-' }}</td>
+ <td>{{ config['jobmanager.memory.heap.size'] | parseInt | humanizeBytes }}</td>
  <td>
  <nz-progress nzSize="small" nzStrokeLinecap="square"
  [nzPercent]="+(metrics['Status.JVM.Memory.Heap.Used'] / metrics['Status.JVM.Memory.Heap.Max'] * 100 | number:'1.0-2')"
@@ -44,13 +44,13 @@
  </tr>
  <tr>
  <td class="table-header">Off-Heap Memory</td>
- <td>{{ config['jobmanager.memory.off-heap.size'] || '-' }}</td>
+ <td>{{ config['jobmanager.memory.off-heap.size'] | parseInt | humanizeBytes }}</td>
  <td><i nz-icon nz-tooltip nzTitle="Metrics related to this configuration parameter cannot be monitored. Flink does not have full control over these memory pools"
  nzType="info-circle"></i></td>
  </tr>
  <tr>
  <td class="table-header">JVM Metaspace</td>
- <td>{{ config['jobmanager.memory.jvm-metaspace.size'] || '-' }}</td>
+ <td>{{ config['jobmanager.memory.jvm-metaspace.size'] | parseInt | humanizeBytes }}</td>
  <td>
  <nz-progress nzSize="small" nzStrokeLinecap="square"
  [nzPercent]="+(metrics['Status.JVM.Memory.Metaspace.Used'] / metrics['Status.JVM.Memory.Metaspace.Max'] * 100 | number:'1.0-2')"
@@ -63,7 +63,7 @@
  <td class="table-header">JVM Overhead</td>
  <td>
  <ng-container *ngIf="config['jobmanager.memory.jvm-overhead.min'] === config['jobmanager.memory.jvm-overhead.max']; else minMaxTemplate">
- {{ config['jobmanager.memory.jvm-overhead.min'] || '-' }}
+ {{ config['jobmanager.memory.jvm-overhead.min'] | parseInt | humanizeBytes }}
  </ng-container>
  <ng-template #minMaxTemplate>
  Min: {{ config['jobmanager.memory.jvm-overhead.min'] || '-'}}

flink-runtime-web/web-dashboard/src/app/share/pipes/parse-int.pipe.ts

@@ -0,0 +1,33 @@
+/*
+ * 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
+ *
+ * https://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 { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'parseInt'
+})
+export class ParseIntPipe implements PipeTransform {
+ transform(value: string): number | null {
+ const parsed = parseInt(value, 10);
+ if (isNaN(parsed)) {
+ return null;
+ } else {
+ return parsed;
+ }
+ }
+}

flink-runtime-web/web-dashboard/src/app/share/pipes/pipe.module.ts

@@ -23,6 +23,7 @@ import { HumanizeWatermarkPipe } from 'share/pipes/humanize-watermark.pipe';
 import { HumanizeDurationPipe } from './humanize-duration.pipe';
 import { HumanizeDatePipe } from './humanize-date.pipe';
 import { HumanizeChartNumericPipe } from './humanize-chart-numeric.pipe';
+import { ParseIntPipe } from './parse-int.pipe';
 
 @NgModule({
  imports: [CommonModule],
@@ -31,8 +32,16 @@ import { HumanizeChartNumericPipe } from './humanize-chart-numeric.pipe';
  HumanizeDatePipe,
  HumanizeBytesPipe,
  HumanizeWatermarkPipe,
+ ParseIntPipe,
  HumanizeChartNumericPipe
  ],
- exports: [HumanizeDurationPipe, HumanizeDatePipe, HumanizeBytesPipe, HumanizeWatermarkPipe, HumanizeChartNumericPipe]
+ exports: [
+ HumanizeDurationPipe,
+ HumanizeDatePipe,
+ HumanizeBytesPipe,
+ HumanizeWatermarkPipe,
+ HumanizeChartNumericPipe,
+ ParseIntPipe
+ ]
 })
 export class PipeModule {}