You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by dw...@apache.org on 2019/09/27 15:37:05 UTC

[flink] branch release-1.9 updated (c2956f5 -> 883d9cd)

This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a change to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git.


    from c2956f5  [FLINK-14139][rest] Fix potential memory leak problem of rest server.
     new 21a8e89  [FLINK-13386][web]: Fix job manager configuration sort
     new fca47cd  [FLINK-13386][web]: Fix job subtask sort
     new f18448a  [FLINK-13386][web]: Fix operators/tasks metrics sort
     new 43b967d  [FLINK-13386][web]: Add numeric metrics in job
     new 8b35c7e  [FLINK-13386][web]: Add all operators watermark
     new 883d9cd  [FLINK-13386][web]: Fix sort in Firefox

The 6 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 flink-runtime-web/web-dashboard/package-lock.json  | 77 ++++++++++++++++------
 .../web-dashboard/src/app/interfaces/job-detail.ts |  1 +
 .../job-manager-configuration.component.ts         |  2 +-
 .../pages/job/overview/job-overview.component.ts   | 53 +++++++++++++--
 .../overview/list/job-overview-list.component.html |  4 +-
 .../overview/list/job-overview-list.component.ts   |  4 +-
 .../web-dashboard/src/app/services/job.service.ts  |  2 +
 .../src/app/services/metrics.service.ts            | 20 +++++-
 .../src/app/share/common/dagre/node.component.html |  1 +
 .../src/app/share/common/dagre/node.component.less |  7 +-
 .../src/app/share/common/dagre/node.component.ts   |  2 +
 .../customize/job-chart/job-chart.component.html   | 13 +++-
 .../customize/job-chart/job-chart.component.less   |  6 ++
 .../customize/job-chart/job-chart.component.ts     | 13 +++-
 ...ytes.pipe.ts => humanize-chart-numeric.pipe.ts} | 33 +++++-----
 .../src/app/share/pipes/humanize-duration.pipe.ts  | 14 +++-
 .../src/app/share/pipes/pipe.module.ts             | 11 +++-
 17 files changed, 203 insertions(+), 60 deletions(-)
 copy flink-runtime-web/web-dashboard/src/app/share/pipes/{humanize-bytes.pipe.ts => humanize-chart-numeric.pipe.ts} (56%)


[flink] 02/06: [FLINK-13386][web]: Fix job subtask sort

Posted by dw...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a commit to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git

commit fca47cddab357702c56ec00c2980e59c60df1dc1
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Sat Jul 27 15:33:22 2019 +0800

    [FLINK-13386][web]: Fix job subtask sort
---
 flink-runtime-web/web-dashboard/src/app/services/job.service.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/flink-runtime-web/web-dashboard/src/app/services/job.service.ts b/flink-runtime-web/web-dashboard/src/app/services/job.service.ts
index 4da2b70..48f32a1 100644
--- a/flink-runtime-web/web-dashboard/src/app/services/job.service.ts
+++ b/flink-runtime-web/web-dashboard/src/app/services/job.service.ts
@@ -264,6 +264,8 @@ export class JobService {
           });
         }
       });
+      const listOfVerticesId = job.vertices.map(item => item.id);
+      nodes.sort((pre, next) => listOfVerticesId.indexOf(next.id) - listOfVerticesId.indexOf(pre.id));
     }
     return {
       ...job,


[flink] 04/06: [FLINK-13386][web]: Add numeric metrics in job

Posted by dw...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a commit to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git

commit 43b967d3a35a49adca65ccaf78eeecd00ad1dadc
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Sat Jul 27 16:42:08 2019 +0800

    [FLINK-13386][web]: Add numeric metrics in job
---
 .../customize/job-chart/job-chart.component.html   | 13 ++++--
 .../customize/job-chart/job-chart.component.less   |  6 +++
 .../customize/job-chart/job-chart.component.ts     | 13 +++++-
 ...tion.pipe.ts => humanize-chart-numeric.pipe.ts} | 48 ++++++++--------------
 .../src/app/share/pipes/humanize-duration.pipe.ts  | 14 +++++--
 .../src/app/share/pipes/pipe.module.ts             | 11 ++++-
 6 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.html b/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.html
index f20258e..4ab72d6 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.html
@@ -21,13 +21,20 @@
     <div class="text">{{title}}</div>
     <div class="operate">
       <nz-button-group [nzSize]="'small'">
-        <button nz-button [nzType]="size==='big'?'primary':'default'" (click)="resize('big')">Big</button>
-        <button nz-button [nzType]="size==='small'?'primary':'default'" (click)="resize('small')">Small</button>
+        <button nz-button [nzType]="size === 'big' ? 'primary' : 'default'" (click)="resize('big')">Big</button>
+        <button nz-button [nzType]="size === 'small' ? 'primary' : 'default'" (click)="resize('small')">Small</button>
       </nz-button-group>
       <button nz-button class="close" [nzSize]="'small'" (click)="close()"><i nz-icon type="close" theme="outline"></i></button>
     </div>
   </div>
   <div class="content">
-    <div #chart></div>
+    <div [hidden]="displayMode === 'numeric'" #chart></div>
+    <div class="numeric" [hidden]="displayMode === 'chart'">{{latestValue | humanizeChartNumeric:title}}</div>
+    <div class="type-switch">
+      <nz-button-group [nzSize]="'small'">
+        <button nz-button [nzType]="displayMode === 'chart' ? 'primary' : 'default'" (click)="setMode('chart')">Chart</button>
+        <button nz-button [nzType]="displayMode === 'numeric' ? 'primary' : 'default'" (click)="setMode('numeric')">Numeric</button>
+      </nz-button-group>
+    </div>
   </div>
 </div>
