Merge pull request #17 from skroutz/web-view

Add a Web view

.gitignore

@@ -3,10 +3,10 @@
 *.prof
 *.pyc
 
-config.json
-fabfile.py
-
 /mistry
 /mistryd
 
+cmd/mistryd/statik
+config.json
+fabfile.py
 vendor/

.travis.yml

@@ -12,6 +12,7 @@ services:
 - docker
 install:
 - make deps
+- go get github.com/rakyll/statik
 script:
 - make
 addons:

Makefile

@@ -10,13 +10,13 @@ install: fmt test
 
 build: mistryd mistry
 
-mistryd:
+mistryd: generate
 	$(BUILDCMD) -o $(SERVER) cmd/mistryd/*.go
 
 mistry:
 	$(BUILDCMD) -o $(CLIENT) cmd/mistry/*.go
 
-test: mistry
+test: generate mistry
 	$(TESTCMD) --filesystem plain
 
 testall: test
@@ -34,3 +34,6 @@ fmt:
 
 clean:
 	go clean ./...
+
+generate:
+	go generate ./...

README.md

@@ -13,7 +13,7 @@ Features include:
 - running arbitrary commands inside isolated environments (provided as Docker images)
 - build caching & incremental building (see [*"Build cache"*](https://github.com/skroutz/mistry/wiki/Build-cache))
 - a simple JSON API for interacting with the server (scheduling jobs etc.)
-- ([wip](https://github.com/skroutz/mistry/pull/17)) a web view for inspecting the progress and result of builds
+- a web view for inspecting the progress of builds (see [*"Web view"*](#web-view))
 - efficient use of disk space due to copy-on-write semantics (using [Btrfs snapshotting](https://en.wikipedia.org/wiki/Btrfs#Subvolumes_and_snapshots))
 
 For more information visit the [wiki](https://github.com/skroutz/mistry/wiki).
@@ -108,6 +108,19 @@ $ curl -H 'Content-Type: application/json' -d '{"project": "foo"}' localhost:846
 
 
 
+### Web view
+
+*mistry* comes with a web view where progress and logs of each job can be
+inspected.
+
+Browse to http://0.0.0.0:8462 (or whatever address the server listens to).
+
+
+
+
+
+
+
 
 
 Configuration

cmd/mistryd/Gopkg.toml

@@ -33,3 +33,7 @@
 [[constraint]]
   name = "github.com/urfave/cli"
   version = "1.20.0"
+
+[[constraint]]
+  name = "github.com/rakyll/statik"
+  version = "0.1.1"

cmd/mistryd/job.go

@@ -7,11 +7,13 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"html/template"
 	"io"
 	"log"
 	"os"
 	"path/filepath"
 	"sort"
+	"time"
 
 	dockertypes "github.com/docker/docker/api/types"
 	"github.com/docker/docker/api/types/container"
@@ -49,6 +51,13 @@ type Job struct {
 	Image     string
 	ImageTar  []byte
 	Container string
+
+	StartedAt time.Time
+
+	// webview-related
+	Output string
+	Log    template.HTML
+	State  string
 }
 
 // NewJob returns a new Job for the given project. project and cfg cannot be
@@ -207,3 +216,62 @@ func (j *Job) String() string {
 		"{project=%s params=%s group=%s id=%s}",
 		j.Project, j.Params, j.Group, j.ID[:7])
 }
+
+func (j *Job) MarshalJSON() ([]byte, error) {
+	return json.Marshal(struct {
+		ID        string        `json:"id"`
+		Project   string        `json:"project"`
+		StartedAt string        `json:"startedAt"`
+		Output    string        `json:"output"`
+		Log       template.HTML `json:"log"`
+		State     string        `json:"state"`
+	}{
+		ID:        j.ID,
+		Project:   j.Project,
+		StartedAt: j.StartedAt.Format(DateFmt),
+		Output:    j.Output,
+		Log:       template.HTML(j.Log),
+		State:     j.State,
+	})
+}
+
+func (j *Job) UnmarshalJSON(data []byte) error {
+	jData := &struct {
+		ID        string `json:"id"`
+		Project   string `json:"project"`
+		StartedAt string `json:"startedAt"`
+		Output    string `json:"output"`
+		Log       string `json:"log"`
+		State     string `json:"state"`
+	}{}
+	err := json.Unmarshal(data, &jData)
+	if err != nil {
+		return err
+	}
+	j.ID = jData.ID
+	j.Project = jData.Project
+	j.StartedAt, err = time.Parse(DateFmt, jData.StartedAt)
+	if err != nil {
+		return err
+	}
+	j.Output = jData.Output
+	j.Log = template.HTML(jData.Log)
+	j.State = jData.State
+
+	return nil
+}
+
+// GetState determines the job's current state by using it's path in the filesystem.
+func GetState(path, project, id string) (string, error) {
+	pPath := filepath.Join(path, project, "pending", id)
+	rPath := filepath.Join(path, project, "ready", id)
+	_, err := os.Stat(pPath)
+	if err == nil {
+		return "pending", nil
+	}
+	_, err = os.Stat(rPath)
+	if err == nil {
+		return "ready", nil
+	}
+	return "", fmt.Errorf("job with id=%s not found error", id)
+}

cmd/mistryd/main.go

@@ -56,6 +56,8 @@ const (
 	// ImgCntPrefix is the common prefix added to the names of all
 	// Docker images/containers created by mistry.
 	ImgCntPrefix = "mistry-"
+
+	DateFmt = "Mon, 02 Jan 2006 15:04:05"
 )
 
 func main() {

cmd/mistryd/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>The mistry jobs</title>
+  <link rel="stylesheet" href="css/foundation.min.css">
+  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script type="text/babel" src="js/index.js"></script>
+</head>
+
+<body>
+  <div class="top-bar">
+    <div class="top-bar-left">
+      <h1><a href="/">mistry</a></h1>
+    </div>
+  </div>
+
+  <div class="grid-container">
+    <div class="grid-x grid-padding-x">
+
+      <div class="large-12 cell">
+        <h1>Jobs</h1>
+      </div>
+
+      <div class="large-12 cell" id="js-jobs">
+      </div>
+    </div>
+  </div>
+</body>
+</html>

cmd/mistryd/public/js/index.js

@@ -0,0 +1,62 @@
+const JobsRoot = document.getElementById('js-jobs')
+
+class Jobs extends React.Component {
+  constructor(props) {
+      super(props)
+      this.every = props.every
+      this.state = {}
+    };
+
+  fetchJobs() {
+    fetch("/index").
+      then(response => response.json()).
+      then(data => this.setState({ jobs: data }));
+  };
+
+  componentDidMount() {
+    this.fetchJobs();
+    this.interval = setInterval(() => this.fetchJobs(), this.every);
+  };
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  };
+
+  render() {
+    if (this.state.jobs == undefined) {
+      return (
+          <div class="jumbotron">
+            <h3>No jobs...</h3>
+          </div>
+      );
+    }
+
+    let jobs = this.state.jobs;
+    return (
+      <table class="hover unstriped">
+        <thead>
+          <tr>
+          <th>ID</th>
+          <th>Project</th>
+          <th>Started At</th>
+          <th>State</th>
+          </tr>
+        </thead>
+        <tbody>
+          {jobs.map(function(j, idx){
+            return (
+              <tr key={idx}>
+                <td><a href={`/job/${j.project}/${j.id}`} > {j.id} </a></td>
+                <td>{j.project}</td>
+                <td>{j.startedAt}</td>
+                <td>{j.state}</td>
+              </tr>
+            )
+           })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+ReactDOM.render(<Jobs every={3000} />, JobsRoot)

cmd/mistryd/public/templates/show.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Job Logs</title>
+  <link rel="stylesheet" href="../../css/foundation.min.css">
+</head>
+
+<body>
+  <div class="top-bar">
+    <div class="top-bar-left">
+      <h1><a href="/">mistry</a></h1>
+    </div>
+  </div>
+
+  <div class="grid-container">
+    <div class="grid">
+      <div class="cell">
+        <h4>Job: {{.ID}}</h4>
+      </div>
+      <div class="cell">
+        <div class="card">
+          <div class="card-section">
+            <div class="card-divider">
+              <h4> Details </h4>
+            </div>
+            <p id="js-job-info"></p>
+          </div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="card">
+          <div class="card-section">
+            <div class="card-divider">
+              <h4> Logs </h4>
+            </div>
+            <p id="js-job-log">{{.Log}}</p>
+          </div>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    const jobInfo = document.getElementById('js-job-info');
+    const state = {{.State}}
+
+    jobInfo.innerHTML += "Project: ".big() + {{.Project}} + "<br>";
+    jobInfo.innerHTML += "State: ".big() + {{.State}} + "<br>";
+    jobInfo.innerHTML += "Started at: ".big() + {{.StartedAt}} + "<br>";
+
+    if (state == "ready") {
+      const output = {{.Output}}
+      const jobJSON = JSON.parse(output);
+      jobInfo.innerHTML += "Path: ".big() + jobJSON["Path"] + "<br>";
+      jobInfo.innerHTML += "Params: ".big() + JSON.stringify(jobJSON.Params) + "<br>";
+      jobInfo.innerHTML += "Cached: ".big() + jobJSON["Cached"] + "<br>";
+      jobInfo.innerHTML += "Coalesced: ".big() + jobJSON["Coalesced"] + "<br>";
+      jobInfo.innerHTML += "Error: ".big() + jobJSON["Err"] + "<br>";
+      jobInfo.innerHTML += "ExitCode: ".big() + jobJSON["ExitCode"] + "<br>";
+      jobInfo.innerHTML += "Transport method: ".big() + jobJSON["TransportMethod"] + "<br>";
+    }
+
+    if (state == "pending") {
+      setInterval(checkState, 3000);
+
+      function checkState() {
+        let jHeaders = new Headers();
+        jHeaders.append('Content-Type', 'application/json');
+        const jobRequest = new Request('/job/{{.Project}}/{{.ID}}', {headers: jHeaders});
+        fetch(jobRequest)
+          .then(function(response) { return response.json(); })
+          .then(function(data) {
+            if (data["State"] == "ready"){
+              location.reload();
+            }
+          })
+      }
+
+      const source = new EventSource('/log/{{.Project}}/{{.ID}}');
+      const jobLog = document.getElementById('js-job-log')
+      source.onmessage = function(e) {
+        jobLog.innerHTML += e.data + "</br>"
+      };
+
+      source.onerror = function(e) {
+        document.body.innerHTML += "Web tail failed.";
+        source.close();
+      };
+    }
+  </script>
+</body>
+</html>