[FLINK-20259][web] Add explanation to Effective Configuration in JM/TM

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

@@ -21,7 +21,10 @@
     <thead>
       <tr>
         <th colspan="2" class="table-header">Flink Memory Model</th>
-        <th class="table-header">Configured Values</th>
+        <th class="table-header">
+          Effective Configuration
+          <i class="header-icon" nz-icon nz-tooltip nzTitle="This column shows the values that are actually used by Flink. These may differ from the configured values; Flink may adjust them to fit the actual setup, and automatically derives values that were not explicitly configured." nzType="info-circle"></i>
+        </th>
         <th class="table-header">Metric</th>
       </tr>
     </thead>

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

@@ -21,6 +21,12 @@
 .wrapper {
   margin: 24px;
 }
+
+.header-icon {
+  position: relative;
+  top: 1px;
+}
+
 .flink-memory-model {
   margin-bottom: 24px;
   ::ng-deep {

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

@@ -22,7 +22,9 @@
       <thead>
       <tr>
         <th colspan="2" class="table-header">Flink Memory Model</th>
-        <th class="table-header">Configured Values</th>
+        <th class="table-header">Effective Configuration
+          <i class="header-icon" nz-icon nz-tooltip nzTitle="This column shows the values that are actually used by Flink. These may differ from the configured values; Flink may adjust them to fit the actual setup, and automatically derives values that were not explicitly configured." nzType="info-circle"></i>
+        </th>
         <th class="table-header">Metric</th>
       </tr>
       </thead>

flink-runtime-web/web-dashboard/src/app/pages/task-manager/metrics/task-manager-metrics.component.less

@@ -22,6 +22,11 @@
   margin-bottom: 16px;
 }
 
+.header-icon {
+  position: relative;
+  top: 1px;
+}
+
 nz-card:first-child {
   margin-bottom: 16px;
 }