static/main.html - bb8 (master)

Tree @master (Download .tar.gz)

main.html @master

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8;" />
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="/static/jquery.js"></script>
    <script src="/static/bootstrap.min.js"></script>
    <script>

     function add_row(job) {
       var row = $("<tr></tr>").attr("id", job.id);
       row.append($("<td></td>").text(job.id));
       row.append($("<td></td>").text(job.name));
       row.append($("<td></td>").text(job.user.username));
       row.append($("<td></td>").text(job.user.userteam));
       row.append($("<td></td>").text(job.state));
       row.append($("<td></td>")
         .append($("<button/>")
           .attr("class", "btn btn-default")
           .text("❌")
           .on("click", function() {
             console.log("DELETE /jobs/" + job.id);
             $.ajax({"url": "/jobs/" + job.id,
                     "type": "DELETE"
             }).done(function() {
               console.log("successfully deleted");
               location.reload();
             });
           })));

       if (job.state == "running") {
         row.attr("class", "current");
       }
       else if (job.state == "failed") {
         row.attr("class", "failed");
       }
       else if (job.state == "done") {
         row.attr("class", "done");
       }
       $("#job-queue").append(row);
     }

     function fetch_job_list() {
       $.get("/jobs", function(data, status) {
         data.forEach(function (job) {
           add_row(job);
         });
       });
     }

     $(document).ready(function() {
       $("#submit-job").submit(function() {
         console.log("!!!")
         var data = new FormData(this);
         var job = {
           "name": $("#job-name").value,
           "user":
           {"username": "gdritter",
            "userteam": "galois"},
           "state": "fetching",
         };
         $.post("/jobs", job).done(function() {
           console.log("???")
         });
       })

       fetch_job_list();
     });

    </script>
    <link rel="stylesheet" href="/static/bootstrap.min.css" />
    <style type="text/css">
     @keyframes active {
       from { background-color: #ffffff; }
       to   { background-color: #ddddff; }
     }
     .current {
       backgroud-color:           white;
       animation-name:            active;
       animation-duration:        1s;
       animation-iteration-count: infinite;
       animation-direction:       alternate;
       animation-timing-function: linear;
     }

     .failed {
       background-color: #ffdddd;
     }

     .done {
       background-color: #ddffdd;
     }
    </style>
    <title>STARKILLER Job-Running System</title>
  </head>

  <body>
    <div class="row">
      <div class="col-sm-7"><div class="container-fluid">
        <h1>Current Job Queue</h1>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Job ID</th>
              <th>Name</th>
              <th>Owner</th>
              <th>Team</th>
              <th>Status</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody id="job-queue">
          </tbody>
        </table>
      </div></div>

      <div class="col-sm-4"><div class="container-fluid">
        <h1>Submit Job</h1>
        <form id="submit-job">
          <div class="form-group">
            <label for="job-name">Job Name</label>
            <input type="text" class="form-control" id="job-name" placeholder="Job Name"/>
          </div>
          <div class="form-group">
            <label for="job-time">Expected Job Runtime</label>
            <div class="input-group">
              <input type="text" class="form-control" id="job-time" placeholder="Job Runtime"/>
              <div class="input-group-addon"> hours</div>
            </div>
          </div>
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="" disabled/>
                Submit artifact for human analysis
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="job-tar">Job Files</label>
            <input type="file" id="job-tar"/>
          </div>
          <button type="button" class="btn btn-default btn-danger">Cancel</button>
          <button type="submit" class="btn btn-default btn-primary">Add Job</button>
        </form>
      </div></div>
    </div>
  </body>
</html>