This is an automated email from the ASF dual-hosted git repository. pnowojski pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/flink.git
commit b71f858ed9fe8cf36381e4cddf680fd7922f9780 Author: Piotr Nowojski <[email protected]> AuthorDate: Tue Dec 29 16:42:16 2020 +0100 [FLINK-14814][webui] Color nodes based on back pressure --- .../src/app/share/common/dagre/node.component.html | 3 +- .../src/app/share/common/dagre/node.component.less | 4 +- .../src/app/share/common/dagre/node.component.ts | 60 ++++++++++++++++++++++ 3 files changed, 64 insertions(+), 3 deletions(-) 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 0886256..9b5552d 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 @@ -19,7 +19,8 @@ <svg:g class="node node-rect"> <svg:foreignObject class="node-labels-container" [attr.y]="height ? -height / 2 : 0" [attr.width]="205" [attr.height]="height"> - <xhtml:div class="node-label-wrapper"> + <xhtml:div class="node-label-wrapper" [style.border-color]="borderColor" + [style.background-color]="backgroundColor"> <h4 class="content-wrap"> <xhtml:div class="detail">{{operator}}</xhtml:div> <xhtml:div class="detail description">{{description}}</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 f16c888..1698606 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 @@ -32,10 +32,10 @@ border-radius: 0; padding: 15px; color: @text-color; - background: lighten(@primary-color, 30%); text-align: left; word-break: break-all; - border: 1px solid @primary-color; + border-width: 1px; + border-style: solid; .content-wrap { font-size: 12px; 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 44b1dbf..b4c6f90 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 @@ -33,8 +33,16 @@ export class NodeComponent { lowWatermark: number | null | undefined; backPressuredPercentage: number | undefined = NaN; busyPercentage: number | undefined = NaN; + backgroundColor: string | undefined; + borderColor: string | undefined; height = 0; id: string; + backgroundBusyColor = '#ee6464'; + backgroundDefaultColor = '#5db1ff'; + backgroundBackPressuredColor = '#888888'; + borderBusyColor = '#ee2222'; + borderDefaultColor = '#1890ff'; + borderBackPressuredColor = '#000000'; decodeHTML(value: string): string | null { const parser = new DOMParser(); @@ -69,6 +77,48 @@ export class NodeComponent { return value || value === 0 || value === NaN; } + toRGBA = (d: string) => { + const l = d.length; + const rgba = []; + const hex = parseInt(d.slice(1), 16); + rgba[0] = (hex >> 16) & 255; + rgba[1] = (hex >> 8) & 255; + rgba[2] = hex & 255; + rgba[3] = l === 9 || l === 5 ? Math.round((((hex >> 24) & 255) / 255) * 10000) / 10000 : -1; + return rgba; + }; + + blend = (from: string, to: string, p = 0.5) => { + from = from.trim(); + to = to.trim(); + const b = p < 0; + p = b ? p * -1 : p; + const f = this.toRGBA(from); + const t = this.toRGBA(to); + if (to[0] === 'r') { + return 'rgb' + (to[3] === 'a' ? 'a(' : '(') + + Math.round(((t[0] - f[0]) * p) + f[0]) + ',' + + Math.round(((t[1] - f[1]) * p) + f[1]) + ',' + + Math.round(((t[2] - f[2]) * p) + f[2]) + ( + f[3] < 0 && t[3] < 0 ? '' : ',' + ( + f[3] > -1 && t[3] > -1 + ? Math.round((((t[3] - f[3]) * p) + f[3]) * 10000) / 10000 + : t[3] < 0 ? f[3] : t[3] + ) + ) + ')'; + } + + return '#' + (0x100000000 + (( + f[3] > -1 && t[3] > -1 + ? Math.round((((t[3] - f[3]) * p) + f[3]) * 255) + : t[3] > -1 ? Math.round(t[3] * 255) : f[3] > -1 ? Math.round(f[3] * 255) : 255 + ) * 0x1000000) + + (Math.round(((t[0] - f[0]) * p) + f[0]) * 0x10000) + + (Math.round(((t[1] - f[1]) * p) + f[1]) * 0x100) + + Math.round(((t[2] - f[2]) * p) + f[2]) + ).toString(16).slice(f[3] > -1 || t[3] > -1 ? 1 : 3); + }; + constructor(protected cd: ChangeDetectorRef) {} /** @@ -77,6 +127,16 @@ export class NodeComponent { */ update(node: NodesItemCorrectInterface): void { this.node = node; + this.backgroundColor = this.backgroundDefaultColor; + this.borderColor = this.borderDefaultColor; + if (node.busyPercentage) { + this.backgroundColor = this.blend(this.backgroundColor, this.backgroundBusyColor, node.busyPercentage / 100.0 ); + this.borderColor = this.blend(this.borderColor, this.borderBusyColor, node.busyPercentage / 100.0); + } + if (node.backPressuredPercentage) { + this.backgroundColor = this.blend(this.backgroundColor, this.backgroundBackPressuredColor, node.backPressuredPercentage / 100.0); + this.borderColor = this.blend(this.borderColor, this.borderBackPressuredColor, node.backPressuredPercentage / 100.0); + } this.cd.markForCheck(); }