diff --git a/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.less b/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.less
index 4cfe665..100027c 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.less
@@ -59,6 +59,12 @@
 
 .content {
   padding: 12px;
+
+  .numeric {
+    line-height: 150px;
+    font-size: 32px;
+    text-align: center;
+  }
 }
 
 button {
diff --git a/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.ts b/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.ts
index 2e33c0d..e5b716c 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/customize/job-chart/job-chart.component.ts
@@ -45,8 +45,10 @@ export class JobChartComponent implements AfterViewInit, OnDestroy {
   @Output() closed = new EventEmitter();
   @ViewChild('chart') chart: ElementRef;
   size = 'small';
+  displayMode: 'chart' | 'numeric' = 'chart';
   chartInstance: Chart;
   data: Array<{ time: number; value: number; type: string }> = [];
+  latestValue: number;
 
   @HostBinding('class.big')
   get isBig() {
@@ -54,9 +56,13 @@ export class JobChartComponent implements AfterViewInit, OnDestroy {
   }
 
   refresh(res: { timestamp: number; values: { [id: string]: number } }) {
+    this.latestValue = res.values[this.title];
+    if (this.displayMode === 'numeric') {
+      this.cdr.detectChanges();
+    }
     this.data.push({
       time: res.timestamp,
-      value: res.values[this.title],
+      value: this.latestValue,
       type: this.title
     });
 
@@ -68,6 +74,11 @@ export class JobChartComponent implements AfterViewInit, OnDestroy {
     }
   }
 
+  setMode(mode: 'chart' | 'numeric') {
+    this.displayMode = mode;
+    this.cdr.detectChanges();
+  }
+
   resize(size: string) {
     this.size = size;
     this.cdr.detectChanges();
diff --git a/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts b/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-chart-numeric.pipe.ts
similarity index 52%
copy from flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts
copy to flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-chart-numeric.pipe.ts
index 7440ddf..4ad8b92 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-chart-numeric.pipe.ts
@@ -18,43 +18,29 @@
 
 import { Pipe, PipeTransform } from '@angular/core';
 import { isNil } from 'utils';
+import { HumanizeBytesPipe } from './humanize-bytes.pipe';
+import { HumanizeDurationPipe } from './humanize-duration.pipe';
 
 @Pipe({
-  name: 'humanizeDuration'
+  name: 'humanizeChartNumeric'
 })
-export class HumanizeDurationPipe implements PipeTransform {
-  transform(value: number): any {
+export class HumanizeChartNumericPipe implements PipeTransform {
+  transform(value: number, id: string): string {
     if (isNil(value)) {
       return '-';
-    } else if (value < 0) {
-      return '-';
+    }
+    let returnVal = '';
+    if (/bytes/i.test(id) && /persecond/i.test(id)) {
+      returnVal = new HumanizeBytesPipe().transform(value) + ' / s';
+    } else if (/bytes/i.test(id)) {
+      returnVal = new HumanizeBytesPipe().transform(value);
+    } else if (/persecond/i.test(id)) {
+      returnVal = value + ' / s';
+    } else if (/time/i.test(id) || /latency/i.test(id)) {
+      returnVal = new HumanizeDurationPipe().transform(value, true);
     } else {
-      const ms = value % 1000;
-      let x = Math.floor(value / 1000);
-      const seconds = x % 60;
-      x = Math.floor(x / 60);
-      const minutes = x % 60;
-      x = Math.floor(x / 60);
-      const hours = x % 24;
-      x = Math.floor(x / 24);
-      const days = x;
-      if (days === 0) {
-        if (hours === 0) {
-          if (minutes === 0) {
-            if (seconds === 0) {
-              return `${ms}ms`;
-            } else {
-              return `${seconds}s`;
-            }
-          } else {
-            return `${minutes}m ${seconds}s`;
-          }
-        } else {
-          return `${hours}h ${minutes}m`;
-        }
-      } else {
-        return `${days}d ${hours}h ${minutes}m`;
-      }
+      returnVal = `${value}`;
     }
+    return returnVal;
   }
 }
diff --git a/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts b/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts
index 7440ddf..3cf8043 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/pipes/humanize-duration.pipe.ts
@@ -23,7 +23,7 @@ import { isNil } from 'utils';
   name: 'humanizeDuration'
 })
 export class HumanizeDurationPipe implements PipeTransform {
-  transform(value: number): any {
+  transform(value: number, short: boolean = false): any {
     if (isNil(value)) {
       return '-';
     } else if (value < 0) {
@@ -50,10 +50,18 @@ export class HumanizeDurationPipe implements PipeTransform {
             return `${minutes}m ${seconds}s`;
           }
         } else {
-          return `${hours}h ${minutes}m`;
+          if (short) {
+            return `${hours}h ${minutes}m`;
+          } else {
+            return `${hours}h ${minutes}m ${seconds}s`;
+          }
         }
       } else {
-        return `${days}d ${hours}h ${minutes}m`;
+        if (short) {
+          return `${days}d ${hours}h`;
+        } else {
+          return `${days}d ${hours}h ${minutes}m ${seconds}s`;
+        }
       }
     }
   }
diff --git a/flink-runtime-web/web-dashboard/src/app/share/pipes/pipe.module.ts b/flink-runtime-web/web-dashboard/src/app/share/pipes/pipe.module.ts
index 185c820..8afe7cc 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/pipes/pipe.module.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/pipes/pipe.module.ts
@@ -22,10 +22,17 @@ import { HumanizeBytesPipe } from 'share/pipes/humanize-bytes.pipe';
 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';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [HumanizeDurationPipe, HumanizeDatePipe, HumanizeBytesPipe, HumanizeWatermarkPipe],
-  exports: [HumanizeDurationPipe, HumanizeDatePipe, HumanizeBytesPipe, HumanizeWatermarkPipe]
+  declarations: [
+    HumanizeDurationPipe,
+    HumanizeDatePipe,
+    HumanizeBytesPipe,
+    HumanizeWatermarkPipe,
+    HumanizeChartNumericPipe
+  ],
+  exports: [HumanizeDurationPipe, HumanizeDatePipe, HumanizeBytesPipe, HumanizeWatermarkPipe, HumanizeChartNumericPipe]
 })
 export class PipeModule {}


[flink] 06/06: [FLINK-13386][web]: Fix sort in Firefox

Posted by dw...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a commit to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git

commit 883d9cdb6873e506a688a64f0cb6f122c33ed092
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Tue Jul 30 10:42:34 2019 +0800

    [FLINK-13386][web]: Fix sort in Firefox
---
 .../src/app/pages/job/overview/list/job-overview-list.component.html  | 4 ++--
 .../src/app/pages/job/overview/list/job-overview-list.component.ts    | 4 ++--
 flink-runtime-web/web-dashboard/src/app/services/job.service.ts       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
index 8e2debe..f6d7399 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
@@ -20,7 +20,7 @@
   class="no-border small"
   [nzSize]="'small'"
   [nzData]="nodes"
-  [nzScroll]="{x:((1310+left)+'px')}"
+  [nzScroll]="{x:((1360+left)+'px')}"
   [nzFrontPagination]="false"
   [nzShowPagination]="false">
   <thead (nzSortChange)="sort($event)" nzSingleSort>
@@ -33,7 +33,7 @@
       <th nzSortKey="detail.metrics.write-records" nzShowSort nzWidth="120px">Records Sent</th>
       <th nzSortKey="parallelism" nzShowSort nzWidth="120px">Parallelism</th>
       <th nzSortKey="detail.start-time" nzShowSort nzWidth="150px">Start Time</th>
-      <th nzSortKey="detail.duration" nzShowSort nzWidth="100px">Duration</th>
+      <th nzSortKey="detail.duration" nzShowSort nzWidth="150px">Duration</th>
       <th nzSortKey="detail.end-time" nzShowSort nzWidth="150px">End Time</th>
       <th nzWidth="100px" nzRight="0px">Tasks</th>
     </tr>
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
index e7cf66b..c1ceaef 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
@@ -28,8 +28,8 @@ import { NodesItemCorrectInterface } from 'interfaces';
 })
 export class JobOverviewListComponent {
   innerNodes: NodesItemCorrectInterface[] = [];
-  sortName = 'detail.topology-id';
-  sortValue = 'ascend';
+  sortName: string;
+  sortValue: string;
   left = 390;
   @Output() nodeClick = new EventEmitter();
   @Input() selectedNode: NodesItemCorrectInterface;
diff --git a/flink-runtime-web/web-dashboard/src/app/services/job.service.ts b/flink-runtime-web/web-dashboard/src/app/services/job.service.ts
index 48f32a1..4abaa3f 100644
--- a/flink-runtime-web/web-dashboard/src/app/services/job.service.ts
+++ b/flink-runtime-web/web-dashboard/src/app/services/job.service.ts
@@ -265,7 +265,7 @@ export class JobService {
         }
       });
       const listOfVerticesId = job.vertices.map(item => item.id);
