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:09 UTC
[flink] 04/06: [FLINK-13386][web]: Add numeric metrics in job
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 {}