From 4a5804460fe38037c41a00b6ffa8d24e0efb1199 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Fri, 16 Aug 2019 09:49:27 +0200
Subject: [PATCH] Add admin functions to api. Add to_jsonifyable method to Job
and Corpus and use it in API.
---
app/models.py | 21 +++++
app/templates/main/dashboard.html.j2 | 129 ++++++++++++++++++++-------
2 files changed, 120 insertions(+), 30 deletions(-)
diff --git a/app/models.py b/app/models.py
index c3a09668..d5284554 100644
--- a/app/models.py
+++ b/app/models.py
@@ -247,6 +247,21 @@ class Job(db.Model):
"""
return '<Job %r>' % self.title
+ def to_jsonifyable(self):
+ return {'id': self.id,
+ 'creation_date': self.creation_date.timestamp(),
+ 'description': self.description,
+ 'end_date': (self.end_date.timestamp() if self.end_date else
+ None),
+ 'mem_mb': self.mem_mb,
+ 'n_cores': self.n_cores,
+ 'service': self.service,
+ 'service_args': self.service_args,
+ 'service_version': self.service_version,
+ 'status': self.status,
+ 'title': self.title,
+ 'user_id': self.user_id}
+
class Corpus(db.Model):
"""
@@ -269,6 +284,12 @@ class Corpus(db.Model):
"""
return '<Corpus %r>' % self.title
+ def to_jsonifyable(self):
+ return {'id': self.id,
+ 'creation_date': self.creation_date,
+ 'description': self.description,
+ 'title': self.title,
+ 'user_id': self.user_id}
'''
' Flask-Login is told to use the application’s custom anonymous user by setting
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index c8a02c07..ac063dae 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -76,45 +76,114 @@
</div>
</div>
</div>
- <div class="collection list">
- {% for job in current_user.jobs.all() %}
- {% if job.service == 'nlp' %}
- {% set service_color = 'blue' %}
- {% set service_icon = 'format_textdirection_l_to_r' %}
- {% elif job.service =='ocr' %}
- {% set service_color = 'green' %}
- {% set service_icon = 'find_in_page' %}
- {% else %}
- {% set service_color = 'red' %}
- {% set service_icon = 'help' %}
- {% endif %}
- {% if job.status == 'pending' %}
- {% set badge_color = 'amber' %}
- {% elif job.status =='running' %}
- {% set badge_color = 'indigo' %}
- {% elif job.status =='complete' %}
- {% set badge_color = 'teal' %}
- {% else %}
- {% set badge_color = 'red' %}
- {% endif %}
- <a href="{{ url_for('main.job', job_id=job.id) }}" class="collection-item avatar">
- <i class="material-icons circle {{ service_color }}">{{ service_icon }}</i>
- <span class="new badge {{ badge_color }}" data-badge-caption="">{{ job.status }}</span>
- <span class="title">{{ job.title }}</span>
- <p>{{ job.description }}</p>
- </a>
- {% endfor %}
- </div>
+ <div class="collection list"></div>
</div>
</div>
<script>
var jobList = new List("job-list", {valueNames: ["title"],
page: 4,
- pagination: true});
+ pagination: false});
jobList.on("filterComplete", updatePagination);
jobList.on("searchComplete", updatePagination);
</script>
+<script>
+ const SERVICE_COLORS = {"nlp": "blue",
+ "ocr": "green"}
+ const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
+ "ocr": "find_in_page"}
+ const STATUS_COLORS = {"pending": "amber",
+ "running": "indigo",
+ "complete": "teal"}
+
+ var getJobsCallbackFunctions = [];
+
+ function getJobs() {
+ fetch("/api/v1.0/jobs")
+ .then(function(response) {
+ if (response.status >= 200 && response.status < 300) {
+ return Promise.resolve(response)
+ } else {
+ return Promise.reject(new Error(response.statusText))
+ }
+ })
+ .then(function(response) {
+ return response.json()
+ })
+ .then(function(jobs) {
+ for (callbackFunction of getJobsCallbackFunctions) {
+ callbackFunction(jobs);
+ }
+ })
+ .catch(function(error) {
+ console.log('Request failed', error);
+ });
+ }
+
+ setInterval(getJobs, 1000);
+
+ function createJobElement(job) {
+ jobElement = document.createElement("a");
+ jobElement.classList.add("avatar", "collection-item");
+ jobElement.dataset.key = "id";
+ jobElement.dataset.value = job.id;
+ jobElement.href = `/jobs/${job.id}`;
+ jobDescriptionElement = document.createElement("p");
+ jobDescriptionElement.dataset.key = "description";
+ jobDescriptionElement.innerText = job.description;
+ jobServiceElement = document.createElement("i");
+ jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]);
+ jobServiceElement.dataset.key = "service";
+ jobServiceElement.innerText = SERVICE_ICONS[job.service];
+ jobStatusElement = document.createElement("span");
+ jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
+ jobStatusElement.dataset.badgeCaption = "";
+ jobStatusElement.dataset.key = "status";
+ jobStatusElement.innerText = job.status;
+ jobTitleElement = document.createElement("span");
+ jobTitleElement.classList.add("title");
+ jobTitleElement.dataset.key = "title";
+ jobTitleElement.innerText = job.title;
+
+ jobElement.appendChild(jobServiceElement);
+ jobElement.appendChild(jobStatusElement);
+ jobElement.appendChild(jobTitleElement);
+ jobElement.appendChild(jobDescriptionElement);
+
+ return jobElement;
+ }
+
+
+ function updateJobElement(job, jobElement) {
+ /*
+ if (jobElement.dataset.value != job.id) {
+ jobElement.dataset.value = job.id;
+ jobElement.href = `/jobs/${job.id}`;
+ }
+ */
+
+
+ }
+
+ function processJobs(jobs) {
+ for (job of jobs) {
+ jobElement = jobList.list.querySelectorAll('[data-key="id"]')
+ .querySelector(`[data-value="${job.id}"]`);
+ console.log(jobElement);
+ if (jobElement) {
+ statusElement = jobElement.querySelector(".status");
+ currentStatus = statusElement.text
+ continue;
+ }
+ jobList.list.appendChild(createJobElement(job));
+ }
+ jobList.reIndex();
+ jobList.update();
+ }
+
+ getJobsCallbackFunctions.push(processJobs)
+</script>
+
<div id="new-corpus-modal" class="modal">
<div class="modal-content">
<h4>New corpus</h4>
--
GitLab