-      nodes.sort((pre, next) => listOfVerticesId.indexOf(next.id) - listOfVerticesId.indexOf(pre.id));
+      nodes.sort((pre, next) => listOfVerticesId.indexOf(pre.id) - listOfVerticesId.indexOf(next.id));
     }
     return {
       ...job,


[flink] 01/06: [FLINK-13386][web]: Fix job manager configuration sort

Posted by dw...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a commit to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git

commit 21a8e8915aa68f2f9fe9c5ad52c63f7befe908ed
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Sat Jul 27 15:02:59 2019 +0800

    [FLINK-13386][web]: Fix job manager configuration sort
---
 flink-runtime-web/web-dashboard/package-lock.json  | 77 ++++++++++++++++------
 .../job-manager-configuration.component.ts         |  2 +-
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/flink-runtime-web/web-dashboard/package-lock.json b/flink-runtime-web/web-dashboard/package-lock.json
index 42e95ae..b9d70d0 100644
--- a/flink-runtime-web/web-dashboard/package-lock.json
+++ b/flink-runtime-web/web-dashboard/package-lock.json
@@ -1572,6 +1572,7 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2806,7 +2807,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3508,7 +3510,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4505,7 +4508,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4526,12 +4530,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4546,17 +4552,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4673,7 +4682,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4685,6 +4695,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4699,6 +4710,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4706,12 +4718,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4730,6 +4744,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4810,7 +4825,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4822,6 +4838,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4907,7 +4924,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4943,6 +4961,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4962,6 +4981,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5005,12 +5025,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -5019,6 +5041,7 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -5047,6 +5070,7 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -5090,7 +5114,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -5300,7 +5325,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -6252,7 +6278,8 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -7135,6 +7162,7 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -7147,7 +7175,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -7520,7 +7549,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -8170,6 +8200,7 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -9217,6 +9248,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
+      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -9228,6 +9260,7 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -9238,7 +9271,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -9247,6 +9281,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -9257,6 +9292,7 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -9267,6 +9303,7 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
+          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -10719,6 +10756,7 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
+      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -12139,6 +12177,7 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/configuration/job-manager-configuration.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/configuration/job-manager-configuration.component.ts
index e130ed2..1dc88ee 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job-manager/configuration/job-manager-configuration.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job-manager/configuration/job-manager-configuration.component.ts
@@ -32,7 +32,7 @@ export class JobManagerConfigurationComponent implements OnInit {
 
   ngOnInit() {
     this.jobManagerService.loadConfig().subscribe(data => {
-      this.listOfConfig = data;
+      this.listOfConfig = data.sort((pre, next) => (pre.key > next.key ? 1 : -1));
       this.cdr.markForCheck();
     });
   }


[flink] 03/06: [FLINK-13386][web]: Fix operators/tasks metrics sort

Posted by dw...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a commit to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git

commit f18448ab1919a906f37b7ca273de67cd7d47c043
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Sat Jul 27 15:58:48 2019 +0800

    [FLINK-13386][web]: Fix operators/tasks metrics sort
---
 .../src/app/services/metrics.service.ts              | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/flink-runtime-web/web-dashboard/src/app/services/metrics.service.ts b/flink-runtime-web/web-dashboard/src/app/services/metrics.service.ts
index 081aa4e..d13b3a6 100644
--- a/flink-runtime-web/web-dashboard/src/app/services/metrics.service.ts
+++ b/flink-runtime-web/web-dashboard/src/app/services/metrics.service.ts
@@ -33,9 +33,23 @@ export class MetricsService {
    * @param vertexId
    */
   getAllAvailableMetrics(jobId: string, vertexId: string) {
-    return this.httpClient.get<Array<{ id: string; value: string }>>(
-      `${BASE_URL}/jobs/${jobId}/vertices/${vertexId}/metrics`
-    );
+    return this.httpClient
+      .get<Array<{ id: string; value: string }>>(`${BASE_URL}/jobs/${jobId}/vertices/${vertexId}/metrics`)
+      .pipe(
+        map(item =>
+          item.sort((pre, next) => {
+            const preId = pre.id.toLowerCase();
+            const nextId = next.id.toLowerCase();
+            if (preId < nextId) {
+              return -1;
+            } else if (preId > nextId) {
+              return 1;
+            } else {
+              return 0;
+            }
+          })
+        )
+      );
   }
 
   /**


[flink] 05/06: [FLINK-13386][web]: Add all operators watermark

Posted by dw...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dwysakowicz pushed a commit to branch release-1.9
in repository https://gitbox.apache.org/repos/asf/flink.git

commit 8b35c7ed9cbd412435ba70521270976218ccfa60
Author: vthinkxie <ya...@alibaba-inc.com>
AuthorDate: Sat Jul 27 17:56:26 2019 +0800

    [FLINK-13386][web]: Add all operators watermark
---
 .../web-dashboard/src/app/interfaces/job-detail.ts |  1 +
 .../pages/job/overview/job-overview.component.ts   | 53 +++++++++++++++++++---
 .../src/app/share/common/dagre/node.component.html |  1 +
 .../src/app/share/common/dagre/node.component.less |  7 ++-
 .../src/app/share/common/dagre/node.component.ts   |  2 +
 5 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/flink-runtime-web/web-dashboard/src/app/interfaces/job-detail.ts b/flink-runtime-web/web-dashboard/src/app/interfaces/job-detail.ts
index 3bf9c13..1429104 100644
--- a/flink-runtime-web/web-dashboard/src/app/interfaces/job-detail.ts
+++ b/flink-runtime-web/web-dashboard/src/app/interfaces/job-detail.ts
@@ -129,6 +129,7 @@ export interface NodesItemInterface {
 
 export interface NodesItemCorrectInterface extends NodesItemInterface {
   detail: VerticesItemInterface | undefined;
+  lowWatermark?: number;
 }
 
 export interface NodesItemLinkInterface {
diff --git a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
index 5174653..a0765c4 100644
--- a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/job-overview.component.ts
@@ -26,10 +26,11 @@ import {
   ViewChild
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { LONG_MIN_VALUE } from 'config';
+import { forkJoin, Observable, of, Subject } from 'rxjs';
+import { catchError, filter, map, takeUntil } from 'rxjs/operators';
 import { NodesItemCorrectInterface, NodesItemLinkInterface } from 'interfaces';
-import { JobService } from 'services';
+import { JobService, MetricsService } from 'services';
 import { DagreComponent } from 'share/common/dagre/dagre.component';
 
 @Component({
@@ -62,11 +63,52 @@ export class JobOverviewComponent implements OnInit, OnDestroy {
     }
   }
 
+  mergeWithWatermarks(nodes: NodesItemCorrectInterface[]): Observable<NodesItemCorrectInterface[]> {
+    return forkJoin(
+      nodes.map(node => {
+        const listOfMetricId = [];
+        let lowWatermark = NaN;
+        for (let i = 0; i < node.parallelism; i++) {
+          listOfMetricId.push(`${i}.currentInputWatermark`);
+        }
+        return this.metricService.getMetrics(this.jobId, node.id, listOfMetricId).pipe(
+          map(metrics => {
+            let minValue = NaN;
+            const watermarks: { [index: string]: number } = {};
+            for (const key in metrics.values) {
+              const value = metrics.values[key];
+              const subtaskIndex = key.replace('.currentInputWatermark', '');
+              watermarks[subtaskIndex] = value;
+              if (isNaN(minValue) || value < minValue) {
+                minValue = value;
+              }
+            }
+            if (!isNaN(minValue) && minValue > LONG_MIN_VALUE) {
+              lowWatermark = minValue;
+            } else {
+              lowWatermark = NaN;
+            }
+            return { ...node, lowWatermark };
+          })
+        );
+      })
+    ).pipe(catchError(() => of(nodes)));
+  }
+
+  refreshNodesWithWatermarks() {
+    this.mergeWithWatermarks(this.nodes).subscribe(nodes => {
+      nodes.forEach(node => {
+        this.dagreComponent.updateNode(node.id, node);
+      });
+    });
+  }
+
   constructor(
     private jobService: JobService,
     private router: Router,
     private activatedRoute: ActivatedRoute,
     public elementRef: ElementRef,
+    private metricService: MetricsService,
     private cdr: ChangeDetectorRef
   ) {}
 
@@ -82,11 +124,10 @@ export class JobOverviewComponent implements OnInit, OnDestroy {
           this.links = data.plan.links;
           this.jobId = data.plan.jid;
           this.dagreComponent.flush(this.nodes, this.links, true).then();
+          this.refreshNodesWithWatermarks();
         } else {
           this.nodes = data.plan.nodes;
-          this.nodes.forEach(node => {
-            this.dagreComponent.updateNode(node.id, node);
-          });
+          this.refreshNodesWithWatermarks();
         }
         this.cdr.markForCheck();
       });
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.html b/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.html
index 799ad2b..3b57b46 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.html
+++ b/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.html
@@ -23,6 +23,7 @@
         <xhtml:div class="detail">{{operator}}</xhtml:div>
         <xhtml:div class="detail description">{{description}}</xhtml:div>
         <xhtml:div class="node-label">Parallelism: {{parallelism}}</xhtml:div>
+        <xhtml:div class="node-label watermark" *ngIf="lowWatermark">Low Watermark <xhtml:br/> {{lowWatermark}}</xhtml:div>
         <xhtml:div class="detail last" *ngIf="operatorStrategy">Operation: {{operatorStrategy}}</xhtml:div>
       </h4>
     </xhtml:div>
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.less b/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.less
index 0f10e2d..0533e05 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.less
+++ b/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.less
@@ -50,12 +50,17 @@
       &:first-child {
         margin-top: 24px;
       }
+
+      &.watermark {
+        font-weight: normal;;
+        font-weight: 12px;
+        color: @text-color-secondary;
+      }
     }
 
     .detail {
       margin-bottom: 12px;
       color: @text-color;
-
       &.description {
         color: @heading-color;
       }
diff --git a/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.ts b/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.ts
index 2f96b12..f24ef24 100644
--- a/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.ts
+++ b/flink-runtime-web/web-dashboard/src/app/share/common/dagre/node.component.ts
@@ -30,6 +30,7 @@ export class NodeComponent {
   operator: string | null;
   operatorStrategy: string | null;
   parallelism: number | null;
+  lowWatermark: number | null | undefined;
   height = 0;
   id: string;
 
@@ -45,6 +46,7 @@ export class NodeComponent {
     this.operator = this.decodeHTML(value.operator);
     this.operatorStrategy = this.decodeHTML(value.operator_strategy);
     this.parallelism = value.parallelism;
+    this.lowWatermark = value.lowWatermark;
     this.height = value.height || 0;
     this.id = value.id;
     if (description && description.length > 300) {