[FLINK-2939] add cancel button to web frontend

This closes apache#1313.

flink-runtime-web/src/main/java/org/apache/flink/runtime/webmonitor/WebRuntimeMonitor.java

@@ -36,6 +36,7 @@
 import org.apache.flink.runtime.leaderretrieval.LeaderRetrievalService;
 import org.apache.flink.runtime.webmonitor.files.StaticFileServerHandler;
 import org.apache.flink.runtime.webmonitor.handlers.JobAccumulatorsHandler;
+import org.apache.flink.runtime.webmonitor.handlers.JobCancellationHandler;
 import org.apache.flink.runtime.webmonitor.handlers.JobManagerConfigHandler;
 import org.apache.flink.runtime.webmonitor.handlers.JobPlanHandler;
 import org.apache.flink.runtime.webmonitor.handlers.JobConfigHandler;
@@ -186,7 +187,10 @@ public WebRuntimeMonitor(
 			.GET("/jobmanager/stdout", new StaticFileServerHandler(retriever, jobManagerAddressPromise.future(), timeout, logFiles.stdOutFile))
 
 			// this handler serves all the static contents
-			.GET("/:*", new StaticFileServerHandler(retriever, jobManagerAddressPromise.future(), timeout, webRootDir));
+			.GET("/:*", new StaticFileServerHandler(retriever, jobManagerAddressPromise.future(), timeout, webRootDir))
+
+			// cancel a job
+			.DELETE("/jobs/:jobid", handler(new JobCancellationHandler()));
 
 		synchronized (startupShutdownLock) {
 

flink-runtime-web/src/main/java/org/apache/flink/runtime/webmonitor/handlers/JobCancellationHandler.java

@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+package org.apache.flink.runtime.webmonitor.handlers;
+
+import org.apache.flink.api.common.JobID;
+import org.apache.flink.runtime.instance.ActorGateway;
+import org.apache.flink.runtime.messages.JobManagerMessages;
+import org.apache.flink.util.StringUtils;
+
+import java.util.Map;
+
+public class JobCancellationHandler implements RequestHandler, RequestHandler.JsonResponse {
+
+	@Override
+	public String handleRequest(Map<String, String> params, ActorGateway jobManager) throws Exception {
+		try {
+			JobID jobid = new JobID(StringUtils.hexStringToByte(params.get("jobid")));
+			if (jobManager != null) {
+				jobManager.tell(new JobManagerMessages.CancelJob(jobid));
+				return "";
+			}
+			else {
+				throw new Exception("No connection to the leading JobManager.");
+			}
+		}
+		catch (Exception e) {
+			throw new RuntimeException("Failed to cancel the job with id: "  + params.get("jobid") + e.getMessage(), e);
+		}
+	}
+}

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

@@ -35,10 +35,14 @@ nav.navbar.navbar-default.navbar-fixed-top.navbar-main(ng-if="job")
     span(ng-if="job['end-time'] > -1")
       | - 
       | {{ job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
-  
+
   .navbar-info.last.first(ng-if="job.duration > -1")
     | {{job.duration}} ms
 
+  .navbar-info.last.first(ng-if="job.state=='RUNNING' || job.state=='CREATED'")
+    span.show-pointer.label.label-danger(ng-click="cancelJob($event)")
+      | Cancel
+
 nav.navbar.navbar-default.navbar-fixed-top.navbar-main-additional(ng-if="job")
   ul.nav.nav-tabs
     li(ui-sref-active='active')

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

@@ -70,6 +70,10 @@ angular.module('flinkApp')
 
     $interval.cancel(refresher)
 
+  $scope.cancelJob = (cancelEvent) ->
+    angular.element(cancelEvent.currentTarget).removeClass('label-danger').addClass('label-info').html('Cancelling...')
+    JobsService.cancelJob($stateParams.jobid).then (data) ->
+      {}
 
 # --------------------------------------
 

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

@@ -211,4 +211,7 @@ angular.module('flinkApp')
 
     deferred.promise
 
+  @cancelJob = (jobid) ->
+    $http.delete "jobs/" + jobid
+
   @

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

@@ -420,8 +420,5 @@ livechart
 #non-heap-mem
   background-color: #90ed7d
 
-a.show-pointer
+.show-pointer
   cursor: pointer
-
-
-

flink-runtime-web/web-dashboard/web/css/index.css

@@ -591,6 +591,6 @@ svg.graph .node-label {
 #non-heap-mem {
   background-color: #90ed7d;
 }
-a.show-pointer {
+.show-pointer {
   cursor: pointer;
 }

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

@@ -32,6 +32,7 @@
       - 
       {{ job['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}</span></div>
   <div ng-if="job.duration &gt; -1" class="navbar-info last first">{{job.duration}} ms</div>
+  <div ng-if="job.state=='RUNNING' || job.state=='CREATED'" class="navbar-info last first"><span ng-click="cancelJob($event)" class="show-pointer label label-danger">Cancel</span></div>
 </nav>
 <nav ng-if="job" class="navbar navbar-default navbar-fixed-top navbar-main-additional">
   <ul class="nav nav-tabs">