[FLINK-5819] [webui] implements numeric option on metrics graphs

This closes #3367

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

@@ -41,7 +41,7 @@ nav.navbar.navbar-default.navbar-secondary-additional.navbar-secondary-additiona
 
 ul.metric-row(ng-if="nodeid && metrics.length > 0" dnd-list="metrics" dnd-drop="dropped(event, index, item, external, type, external)")
   li.metric-col(ng-repeat="metric in metrics track by metric.id" dnd-draggable="metric" dnd-dragstart="dragStart()" dnd-dragend="dragEnd()" dnd-canceled="dragEnd()" ng-class="{big: metric.size != 'small'}")
-    metrics-graph(metric="metric" window="window" get-values="getValues(metric.id)" remove-metric="removeMetric(metric)" set-metric-size="setMetricSize")
+    metrics-graph(metric="metric" window="window" get-values="getValues(metric.id)" remove-metric="removeMetric(metric)" set-metric-size="setMetricSize" set-metric-view="setMetricView")
 
 .clearfix
 

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

@@ -98,3 +98,37 @@ angular.module('flinkApp')
 .filter "increment", ->
   (number) ->
     parseInt(number) + 1
+
+.filter "humanizeChartNumeric", ['humanizeBytesFilter', 'humanizeDurationFilter', (humanizeBytesFilter, humanizeDurationFilter)->
+  (value, metric)->
+    return_val = ''
+    if value != null
+      if /bytes/i.test(metric.id) && /persecond/i.test(metric.id)
+        return_val = humanizeBytesFilter(value) + ' / s'
+      else if /bytes/i.test(metric.id)
+        return_val = humanizeBytesFilter(value)
+      else if /persecond/i.test(metric.id)
+        return_val = value + ' / s'
+      else if /time/i.test(metric.id) || /latency/i.test(metric.id)
+        return_val = humanizeDurationFilter(value, true)
+      else
+        return_val = value
+    return return_val
+]
+
+.filter "humanizeChartNumericTitle", ['humanizeDurationFilter', (humanizeDurationFilter)->
+  (value, metric)->
+    return_val = ''
+    if value != null
+      if /bytes/i.test(metric.id) && /persecond/i.test(metric.id)
+        return_val = value + ' Bytes / s'
+      else if /bytes/i.test(metric.id)
+        return_val = value + ' Bytes'
+      else if /persecond/i.test(metric.id)
+        return_val = value + ' / s'
+      else if /time/i.test(metric.id) || /latency/i.test(metric.id)
+        return_val = humanizeDurationFilter(value, false)
+      else
+        return_val = value
+    return return_val
+]

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

@@ -385,6 +385,10 @@ angular.module('flinkApp')
     MetricsService.setMetricSize($scope.jobid, $scope.nodeid, metric, size)
     loadMetrics()
 
+  $scope.setMetricView = (metric, view) ->
+    MetricsService.setMetricView($scope.jobid, $scope.nodeid, metric, view)
+    loadMetrics()
+
   $scope.getValues = (metric) ->
     MetricsService.getValues($scope.jobid, $scope.nodeid, metric)
 

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

@@ -33,7 +33,15 @@ angular.module('flinkApp')
                  </div>
                </div>
                <div class="panel-body">
-                  <svg />
+                  <svg ng-if="metric.view == \'chart\'"/>
+                  <div ng-if="metric.view != \'chart\'">
+                      <div class="metric-numeric" title="{{value | humanizeChartNumericTitle:metric}}">{{value | humanizeChartNumeric:metric}}</div>
+                  </div>
+               </div>
+               <div class="buttons">
+                 <div class="btn-group">
+                   <button type="button" ng-class="[btnClasses, {active: metric.view == \'chart\'}]" ng-click="setView(\'chart\')">Chart</button>
+                   <button type="button" ng-class="[btnClasses, {active: metric.view != \'chart\'}]" ng-click="setView(\'numeric\')">Numeric</button>
                  </div>
              </div>'
   replace: true
@@ -42,6 +50,7 @@ angular.module('flinkApp')
     window: "="
     removeMetric: "&"
     setMetricSize: "="
+    setMetricView: "="
     getValues: "&"
 
   link: (scope, element, attrs) ->
