bootstrap4: port job details pages

Signed-off-by: Jonatan Schlag <jonatan.schlag@ipfire.org>

diff --git a/src/templates/jobs-buildroot.html b/src/templates/jobs-buildroot.html
index 4da26fd7f98e4eb5144d14d59d01b01849e5cbb6..b93d3c95d1fccd3b572ea024af0e96455f410dd4 100644 (file)
--- a/src/templates/jobs-buildroot.html
+++ b/src/templates/jobs-buildroot.html
@@ -3,92 +3,94 @@
 {% block title %}{{ _("Job buildroot")}}: {{ job.name }}{% end block %}
 
 {% block body %}
 {% block title %}{{ _("Job buildroot")}}: {{ job.name }}{% end block %}
 
 {% block body %}

-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/packages">{{ _("Packages") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/package/{{ build.pkg.name }}">{{ build.pkg.name }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/build/{{ build.uuid }}">{{ build.pkg.friendly_version }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/job/{{ job.uuid }}">{{ job.arch }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/job/{{ job.uuid }}/buildroot">{{ _("Buildroot") }}</a>
-               </li>
-       </ul>

 
 

-       <div class="page-header">
-               <h2>
-                       {{ _("Build job")}}: {{ job.name }} <small>{{ _("Buildroot") }}</small>
-               </h2>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <nav aria-label="breadcrumb" role="navigation">
+                               <ol class="breadcrumb">
+                                       <li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/packages">{{ _("Packages") }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/package/{{ build.pkg.name }}">{{ build.pkg.name }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/build/{{ build.uuid }}">{{ build.pkg.friendly_version }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/job/{{ job.uuid }}">{{ job.arch }}</a></li>
+                                       <li class="breadcrumb-item active"><a href="/job/{{ job.uuid }}/buildroot">{{ _("Buildroot") }}</a></li>
+                               </ol>
+                       </nav>
+               </div>

        </div>
 
        <div class="row">
        </div>
 
        <div class="row">

-               <div class="span9">
-                       <p>
-                               {{ _("The packages listed below were used to build %s.") % job.name }}
-                       </p>
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <h2 style="word-wrap: break-word;">
+                               {{ _("Build job")}}: {{ job.name }}<br>
+                               <small>{{ _("Buildroot") }}</small>
+                       </h2>

                </div>
                </div>

+       </div>

 
 

-               <div class="span3">
-                       <table class="table table-striped table-hover">
-                               <tr>
-                                       <td>{{ _("Packages") }}</td>
-                                       <td>{{ len(buildroot) }}</td>
-                               </tr>
-                               <tr>
-                                       <td>{{ _("Buildroot size") }}</td>
-                                       <td>{{ format_size(buildroot_size) }}</td>
-                               </tr>
-                               <tr>
-                                       <td>{{ _("Download size") }}</td>
-                                       <td>{{ format_size(download_size) }}</td>
-                               </tr>
-                       </table>
+
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <div class="table-responsive mb-2">
+                               <table class="table table-striped table-hover">
+                                       <tr>
+                                               <td>{{ _("Packages") }}</td>
+                                               <td>{{ len(buildroot) }}</td>
+                                       </tr>
+                                       <tr>
+                                               <td>{{ _("Buildroot size") }}</td>
+                                               <td>{{ format_size(buildroot_size) }}</td>
+                                       </tr>
+                                       <tr>
+                                               <td>{{ _("Download size") }}</td>
+                                               <td>{{ format_size(download_size) }}</td>
+                                       </tr>
+                               </table>
+                       </div>

                </div>
        </div>
 
                </div>
        </div>
 

-       <hr>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <h4 style="word-wrap: break-word;">
+                               {{ _("The packages listed below were used to build %s.") % job.name }}
+                       </h4>
+               </div>
+       </div>

 
 

-       <table class="table table-striped table-hover">
-               <tbody>
-                       {% for name, uuid, pkg in buildroot %}
-                               <tr>
-                                       {% if pkg %}
-                                               <td>
-                                                       <a href="/package/{{ pkg.uuid }}">{{ pkg.friendly_name }}</a>
-                                               </td>
-                                               <td>
-                                                       {{ pkg.summary }}
-                                               </td>
-                                               <td>
-                                                       {{ format_size(pkg.filesize) }}
-                                               </td>
-                                       {% else %}
-                                               <td>
-                                                       {{ name }}
-                                               </td>
-                                               <td>
-                                                       ({{ uuid }})
-                                               </td>
-                                               <td>
-                                                       {{ _("N/A") }}
-                                               </td>
-                                       {% end %}
-                               </tr>
-                       {% end %}
-               </tbody>
-       </table>
+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <div class="table-responsive mb-2">
+                               <table class="table table-striped table-hover">
+                                       <tbody>
+                                               {% for name, uuid, pkg in buildroot %}
+                                                       <tr>
+                                                               {% if pkg %}
+                                                                       <td>
+                                                                               <a href="/package/{{ pkg.uuid }}">{{ pkg.friendly_name }}</a>
+                                                                       </td>
+                                                                       <td>
+                                                                               {{ pkg.summary }}
+                                                                       </td>
+                                                                       <td>
+                                                                               {{ format_size(pkg.filesize) }}
+                                                                       </td>
+                                                               {% else %}
+                                                                       <td>
+                                                                               {{ name }}
+                                                                       </td>
+                                                                       <td>
+                                                                               ({{ uuid }})
+                                                                       </td>
+                                                                       <td>
+                                                                               {{ _("N/A") }}
+                                                                       </td>
+                                                               {% end %}
+                                                       </tr>
+                                               {% end %}
+                                       </tbody>
+                               </table>
+                       </div>
+               </div>
+       </div>

 {% end block %}
 {% end block %}

diff --git a/src/templates/jobs-detail.html b/src/templates/jobs-detail.html
index 9d605d5d1cfd5e181eb446721924e7928ba21bcb..05c084cbc51372491f9bfc0eb976033379bb59f7 100644 (file)
--- a/src/templates/jobs-detail.html
+++ b/src/templates/jobs-detail.html
@@ -3,145 +3,181 @@
 {% block title %}{{ _("Job") }}: {{ job.name }}{% end block %}
 
 {% block body %}
 {% block title %}{{ _("Job") }}: {{ job.name }}{% end block %}
 
 {% block body %}

-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/packages">{{ _("Packages") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/package/{{ build.pkg.name }}">{{ build.pkg.name }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li>
-                       <a href="/build/{{ build.uuid }}">{{ build.pkg.friendly_version }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/job/{{ job.uuid }}">{{ job.arch }}</a>
-               </li>
-       </ul>
-
-       <div class="btn-group pull-right">
-               <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-                       {{ _("Actions") }} <span class="caret"></span>
-               </a>
-               <ul class="dropdown-menu">
-                       {% if job.state in ("dispatching", "running", "uploading") %}
-                               <li>
-                                       <a href="/job/{{ job.uuid }}/abort">
-                                               {{ _("Abort job") }}
-                                       </a>
-                               </li>
-                       {% elif job.state in ("aborted", "failed") %}
-                               <li>
-                                       <a href="/job/{{ job.uuid }}/schedule?type=rebuild">
-                                               {{ _("Restart job") }}
-                                       </a>
-                               </li>
-                       {% elif job.state == "finished" %}
-                               <li>
-                                       <a href="/job/{{ job.uuid }}/schedule?type=test">
-                                               {{ _("Schedule test build") }}
-                                       </a>
-                               </li>
-                       {% end %}
-               </ul>
-       </div>

 
 

+       <div class="row">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                       <nav aria-label="breadcrumb" role="navigation">
+                               <ol class="breadcrumb">
+                                       <li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/packages">{{ _("Packages") }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/package/{{ build.pkg.name }}">{{ build.pkg.name }}</a></li>
+                                       <li class="breadcrumb-item"><a href="/build/{{ build.uuid }}">{{ build.pkg.friendly_version }}</a></li>
+                                       <li class="breadcrumb-item active"><a href="/job/{{ job.uuid }}">{{ job.arch }}</a></li>
+                               </ol>
+                       </nav>
+               </div>
+       </div>

 
 

-       <div class="page-header">
-               <h2>
-                       {{ _("Build job") }}: {{ job.name }}<br>
-                       <small>{{ job.pkg.summary }}</small>
-               </h2>
+       <div class="row">
+               {% if current_user and job.state in ("dispatching", "running", "uploading", "aborted", "failed", "finished") %}
+                       <div class="col-12 col-sm-12 col-md-9 col-lg-10 col-xl-10">
+                               <h2 style="word-wrap: break-word;">
+                                       {{ _("Build job") }}: {{ job.name }}
+                                       {% module JobState(job, cls="float-lg-right float-xl-right", show_icon=False) %}
+                                       <br>
+                                       <small>{{ job.pkg.summary }}</small>
+                               </h2>
+                       </div>
+                       <div class="col-12 col-sm-12 col-md-3 col-lg-2 col-xl-2">
+                               <div class="dropdown">
+                                       <button class="btn btn-block btn-light dropdown-toggle mb-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                               {{ _("Actions") }}
+                                       </button>
+                                       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                               {% if job.state in ("dispatching", "running", "uploading") %}
+                                                       <a class="dropdown-item" href="/job/{{ job.uuid }}/abort">
+                                                               {{ _("Abort job") }}
+                                                       </a>
+                                               {% elif job.state in ("aborted", "failed") %}
+                                                       <a class="dropdown-item" href="/job/{{ job.uuid }}/schedule?type=rebuild">
+                                                               {{ _("Restart job") }}
+                                                       </a>
+                                               {% elif job.state == "finished" %}
+                                                       <a class="dropdown-item" href="/job/{{ job.uuid }}/schedule?type=test">
+                                                               {{ _("Schedule test build") }}
+                                                       </a>
+                                               {% end %}
+                                       </div>
+                               </div>
+                       </div>
+               {% else %}
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <h2 style="word-wrap: break-word;">
+                                       {{ _("Build job") }}: {{ job.name }}
+                                       {% module JobState(job, cls="float-lg-right float-xl-right", show_icon=False) %}
+                                       <br>
+                                       <small>{{ job.pkg.summary }}</small>
+                               </h2>
+                       </div>
+               {% end %}

        </div>
 
        </div>
 

+
+

        {% if job.message %}
        {% if job.message %}

-               <div class="alert alert-block">
-                       {{ "<br />".join(job.message.splitlines()) }}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <div class="alert alert-info">
+                                       {{ "<br />".join(job.message.splitlines()) }}
+                               </div>
+                       </div>

                </div>
        {% end %}
 
        {% if job.state == "aborted" and job.aborted_state %}
                </div>
        {% end %}
 
        {% if job.state == "aborted" and job.aborted_state %}

-               <div class="alert alert-block alert-danger">
-                       <span>{{ _("Job has been aborted") }}</span>
-                       <p>
-                               {{ _("This build job is in an aborted state, because the build process crashed unexpectedly.") }}
-                               {{ _("In most cases, there is no log file and you must figure out the issue on your own.") }}
-                       </p>
-                       <p>
-                               {{ _("The error code is:") }}
-
-                               {% if job.aborted_state == -11 %}
-                                       SEGV - {{ _("Segmentation violation") }}
-                               {% else %}
-                                       {{ job.aborted_state }} - {{ _("Unknown") }}
-                               {% end %}
-                       </p>
-
-                       {% if current_user and current_user.is_admin() %}
-                               <p>
-                                       {{ _("You may resubmit the job to try again:") }}
-                                       <a href="/job/{{ job.uuid }}/schedule?type=rebuild">{{ _("Re-submit build") }}</a>
-                               </p>
-                       {% end %}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <div class="alert alert-danger" role="alert">
+                                       <h3 style="word-wrap: break-word;" class="alert-heading">
+                                                       {{ _("Job has been aborted") }}
+                                       </h3>
+                                       <p>
+                                               {{ _("This build job is in an aborted state, because the build process crashed unexpectedly.") }}
+                                               {{ _("In most cases, there is no log file and you must figure out the issue on your own.") }}
+                                       </p>
+                                       <p>
+                                               {{ _("The error code is:") }}
+
+                                               {% if job.aborted_state == -11 %}
+                                                       SEGV - {{ _("Segmentation violation") }}
+                                               {% else %}
+                                                       {{ job.aborted_state }} - {{ _("Unknown") }}
+                                               {% end %}
+                                       </p>
+
+                                       {% if current_user and current_user.is_admin() %}
+                                               <p>
+                                                       {{ _("You may resubmit the job to try again:") }}
+                                                       <a href="/job/{{ job.uuid }}/schedule?type=rebuild">{{ _("Re-submit build") }}</a>
+                                               </p>
+                                       {% end %}
+                               </div>
+                       </div>

                </div>
        {% end %}
 
        <div class="row">
                </div>
        {% end %}
 
        <div class="row">

-               <div class="span7">
-                       <div class="well well-large well-white ac">
-                               <div class="row-fluid">
-                                       <div class="span5">
-                                               {% module JobState(job, cls="lead", show_icon=True) %}
-
+               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                       <h3 class="text-center">{{ _("General") }}</h3>
+                       <div class="table-responsive">
+                               <table class="table table-striped table-hover">
+                                       <tbody>

                                                {% if job.rank %}
                                                {% if job.rank %}

-                                                       <p>
-                                                               {{ _("#%s in the build queue") % job.rank }}
-                                                       </p>
+                                                       <tr>
+                                                               <td>
+                                                                       {{ _("Job rank") }}
+                                                               </td>
+                                                               <td>
+                                                                       {{ _("#%s in the build queue") % job.rank }}
+                                                               </td>
+                                                       </tr>

                                                {% end %}
                                                {% end %}

-
-                                               <hr>
-
-                                               <p>
-                                                       <span class="lead">{{ friendly_time(job.duration) }}</span>
-                                                       {% if job.builder %}
-                                                               <br>
-                                                               <a href="/builder/{{ job.builder.name }}">{{ job.builder.name }}</a>
-                                                       {% else %}
-                                                               <span class="muted">{{ _("No builder assigned.") }}</span>
-                                                       {% end %}
-                                               </p>
-                                       </div>
-
-                                       <div class="span7">
-                                                       <p>
-                                                               <strong>{{ _("Created") }}</strong><br>
+                                               <tr>
+                                                       <td>
+                                                               {{ _("Time") }}
+                                                       </td>
+                                                       <td>
+                                                               {{ friendly_time(job.duration) }}
+                                                       </td>
+                                               </tr>
+
+                                               <tr>
+                                                       <td>
+                                                               {{ _("Builder") }}
+                                                       </td>
+                                                       <td>
+                                                               {% if job.builder %}
+                                                                       <a href="/builder/{{ job.builder.name }}">{{ job.builder.name }}</a>
+                                                               {% else %}
+                                                                       <span class="text-muted">{{ _("No builder assigned.") }}</span>
+                                                               {% end %}
+                                                       </td>
+                                               </tr>
+                                               <tr>
+                                                       <td>
+                                                               {{ _("Created") }}
+                                                       </td>
+                                                       <td>

                                                                {{ format_date(job.time_created, full_format=True) }}
                                                                {{ format_date(job.time_created, full_format=True) }}

-                                                       </p>
-                                                       {% if job.time_started %}
-                                                               <p>
-                                                                       <strong>{{ _("Started") }}</strong><br>
+                                                       </td>
+                                               </tr>
+                                               {% if job.time_started %}
+                                                       <tr>
+                                                               <td>
+                                                                       {{ _("Started") }}
+                                                               </td>
+                                                               <td>

                                                                        {{ format_date(job.time_started, full_format=True) }}
                                                                        {{ format_date(job.time_started, full_format=True) }}

-                                                               </p>
-                                                       {% end %}
-                                                       {% if job.time_finished %}
-                                                               <p>
-                                                                       <strong>{{ _("Finished") }}</strong><br>
+                                                               </td>
+                                                       </tr>
+                                               {% end %}
+                                               {% if job.time_finished %}
+                                                       <tr>
+                                                               <td>
+                                                                       {{ _("Finished") }}
+                                                               </td>
+                                                               <td>

                                                                        {{ format_date(job.time_finished, full_format=True) }}
                                                                        {{ format_date(job.time_finished, full_format=True) }}

-                                                               </p>
-                                                       {% end %}
-                                       </div>
-                               </div>
+                                                               </td>
+                                                       </tr>
+                                               {% end %}
+                                       </tbody>
+                               </table>

                        </div>
                </div>
 
                        </div>
                </div>
 

-               <div class="span5">
-                       <h4>{{ _("Build logs") }}</h4>
+               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
+                       <h3 class="text-center">{{ _("Build logs") }}</h3>

                        {% if job.logfiles %}
                                {% module LogFilesTable(job, job.logfiles) %}
                        {% else %}
                        {% if job.logfiles %}
                                {% module LogFilesTable(job, job.logfiles) %}
                        {% else %}


@@ -149,8 +185,7 @@
                        {% end %}
 
                        {% if job.buildroot %}
                        {% end %}
 
                        {% if job.buildroot %}

-                               <hr>
-                               <p class="ac">
+                               <p class="text-center">

                                        <a href="/job/{{ job.uuid }}/buildroot">{{ _("Buildroot") }}</a>
                                        ({{ _("%s package", "%s packages", len(job.buildroot)) % len(job.buildroot) }})
                                </p>
                                        <a href="/job/{{ job.uuid }}/buildroot">{{ _("Buildroot") }}</a>
                                        ({{ _("%s package", "%s packages", len(job.buildroot)) % len(job.buildroot) }})
                                </p>


@@ -159,21 +194,29 @@
        </div>
 
        {% if len(job) > 0 %}
        </div>
 
        {% if len(job) > 0 %}

-               <hr>
-
-               <h3>
-                       {{ _("Package files") }}
-                       <small>({{ len(job) }})</small>
-               </h3>
-
-               {% module PackagesTable(job, job) %}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <h3 style="word-wrap: break-word;">
+                                       {{ _("Package files") }}
+                                       <small>({{ len(job) }})</small>
+                               </h3>
+                       </div>
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               {% module PackagesTable(job, job) %}
+                       </div>
+               </div>

        {% end %}
 
        {% if log %}
        {% end %}
 
        {% if log %}

-               <hr>
-
-               <h3>{{ _("Log") }}</h3>
-
-               {% module Log(log) %}
+               <div class="row">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               <h3 style="word-wrap: break-word;">
+                                       {{ _("Log") }}
+                               </h3>
+                       </div>
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
+                               {% module Log(log) %}
+                       </div>
+               </div>

        {% end %}
 {% end block %}
        {% end %}
 {% end block %}

diff --git a/src/templates/modules/packages-table.html b/src/templates/modules/packages-table.html
index 67ab5d9bf7840fc7b665b86f49300666830acf6f..34b3682555c2374082b87b4b7016079e5d9d394c 100644 (file)
--- a/src/templates/modules/packages-table.html
+++ b/src/templates/modules/packages-table.html
@@ -1,27 +1,28 @@
-<table class="table table-striped table-hover">
-       <thead>
-               <tr>
-                       <th>{{ _("Name") }}</th>
-                       <th>{{ _("Summary") }}</th>
-                       <th>{{ _("Size") }}</th>
-                       <th>&nbsp;</th>
-               </tr>
-       </thead>
-       <tbody>
-               {% for package in packages %}
+<div class="table-responsive mb-2">
+       <table class="table table-striped table-hover">
+               <thead>

                        <tr>
                        <tr>

-                               <td>
-                                       <a href="/package/{{ package.uuid }}">{{ package.friendly_name }}</a>
-                               </td>
-                               <td>{{ package.summary }}</td>
-                               <td>{{ format_size(package.filesize) }}</td>
-                               <td>
-                                       <a class="btn btn-mini" href="{{ job.build.download_prefix }}/{{ package.path }}">
-                                               <i class="icon-download"></i>
-                                               {{ _("Download") }}
-                                       </a>
-                               </td>
+                               <th>{{ _("Name") }}</th>
+                               <th>{{ _("Summary") }}</th>
+                               <th>{{ _("Size") }}</th>
+                               <th>&nbsp;</th>

                        </tr>
                        </tr>

-               {% end %}
-       </tbody>
-</table>
+               </thead>
+               <tbody>
+                       {% for package in packages %}
+                               <tr>
+                                       <td>
+                                               <a href="/package/{{ package.uuid }}">{{ package.friendly_name }}</a>
+                                       </td>
+                                       <td>{{ package.summary }}</td>
+                                       <td>{{ format_size(package.filesize) }}</td>
+                                       <td>
+                                               <a class="btn btn-light" href="{{ job.build.download_prefix }}/{{ package.path }}">
+                                                       <i class="icon-download"></i>{{ _("Download") }}
+                                               </a>
+                                       </td>
+                               </tr>
+                       {% end %}
+               </tbody>
+       </table>
+</div>
\ No newline at end of file