Skip to content
Snippets Groups Projects
Commit 83f1aa1a authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Add dynamic output link creation.

parent fca352c3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/templates/main/jobs/job.html.j2
+ 174
− 142
View file @ 83f1aa1a
......@@ -34,80 +34,87 @@
} 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;
// Title
this.setTitle(this.job.title);
// Description
this.setDescription(this.job.description);
// Status
this.setStatus(this.job.status);
// Creation date
this.setCreationDate(this.job.creation_date);
// End date
if (this.job.end_date) {this.setEndDate(this.job.end_date);}
// Memory
this.setMemMb(this.job.mem_mb);
// CPU cores
this.setNCores(this.job.n_cores);
// Service
this.setService(this.job.service);
// Service arguments
this.setServiceArgs(this.job.service_args);
// Service version
this.setServiceVersion(this.job.service_version);
var filesElement, input, inputDownloadElement, inputElement,
inputFilenameElement, inputResultsElement;
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);
// Data row
inputElement = document.createElement("tr");
filesElement.append(inputElement);
// Input filename
inputFilenameElement = document.createElement("td");
inputFilenameElement.id = `input-${input.id}-filename`;
inputElement.append(inputFilenameElement);
// Input download
inputDownloadElement = document.createElement("td");
inputDownloadElement.id = `input-${input.id}-download`;
inputElement.append(inputDownloadElement);
// Third column for input result file download buttons
inputResultsElement = document.createElement("td");
inputResultsElement.id = `input-${input.id}-results`;
inputElement.append(inputResultsElement);
this.setInputFilename(input);
this.setInputDownload(input);
this.setInputResults(input);
}
}
M.updateTextFields();
setInputDownload(input) {
var inputDownloadButtonElement, inputDownloadButtonIconElement,
inputDownloadElement;
inputDownloadElement = document.getElementById(`input-${input.id}-download`);
inputDownloadButtonElement = document.createElement("a");
inputDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
inputDownloadButtonElement.href = `${this.jobId}/download?file=${input.filename}`;
inputDownloadButtonElement.setAttribute("download", "");
inputDownloadButtonIconElement = document.createElement("i");
inputDownloadButtonIconElement.classList.add("material-icons");
inputDownloadButtonIconElement.innerText = "file_download";
inputDownloadButtonElement.append(inputDownloadButtonIconElement);
inputDownloadElement.append(inputDownloadButtonElement);
}
setInputFilename(input) {
var inputFilenameElement;
inputFilenameElement = document.getElementById(`input-${input.id}-filename`);
inputFilenameElement.innerText = input.filename;
}
_update(patch) {
var newStatusColor, operation, pathArray, status, statusColor,
updatedElement;
var input, operation, pathArray;
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;
if (pathArray[1] === "inputs" && pathArray[3] === "results") {
console.log(operation.value);
this.setInputResult(operation.value);
}
break;
case "delete":
......@@ -115,33 +122,11 @@
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();
this.setEndDate(operation.value);
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;
this.setStatus(operation.value);
break;
default:
break;
......@@ -152,6 +137,103 @@
}
}
}
setTitle(title) {
var titleElement;
titleElement = document.getElementById("title");
titleElement.innerText = title;
}
setDescription(description) {
var descriptionElement;
descriptionElement = document.getElementById("description");
descriptionElement.innerText = description;
}
setStatus(status) {
var statusColor, statusElement;
statusElement = document.getElementById("status");
for (statusColor of Object.values(JobList.STATUS_COLORS)) {
statusElement.classList.remove(statusColor);
}
statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
statusElement.innerText = status;
}
setCreationDate(timestamp) {
var creationDateElement;
creationDateElement = document.getElementById("creation-date");
creationDateElement.value = new Date(timestamp * 1000).toLocaleString();
M.updateTextFields();
}
setEndDate(timestamp) {
var endDateElement;
endDateElement = document.getElementById("end-date");
endDateElement.value = new Date(timestamp * 1000).toLocaleString();
M.updateTextFields();
}
setMemMb(memMb) {
var memMbElement;
memMbElement = document.getElementById("mem-mb");
memMbElement.value = memMb;
M.updateTextFields();
}
setNCores(nCores) {
var nCoresElement;
nCoresElement = document.getElementById("n-cores");
nCoresElement.value = nCores;
M.updateTextFields();
}
setService(service) {
var serviceElement;
serviceElement = document.getElementById("service");
serviceElement.value = service;
M.updateTextFields();
}
setServiceArgs(serviceArgs) {
var serviceArgsElement;
serviceArgsElement = document.getElementById("service-args");
serviceArgsElement.value = serviceArgs;
M.updateTextFields();
}
setServiceVersion(serviceVersion) {
var serviceVersionElement;
serviceVersionElement = document.getElementById("service-version");
serviceVersionElement.value = serviceVersion;
M.updateTextFields();
}
setInputResults(input) {
var result;
for (result of input.results) {
this.setInputResult(result);
}
}
setInputResult(result) {
var inputResultsElement, resultDownloadButtonElement,
resultDownloadButtonIconElement;
inputResultsElement = document.getElementById(`input-${result.job_input_id}-results`);
resultDownloadButtonElement = document.createElement("a");
resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
var resultFile = `${result.dir}/${result.filename}`;
resultFile = resultFile.substring(resultFile.indexOf("output/"));
resultDownloadButtonElement.href = `${this.jobId}/download?file=${resultFile}`;
resultDownloadButtonElement.innerText = result.filename.split(".").reverse()[0];
resultDownloadButtonElement.setAttribute("download", "");
resultDownloadButtonIconElement = document.createElement("i");
resultDownloadButtonIconElement.classList.add("material-icons", "left");
resultDownloadButtonIconElement.innerText = "file_download";
resultDownloadButtonElement.prepend(resultDownloadButtonIconElement);
inputResultsElement.append(resultDownloadButtonElement);
inputResultsElement.append(" ");
}
}
var informationUpdater = new InformationUpdater(JOB_ID);
</script>
......@@ -236,74 +318,24 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Files</span>
<div style="overflow-x:auto;">
<table class="highlight">
<table class="highlight responsive-table">
<thead>
<tr>
<th style="width: 25%;">Inputs</th>
<th style="width: 25%;"></th>
<th style="width: 25%;">Results</th>
<th style="width: 25%;"></th>
<th>File</th>
<th>Input</th>
<th>Results</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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment