Add task view

app/app/main.py

@@ -7,7 +7,7 @@ import requests
 from flask import Flask, render_template, redirect, url_for, request, session
 from flask_login import LoginManager, login_required, login_user, logout_user
 
-from app.models import User, db, Run
+from app.models import User, db, Run, Task
 from app.auth import get_authorization_url, acquire_token, get_logout_uri
 
 # pylint: disable=invalid-name
@@ -39,7 +39,6 @@ def load_user(user_id):
 
 @login_manager.unauthorized_handler
 def unauthorized_handler():
-
     return redirect(url_for('login', request_uri=request.url))
 
 
@@ -114,7 +113,23 @@ def run(run_id: int):
 
     tasks = sorted(tasks, key=lambda t: t.name)
 
-    return render_template('run.html', tasks=tasks, logs=logs, query=query)
+    return render_template('run.html', run=this_run, tasks=tasks, logs=logs, query=query)
+
+
+@app.route('/task/<int:task_id>')
+@login_required
+def task(task_id: int):
+    this_task = Task.query.filter_by(id=task_id).first()
+    if not this_task:
+        return 404, 'not found'
+
+    resp = requests.get(this_task.log_path)
+    log = resp.text if resp.status_code < 300 else None
+
+    resp = requests.get(this_task.record_path)
+    rec = resp.text if resp.status_code < 300 else None
+
+    return render_template('task.html', task=this_task, record=rec, log=log)
 
 
 @app.route('/help', methods=['GET'])

app/app/models/__init__.py

@@ -1,4 +1,4 @@
-# pylint: disable=unused-import, too-few-public-methods
+# pylint: disable=unused-import, too-few-public-methods, unsubscriptable-object
 
 import json
 
@@ -39,6 +39,32 @@ class Run(db.Model):
     # Completed.
     status = db.Column(db.String)
 
+    @property
+    def settings_in_json(self) -> dict:
+        if not hasattr(self, '_settings'):
+            setattr(self, '_settings', json.loads(self.settings))
+
+        return getattr(self, '_settings')
+
+    @property
+    def details_in_json(self) -> dict:
+        if not hasattr(self, '_details'):
+            setattr(self, '_details', json.loads(self.details))
+
+        return getattr(self, '_details')
+
+    @property
+    def product(self):
+        return self.details_in_json['a01.reserved.product']
+
+    @property
+    def remark(self):
+        return self.settings_in_json['a01.reserved.remark']
+
+    @property
+    def image(self):
+        return self.settings_in_json['a01.reserved.imagename']
+
 
 class Task(db.Model):
     # unique id
@@ -70,11 +96,15 @@ class Task(db.Model):
 
     @property
     def identifier(self) -> str:
-        return self.settings_in_json['classifier']['identifier']  # pylint: disable=unsubscriptable-object
+        return self.settings_in_json['classifier']['identifier']
 
     @property
     def log_path(self) -> str:
-        return self.result_in_json['a01.reserved.tasklogpath']  # pylint: disable=unsubscriptable-object
+        return self.result_in_json['a01.reserved.tasklogpath']
+
+    @property
+    def record_path(self) -> str:
+        return self.result_in_json['a01.reserved.taskrecordpath']
 
     @property
     def settings_in_json(self) -> dict:

app/app/static/styles/main.css

@@ -9,14 +9,21 @@ main {
 }
 
 table.condense {
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Consolas', 'Menlo', monospace;
     font-size: small;
 }
 
 pre code {
-    font-size: 0.5rem;
+    font-family: 'Consolas', 'Menlo', monospace;
+    font-size: 0.75rem;
 }
 
 div.log {
-    background-color: beige;
-}
+    background-color: #F5F1D5;
+}
+
+div.rec {
+    background-color: #B4D6C6;
+}
+
+/* https://color.adobe.com/Reduction-Design-color-theme-10741292/ */

app/app/templates/run.html

@@ -1,51 +1,38 @@
 {% extends "layout.html" %}
 {% block body %}
+    <div class="jumbotron jumbotron-fluid">
+        <div class="container">
+            <h1 class="display-1">Run {{ run.id }}</h1>
+            <p class="lead">{{ run.name }}</p>
+            {% if query %}
+                <p class="lead">The results are results of the query {{ query }}.</p>
+            {% endif %}
+        </div>
+    </div>
     <div class="container-fluid">
         <div class="row">