@@ -106,10 +115,13 @@ angular.module('flinkApp')
     scope.setSize = (size) ->
       scope.setMetricSize(scope.metric, size)
 
-    scope.showChart()
+    scope.setView = (view) ->
+      scope.setMetricView(scope.metric, view)
+      scope.showChart() if view == 'chart'
+
+    scope.showChart() if scope.metric.view == 'chart'
 
     scope.$on 'metrics:data:update', (event, timestamp, data) ->
-#      scope.value = parseInt(data[scope.metric.id])
       scope.value = parseFloat(data[scope.metric.id])
 
       scope.data[0].values.push {
@@ -120,8 +132,8 @@ angular.module('flinkApp')
       if scope.data[0].values.length > scope.window
         scope.data[0].values.shift()
 
-      scope.showChart()
-      scope.chart.clearHighlights()
+      scope.showChart() if scope.metric.view == 'chart'
+      scope.chart.clearHighlights() if scope.metric.view == 'chart'
       scope.chart.tooltip.hidden(true)
 
     element.find(".metric-title").qtip({

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

@@ -110,7 +110,7 @@ angular.module('flinkApp')
   @addMetric = (jobid, nodeid, metricid) ->
     @setupLSFor(jobid, nodeid)
 
-    @metrics[jobid][nodeid].push({id: metricid, size: 'small'})
+    @metrics[jobid][nodeid].push({id: metricid, size: 'small', view: 'chart'})
 
     @saveSetup()
 
@@ -128,7 +128,16 @@ angular.module('flinkApp')
       i = @metrics[jobid][nodeid].indexOf(metric.id)
       i = _.findIndex(@metrics[jobid][nodeid], { id: metric.id }) if i == -1
 
-      @metrics[jobid][nodeid][i] = { id: metric.id, size: size } if i != -1
+      @metrics[jobid][nodeid][i] = { id: metric.id, size: size, view: metric.view } if i != -1
+
+      @saveSetup()
+
+  @setMetricView = (jobid, nodeid, metric, view) =>
+    if @metrics[jobid][nodeid]?
+      i = @metrics[jobid][nodeid].indexOf(metric.id)
+      i = _.findIndex(@metrics[jobid][nodeid], { id: metric.id }) if i == -1
+
+      @metrics[jobid][nodeid][i] = { id: metric.id, size: metric.size, view: view } if i != -1
 
       @saveSetup()
 
@@ -148,7 +157,7 @@ angular.module('flinkApp')
   @getMetricsSetup = (jobid, nodeid) =>
     {
       names: _.map(@metrics[jobid][nodeid], (value) =>
-        if _.isString(value) then { id: value, size: "small" } else value
+        if _.isString(value) then { id: value, size: "small", view: "chart" } else value
       )
     }
 

flink-runtime-web/web-dashboard/app/styles/metric.styl

@@ -67,6 +67,11 @@ $metric-row-height = 180px + 85px
         background-color: transparent
         height: $metric-row-height
         position: relative
+        .metric-numeric
+          text-align: center;
+          margin-top: 75px;
+          font-size: 40px;
+          font-weight: bold;
 
       .panel-heading
         padding: 0px 10px

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

@@ -39,7 +39,7 @@ limitations under the License.
 </div>
 <ul ng-if="nodeid &amp;&amp; metrics.length &gt; 0" dnd-list="metrics" dnd-drop="dropped(event, index, item, external, type, external)" class="metric-row">
   <li ng-repeat="metric in metrics track by metric.id" dnd-draggable="metric" dnd-dragstart="dragStart()" dnd-dragend="dragEnd()" dnd-canceled="dragEnd()" ng-class="{big: metric.size != 'small'}" class="metric-col">
-    <metrics-graph metric="metric" window="window" get-values="getValues(metric.id)" remove-metric="removeMetric(metric)" set-metric-size="setMetricSize"></metrics-graph>
+    <metrics-graph metric="metric" window="window" get-values="getValues(metric.id)" remove-metric="removeMetric(metric)" set-metric-size="setMetricSize" set-metric-view="setMetricView"></metrics-graph>
   </li>
 </ul>
 <div class="clearfix"></div>
\ No newline at end of file