Split run and logs

ui/index.html

@@ -18,14 +18,16 @@
       </form>
     </div>
 
+    <div id="started-alert" class="alert alert-info" style="display: none;">
+      <strong>Job running...</strong>
+      it's ID is <code id="jobid"></code>
+    </div>
+
     <div id="logs-card" class="card" style="display: none;">
       <h5 class="card-header">
         Here is your container logs output:
       </h5>
-      <pre id="logs" class="card-body bg-dark text-light">
-test
-test
-      </pre>
+      <pre id="logs" class="card-body bg-dark text-light"></pre>
     </div>
 
     <script src="/js/minifass.js"></script>

ui/js/minifass.js

@@ -8,19 +8,39 @@ function getVersion() {
     });
 }
 
+let current_job = null;
+
 function runctnr() {
   document.getElementById("btnlaunch").disabled = true;
   document.getElementById("btnlaunchspinner").style.display = "inline-block";
 
   fetch('/api/run')
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(data) {
+      current_job = data.jobid;
+
+      document.getElementById("jobid").textContent = current_job;
+      document.getElementById("started-alert").style.display = "block";
+
+      fetchLogs();
+    })
+  return false;
+}
+
+function fetchLogs() {
+  fetch('/api/jobs/' + current_job + '/logs')
     .then(function(response) {
       document.getElementById("btnlaunch").disabled = false;
       document.getElementById("btnlaunchspinner").style.display = "none";
+      document.getElementById("started-alert").style.display = "none";
+
       return response.text();
     })
     .then(function(logs) {
       document.getElementById("logs").textContent = logs;
       document.getElementById("logs-card").style.display = "block";
+      current_job = null;
     })
-  return false;
 }