Split run and logs

app.go

@@ -41,7 +41,15 @@ func NewApp() App {
 	})
 
 	router.GET("/api/run", func(c *gin.Context) {
-		stream, err := docker.RunHello()
+		ctrid, err := docker.Run("hello-world")
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": err})
+		}
+		c.JSON(http.StatusOK, gin.H{"jobid": ctrid})
+	})
+
+	router.GET("/api/jobs/:jobid/logs", func(c *gin.Context) {
+		stream, err := docker.Logs(c.Param("jobid"))
 		if err != nil {
 			c.JSON(http.StatusInternalServerError, gin.H{"error": err})
 		}

engine/docker/docker.go

@@ -11,8 +11,12 @@ import (
 	oci "github.com/opencontainers/image-spec/specs-go/v1"
 )
 
+func newCli() (*client.Client, error) {
+	return client.NewClientWithOpts(client.FromEnv)
+}
+
 func Ps() ([]types.Container, error) {
-	cli, err := client.NewClientWithOpts(client.FromEnv)
+	cli, err := newCli()
 	if err != nil {
 		return nil, err
 	}
@@ -25,10 +29,10 @@ func Ps() ([]types.Container, error) {
 	return containers, nil
 }
 
-func RunHello() (io.ReadCloser, error) {
+func Run(image string) (string, error) {
-	cli, err := client.NewClientWithOpts(client.FromEnv)
+	cli, err := newCli()
 	if err != nil {
-		return nil, err
+		return "", err
 	}
 
 	ctnr, err := cli.ContainerCreate(
@@ -36,7 +40,7 @@ func RunHello() (io.ReadCloser, error) {
 		&container.Config{
 			AttachStdout: true,
 			AttachStderr: true,
-			Image:        "hello-world",
+			Image:        image,
 		},
 		&container.HostConfig{},
 		&network.NetworkingConfig{},
@@ -47,15 +51,24 @@ func RunHello() (io.ReadCloser, error) {
 		"",
 	)
 	if err != nil {
-		return nil, err
+		return "", err
 	}
 
 	err = cli.ContainerStart(context.Background(), ctnr.ID, types.ContainerStartOptions{})
+	if err != nil {
+		return "", err
+	}
+
+	return ctnr.ID, nil
+}
+
+func Logs(id string) (io.ReadCloser, error) {
+	cli, err := newCli()
 	if err != nil {
 		return nil, err
 	}
 
-	return cli.ContainerLogs(context.Background(), ctnr.ID, types.ContainerLogsOptions{
+	return cli.ContainerLogs(context.Background(), id, types.ContainerLogsOptions{
 		ShowStdout: true,
 		ShowStderr: true,
 		Follow:     true,

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">
+      <pre id="logs" class="card-body bg-dark text-light"></pre>
-test
-test
-      </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;
 }