[FLINK-2218] Web client cannot distinguesh between Flink options and …

…program arguments

- added new input fields 'options' to WebClient
- adapted WebClient-to-JobManager job submission logic
- removed reduncand code and re-used CliFrontend

- updated documentation (including new screenshots)
- (some additional minor cleanup in launch.html and program.js)

This closes #904.

docs/apis/web_client.md

@@ -51,15 +51,22 @@ The interface starts serving the job view.
 You can **upload** a Flink program as a jar file. To **execute** an uploaded program:
 
 * select it from the job list on the left, 
-* enter the program arguments in the *"Arguments"* field (bottom left), and 
+* enter (optional) execution options in the *"Flink Options"* field (bottom left),
+* enter (optional) program arguments in the *"Program Arguments"* field (bottom left), and
 * click on the *"Run Job"* button (bottom right).
 
 If the *“Show optimizer plan”* option is enabled (default), the *plan view* is display next, otherwise the job is directly submitted to the JobManager for execution.
 
-The web interface can also handle multiple Flink jobs within a single jar file. To use this feature, package all required class files of all jobs into a single jar and specify the entry classes for each job as comma-separated-values in *program-class* argument within the jar's manifest file. The job view displays each entry class and you can pick any of them to preview the plan and/or submit the job to the JobManager. In case the jar's manifest file does not specify any entry class, you can specify it before the argument list as:
+The web interface can also handle multiple Flink jobs within a single jar file. To use this feature, package all required class files of all jobs into a single jar and specify the entry classes for each job as comma-separated-values in *program-class* argument within the jar's manifest file. The job view displays each entry class and you can pick any of them to preview the plan and/or submit the job to the JobManager. In case the jar's manifest file does not specify any entry class, you can specify it in the options field as:
 
 ```
--c <assemblerClass> <programArgs...>
+-c <assemblerClass>
+```
+
+It is also possible to set the default parallelism for the execution in options field as:
+
+```
+-p <dop>
 ```
 
 Furthermore, for each entry class implementing ```ProgramDescription``` interface, the provided description is shown as tooltip for the job (see {% gh_link flink-examples/flink-java-examples/src/main/java/org/apache/flink/examples/java/wordcount/WordCountMeta.java  "WordCountMeta example" %}).

docs/quickstart/run_example_quickstart.md

@@ -87,7 +87,7 @@ The Flink web client allows to submit Flink programs using a graphical user inte
 
 <div class="row" style="padding-top:15px">
 	<div class="col-md-6">
-		<a data-lightbox="compiler" href="{{ site.baseurl }}/page/img/quickstart-example/run-webclient.png" data-lightbox="example-1"><img class="img-responsive" src="{{ site.baseurl }}/page/img/quickstart-example/run-webclient.png" /></a>
+		<a data-lightbox="compiler" href="{{ site.baseurl }}/page/img/webclient_job_view.png" data-lightbox="example-1"><img class="img-responsive" src="{{ site.baseurl }}/page/img/webclient_job_view.png" /></a>
 	</div>
 	<div class="col-md-6">
 		1. Open web client on  <a href="http://localhost:8080/launch.html">localhost:8080</a> <br>
@@ -96,20 +96,25 @@ The Flink web client allows to submit Flink programs using a graphical user inte
 			./examples/flink-java-examples-*-KMeans.jar
 			{% endhighlight %} </br>
 		3. Select it in the left box to see how the operators in the plan are connected to each other. <br>
-		4. Enter the arguments in the lower left box:
+		4. Enter the arguments and options in the lower left box: <br>
+            Arguments: <br>
 			{% highlight bash %}
 			file://<pathToFlink>/kmeans/points file://<pathToFlink>/kmeans/centers file://<pathToFlink>/kmeans/result 10
 			{% endhighlight %}
 			For example:
 			{% highlight bash %}
 			file:///tmp/flink/kmeans/points file:///tmp/flink/kmeans/centers file:///tmp/flink/kmeans/result 10
 			{% endhighlight %}
+            Options (optional): (set the default parallelims, e.g., to 4) <br>
+			{% highlight bash %}
+            -p 4
+			{% endhighlight %}
 	</div>
 </div>
 <hr>
 <div class="row" style="padding-top:15px">
 	<div class="col-md-6">
-		<a data-lightbox="compiler" href="{{ site.baseurl }}/page/img/quickstart-example/compiler-webclient-new.png" data-lightbox="example-1"><img class="img-responsive" src="{{ site.baseurl }}/page/img/quickstart-example/compiler-webclient-new.png" /></a>
+		<a data-lightbox="compiler" href="{{ site.baseurl }}/page/img/webclient_plan_view.png" data-lightbox="example-1"><img class="img-responsive" src="{{ site.baseurl }}/page/img/webclient_plan_view.png" /></a>
 	</div>
 
 	<div class="col-md-6">
@@ -120,7 +125,7 @@ The Flink web client allows to submit Flink programs using a graphical user inte
 <hr>
 <div class="row" style="padding-top:15px">
 	<div class="col-md-6">
-		<a data-lightbox="compiler" href="{{ site.baseurl }}/page/img/quickstart-example/jobmanager-running-new.png" data-lightbox="example-1"><img class="img-responsive" src="{{ site.baseurl }}/page/img/quickstart-example/jobmanager-running-new.png" /></a>
+		<a data-lightbox="compiler" href="{{ site.baseurl }}/page/img/jobmanager.png" data-lightbox="example-1"><img class="img-responsive" src="{{ site.baseurl }}/page/img/jobmanager.png" /></a>
 	</div>
 	<div class="col-md-6">
 		1. Press the <b>Continue</b> button to start executing the job. <br>
@@ -152,4 +157,5 @@ The following three pictures show the results for the sample input above. Play a
 
 |relative stddev = 0.03|relative stddev = 0.08|relative stddev = 0.15|
 |:--------------------:|:--------------------:|:--------------------:|
-|<img src="{{ site.baseurl }}/page/img/quickstart-example/result003.png" alt="example1" style="width: 275px;"/>|<img src="{{ site.baseurl }}/page/img/quickstart-example/result008.png" alt="example2" style="width: 275px;"/>|<img src="{{ site.baseurl }}/page/img/quickstart-example/result015.png" alt="example3" style="width: 275px;"/>|
+|<img src="{{ site.baseurl }}/page/img/quickstart-example/result003.png" alt="example1" style="width: 275px;"/>|<img src="{{ site.baseurl }}/page/img/quickstart-example/result008.png" alt="example2" style="width: 275px;"/>|<img src="{{ site.baseurl }}/page/img/quickstart-example/result015.png" alt="example3" style="width: 275px;"/>|
+