sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 04:12:45 +00:00
Code Issues Projects Releases Wiki Activity

Add live information updates to job page.

Browse Source
This commit is contained in:
Patrick Jentsch
2019-09-02 15:25:30 +02:00
parent bec48e5f39
commit 8ed7697a63
1 changed files with 104 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
app/templates/main/jobs/job.html.j2
View File

@@ -1,19 +1,104 @@
{% extends "base.html.j2" %}
{% block page_content %}
<script>
var url = window.location.pathname;
var JOB_ID = url.substring(url.lastIndexOf('/') + 1);
class InformationUpdater {
constructor(jobId) {
this.jobId = jobId;
jobsSubscribers.push(this);
}
_init() {
var creationDateElement, descriptionElement, endDateElement,
memMbElement, nCoresElement, serviceElement, serviceArgsElement,
serviceVersionElement, statusColor, statusElement, titleElement;
this.job = jobs[this.jobId];
creationDateElement = document.getElementById("creation-date");
creationDateElement.value = this.job.creation_date;
descriptionElement = document.getElementById("description");
descriptionElement.innerHTML = this.job.description;
endDateElement = document.getElementById("end-date");
endDateElement.value = this.job.end_date;
memMbElement = document.getElementById("mem-mb");
memMbElement.value = this.job.mem_mb;
nCoresElement = document.getElementById("n-cores");
nCoresElement.value = this.job.n_cores;
serviceElement = document.getElementById("service");
serviceElement.value = this.job.service;
serviceArgsElement = document.getElementById("service-args");
serviceArgsElement.value = this.job.service_args;
serviceVersionElement = document.getElementById("service-version");
serviceVersionElement.value = this.job.service_version;
statusColor = JobList.STATUS_COLORS[this.job.status] || JobList.STATUS_COLORS['default'];
statusElement = document.getElementById("status");
statusElement.classList.add(statusColor);
statusElement.innerHTML = this.job.status;
titleElement = document.getElementById("title");
titleElement.innerHTML = this.job.title;
M.updateTextFields();
}
_update(patch) {
var newStatusColor, operation, pathArray, status, statusColor,
updatedElement;
for (operation of patch) {
/* "/jobId/valueName" -> ["jobId", "valueName"] */
pathArray = operation.path.split("/").slice(1);
if (pathArray[0] != this.jobId) {continue;}
switch(operation.op) {
case "add":
break;
case "delete":
location.reload();
break;
case "replace":
switch(pathArray[1]) {
case "description":
updatedElement = document.getElementById("description");
updatedElement.innerHTML = operation.value;
break;
case "end_date":
updatedElement = document.getElementById("end-date");
updatedElement.innerHTML = operation.value;
M.updateTextFields();
break;
case "status":
updatedElement = document.getElementById("status");
status = updatedElement.innerHTML;
statusColor = JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default'];
newStatusColor = JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default'];
updatedElement.classList.remove(statusColor);
updatedElement.classList.add(newStatusColor);
updatedElement.innerHTML = operation.value;
Animations.pulse(updatedElement, 3000);
break;
case "title":
updatedElement = document.getElementById("title");
updatedElement.innerHTML = operation.value;
break;
default:
break;
}
break;
default:
break;
}
}
}
}
var informationUpdater = new InformationUpdater(JOB_ID);
</script>
<div class="col s12 m4">
<h3>{{ job.title }}</h3>
<p>{{ job.description }}</p>
{% if job.status == 'pending' %}
{% set status_color = 'amber' %}
{% elif job.status =='running' %}
{% set status_color = 'indigo' %}
{% elif job.status =='complete' %}
{% set status_color = 'teal' %}
{% else %}
{% set status_color = 'red' %}
{% endif %}
<p><a class="waves-effect waves-light btn {{ status_color }}">{{ job.status }}</a></p>
<h3 id="title"></h3>
<p id="description"></p>
<a class="waves-effect waves-light btn" id="status"></a>
</div>
<div class="col s12 m8">
@@ -23,13 +108,13 @@
<div class="row">
<div class="col s12 m6">
<div class="input-field">
<input disabled value="{{ job.creation_date }}" id="creation-date" type="text" class="validate">
<input disabled value="" id="creation-date" type="text" class="validate">
<label for="creation-date">Creation date</label>
</div>
</div>
<div class="col s12 m6">
<div class="input-field">
<input disabled value="{{ job.end_date }}" id="end-date" type="text" class="validate">
<input disabled value="" id="end-date" type="text" class="validate">
<label for="end-date">End date</label>
</div>
</div>
@@ -38,13 +123,13 @@
<div class="row">
<div class="col s12 m6">
<div class="input-field">
<input disabled value="{{ job.mem_mb }}" id="mem-mb" type="text" class="validate">
<input disabled value="" id="mem-mb" type="text" class="validate">
<label for="mem-mb">Memory</label>
</div>
</div>
<div class="col s12 m6">
<div class="input-field">
<input disabled value="{{ job.n_cores }}" id="n-cores" type="text" class="validate">
<input disabled value="" id="n-cores" type="text" class="validate">
<label for="n-cores">CPU cores</label>
</div>
</div>
@@ -53,19 +138,19 @@
<div class="row">
<div class="col s12 m4">
<div class="input-field">
<input disabled value="{{ job.service }}" id="service" type="text" class="validate">
<input disabled value="" id="service" type="text" class="validate">
<label for="service">Service</label>
</div>
</div>
<div class="col s12 m4">
<div class="input-field">
<input disabled value="{{ job.service_args|escape }}" id="service-args" type="text" class="validate">
<input disabled value="" id="service-args" type="text" class="validate">
<label for="service-args">Service arguments</label>
</div>
</div>
<div class="col s12 m4">
<div class="input-field">
<input disabled value="{{ job.service_version }}" id="service-version" type="text" class="validate">
<input disabled value="" id="service-version" type="text" class="validate">
<label for="service-version">Service version</label>
</div>
</div>