[Toaster] [PATCH 11/20] toaster: build data Recipe details to Bootstrap 3
Belen Barros Pena
belen.barros.pena at linux.intel.com
Thu Jun 9 06:24:24 PDT 2016
Make sure the recipe details 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 | 6 +-
.../templates/detail_pagination_bottom.html | 24 +++---
.../toastergui/templates/detail_search_header.html | 58 +++++++------
.../toastergui/templates/detail_sorted_header.html | 8 +-
.../lib/toaster/toastergui/templates/recipe.html | 98 ++++++++++++++--------
.../toastergui/templates/recipe_packages.html | 21 +++--
6 files changed, 130 insertions(+), 85 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index fe2c4c2..adcad81 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -74,7 +74,8 @@ span[class^="remove-search-btn-"]:hover { color: #333; }
[id^="pagination-"] .pagination,
[id^="pagination-"] .navbar-form { margin-top: 0; }
[id^="table-chrome-"] .navbar-form { margin-left: -15px; margin-right: -15px; }
-[id^="table-chrome-"] .detail-page-contols { padding-left: 0; padding-right: 0; }
+[id^="table-chrome-"] .detail-page-contols,
+#packages-built .detail-page-controls { padding-left: 0; padding-right: 0; }
/* Override the default font-weight for labels: it's a bit too much */
label { font-weight: normal; }
@@ -84,6 +85,9 @@ label { font-weight: normal; }
/* Table heading sortable / not sortable states */
thead > tr > th > a { font-weight: normal; }
+ <a class="input-append-addon btn search-clear">
+ <i class="glyphicon glyphicon-remove"></i>
+ </a>
thead > tr > th > a.sorted { font-weight: bold; color: #333; }
/* Give some extra space to the 'clear filter' buttons */
diff --git a/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html b/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html
index 211548b..70404a2 100644
--- a/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html
+++ b/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html
@@ -6,7 +6,7 @@
{# only paginate if 10 or more rows unfiltered, all pages #}
{% if object_count >= 10 %}
-<div>
+<div id="pagination-detail">
<ul class="pagination">
{%if objects.has_previous %}
<li><a href="javascript:reload_params({'page':{{objects.previous_page_number}}})">«</a></li>
@@ -23,16 +23,18 @@
{%endif%}
</ul>
- <div class="pull-right">
- <span class="help-inline">Show rows:</span>
- <select class="pagesize">
- {% with "10 25 50 100 150" as list%}
- {% for i in list.split %}
- <option value="{{i}}">{{i}}</option>
- {% endfor %}
- {% endwith %}
- </select>
- </div>
+ <form class="navbar-form navbar-right">
+ <div class=form-group">
+ <label>Show rows:</label>
+ <select class="pagesize form-control">
+ {% with "10 25 50 100 150" as list%}
+ {% for i in list.split %}
+ <option value="{{i}}">{{i}}</option>
+ {% endfor %}
+ {% endwith %}
+ </select>
+ </div>
+ </form>
</div>
<!-- Update page display settings -->
diff --git a/bitbake/lib/toaster/toastergui/templates/detail_search_header.html b/bitbake/lib/toaster/toastergui/templates/detail_search_header.html
index 996b617..193c26b 100644
--- a/bitbake/lib/toaster/toastergui/templates/detail_search_header.html
+++ b/bitbake/lib/toaster/toastergui/templates/detail_search_header.html
@@ -21,22 +21,24 @@ $(document).ready(function() {
{% if objects.paginator.count > 10 or request.GET.search %}
{% if objects.paginator.count == 0 %}
- <div class="alert">
- <h3>No {{search_what}} found</h3>
- <form id="searchform" class="input-append">
+ <div class="alert alert-warning">
+ <h4>No {{search_what}} found</h4>
+ <form id="searchform" class="form-inline">
{% else %}
- <form id="searchform" class="navbar-search input-append pull-left">
+ <form id="searchform" class="navbar-form navbar-left detail-page-controls">
{% endif %}
- <input id="search" class="input-xlarge" type="text" placeholder="Search {{search_what}}" name="search" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}">
- <input type="hidden" value="name:+" name="orderby">
- <input type="hidden" value="l" name="page">
- {% if request.GET.search %}
- <a class="input-append-addon btn search-clear">
- <i class="glyphicon glyphicon-remove"></i>
- </a>
- {% endif %}
- <button type="submit" class="btn">Search</button>
+ <div class="form-group">
+ <div class="btn-group">
+ <input id="search" class="form-control" type="text" placeholder="Search {{search_what}}" name="search" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}">
+ <input type="hidden" value="name:+" name="orderby">
+ <input type="hidden" value="l" name="page">
+ {% if request.GET.search %}
+ <span class="remove-search-btn-detail-search search-clear glyphicon glyphicon-remove-circle"></span>
+ {% endif %}
+ </div>
+ </div>
+ <button type="submit" class="btn btn-default">Search</button>
{% if objects.paginator.count == 0 %}
<button type="submit" class="btn btn-link search-clear">
Show all {{search_what}}
@@ -49,20 +51,22 @@ $(document).ready(function() {
</div> {# end alert #}
{% else %}
{% if object_count > 10 %}
- <div class="pull-right">
- <span class="help-inline" style="padding-top:5px;">Show rows:</span>
- <select style="margin-top:5px;margin-bottom:0px;" class="pagesize">
- {% with "10 25 50 100 150" as list%}
- {% for i in list.split %}
- {% if request.session.limit == i %}
- <option value="{{i}}" selected>{{i}}</option>
- {% else %}
- <option value="{{i}}">{{i}}</option>
- {% endif %}
- {% endfor %}
- {% endwith %}
- </select>
- </div>
+ <form class="navbar-form navbar-right">
+ <div class="form-group">
+ <label>Show rows:</label>
+ <select class="pagesize form-control">
+ {% with "10 25 50 100 150" as list%}
+ {% for i in list.split %}
+ {% if request.session.limit == i %}
+ <option value="{{i}}" selected>{{i}}</option>
+ {% else %}
+ <option value="{{i}}">{{i}}</option>
+ {% endif %}
+ {% endfor %}
+ {% endwith %}
+ </select>
+ </div>
+ </form>
{% endif %}
{% endif %}
diff --git a/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html b/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html
index 6589b0a..fef2546 100644
--- a/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html
+++ b/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html
@@ -10,12 +10,12 @@
<!-- Table header row; generated from "tablecols" entry in the context dict -->
<tr>
{% for tc in tablecols %}<th class="{%if tc.dclass%}{{tc.dclass}}{% endif %} {%if tc.class %}{{tc.clclass}}{% endif %}">
- {%if tc.qhelp%}<i class="icon-question-sign get-help" title="{{tc.qhelp}}"></i>{%endif%}
- {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' })">{{tc.name}}</a>{%else%}<span class="muted">{{tc.name}}</span>{%endif%}
- {%if tc.ordericon%} <i class="icon-caret-{{tc.ordericon}}"></i>{%endif%}
+ {%if tc.qhelp%}<span class="glyphicon glyphicon-question-sign get-help" title="{{tc.qhelp}}"></span>{%endif%}
+ {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' })">{{tc.name}}</a>{%else%}<span class="text-muted">{{tc.name}}</span>{%endif%}
+ {%if tc.ordericon%} <span class="icon-caret-{{tc.ordericon}}"></span>{%endif%}
{% if request.GET.search and forloop.first %}
<span class="badge badge-info">{{objects.paginator.count}}</span>
- {% endif %}
+ {% endif %}
{%if tc.filter%}<div class="btn-group pull-right">
<a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-mini {%if request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter and tc.filter.options|filtered_tooltip:request.GET.filter %} title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display %}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <i class="glyphicon glyphicon-filter filtered"></i> </a>
</div>{%endif%}
diff --git a/bitbake/lib/toaster/toastergui/templates/recipe.html b/bitbake/lib/toaster/toastergui/templates/recipe.html
index 2aaff6b..6c84660 100644
--- a/bitbake/lib/toaster/toastergui/templates/recipe.html
+++ b/bitbake/lib/toaster/toastergui/templates/recipe.html
@@ -14,7 +14,7 @@
<div class="row">
<div class="col-md-12">
- <div class="page-header">
+ <div class="page-header build-data">
<h1>{{object.name}}_{{object.version}}</h1>
</div>
</div>
@@ -22,28 +22,33 @@
<div class="row">
<div class="col-md-8 tabbable">
- <ul class="nav nav-pills">
+ <ul class="nav nav-tabs">
<li class="{{tab_states.1}}">
<a href="#information" data-toggle="tab">
- <i class="icon-question-sign get-help" title="Build-related information about the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="Build-related
+ information about the recipe"></span>
Recipe details
</a>
</li>
<li>
<a href="{% url "recipe_packages" build.pk object.id %}">
- <i class="icon-question-sign get-help" title="The packaged output resulting from building the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The packaged
+ output resulting from building the recipe"></span>
Packages ({{package_count}})
</a>
</li>
<li class="{{tab_states.3}}">
<a href="#dependencies" data-toggle="tab">
- <i class="icon-question-sign get-help" title="The recipe build-time dependencies (i.e. other recipes)"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+ build-time dependencies (i.e. other recipes)"></span>
Build dependencies ({{object.r_dependencies_recipe.all.count}})
</a>
</li>
<li class="{{tab_states.4}}">
<a href="#brought-in-by" data-toggle="tab">
- <i class="icon-question-sign get-help" title="The recipe build-time reverse dependencies (i.e. the recipes that depend on this recipe)"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+ build-time reverse dependencies (i.e. the recipes that
+ depend on this recipe)"></span>
Reverse build dependencies ({{object.r_dependencies_depends.all.count}})
</a>
</li>
@@ -52,34 +57,39 @@
<div class="tab-pane {{tab_states.1}}" id="information">
<dl class="dl-horizontal">
<dt>
- <i class="icon-question-sign get-help" title="The name of the layer providing the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The name of
+ the layer providing the recipe"></span>
Layer
</dt>
<dd>{{layer.name}}</dd>
<dt>
- <i class="icon-question-sign get-help" title="Path to the recipe .bb file"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="Path to the
+ recipe .bb file"></span>
Recipe file
</dt>
<dd><code>{{object.file_path}} {% if object.pathflags %}<i>({{object.pathflags}})</i>{% endif %}</code></dd>
{% if layer_version.branch %}
<dt>
- <i class="icon-question-sign get-help" title="The Git branch of the layer providing the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help"
+ title="The Git branch of the layer providing the
+ recipe"></span>
Layer branch
</dt>
<dd>{{layer_version.branch}}</dd>
{% endif %}
<dt>
- <i class="icon-question-sign get-help" title="The Git commit of the layer providing the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The Git
+ commit of the layer providing the recipe"></span>
Layer commit
</dt>
<dd class="iscommit">{{layer_version.commit}}</dd>
{% if object.provides_set.all %}
<dt>
- <i class="icon-question-sign get-help"
+ <span class="glyphicon glyphicon-question-sign get-help"
title="A list of aliases by which a particular recipe can be known. The additional aliases are
synonyms for the recipe and can be useful satisfying dependencies of other recipes during
- the build"></i>
+ the build"></span>
PROVIDES
</dt>
<dd><code>{% for provider in object.provides_set.all %}{{ provider.name }} {% endfor %}</code></dd>
@@ -92,27 +102,42 @@
<strong>{{object.name}}_{{object.version}}</strong> does not have any tasks in this build.
</div>
{% else %}
+ <div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
- <i class="icon-question-sign get-help" title="The running sequence of each task in the build"></i>
+ <span class="glyphicon glyphicon-question-sign
+ get-help" title="The running sequence of each task
+ in the build"></span>
Order
</th>
<th>
- <i class="icon-question-sign get-help" title="The name of the task"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The name
+ of the task"></span>
Task
</th>
<th>
- <i class="icon-question-sign get-help" title="This value tells you if a task had to run (executed) in order to generate the task output, or if the output was provided by another task and therefore the task didn't need to run (not executed)"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="This
+ value tells you if a task had to run (executed) in
+ order to generate the task output, or if the output was
+ provided by another task and therefore the task didn't need
+ to run (not executed)"></span>
Executed
</th>
<th>
- <i class="icon-question-sign get-help" title="This column tells you if 'executed' tasks succeeded or failed. The column also tells you why 'not executed' tasks did not need to run"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="This
+ column tells you if 'executed' tasks succeeded or
+ failed. The column also tells you why 'not executed'
+ tasks did not need to run"></span>
Outcome
</th>
<th>
- <i class="icon-question-sign get-help" title="This column tells you if a task tried to restore output from the <code>sstate-cache</code> directory or mirrors, and reports the result: Succeeded, Failed or File not in cache"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="This
+ column tells you if a task tried to restore output
+ from the <code>sstate-cache</code> directory or
+ mirrors, and reports the result: Succeeded, Failed or File
+ not in cache"></span>
Cache attempt
</th>
</tr>
@@ -123,26 +148,30 @@
<tr {{ task|task_color }} >
- <td><a {{ task|task_color }} href="{% url "task" build.pk task.pk %}">{{task.order}}</a></td>
+ <td>{{task.order}}</td>
<td>
- <a {{ task|task_color }} href="{% url "task" build.pk task.pk %}">{{task.task_name}}</a>
- {% if task.get_description %}<i class="icon-question-sign get-help hover-help" title="" data-original-title="{{task.get_description}}"></i> {% endif %}
+ <a href="{% url "task" build.pk task.pk %}">{{task.task_name}}</a>
+ {% if task.get_description %}<span class="glyphicon
+ glyphicon-question-sign get-help hover-help"
+ title="{{task.get_description}}"></span>
+ {% endif %}
</td>
- <td><a {{ task|task_color }} href="{% url "task" build.pk task.pk %}">{{task.get_executed_display}}</a></td>
+ <td>{{task.get_executed_display}}</td>
- <td>
- <a {{ task|task_color }} href="{% url "task" build.pk task.pk %}">{{task.get_outcome_display}} </a>
+ <td>{{task.get_outcome_display}}
{% if task.outcome = task.OUTCOME_FAILED %}
<a href="{% url 'build_artifact' build.pk "tasklogfile" task.pk %}">
- <i class="icon-download-alt" title="Download task log file"></i>
+ <span class="glyphicon glyphicon-download-alt
+ get-help" title="Download task log
+ file"></span>
</a>
{% endif %}
<i class="icon-question-sign get-help hover-help" title="{{task.get_outcome_help}}"></i>
</td>
<td>
{% ifnotequal task.sstate_result task.SSTATE_NA %}
- <a {{ task|task_color }} href="{% url "task" build.pk task.pk %}">{{task.get_sstate_result_display}}</a>
+ {{task.get_sstate_result_display}}
{% endifnotequal %}
</td>
@@ -151,6 +180,7 @@
{% endfor %}
</tbody>
</table>
+ </div>
{% endif %}
</div>
<div class="tab-pane {{tab_states.3}}" id="dependencies">
@@ -177,13 +207,13 @@
<tr>
<td><a href="{% url "recipe" build.pk rr.depends_on.pk %}">{{rr.depends_on.name}}</a>
{% if rr.via %}
- <span class="muted">satisfied via {{rr.via.name}}</span>
- <i class="icon-question-sign get-help hover-help"
+ <span class="text-muted">satisfied via <code class="text-muted">{{rr.via.name}}</code></span>
+ <span class="glyphicon glyphicon-question-sign get-help hover-help"
title="This dependency is satisfied by the PROVIDES value
- {{rr.via.name}} in the {{rr.depends_on.name}} recipe"></i>
+ <code>{{rr.via.name}}</code> in the <code>{{rr.depends_on.name}}</code> recipe"></span>
{% endif %}
</td>
- <td><a href="{% url "recipe" build.pk rr.depends_on.pk %}">{{rr.depends_on.version}}</a></td>
+ <td>{{rr.depends_on.version}}</td>
</tr>
{% endfor %}
@@ -216,13 +246,13 @@
<tr>
<td><a href="{% url "recipe" build.pk rr.recipe.pk %}">{{rr.recipe.name}}</a>
{% if rr.via %}
- <span class="muted"> satisfied via {{rr.via.name}}</span>
- <i class="icon-question-sign get-help hover-help"
+ <span class="text-muted"> satisfied via <code class="text-muted">{{rr.via.name}}</code></span>
+ <span class="glyphicon glyphicon-question-sign get-help hover-help"
title="This dependency is satisfied by the PROVIDES value
- {{rr.via.name}} in the {{rr.depends_on.name}} recipe"></i>
+ <code>{{rr.via.name}}</code> in the <code>{{rr.depends_on.name}}</code> recipe"></i>
{% endif %}
</td>
- <td><a href="{% url "recipe" build.pk rr.recipe.pk %}">{{rr.recipe.version}}</a></td>
+ <td>{{rr.recipe.version}}</td>
</tr>
{% endfor %}
@@ -257,7 +287,7 @@
{% if object.section %}
<dt>
Section
- <i class="icon-question-sign get-help" title="The section in which recipes should be categorized"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The section in which recipes should be categorized"></span>
</dt>
<dd>{{object.section}}</dd>
{% endif %}
diff --git a/bitbake/lib/toaster/toastergui/templates/recipe_packages.html b/bitbake/lib/toaster/toastergui/templates/recipe_packages.html
index 2c2efd8..700704b 100644
--- a/bitbake/lib/toaster/toastergui/templates/recipe_packages.html
+++ b/bitbake/lib/toaster/toastergui/templates/recipe_packages.html
@@ -13,7 +13,7 @@
<div class="row">
<div class="col-md-12">
- <div class="page-header">
+ <div class="page-header build-data">
<h1>{{recipe.name}}_{{recipe.version}}</h1>
</div>
</div>
@@ -21,28 +21,33 @@
<div class="row">
<div class="col-md-8 tabbable">
- <ul class="nav nav-pills">
+ <ul class="nav nav-tabs">
<li>
<a href="{% url "recipe" build.pk recipe.id "1" %}">
- <i class="icon-question-sign get-help" title="Build-related information about the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="Build-related
+ information about the recipe"></span>
Recipe details
</a>
</li>
<li class="active">
<a href="#packages-built" data-toggle="tab">
- <i class="icon-question-sign get-help" title="The packaged output resulting from building the recipe"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The packaged
+ output resulting from building the recipe"></span>
Packages ({{object_count}})
</a>
</li>
<li>
<a href="{% url "recipe" build.pk recipe.id "3" %}">
- <i class="icon-question-sign get-help" title="The recipe build-time dependencies (i.e. other recipes)"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+ build-time dependencies (i.e. other recipes)"></span>
Build dependencies ({{recipe.r_dependencies_recipe.all.count}})
</a>
</li>
<li>
<a href="{% url "recipe" build.pk recipe.id "4" %}">
- <i class="icon-question-sign get-help" title="The recipe build-time reverse dependencies (i.e. the recipes that depend on this recipe)"></i>
+ <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+ build-time reverse dependencies (i.e. the recipes that
+ depend on this recipe)"></span>
Reverse build dependencies ({{recipe.r_dependencies_depends.all.count}})
</a>
</li>
@@ -75,8 +80,8 @@
<tr>
<td><a href="{% url "package_built_detail" build.pk package.pk %}">{{package.name}}</a></td>
- <td><a href="{% url "package_built_detail" build.pk package.pk %}">{{package.version}}_{{package.revision}}</a></td>
- <td class="sizecol"><a href="{% url "package_built_detail" build.pk package.pk %}">{{package.size|filtered_filesizeformat}}</a></td>
+ <td>{{package.version}}_{{package.revision}}</td>
+ <td class="sizecol">{{package.size|filtered_filesizeformat}}</td>
</tr>
{% endfor %}
--
1.9.1
More information about the toaster
mailing list