jobs: Redesign the big module

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/jobs/modules/list.html b/src/templates/jobs/modules/list.html
index 6e6fe429d3ac8c083ef865bf84ca09f272ed07c5..6bf9a6be1f221e53f463eda551d05c06620d4961 100644 (file)
--- a/src/templates/jobs/modules/list.html
+++ b/src/templates/jobs/modules/list.html
@@ -2,93 +2,106 @@
        {% set build = job.build %}
 
        <div class="block">
-               <div class="card">
-                       <div class="card-content">
-                               <div class="columns">
-                                       <div class="column">
-                                               <h5 class="title is-5">
-                                                       {% if show_arch_only %}
-                                                               {{ job.arch }}
-                                                       {% else %}
-                                                               <a href="/builds/{{ build.uuid }}">
-                                                                       {{ job }}
-                                                               </a>
-                                                       {% end %}
+               <article class="panel
+                               {% if job.is_aborted() %}
+                                       is-dark
+                               {% elif job.has_failed() %}
+                                       is-danger
+                               {% elif job.has_finished() %}
+                                       is-success
+                               {% end %}">
 
-                                                       {% if job.has_failed() %}
-                                                               <span class="tag is-danger">
-                                                                       {{ _("Failed") }}
-                                                               </span>
-                                                       {% end %}
-                                               </h5>
+                       <p class="panel-heading">
+                               {% if show_arch_only %}
+                                       {{ job.arch }}
+                               {% else %}
+                                       <a href="/builds/{{ build.uuid }}">
+                                               {{ job }}
+                                       </a>
+                               {% end %}
 
-                                               {% if build.owner %}
-                                                       <h6 class="subtitle is-6">
-                                                               {{ build.owner }}
-                                                       </h6>
-                                               {% end %}
-                                       </div>
+                               {% if job.is_aborted() %}
+                                       <span class="tag is-pulled-right">
+                                               {{ _("Aborted %(when)s by %(who)s") % {
+                                                       "when" : locale.format_date(job.aborted_at),
+                                                       "who"  : job.aborted_by,
+                                               } }}
+                                       </span>
+                               {% elif job.is_pending() %}
+                                       <span class="tag is-pulled-right">
+                                               <span class="icon-text">
+                                                       <span class="icon">
+                                                               <i class="fa-solid fa-clock"></i>
+                                                       </span>
+
+                                                       <span>
+                                                               {{ _("Pending since %s") % locale.format_date(job.created_at, shorter=True) }}
+                                                       </span>
+                                               </span>
+                                       </span>
+                               {% elif job.is_running() %}
+                                       <span class="tag is-pulled-right">
+                                               <span class="icon-text">
+                                                       <span class="icon">
+                                                               <i class="fa-solid fa-gear fa-spin"></i>
+                                                       </span>
 
-                                       {% if job.is_aborted() %}
-                                               <div class="column is-2">
-                                                       <span class="tag is-dark">
-                                                               {{ _("Aborted %s") % locale.format_date(job.aborted_at) }}
+                                                       <span>
+                                                               {{ _("Running since %s") % format_time(job.duration) }}
                                                        </span>
-                                               </div>
-                                       {% elif job.has_finished() %}
-                                               <div class="column is-3">
-                                                       {{ _("Finished %s") % \
-                                                               locale.format_date(job.finished_at, shorter=True) }}
-                                               </div>
-                                       {% end %}
+                                               </span>
+                                       </span>
+                               {% elif job.has_failed() %}
+                                       <span class="tag is-pulled-right">
+                                               {{ _("Failed %s") % locale.format_date(job.finished_at, shorter=True) }}
+                                       </span>
+                               {% elif job.has_finished() %}
+                                       <span class="tag is-pulled-right">
+                                               {{ _("Finished %s") % locale.format_date(job.finished_at, shorter=True) }}
+                                       </span>
+                               {% end %}
+                       </p>
+
+                       {% if job.is_pending() and job.depcheck_succeeded is False %}
+                               <div class="panel-block">
+                                       <pre>{{ job.message }}</pre>
                                </div>
+                       {% end %}
 
-                               {% if job.is_running() %}
-                                       <div class="columns is-vcentered">
-                                               <div class="column">
-                                                       <progress class="progress is-small is-light" max="100"></progress>
-                                               </div>
+                       {# Show all packages that have been built #}
+                       {% if show_packages and job.packages %}
+                               {% for package in job.packages %}
+                                       <a class="panel-block"
+                                                       href="/packages/{{ package.uuid }}">
+                                               <span class="panel-icon">
+                                                       <i class="fa-solid fa-box" aria-hidden="true"></i>
+                                               </span>
+                                               {{ package.name }}
+                                       </a>
+                               {% end %}
+                       {% end %}
+
+                       {% if job.is_running() or job.has_failed() or job.has_finished() %}
+                               <div class="panel-block">
+                                       <div class="buttons are-small">
+                                               {% if job.builder %}
+                                                       <a class="button" href="/builders/{{ job.builder.hostname }}">
+                                                               {{ _("Builder %s") % job.builder }}
+                                                       </a>
+                                               {% end %}
 
-                                               <div class="column is-1">
-                                                       {{ format_time(job.duration, shorter=True) }}
-                                               </div>
+                                               <a class="button" href="/jobs/{{ job.uuid }}/log">
+                                                       {{ _("View Log") }}
+                                               </a>
 
-                                               <div class="column is-1">
-                                                       <a class="button is-danger" href="/jobs/{{ job.uuid }}/abort">
+                                               {% if job.is_running() %}
+                                                       <a class="button is-dark" href="/jobs/{{ job.uuid }}/abort">
                                                                {{ _("Abort") }}
                                                        </a>
-                                               </div>
-                                       </div>
-                               {% end %}
-                       </div>
-
-                       {# Show all packages that have been built #}
-                       {% if show_packages and job.packages %}
-                               <div class="card-content">
-                                       <ul>
-                                               {% for package in job.packages %}
-                                                       <li>
-                                                               <a href="/packages/{{ package.uuid }}">
-                                                                       {{ package.name }}
-                                                               </a>
-                                                       </li>
                                                {% end %}
-                                       </ul>
+                                       </div>
                                </div>
                        {% end %}
-
-                       {# Footer with some useful buttons #}
-                       <footer class="card-footer">
-                               {% if job.is_running() %}
-                                       <a href="/jobs/{{ job.uuid }}/log" class="card-footer-item">
-                                               {{ _("Watch Log") }}
-                                       </a>
-                               {% elif job.has_log() %}
-                                       <a href="/jobs/{{ job.uuid }}/log" class="card-footer-item">
-                                               {{ _("Download Log") }}
-                                       </a>
-                               {% end %}
-                       </footer>
-               </div>
+               </article>
        </div>
 {% end %}