[Toaster] [PATCH 02/20] toaster: build data Build dashboard to Bootstrap 3
Belen Barros Pena
belen.barros.pena at linux.intel.com
Thu Jun 9 06:24:15 PDT 2016
Make sure the build dashboard page displays correctly with Bootstrap 3.
Signed-off-by: Belen Barros Pena <belen.barros.pena at linux.intel.com>
---
.../lib/toaster/toastergui/static/css/default.css | 31 ++++-
.../toastergui/templates/basebuildpage.html | 2 +-
.../toastergui/templates/builddashboard.html | 131 ++++++++++-----------
.../toaster/toastergui/templates/customrecipe.html | 2 +-
.../toastergui/templates/recipedetails.html | 2 +-
5 files changed, 93 insertions(+), 75 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 30328fd..c275dbb 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -24,9 +24,9 @@ img.logo { height: 30px; vertical-align: bottom; }
/* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar, and also inside the right hand columns of our details pages */
.popover-content dd,
-.well dd { margin-bottom: 15px; }
+.item-info dd { margin-bottom: 15px; }
-/* Style the horizonal definition lists */
+/* Style the horizontal definition lists */
.dl-horizontal dt { width: 200px; line-height: 25px; }
.dl-horizontal dd { margin-left: 220px; line-height: 25px; }
@@ -246,3 +246,30 @@ code { color: #333; background-color: transparent; }
/* Style the Toaster screenshot in the landing page */
.img-thumbnail { padding: 0; }
+
+/* Set the layout for the build information pages */
+
+#nav { margin-top: 10px; }
+.page-header.build-data { margin-top: 0px; }
+.build-data > h1 { margin-top: 8px; }
+
+/* Style the build outcome information in the build dashboard */
+.log { margin-left: 30px; }
+.show-warnings { font-weight: 700; color: #8a6d3b; }
+.show-warnings:hover { color: #66512c; }
+
+/* Style the errors and warnings information in the build dashboard */
+#errors .panel-heading { background-color: transparent; color: #843534; }
+#warnings .panel-heading { background-color: transparent; color: #8a6d3b; }
+#warnings .panel-heading a:hover { color: #66512c; }
+h2.panel-title { font-size: 30px; }
+.alert-danger pre,
+.alert-warning pre { background-color: transparent; border: none; }
+.alert-danger pre { color: #a94442; }
+#error-info pre,
+#warning-info pre { white-space: pre-wrap; }
+.alert-warning pre { color: #8a6d3b; }
+
+/* Style the wells in the build dashboard */
+.dashboard-section h3 { margin-top: 10px; margin-bottom: 20px; }
+.col-md-4.dashboard-section dd { margin-bottom: 10px; }
diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
index 755c538..6162606 100644
--- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
@@ -44,7 +44,7 @@
<div class="row">
<!-- begin left sidebar container -->
<div id="nav" class="col-md-2">
- <ul class="nav nav-list well" id="build-menu">
+ <ul class="nav nav-pills nav-stacked" id="build-menu">
<li
{% if request.resolver_match.url_name == 'builddashboard' %}
class="active"
diff --git a/bitbake/lib/toaster/toastergui/templates/builddashboard.html b/bitbake/lib/toaster/toastergui/templates/builddashboard.html
index 2329603..fc0dcfd 100644
--- a/bitbake/lib/toaster/toastergui/templates/builddashboard.html
+++ b/bitbake/lib/toaster/toastergui/templates/builddashboard.html
@@ -14,57 +14,49 @@
{% block buildinfomain %}
<!-- page title -->
<div class="col-md-10">
- <div class="page-header">
+ <div class="page-header build-data">
<h1>{{build.target_set.all|dictsort:"target"|join:", "}} {{build.machine}}</h1>
</div>
<!-- build result bar -->
- <div class="alert {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == build.FAILED%}alert-error{%else%}alert-info{%endif%}">
- <div class="lead">
- <span><strong>
- {%if build.outcome == build.SUCCEEDED%}Completed{%elif build.outcome == build.FAILED%}Failed{%else%}{%endif%}
- </strong> on
- {{build.completed_on|date:"d/m/y H:i"}}
-</span>
-{% if build.warnings.count or build.errors.count %}
- with
-{% endif %}
-{%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
-{% if build.errors.count %}
- <span > <i class="icon-minus-sign red"></i><strong><a href="#errors" class="error show-errors"> {{build.errors.count}} error{{build.errors.count|pluralize}}</a></strong></span>
-{% endif %}
-{% if build.warnings.count %}
-{% if build.errors.count %}
- and
-{% endif %}
- <span > <i class="icon-warning-sign yellow"></i><strong><a href="#warnings" class="warning show-warnings"> {{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a></strong></span>
-{% endif %}
- <span class="pull-right">Build time: <a href="{% url 'buildtime' build.pk %}">{{ build.timespent_seconds|sectohms }}</a>
- {% if build.cooker_log_path %}
- <a class="btn {%if build.outcome == build.SUCCEEDED%}btn-success{%else%}btn-danger{%endif%} pull-right log" href="{% url 'build_artifact' build.id "cookerlog" build.id %}">Download build log</a>
- {% endif %}
- </span>
-
-{%endif%}
- </div>
- </div>
+ <div class="alert {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == build.FAILED%}alert-danger{%else%}alert-info{%endif%}">
+ <span><strong>{%if build.outcome == build.SUCCEEDED%}Completed{%elif build.outcome == build.FAILED%}Failed{%else%}{%endif%}</strong> on {{build.completed_on|date:"d/m/y H:i"}}</span>
+ {% if build.warnings.count or build.errors.count %}
+ <span>with</span>
+ {% endif %}
+ {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+ {% if build.errors.count %}
+ <a href="#errors" class="alert-link show-errors"> {{build.errors.count}} error{{build.errors.count|pluralize}}</a>
+ {% endif %}
+ {% if build.warnings.count %}
+ {% if build.errors.count %}and{% endif %}
+ <a href="#warnings" class="show-warnings"> {{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a>
+ {% endif %}
+ {% if build.cooker_log_path %}
+ <a class="alert-link pull-right log" href="{% url 'build_artifact' build.id "cookerlog" build.id %}">Download build log</a>
+ {% endif %}
+ <span class="pull-right">
+ Build time:
+ <a class="alert-link" href="{% url 'buildtime' build.pk %}">{{ build.timespent_seconds|sectohms }}</a>
+ </span>
+ {%endif%}
+</div>
{% if build.errors.count %}
-<div class="panel-group" id="errors">
- <div class="panel panel-default">
+ <div class="panel panel-default" id="errors">
<div class="panel-heading">
- <a class="panel-title error toggle-errors" href="#">
- <h2 id="error-toggle">
- <i class="icon-minus-sign"></i>
+ <h2 class="panel-title">
+ <span class="glyphicon glyphicon-minus-sign"></span>
+ <a data-toggle="collapse" href="#error-info" id="error-toggle">
{{build.errors.count}} error{{build.errors.count|pluralize}}
- </h2>
- </a>
+ </a>
+ </h2>
</div>
- <div class="panel-collapse collapse in" id="collapse-errors">
+ <div class="panel-collapse collapse in" id="error-info">
<div class="panel-body">
<div class="col-md-10">
{% for error in build.errors %}
- <div class="alert alert-error" data-error="{{ error.id }}">
+ <div class="alert alert-danger" data-error="{{ error.id }}">
<pre>{{error.message}}</pre>
</div>
{% endfor %}
@@ -72,7 +64,6 @@
</div>
</div>
</div>
-</div>
{% endif %}
{%if build.outcome == build.SUCCEEDED%}
@@ -81,9 +72,8 @@
<h2>Images</h2>
{% for target in targets %}
{% if target.target.is_image %}
- <div class="well dashboard-section">
- <h3><a href="{% url 'target' build.pk target.target.pk %}">{{target.target}}</a>
- </h3>
+ <div class="well well-transparent dashboard-section">
+ <h3><a href="{% url 'target' build.pk target.target.pk %}">{{target.target}}</a></h3>
<dl class="dl-horizontal">
<dt>Packages included</dt>
<dd><a href="{% url 'target' build.pk target.target.pk %}">{{target.npkg}}</a></dd>
@@ -100,7 +90,7 @@
<p>
This is probably because valid image and license manifest
files from a previous build already exist in your
- <code>.../poky/build/tmp/deploy</code>
+ <code>build/tmp/deploy</code>
directory. You can
also <a href="{% url 'targetpkg' build.pk target.target.pk %}">view the
license manifest information</a> in Toaster.
@@ -110,7 +100,7 @@
</div>
{% else %}
<dt>
- <i class="icon-question-sign get-help" title="The location in disk of the license manifest, a document listing all packages installed in your image and their licenses"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The location in disk of the license manifest, a document listing all packages installed in your image and their licenses"></span>
License manifest
</dt>
@@ -118,11 +108,11 @@
<a href="{% url 'target' build.pk target.target.pk %}">View in Toaster</a> |
<a href="{% url 'build_artifact' build.pk 'licensemanifest' target.target.pk %}">Download</a></dd>
<dt>
- <i class="icon-question-sign get-help" title="Image files are stored in <code>/build/tmp/deploy/images/</code>"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="Image files are stored in <code>build/tmp/deploy/images/</code>"></span>
Image files
</dt>
<dd>
- <ul>
+ <ul class="list-unstyled">
{% for i in target.imageFiles %}
<li>
<a href="{% url 'build_artifact' build.pk 'imagefile' i.id %}">
@@ -148,10 +138,10 @@
{% if build.buildartifact_set.all.count > 0 %}
<h2>Other artifacts</h2>
- <div class="well dashboard-section">
+ <div class="well well-transparent dashboard-section">
<dl class="dl-horizontal">
<dt>
- <i class="icon-question-sign get-help" title="Build artifacts discovered in <i>tmp/deploy/images</i>. Usually kernel images and kernel modules."></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="Build artifacts discovered in <i>tmp/deploy/images</i>. Usually kernel images and kernel modules."></span>
Other artifacts</dt>
<dd><div>
{% for ba in build.buildartifact_set.all|dictsort:"file_name" %}
@@ -172,51 +162,51 @@
<div class="row">
<div class="col-md-4 dashboard-section">
<div class="well well-transparent">
- <h4><a href="{%url 'configuration' build.pk%}">Configuration</a></h4>
+ <h3><a href="{%url 'configuration' build.pk%}">Configuration</a></h3>
<dl>
<dt>Machine</dt><dd>{{build.machine}}</dd>
<dt>Distro</dt><dd>{{build.distro}}</dd>
- <dt>Layers</dt>{% for i in build.layer_version_build.all|dictsort:"layer.name" %}<dd>{{i.layer.name}}</dd>{%endfor%}
+ <dt>Layers</dt><dd><ul class="list-unstyled">{% for i in build.layer_version_build.all|dictsort:"layer.name" %}<li>{{i.layer.name}}</li>{%endfor%}</ul></dd>
</dl>
</div>
</div>
<div class="col-md-4 dashboard-section">
<div class="well well-transparent">
- <h4><a href="{%url 'tasks' build.pk%}">Tasks</a></h4>
+ <h3><a href="{%url 'tasks' build.pk%}">Tasks</a></h3>
<dl>
{% query build.task_build outcome=4 order__gt=0 as exectask%}
{% if exectask.count > 0 %}
<dt>Failed tasks</dt>
<dd>
{% if exectask.count == 1 %}
- <a class="error" href="{% url "task" build.id exectask.0.id %}">
+ <a class="text-danger" href="{% url "task" build.id exectask.0.id %}">
{{exectask.0.recipe.name}}
<span class="task-name">{{exectask.0.task_name}}</span>
</a>
<a href="{% url 'build_artifact' build.id "tasklogfile" exectask.0.id %}">
- <i class="icon-download-alt" title="" data-original-title="Download task log file"></i>
+ <span class="glyphicon glyphicon-download-alt get-help" title="Download task log file"></i>
</a>
{% elif exectask.count > 1%}
- <a class="error" href="{% url "tasks" build.id %}?filter=outcome%3A4">{{exectask.count}}</a>
+ <a class="text-danger" href="{% url "tasks" build.id %}?filter=outcome%3A4">{{exectask.count}}</a>
{% endif %}
</dd>
{% endif %}
<dt>Total number of tasks</dt><dd><a href="{% url 'tasks' build.pk %}">{% query build.task_build order__gt=0 as alltasks %}{{alltasks.count}}</a></dd>
<dt>
Tasks executed
- <i class="icon-question-sign get-help" title="'Executed' tasks are those that need to be run in order to generate the task output"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="'Executed' tasks are those that need to be run in order to generate the task output"></span>
</dt>
<dd><a href="{% url 'tasks' build.pk %}?filter=task_executed%3A1&count=25&search=&page=1&orderby=order%3A%2B">{% query build.task_build task_executed=1 order__gt=0 as exectask%}{{exectask.count}}</a></dd>
<dt>
Tasks not executed
- <i class="icon-question-sign get-help" title="'Not executed' tasks don't need to run because their outcome is provided by another task"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="'Not executed' tasks don't need to run because their outcome is provided by another task"></span>
</dt>
<dd><a href="{% url 'tasks' build.pk %}?filter=task_executed%3A0&count=25&search=&page=1&orderby=order%3A%2B">{% query build.task_build task_executed=0 order__gt=0 as noexectask%}{{noexectask.count}}</a></dd>
<dt>
Reuse
- <i class="icon-question-sign get-help" title="The percentage of 'not executed' tasks over the total number of tasks, which is a measure of the efficiency of your build"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The percentage of 'not executed' tasks over the total number of tasks, which is a measure of the efficiency of your build"></span>
</dt>
<dd>
{% query build.task_build order__gt=0 as texec %}
@@ -232,7 +222,7 @@
</div>
<div class="col-md-4 dashboard-section">
<div class="well well-transparent">
- <h4><a href="{% url 'recipes' build.pk %}">Recipes</a> & <a href="{% url 'packages' build.pk %}">Packages</a></h4>
+ <h3><a href="{% url 'recipes' build.pk %}">Recipes</a> & <a href="{% url 'packages' build.pk %}">Packages</a></h3>
<dl>
<dt>Recipes built</dt><dd><a href="{% url 'recipes' build.pk %}">{{recipecount}}</a></dd>
<dt>Packages built</dt><dd><a href="{% url 'packages' build.pk %}">{{packagecount}}</a></dd>
@@ -242,17 +232,14 @@
</div>
{% if build.warnings.count %}
-<div class="panel-group" id="warnings">
- <div class="panel panel-default">
+ <div class="panel panel-default" id="warnings">
<div class="panel-heading">
- <a class="panel-title warning toggle-warnings" href="#">
- <h2 id="warning-toggle">
- <i class="icon-warning-sign"></i>
- {{build.warnings.count}} warning{{build.warnings.count|pluralize}}
- </h2>
- </a>
+ <h2 class="panel-title">
+ <span class="glyphicon glyphicon-warning-sign"></span>
+ <a id="warning-toggle" href="#warning-info" data-toggle="collapse">{{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a>
+ </h2>
</div>
- <div class="panel-collapse collapse" id="collapse-warnings">
+ <div class="panel-collapse collapse" id="warning-info">
<div class="panel-body">
<div class="col-md-10">
{% for warning in logmessages %}{% if warning.level == 1 %}
@@ -264,7 +251,6 @@
</div>
</div>
</div>
-</div>
{% endif %}
</div> <!-- end 10 column row -->
@@ -273,8 +259,13 @@
$(document).ready(function() {
//show warnings section when requested from the previous page
if (location.href.search('#warnings') > -1) {
- $('#collapse-warnings').addClass('in');
+ $('#warning-info').addClass('in');
}
+
+ //show warnings section when requested from the build outcome
+ $(".show-warnings").click(function() {
+ $('#warning-info').addClass('in');
+ });
});
</script>
diff --git a/bitbake/lib/toaster/toastergui/templates/customrecipe.html b/bitbake/lib/toaster/toastergui/templates/customrecipe.html
index d904961..f2a8fd2 100644
--- a/bitbake/lib/toaster/toastergui/templates/customrecipe.html
+++ b/bitbake/lib/toaster/toastergui/templates/customrecipe.html
@@ -158,7 +158,7 @@
<div class="well">
<h2>About {{recipe.name}}</h2>
- <dl>
+ <dl class="item-info">
<dt>
Approx. packages included
<span class="glyphicon glyphicon-question-sign get-help" title="" data-original-title="The number of packages included is based on information from previous builds and from parsing layers, so we can never be sure it is 100% accurate"></span>
diff --git a/bitbake/lib/toaster/toastergui/templates/recipedetails.html b/bitbake/lib/toaster/toastergui/templates/recipedetails.html
index 19b18ff..66c1f7b 100644
--- a/bitbake/lib/toaster/toastergui/templates/recipedetails.html
+++ b/bitbake/lib/toaster/toastergui/templates/recipedetails.html
@@ -118,7 +118,7 @@
<div class="col-md-4">
<div class="well">
<h2>About {{recipe.name}}</h2>
- <dl>
+ <dl class="item-info">
<dt>
Approx. packages included
<span class="glyphicon glyphicon-question-sign get-help" title="The number of packages included is based on information from previous builds and from parsing layers, so we can never be sure it is 100% accurate"></span>
--
1.9.1
More information about the toaster
mailing list