[FLINK-4221] Show metrics in WebFrontend + general improvements

Other included changes:
- Removed Properties tab
- Renamed plan to overview
- Added parallelism to task list

This closes apache#2724

.gitignore

@@ -28,3 +28,5 @@ out/
 /docs/Gemfile.lock
 /docs/.bundle
 /docs/.rubydeps
+*.ipr
+*.iws

NOTICE

@@ -1,5 +1,5 @@
 Apache Flink
-Copyright 2014-2015 The Apache Software Foundation
+Copyright 2014-2016 The Apache Software Foundation
 
 This product includes software developed at
 The Apache Software Foundation (http://www.apache.org/).

flink-examples/flink-examples-streaming/src/main/java/org/apache/flink/streaming/examples/socket/SocketWindowWordCount.java

@@ -30,7 +30,7 @@
  * Implements a streaming windowed version of the "WordCount" program.
  *
  * This program connects to a server socket and reads strings from the socket.
- * The easiest way to try this out is to open a text sever (at port 12345) 
+ * The easiest way to try this out is to open a text server (at port 12345)
  * using the <i>netcat</i> tool via
  * <pre>
  * nc -l 12345
@@ -39,7 +39,7 @@
  */
 @SuppressWarnings("serial")
 public class SocketWindowWordCount {
-	
+
 	public static void main(String[] args) throws Exception {
 
 		// the port to connect to
@@ -53,17 +53,17 @@ public static void main(String[] args) throws Exception {
 			System.err.println("To start a simple text server, run 'netcat -l <port>' and type the input text " +
 					"into the command line");
 			return;
-		} 
-		
+		}
+
 		// get the execution environment
 		final StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironment();
 
 		// get input data by connecting to the socket
 		DataStream<String> text = env.socketTextStream("localhost", port, "\n");
 
-		// parse the data, group it, window it, and aggregate the counts 
+		// parse the data, group it, window it, and aggregate the counts
 		DataStream<WordWithCount> windowCounts = text
-				
+
 				.flatMap(new FlatMapFunction<String, WordWithCount>() {
 					@Override
 					public void flatMap(String value, Collector<WordWithCount> out) {
@@ -72,10 +72,10 @@ public void flatMap(String value, Collector<WordWithCount> out) {
 						}
 					}
 				})
-				
+
 				.keyBy("word")
 				.timeWindow(Time.seconds(5), Time.seconds(1))
-				
+
 				.reduce(new ReduceFunction<WordWithCount>() {
 					@Override
 					public WordWithCount reduce(WordWithCount a, WordWithCount b) {
@@ -88,17 +88,17 @@ public WordWithCount reduce(WordWithCount a, WordWithCount b) {
 
 		env.execute("Socket Window WordCount");
 	}
-	
+
 	// ------------------------------------------------------------------------
 
 	/**
 	 * Data type for words with count
 	 */
 	public static class WordWithCount {
-		
+
 		public String word;
 		public long count;
-		
+
 		public WordWithCount() {}
 
 		public WordWithCount(String word, long count) {
@@ -111,4 +111,4 @@ public String toString() {
 			return word + " : " + count;
 		}
 	}
-}
+}

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

@@ -50,18 +50,14 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main(ng-if="job")
 nav.navbar.navbar-default.navbar-fixed-top.navbar-main-additional(ng-if="job")
   ul.nav.nav-tabs
     li(ui-sref-active='active')
-      a(ui-sref=".plan") Plan
+      a(ui-sref=".plan") Overview
 
-    //- li(ui-sref-active='active' ng-if="job['end-time'] > -1")
     li(ui-sref-active='active')
       a(ui-sref=".timeline") Timeline
 
     li(ui-sref-active='active')
       a(ui-sref=".exceptions") Exceptions
 
-    li(ui-sref-active='active')
-      a(ui-sref=".properties") Properties
-
     li(ui-sref-active='active')
       a(ui-sref=".config") Configuration
 

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

@@ -24,6 +24,9 @@
       li(ui-sref-active='active')
         a(ui-sref=".subtasks({nodeid: nodeid})") Subtasks
 
+      li(ui-sref-active='active')
+        a(ui-sref=".metrics({nodeid: nodeid})") Metrics
+
       li(ui-sref-active='active')
         a(ui-sref=".taskmanagers({nodeid: nodeid})") TaskManagers
 

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

@@ -0,0 +1,47 @@
+//
+  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.
+
+p.p-info(ng-if="!nodeid")
+  em Select operator in the job graph above to see the metrics
+
+nav.navbar.navbar-default.navbar-secondary-additional.navbar-secondary-additional-2(ng-if="nodeid")
+  .navbar-info {{ vertex.name }}
+  .navbar-info {{ nodeid }}
+
+  .dropup.add-metrics(ng-if="availableMetrics.length")
+    button.btn.btn-default.navbar-btn.dropdown-toggle(type='button', data-toggle='dropdown')
+      | Add metric
+      |  
+      span.caret
+    ul.dropdown-menu.dropdown-menu-right.metric-menu
+      li(ng-repeat="metric in availableMetrics track by $index")
+        a(ng-click="addMetric(metric)") {{ metric.id }}
+
+  .dropup.add-metrics(ng-if="!availableMetrics.length")
+    button.btn.btn-default.navbar-btn.dropdown-toggle(type='button', data-toggle='dropdown', disabled='disabled')
+      i No metrics available
+
+.row.metric-row(ng-if="nodeid && metrics.length == 0")
+  p.p-info
+    em No metrics selected
+
+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")
+
+.clearfix
+

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

@@ -26,6 +26,7 @@ table.table.table-body-hover.table-clickable.table-activable
       th Records received
       th Bytes sent
       th Records sent
+      th Parallelism
       th Tasks
       th Status
 
@@ -43,12 +44,13 @@ table.table.table-body-hover.table-clickable.table-activable
       td {{ v.metrics['read-records'] | number }}
       td(title="{{v.metrics['write-bytes']}} bytes") {{ v.metrics['write-bytes'] | humanizeBytes }}
       td {{ v.metrics['write-records'] | number }}
+      td {{ v.parallelism }}
       td
         .label-group
           bs-label(status="{{status}}" ng-repeat="(index, status) in stateList") {{v.tasks[status]}}
 
       td 
         bs-label(status="{{v.status}}") {{v.status}}
     tr(ng-if="nodeid && v.id == nodeid")
-      td(colspan="10")
+      td(colspan="11")
         div(ng-include=" 'partials/jobs/job.plan.node.subtasks.html' ")

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

@@ -26,6 +26,7 @@ table.table.table-body-hover.table-clickable.table-activable
       th Records received
       th Bytes sent
       th Records sent
+      th Parallelism
       th Tasks
       th Status
 
@@ -43,12 +44,13 @@ table.table.table-body-hover.table-clickable.table-activable
       td {{ v.metrics['read-records'] | number }}
       td(title="{{v.metrics['write-bytes']}} bytes") {{ v.metrics['write-bytes'] | humanizeBytes }}
       td {{ v.metrics['write-records'] | number }}
+      td {{ v.parallelism }}
       td
         .label-group
           bs-label(status="{{status}}" ng-repeat="(index, status) in stateList") {{v.tasks[status]}}
 
       td
         bs-label(status="{{v.status}}") {{v.status}}
     tr(ng-if="nodeid && v.id == nodeid")
-      td(colspan="10")
+      td(colspan="11")
         div(ng-include=" 'partials/jobs/job.plan.node.taskmanagers.html' ")

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

@@ -16,7 +16,7 @@
 # limitations under the License.
 #
 
-angular.module('flinkApp', ['ui.router', 'angularMoment'])
+angular.module('flinkApp', ['ui.router', 'angularMoment', 'dndLists'])
 
 # --------------------------------------
 
@@ -107,6 +107,13 @@ angular.module('flinkApp', ['ui.router', 'angularMoment'])
         templateUrl: "partials/jobs/job.plan.node-list.subtasks.html"
         controller: 'JobPlanSubtasksController'
 
+  .state "single-job.plan.metrics",
+    url: "/metrics"
+    views:
+      'node-details':
+        templateUrl: "partials/jobs/job.plan.node-list.metrics.html"
+        controller: 'JobPlanMetricsController'
+
   .state "single-job.plan.taskmanagers",
     url: "/taskmanagers"
     views:
@@ -155,13 +162,6 @@ angular.module('flinkApp', ['ui.router', 'angularMoment'])
         templateUrl: "partials/jobs/job.exceptions.html"
         controller: 'JobExceptionsController'
 
-  .state "single-job.properties",
-    url: "/properties"
-    views:
-      details:
-        templateUrl: "partials/jobs/job.properties.html"
-        controller: 'JobPropertiesController'
-
   .state "single-job.config",
     url: "/config"
     views: