UI additions / updates (spark-jobserver#972)

* add submitted egg to spark context on subprocess start

* slight revision

* ui updates

- Add Spark URL to Context
- Add ability to kill Context
- Change Jars to Binaries and show all binary types

* added ability to kill running job

* roll back python egg changes from other PR

Author: rfrohock

job-server/src/main/resources/html/index.html

@@ -19,7 +19,7 @@ <h1>Spark Job Server UI</h1>
     <ul class="nav nav-tabs nav-justified" id="navTabs">
       <li class="active"><a href="#jobs" data-toggle="tab">Jobs</a></li>
       <li><a href="#contexts" data-toggle="tab">Contexts</a></li>
-      <li><a href="#jars" data-toggle="tab">Jars</a></li>
+      <li><a href="#binaries" data-toggle="tab">Binaries</a></li>
     </ul>
     <div class="tab-content">
       <div class="tab-pane active" id="jobs">
@@ -86,6 +86,8 @@ <h1>Spark Job Server UI</h1>
               <thead>
                 <tr>
                   <th>Name</th>
+                  <th>Spark URL</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -94,14 +96,15 @@ <h1>Spark Job Server UI</h1>
           </div>
         </div>
       </div>
-      <div class="tab-pane" id="jars">
+      <div class="tab-pane" id="binaries">
         <div class="panel">
           <div class="panel-heading"></div>
           <div class="panel-body">
-            <table class="table table-striped" id="jarsTable">
+            <table class="table table-striped" id="binariesTable">
               <thead>
                 <tr>
                   <th>Name</th>
+                  <th>Type</th>
                   <th>Deployment Time</th>
                 </tr>
               </thead>

job-server/src/main/resources/html/js/spark-jobserver-ui.js

@@ -1,4 +1,4 @@
-function showJobs(filter,$tableBody) {
+function showJobs(filter,$tableBody,allowKill) {
     $.getJSON(
         'jobs',
         filter,
@@ -12,6 +12,9 @@ function showJobs(filter,$tableBody) {
                 jobsHtml += "<td>" + job.context + "</td>";
                 jobsHtml += "<td>" + job.startTime + "</td>";
                 jobsHtml += "<td>" + job.duration + "</td>";
+                if (allowKill) {
+                    jobsHtml += "<td><a href='#' id=" + job.jobId + " onclick='deleteJob(this.id);return false;'>kill</a></td>";
+                }
                 jobsHtml += "</tr>";
             });
             $tableBody.html(jobsHtml);
@@ -20,11 +23,11 @@ function showJobs(filter,$tableBody) {
 
 function getJobs() {
     //show error jobs
-    showJobs({status:"error"},$('#failedJobsTable > tbody:last'));
+    showJobs({status:"error"},$('#failedJobsTable > tbody:last'), false);
     //show running jobs
-    showJobs({status:"running"},$('#runningJobsTable > tbody:last'));
+    showJobs({status:"running"},$('#runningJobsTable > tbody:last'), true);
     //show complete jobs
-    showJobs({status:"finished"},$('#completedJobsTable > tbody:last'));
+    showJobs({status:"finished"},$('#completedJobsTable > tbody:last'), false);
 }
 
 function getContexts() {
@@ -35,27 +38,70 @@ function getContexts() {
             $('#contextsTable tbody').empty();
 
             $.each(contexts, function(key, contextName) {
-                var items = [];
-                items.push("<tr><td>" + contextName + "</td></tr>");
-                $('#contextsTable > tbody:last').append(items.join(""));
+                $.getJSON(
+                    'contexts/' + contextName,
+                    '',
+                    function (contextDetail) {
+                        var items = [];
+                        items.push(
+                            "<tr><td>" + contextDetail.context + "</td>" +
+                            "<td><a href='" + contextDetail.url + "' target='_blank'>" + contextDetail.url + "</a></td>" +
+                            "<td><a href='#' id=" + contextDetail.context + " onclick='deleteContext(this.id);return false;'>kill</a></td>" +
+                            "</tr>");
+                        $('#contextsTable > tbody:last').append(items.join(""));
+                        console.log(items);
+                    });
             });
         });
 }
 
-function getJars() {
+function deleteJob(jobID) {
+    var deleteURL = "./jobs/" + jobID;
+
+    $.ajax ({
+        type: 'DELETE',
+        url: deleteURL
+    })
+    .done(function( responseText) {
+        alert( "Killed job: " + jobID + "\n" + JSON.stringify(responseText) );
+        window.location.reload(true);
+    })
+    .fail(function( jqXHR ) {
+        alert( "Failed killing job: " + jobID + "\n" + JSON.stringify(jqXHR.responseJSON) );
+    });
+}
+
+function deleteContext(contextName) {
+    var deleteURL = "./contexts/" + contextName;
+
+    $.ajax ({
+        type: 'DELETE',
+        url: deleteURL
+    })
+    .done(function( responseText) {
+        alert( "Killed context: " + contextName + "\n" + JSON.stringify(responseText) );
+        window.location.reload(true);
+    })
+    .fail(function( jqXHR ) {
+        alert( "Failed killing context: " + contextName + "\n" + JSON.stringify(jqXHR.responseJSON) );
+    });
+}
+
+function getBinaries() {
     $.getJSON(
-        'jars',
+        'binaries',
         '',
-        function(jars) {
-            $('#jarsTable tbody').empty();
+        function(binaries) {
+            $('#binariesTable tbody').empty();
 
-            $.each(jars, function(jarName, deploymentTime) {
+            $.each(binaries, function(binariesName, binaryInfo) {
                 var items = [];
                 items.push("<tr>");
-                items.push("<td>" + jarName + "</td>");
-                items.push("<td>" + deploymentTime + "</td>");
+                items.push("<td>" + binariesName + "</td>");
+                items.push("<td>" + binaryInfo['binary-type'] + "</td>");
+                items.push("<td>" + binaryInfo['upload-time'] + "</td>");
                 items.push("</tr>");
-                $('#jarsTable > tbody:last').append(items.join(""));
+                $('#binariesTable > tbody:last').append(items.join(""));
             });
         });
 }
@@ -70,7 +116,7 @@ $(function () {
         } else if (target == "#contexts") {
             getContexts();
         } else {
-            getJars();
+            getBinaries();
         }
     })
     getJobs();