[FLINK-14814][webui] Color nodes based on back pressure

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>

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;

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();
   }