[FLINK-3310] [runtime-web] Add back pressure statistics to web dashboard (frontend)

This closes #1578.

flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.jade

@@ -30,4 +30,7 @@
       li(ui-sref-active='active')
         a(ui-sref=".checkpoints({nodeid: nodeid})") Checkpoints
 
+      li(ng-if="job.state == 'RUNNING'" ui-sref-active='active')
+        a(ui-sref=".backpressure({nodeid: nodeid})") Back Pressure
+
   .panel-body.clean(ui-view="node-details")

flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.backpressure.jade

+//
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+ 
+      http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+table.table.table-body-hover.table-clickable.table-activable
+  thead
+    tr
+      th Name
+      th Status
+
+  tbody(ng-repeat="v in job.vertices" ng-class="{ active: v.id == nodeid }" ng-click="v.id == nodeid || changeNode(v.id)")
+    tr(ng-if="v.type == 'regular'")
+      td {{ v.name | humanizeText }}
+      td
+        bs-label(status="{{v.status}}") {{v.status}}
+    tr(ng-if="nodeid && v.id == nodeid")
+      td(ng-if="v.status != 'RUNNING'" colspan=2)
+        p Operator is not running. Cannot sample back pressure.
+      td(ng-if="v.status == 'RUNNING'" colspan=2)
+        table.table.table-hover.table-clickable.table-activable.table-inner
+          thead
+            tr
+              th Measurement
+              th Back Pressure Status
+          tbody
+            tr
+              td
+                span(ng-if="backPressureOperatorStats[v.id]['end-timestamp']") {{ now - backPressureOperatorStats[v.id]['end-timestamp'] | humanizeDuration }} ago
+                span(ng-if="backPressureOperatorStats[v.id]['status'] == 'deprecated'")
+                  bp-label(status="in-progress") Sampling in progress...
+              td
+                bp-label(ng-if="backPressureOperatorStats[v.id]['backpressure-level']" status="{{backPressureOperatorStats[v.id]['backpressure-level']}}") {{ backPressureOperatorStats[v.id]['backpressure-level'] | toUpperCase }}
+
+        div(ng-if="!nodeUnfolded && backPressureOperatorStats[v.id]['subtasks'] && backPressureOperatorStats[v.id]['subtasks'].length > 0")
+          a.btn.btn-default(ng-click="toggleFold()")
+            | Show subtasks
+            = ' '
+            i.fa.fa-chevron-down
+
+          a.btn.btn-default.pull-right(ng-click="deactivateNode(); $event.stopPropagation()" title="Fold")
+            i.fa.fa-chevron-up
+
+        div(ng-if="nodeUnfolded && backPressureOperatorStats[v.id]['subtasks'] && backPressureOperatorStats[v.id]['subtasks'].length > 0")
+          a.btn.btn-default(ng-click="toggleFold()")
+            | Hide subtasks
+            = ' '
+            i.fa.fa-chevron-up
+
+          a.btn.btn-default.pull-right(ng-click="deactivateNode(); $event.stopPropagation()" title="Fold")
+            i.fa.fa-chevron-up
+
+          table.table.table-hover.table-clickable.table-activable.table-inner
+            thead
+              tr
+                th Subtask
+                th Ratio
+                th Status
+            tbody
+              tr(ng-repeat="subtask in backPressureOperatorStats[nodeid]['subtasks']")
+                td {{ subtask['subtask'] + 1 }}
+                td {{ subtask['ratio'] }}
+                td
+                  bp-label(status="{{subtask['backpressure-level']}}") {{ subtask['backpressure-level'] | toUpperCase }}
+

flink-runtime-web/web-dashboard/app/scripts/common/directives.coffee

@@ -35,6 +35,21 @@ angular.module('flinkApp')
 
 # ----------------------------------------------
 
