[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">