WIP #1794 Add stop button to GME compute dashboard

src/common/compute/backends/gme/ExecutorHelper.js

@@ -50,5 +50,24 @@ define([
         return this.get(JOBS_ENDPOINT, webgmeToken);
     };
 
+    ExecutorHelper.cancelJob = function(jobId, token) {
+        const endpoint = `/rest/executor/cancel/${jobId}`;
+
+        const deferred = Q.defer();
+        const url = this.url(endpoint);
+        const req = superagent.post(url);
+        if (token) {
+            req.set('Authorization', 'Bearer ' + token);
+        }
+        req.end(err => {
+            if (err) {
+                return deferred.reject(err);
+            }
+            deferred.resolve();
+        });
+
+        return deferred.promise;
+    };
+
     return ExecutorHelper;
 });

src/common/compute/backends/gme/dashboard/WorkerJobItem.html

@@ -4,4 +4,5 @@
     <td class="project">unknown</td>
     <td class="createdAt">unknown</td>
     <td class="status">unknown</td>
+    <td class="cancel"><span class="oi oi-media-stop" title="Stop" aria-hidden="true"></span></td>
 </tr>

src/common/compute/backends/gme/dashboard/index.js

@@ -191,11 +191,11 @@ define([
     };
 
     WorkerDialog.prototype.updateJobItem = function(jobId) {
-        var job = this.jobs[jobId] || $(WorkerJobItem),
+        const job = this.jobs[jobId] || $(WorkerJobItem),
             info = this.jobsDict[jobId],
             createdTime = new Date(info.createTime).getTime(),
-            clazz = utils.ClassForJobStatus[info.status.toLowerCase()],
-            status = info.status;
+            clazz = utils.ClassForJobStatus[info.status.toLowerCase()];
+        let status = info.status;
 
         job[0].className = `job-tag ${clazz}`;
 
@@ -207,6 +207,11 @@ define([
         job.find('.status').text(status);
 
         if (!this.jobs[jobId]) {
+            job.find('.cancel').on('click', async event => {
+                event.stopPropagation();
+                event.preventDefault();
+                await ExecutorHelper.cancelJob(jobId);
+            });
             job.find('.job-id').text('Loading');
             job.find('.createdAt').text(utils.getDisplayTime(createdTime));
             this.updateJobItemName(jobId);