mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 17:25:44 +00:00
312 lines
12 KiB
Django/Jinja
312 lines
12 KiB
Django/Jinja
{% extends "base.html.j2" %}
|
|
|
|
{% block page_content %}
|
|
<script>
|
|
var job_user_id = {{ job.user_id|tojson|safe }}
|
|
socket.emit('inspect_user', job_user_id);
|
|
</script>
|
|
<script>
|
|
var JOB_ID = {{ job.id|tojson|safe }}
|
|
var foreignJobFlag;
|
|
{% if current_user.id == job.user_id %}
|
|
foreignJobFlag = false;
|
|
{% else %}
|
|
foreignJobFlag = true;
|
|
{% endif %}
|
|
|
|
class InformationUpdater {
|
|
constructor(jobId) {
|
|
this.jobId = jobId;
|
|
if (foreignJobFlag) {
|
|
foreignJobsSubscribers.push(this);
|
|
} else {
|
|
jobsSubscribers.push(this);
|
|
}
|
|
}
|
|
|
|
_init() {
|
|
var creationDateElement, descriptionElement, endDateElement,
|
|
memMbElement, nCoresElement, serviceElement, serviceArgsElement,
|
|
serviceVersionElement, statusColor, statusElement, titleElement;
|
|
|
|
if (foreignJobFlag) {
|
|
this.job = foreignJobs[this.jobId];
|
|
} else {
|
|
this.job = jobs[this.jobId];
|
|
}
|
|
creationDateElement = document.getElementById("creation-date");
|
|
creationDateElement.value = (new Date(this.job.creation_date * 1000)).toLocaleString();
|
|
descriptionElement = document.getElementById("description");
|
|
descriptionElement.innerHTML = this.job.description;
|
|
endDateElement = document.getElementById("end-date");
|
|
endDateElement.value = this.job.end_date ? (new Date(this.job.end_date * 1000)).toLocaleString() : "Not available";
|
|
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;
|
|
|
|
var downloadIconElement, fileElement, filesElement, input, inputDownloadElement, inputElement, result, resultDownloadElement, resultsElement;
|
|
|
|
filesElement = document.getElementById("files");
|
|
downloadIconElement = document.createElement("i");
|
|
downloadIconElement.classList.add("material-icons", "left");
|
|
downloadIconElement.innerText = "file_download";
|
|
for (input of this.job.inputs) {
|
|
fileElement = document.createElement("tr");
|
|
inputDownloadElement = document.createElement("a");
|
|
inputDownloadElement.classList.add("waves-effect", "waves-light", "btn-small");
|
|
inputDownloadElement.href = `/jobs/${this.job.id}/download?file=${input.filename}`;
|
|
inputDownloadElement.innerText = input.filename;
|
|
inputDownloadElement.appendChild(downloadIconElement.cloneNode(true));
|
|
inputElement = document.createElement("td");
|
|
inputElement.id = `input-${input.id}`;
|
|
inputElement.appendChild(inputDownloadElement);
|
|
resultsElement = document.createElement("td");
|
|
resultsElement.id = `results-${input.id}`;
|
|
// add_results(input);
|
|
for (result of input.results) {
|
|
resultDownloadElement = document.createElement("a");
|
|
resultDownloadElement.classList.add("waves-effect", "waves-light", "btn-small");
|
|
resultDownloadElement.href = `/jobs/${this.job.id}/download?file=output/${input.filename}/${result.filename}`;
|
|
resultDownloadElement.innerText = result.filename.split(".").slice(-1)[0];
|
|
resultDownloadElement.appendChild(downloadIconElement.cloneNode(true));
|
|
resultsElement.appendChild(resultDownloadElement);
|
|
}
|
|
fileElement.appendChild(inputElement);
|
|
fileElement.appendChild(resultsElement);
|
|
filesElement.appendChild(fileElement);
|
|
}
|
|
|
|
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);
|
|
console.log(operation);
|
|
console.log(pathArray);
|
|
if (pathArray[0] != this.jobId) {continue;}
|
|
switch(operation.op) {
|
|
case "add":
|
|
switch(pathArray[1]) {
|
|
case "input":
|
|
|
|
break;
|
|
}
|
|
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.value = (new Date(operation.value * 1000)).toLocaleString();
|
|
M.updateTextFields();
|
|
break;
|
|
case "status":
|
|
if (operation.value == "complete") {
|
|
location.reload();
|
|
}
|
|
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 id="title"></h3>
|
|
<p id="description"></p>
|
|
<a class="waves-effect waves-light btn" id="status"></a>
|
|
<h2>Actions:</h2>
|
|
<!-- Confirm deletion of job with modal dialogue
|
|
Modal Trigger-->
|
|
<a href="#modal-confirm-delete" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
|
|
<a href="#" class="waves-effect waves-light btn"><i class="material-icons left">settings</i>Export Parameters</a>
|
|
<!-- Modal Strucutre -->
|
|
<div id="modal-confirm-delete" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Confirm deletion</h4>
|
|
<p>Do you really want to delete the job {{job.title}}?
|
|
All iput and output files will be permanently deleted.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="{{ url_for('main.delete_job', job_id=job.id) }}" class="modal-close waves-effect waves-green btn red"><i class="material-icons left">delete</i>Delete Job</a>
|
|
<a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col s12 m8">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<span class="card-title">Chronometrics</span>
|
|
<div class="row">
|
|
<div class="col s12 m6">
|
|
<div class="input-field">
|
|
<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="" id="end-date" type="text" class="validate">
|
|
<label for="end-date">End date</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="card-title">Ressource allocations</span>
|
|
<div class="row">
|
|
<div class="col s12 m6">
|
|
<div class="input-field">
|
|
<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="" id="n-cores" type="text" class="validate">
|
|
<label for="n-cores">CPU cores</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="card-title">Service informations</span>
|
|
<div class="row">
|
|
<div class="col s12 m4">
|
|
<div class="input-field">
|
|
<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="" 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="" id="service-version" type="text" class="validate">
|
|
<label for="service-version">Service version</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="card-title">Files</span>
|
|
<div style="overflow-x:auto;">
|
|
<table class="highlight">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 25%;">Inputs</th>
|
|
<th style="width: 25%;"></th>
|
|
<th style="width: 25%;">Results</th>
|
|
<th style="width: 25%;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="files"></tbody>
|
|
</table>
|
|
|
|
<span class="card-title">Files old</span>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50%;">Inputs</th>
|
|
<th style="width: 50%;">Results</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for file in files %}
|
|
<tr>
|
|
<td rowspan="4">
|
|
{{ file }}
|
|
</td>
|
|
<td rowspan="4">
|
|
<a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
|
|
</td>
|
|
</tr>
|
|
{% if files[file]['results'] %}
|
|
{% for result in files[file]['results'] %}
|
|
<tr>
|
|
<td>
|
|
{{ result }}
|
|
</td>
|
|
<td>
|
|
{% if job.status == 'complete' %}
|
|
<a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['results'][result]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% if result == 'vrt' %}
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
{% for step in range(1, 4) %}
|
|
<tr>
|
|
<td>processing...</td>
|
|
<td></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|