{% 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; 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 "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"> <h2>Status:</h2> <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> <!-- 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> </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> <table> <thead> <tr> <th style="width: 50%;">Inputs</th> <th style="width: 50%;">Results</th> </tr> </thead> <tbody> {% for file in files %} <tr> <td> <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['path']) }}" class="waves-effect waves-light btn-small">{{ file }}</a> </td> <td> {% if job.status == 'complete' %} {% for result in files[file]['results'] %} <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['results'][result]['path']) }}" class="waves-effect waves-light btn-small">{{ result }}</a> {% endfor %} {% endif %} </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> {% endblock %}