feat: add task state status badge

assets/styles/app.css

@@ -12,3 +12,15 @@ table tbody tr td:first-child {
 .logs-lines {
     white-space: nowrap;
 }
+
+.task-status_running {
+    background-color: blue;
+}
+
+.task-status_success {
+    background-color: green;
+}
+
+.task-status_failed {
+    background-color: red;
+}

src/templates/pages/list_task_runs.html

@@ -1,6 +1,11 @@
 {% extends "layouts/base.html" %}
 {% block body %}
     <h1>List of task runs for "{{ task.name }}"</h1>
+    {% if runs | length == 0 %}
+    <p class="notice">
+    No tasks runs to show
+    </p>
+    {% else %}
     <table>
         <thead>
             <tr>
@@ -20,7 +25,9 @@
                     {{ task_run.started_at }}
                 </td>
                 <td>
-                    {{ task_run.status }}
+                    <mark class="task-status_{{ task_run.status | lower }}">
+                        {{ task_run.status }}
+                    </mark>
                 </td>
                 <td>
                     <a href="/tasks/{{ task_id }}/runs/{{ task_run.id }}">Details</a>
@@ -29,4 +36,5 @@
             {% endfor %}
         </tbody>
     </table>
+    {% endif %}
 {% endblock %}

src/templates/pages/task_run_details.html

@@ -3,7 +3,11 @@
     <h1>Task run details</h1>
     <ul>
         <li>Id: {{ run.id }}</li>
-        <li>State: {{ run.status }}</li>
+        <li>State: 
+            <mark class="task-status_{{ run.status | lower }}">
+                {{ run.status }}
+            </mark>
+        </li>
         <li>Submitted at: {{ run.submitted_at }}</li>
         <li>Started at: {{ run.started_at }}</li>
         <li>Ended at: {{ run.ended_at }}</li>
@@ -14,7 +18,7 @@
     <p>Exit code is {{ run.exit_code }}</p>
     <pre class="logs-lines">
     {% for line in logs_lines %}
-    <div class="line-{{ line.kind|lower }}">{{- line.content -}}</div>
+        <div class="line-{{ line.kind|lower }}">{{- line.content -}}</div>
     {% endfor %}
     </pre>
 {% endblock %}