[FLINK-3310] [runtime-web] Add back pressure statistics to web dashbo…

…ard (frontend)

This closes apache#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

@@ -0,0 +1,77 @@
+//
+  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()