-            <form class="mt-1 ml-1 col-12" method="get">
-                <div class="form-row">
-                    <div class="col">
-                        <label class="sr-only" for="query">Query</label>
-                        <input type="text" class="form-control mb-2 mr-sm-2"
-                               id="query" name="query"
-                               placeholder="Current query: {{ query or 'Empty' }}.">
-                    </div>
-                    <div class="col-auto mt-1 mb-2 mr-sm-2">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="inlineFormCheck" name="logs"
-                                   value="true">
-                            <label class="form-check-label" for="inlineFormCheck">
-                                Logs
-                            </label>
-                        </div>
-                    </div>
-                    <div class="col-auto">
-                        <button type="submit" class="btn btn btn-primary mb-2">Submit</button>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="row">
-            <table class="table table-sm table-hover ml-1 mb-1 mr-1">
-                <thead>
-                <tr>
-                    <th>ID</th>
-                    <th>Identifier</th>
-                    <th>Status</th>
-                </tr>
-                </thead>
-                <tbody>
-                {% for task in tasks %}
+            <div class="col">
+                <table class="table table-sm table-hover condense">
+                    <thead>
                     <tr>
-                        <td>{{ task.id }}</td>
-                        <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 40rem">
-                            {{ task.identifier }}
-                        </td>
-                        <td>{{ task.result }}</td>
+                        <th>ID</th>
+                        <th>Identifier</th>
+                        <th>Status</th>
                     </tr>
-                {% endfor %}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                    {% for task in tasks %}
+                        <tr>
+                            <td><a href="{{ url_for('task', task_id=task.id) }}">{{ task.id }}</a></td>
+                            <td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 40rem">
+                                {{ task.identifier }}
+                            </td>
+                            <td>{{ task.result }}</td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            </div>
         </div>
         <div class="row mt-5">
             {% for t in tasks %}

app/app/templates/runs.html

@@ -1,36 +1,56 @@
 {% extends "layout.html" %}
 {% block body %}
+    <div class="jumbotron jumbotron-fluid">
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                    <h1 class="display-1">Runs</h1>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="container-fluid">
-        <table class="table table-hover table-sm">
-            <thead>
-            <tr>
-                <th>ID</th>
-                <th>Name</th>
-                <th>Status</th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for run in runs %}
-                <tr>
-                    <td><a href="{{ url_for('run', run_id=run.id) }}">{{ run.id }}</a></td>
-                    <td>{{ run.name }}</td>
-                    <td>{{ run.status }}</td>
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-        <div>
-            <nav>
-                <ul class="pagination justify-content-center">
-                    {% if page_previous %}
-                        <li class="page-item"><a class="page-link" href="{{ page_previous }}">Previous</a></li>
-                    {% else %}
-                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
-                    {% endif %}
-                    <li class="page-item"><a class="page-link" href="#">{{ page }}</a></li>
-                    <li class="page-item"><a class="page-link" href="{{ page_next }}">Next</a></li>
-                </ul>
-            </nav>
+        <div class="row">
+            <div class="col">
+                <table class="table table-hover table-sm condense">
+                    <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Product</th>
+                        <th>Image</th>
+                        <th>Creation (PDT)</th>
+                        <th>Remark</th>
+                        <th>Status</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {% for run in runs %}
+                        <tr>
+                            <td><a href="{{ url_for('run', run_id=run.id) }}">{{ run.id }}</a></td>
+                            <td>{{ run.product }}</td>
+                            <td>{{ run.image }}</td>
+                            <td>{{ run.creation.strftime('%b %d %H:%M') }}</td>
+                            <td>{{ run.remark }}</td>
+                            <td>{{ run.status }}</td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+                <div>
+                    <nav>
+                        <ul class="pagination justify-content-center">
+                            {% if page_previous %}
+                                <li class="page-item"><a class="page-link" href="{{ page_previous }}">Previous</a></li>
+                            {% else %}
+                                <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a>
+                                </li>
+                            {% endif %}
+                            <li class="page-item"><a class="page-link" href="#">{{ page }}</a></li>
+                            <li class="page-item"><a class="page-link" href="{{ page_next }}">Next</a></li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
         </div>
     </div>
 {% endblock %}

app/app/templates/task.html

@@ -0,0 +1,54 @@
+{% extends "layout.html" %}
+{% block body %}
+    <div class="jumbotron jumbotron-fluid mb-0">
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                    <h1 class="display-1">Task {{ task.id }}</h1>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <table class="table table-borderless">
+                        <tbody>
+                        <tr>
+                            <td>Identifier</td>
+                            <td>{{ task.identifier }}</td>
+                        </tr>
+                        <tr>
+                            <td>Result</td>
+                            <td>{{ task.result }}</td>
+                        </tr>
+                        <tr>
+                            <td>Duration (ms)</td>
+                            <td>{{ task.duration }}</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container-fluid">
+        {% if log %}
+            <div class="row log">
+                <div class="col">
+                    <div class="container">
+                        <h1 class="display-4 mt-3 mb-3">Automation Log</h1>
+                        <pre><code>{{ log }}</code></pre>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        {% if record %}
+            <div class="row rec">
+                <div class="col">
+                    <div class="container">
+                        <h1 class="display-4 mt-3 mb-3">Automation HTTP Record</h1>
+                        <pre><code>{{ record }}</code></pre>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+{% endblock %}