+.directive 'bpLabel', (JobsService) ->
+  transclude: true
+  replace: true
+  scope:
+    getBackPressureLabelClass: "&"
+    status: "@"
+
+  template: "<span title='{{status}}' ng-class='getBackPressureLabelClass()'><ng-transclude></ng-transclude></span>"
+
+  link: (scope, element, attrs) ->
+    scope.getBackPressureLabelClass = ->
+      'label label-' + JobsService.translateBackPressureLabelState(attrs.status)
+
+# ----------------------------------------------
+
 .directive 'indicatorPrimary', (JobsService) ->
   replace: true
   scope: 

flink-runtime-web/web-dashboard/app/scripts/common/filters.coffee

@@ -73,3 +73,5 @@ angular.module('flinkApp')
     return "" if typeof bytes is "undefined" or bytes is null
     if bytes < 1000 then bytes + " B" else converter(bytes, 1)
 
+.filter "toUpperCase", ->
+  (text) -> text.toUpperCase()

flink-runtime-web/web-dashboard/app/scripts/index.coffee

@@ -113,6 +113,13 @@ angular.module('flinkApp', ['ui.router', 'angularMoment'])
         templateUrl: "partials/jobs/job.plan.node-list.checkpoints.html"
         controller: 'JobPlanCheckpointsController'
 
+  .state "single-job.plan.backpressure",
+    url: "/backpressure"
+    views:
+      'node-details':
+        templateUrl: "partials/jobs/job.plan.node-list.backpressure.html"
+        controller: 'JobPlanBackPressureController'
+
   .state "single-job.timeline",
     url: "/timeline"
     views:

flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee

@@ -51,6 +51,7 @@ angular.module('flinkApp')
   $scope.vertices = null
   $scope.jobCheckpointStats = null
   $scope.showHistory = false
+  $scope.backPressureOperatorStats = {}
 
   JobsService.loadJob($stateParams.jobid).then (data) ->
     $scope.job = data
@@ -70,6 +71,7 @@ angular.module('flinkApp')
     $scope.plan = null
     $scope.vertices = null
     $scope.jobCheckpointStats = null
+    $scope.backPressureOperatorStats = null
 
     $interval.cancel(refresher)
 
@@ -179,6 +181,24 @@ angular.module('flinkApp')
 
 # --------------------------------------
 
+.controller 'JobPlanBackPressureController', ($scope, JobsService) ->
+  console.log 'JobPlanBackPressureController'
+  $scope.now = Date.now()
+
+  if $scope.nodeid
+    JobsService.getOperatorBackPressure($scope.nodeid).then (data) ->
+      $scope.backPressureOperatorStats[$scope.nodeid] = data
+
+  $scope.$on 'reload', (event) ->
+    console.log 'JobPlanBackPressureController (relaod)'
+    $scope.now = Date.now()
+
+    if $scope.nodeid
+      JobsService.getOperatorBackPressure($scope.nodeid).then (data) ->
+        $scope.backPressureOperatorStats[$scope.nodeid] = data
+
+# --------------------------------------
+
 .controller 'JobTimelineVertexController', ($scope, $state, $stateParams, JobsService) ->
   console.log 'JobTimelineVertexController'
 

flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee

@@ -232,6 +232,24 @@ angular.module('flinkApp')
 
     deferred.promise
 
+  # Operator-level back pressure stats
+  @getOperatorBackPressure = (vertexid) ->
+    deferred = $q.defer()
+
+    $http.get flinkConfig.jobServer + "jobs/" + currentJob.jid + "/vertices/" + vertexid + "/backpressure"
+    .success (data) =>
+      deferred.resolve(data)
+
+    deferred.promise
+
+  @translateBackPressureLabelState = (state) ->
+    switch state.toLowerCase()
+      when 'in-progress' then 'danger'
+      when 'ok' then 'success'
+      when 'low' then 'warning'
+      when 'high' then 'danger'
+      else 'default'
+
   @loadExceptions = ->
     deferred = $q.defer()
 

flink-runtime-web/web-dashboard/web/partials/jobs/job.plan.html

@@ -26,6 +26,7 @@ limitations under the License.
       <li ui-sref-active="active"><a ui-sref=".overview({nodeid: nodeid})">Overview</a></li>
       <li ui-sref-active="active"><a ui-sref=".accumulators({nodeid: nodeid})">Accumulators</a></li>
       <li ui-sref-active="active"><a ui-sref=".checkpoints({nodeid: nodeid})">Checkpoints</a></li>
+      <li ng-if="job.state == 'RUNNING'" ui-sref-active="active"><a ui-sref=".backpressure({nodeid: nodeid})">Back Pressure</a></li>
     </ul>
   </nav>
   <div ui-view="node-details" class="panel-body clean"></div>

flink-runtime-web/web-dashboard/web/partials/jobs/job.plan.node-list.backpressure.html

+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<table class="table table-body-hover table-clickable table-activable">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody ng-repeat="v in job.vertices" ng-class="{ active: v.id == nodeid }" ng-click="v.id == nodeid || changeNode(v.id)">
+    <tr ng-if="v.type == 'regular'">
+      <td>{{ v.name | humanizeText }}</td>
+      <td>
+        <bs-label status="{{v.status}}">{{v.status}}</bs-label>
+      </td>
+    </tr>
+    <tr ng-if="nodeid &amp;&amp; v.id == nodeid">
+      <td ng-if="v.status != 'RUNNING'" colspan="2">
+        <p>Operator is not running. Cannot sample back pressure.</p>
+      </td>
+      <td ng-if="v.status == 'RUNNING'" colspan="2">
+        <table class="table table-hover table-clickable table-activable table-inner">
+          <thead>
+            <tr>
+              <th>Measurement</th>
+              <th>Back Pressure Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><span ng-if="backPressureOperatorStats[v.id]['end-timestamp']">{{ now - backPressureOperatorStats[v.id]['end-timestamp'] | humanizeDuration }} ago</span><span ng-if="backPressureOperatorStats[v.id]['status'] == 'deprecated'">
+                  <bp-label status="in-progress">Sampling in progress...</bp-label></span></td>
+              <td>
+                <bp-label ng-if="backPressureOperatorStats[v.id]['backpressure-level']" status="{{backPressureOperatorStats[v.id]['backpressure-level']}}">{{ backPressureOperatorStats[v.id]['backpressure-level'] | toUpperCase }}</bp-label>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div ng-if="!nodeUnfolded &amp;&amp; backPressureOperatorStats[v.id]['subtasks'] &amp;&amp; backPressureOperatorStats[v.id]['subtasks'].length &gt; 0"><a ng-click="toggleFold()" class="btn btn-default">Show subtasks <i class="fa fa-chevron-down"></i></a><a ng-click="deactivateNode(); $event.stopPropagation()" title="Fold" class="btn btn-default pull-right"><i class="fa fa-chevron-up"></i></a></div>
+        <div ng-if="nodeUnfolded &amp;&amp; backPressureOperatorStats[v.id]['subtasks'] &amp;&amp; backPressureOperatorStats[v.id]['subtasks'].length &gt; 0"><a ng-click="toggleFold()" class="btn btn-default">Hide subtasks <i class="fa fa-chevron-up"></i></a><a ng-click="deactivateNode(); $event.stopPropagation()" title="Fold" class="btn btn-default pull-right"><i class="fa fa-chevron-up"></i></a>
+          <table class="table table-hover table-clickable table-activable table-inner">
+            <thead>
+              <tr>
+                <th>Subtask</th>
+                <th>Ratio</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="subtask in backPressureOperatorStats[nodeid]['subtasks']">
+                <td>{{ subtask['subtask'] + 1 }}</td>
+                <td>{{ subtask['ratio'] }}</td>
+                <td>
+                  <bp-label status="{{subtask['backpressure-level']}}">{{ subtask['backpressure-level'] | toUpperCase }}</bp-label>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
\ No newline at end of file